commit

components/Layout/Header.js

@@ -1,232 +1,232 @@
-import React, { Component } from "react";
-import Router from "next/router";
-import PropTypes from "prop-types";
-import Link from "next/link";
-import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, ListGroup, ListGroupItem } from "reactstrap";
-import { logout } from "@/actions/auth";
-
-import { connect } from "react-redux";
-import { bindActionCreators } from "redux";
-import * as actions from "../../store/actions/actions";
-
-import ToggleFullscreen from "../Common/ToggleFullscreen";
-import HeaderSearch from "./HeaderSearch";
-import { ToastContainer, toast } from "react-toastify";
-
-import "react-toastify/dist/ReactToastify.css";
-
-class Header extends Component {
-	state = {
-		navSearchOpen: false,
-	};
-
-	toggleNavSearch = (e) => {
-		e.preventDefault();
-		this.setState({
-			navSearchOpen: !this.state.navSearchOpen,
-		});
-	};
-
-	closeNavSearch = (e) => {
-		e.preventDefault();
-		this.setState({
-			navSearchOpen: false,
-		});
-	};
-
-	toggleUserblock = (e) => {
-		e.preventDefault();
-		this.props.actions.toggleSetting("showUserBlock");
-	};
-
-	toggleOffsidebar = (e) => {
-		e.preventDefault();
-		this.props.actions.toggleSetting("offsidebarOpen");
-	};
-
-	toggleCollapsed = (e) => {
-		e.preventDefault();
-		this.props.actions.toggleSetting("isCollapsed");
-		this.resize();
-	};
-
-	toggleAside = (e) => {
-		e.preventDefault();
-		this.props.actions.toggleSetting("asideToggled");
-	};
-
-	handleLogout = async (e) => {
-		e.preventDefault();
-		// await logout();
-		this.props.tokenNull();
-		this.props.userNull();
-		// if (cek.success) {
-		Router.push({ pathname: "/app" });
-		// }
-	};
-
-	resize() {
-		// all IE friendly dispatchEvent
-		var evt = document.createEvent("UIEvents");
-		evt.initUIEvent("resize", true, false, window, 0);
-		window.dispatchEvent(evt);
-		// modern dispatchEvent way
-		// window.dispatchEvent(new Event('resize'));
-	}
-
-	render() {
-		return (
-			<header className="topnavbar-wrapper">
-				<ToastContainer />
-				{/* START Top Navbar */}
-				<nav className="navbar topnavbar">
-					{/* START navbar header */}
-					<div className="navbar-header">
-						<a className="navbar-brand" href="#/">
-							<div className="brand-logo">
-								<img className="img-fluid" src="/static/img/logo-inner.png" alt="App Logo" style={{ height: 35 }} />
-							</div>
-							<div className="brand-logo-collapsed">
-								<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" />
-							</div>
-						</a>
-					</div>
-					{/* END navbar header */}
-
-					{/* START Left navbar */}
-					<ul className="navbar-nav mr-auto flex-row">
-						<li className="nav-item">
-							{/* Button used to collapse the left sidebar. Only visible on tablet and desktops */}
-							<a href="" className="nav-link d-none d-md-block d-lg-block d-xl-block" onClick={this.toggleCollapsed}>
-								<em className="fas fa-bars" />
-							</a>
-							{/* Button to show/hide the sidebar on mobile. Visible on mobile only. */}
-							<a href="" className="nav-link sidebar-toggle d-md-none" onClick={this.toggleAside}>
-								<em className="fas fa-bars" />
-							</a>
-						</li>
-						{/* START User avatar toggle */}
-						{/* <li className="nav-item d-none d-md-block">
-							<a className="nav-link" onClick={this.toggleUserblock}>
-								<em className="icon-user" />
-							</a>
-						</li> */}
-						{/* END User avatar toggle */}
-						{/* START lock screen */}
-						{/* <li className="nav-item d-none d-md-block">
-							<Link href="/pages/lock" as="/lock">
-								<a title="Lock screen" className="nav-link">
-									<em className="icon-lock" />
-								</a>
-							</Link>
-						</li> */}
-						{/* END lock screen */}
-					</ul>
-					{/* END Left navbar */}
-					{/* START Right Navbar */}
-					<ul className="navbar-nav flex-row">
-						{/* Search icon */}
-						{/* <li className="nav-item">
-							<a className="nav-link" href="" onClick={this.toggleNavSearch}>
-								<em className="icon-magnifier" />
-							</a>
-						</li> */}
-						{/* Fullscreen (only desktops) */}
-						<li className="nav-item d-none d-md-block">
-							<ToggleFullscreen className="nav-link" />
-						</li>
-						{/* START Alert menu */}
-						{/* <UncontrolledDropdown nav inNavbar className="dropdown-list">
-							<DropdownToggle nav className="dropdown-toggle-nocaret">
-								<em className="icon-bell" />
-								<span className="badge badge-danger">11</span>
-							</DropdownToggle> */}
-						{/* START Dropdown menu */}
-						{/* <DropdownMenu right className="dropdown-menu-right animated flipInX">
-								<DropdownItem> */}
-						{/* START list group */}
-						{/* <ListGroup>
-										<ListGroupItem action tag="a" href="" onClick={(e) => e.preventDefault()}>
-											<div className="media">
-												<div className="align-self-start mr-2">
-													<em className="fab fa-twitter fa-2x text-info" />
-												</div>
-												<div className="media-body">
-													<p className="m-0">New followers</p>
-													<p className="m-0 text-muted text-sm">1 new follower</p>
-												</div>
-											</div>
-										</ListGroupItem>
-										<ListGroupItem action tag="a" href="" onClick={(e) => e.preventDefault()}>
-											<div className="media">
-												<div className="align-self-start mr-2">
-													<em className="fa fa-envelope fa-2x text-warning" />
-												</div>
-												<div className="media-body">
-													<p className="m-0">New e-mails</p>
-													<p className="m-0 text-muted text-sm">You have 10 new emails</p>
-												</div>
-											</div>
-										</ListGroupItem>
-										<ListGroupItem action tag="a" href="" onClick={(e) => e.preventDefault()}>
-											<div className="media">
-												<div className="align-self-start mr-2">
-													<em className="fa fa-tasks fa-2x text-success" />
-												</div>
-												<div className="media-body">
-													<p className="m-0">Pending Tasks</p>
-													<p className="m-0 text-muted text-sm">11 pending task</p>
-												</div>
-											</div>
-										</ListGroupItem>
-										<ListGroupItem action tag="a" href="" onClick={(e) => e.preventDefault()}>
-											<span className="d-flex align-items-center">
-												<span className="text-sm">More notifications</span>
-												<span className="badge badge-danger ml-auto">14</span>
-											</span>
-										</ListGroupItem>
-									</ListGroup> */}
-						{/* END list group */}
-						{/* </DropdownItem>
-							</DropdownMenu> */}
-						{/* END Dropdown menu */}
-						{/* </UncontrolledDropdown> */}
-						{/* END Alert menu */}
-						<li className="nav-item">
-							<a className="nav-link" href="" onClick={this.handleLogout}>
-								<em className="icon-logout" />
-							</a>
-						</li>
-						{/* START Offsidebar button */}
-						<li className="nav-item">
-							<a className="nav-link" href="" onClick={this.toggleOffsidebar}>
-								<em className="icon-notebook" />
-							</a>
-						</li>
-						{/* END Offsidebar menu */}
-					</ul>
-					{/* END Right Navbar */}
-
-					{/* START Search form */}
-					<HeaderSearch isOpen={this.state.navSearchOpen} onClose={this.closeNavSearch} />
-					{/* END Search form */}
-				</nav>
-				{/* END Top Navbar */}
-			</header>
-		);
-	}
-}
-
-Header.propTypes = {
-	actions: PropTypes.object,
-	settings: PropTypes.object,
-};
-
-const mapStateToProps = (state) => ({ settings: state.settings });
-const mapDispatchToProps = (dispatch) => ({
-	actions: bindActionCreators(actions, dispatch),
-	tokenNull: () => dispatch({ type: "SET_TOKEN", payload: null }),
-	userNull: () => dispatch({ type: "SET_USER", payload: null }),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Header);
+import React, { Component } from "react";
+import Router from "next/router";
+import PropTypes from "prop-types";
+import Link from "next/link";
+import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, ListGroup, ListGroupItem } from "reactstrap";
+import { logout } from "@/actions/auth";
+
+import { connect } from "react-redux";
+import { bindActionCreators } from "redux";
+import * as actions from "../../store/actions/actions";
+
+import ToggleFullscreen from "../Common/ToggleFullscreen";
+import HeaderSearch from "./HeaderSearch";
+import { ToastContainer, toast } from "react-toastify";
+
+import "react-toastify/dist/ReactToastify.css";
+
+class Header extends Component {
+	state = {
+		navSearchOpen: false,
+	};
+
+	toggleNavSearch = (e) => {
+		e.preventDefault();
+		this.setState({
+			navSearchOpen: !this.state.navSearchOpen,
+		});
+	};
+
+	closeNavSearch = (e) => {
+		e.preventDefault();
+		this.setState({
+			navSearchOpen: false,
+		});
+	};
+
+	toggleUserblock = (e) => {
+		e.preventDefault();
+		this.props.actions.toggleSetting("showUserBlock");
+	};
+
+	toggleOffsidebar = (e) => {
+		e.preventDefault();
+		this.props.actions.toggleSetting("offsidebarOpen");
+	};
+
+	toggleCollapsed = (e) => {
+		e.preventDefault();
+		this.props.actions.toggleSetting("isCollapsed");
+		this.resize();
+	};
+
+	toggleAside = (e) => {
+		e.preventDefault();
+		this.props.actions.toggleSetting("asideToggled");
+	};
+
+	handleLogout = async (e) => {
+		e.preventDefault();
+		// await logout();
+		this.props.tokenNull();
+		this.props.userNull();
+		// if (cek.success) {
+		Router.push({ pathname: "/app" });
+		// }
+	};
+
+	resize() {
+		// all IE friendly dispatchEvent
+		var evt = document.createEvent("UIEvents");
+		evt.initUIEvent("resize", true, false, window, 0);
+		window.dispatchEvent(evt);
+		// modern dispatchEvent way
+		// window.dispatchEvent(new Event('resize'));
+	}
+
+	render() {
+		return (
+			<header className="topnavbar-wrapper">
+				<ToastContainer />
+				{/* START Top Navbar */}
+				<nav className="navbar topnavbar">
+					{/* START navbar header */}
+					<div className="navbar-header">
+						<a className="navbar-brand" href="#/">
+							{/* <div className="brand-logo"> */}
+							<img className="img-fluid" src="/static/img/Logo-vputih.png" alt="App Logo" /><img className="img-text-vputih" src="/static/img/Logo-text-vputih.png" alt="App Logo" />
+							{/* </div> */}
+							<div className="brand-logo-collapsed">
+								<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" />
+							</div>
+						</a>
+					</div>
+					{/* END navbar header */}
+
+					{/* START Left navbar */}
+					<ul className="navbar-nav mr-auto flex-row">
+						<li className="nav-item">
+							{/* Button used to collapse the left sidebar. Only visible on tablet and desktops */}
+							<a href="" className="nav-link d-none d-md-block d-lg-block d-xl-block" onClick={this.toggleCollapsed}>
+								<em className="fas fa-bars" />
+							</a>
+							{/* Button to show/hide the sidebar on mobile. Visible on mobile only. */}
+							<a href="" className="nav-link sidebar-toggle d-md-none" onClick={this.toggleAside}>
+								<em className="fas fa-bars" />
+							</a>
+						</li>
+						{/* START User avatar toggle */}
+						{/* <li className="nav-item d-none d-md-block">
+							<a className="nav-link" onClick={this.toggleUserblock}>
+								<em className="icon-user" />
+							</a>
+						</li> */}
+						{/* END User avatar toggle */}
+						{/* START lock screen */}
+						{/* <li className="nav-item d-none d-md-block">
+							<Link href="/pages/lock" as="/lock">
+								<a title="Lock screen" className="nav-link">
+									<em className="icon-lock" />
+								</a>
+							</Link>
+						</li> */}
+						{/* END lock screen */}
+					</ul>
+					{/* END Left navbar */}
+					{/* START Right Navbar */}
+					<ul className="navbar-nav flex-row">
+						{/* Search icon */}
+						{/* <li className="nav-item">
+							<a className="nav-link" href="" onClick={this.toggleNavSearch}>
+								<em className="icon-magnifier" />
+							</a>
+						</li> */}
+						{/* Fullscreen (only desktops) */}
+						<li className="nav-item d-none d-md-block">
+							<ToggleFullscreen className="nav-link" />
+						</li>
+						{/* START Alert menu */}
+						{/* <UncontrolledDropdown nav inNavbar className="dropdown-list">
+							<DropdownToggle nav className="dropdown-toggle-nocaret">
+								<em className="icon-bell" />
+								<span className="badge badge-danger">11</span>
+							</DropdownToggle> */}
+						{/* START Dropdown menu */}
+						{/* <DropdownMenu right className="dropdown-menu-right animated flipInX">
+								<DropdownItem> */}
+						{/* START list group */}
+						{/* <ListGroup>
+										<ListGroupItem action tag="a" href="" onClick={(e) => e.preventDefault()}>
+											<div className="media">
+												<div className="align-self-start mr-2">
+													<em className="fab fa-twitter fa-2x text-info" />
+												</div>
+												<div className="media-body">
+													<p className="m-0">New followers</p>
+													<p className="m-0 text-muted text-sm">1 new follower</p>
+												</div>
+											</div>
+										</ListGroupItem>
+										<ListGroupItem action tag="a" href="" onClick={(e) => e.preventDefault()}>
+											<div className="media">
+												<div className="align-self-start mr-2">
+													<em className="fa fa-envelope fa-2x text-warning" />
+												</div>
+												<div className="media-body">
+													<p className="m-0">New e-mails</p>
+													<p className="m-0 text-muted text-sm">You have 10 new emails</p>
+												</div>
+											</div>
+										</ListGroupItem>
+										<ListGroupItem action tag="a" href="" onClick={(e) => e.preventDefault()}>
+											<div className="media">
+												<div className="align-self-start mr-2">
+													<em className="fa fa-tasks fa-2x text-success" />
+												</div>
+												<div className="media-body">
+													<p className="m-0">Pending Tasks</p>
+													<p className="m-0 text-muted text-sm">11 pending task</p>
+												</div>
+											</div>
+										</ListGroupItem>
+										<ListGroupItem action tag="a" href="" onClick={(e) => e.preventDefault()}>
+											<span className="d-flex align-items-center">
+												<span className="text-sm">More notifications</span>
+												<span className="badge badge-danger ml-auto">14</span>
+											</span>
+										</ListGroupItem>
+									</ListGroup> */}
+						{/* END list group */}
+						{/* </DropdownItem>
+							</DropdownMenu> */}
+						{/* END Dropdown menu */}
+						{/* </UncontrolledDropdown> */}
+						{/* END Alert menu */}
+						<li className="nav-item">
+							<a className="nav-link" href="" onClick={this.handleLogout}>
+								<em className="icon-logout" />
+							</a>
+						</li>
+						{/* START Offsidebar button */}
+						<li className="nav-item">
+							<a className="nav-link" href="" onClick={this.toggleOffsidebar}>
+								<em className="icon-notebook" />
+							</a>
+						</li>
+						{/* END Offsidebar menu */}
+					</ul>
+					{/* END Right Navbar */}
+
+					{/* START Search form */}
+					<HeaderSearch isOpen={this.state.navSearchOpen} onClose={this.closeNavSearch} />
+					{/* END Search form */}
+				</nav>
+				{/* END Top Navbar */}
+			</header>
+		);
+	}
+}
+
+Header.propTypes = {
+	actions: PropTypes.object,
+	settings: PropTypes.object,
+};
+
+const mapStateToProps = (state) => ({ settings: state.settings });
+const mapDispatchToProps = (dispatch) => ({
+	actions: bindActionCreators(actions, dispatch),
+	tokenNull: () => dispatch({ type: "SET_TOKEN", payload: null }),
+	userNull: () => dispatch({ type: "SET_USER", payload: null }),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Header);

components/Layout/Menu.js

@@ -11,19 +11,25 @@ const Menu = [
 	},
 	{
 		name: "Pelaporan",
+		path: "/app/pelaporan",
 		icon: "icon-notebook",
-		translate: "sidebar.nav.LAPORAN",
-		submenu: [
-			{
-				name: "List Laporan",
-				path: "/app/pelaporan",
-			},
-			{
-				name: "Laporan ditutup",
-				path: "/app/laporan-ditutup",
-			},
-		],
+		translate: "sidebar.nav.PELAPORAN",
 	},
+	// {
+	// 	name: "Pelaporan",
+	// 	icon: "icon-notebook",
+	// 	translate: "sidebar.nav.LAPORAN",
+	// 	submenu: [
+	// 		{
+	// 			name: "List Laporan",
+	// 			path: "/app/pelaporan",
+	// 		},
+	// 		{
+	// 			name: "Laporan ditutup",
+	// 			path: "/app/laporan-ditutup",
+	// 		},
+	// 	],
+	// },
 	{
 		name: "Penjadwalan Evaluasi",
 		path: "/app/penjadwalan",

components/Layout/MenuLLDIKTI.js

@@ -11,19 +11,25 @@ const Menu = [
 	},
 	{
 		name: "Pelaporan",
+		path: "/app/pelaporan",
 		icon: "icon-notebook",
-		translate: "sidebar.nav.LAPORAN",
-		submenu: [
-			{
-				name: "List Laporan",
-				path: "/app/pelaporan",
-			},
-			{
-				name: "Laporan ditutup",
-				path: "/app/laporan-ditutup",
-			},
-		],
+		translate: "sidebar.nav.PELAPORAN",
 	},
+	// {
+	// 	name: "Pelaporan",
+	// 	icon: "icon-notebook",
+	// 	translate: "sidebar.nav.LAPORAN",
+	// 	submenu: [
+	// 		{
+	// 			name: "List Laporan",
+	// 			path: "/app/pelaporan",
+	// 		},
+	// 		{
+	// 			name: "Laporan ditutup",
+	// 			path: "/app/laporan-ditutup",
+	// 		},
+	// 	],
+	// },
 	{
 		name: "Penjadwalan Evaluasi",
 		path: "/app/penjadwalan",

components/Main/Login.js

@@ -1,133 +1,132 @@
-import React, { Component } from "react";
-import { Input, Card, CardBody, Button } from "reactstrap";
-import Router from "next/router";
-import FormValidator from "@/components/Forms/Validator.js";
-import { connect } from "react-redux";
-import { login, getUser } from "@/actions/auth";
-import axiosAPI from "@/config/axios";
-import { getPT } from "@/actions/PT";
-
-class Login extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			/* Group each form state in an object.
-           Property name MUST match the form name */
-			error: null,
-			formLogin: {
-				username: "",
-				password: "",
-			},
-		};
-	}
-
-	/**
-	 * Validate input using onChange event
-	 * @param  {String} formName The name of the form in the state object
-	 * @return {Function} a function used for the event
-	 */
-	validateOnChange = (event) => {
-		const input = event.target;
-		const form = input.form;
-		const value = input.type === "checkbox" ? input.checked : input.value;
-
-		const result = FormValidator.validate(input);
-
-		this.setState({
-			[form.name]: {
-				...this.state[form.name],
-				[input.name]: value,
-				errors: {
-					...this.state[form.name].errors,
-					[input.name]: result,
-				},
-			},
-		});
-	};
-
-	onSubmit = async (e) => {
-		try {
-			const form = e.target;
-			const inputs = [...form.elements].filter((i) => ["INPUT", "SELECT"].includes(i.nodeName));
-
-			const { errors, hasError } = FormValidator.bulkValidate(inputs);
-
-			this.setState({
-				[form.name]: {
-					...this.state[form.name],
-					errors,
-				},
-			});
-
-			console.log(hasError ? "Form has errors. Check!" : "Form Submitted!");
-			e.preventDefault();
-			if (!hasError) {
-				const { username, password } = this.state.formLogin;
-				const auth = await login(username, password);
-				this.props.setToken(auth.data.token);
-				this.props.setUser(auth.data.user);
-				axiosAPI.defaults.headers.common["Authorization"] = auth.data.token;
-				if (auth.data.user.role.id === 2022) {
-					Router.push({ pathname: "/pt/pemantauan" });
-				} else {
-					Router.push({ pathname: "/app/pemantauan" });
-				}
-			}
-		} catch (error) {
-			this.setState({ error: error.response.data.message || error.response });
-		}
-	};
-
-	/* Simplify error check */
-	hasError = (formName, inputName, method) => {
-		return this.state[formName] && this.state[formName].errors && this.state[formName].errors[inputName] && this.state[formName].errors[inputName][method];
-	};
-
-	render() {
-		return (
-			<Card className="card card-flat">
-				<img className="card-img-top" src="/static/img/logo-inner.png" alt="Logo" />
-				<CardBody className="card-body">
-					{" "}
-					<h5 className="card-title text-center py-2 bg-gray">Sistem Informasi Pengendalian Kelembagaan Perguruan Tinggi pada Pendidikan Tinggi Akademik</h5>
-					{this.state.error}
-					<form onSubmit={this.onSubmit} method="post" name="formLogin">
-						<div className="form-group">
-							<label className="col-form-label">Username *</label>
-							<Input type="text" name="username" invalid={this.hasError("formLogin", "username", "required")} onChange={this.validateOnChange} data-validate='["required"]' value={this.state.formLogin.username} />
-							{this.hasError("formLogin", "username", "required") && <span className="invalid-feedback">Field is required</span>}
-						</div>
-						<div className="form-group">
-							<label className="col-form-label">Password *</label>
-							<Input
-								type="password"
-								id="id-password"
-								name="password"
-								invalid={this.hasError("formLogin", "password", "required")}
-								onChange={this.validateOnChange}
-								data-validate='["required"]'
-								value={this.state.formLogin.password}
-							/>
-							<span className="invalid-feedback">Field is required</span>
-						</div>
-						<div className="required">* Required fields</div>
-						<span>Login Menggunakan Akun PDDIKTI</span>
-
-						<Button color="info" type="submit" block className=" mt-3">
-							Login
-						</Button>
-					</form>
-				</CardBody>
-			</Card>
-		);
-	}
-}
-
-const mapStateToProps = (state) => ({ user: state.user });
-const mapDispatchToProps = (dispatch) => ({
-	setUser: (payload) => dispatch({ type: "SET_USER", payload }),
-	setToken: (payload) => dispatch({ type: "SET_TOKEN", payload }),
-	setPT: (payload) => dispatch({ type: "SET_PT", payload }),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Login);
+import React, { Component } from "react";
+import { Input, Card, CardBody, Button } from "reactstrap";
+import Router from "next/router";
+import FormValidator from "@/components/Forms/Validator.js";
+import { connect } from "react-redux";
+import { login, getUser } from "@/actions/auth";
+import axiosAPI from "@/config/axios";
+import { getPT } from "@/actions/PT";
+
+class Login extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			/* Group each form state in an object.
+           Property name MUST match the form name */
+			error: null,
+			formLogin: {
+				username: "",
+				password: "",
+			},
+		};
+	}
+
+	/**
+	 * Validate input using onChange event
+	 * @param  {String} formName The name of the form in the state object
+	 * @return {Function} a function used for the event
+	 */
+	validateOnChange = (event) => {
+		const input = event.target;
+		const form = input.form;
+		const value = input.type === "checkbox" ? input.checked : input.value;
+
+		const result = FormValidator.validate(input);
+
+		this.setState({
+			[form.name]: {
+				...this.state[form.name],
+				[input.name]: value,
+				errors: {
+					...this.state[form.name].errors,
+					[input.name]: result,
+				},
+			},
+		});
+	};
+
+	onSubmit = async (e) => {
+		try {
+			const form = e.target;
+			const inputs = [...form.elements].filter((i) => ["INPUT", "SELECT"].includes(i.nodeName));
+
+			const { errors, hasError } = FormValidator.bulkValidate(inputs);
+
+			this.setState({
+				[form.name]: {
+					...this.state[form.name],
+					errors,
+				},
+			});
+
+			console.log(hasError ? "Form has errors. Check!" : "Form Submitted!");
+			e.preventDefault();
+			if (!hasError) {
+				const { username, password } = this.state.formLogin;
+				const auth = await login(username, password);
+				this.props.setToken(auth.data.token);
+				this.props.setUser(auth.data.user);
+				axiosAPI.defaults.headers.common["Authorization"] = auth.data.token;
+				if (auth.data.user.role.id === 2022) {
+					Router.push({ pathname: "/pt/pemantauan" });
+				} else {
+					Router.push({ pathname: "/app/pemantauan" });
+				}
+			}
+		} catch (error) {
+			this.setState({ error: error.response.data.message || error.response });
+		}
+	};
+
+	/* Simplify error check */
+	hasError = (formName, inputName, method) => {
+		return this.state[formName] && this.state[formName].errors && this.state[formName].errors[inputName] && this.state[formName].errors[inputName][method];
+	};
+
+	render() {
+		return (
+			<Card className="card card-flat">
+				<img className="card-img-top" src="/static/img/Logo-Sidali.png" alt="Logo" />
+				<CardBody className="card-body">
+					{" "}
+					<h5 className="card-title text-left py-2 bg-gray border-radius-login"><img className="icon-triangle" src="/static/img/icon-caution.png"></img><b>Login Menggunakan Akun PDDIKTI </b></h5>
+					{this.state.error}
+					<form onSubmit={this.onSubmit} method="post" name="formLogin">
+						<div className="form-group">
+							<label className="col-form-label">Username *</label>
+							<Input type="text" name="username" invalid={this.hasError("formLogin", "username", "required")} onChange={this.validateOnChange} data-validate='["required"]' value={this.state.formLogin.username} />
+							{this.hasError("formLogin", "username", "required") && <span className="invalid-feedback">Field is required</span>}
+						</div>
+						<div className="form-group">
+							<label className="col-form-label">Password *</label>
+							<Input
+								type="password"
+								id="id-password"
+								name="password"
+								invalid={this.hasError("formLogin", "password", "required")}
+								onChange={this.validateOnChange}
+								data-validate='["required"]'
+								value={this.state.formLogin.password}
+							/>
+							<span className="invalid-feedback">Field is required</span>
+						</div>
+						{/* <div className="required">* Required fields</div>
+						<span>Login Menggunakan Akun PDDIKTI</span> */}
+						<Button color="info" type="submit" block className=" mt-3 btn-login">
+							Login
+						</Button>
+					</form>
+				</CardBody>
+			</Card>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user });
+const mapDispatchToProps = (dispatch) => ({
+	setUser: (payload) => dispatch({ type: "SET_USER", payload }),
+	setToken: (payload) => dispatch({ type: "SET_TOKEN", payload }),
+	setPT: (payload) => dispatch({ type: "SET_PT", payload }),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Login);

components/Public/DetailLaporan.js

@@ -1,83 +1,83 @@
-import Scrollable from "@/components/Common/Scrollable";
-import moment from "moment";
-import { Col, FormGroup } from "reactstrap";
-import { API_URL } from "@/env";
-
-function DetailLaporan({ data }) {
-	return (
-		<>
-			<p className="lead bb">Detail Laporan</p>
-			<form className="form-horizontal">
-				<FormGroup row>
-					<Col md="4">Nomor Laporan:</Col>
-					<Col md="8">
-						<strong>{data._number}</strong>
-					</Col>
-				</FormGroup>
-				<FormGroup row>
-					<Col md="4">Nama Perguruan Tinggi:</Col>
-					<Col md="8">
-						<strong>{data.pt.nama}</strong>
-					</Col>
-				</FormGroup>
-				<FormGroup row>
-					<Col md="4">Jenis Pelanggaran:</Col>
-					<Col md="8">
-						<Scrollable height="125px" className="list-group">
-							<ul>
-								{data.pelanggaran.map((e) => (
-									<li>{e.pelanggaran}</li>
-								))}
-							</ul>
-						</Scrollable>
-					</Col>
-				</FormGroup>
-				<FormGroup row>
-					<Col md="4">Keterangan Laporan:</Col>
-					<Col md="8">
-						<Scrollable height="100px" className="list-group">
-							<p>{data.keterangan}</p>
-						</Scrollable>
-					</Col>
-				</FormGroup>
-				<FormGroup row>
-					<Col md="4">Dibuat Pada:</Col>
-					<Col md="8">
-						<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
-					</Col>
-				</FormGroup>
-				<FormGroup row>
-					<Col md="4">Status:</Col>
-					<Col md="8">
-						<div className="badge badge-info">{!data.aktif ? "Laporan ditutup" : data.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Ditindaklanjuti LLDIKTI"}</div>
-					</Col>
-				</FormGroup>
-				<FormGroup row>
-					<Col md="4">File Pendukung:</Col>
-					<Col md="8">
-						<Scrollable height="120px" className="list-group">
-							<table className="table table-bordered bg-transparent">
-								<tbody>
-									{data.dokumen.map((e, index) => (
-										<tr key={index}>
-											<td>
-												<em className="fa-lg far fa-file-code"></em>
-											</td>
-											<td>
-												<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
-													{e.judul}
-												</a>
-											</td>
-										</tr>
-									))}
-								</tbody>
-							</table>
-						</Scrollable>
-					</Col>
-				</FormGroup>
-			</form>
-		</>
-	);
-}
-
-export default DetailLaporan;
+import Scrollable from "@/components/Common/Scrollable";
+import moment from "moment";
+import { Col, FormGroup } from "reactstrap";
+import { API_URL } from "@/env";
+
+function DetailLaporan({ data }) {
+	return (
+		<>
+			<p className="lead bb tengah">Detail Laporan</p>
+			<form className="form-horizontal">
+				<FormGroup row>
+					<Col md="4">Nomor Laporan:</Col>
+					<Col md="8">
+						<strong>{data.no_laporan}</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Nama Perguruan Tinggi:</Col>
+					<Col md="8">
+						<strong>{data.pt.nama}</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Jenis Pelanggaran:</Col>
+					<Col md="8">
+						<Scrollable height="125px" className="list-group">
+							<ul>
+								{data.pelanggaran.map((e) => (
+									<li>{e.pelanggaran}</li>
+								))}
+							</ul>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Keterangan Laporan:</Col>
+					<Col md="8">
+						<Scrollable height="100px" className="list-group">
+							<p>{data.keterangan}</p>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Dibuat Pada:</Col>
+					<Col md="8">
+						<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">Status:</Col>
+					<Col md="8">
+						<div className="badge badge-info">{!data.aktif ? "Laporan ditutup" : data.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Ditindaklanjuti LLDIKTI"}</div>
+					</Col>
+				</FormGroup>
+				<FormGroup row>
+					<Col md="4">File Pendukung:</Col>
+					<Col md="8">
+						<Scrollable height="120px" className="list-group">
+							<table className="table table-bordered bg-transparent">
+								<tbody>
+									{data.dokumen.map((e, index) => (
+										<tr key={index}>
+											<td>
+												<em className="fa-lg far fa-file-code"></em>
+											</td>
+											<td>
+												<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
+													{e.judul}
+												</a>
+											</td>
+										</tr>
+									))}
+								</tbody>
+							</table>
+						</Scrollable>
+					</Col>
+				</FormGroup>
+			</form>
+		</>
+	);
+}
+
+export default DetailLaporan;

config/axios.js

@@ -2,7 +2,7 @@ import axios from "axios";
 import { API_URL } from "@/env";
 
 const axiosAPI = axios.create({
-	baseURL: API_URL || "https://api.sidali.sixsenz.net/v1",
+	baseURL: API_URL || "http://localhost:5000/v1",
 	withCredentials: true,
 });
 

pages/app/index.js

@@ -1,85 +1,102 @@
-import React, { Component } from "react";
-import BasePage from "@/components/Layout/BasePage";
-import { Row, Col, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse, Jumbotron, Button } from "reactstrap";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import Link from "next/link";
-import Login from "@/components/Main/Login";
-
-const menu = [
-	{
-		title: "Home",
-		path: "/app",
-	},
-	{
-		title: "Buat Laporan",
-		path: "/laporan/new",
-	},
-	{
-		title: "Pemantauan",
-		path: "/pemantauan",
-	},
-];
-class App extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			isOpen: false,
-		};
-	}
-
-	static getInitialProps = ({ pathname }) => ({ pathname });
-
-	toggleCollapse = () => {
-		this.setState({
-			isOpen: !this.state.isOpen,
-		});
-	};
-
-	render() {
-		return (
-			<div>
-				<Navbar color="info" expand="md" dark>
-					<NavbarBrand href="/">
-						<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" /> Sidali
-					</NavbarBrand>
-					<NavbarToggler onClick={this.toggleCollapse} />
-					<Collapse isOpen={this.state.isOpen} navbar>
-						<Nav className="ml-auto" navbar>
-							{menu.map((e) => (
-								<NavItem active={e.path === this.props.pathname ? true : false}>
-									<Link href={e.path}>
-										<NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
-									</Link>
-								</NavItem>
-							))}
-						</Nav>
-					</Collapse>
-				</Navbar>
-				<ContentWrapper>
-					<Jumbotron>
-						<Row>
-							<Col lg={8} className="d-flex flex-column justify-content-center align-items-start">
-								<h1 className="display-5">Sistem Informasi Pengendalian Kelembagaan Perguruan Tinggi pada Pendidikan Tinggi Akademik</h1>
-								<p className="lead">Layanan Pelaporan Pelanggaran Perguruan Tinggi Penyelenggara Pendidikan Tinggi Akademik</p>
-								<hr className="my-4" />
-								<p>Disediakan kepada masyarakat untuk melaporkan pelanggaran perguruan tinggi yang menyelenggarakan pendidikan tinggi akademik</p>
-								<p className="lead">
-									<Link href="/laporan/new">
-										<button className="btn btn-info btn-lg">Buat Laporan</button>
-									</Link>
-								</p>
-							</Col>
-							<Col>
-								<Login />
-							</Col>
-						</Row>
-					</Jumbotron>
-				</ContentWrapper>
-			</div>
-		);
-	}
-}
-
-App.Layout = BasePage;
-
-export default App;
+import React, { Component } from "react";
+import BasePage from "@/components/Layout/BasePage";
+import { Row, Col, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse, Jumbotron, Button } from "reactstrap";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import Link from "next/link";
+import Login from "@/components/Main/Login";
+
+const menu = [
+	{
+		title: "Home",
+		path: "/app",
+	},
+	{
+		title: "Buat Laporan",
+		path: "/laporan/new",
+	},
+	{
+		title: "Pemantauan",
+		path: "/pemantauan",
+	},
+];
+class App extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			isOpen: false,
+		};
+	}
+
+	static getInitialProps = ({ pathname }) => ({ pathname });
+
+	toggleCollapse = () => {
+		this.setState({
+			isOpen: !this.state.isOpen,
+		});
+	};
+
+	render() {
+		return (
+			<div>
+				<Navbar className="navbar-color" expand="md" dark>
+					<NavbarBrand href="/">
+						<img className="img-fluid" src="/static/img/Logo-vputih.png" alt="App Logo" />
+						<img className="img-text-vputih" src="/static/img/Logo-text-vputih.png" alt="App Logo" />
+					</NavbarBrand>
+					<NavbarToggler onClick={this.toggleCollapse} />
+					<Collapse isOpen={this.state.isOpen} navbar>
+						<Nav className="ml-auto" navbar>
+							{menu.map((e) => (
+								<NavItem active={e.path === this.props.pathname ? true : false}>
+									<Link href={e.path}>
+										<NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
+									</Link>
+								</NavItem>
+							))}
+						</Nav>
+					</Collapse>
+				</Navbar>
+				<ContentWrapper>
+					<Jumbotron>
+						<Row>
+							<Col lg={8} className="d-flex flex-column justify-content-center align-items-start">
+								<h1 className="display-5">Sistem Informasi Pengendalian Kelembagaan Perguruan Tinggi pada Pendidikan Tinggi Akademik</h1>
+								<p className="lead">Layanan Pelaporan Pelanggaran Perguruan Tinggi Penyelenggara Pendidikan Tinggi Akademik</p>
+								<hr className="my-4" />
+								<p>Disediakan kepada masyarakat untuk melaporkan pelanggaran perguruan tinggi yang menyelenggarakan pendidikan tinggi akademik</p>
+								<p className="lead">
+									{/* <Link href="/laporan/new">
+										<button className="btn btn-info btn-lg"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/>Buat Laporan</button>
+									</Link> */}
+									<Link href="/laporan/new">
+										<Button color="info" className="btn-labeled">
+											<span className="btn-label">
+												<img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon" />
+											</span>
+											<text className="text-home-1">Buat Laporan</text>
+										</Button>
+									</Link>
+									<Link href="/pemantauan">
+										<Button color="info" className="btn-labeled-2">
+											<span className="btn-label">
+												<img className="icon-pemantauan" src="/static/img/icon-pemantauan.png" alt="icon" />
+											</span>
+											<text className="text-home-1">Pemantauan</text>
+										</Button>
+									</Link>
+								</p>
+							</Col>
+							<Col>
+								<Login />
+							</Col>
+						</Row>
+					</Jumbotron>
+				</ContentWrapper>
+			</div>
+		);
+	}
+}
+
+App.Layout = BasePage;
+
+export default App;

pages/laporan/new/index.js

@@ -1,334 +1,340 @@
-import React, { Component } from "react";
-import Router from "next/router";
-import BasePage from "@/components/Layout/BasePage";
-import { ptPublic } from "@/actions/PT";
-import { getPelanggaranPublic } from "@/actions/pelanggaran";
-import { createLaporanPublic } from "@/actions/pelaporan";
-import { notifLaporanBaru } from "@/actions/notifikasi";
-import Select from "react-select";
-import AsyncSelect from "react-select/async";
-import { Row, Col, FormGroup, Input, Card, CardBody, Button, CustomInput, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse } from "reactstrap";
-import Link from "next/link";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { createPublicUser } from "@/actions/user";
-import { ToastContainer, toast } from "react-toastify";
-import { Formik, Form, Field, ErrorMessage } from "formik";
-import * as Yup from "yup";
-
-import "react-toastify/dist/ReactToastify.css";
-
-const laporanSchema = Yup.object().shape({
-	no_laporan: Yup.string().required("Harap Diisi"),
-	no_hp: Yup.number().required("Harap Diisi"),
-	nama: Yup.string().required(),
-	setuju: Yup.boolean().isTrue(),
-	alamat: Yup.string().min(3).max(200).required(),
-	keterangan: Yup.string().min(3).max(200).required(),
-	email: Yup.string().email().required(),
-	pelanggaran_id: Yup.array().min(1).required(),
-	pt_id: Yup.string().required(),
-	foto: Yup.array().min(1).required("Harus ada"),
-	dokumen: Yup.mixed().nullable().notRequired(),
-	is_private: Yup.boolean().notRequired(),
-});
-
-const loadOptions = (inputValue, callback) => {
-	setTimeout(async () => {
-		const pt = await ptPublic({ search: inputValue });
-		const data = pt.data.map((e) => ({ value: e.id, label: e.nama, className: "State-ACT" }));
-		callback(data);
-	}, 1000);
-};
-
-const menu = [
-	{
-		title: "Home",
-		path: "/app",
-	},
-	{
-		title: "Buat Laporan",
-		path: "/laporan/new",
-	},
-	{
-		title: "Pemantauan",
-		path: "/pemantauan",
-	},
-];
-const selectInstanceId = 1;
-class App extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			isOpen: false,
-			inputValue: "",
-			pelaporanNumber: Math.floor(Date.now() * Math.random()),
-			nama: "",
-			alamat: "",
-			no_hp: "",
-			email: "",
-			fileIdentitas: null,
-			pelanggaran: [],
-			selectedPerguruanTinggi: {},
-			selectedJenis: [],
-			keteranganLaporan: "",
-			files: [],
-			isPrivate: false,
-			confirm: false,
-			msgError: [],
-		};
-	}
-
-	static getInitialProps = ({ pathname }) => ({ pathname });
-
-	componentDidMount = async () => {
-		const pelanggaran = await getPelanggaranPublic();
-		this.setState({ pelanggaran });
-	};
-
-	toggleCollapse = () => {
-		this.setState({
-			isOpen: !this.state.isOpen,
-		});
-	};
-
-	optionsJenisPelanggaran = (pelanggaran) => {
-		return pelanggaran.data.map((e) => ({ value: e._id, label: e.pelanggaran, className: "State-ACT" }));
-	};
-
-	setKeteranganPelaporan = (e) => {
-		this.setState({ keteranganLaporan: e.target.value });
-	};
-
-	handleChangeSelectJenis = (selectedJenis) => {
-		this.setState({ selectedJenis });
-	};
-
-	handleChangeSelectPerguruanTinggi = (selectedPerguruanTinggi) => {
-		this.setState({ selectedPerguruanTinggi });
-	};
-
-	handleInputChange = (newValue) => {
-		const inputValue = newValue.replace(/\W/g, "");
-		this.setState({ inputValue });
-		return inputValue;
-	};
-
-	handleKirim = async (data, { resetForm }) => {
-		const formdata = new FormData();
-		formdata.append("no_laporan", data.no_laporan);
-		formdata.append("pt_id", data.pt_id);
-		formdata.append("keterangan", data.keterangan);
-		formdata.append("is_private", data.is_private);
-		formdata.append("nama", data.nama);
-		formdata.append("alamat", data.alamat);
-		formdata.append("no_hp", data.no_hp);
-		formdata.append("email", data.email);
-		formdata.append("pelanggaran_id", data.pelanggaran_id.join(","));
-		formdata.append("foto", data.foto[0]);
-		if (data.dokumen.length > 0) {
-			Array.from(data.dokumen).forEach((e) => {
-				formdata.append("dokumen", e);
-			});
-		}
-
-		const toastid = toast.loading("Please wait...");
-		const success = await createLaporanPublic(formdata);
-		if (!success) {
-			toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
-		} else {
-			toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
-			Router.push("/laporan/new");
-		}
-	};
-
-	render() {
-		const { selectedJenis, pelanggaran } = this.state;
-		return (
-			<div>
-				<ToastContainer />
-				<Navbar color="info" expand="md" dark>
-					<NavbarBrand href="/">
-						<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" /> Sidali
-					</NavbarBrand>
-					<NavbarToggler onClick={this.toggleCollapse} />
-					<Collapse isOpen={this.state.isOpen} navbar>
-						<Nav className="ml-auto" navbar>
-							{menu.map((e) => (
-								<NavItem active={e.path === this.props.pathname ? true : false}>
-									<Link href={e.path}>
-										<NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
-									</Link>
-								</NavItem>
-							))}
-						</Nav>
-					</Collapse>
-				</Navbar>
-				<ContentWrapper>
-					<Row>
-						<Col lg={8} className="block-center d-block ">
-							<Card className="card-default">
-								<CardBody>
-									<Formik
-										initialValues={{
-											nama: "",
-											no_hp: "",
-											email: "",
-											alamat: "",
-											foto: [],
-											no_laporan: moment(new Date()).format("DDMM") + "" + Math.floor(Math.random() * 1000000),
-											pt_id: "",
-											pelanggaran_id: "",
-											keterangan: "",
-											dokumen: [],
-											setuju: false,
-											is_private: false,
-										}}
-										validationSchema={laporanSchema}
-										onSubmit={this.handleKirim}
-									>
-										<Form className="form-horizontal">
-											<p className="lead bb">Identitas Pelapor</p>
-											<FormGroup row>
-												<div className="col-xl-10">
-													<div className="checkbox c-checkbox">
-														<label>
-															<Field name="is_private">{({ field }) => <Input type="checkbox" {...field} />}</Field>
-															<span className="fa fa-check"></span>Klik jika ingin merahasiakan identitas anda
-														</label>
-													</div>
-												</div>
-											</FormGroup>
-											<FormGroup row>
-												<label className="col-md-2 col-form-label">Nama Pelapor</label>
-												<div className="col-md-10">
-													<Field name="nama">{({ field }) => <Input type="text" {...field} />}</Field>
-													<ErrorMessage name="nama" component="div" className="form-text text-danger" />
-												</div>
-											</FormGroup>
-											<FormGroup row>
-												<label className="col-md-2 col-form-label">Nomor yang dapat dihubungi</label>
-												<div className="col-md-10">
-													<Field name="no_hp">{({ field }) => <Input type="tel" {...field} />}</Field>
-													<ErrorMessage name="no_hp" component="div" className="form-text text-danger" />
-												</div>
-											</FormGroup>
-											<FormGroup row>
-												<label className="col-md-2 col-form-label">Email</label>
-												<div className="col-md-10">
-													<Field name="email">{({ field }) => <Input type="email" {...field} />}</Field>
-													<ErrorMessage name="email" component="div" className="form-text text-danger" />
-												</div>
-											</FormGroup>
-											<FormGroup row>
-												<label className="col-md-2 col-form-label">Alamat</label>
-												<div className="col-md-10">
-													<Field name="alamat">{({ field }) => <Input type="textarea" {...field} />}</Field>
-													<ErrorMessage name="alamat" component="div" className="form-text text-danger" />
-												</div>
-											</FormGroup>
-											<FormGroup row>
-												<label className="col-md-2 col-form-label">Foto Kartu Identitas</label>
-												<div className="col-md-10">
-													<Field name="foto">{({ field, form }) => <Input type="file" onChange={(e) => form.setFieldValue(field.name, Array.from(e.currentTarget.files))} />}</Field>
-													<ErrorMessage name="foto" component="div" className="form-text text-danger" />
-												</div>
-											</FormGroup>
-											<p className="lead bb">Detail Laporan</p>
-											<FormGroup row>
-												<label className="col-md-2 col-form-label">Nomor Pelaporan</label>
-												<div className="col-md-10">
-													<Field name="no_laporan">{({ field }) => <Input disabled type="text" {...field} />}</Field>
-													<ErrorMessage name="no_laporan" component="div" className="form-text text-danger" />
-												</div>
-											</FormGroup>
-											<FormGroup row>
-												<label className="col-md-2 col-form-label">Perguruan Tinggi yang Dilaporkan</label>
-												<div className="col-md-10">
-													<Field name="pt_id">
-														{({ field, form }) => (
-															<AsyncSelect
-																cacheOptions
-																loadOptions={loadOptions}
-																defaultOptions
-																onChange={(e) => {
-																	this.handleChangeSelectPerguruanTinggi(e);
-																	form.setFieldValue(field.name, e.value);
-																}}
-																onInputChange={this.handleInputChange}
-															/>
-														)}
-													</Field>
-													<ErrorMessage name="pt_id" component="div" className="form-text text-danger" />
-												</div>
-											</FormGroup>
-											<FormGroup row>
-												<label className="col-md-2 col-form-label">Jenis Pelanggaran</label>
-												<div className="col-md-10">
-													<Field name="pelanggaran_id">
-														{({ field, form }) => (
-															<Select
-																instanceId={selectInstanceId + 1}
-																isMulti
-																value={selectedJenis}
-																onChange={(e) => {
-																	this.handleChangeSelectJenis(e);
-																	form.setFieldValue(
-																		field.name,
-																		e.map((e) => e.value)
-																	);
-																}}
-																options={pelanggaran.data ? this.optionsJenisPelanggaran(pelanggaran) : []}
-																required
-															/>
-														)}
-													</Field>
-													<ErrorMessage name="pelanggaran_id" component="div" className="form-text text-danger" />
-												</div>
-											</FormGroup>
-											<FormGroup row>
-												<label className="col-md-2 col-form-label">Keterangan Laporan</label>
-												<div className="col-md-10">
-													<Field name="keterangan">{({ field }) => <Input type="textarea" {...field} />}</Field>
-													<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
-												</div>
-											</FormGroup>
-											<FormGroup row>
-												<label className="col-md-2 col-form-label">File Pendukung</label>
-												<div className="col-md-10">
-													<Field name="dokumen">{({ field, form }) => <Input type="file" multiple onChange={(e) => form.setFieldValue(field.name, Array.from(e.currentTarget.files))} />}</Field>
-													<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
-												</div>
-											</FormGroup>
-											<FormGroup row>
-												<div className="col-xl-10">
-													<div className="checkbox c-checkbox">
-														<label>
-															<Field name="setuju">{({ field }) => <Input type="checkbox" {...field} />}</Field>
-															<span className="fa fa-check"></span>Klik jika data yang anda laporkan sudah benar
-															<ErrorMessage name="setuju" component="div" className="form-text text-danger" />
-														</label>
-													</div>
-												</div>
-											</FormGroup>
-											<FormGroup row>
-												<div className="col-12 col-lg-2">
-													<Button color="info" block type="submit">
-														Kirim Laporan
-													</Button>
-												</div>
-											</FormGroup>
-										</Form>
-									</Formik>
-								</CardBody>
-							</Card>
-						</Col>
-					</Row>
-				</ContentWrapper>
-			</div>
-		);
-	}
-}
-
-App.Layout = BasePage;
-
-export default App;
+import React, { Component } from "react";
+import Router from "next/router";
+import BasePage from "@/components/Layout/BasePage";
+import { ptPublic } from "@/actions/PT";
+import { getPelanggaranPublic } from "@/actions/pelanggaran";
+import { createLaporanPublic } from "@/actions/pelaporan";
+import { notifLaporanBaru } from "@/actions/notifikasi";
+import Select from "react-select";
+import AsyncSelect from "react-select/async";
+import { Row, Col, FormGroup, Input, Card, CardBody, Button, CustomInput, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse } from "reactstrap";
+import Link from "next/link";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { createPublicUser } from "@/actions/user";
+import { ToastContainer, toast } from "react-toastify";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
+
+import "react-toastify/dist/ReactToastify.css";
+
+const laporanSchema = Yup.object().shape({
+	no_laporan: Yup.string().required("Harap Diisi"),
+	no_hp: Yup.number().required("Harap Diisi"),
+	nama: Yup.string().required(),
+	setuju: Yup.boolean().isTrue(),
+	alamat: Yup.string().min(3).max(200).required(),
+	keterangan: Yup.string().min(3).max(200).required(),
+	email: Yup.string().email().required(),
+	pelanggaran_id: Yup.array().min(1).required(),
+	pt_id: Yup.string().required(),
+	foto: Yup.array().min(1).required("Harus ada"),
+	dokumen: Yup.mixed().nullable().notRequired(),
+	is_private: Yup.boolean().notRequired(),
+});
+
+const loadOptions = (inputValue, callback) => {
+	setTimeout(async () => {
+		const pt = await ptPublic({ search: inputValue });
+		const data = pt.data.map((e) => ({ value: e.id, label: e.nama, className: "State-ACT" }));
+		callback(data);
+	}, 1000);
+};
+
+const menu = [
+	{
+		title: "Home",
+		path: "/app",
+	},
+	{
+		title: "Buat Laporan",
+		path: "/laporan/new",
+	},
+	{
+		title: "Pemantauan",
+		path: "/pemantauan",
+	},
+];
+const selectInstanceId = 1;
+class App extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			isOpen: false,
+			inputValue: "",
+			pelaporanNumber: Math.floor(Date.now() * Math.random()),
+			nama: "",
+			alamat: "",
+			no_hp: "",
+			email: "",
+			fileIdentitas: null,
+			pelanggaran: [],
+			selectedPerguruanTinggi: {},
+			selectedJenis: [],
+			keteranganLaporan: "",
+			files: [],
+			isPrivate: false,
+			confirm: false,
+			msgError: [],
+		};
+	}
+
+	static getInitialProps = ({ pathname }) => ({ pathname });
+
+	componentDidMount = async () => {
+		const pelanggaran = await getPelanggaranPublic();
+		this.setState({ pelanggaran });
+	};
+
+	toggleCollapse = () => {
+		this.setState({
+			isOpen: !this.state.isOpen,
+		});
+	};
+
+	optionsJenisPelanggaran = (pelanggaran) => {
+		return pelanggaran.data.map((e) => ({ value: e._id, label: e.pelanggaran, className: "State-ACT" }));
+	};
+
+	setKeteranganPelaporan = (e) => {
+		this.setState({ keteranganLaporan: e.target.value });
+	};
+
+	handleChangeSelectJenis = (selectedJenis) => {
+		this.setState({ selectedJenis });
+	};
+
+	handleChangeSelectPerguruanTinggi = (selectedPerguruanTinggi) => {
+		this.setState({ selectedPerguruanTinggi });
+	};
+
+	handleInputChange = (newValue) => {
+		const inputValue = newValue.replace(/\W/g, "");
+		this.setState({ inputValue });
+		return inputValue;
+	};
+
+	handleKirim = async (data, { resetForm }) => {
+		const formdata = new FormData();
+		formdata.append("no_laporan", data.no_laporan);
+		formdata.append("pt_id", data.pt_id);
+		formdata.append("keterangan", data.keterangan);
+		formdata.append("is_private", data.is_private);
+		formdata.append("nama", data.nama);
+		formdata.append("alamat", data.alamat);
+		formdata.append("no_hp", data.no_hp);
+		formdata.append("email", data.email);
+		formdata.append("pelanggaran_id", data.pelanggaran_id.join(","));
+		formdata.append("foto", data.foto[0]);
+		if (data.dokumen.length > 0) {
+			Array.from(data.dokumen).forEach((e) => {
+				formdata.append("dokumen", e);
+			});
+		}
+
+		const toastid = toast.loading("Please wait...");
+		const success = await createLaporanPublic(formdata);
+		if (!success) {
+			toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
+		} else {
+			toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
+			Router.push("/laporan/new");
+		}
+	};
+
+	render() {
+		const { selectedJenis, pelanggaran } = this.state;
+		return (
+			<div>
+				<ToastContainer />
+				<Navbar className="navbar-color" expand="md" dark>
+					<NavbarBrand href="/">
+					<img className="img-fluid" src="/static/img/Logo-vputih.png" alt="App Logo" /><img className="img-text-vputih" src="/static/img/Logo-text-vputih.png" alt="App Logo" />
+					</NavbarBrand>
+					<NavbarToggler onClick={this.toggleCollapse} />
+					<Collapse isOpen={this.state.isOpen} navbar>
+						<Nav className="ml-auto" navbar>
+							{menu.map((e) => (
+								<NavItem active={e.path === this.props.pathname ? true : false}>
+									<Link href={e.path}>
+										<NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
+									</Link>
+								</NavItem>
+							))}
+						</Nav>
+					</Collapse>
+				</Navbar>
+				<ContentWrapper>
+					<Row>
+						<Col lg={8} className="block-center d-block ">
+							<Card className="card-default">
+								<CardBody>
+									<Formik
+										initialValues={{
+											nama: "",
+											no_hp: "",
+											email: "",
+											alamat: "",
+											foto: [],
+											no_laporan: moment(new Date()).format("DDMM") + "" + Math.floor(Math.random() * 1000000),
+											pt_id: "",
+											pelanggaran_id: "",
+											keterangan: "",
+											dokumen: [],
+											setuju: false,
+											is_private: false,
+										}}
+										validationSchema={laporanSchema}
+										onSubmit={this.handleKirim}
+									>
+										<Form className="form-horizontal">
+											<div class="header-1">
+    												<h2 class="card-title-1">Identitas Pelapor</h2>
+												</div>
+											<FormGroup row>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Nama Lengkap</label>
+												<div className="col-md-10">
+													<Field name="nama">{({ field }) => <Input type="text" {...field} />}</Field>
+													<ErrorMessage name="nama" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Nomor Aktif</label>
+												<div className="col-md-10">
+													<Field name="no_hp">{({ field }) => <Input type="tel" {...field} />}</Field>
+													<ErrorMessage name="no_hp" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Email</label>
+												<div className="col-md-10">
+													<Field name="email">{({ field }) => <Input type="email" {...field} />}</Field>
+													<ErrorMessage name="email" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Alamat</label>
+												<div className="col-md-10">
+													<Field name="alamat">{({ field }) => <Input type="textarea" {...field} />}</Field>
+													<ErrorMessage name="alamat" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Foto Kartu Identitas</label>
+												<div className="col-md-10">
+													<Field name="foto">{({ field, form }) => <Input type="file" onChange={(e) => form.setFieldValue(field.name, Array.from(e.currentTarget.files))} />}</Field>
+													<ErrorMessage name="foto" component="div" className="form-text text-danger" />
+												</div>
+												<div className="col-xl-10">
+													<div className="checkbox c-checkbox">
+														<label>
+															<Field name="is_private">{({ field }) => <Input type="checkbox" {...field} />}</Field>
+															<span className="fa fa-check"></span><text>*</text>Klik jika ingin merahasiakan identitas anda
+														</label>
+													</div>
+												</div>
+											</FormGroup>
+											<div class="header-1">
+    												<h2 class="card-title-1">Detail Laporan</h2>
+												</div>
+											{/* <p className="lead bb">Detail Laporan</p> */}
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Nomor Pelaporan</label>
+												<div className="col-md-10">
+													<Field name="no_laporan">{({ field }) => <Input disabled type="text" {...field} />}</Field>
+													<ErrorMessage name="no_laporan" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Perguruan Tinggi yang Dilaporkan</label>
+												<div className="col-md-10">
+													<Field name="pt_id">
+														{({ field, form }) => (
+															<AsyncSelect
+																cacheOptions
+																loadOptions={loadOptions}
+																defaultOptions
+																onChange={(e) => {
+																	this.handleChangeSelectPerguruanTinggi(e);
+																	form.setFieldValue(field.name, e.value);
+																}}
+																onInputChange={this.handleInputChange}
+															/>
+														)}
+													</Field>
+													<ErrorMessage name="pt_id" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Jenis Pelanggaran</label>
+												<div className="col-md-10">
+													<Field name="pelanggaran_id">
+														{({ field, form }) => (
+															<Select
+																instanceId={selectInstanceId + 1}
+																isMulti
+																value={selectedJenis}
+																onChange={(e) => {
+																	this.handleChangeSelectJenis(e);
+																	form.setFieldValue(
+																		field.name,
+																		e.map((e) => e.value)
+																	);
+																}}
+																options={pelanggaran.data ? this.optionsJenisPelanggaran(pelanggaran) : []}
+																required
+															/>
+														)}
+													</Field>
+													<ErrorMessage name="pelanggaran_id" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Keterangan Laporan</label>
+												<div className="col-md-10">
+													<Field name="keterangan">{({ field }) => <Input type="textarea" {...field} />}</Field>
+													<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">File Pendukung</label>
+												<div className="col-md-10">
+													<Field name="dokumen">{({ field, form }) => <Input type="file" multiple onChange={(e) => form.setFieldValue(field.name, Array.from(e.currentTarget.files))} />}</Field>
+													<ErrorMessage name="dokumen" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<div className="col-xl-10">
+													<div className="checkbox c-checkbox">
+														<label>
+															<Field name="setuju">{({ field }) => <Input type="checkbox" {...field} />}</Field>
+															<span className="fa fa-check"></span><text>*</text>Klik jika data yang anda laporkan sudah benar
+															<ErrorMessage name="setuju" component="div" className="form-text text-danger" />
+														</label>
+													</div>
+												</div>
+											</FormGroup>
+											<FormGroup row>
+											<div className="posisi-btn-1">
+													<Button className="button-kirimlaporan" color="info" block type="submit">
+														<h3 className="text-kirimlaporan">Kirim Laporan</h3>
+													</Button>
+												
+											</div>
+											</FormGroup>
+										</Form>
+									</Formik>
+								</CardBody>
+							</Card>
+						</Col>
+					</Row>
+				</ContentWrapper>
+			</div>
+		);
+	}
+}
+
+App.Layout = BasePage;
+
+export default App;

pages/pemantauan.js

@@ -1,144 +1,152 @@
-import React, { Component } from "react";
-import BasePage from "@/components/Layout/BasePage";
-import { Row, Col, FormGroup, Input, Card, CardBody, Button, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse } from "reactstrap";
-import Link from "next/link";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { getPelaporanPublic } from "@/actions/pelaporan";
-import DetailLaporan from "@/components/Public/DetailLaporan";
-import { getLogPublic } from "@/actions/log";
-import Timeline from "@/components/Main/Timeline";
-import { Formik, Form, Field, ErrorMessage } from "formik";
-import * as Yup from "yup";
-
-const menu = [
-	{
-		title: "Home",
-		path: "/app",
-	},
-	{
-		title: "Buat Laporan",
-		path: "/laporan/new",
-	},
-	{
-		title: "Pemantauan",
-		path: "/pemantauan",
-	},
-];
-
-const pemantauanSchema = Yup.object().shape({
-	no_laporan: Yup.string().required("Harap Diisi"),
-	no_hp: Yup.number().required("Harap Diisi"),
-});
-class App extends Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			isOpen: false,
-			no_laporan: "",
-			no_hp: "",
-			msgError: [],
-			laporan: null,
-			log: null,
-		};
-	}
-
-	static getInitialProps = ({ pathname }) => ({ pathname });
-
-	toggleCollapse = () => {
-		this.setState({
-			isOpen: !this.state.isOpen,
-		});
-	};
-
-	handleLihatPemantaun = async (data) => {
-		const { no_hp, no_laporan } = data;
-		const log = await getLogPublic({ no_hp, no_laporan });
-		this.setState({ laporan: log.data.laporan });
-		this.setState({ log: log.data.pemantauan });
-	};
-
-	render() {
-		const { laporan, log } = this.state;
-		return (
-			<div>
-				<Navbar color="info" expand="md" dark>
-					<NavbarBrand href="/">
-						<img className="img-fluid" src="/static/img/logo-single.png" alt="App Logo" /> Sidali
-					</NavbarBrand>
-					<NavbarToggler onClick={this.toggleCollapse} />
-					<Collapse isOpen={this.state.isOpen} navbar>
-						<Nav className="ml-auto" navbar>
-							{menu.map((e) => (
-								<NavItem active={e.path === this.props.pathname ? true : false}>
-									<Link href={e.path}>
-										<NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
-									</Link>
-								</NavItem>
-							))}
-						</Nav>
-					</Collapse>
-				</Navbar>
-				<ContentWrapper>
-					<Row>
-						<Col lg={8} className="block-center d-block ">
-							<Card className="card-default">
-								<CardBody>
-									<Formik
-										initialValues={{
-											no_laporan: "",
-											no_hp: "",
-										}}
-										validationSchema={pemantauanSchema}
-										onSubmit={this.handleLihatPemantaun}
-									>
-										<Form className="form-horizontal">
-											<p className="lead bb">Pemantauan</p>
-											<FormGroup row>
-												<label className="col-md-2 col-form-label">Nomor Laporan</label>
-												<div className="col-md-10">
-													<Field name="no_laporan">{({ field }) => <Input type="text" {...field} />}</Field>
-													<ErrorMessage name="no_laporan" component="div" className="form-text text-danger" />
-												</div>
-											</FormGroup>
-											<FormGroup row>
-												<label className="col-md-2 col-form-label">Nomor yang dapat dihubungi</label>
-												<div className="col-md-10">
-													<Field name="no_hp">{({ field }) => <Input type="tel" {...field} />}</Field>
-													<ErrorMessage name="no_hp" component="div" className="form-text text-danger" />
-												</div>
-											</FormGroup>
-											<FormGroup row>
-												<div className="col-12 col-lg-2">
-													<Button color="info" block type="submit">
-														Lihat Pemantauan
-													</Button>
-												</div>
-											</FormGroup>
-										</Form>
-									</Formik>
-								</CardBody>
-							</Card>
-							<Card className="card-default">
-								<CardBody>
-									{laporan && log ? (
-										<>
-											<DetailLaporan data={laporan} />
-											<p className="lead bb">Pemantauan</p>
-											<Timeline data={log} noFile />{" "}
-										</>
-									) : (
-										"Tidak Ada Laporan"
-									)}
-								</CardBody>
-							</Card>
-						</Col>
-					</Row>
-				</ContentWrapper>
-			</div>
-		);
-	}
-}
-
-App.Layout = BasePage;
-
-export default App;
+import React, { Component } from "react";
+import BasePage from "@/components/Layout/BasePage";
+import { Row, Col, FormGroup, Input, Card, CardBody, Button, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse } from "reactstrap";
+import Link from "next/link";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { getPelaporanPublic } from "@/actions/pelaporan";
+import DetailLaporan from "@/components/Public/DetailLaporan";
+import { getLogPublic } from "@/actions/log";
+import Timeline from "@/components/Main/Timeline";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
+
+const menu = [
+	{
+		title: "Home",
+		path: "/app",
+	},
+	{
+		title: "Buat Laporan",
+		path: "/laporan/new",
+	},
+	{
+		title: "Pemantauan",
+		path: "/pemantauan",
+	},
+];
+
+const pemantauanSchema = Yup.object().shape({
+	no_laporan: Yup.string().required("Harap Diisi"),
+	no_hp: Yup.number().required("Harap Diisi"),
+});
+class App extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			isOpen: false,
+			no_laporan: "",
+			no_hp: "",
+			msgError: [],
+			laporan: null,
+			log: null,
+		};
+	}
+
+	static getInitialProps = ({ pathname }) => ({ pathname });
+
+	toggleCollapse = () => {
+		this.setState({
+			isOpen: !this.state.isOpen,
+		});
+	};
+
+	handleLihatPemantaun = async (data) => {
+		const { no_hp, no_laporan } = data;
+		const log = await getLogPublic({ no_hp, no_laporan });
+		this.setState({ laporan: log.data.laporan });
+		this.setState({ log: log.data.pemantauan });
+	};
+
+	render() {
+		const { laporan, log } = this.state;
+		return (
+			<div>
+				<Navbar className="navbar-color" expand="md" dark>
+					<NavbarBrand href="/">
+					<img className="img-fluid" src="/static/img/Logo-vputih.png" alt="App Logo" /><img className="img-text-vputih" src="/static/img/Logo-text-vputih.png" alt="App Logo" />
+					</NavbarBrand>
+					<NavbarToggler onClick={this.toggleCollapse} />
+					<Collapse isOpen={this.state.isOpen} navbar>
+						<Nav className="ml-auto" navbar>
+							{menu.map((e) => (
+								<NavItem active={e.path === this.props.pathname ? true : false}>
+									<Link href={e.path}>
+										<NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
+									</Link>
+								</NavItem>
+							))}
+						</Nav>
+					</Collapse>
+				</Navbar>
+				<ContentWrapper>
+					<Row>
+						<Col lg={8} className="block-center d-block ">
+							<Card className="card-default">
+								<CardBody>
+									<Formik
+										initialValues={{
+											no_laporan: "",
+											no_hp: "",
+										}}
+										validationSchema={pemantauanSchema}
+										onSubmit={this.handleLihatPemantaun}
+									>
+										<Form className="form-horizontal">
+												<div class="header-1">
+    												<h2 class="card-title-1">Pemantauan</h2>
+												</div>
+											{/* <p className="lead bb">Pemantauan</p> */}
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Nomor Laporan</label>
+												<div className="col-md-10">
+													<Field name="no_laporan">{({ field }) => <Input type="text" {...field} />}</Field>
+													<ErrorMessage name="no_laporan" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<label className="col-md-2 col-form-label">Nomor Aktif</label>
+												<div className="col-md-10">
+													<Field name="no_hp">{({ field }) => <Input type="tel" {...field} />}</Field>
+													<ErrorMessage name="no_hp" component="div" className="form-text text-danger" />
+												</div>
+											</FormGroup>
+											<FormGroup row>
+												<div className="posisi-btn-1">
+													<Button className="button-lihatpemantauan" color="info" block type="submit">
+														<h3 className="text-lihatpemantauan">Lihat Pemantauan</h3>
+													</Button>
+												</div>
+											</FormGroup>
+										</Form>
+									</Formik>
+								</CardBody>
+							</Card>
+							<Card className="card-default">
+								<CardBody>
+								<div class="header-1">
+    								<h2 class="card-title-1">Rekap Laporan</h2>
+								</div>
+								<div className="">
+									{laporan && log ? (
+										<>
+											<DetailLaporan data={laporan} />
+											<p className="lead bb tengah">Pemantauan</p>
+											<Timeline data={log} noFile />{" "}
+										</>
+									) : (
+										<p className="tengah">Tidak Ada Laporan</p>
+									)}
+								</div>
+								</CardBody>
+							</Card>
+						</Col>
+					</Row>
+				</ContentWrapper>
+			</div>
+		);
+	}
+}
+
+App.Layout = BasePage;
+
+export default App;

styles/app.scss

@@ -1,45 +1,45 @@
-/*!
- *
- * Angle - Bootstrap Admin Template
- *
- * Version: 4.8
- * Author: @themicon_co
- * Website: http://themicon.co
- * License: https://wrapbootstrap.com/help/licenses
- *
- */
-
-// Bootstrap
-@import "bootstrap/functions";
-@import "bootstrap/variables";
-@import "bootstrap/mixins";
-// Variables
-@import "app/common/variables";
-// Layout
-@import "app/layout/layout";
-@import "app/layout/layout-extra";
-@import "app/layout/layout-animation";
-@import "app/layout/top-navbar";
-@import "app/layout/sidebar";
-@import "app/layout/offsidebar";
-@import "app/layout/user-block";
-@import "app/layout/settings";
-// Common
-@import "app/common/page-loader";
-@import "app/common/typo";
-@import "app/common/bootstrap-reset";
-@import "app/common/bootstrap-custom";
-@import "app/common/button-extra";
-@import "app/common/placeholder";
-@import "app/common/cards";
-@import "app/common/circles";
-@import "app/common/dropdown-extra";
-@import "app/common/half-float";
-@import "app/common/animate";
-@import "app/common/inputs";
-@import "app/common/utils";
-@import "app/common/print";
-
-// PTB Apps
-@import "app/app/timeline";
+/*!
+ *
+ * Angle - Bootstrap Admin Template
+ *
+ * Version: 4.8
+ * Author: @themicon_co
+ * Website: http://themicon.co
+ * License: https://wrapbootstrap.com/help/licenses
+ *
+ */
+
+// Bootstrap
+@import "bootstrap/functions";
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+// Variables
+@import "app/common/variables";
+// Layout
+@import "app/layout/layout";
+@import "app/layout/layout-extra";
+@import "app/layout/layout-animation";
+@import "app/layout/top-navbar";
+@import "app/layout/sidebar";
+@import "app/layout/offsidebar";
+@import "app/layout/user-block";
+@import "app/layout/settings";
+// Common
+@import "app/common/page-loader";
+@import "app/common/typo";
+@import "app/common/bootstrap-reset";
+@import "app/common/bootstrap-custom";
+@import "app/common/button-extra";
+@import "app/common/placeholder";
+@import "app/common/cards";
+@import "app/common/circles";
+@import "app/common/dropdown-extra";
+@import "app/common/half-float";
+@import "app/common/animate";
+@import "app/common/inputs";
+@import "app/common/utils";
+@import "app/common/print";
+
+// PTB Apps
+@import "app/app/timeline";
 @import "app/extras/calendar";

styles/app/app/timeline.scss

@@ -1,265 +1,265 @@
-/* ========================================================================
-     Component: timeline
- ========================================================================== */
-
-$timeline-badge-size : 36px;
-$timeline-datetime-height : 20px;
-$timeline-separator-width : 120px;
-
-// Timeline container
-// --------------------------------
-.timeline,
-.timeline-alt {
-    list-style: none;
-    padding: 0 0 20px;
-    position: relative;
-    z-index: 0; // Timeline central line
-    @include clearfix();
-    &:before {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        content: " ";
-        width: 1px;
-        background-color: #d1d2d3;
-        left: $timeline-badge-size / 2;
-    } // clear all float element using a last item
-    .timeline-end {
-        float: none;
-        clear: both;
-    } // change popover default colors to use no title
-    .popover {
-        &.left>.arrow:after {
-            border-left-color: #fff;
-        }
-        &.right>.arrow:after {
-            border-right-color: #fff;
-        } // but restore the color if we use a title
-        &.left>.popover-title+.arrow:after {
-            border-left-color: $popover-arrow-color;
-        }
-        &.right>.popover-title+.arrow:after {
-            border-right-color: $popover-arrow-color;
-        }
-    } // Timeline list itmes
-    // --------------------------------
-    >li {
-        @include clearfix();
-        margin-bottom: 20px;
-
-        &.timeline-separator {
-            position: relative;
-            float: none;
-            clear: both;
-            margin: 0 auto;
-            padding: 40px 0;
-            &:first-child {
-                padding-top: 0;
-            }
-            &:before {
-                content: attr(data-datetime);
-                display: inline-block;
-                width: $timeline-separator-width;
-                text-align: center;
-                padding: 0 20px;
-                line-height: 30px;
-                background-color: #b6c5da;
-                color: #fff;
-            }
-        }
-    } // Timeline card
-    // --------------------------------
-    >li>.timeline-card {
-        margin-left: $timeline-separator-width / 2; // Popover inside timeline cards
-        .popover {
-            position: relative;
-            display: block;
-            margin: 0;
-            width: 100%;
-            max-width: none;
-            .arrow {
-                top: $timeline-badge-size/2;
-                display: none;
-            }
-            .popover-content {
-                .popover-title {
-                    background-color: transparent;
-                    border: 0;
-                    padding-left: 0;
-                    padding-top: 0;
-                }
-            }
-        }
-    } // Timeline Date
-    // --------------------------------
-    >li>.timeline-date {
-        margin: -$timeline-datetime-height 0 0;
-        display: block;
-        height: $timeline-datetime-height;
-        line-height: $timeline-datetime-height;
-        font-size: 13px;
-
-        >time {
-            &:after {
-                content: attr(datetime);
-            }
-        }
-    } // Timeline badges
-    // --------------------------------
-    >li>.timeline-badge {
-        position: absolute;
-        left: 0;
-        width: $timeline-badge-size;
-        height: $timeline-badge-size;
-        border-radius: 500px;
-        line-height: $timeline-badge-size;
-        font-size: 1em;
-        text-align: center;
-        color: #fff;
-        background-color: #999;
-        z-index: 100; // Color variants
-        &.primary {
-            background-color: $primary;
-        }
-        &.success {
-            background-color: $success;
-        }
-        &.warning {
-            background-color: $warning;
-        }
-        &.danger {
-            background-color: $danger;
-        }
-        &.info {
-            background-color: $info;
-        }
-
-        &.inverse {
-            background-color: $inverse;
-        }
-        &.green {
-            background-color: $green;
-        }
-        &.pink {
-            background-color: $pink;
-        }
-        &.purple {
-            background-color: $purple;
-        }
-        &.dark {
-            background-color: $dark;
-        }
-        &.yellow {
-            background-color: $yellow;
-        }
-    }
-}
-
-.timeline-alt {
-    .popover .arrow {
-        display: block !important;
-    }
-}
-
-// Timeline title
-// --------------------------------
-.timeline-title {
-    margin-top: 0;
-    color: inherit;
-}
-
-// Timeline Body
-// --------------------------------
-.timeline-body>p,
-.timeline-body>ul {
-    margin-bottom: 0;
-}
-
-.timeline-body>p+p {
-    margin-top: 5px;
-}
-
-// Timeline for Desktops
-// --------------------------------
-
-@include media-breakpoint-up(lg) {
-
-    .timeline {
-        &:before {
-            left: 50%;
-            margin-left: ($timeline-badge-size/2);
-        }
-        >li {
-            float: left;
-            clear: left;
-            width: 45%;
-
-            &.timeline-inverted {
-                float: right;
-                clear: right;
-                margin-top: 50px;
-            }
-        }
-
-        >li.timeline-separator {
-            text-align: center;
-            &:before {
-                margin-left: ($timeline-badge-size);
-            }
-        }
-
-        >li>.timeline-badge {
-            left: 50%;
-            margin-left: 0;
-        }
-
-        >li>.timeline-date {
-            float: none;
-            position: absolute;
-            width: 40%;
-            left: 50%;
-            top: $timeline-badge-size / 2;
-            margin-left: $timeline-badge-size * 1.5;
-            margin-top: -($timeline-datetime-height/2);
-        }
-
-        >li>.timeline-card {
-            margin: 0;
-
-            &:before {
-                border-left-width: 15px;
-                border-right-width: 0;
-                top: 26px;
-                right: -15px;
-                left: auto;
-            }
-
-            &:after {
-                border-left-width: 14px;
-                border-right-width: 0;
-                top: 27px;
-                right: -14px;
-                left: auto;
-            }
-
-            .popover .arrow {
-                display: block;
-            }
-        } // Timeline inverted
-        // --------------------------------
-        >li.timeline-inverted {
-
-            >.timeline-card {
-                padding-left: $timeline-badge-size;
-            }
-
-            .timeline-date {
-                left: auto;
-                right: 50%;
-                width: auto;
-                margin-left: 0;
-                margin-right: $timeline-badge-size;
-            }
-        }
-    }
-}
+/* ========================================================================
+     Component: timeline
+ ========================================================================== */
+
+$timeline-badge-size : 36px;
+$timeline-datetime-height : 20px;
+$timeline-separator-width : 120px;
+
+// Timeline container
+// --------------------------------
+.timeline,
+.timeline-alt {
+    list-style: none;
+    padding: 0 0 20px;
+    position: relative;
+    z-index: 0; // Timeline central line
+    @include clearfix();
+    &:before {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        content: " ";
+        width: 1px;
+        background-color: #d1d2d3;
+        left: $timeline-badge-size / 2;
+    } // clear all float element using a last item
+    .timeline-end {
+        float: none;
+        clear: both;
+    } // change popover default colors to use no title
+    .popover {
+        &.left>.arrow:after {
+            border-left-color: #fff;
+        }
+        &.right>.arrow:after {
+            border-right-color: #fff;
+        } // but restore the color if we use a title
+        &.left>.popover-title+.arrow:after {
+            border-left-color: $popover-arrow-color;
+        }
+        &.right>.popover-title+.arrow:after {
+            border-right-color: $popover-arrow-color;
+        }
+    } // Timeline list itmes
+    // --------------------------------
+    >li {
+        @include clearfix();
+        margin-bottom: 20px;
+
+        &.timeline-separator {
+            position: relative;
+            float: none;
+            clear: both;
+            margin: 0 auto;
+            padding: 40px 0;
+            &:first-child {
+                padding-top: 0;
+            }
+            &:before {
+                content: attr(data-datetime);
+                display: inline-block;
+                width: $timeline-separator-width;
+                text-align: center;
+                padding: 0 20px;
+                line-height: 30px;
+                background-color: #b6c5da;
+                color: #fff;
+            }
+        }
+    } // Timeline card
+    // --------------------------------
+    >li>.timeline-card {
+        margin-left: $timeline-separator-width / 2; // Popover inside timeline cards
+        .popover {
+            position: relative;
+            display: block;
+            margin: 0;
+            width: 100%;
+            max-width: none;
+            .arrow {
+                top: $timeline-badge-size/2;
+                display: none;
+            }
+            .popover-content {
+                .popover-title {
+                    background-color: transparent;
+                    border: 0;
+                    padding-left: 0;
+                    padding-top: 0;
+                }
+            }
+        }
+    } // Timeline Date
+    // --------------------------------
+    >li>.timeline-date {
+        margin: -$timeline-datetime-height 0 0;
+        display: block;
+        height: $timeline-datetime-height;
+        line-height: $timeline-datetime-height;
+        font-size: 13px;
+
+        >time {
+            &:after {
+                content: attr(datetime);
+            }
+        }
+    } // Timeline badges
+    // --------------------------------
+    >li>.timeline-badge {
+        position: absolute;
+        left: 0;
+        width: $timeline-badge-size;
+        height: $timeline-badge-size;
+        border-radius: 500px;
+        line-height: $timeline-badge-size;
+        font-size: 1em;
+        text-align: center;
+        color: #fff;
+        background-color: #999;
+        z-index: 100; // Color variants
+        &.primary {
+            background-color: $primary;
+        }
+        &.success {
+            background-color: $success;
+        }
+        &.warning {
+            background-color: $warning;
+        }
+        &.danger {
+            background-color: $danger;
+        }
+        &.info {
+            background-color: $info;
+        }
+
+        &.inverse {
+            background-color: $inverse;
+        }
+        &.green {
+            background-color: $green;
+        }
+        &.pink {
+            background-color: $pink;
+        }
+        &.purple {
+            background-color: $purple;
+        }
+        &.dark {
+            background-color: $dark;
+        }
+        &.yellow {
+            background-color: $yellow;
+        }
+    }
+}
+
+.timeline-alt {
+    .popover .arrow {
+        display: block !important;
+    }
+}
+
+// Timeline title
+// --------------------------------
+.timeline-title {
+    margin-top: 0;
+    color: inherit;
+}
+
+// Timeline Body
+// --------------------------------
+.timeline-body>p,
+.timeline-body>ul {
+    margin-bottom: 0;
+}
+
+.timeline-body>p+p {
+    margin-top: 5px;
+}
+
+// Timeline for Desktops
+// --------------------------------
+
+@include media-breakpoint-up(lg) {
+
+    .timeline {
+        &:before {
+            left: 50%;
+            margin-left: ($timeline-badge-size/2);
+        }
+        >li {
+            float: left;
+            clear: left;
+            width: 45%;
+
+            &.timeline-inverted {
+                float: right;
+                clear: right;
+                margin-top: 50px;
+            }
+        }
+
+        >li.timeline-separator {
+            text-align: center;
+            &:before {
+                margin-left: ($timeline-badge-size);
+            }
+        }
+
+        >li>.timeline-badge {
+            left: 50%;
+            margin-left: 0;
+        }
+
+        >li>.timeline-date {
+            float: none;
+            position: absolute;
+            width: 40%;
+            left: 50%;
+            top: $timeline-badge-size / 2;
+            margin-left: $timeline-badge-size * 1.5;
+            margin-top: -($timeline-datetime-height/2);
+        }
+
+        >li>.timeline-card {
+            margin: 0;
+
+            &:before {
+                border-left-width: 15px;
+                border-right-width: 0;
+                top: 26px;
+                right: -15px;
+                left: auto;
+            }
+
+            &:after {
+                border-left-width: 14px;
+                border-right-width: 0;
+                top: 27px;
+                right: -14px;
+                left: auto;
+            }
+
+            .popover .arrow {
+                display: block;
+            }
+        } // Timeline inverted
+        // --------------------------------
+        >li.timeline-inverted {
+
+            >.timeline-card {
+                padding-left: $timeline-badge-size;
+            }
+
+            .timeline-date {
+                left: auto;
+                right: 50%;
+                width: auto;
+                margin-left: 0;
+                margin-right: $timeline-badge-size;
+            }
+        }
+    }
+}

styles/app/common/animate.scss

@@ -1,242 +1,242 @@
-/* ========================================================================
-     Component: animate
- ========================================================================== */
-
-@charset "UTF-8";
-
-// New Animations
-// -----------------------------------
-@-webkit-keyframes fadeOutUpShort {
-    0% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0;
-        -webkit-transform: translate3d(0, -20px, 0);
-        transform: translate3d(0, -20px, 0);
-    }
-}
-
-@keyframes fadeOutUpShort {
-    0% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0;
-        -webkit-transform: translate3d(0, -20px, 0);
-        -ms-transform: translate3d(0, -20px, 0);
-        transform: translate3d(0, -20px, 0);
-    }
-}
-
-.fadeOutUpShort {
-    -webkit-animation-name: fadeOutUpShort;
-    animation-name: fadeOutUpShort;
-}
-
-@-webkit-keyframes fadeInUpShort {
-    0% {
-        opacity: 0;
-        -webkit-transform: translate3d(0, 20px, 0);
-        transform: translate3d(0, 20px, 0);
-    }
-
-    100% {
-        opacity: 1;
-        -webkit-transform: none;
-        transform: none;
-    }
-}
-
-@keyframes fadeInUpShort {
-    0% {
-        opacity: 0;
-        -webkit-transform: translate3d(0, 20px, 0);
-        -ms-transform: translate3d(0, 20px, 0);
-        transform: translate3d(0, 20px, 0);
-    }
-
-    100% {
-        opacity: 1;
-        -webkit-transform: none;
-        -ms-transform: none;
-        transform: none;
-    }
-}
-
-.fadeInUpShort {
-    -webkit-animation-name: fadeInUpShort;
-    animation-name: fadeInUpShort;
-}
-
-
-@-webkit-keyframes zoomInShort {
-    0% {
-        opacity: 0;
-        -webkit-transform: scale3d(.95, .95, .95);
-        transform: scale3d(.95, .95, .95);
-    }
-
-    50% {
-        opacity: 1;
-    }
-}
-
-@keyframes zoomInShort {
-    0% {
-        opacity: 0;
-        -webkit-transform: scale3d(.95, .95, .95);
-        -ms-transform: scale3d(.95, .95, .95);
-        transform: scale3d(.95, .95, .95);
-    }
-
-    50% {
-        opacity: 1;
-    }
-}
-
-.zoomInShort {
-    -webkit-animation-name: zoomInShort;
-    animation-name: zoomInShort;
-}
-
-@-webkit-keyframes zoomBack {
-    0% {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0;
-        -webkit-transform: scale3d(.5, .5, .5);
-        transform: scale3d(.5, .5, .5);
-    }
-
-    100% {
-        opacity: 0;
-    }
-}
-
-@keyframes zoomBack {
-    0% {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0;
-        -webkit-transform: scale3d(.5, .5, .5);
-        -ms-transform: scale3d(.5, .5, .5);
-        transform: scale3d(.5, .5, .5);
-    }
-
-    100% {
-        opacity: 0;
-    }
-}
-
-.zoomBack {
-    -webkit-animation-name: zoomBack;
-    animation-name: zoomBack;
-}
-
-
-@-webkit-keyframes fadeInLeft {
-    0% {
-        opacity: 0;
-        -webkit-transform: translate3d(-20px, 0, 0);
-        transform: translate3d(-20px, 0, 0);
-    }
-
-    100% {
-        opacity: 1;
-        -webkit-transform: none;
-        transform: none;
-    }
-}
-
-@keyframes fadeInLeft {
-    0% {
-        opacity: 0;
-        -webkit-transform: translate3d(-20px, 0, 0);
-        -ms-transform: translate3d(-20px, 0, 0);
-        transform: translate3d(-20px, 0, 0);
-    }
-
-    100% {
-        opacity: 1;
-        -webkit-transform: none;
-        -ms-transform: none;
-        transform: none;
-    }
-}
-
-.fadeInLeft {
-    -webkit-animation-name: fadeInLeft;
-    animation-name: fadeInLeft;
-}
-
-// Timing functions
-// -----------------------------------
-// Cubic
-$easeInCubic : cubic-bezier(0.550, 0.055, 0.675, 0.190);
-$easeOutCubic : cubic-bezier(0.215, 0.610, 0.355, 1.000);
-$easeInOutCubic : cubic-bezier(0.645, 0.045, 0.355, 1.000);
-
-// Circ
-$easeInCirc : cubic-bezier(0.600, 0.040, 0.980, 0.335);
-$easeOutCirc : cubic-bezier(0.075, 0.820, 0.165, 1.000);
-$easeInOutCirc : cubic-bezier(0.785, 0.135, 0.150, 0.860);
-
-// Expo
-$easeInExpo : cubic-bezier(0.950, 0.050, 0.795, 0.035);
-$easeOutExpo : cubic-bezier(0.190, 1.000, 0.220, 1.000);
-$easeInOutExpo : cubic-bezier(1.000, 0.000, 0.000, 1.000);
-
-// Quad
-$easeInQuad : cubic-bezier(0.550, 0.085, 0.680, 0.530);
-$easeOutQuad : cubic-bezier(0.250, 0.460, 0.450, 0.940);
-$easeInOutQuad : cubic-bezier(0.455, 0.030, 0.515, 0.955);
-
-// Quart
-$easeInQuart : cubic-bezier(0.895, 0.030, 0.685, 0.220);
-$easeOutQuart : cubic-bezier(0.165, 0.840, 0.440, 1.000);
-$easeInOutQuart : cubic-bezier(0.770, 0.000, 0.175, 1.000);
-
-// Quint
-$easeInQuint : cubic-bezier(0.755, 0.050, 0.855, 0.060);
-$easeOutQuint : cubic-bezier(0.230, 1.000, 0.320, 1.000);
-$easeInOutQuint : cubic-bezier(0.860, 0.000, 0.070, 1.000);
-
-// Sine
-$easeInSine : cubic-bezier(0.470, 0.000, 0.745, 0.715);
-$easeOutSine : cubic-bezier(0.390, 0.575, 0.565, 1.000);
-$easeInOutSine : cubic-bezier(0.445, 0.050, 0.550, 0.950);
-
-// Back
-$easeInBack : cubic-bezier(0.600, -0.280, 0.735, 0.045);
-$easeOutBack : cubic-bezier(0.175, 0.885, 0.320, 1.275);
-$easeInOutBack : cubic-bezier(0.680, -0.550, 0.265, 1.550);
-
-$animate-duration: 0.5s;
-
-.rag-fadeIn-enter {
-    animation: fadeIn $animate-duration;
-}
-.rag-fadeIn-exit {
-    display: none;
-}
-
-.rag-fadeInRight-enter {
-    animation: fadeInRight $animate-duration;
-}
-.rag-fadeInRight-exit {
-    display: none;
-}
-
-.rag-fadeInLeft-enter {
-    animation: fadeInLeft $animate-duration;
-}
-.rag-fadeInLeft-exit {
-    display: none;
-}
+/* ========================================================================
+     Component: animate
+ ========================================================================== */
+
+@charset "UTF-8";
+
+// New Animations
+// -----------------------------------
+@-webkit-keyframes fadeOutUpShort {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -20px, 0);
+        transform: translate3d(0, -20px, 0);
+    }
+}
+
+@keyframes fadeOutUpShort {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -20px, 0);
+        -ms-transform: translate3d(0, -20px, 0);
+        transform: translate3d(0, -20px, 0);
+    }
+}
+
+.fadeOutUpShort {
+    -webkit-animation-name: fadeOutUpShort;
+    animation-name: fadeOutUpShort;
+}
+
+@-webkit-keyframes fadeInUpShort {
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 20px, 0);
+        transform: translate3d(0, 20px, 0);
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none;
+    }
+}
+
+@keyframes fadeInUpShort {
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 20px, 0);
+        -ms-transform: translate3d(0, 20px, 0);
+        transform: translate3d(0, 20px, 0);
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        -ms-transform: none;
+        transform: none;
+    }
+}
+
+.fadeInUpShort {
+    -webkit-animation-name: fadeInUpShort;
+    animation-name: fadeInUpShort;
+}
+
+
+@-webkit-keyframes zoomInShort {
+    0% {
+        opacity: 0;
+        -webkit-transform: scale3d(.95, .95, .95);
+        transform: scale3d(.95, .95, .95);
+    }
+
+    50% {
+        opacity: 1;
+    }
+}
+
+@keyframes zoomInShort {
+    0% {
+        opacity: 0;
+        -webkit-transform: scale3d(.95, .95, .95);
+        -ms-transform: scale3d(.95, .95, .95);
+        transform: scale3d(.95, .95, .95);
+    }
+
+    50% {
+        opacity: 1;
+    }
+}
+
+.zoomInShort {
+    -webkit-animation-name: zoomInShort;
+    animation-name: zoomInShort;
+}
+
+@-webkit-keyframes zoomBack {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0;
+        -webkit-transform: scale3d(.5, .5, .5);
+        transform: scale3d(.5, .5, .5);
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes zoomBack {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0;
+        -webkit-transform: scale3d(.5, .5, .5);
+        -ms-transform: scale3d(.5, .5, .5);
+        transform: scale3d(.5, .5, .5);
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+.zoomBack {
+    -webkit-animation-name: zoomBack;
+    animation-name: zoomBack;
+}
+
+
+@-webkit-keyframes fadeInLeft {
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(-20px, 0, 0);
+        transform: translate3d(-20px, 0, 0);
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        transform: none;
+    }
+}
+
+@keyframes fadeInLeft {
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(-20px, 0, 0);
+        -ms-transform: translate3d(-20px, 0, 0);
+        transform: translate3d(-20px, 0, 0);
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        -ms-transform: none;
+        transform: none;
+    }
+}
+
+.fadeInLeft {
+    -webkit-animation-name: fadeInLeft;
+    animation-name: fadeInLeft;
+}
+
+// Timing functions
+// -----------------------------------
+// Cubic
+$easeInCubic : cubic-bezier(0.550, 0.055, 0.675, 0.190);
+$easeOutCubic : cubic-bezier(0.215, 0.610, 0.355, 1.000);
+$easeInOutCubic : cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
+// Circ
+$easeInCirc : cubic-bezier(0.600, 0.040, 0.980, 0.335);
+$easeOutCirc : cubic-bezier(0.075, 0.820, 0.165, 1.000);
+$easeInOutCirc : cubic-bezier(0.785, 0.135, 0.150, 0.860);
+
+// Expo
+$easeInExpo : cubic-bezier(0.950, 0.050, 0.795, 0.035);
+$easeOutExpo : cubic-bezier(0.190, 1.000, 0.220, 1.000);
+$easeInOutExpo : cubic-bezier(1.000, 0.000, 0.000, 1.000);
+
+// Quad
+$easeInQuad : cubic-bezier(0.550, 0.085, 0.680, 0.530);
+$easeOutQuad : cubic-bezier(0.250, 0.460, 0.450, 0.940);
+$easeInOutQuad : cubic-bezier(0.455, 0.030, 0.515, 0.955);
+
+// Quart
+$easeInQuart : cubic-bezier(0.895, 0.030, 0.685, 0.220);
+$easeOutQuart : cubic-bezier(0.165, 0.840, 0.440, 1.000);
+$easeInOutQuart : cubic-bezier(0.770, 0.000, 0.175, 1.000);
+
+// Quint
+$easeInQuint : cubic-bezier(0.755, 0.050, 0.855, 0.060);
+$easeOutQuint : cubic-bezier(0.230, 1.000, 0.320, 1.000);
+$easeInOutQuint : cubic-bezier(0.860, 0.000, 0.070, 1.000);
+
+// Sine
+$easeInSine : cubic-bezier(0.470, 0.000, 0.745, 0.715);
+$easeOutSine : cubic-bezier(0.390, 0.575, 0.565, 1.000);
+$easeInOutSine : cubic-bezier(0.445, 0.050, 0.550, 0.950);
+
+// Back
+$easeInBack : cubic-bezier(0.600, -0.280, 0.735, 0.045);
+$easeOutBack : cubic-bezier(0.175, 0.885, 0.320, 1.275);
+$easeInOutBack : cubic-bezier(0.680, -0.550, 0.265, 1.550);
+
+$animate-duration: 0.5s;
+
+.rag-fadeIn-enter {
+    animation: fadeIn $animate-duration;
+}
+.rag-fadeIn-exit {
+    display: none;
+}
+
+.rag-fadeInRight-enter {
+    animation: fadeInRight $animate-duration;
+}
+.rag-fadeInRight-exit {
+    display: none;
+}
+
+.rag-fadeInLeft-enter {
+    animation: fadeInLeft $animate-duration;
+}
+.rag-fadeInLeft-exit {
+    display: none;
+}

styles/app/common/bootstrap-custom.scss

@@ -1,111 +1,111 @@
-/* ========================================================================
-     Component: bootstrap-custom
- ========================================================================== */
-
-// Use this file to add custom css that may
-// depend on Bootstrap styles
-
-
-
-// Different container size to wrap content
-.container-sm {
-    max-width: map-get($container-max-widths, "sm");
-    width: auto;
-}
-
-.container-md {
-    max-width: map-get($container-max-widths, "md");
-    width: auto;
-}
-
-.container-lg {
-    max-width: map-get($container-max-widths, "lg");
-    width: auto;
-}
-
-// Remove padding and collapse columns
-.row-flush {
-    margin: 0;
-    >.col,
-    >[class*="col-"] {
-        padding-left: 0;
-        padding-right: 0;
-    }
-}
-
-
-// Breadcrumb variants
-
-.breadcrumb {
-    font-weight: normal;
-    border-radius: 0;
-    color: $text-muted;
-    padding: 10px 20px;
-}
-
-.content-heading {
-    // Breadcrumb below title
-    .breadcrumb {
-        font-size: 0.8125rem;
-        margin-bottom: 0;
-    }
-    // Breadcrumb next to view title
-    +.breadcrumb {
-        margin: -25px -25px 20px -20px;
-        background-color: $content-heading-bg;
-        border-top: 1px solid $content-heading-border;
-        border-bottom: 1px solid $content-heading-border;
-    }
-}
-
-// Different size of Progress bars
-$progress-height-sm: 15px;
-$progress-height-xs: 8px;
-
-.progress-sm {
-    height: $progress-height-sm;
-}
-
-.progress-xs {
-    height: $progress-height-xs;
-}
-
-
-// Extra badges
-
-.badge-inverse {
-    @include badge-variant($inverse);
-}
-
-.badge-green {
-    @include badge-variant($green);
-}
-
-.badge-pink {
-    @include badge-variant($pink);
-}
-
-.badge-purple {
-    @include badge-variant($purple);
-}
-
-
-// Extra alert
-
-.alert-purple {
-    @include alert-variant($purple, $purple, #fff);
-}
-.alert-green {
-    @include alert-variant($green, $green, #fff);
-}
-.alert-pink {
-    @include alert-variant($pink, $pink, #fff);
-}
-.alert-inverse {
-    @include alert-variant($inverse, $inverse, #fff);
-}
-
-// Form Rounded
-.form-control-rounded {
-    border-radius: 100px;
-}
+/* ========================================================================
+     Component: bootstrap-custom
+ ========================================================================== */
+
+// Use this file to add custom css that may
+// depend on Bootstrap styles
+
+
+
+// Different container size to wrap content
+.container-sm {
+    max-width: map-get($container-max-widths, "sm");
+    width: auto;
+}
+
+.container-md {
+    max-width: map-get($container-max-widths, "md");
+    width: auto;
+}
+
+.container-lg {
+    max-width: map-get($container-max-widths, "lg");
+    width: auto;
+}
+
+// Remove padding and collapse columns
+.row-flush {
+    margin: 0;
+    >.col,
+    >[class*="col-"] {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
+
+// Breadcrumb variants
+
+.breadcrumb {
+    font-weight: normal;
+    border-radius: 0;
+    color: $text-muted;
+    padding: 10px 20px;
+}
+
+.content-heading {
+    // Breadcrumb below title
+    .breadcrumb {
+        font-size: 0.8125rem;
+        margin-bottom: 0;
+    }
+    // Breadcrumb next to view title
+    +.breadcrumb {
+        margin: -25px -25px 20px -20px;
+        background-color: $content-heading-bg;
+        border-top: 1px solid $content-heading-border;
+        border-bottom: 1px solid $content-heading-border;
+    }
+}
+
+// Different size of Progress bars
+$progress-height-sm: 15px;
+$progress-height-xs: 8px;
+
+.progress-sm {
+    height: $progress-height-sm;
+}
+
+.progress-xs {
+    height: $progress-height-xs;
+}
+
+
+// Extra badges
+
+.badge-inverse {
+    @include badge-variant($inverse);
+}
+
+.badge-green {
+    @include badge-variant($green);
+}
+
+.badge-pink {
+    @include badge-variant($pink);
+}
+
+.badge-purple {
+    @include badge-variant($purple);
+}
+
+
+// Extra alert
+
+.alert-purple {
+    @include alert-variant($purple, $purple, #fff);
+}
+.alert-green {
+    @include alert-variant($green, $green, #fff);
+}
+.alert-pink {
+    @include alert-variant($pink, $pink, #fff);
+}
+.alert-inverse {
+    @include alert-variant($inverse, $inverse, #fff);
+}
+
+// Form Rounded
+.form-control-rounded {
+    border-radius: 100px;
+}

styles/app/common/bootstrap-reset.scss

@@ -1,409 +1,409 @@
-/* ========================================================================
-     Component: bootstrap-reset
- ========================================================================== */
-
-// Use this file to reset simple bootstrap styles
-// instead of modifying the core files
-// Makes easy to update new framework versions
-// --------------------------------------------------
-
-*:not(.react-grid-Cell):focus {
-    outline: 0 !important
-}
-
-a {
-    outline: none !important;
-    &.text-muted {
-        &:hover,
-        &:focus {
-            color: darken($text-muted, 10%);
-        }
-    }
-}
-
-hr {
-    border-top: 1px solid $gray-light;
-}
-
-// custom element
-[data-now] {
-    display: inline-block;
-}
-
-.badge {
-    padding: 0.1875rem 0.4375rem;
-    font-size: 0.75rem;
-    border-radius: 0.625rem;
-    &.badge-warning {
-        color: #fff !important;
-    }
-    &.badge-secondary {
-        background-color: $gray-dark;
-        color: #fff;
-    }
-}
-
-.list-group {
-    line-height: 1.3;
-    .list-group-item {
-        padding: 10px;
-        color: #555;
-        &.active {
-            color: #fff;
-            .badge {
-                background-color: #fff;
-                color: $primary;
-            }
-        }
-        .card>& {
-            border: 0;
-        }
-    }
-}
-
-.list-group+.card-footer {
-    border-top: 0;
-}
-
-.page-header {
-    padding-bottom: 0.59375rem;
-    margin: 2.625rem 0 1.3125rem;
-    border-bottom: 1px solid $gray-light;
-}
-
-.card {
-    border-color: transparent;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-    .card-header {
-        border-bottom: 0;
-        padding: 0.625rem 0.9375rem;
-        background-color: transparent;
-        .card-title {
-            margin-bottom: 0;
-            font-size: 1rem;
-        }
-        a {
-            text-decoration: none !important;
-        }
-    }
-}
-.card-body {
-    padding: 0.9375rem; //15px
-}
-.card-footer {
-    padding: 0.625rem 0.9375rem;
-}
-
-.card-default {
-
-    border-top-width: 3px;
-    border-color: $card-default-border-color;
-
-    .card-header {
-        background-color: #fff;
-    }
-}
-
-.well {
-    border: 1px solid $gray;
-}
-
-.jumbotron {
-    border: 1px solid $gray;
-    background-color: #fff;
-    @include media-breakpoint-up(md) {
-        padding: $jumbotron-padding ($jumbotron-padding/2);
-    }
-}
-
-.nav-tabs>.nav-item>.nav-link {
-    font-weight: bold;
-    color: $body-color;
-    background-color: $gray-lighter;
-    margin: 0;
-    border: 1px solid $gray;
-    border-radius: 0;
-    padding: 10px 20px;
-    &.active {
-        background-color: $nav-tabs-link-active-bg;
-        &,
-        &:hover,
-        &:focus {
-            //color: inherit;
-            border-bottom-color: #fff;
-        }
-    }
-}
-
-.tab-content {
-    padding: 10px 20px;
-    border-style: solid;
-    border-width: 0 1px 1px 1px;
-    border-color: $gray;
-    .nav-pills+& {
-        border: 0;
-        padding: 0;
-    }
-    .p-0 & {
-        padding: 0 !important
-    }
-}
-
-
-.btn {
-    border-radius: 3px;
-    font-size: 13px;
-    -webkit-appearance: none;
-    outline: none !important; // padding: 0.375rem 1rem;
-    @include transition(all .1s);
-    &.btn-link {
-        box-shadow: none;
-        border: 0;
-    }
-    .input-group & {
-        font-size: 14px;
-        border-color: $input-border-color;
-    }
-    .input-group .form-control-sm+.input-group-btn & {
-        font-size: 0.8125rem;
-        padding: 0.3125rem 0.625rem;
-        margin-left: -1px;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-}
-
-// Override button styles
-.btn {
-    &.btn-warning {
-        color: #fff;
-    }
-    &.btn-outline-warning:not(:disabled) {
-        &:hover, &:active {
-            color: #fff;
-        }
-    }
-}
-
-.btn-secondary {
-    background-color: $btn-secondary-bg;
-    border-color: $btn-secondary-border;
-    color: $btn-secondary-color;
-    &:hover {
-        background-color: #f5f5f5;
-    } // active state override
-    &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled).active,
-    .show>&.dropdown-toggle {
-        background-color: #f5f5f5;
-        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    }
-}
-
-.btn-outline-secondary {
-    border-color: $btn-secondary-border !important;
-    color: $btn-secondary-color;
-    &:hover {
-        color: $btn-secondary-color;
-        background-color: #f5f5f5 !important;
-    }
-    &:focus {
-        box-shadow: 0 0 0 0.2rem rgba($btn-secondary-border, 0.5);
-    }
-}
-
-span.btn { -webkit-appearance: none !important; }
-
-// FORMS
-.form-control {
-    box-shadow: 0 0 0 #000 !important;
-    font-size: 0.875rem; //14px
-    &:focus {
-        border-color: $input-focus-border-color;
-    }
-}
-
-.form-control-sm,
-select.form-control-sm {
-    font-size: .75rem;
-    height: 31px;
-}
-
-.custom-select {
-    -webkit-appearance: none;
-}
-
-.custom-control-label::before,
-.custom-control-label::after {
-    top: 0.19rem;
-}
-.custom-control-label::before {
-    border: 1px solid $gray;
-}
-
-fieldset {
-    padding-bottom: 20px;
-    border-bottom: 1px dashed #eee;
-    margin-bottom: 20px;
-    &.last-child,
-    &:last-child {
-        border-bottom: 0;
-    }
-    .form-group {
-        margin-bottom: 0;
-    }
-}
-
-.input-group-text {
-    font-size: .875rem; // 14px
-}
-
-@include media-breakpoint-down(sm) {
-    // Remove Input Shadows on iPad
-    input[type="text"],
-    input[type="email"],
-    input[type="search"],
-    input[type="password"] {
-        -webkit-appearance: none;
-    }
-}
-
-// TABLES
-.table-responsive {
-    overflow-y: hidden;
-}
-
-.table {
-
-    // Bottom align for column headings
-    >thead>tr>th {
-        border-bottom-width: 0;
-    } // Account for multiple tbody instances
-    >tbody+tbody {
-        border-bottom-width: 1px;
-    }
-
-    .form-control {
-        max-width: 100%;
-    }
-}
-
-.table-bordered {
-    >thead>tr {
-        >th,
-        >td {
-            border-bottom-width: 1px;
-        }
-    }
-}
-
-
-.progress {
-    @include box-shadow(0 0 0 #000);
-    border-radius: $border-radius-sm;
-    border: 1px solid $progress-bg;
-    background-color: #fff;
-    .progress-bar {
-        @include box-shadow(0 0 0 #000);
-    }
-}
-
-// Popover
-// --------------------------------------------------
-.popover {
-    box-shadow: 0 0 0 #000;
-    border-color: #eee;
-    border-bottom: 2px solid $gray-light;
-    border-radius: $border-radius-sm;
-    .popover-title {
-        border: 0;
-    }
-}
-
-
-// NAV
-.nav {
-    &.nav-pills {
-        .active>a {
-            background-color: $primary;
-        }
-    }
-}
-
-// DROPDOWN
-.dropdown-menu {
-    border-radius: $border-radius-sm;
-    font-size: 14px;
-    padding: 0.3125rem 0;
-    box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px;
-    border-color: $dropdown-border-color;
-    .dropdown-item {
-        line-height: 1.52857143;
-        padding: 0.1875rem 1.25rem;
-    }
-}
-
-.dropdown-header {
-    color: #a1a2a3;
-}
-
-.navbar-top .navbar-nav>.active>a {
-    color: #999;
-    &:hover,
-    &:focus {
-        color: #d1d2d3;
-    }
-}
-
-
-.navbar-default .navbar-nav .open .dropdown-menu>li>a {
-    color: #666;
-    &:hover,
-    &:focus {
-        color: #222;
-    }
-}
-
-// CAROUSEL
-.carousel {
-    .carousel-indicators {
-        bottom: 0;
-    }
-    .carousel-control {
-        &.left,
-        &.right {
-            background-image: none;
-        } // Add support for font awesome
-        em {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            z-index: 5;
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            margin-top: -10px;
-            margin-left: -10px;
-        }
-    }
-}
-
-// ALERT
-@each $color,
-$value in $theme-colors {
-    .alert-#{$color} {
-        @include alert-variant($value, $value, #fff);
-    }
-}
-
-.alert-secondary {
-    color: $body-color;
-    border-color: $gray-light;
-}
-
-// fix for ie9 (dropdwon no showing)
-.topnavbar,
-.navbar,
-.navbar .dropdown-menu {
-    filter: none !important;
-}
+/* ========================================================================
+     Component: bootstrap-reset
+ ========================================================================== */
+
+// Use this file to reset simple bootstrap styles
+// instead of modifying the core files
+// Makes easy to update new framework versions
+// --------------------------------------------------
+
+*:not(.react-grid-Cell):focus {
+    outline: 0 !important
+}
+
+a {
+    outline: none !important;
+    &.text-muted {
+        &:hover,
+        &:focus {
+            color: darken($text-muted, 10%);
+        }
+    }
+}
+
+hr {
+    border-top: 1px solid $gray-light;
+}
+
+// custom element
+[data-now] {
+    display: inline-block;
+}
+
+.badge {
+    padding: 0.1875rem 0.4375rem;
+    font-size: 0.75rem;
+    border-radius: 0.625rem;
+    &.badge-warning {
+        color: #fff !important;
+    }
+    &.badge-secondary {
+        background-color: $gray-dark;
+        color: #fff;
+    }
+}
+
+.list-group {
+    line-height: 1.3;
+    .list-group-item {
+        padding: 10px;
+        color: #555;
+        &.active {
+            color: #fff;
+            .badge {
+                background-color: #fff;
+                color: $primary;
+            }
+        }
+        .card>& {
+            border: 0;
+        }
+    }
+}
+
+.list-group+.card-footer {
+    border-top: 0;
+}
+
+.page-header {
+    padding-bottom: 0.59375rem;
+    margin: 2.625rem 0 1.3125rem;
+    border-bottom: 1px solid $gray-light;
+}
+
+.card {
+    border-color: transparent;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    .card-header {
+        border-bottom: 0;
+        padding: 0.625rem 0.9375rem;
+        background-color: transparent;
+        .card-title {
+            margin-bottom: 0;
+            font-size: 1rem;
+        }
+        a {
+            text-decoration: none !important;
+        }
+    }
+}
+.card-body {
+    padding: 20px; //15px
+}
+.card-footer {
+    padding: 0.625rem 0.9375rem;
+}
+
+.card-default {
+
+    border-top-width: 3px;
+    border-color: $card-default-border-color;
+
+    .card-header {
+        background-color: #fff;
+    }
+}
+
+.well {
+    border: 1px solid $gray;
+}
+
+.jumbotron {
+    border: 1px solid $gray;
+    background-color: #fff;
+    @include media-breakpoint-up(md) {
+        padding: $jumbotron-padding ($jumbotron-padding/2);
+    }
+}
+
+.nav-tabs>.nav-item>.nav-link {
+    font-weight: bold;
+    color: $body-color;
+    background-color: $gray-lighter;
+    margin: 0;
+    border: 1px solid $gray;
+    border-radius: 0;
+    padding: 10px 20px;
+    &.active {
+        background-color: $nav-tabs-link-active-bg;
+        &,
+        &:hover,
+        &:focus {
+            //color: inherit;
+            border-bottom-color: #fff;
+        }
+    }
+}
+
+.tab-content {
+    padding: 10px 20px;
+    border-style: solid;
+    border-width: 0 1px 1px 1px;
+    border-color: $gray;
+    .nav-pills+& {
+        border: 0;
+        padding: 0;
+    }
+    .p-0 & {
+        padding: 0 !important
+    }
+}
+
+
+.btn {
+    border-radius: 3px;
+    font-size: 13px;
+    -webkit-appearance: none;
+    outline: none !important; // padding: 0.375rem 1rem;
+    @include transition(all .1s);
+    &.btn-link {
+        box-shadow: none;
+        border: 0;
+    }
+    .input-group & {
+        font-size: 14px;
+        border-color: $input-border-color;
+    }
+    .input-group .form-control-sm+.input-group-btn & {
+        font-size: 0.8125rem;
+        padding: 0.3125rem 0.625rem;
+        margin-left: -1px;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+}
+
+// Override button styles
+.btn {
+    &.btn-warning {
+        color: #fff;
+    }
+    &.btn-outline-warning:not(:disabled) {
+        &:hover, &:active {
+            color: #fff;
+        }
+    }
+}
+
+.btn-secondary {
+    background-color: $btn-secondary-bg;
+    border-color: $btn-secondary-border;
+    color: $btn-secondary-color;
+    &:hover {
+        background-color: #f5f5f5;
+    } // active state override
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active,
+    .show>&.dropdown-toggle {
+        background-color: #f5f5f5;
+        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    }
+}
+
+.btn-outline-secondary {
+    border-color: $btn-secondary-border !important;
+    color: $btn-secondary-color;
+    &:hover {
+        color: $btn-secondary-color;
+        background-color: #f5f5f5 !important;
+    }
+    &:focus {
+        box-shadow: 0 0 0 0.2rem rgba($btn-secondary-border, 0.5);
+    }
+}
+
+span.btn { -webkit-appearance: none !important; }
+
+// FORMS
+.form-control {
+    box-shadow: 0 0 0 #000 !important;
+    font-size: 0.875rem; //14px
+    &:focus {
+        border-color: $input-focus-border-color;
+    }
+}
+
+.form-control-sm,
+select.form-control-sm {
+    font-size: .75rem;
+    height: 31px;
+}
+
+.custom-select {
+    -webkit-appearance: none;
+}
+
+.custom-control-label::before,
+.custom-control-label::after {
+    top: 0.19rem;
+}
+.custom-control-label::before {
+    border: 1px solid $gray;
+}
+
+fieldset {
+    padding-bottom: 20px;
+    border-bottom: 1px dashed #eee;
+    margin-bottom: 20px;
+    &.last-child,
+    &:last-child {
+        border-bottom: 0;
+    }
+    .form-group {
+        margin-bottom: 0;
+    }
+}
+
+.input-group-text {
+    font-size: .875rem; // 14px
+}
+
+@include media-breakpoint-down(sm) {
+    // Remove Input Shadows on iPad
+    input[type="text"],
+    input[type="email"],
+    input[type="search"],
+    input[type="password"] {
+        -webkit-appearance: none;
+    }
+}
+
+// TABLES
+.table-responsive {
+    overflow-y: hidden;
+}
+
+.table {
+
+    // Bottom align for column headings
+    >thead>tr>th {
+        border-bottom-width: 0;
+    } // Account for multiple tbody instances
+    >tbody+tbody {
+        border-bottom-width: 1px;
+    }
+
+    .form-control {
+        max-width: 100%;
+    }
+}
+
+.table-bordered {
+    >thead>tr {
+        >th,
+        >td {
+            border-bottom-width: 1px;
+        }
+    }
+}
+
+
+.progress {
+    @include box-shadow(0 0 0 #000);
+    border-radius: $border-radius-sm;
+    border: 1px solid $progress-bg;
+    background-color: #fff;
+    .progress-bar {
+        @include box-shadow(0 0 0 #000);
+    }
+}
+
+// Popover
+// --------------------------------------------------
+.popover {
+    box-shadow: 0 0 0 #000;
+    border-color: #eee;
+    border-bottom: 2px solid $gray-light;
+    border-radius: $border-radius-sm;
+    .popover-title {
+        border: 0;
+    }
+}
+
+
+// NAV
+.nav {
+    &.nav-pills {
+        .active>a {
+            background-color: $primary;
+        }
+    }
+}
+
+// DROPDOWN
+.dropdown-menu {
+    border-radius: $border-radius-sm;
+    font-size: 14px;
+    padding: 0.3125rem 0;
+    box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px;
+    border-color: $dropdown-border-color;
+    .dropdown-item {
+        line-height: 1.52857143;
+        padding: 0.1875rem 1.25rem;
+    }
+}
+
+.dropdown-header {
+    color: #a1a2a3;
+}
+
+.navbar-top .navbar-nav>.active>a {
+    color: #999;
+    &:hover,
+    &:focus {
+        color: #d1d2d3;
+    }
+}
+
+
+.navbar-default .navbar-nav .open .dropdown-menu>li>a {
+    color: #666;
+    &:hover,
+    &:focus {
+        color: #222;
+    }
+}
+
+// CAROUSEL
+.carousel {
+    .carousel-indicators {
+        bottom: 0;
+    }
+    .carousel-control {
+        &.left,
+        &.right {
+            background-image: none;
+        } // Add support for font awesome
+        em {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            z-index: 5;
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            margin-top: -10px;
+            margin-left: -10px;
+        }
+    }
+}
+
+// ALERT
+@each $color,
+$value in $theme-colors {
+    .alert-#{$color} {
+        @include alert-variant($value, $value, #fff);
+    }
+}
+
+.alert-secondary {
+    color: $body-color;
+    border-color: $gray-light;
+}
+
+// fix for ie9 (dropdwon no showing)
+.topnavbar,
+.navbar,
+.navbar .dropdown-menu {
+    filter: none !important;
+}

styles/app/common/button-extra.scss

@@ -1,177 +1,174 @@
-/* ========================================================================
-     Component: button-extra
- ========================================================================== */
-
-//
-// Extension for Bootstrap buttons
-// ------------------------------------
-// BUTTONS LABEL mixin
-// --------------------------------------------------
-@mixin button-label-size($padding-vertical, $padding-horizontal, $border-radius) {
-    padding: $padding-vertical $padding-horizontal;
-    left: (-1 * $padding-horizontal);
-    border-radius: ($border-radius/*  - 1px */
-    ) 0 0 ($border-radius/*  - 1px */
-    );
-
-    &.btn-label-right {
-        left: auto;
-        right: (-1 * $padding-horizontal);
-        border-radius: 0 ($border-radius/*  - 1px */
-        ) ($border-radius/*  - 1px */
-        ) 0;
-    }
-}
-
-
-// New colors
-.btn-inverse {
-    @include button-variant($inverse, $inverse);
-}
-
-.btn-green {
-    @include button-variant($green, $green);
-}
-
-.btn-purple {
-    @include button-variant($purple, $purple);
-}
-
-.btn-pink {
-    @include button-variant($pink, $pink);
-}
-
-// Flat square button
-.btn-flat {
-    border-bottom-width: 1px;
-    border-radius: 0;
-    box-shadow: 0 0 0 #000;
-}
-
-// Extra size
-.btn-xs {
-    padding: 0.0625rem 0.3125rem;
-    font-size: 0.8125rem;
-    line-height: 1.5;
-}
-
-.btn-xl {
-    padding: 20px 16px;
-    font-size: 18px;
-}
-
-// Button square
-.btn-square {
-    border-radius: 0;
-}
-
-
-// Button pill
-.btn-pill-left {
-    border-top-left-radius: 50px;
-    border-bottom-left-radius: 50px;
-    padding-left: 18px;
-}
-
-.btn-pill-right {
-    border-top-right-radius: 50px;
-    border-bottom-right-radius: 50px;
-    padding-right: 18px;
-}
-
-// Rounded buttons
-.btn-oval {
-    @extend .btn-pill-right;
-    @extend .btn-pill-left;
-}
-
-// Labels for buttons
-// --------------------------------------------------
-.btn-labeled {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-
-.btn-label {
-    position: relative;
-    background: transparent;
-    background: rgba(0, 0, 0, 0.05);
-    display: inline-block;
-    @include button-label-size($input-btn-padding-y, $input-btn-padding-x, $border-radius);
-}
-
-.btn-lg .btn-label {
-    @include button-label-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $border-radius-lg);
-}
-
-.btn-sm .btn-label {
-    @include button-label-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $border-radius-sm);
-}
-
-.btn-xs .btn-label {
-    @include button-label-size(1px, 5px, $border-radius-sm);
-}
-
-
-// Fixed width buttons
-// --------------------------------------------------
-$btn-fw-default : 80px;
-$btn-fw-sm : 40px;
-$btn-fw-md : 60px;
-$btn-fw-lg : 140px;
-
-.btn-fw {
-    min-width: $btn-fw-default;
-    &.btn-sm {
-        min-width: $btn-fw-sm;
-    }
-    &.btn-md {
-        min-width: $btn-fw-md;
-    }
-    &.btn-lg {
-        min-width: $btn-fw-lg;
-    }
-}
-
-
-
-// Button Circle
-// -----------------------------------
-.btn-circle {
-    $sz: 35px;
-    width: $sz;
-    height: $sz;
-    text-align: center;
-    font-size: 12px;
-    line-height: $sz;
-    border-radius: 500px;
-    padding: 0;
-    border: 0;
-    >* {
-        line-height: inherit !important;
-    }
-    &.btn-lg {
-        $sz-lg: 50px;
-        width: $sz-lg;
-        height: $sz-lg;
-        font-size: 18px;
-        line-height: $sz-lg;
-    }
-}
-
-// Button Outline
-// -----------------------------------
-.btn-outline {
-    &-inverse {
-        @include button-outline-variant($inverse);
-    }
-    &-green {
-        @include button-outline-variant($green);
-    }
-    &-purple {
-        @include button-outline-variant($purple);
-    }
-    &-pink {
-        @include button-outline-variant($pink);
-    }
-}
+/* ========================================================================
+     Component: button-extra
+ ========================================================================== */
+
+//
+// Extension for Bootstrap buttons
+// ------------------------------------
+// BUTTONS LABEL mixin
+// --------------------------------------------------
+@mixin button-label-size($padding-vertical, $padding-horizontal, $border-radius) {
+    padding: $padding-vertical $padding-horizontal;
+    left: (-1 * $padding-horizontal);
+    border-radius: ($border-radius/*  - 1px */
+    ) 0 0 ($border-radius/*  - 1px */
+    );
+
+    &.btn-label-right {
+        left: auto;
+        right: (-1 * $padding-horizontal);
+        border-radius: 0 ($border-radius/*  - 1px */
+        ) ($border-radius/*  - 1px */
+        ) 0;
+    }
+}
+
+
+// New colors
+.btn-inverse {
+    @include button-variant($inverse, $inverse);
+}
+
+.btn-green {
+    @include button-variant($green, $green);
+}
+
+.btn-purple {
+    @include button-variant($purple, $purple);
+}
+
+.btn-pink {
+    @include button-variant($pink, $pink);
+}
+
+// Flat square button
+.btn-flat {
+    border-bottom-width: 1px;
+    border-radius: 0;
+    box-shadow: 0 0 0 #000;
+}
+
+// Extra size
+.btn-xs {
+    padding: 0.0625rem 0.3125rem;
+    font-size: 0.8125rem;
+    line-height: 1.5;
+}
+
+.btn-xl {
+    padding: 20px 16px;
+    font-size: 18px;
+}
+
+// Button square
+.btn-square {
+    border-radius: 0;
+}
+
+
+// Button pill
+.btn-pill-left {
+    border-top-left-radius: 50px;
+    border-bottom-left-radius: 50px;
+    padding-left: 18px;
+}
+
+.btn-pill-right {
+    border-top-right-radius: 50px;
+    border-bottom-right-radius: 50px;
+    padding-right: 18px;
+}
+
+// Rounded buttons
+.btn-oval {
+    @extend .btn-pill-right;
+    @extend .btn-pill-left;
+}
+
+// Labels for buttons
+// --------------------------------------------------
+
+
+.btn-label {
+    position: relative;
+    background: transparent;
+    // background: rgba(0, 0, 0, 0.05);
+    display: inline-block;
+    @include button-label-size($input-btn-padding-y, $input-btn-padding-x, $border-radius);
+}
+
+.btn-lg .btn-label {
+    @include button-label-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $border-radius-lg);
+}
+
+.btn-sm .btn-label {
+    @include button-label-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $border-radius-sm);
+}
+
+.btn-xs .btn-label {
+    @include button-label-size(1px, 5px, $border-radius-sm);
+}
+
+
+// Fixed width buttons
+// --------------------------------------------------
+$btn-fw-default : 80px;
+$btn-fw-sm : 40px;
+$btn-fw-md : 60px;
+$btn-fw-lg : 140px;
+
+.btn-fw {
+    min-width: $btn-fw-default;
+    &.btn-sm {
+        min-width: $btn-fw-sm;
+    }
+    &.btn-md {
+        min-width: $btn-fw-md;
+    }
+    &.btn-lg {
+        min-width: $btn-fw-lg;
+    }
+}
+
+
+
+// Button Circle
+// -----------------------------------
+.btn-circle {
+    $sz: 35px;
+    width: $sz;
+    height: $sz;
+    text-align: center;
+    font-size: 12px;
+    line-height: $sz;
+    border-radius: 500px;
+    padding: 0;
+    border: 0;
+    >* {
+        line-height: inherit !important;
+    }
+    &.btn-lg {
+        $sz-lg: 50px;
+        width: $sz-lg;
+        height: $sz-lg;
+        font-size: 18px;
+        line-height: $sz-lg;
+    }
+}
+
+// Button Outline
+// -----------------------------------
+.btn-outline {
+    &-inverse {
+        @include button-outline-variant($inverse);
+    }
+    &-green {
+        @include button-outline-variant($green);
+    }
+    &-purple {
+        @include button-outline-variant($purple);
+    }
+    &-pink {
+        @include button-outline-variant($pink);
+    }
+}

styles/app/common/cards.scss

@@ -1,87 +1,87 @@
-/* ========================================================================
-     Component: cards
- ========================================================================== */
-
-.card {
-    margin-bottom: 1.25rem; //20px
-}
-
-//
-// Adds support to use more components inside cards
-//
-.card {
-    .table {
-        margin-bottom: 0;
-        >thead>tr>th {
-            border-top: 0;
-        }
-    }
-    &.card-transparent {
-        border: 0;
-        background-color: transparent;
-        box-shadow: 0 0 0 #000;
-        .card-header,
-        .card-body {
-            background-color: transparent;
-            padding-left: 0;
-            padding-right: 0;
-        }
-    }
-    // reset default inherited card border
-    > .list-group {
-        border-top: 0;
-        border-bottom: 0;
-    }
-}
-
-
-.card-flat {
-    margin: 0 !important;
-    border: 0;
-}
-
-.card-columns-2 {
-    column-count: 1;
-    @include media-breakpoint-up(md) {
-        column-count: 2;
-    }
-}
-
-.card-tool {
-    display: inline-block;
-    color: #fff;
-    text-align: center;
-    &:hover {
-        cursor: pointer;
-    }
-    > em + em {
-        margin-left: 12px;
-    }
-}
-
-.card-header {
-
-    .card-default & {
-        >.card-tool {
-            color: #c1c2c3;
-        }
-    } // right floated labels adjust position
-    >.badge.float-right {
-        margin-top: 3px;
-        +.badge.float-right {
-            margin-right: 10px;
-        }
-    }
-}
-
-.card-footer {
-    .pagination {
-        margin: 0;
-    }
-    .radial-bar {
-        margin-bottom: 0;
-    }
-    p {
-        margin-bottom: 0;
-    }
-}
+/* ========================================================================
+     Component: cards
+ ========================================================================== */
+
+.card {
+    margin-bottom: 1.25rem; //20px
+}
+
+//
+// Adds support to use more components inside cards
+//
+.card {
+    .table {
+        margin-bottom: 0;
+        >thead>tr>th {
+            border-top: 0;
+        }
+    }
+    &.card-transparent {
+        border: 0;
+        background-color: transparent;
+        box-shadow: 0 0 0 #000;
+        .card-header,
+        .card-body {
+            background-color: transparent;
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+    // reset default inherited card border
+    > .list-group {
+        border-top: 0;
+        border-bottom: 0;
+    }
+}
+
+
+.card-flat {
+    margin: 0 !important;
+    border: 0;
+}
+
+.card-columns-2 {
+    column-count: 1;
+    @include media-breakpoint-up(md) {
+        column-count: 2;
+    }
+}
+
+.card-tool {
+    display: inline-block;
+    color: #fff;
+    text-align: center;
+    &:hover {
+        cursor: pointer;
+    }
+    > em + em {
+        margin-left: 12px;
+    }
+}
+
+.card-header {
+
+    .card-default & {
+        >.card-tool {
+            color: #c1c2c3;
+        }
+    } // right floated labels adjust position
+    >.badge.float-right {
+        margin-top: 3px;
+        +.badge.float-right {
+            margin-right: 10px;
+        }
+    }
+}
+
+.card-footer {
+    .pagination {
+        margin: 0;
+    }
+    .radial-bar {
+        margin-bottom: 0;
+    }
+    p {
+        margin-bottom: 0;
+    }
+}

styles/app/common/circles.scss

@@ -1,42 +1,42 @@
-/* ========================================================================
-     Component: circles
- ========================================================================== */
-
-// Colored circle for indication purposes
-$point-sz-sm : 5px;
-$point-sz : 7px;
-$point-sz-lg : 11px;
-$point-sz-xl : 18px;
-
-.circle {
-    display: inline-block;
-    width: $point-sz;
-    height: $point-sz;
-    border-radius: 500px;
-    margin: 0 .5em;
-    background-color: #ddd;
-    vertical-align: baseline;
-    border: 2px solid transparent;
-    &.text-left {
-        margin-left: 0;
-    }
-    &.text-right {
-        margin-right: 0;
-    }
-}
-
-// Sizes
-.circle-sm {
-    width: $point-sz-sm;
-    height: $point-sz-sm;
-}
-
-.circle-lg {
-    width: $point-sz-lg;
-    height: $point-sz-lg;
-}
-
-.circle-xl {
-    width: $point-sz-xl;
-    height: $point-sz-xl;
-}
+/* ========================================================================
+     Component: circles
+ ========================================================================== */
+
+// Colored circle for indication purposes
+$point-sz-sm : 5px;
+$point-sz : 7px;
+$point-sz-lg : 11px;
+$point-sz-xl : 18px;
+
+.circle {
+    display: inline-block;
+    width: $point-sz;
+    height: $point-sz;
+    border-radius: 500px;
+    margin: 0 .5em;
+    background-color: #ddd;
+    vertical-align: baseline;
+    border: 2px solid transparent;
+    &.text-left {
+        margin-left: 0;
+    }
+    &.text-right {
+        margin-right: 0;
+    }
+}
+
+// Sizes
+.circle-sm {
+    width: $point-sz-sm;
+    height: $point-sz-sm;
+}
+
+.circle-lg {
+    width: $point-sz-lg;
+    height: $point-sz-lg;
+}
+
+.circle-xl {
+    width: $point-sz-xl;
+    height: $point-sz-xl;
+}

styles/app/common/dropdown-extra.scss

@@ -1,60 +1,60 @@
-/* ========================================================================
-     Component: dropdown-extras
- ========================================================================== */
-
-
-// Allows to mix list group inside dropdowns
-.dropdown-list {
-
-    .dropdown-item {
-        padding: 0;
-    }
-
-    >.dropdown-menu {
-        padding: 0;
-        min-width: 220px;
-    }
-
-    .list-group {
-        margin: 0;
-    }
-
-    .list-group-item {
-        border-radius: 0;
-        border-left: 0;
-        border-right: 0;
-        &:first-child {
-            border-top: 0;
-        }
-        &:last-child {
-            border-bottom: 0;
-        }
-    }
-}
-
-// Labels inside dropdowns
-.dropdown {
-    >a {
-        position: relative;
-        >.badge {
-            position: absolute;
-            top: 10px;
-            right: 0;
-            padding: 2px 5px;
-        }
-    }
-}
-
-// Popper doesnt place correctly dropdowns
-// we can use forced class to place them
-.dropdown-menu-right-forced {
-    right: 0 !important;
-    left: auto !important;
-}
-
-// Remove default icon from dropdowns
-.dropdown-toggle-nocaret {
-    &:after {
-        display: none;
-    }
-}
+/* ========================================================================
+     Component: dropdown-extras
+ ========================================================================== */
+
+
+// Allows to mix list group inside dropdowns
+.dropdown-list {
+
+    .dropdown-item {
+        padding: 0;
+    }
+
+    >.dropdown-menu {
+        padding: 0;
+        min-width: 220px;
+    }
+
+    .list-group {
+        margin: 0;
+    }
+
+    .list-group-item {
+        border-radius: 0;
+        border-left: 0;
+        border-right: 0;
+        &:first-child {
+            border-top: 0;
+        }
+        &:last-child {
+            border-bottom: 0;
+        }
+    }
+}
+
+// Labels inside dropdowns
+.dropdown {
+    >a {
+        position: relative;
+        >.badge {
+            position: absolute;
+            top: 10px;
+            right: 0;
+            padding: 2px 5px;
+        }
+    }
+}
+
+// Popper doesnt place correctly dropdowns
+// we can use forced class to place them
+.dropdown-menu-right-forced {
+    right: 0 !important;
+    left: auto !important;
+}
+
+// Remove default icon from dropdowns
+.dropdown-toggle-nocaret {
+    &:after {
+        display: none;
+    }
+}

styles/app/common/half-float.scss

@@ -1,36 +1,36 @@
-/* ========================================================================
-     Component: half-float
- ========================================================================== */
-
-//
-// Float an absolute positioned element
-// and align it with a half top and bottom offset
-// relative to its parent
-//
-// .half-float
-//  > .half-float-[top|bottom]
-//
-// ----------------------------------------------
-$half-aligned-size : 128px;
-$half-aligned-gutter : 5px;
-
-.half-float {
-    position: relative;
-    margin-bottom: ($half-aligned-size/2) + $half-aligned-gutter;
-
-    .half-float-bottom,
-    .half-float-top {
-        position: absolute;
-        left: 50%;
-        bottom: -($half-aligned-size/2);
-        width: $half-aligned-size;
-        height: $half-aligned-size;
-        margin-left: -($half-aligned-size/2);
-        z-index: 2;
-    }
-
-    .half-float-top {
-        bottom: auto;
-        top: -($half-aligned-size/2);
-    }
-}
+/* ========================================================================
+     Component: half-float
+ ========================================================================== */
+
+//
+// Float an absolute positioned element
+// and align it with a half top and bottom offset
+// relative to its parent
+//
+// .half-float
+//  > .half-float-[top|bottom]
+//
+// ----------------------------------------------
+$half-aligned-size : 128px;
+$half-aligned-gutter : 5px;
+
+.half-float {
+    position: relative;
+    margin-bottom: ($half-aligned-size/2) + $half-aligned-gutter;
+
+    .half-float-bottom,
+    .half-float-top {
+        position: absolute;
+        left: 50%;
+        bottom: -($half-aligned-size/2);
+        width: $half-aligned-size;
+        height: $half-aligned-size;
+        margin-left: -($half-aligned-size/2);
+        z-index: 2;
+    }
+
+    .half-float-top {
+        bottom: auto;
+        top: -($half-aligned-size/2);
+    }
+}

styles/app/common/inputs.scss

@@ -1,305 +1,305 @@
-/* ========================================================================
-     Component: inputs
- ========================================================================== */
-
-
-/**
- * Custom form elements
- *    - Checkbox
- *    - Radios
- *    - Switch
- *    - Note editor
- */
-
-//
-// CHECKBOX AND RADIOS
-//
-$ui-fg-color: $primary;
-$ui-bg-color: #ddd;
-
-
-@mixin switch-variant($wd, $hg) {
-    & span {
-        width: $wd;
-        height: $hg;
-    }
-
-    & span:after {
-        height: $hg - 2;
-        width: $hg - 2;
-    }
-}
-
-.c-checkbox,
-.c-radio {
-    margin-right: 4px;
-    * {
-        cursor: pointer;
-    }
-    input {
-        opacity: 0;
-        position: absolute;
-        margin-left: 0 !important;
-    } // the element that replaces the input
-    span {
-        position: relative;
-        display: inline-block;
-        vertical-align: top; // margin-left: -20px;
-        width: 20px;
-        height: 20px;
-        border-radius: 2px;
-        border: 1px solid #ccc;
-        margin-right: 5px;
-        text-align: center;
-        &:before {
-            margin-left: 1px; // fa align trick
-        }
-    }
-
-    &:hover span {
-        border-color: $ui-fg-color;
-    }
-
-    .form-inline & span {
-        margin-left: 0;
-    }
-
-    &.c-checkbox-rounded,
-    &.c-radio-rounded {
-        span {
-            border-radius: 500px;
-        }
-    }
-}
-
-/* override for radio */
-.c-radio span {
-    border-radius: 500px;
-}
-
-/* the icon */
-.c-checkbox,
-.c-radio {
-    span:before {
-        //content: "\2713"; /* comment content to use custom icon classes */
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        opacity: 0;
-        text-align: center !important;
-        font-size: 12px;
-        line-height: 18px;
-        vertical-align: middle;
-    }
-}
-
-.c-checkbox,
-.c-radio {
-    /* Checked state */
-    input[type=checkbox]:checked+span:before,
-    input[type=radio]:checked+span:before {
-        color: #fff;
-        opacity: 1;
-        transition: color .3s ease-out;
-    }
-
-    input[type=checkbox]:checked+span,
-    input[type=radio]:checked+span {
-        border-color: $ui-fg-color;
-        background-color: $ui-fg-color;
-    }
-
-    /* override for radio */
-    input[type=radio]:checked+span {
-        background-color: #fff;
-        &:before {
-            color: $ui-fg-color;
-        }
-    }
-
-    /* Disable state */
-    input[type=checkbox]:disabled+span,
-    input[type=radio]:disabled+span {
-        border-color: $ui-bg-color !important;
-        background-color: $ui-bg-color !important;
-    }
-    /* override for radio */
-    input[type=radio]:disabled+span {
-        background-color: #fff !important;
-        &:before {
-            color: $ui-bg-color;
-        }
-    }
-
-    /* Focus state */
-    input[type=checkbox]:focus + span,
-    input[type=radio]:focus + span {
-        box-shadow: 0 0 0 0.2rem rgba($ui-fg-color, .25)
-    }
-}
-
-.c-radio.c-radio-nofont {
-    span {
-        &:before {
-            $sz: 10px;
-            content: "";
-            width: $sz;
-            height: $sz;
-            top: 50%;
-            left: 50%;
-            margin-top: -($sz/2);
-            margin-left: -($sz/2);
-            border-radius: 500px;
-        }
-    }
-
-    input[type=radio]:checked+span:before {
-        color: #fff;
-        opacity: 1;
-        transition: color .3s ease-out;
-    }
-
-    input[type=radio]:checked+span {
-        border-color: $ui-fg-color;
-        background-color: $ui-fg-color;
-    }
-
-    /* override for radio */
-    input[type=radio]:checked+span {
-        background-color: #fff;
-        &:before {
-            background-color: $ui-fg-color;
-        }
-    }
-
-    /* Disable state */
-    input[type=radio]:disabled+span {
-        border-color: $ui-bg-color !important;
-        background-color: $ui-bg-color !important;
-    }
-    /* override for radio */
-    input[type=radio]:disabled+span {
-        background-color: #fff !important;
-        &:before {
-            background-color: $ui-bg-color;
-        }
-    }
-}
-
-
-//
-// Form SWITCH
-// Supports radio and checkbox
-//
-
-$switch-wd: 40px;
-$switch-hg: $switch-wd/2;
-
-$switch-lg-wd: 50px;
-$switch-lg-hg: $switch-lg-wd/2;
-
-$switch-sm-wd: 30px;
-$switch-sm-hg: $switch-sm-wd/2;
-
-.switch {
-    .form-control {
-        padding-top: 7px;
-        margin-bottom: 0;
-    }
-}
-
-.switch * {
-    cursor: pointer;
-}
-
-.switch input {
-    opacity: 0;
-    position: absolute;
-    z-index: -1;
-}
-
-.switch {
-    display: flex;
-    align-items: center;
-    margin: 0;
-    & span {
-        position: relative;
-        display: inline-block;
-        width: $switch-wd;
-        height: $switch-hg;
-        background-color: #fff;
-        border: 1px solid $ui-bg-color;
-        border-radius: 100px;
-        transition: all .5s;
-        box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1) inset;
-    }
-
-    & span:after {
-        content: "";
-        position: absolute;
-        background-color: #fff;
-        top: 0;
-        left: 0;
-        height: $switch-hg - 2;
-        width: $switch-hg - 2;
-        border: 1px solid #ddd;
-        border-radius: 400px;
-        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
-        -webkit-transition: all .2s;
-    }
-
-    &.switch-lg {
-        @include switch-variant($switch-lg-wd, $switch-lg-hg);
-    }
-    &.switch-sm {
-        @include switch-variant($switch-sm-wd, $switch-sm-hg);
-    }
-}
-
-.switch input {
-    &:checked+span {
-        background-color: $ui-fg-color;
-        border-color: $ui-fg-color;
-        transition: all .5s;
-    }
-
-    &:checked+span:after {
-        left: 50%;
-        transition: all .2s;
-    }
-
-    &:disabled+span {
-        background-color: #f1f1f1;
-        cursor: not-allowed;
-    }
-    &:focus + span {
-        box-shadow: 0 0 0 0.2rem rgba($ui-fg-color, .25)
-    }
-}
-
-//
-// Textarea note editor
-//
-
-.note-editor {
-    background-image: -webkit-linear-gradient(#eee .1em, transparent .1em);
-    background-image: linear-gradient(#eee .1em, transparent .1em);
-
-    background-size: 100% 20px;
-    background-color: #fff;
-
-    line-height: 20px;
-    margin-top: 5px;
-    padding: 0;
-    padding-bottom: 1px;
-    border: none;
-    $margin-color: $warning;
-    &.note-editor-margin {
-        background-image: -webkit-linear-gradient(0deg, transparent 49px, lighten($margin-color, 30%) 49px, lighten($margin-color, 30%) 51px, transparent 51px), -webkit-linear-gradient(#eee .1em, transparent .1em);
-        background-image: linear-gradient(90deg, transparent 49px, lighten($margin-color, 30%) 49px, lighten($margin-color, 30%) 51px, transparent 51px),
-        linear-gradient(#eee .1em, transparent .1em);
-        padding-left: 55px;
-    }
-}
+/* ========================================================================
+     Component: inputs
+ ========================================================================== */
+
+
+/**
+ * Custom form elements
+ *    - Checkbox
+ *    - Radios
+ *    - Switch
+ *    - Note editor
+ */
+
+//
+// CHECKBOX AND RADIOS
+//
+$ui-fg-color: $primary;
+$ui-bg-color: #ddd;
+
+
+@mixin switch-variant($wd, $hg) {
+    & span {
+        width: $wd;
+        height: $hg;
+    }
+
+    & span:after {
+        height: $hg - 2;
+        width: $hg - 2;
+    }
+}
+
+.c-checkbox,
+.c-radio {
+    margin-right: 4px;
+    * {
+        cursor: pointer;
+    }
+    input {
+        opacity: 0;
+        position: absolute;
+        margin-left: 0 !important;
+    } // the element that replaces the input
+    span {
+        position: relative;
+        display: inline-block;
+        vertical-align: top; // margin-left: -20px;
+        width: 20px;
+        height: 20px;
+        border-radius: 2px;
+        border: 1px solid #ccc;
+        margin-right: 5px;
+        text-align: center;
+        &:before {
+            margin-left: 1px; // fa align trick
+        }
+    }
+
+    &:hover span {
+        border-color: $ui-fg-color;
+    }
+
+    .form-inline & span {
+        margin-left: 0;
+    }
+
+    &.c-checkbox-rounded,
+    &.c-radio-rounded {
+        span {
+            border-radius: 500px;
+        }
+    }
+}
+
+/* override for radio */
+.c-radio span {
+    border-radius: 500px;
+}
+
+/* the icon */
+.c-checkbox,
+.c-radio {
+    span:before {
+        //content: "\2713"; /* comment content to use custom icon classes */
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        opacity: 0;
+        text-align: center !important;
+        font-size: 12px;
+        line-height: 18px;
+        vertical-align: middle;
+    }
+}
+
+.c-checkbox,
+.c-radio {
+    /* Checked state */
+    input[type=checkbox]:checked+span:before,
+    input[type=radio]:checked+span:before {
+        color: #fff;
+        opacity: 1;
+        transition: color .3s ease-out;
+    }
+
+    input[type=checkbox]:checked+span,
+    input[type=radio]:checked+span {
+        border-color: $ui-fg-color;
+        background-color: $ui-fg-color;
+    }
+
+    /* override for radio */
+    input[type=radio]:checked+span {
+        background-color: #fff;
+        &:before {
+            color: $ui-fg-color;
+        }
+    }
+
+    /* Disable state */
+    input[type=checkbox]:disabled+span,
+    input[type=radio]:disabled+span {
+        border-color: $ui-bg-color !important;
+        background-color: $ui-bg-color !important;
+    }
+    /* override for radio */
+    input[type=radio]:disabled+span {
+        background-color: #fff !important;
+        &:before {
+            color: $ui-bg-color;
+        }
+    }
+
+    /* Focus state */
+    input[type=checkbox]:focus + span,
+    input[type=radio]:focus + span {
+        box-shadow: 0 0 0 0.2rem rgba($ui-fg-color, .25)
+    }
+}
+
+.c-radio.c-radio-nofont {
+    span {
+        &:before {
+            $sz: 10px;
+            content: "";
+            width: $sz;
+            height: $sz;
+            top: 50%;
+            left: 50%;
+            margin-top: -($sz/2);
+            margin-left: -($sz/2);
+            border-radius: 500px;
+        }
+    }
+
+    input[type=radio]:checked+span:before {
+        color: #fff;
+        opacity: 1;
+        transition: color .3s ease-out;
+    }
+
+    input[type=radio]:checked+span {
+        border-color: $ui-fg-color;
+        background-color: $ui-fg-color;
+    }
+
+    /* override for radio */
+    input[type=radio]:checked+span {
+        background-color: #fff;
+        &:before {
+            background-color: $ui-fg-color;
+        }
+    }
+
+    /* Disable state */
+    input[type=radio]:disabled+span {
+        border-color: $ui-bg-color !important;
+        background-color: $ui-bg-color !important;
+    }
+    /* override for radio */
+    input[type=radio]:disabled+span {
+        background-color: #fff !important;
+        &:before {
+            background-color: $ui-bg-color;
+        }
+    }
+}
+
+
+//
+// Form SWITCH
+// Supports radio and checkbox
+//
+
+$switch-wd: 40px;
+$switch-hg: $switch-wd/2;
+
+$switch-lg-wd: 50px;
+$switch-lg-hg: $switch-lg-wd/2;
+
+$switch-sm-wd: 30px;
+$switch-sm-hg: $switch-sm-wd/2;
+
+.switch {
+    .form-control {
+        padding-top: 7px;
+        margin-bottom: 0;
+    }
+}
+
+.switch * {
+    cursor: pointer;
+}
+
+.switch input {
+    opacity: 0;
+    position: absolute;
+    z-index: -1;
+}
+
+.switch {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    & span {
+        position: relative;
+        display: inline-block;
+        width: $switch-wd;
+        height: $switch-hg;
+        background-color: #fff;
+        border: 1px solid $ui-bg-color;
+        border-radius: 100px;
+        transition: all .5s;
+        box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1) inset;
+    }
+
+    & span:after {
+        content: "";
+        position: absolute;
+        background-color: #fff;
+        top: 0;
+        left: 0;
+        height: $switch-hg - 2;
+        width: $switch-hg - 2;
+        border: 1px solid #ddd;
+        border-radius: 400px;
+        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+        -webkit-transition: all .2s;
+    }
+
+    &.switch-lg {
+        @include switch-variant($switch-lg-wd, $switch-lg-hg);
+    }
+    &.switch-sm {
+        @include switch-variant($switch-sm-wd, $switch-sm-hg);
+    }
+}
+
+.switch input {
+    &:checked+span {
+        background-color: $ui-fg-color;
+        border-color: $ui-fg-color;
+        transition: all .5s;
+    }
+
+    &:checked+span:after {
+        left: 50%;
+        transition: all .2s;
+    }
+
+    &:disabled+span {
+        background-color: #f1f1f1;
+        cursor: not-allowed;
+    }
+    &:focus + span {
+        box-shadow: 0 0 0 0.2rem rgba($ui-fg-color, .25)
+    }
+}
+
+//
+// Textarea note editor
+//
+
+.note-editor {
+    background-image: -webkit-linear-gradient(#eee .1em, transparent .1em);
+    background-image: linear-gradient(#eee .1em, transparent .1em);
+
+    background-size: 100% 20px;
+    background-color: #fff;
+
+    line-height: 20px;
+    margin-top: 5px;
+    padding: 0;
+    padding-bottom: 1px;
+    border: none;
+    $margin-color: $warning;
+    &.note-editor-margin {
+        background-image: -webkit-linear-gradient(0deg, transparent 49px, lighten($margin-color, 30%) 49px, lighten($margin-color, 30%) 51px, transparent 51px), -webkit-linear-gradient(#eee .1em, transparent .1em);
+        background-image: linear-gradient(90deg, transparent 49px, lighten($margin-color, 30%) 49px, lighten($margin-color, 30%) 51px, transparent 51px),
+        linear-gradient(#eee .1em, transparent .1em);
+        padding-left: 55px;
+    }
+}

styles/app/common/page-loader.scss

@@ -1,26 +1,26 @@
-/* ========================================================================
-     Component: Page loader
- ========================================================================== */
-
-.page-loader {
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    top: 0;
-    left: 0;
-    padding-top: 30px;
-    text-align: center;
-}
-
-@include media-breakpoint-up(md) {
-    .section-container .page-loader {
-        top: $navbar-hg;
-        left: $aside-wd;
-    }
-    .aside-collapsed .section-container .page-loader {
-        left: $aside-wd-collapsed;
-    }
-    .aside-collapsed-text .section-container .page-loader {
-        left: $aside-wd-collapsed-text;
-    }
-}
+/* ========================================================================
+     Component: Page loader
+ ========================================================================== */
+
+.page-loader {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    top: 0;
+    left: 0;
+    padding-top: 30px;
+    text-align: center;
+}
+
+@include media-breakpoint-up(md) {
+    .section-container .page-loader {
+        top: $navbar-hg;
+        left: $aside-wd;
+    }
+    .aside-collapsed .section-container .page-loader {
+        left: $aside-wd-collapsed;
+    }
+    .aside-collapsed-text .section-container .page-loader {
+        left: $aside-wd-collapsed-text;
+    }
+}

styles/app/common/placeholder.scss

@@ -1,39 +1,39 @@
-/* ========================================================================
-     Component: placeholder
- ========================================================================== */
-
-// Defines styles for placeholder boxes
-// Create a placeholder space that can be used for uploading files via drag and drop.
-// Based on uikit placeholder addon
-// ==========================================================================
-// Variables
-// ==========================================================================
-$placeholder-margin-vertical : 15px;
-$placeholder-padding : 20px;
-$placeholder-border : #ddd;
-$placeholder-background : #fafafa;
-$placeholder-color : #444;
-
-$placeholder-large-padding-vertical : 80px;
-
-
-// Placeholder container
-.box-placeholder {
-    margin-bottom: $placeholder-margin-vertical;
-    padding: $placeholder-padding;
-    border: 1px dashed $placeholder-border;
-    background: $placeholder-background;
-    color: $placeholder-color;
-}
-
-
-// Remove margin from the last-child 
-.box-placeholder> :last-child {
-    margin-bottom: 0;
-}
-
-// Variant
-.box-placeholder-lg {
-    padding-top: $placeholder-large-padding-vertical;
-    padding-bottom: $placeholder-large-padding-vertical;
-}
+/* ========================================================================
+     Component: placeholder
+ ========================================================================== */
+
+// Defines styles for placeholder boxes
+// Create a placeholder space that can be used for uploading files via drag and drop.
+// Based on uikit placeholder addon
+// ==========================================================================
+// Variables
+// ==========================================================================
+$placeholder-margin-vertical : 15px;
+$placeholder-padding : 20px;
+$placeholder-border : #ddd;
+$placeholder-background : #fafafa;
+$placeholder-color : #444;
+
+$placeholder-large-padding-vertical : 80px;
+
+
+// Placeholder container
+.box-placeholder {
+    margin-bottom: $placeholder-margin-vertical;
+    padding: $placeholder-padding;
+    border: 1px dashed $placeholder-border;
+    background: $placeholder-background;
+    color: $placeholder-color;
+}
+
+
+// Remove margin from the last-child 
+.box-placeholder> :last-child {
+    margin-bottom: 0;
+}
+
+// Variant
+.box-placeholder-lg {
+    padding-top: $placeholder-large-padding-vertical;
+    padding-bottom: $placeholder-large-padding-vertical;
+}

styles/app/common/print.scss

@@ -1,37 +1,37 @@
-/* ========================================================================
-     Component: print
- ========================================================================== */
-
-// Put here all rules required to style the print view
-
-@media print {
-
-    .sidebar,
-    .topnavbar,
-    .offsidebar,
-    .btn {
-        display: none !important;
-        width: 0 !important;
-        height: 0 !important;
-    }
-
-    .wrapper,
-    .wrapper .section-container,
-    .content-wrapper {
-        margin: 0 !important;
-        /* remove margin used for sidebar and expand the content */
-        padding: 0 !important;
-        width: 100% !important;
-        border: 0; /* optional: remove top border used to separate the page heading */
-    }
-
-    .content-wrapper {
-        overflow: hidden !important;
-    }
-
-    /* hide sidebar container */
-    .aside-container { display: none !important; }
-    /* remove space used for the sidebar */
-    .footer-container { margin: 0 !important; }
-
-}
+/* ========================================================================
+     Component: print
+ ========================================================================== */
+
+// Put here all rules required to style the print view
+
+@media print {
+
+    .sidebar,
+    .topnavbar,
+    .offsidebar,
+    .btn {
+        display: none !important;
+        width: 0 !important;
+        height: 0 !important;
+    }
+
+    .wrapper,
+    .wrapper .section-container,
+    .content-wrapper {
+        margin: 0 !important;
+        /* remove margin used for sidebar and expand the content */
+        padding: 0 !important;
+        width: 100% !important;
+        border: 0; /* optional: remove top border used to separate the page heading */
+    }
+
+    .content-wrapper {
+        overflow: hidden !important;
+    }
+
+    /* hide sidebar container */
+    .aside-container { display: none !important; }
+    /* remove space used for the sidebar */
+    .footer-container { margin: 0 !important; }
+
+}

styles/app/common/typo.scss

@@ -1,48 +1,48 @@
-/* ========================================================================
-     Component: typo
- ========================================================================== */
-
-@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic);
-
-body {
-    font-family: "Source Sans Pro", sans-serif;
-    color: $body-color;
-    font-size: 0.875rem; // 14px
-}
-
-h1,h2,h3,h4 {
-    font-weight: bold;
-}
-
-h1,h2,h3,h4,h5,h6,
-.h1,.h2,.h3,.h4,.h5,.h6 {
-    margin-bottom: 0.65625rem;
-}
-
-h1,.h1 {
-    font-size: 2.25rem; // 36px
-}
-
-h2,.h2 {
-    font-size: 1.875rem; // 30px
-}
-
-h3,.h3 {
-    font-size: 1.5rem; // 24px
-}
-
-h4,.h4 {
-    font-size: 1.125rem; // 18px
-}
-
-h5,.h5 {
-    font-size: .875rem;
-}
-
-h6,.h6 {
-    font-size: 1rem;
-}
-
-p {
-    margin-bottom: .65rem; // ~10px
-}
+/* ========================================================================
+     Component: typo
+ ========================================================================== */
+
+@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic);
+
+body {
+    font-family: "Source Sans Pro", sans-serif;
+    color: $body-color;
+    font-size: 0.875rem; // 14px
+}
+
+h1,h2,h3,h4 {
+    font-weight: bold;
+}
+
+h1,h2,h3,h4,h5,h6,
+.h1,.h2,.h3,.h4,.h5,.h6 {
+    margin-bottom: 0.65625rem;
+}
+
+h1,.h1 {
+    font-size: 2.25rem; // 36px
+}
+
+h2,.h2 {
+    font-size: 1.875rem; // 30px
+}
+
+h3,.h3 {
+    font-size: 1.5rem; // 24px
+}
+
+h4,.h4 {
+    font-size: 1.125rem; // 18px
+}
+
+h5,.h5 {
+    font-size: .875rem;
+}
+
+h6,.h6 {
+    font-size: 1rem;
+}
+
+p {
+    margin-bottom: .65rem; // ~10px
+}

styles/app/common/utils.scss

@@ -1,253 +1,253 @@
-/* ========================================================================
-         Component: utils
- ========================================================================== */
-
-// Utilities classes to simplify
-// components constructions
-
-
-// Extra Background helpers
-@function custom-color($key) {
-  @return map-get($colors, $key);
-}
-
-@mixin bgcolor-variant($bgcolor, $text-color: #fff) {
-  $amountOfLight: 10%;
-  & {
-    background-color: custom-color($bgcolor);
-    color: $text-color !important;
-  }
-  &-light {
-    $col: custom-color($bgcolor + '-light');
-    background-color: #{$col};
-    color: $text-color !important;
-  }
-  &-dark {
-    $col: custom-color($bgcolor + '-dark');
-    background-color: #{$col};
-    color: $text-color !important;
-  }
-  small {
-    color: inherit;
-  }
-}
-
-@mixin make-bg($bgcolor, $text-color: #fff) {
-  background-color: $bgcolor;
-  color: $text-color !important;
-}
-
-// Common thumbnail sizes (ideal for images)
-@mixin thumnbail-size($sz: 8px) {
-  width: $sz !important;
-  height: $sz !important;
-}
-
-
-
-// Border
-// --------------------
-
-.b0 { border-width: 0 !important; }
-.bl0 { border-left-width: 0 !important; }
-.br0 { border-right-width: 0 !important; }
-.bt0 { border-top-width: 0 !important; }
-.bb0 { border-bottom-width: 0 !important; }
-
-.br { border-right: 1px solid $border-color;}
-.bl { border-left: 1px solid $border-color;}
-.bt { border-top: 1px solid $border-color;}
-.bb { border-bottom: 1px solid $border-color;}
-.b, .ba  { @extend .br;@extend .bl;@extend .bt;@extend .bb; } // all borders
-
-
-// Text helpers
-
-.text-primary { color: $primary !important; }
-.text-success { color: $success !important; }
-.text-info { color: $info !important; }
-.text-warning { color: $warning !important; }
-.text-danger { color: $danger !important; }
-
-.text-white         { color: #fff !important; }
-.text-inverse       { color: $inverse !important; }
-.text-alpha         { color: $text-alpha !important; }
-.text-pink          { color: $pink !important; }
-.text-purple        { color: $purple !important; }
-.text-dark          { color: $dark !important; }
-.text-alpha-inverse { color: $text-alpha-inverse !important; }
-.text-green         { color: $green !important; }
-.text-yellow        { color: $yellow !important; }
-.text-gray-darker   { color: $gray-darker !important; }
-.text-gray-dark     { color: $gray-dark !important; }
-.text-gray          { color: $gray !important; }
-.text-gray-light    { color: $gray-light !important; }
-.text-gray-lighter  { color: $gray-lighter !important; }
-.text-inherit       { color: inherit !important; }
-
-// Text sizing
-
-.text-sm { font-size: $text-sm; }
-.text-md { font-size: $text-md; }
-.text-lg { font-size: $text-lg; }
-
-// Text others
-
-.text-nowrap { white-space: nowrap; }
-.text-thin   { font-weight: 100 !important; }
-.text-normal { font-weight: normal !important; }
-.text-bold   { font-weight: bold !important; }
-
-.inline { display: inline-block !important; }
-.block-center { margin: 0 auto; }
-
-// Background helpers
-
-.bg-primary      { @include bgcolor-variant('primary'); }
-.bg-success      { @include bgcolor-variant('success'); }
-.bg-info         { @include bgcolor-variant('info'); }
-.bg-warning      { @include bgcolor-variant('warning'); }
-.bg-danger       { @include bgcolor-variant('danger'); }
-.bg-green        { @include bgcolor-variant('green'); }
-.bg-pink         { @include bgcolor-variant('pink'); }
-.bg-purple       { @include bgcolor-variant('purple'); }
-.bg-inverse      { @include bgcolor-variant('inverse'); }
-.bg-yellow       { @include bgcolor-variant('yellow'); }
-
-.bg-white        { @include make-bg(#fff, inherit); }
-.bg-gray-darker  { @include make-bg($gray-darker); }
-.bg-gray-dark    { @include make-bg($gray-dark); }
-.bg-gray         { @include make-bg($gray, $body-color); }
-.bg-gray-light   { @include make-bg($gray-light, $body-color); }
-.bg-gray-lighter { @include make-bg($gray-lighter, $body-color); }
-
-.bg-transparent  { background-color: transparent !important; }
-
-.bg-cover {
-    background-size: cover;
-}
-
-// Common thumbnail sizes (ideal for images)
-
-.thumb8   { @include thumnbail-size(); }
-.thumb16  { @include thumnbail-size(16px); }
-.thumb24  { @include thumnbail-size(24px); }
-.thumb32  { @include thumnbail-size(32px); }
-.thumb48  { @include thumnbail-size(48px); }
-.thumb64  { @include thumnbail-size(64px); }
-.thumb80  { @include thumnbail-size(80px); }
-.thumb96  { @include thumnbail-size(96px); }
-.thumb128 { @include thumnbail-size(128px); }
-
-
-// Vertical align helpers
-
-.align-middle {
-    vertical-align: middle;
-}
-.align-top {
-    vertical-align: top;
-}
-.align-bottom {
-    vertical-align: bottom;
-}
-
-
-// Background image
-.bg-center {
-    background-position: center center;
-    background-size: cover;
-}
-
-// List
-.list-icon {
-    em {
-        font-size: 14px;
-        width: 40px;
-        vertical-align: middle;
-        margin: 0;
-        display: inline-block;
-        text-align: center;
-        @include transition(all .2s);
-        line-height: 30px;
-    }
-    div:hover em {
-        transform: scale(3, 3)
-    }
-}
-
-// Fixed table layout algorithm
-.d-table-fixed {
-    table-layout: fixed;
-}
-
-// Components size
-
-.wd-xxs  { width: $wd-xxs;  }
-.wd-xs   { width: $wd-xs;   }
-.wd-sm   { width: $wd-sm;   }
-.wd-sd   { width: $wd-sd;   }
-.wd-md   { width: $wd-md;   }
-.wd-lg   { width: $wd-lg;   }
-.wd-xl   { width: $wd-xl;   }
-.wd-xxl  { width: $wd-xxl;  }
-.wd-wide { width: $wd-wide; }
-.wd-auto { width: $wd-auto; }
-.wd-zero { width: $wd-zero; }
-
-// Simulate clickable element
-.clickable {
-    cursor: pointer;
-}
-
-// Absolute center element
-// -----------------------------------
-
-.abs-center-container {
-    position: relative;
-}
-.abs-center {
-    // width: 50%;
-    height: 50%;
-    overflow: auto;
-    margin: auto;
-    position: absolute;
-    top: 0; left: 0; bottom: 0; right: 0;
-
-    &.abs-fixed {
-        position: fixed;
-        z-index: 999;
-    }
-
-    &.abs-right {
-        left: auto; right: 20px;
-        text-align: right;
-    }
-
-    &.abs-left {
-        right: auto; left: 20px;
-        text-align: left;
-    }
-}
-
-@media (max-height: 720px) {
-    .abs-center {
-        position: relative;
-    }
-}
-
-
-.link-unstyled {
-    text-decoration: none !important;
-    outline: none !important;
-}
-
-.no-resize {
-    resize: none;
-    max-width: 100%;
-    min-width: 100%;
-}
-
-.ie-fix-flex {
-    -ms-flex: 0 0 auto;
-}
+/* ========================================================================
+         Component: utils
+ ========================================================================== */
+
+// Utilities classes to simplify
+// components constructions
+
+
+// Extra Background helpers
+@function custom-color($key) {
+  @return map-get($colors, $key);
+}
+
+@mixin bgcolor-variant($bgcolor, $text-color: #fff) {
+  $amountOfLight: 10%;
+  & {
+    background-color: custom-color($bgcolor);
+    color: $text-color !important;
+  }
+  &-light {
+    $col: custom-color($bgcolor + '-light');
+    background-color: #{$col};
+    color: $text-color !important;
+  }
+  &-dark {
+    $col: custom-color($bgcolor + '-dark');
+    background-color: #{$col};
+    color: $text-color !important;
+  }
+  small {
+    color: inherit;
+  }
+}
+
+@mixin make-bg($bgcolor, $text-color: #fff) {
+  background-color: $bgcolor;
+  color: $text-color !important;
+}
+
+// Common thumbnail sizes (ideal for images)
+@mixin thumnbail-size($sz: 8px) {
+  width: $sz !important;
+  height: $sz !important;
+}
+
+
+
+// Border
+// --------------------
+
+.b0 { border-width: 0 !important; }
+.bl0 { border-left-width: 0 !important; }
+.br0 { border-right-width: 0 !important; }
+.bt0 { border-top-width: 0 !important; }
+.bb0 { border-bottom-width: 0 !important; }
+
+.br { border-right: 1px solid $border-color;}
+.bl { border-left: 1px solid $border-color;}
+.bt { border-top: 1px solid $border-color;}
+.bb { border-bottom: 0px solid $border-color;}
+.b, .ba  { @extend .br;@extend .bl;@extend .bt;@extend .bb; } // all borders
+
+
+// Text helpers
+
+.text-primary { color: $primary !important; }
+.text-success { color: $success !important; }
+.text-info { color: $info !important; }
+.text-warning { color: $warning !important; }
+.text-danger { color: $danger !important; }
+
+.text-white         { color: #fff !important; }
+.text-inverse       { color: $inverse !important; }
+.text-alpha         { color: $text-alpha !important; }
+.text-pink          { color: $pink !important; }
+.text-purple        { color: $purple !important; }
+.text-dark          { color: $dark !important; }
+.text-alpha-inverse { color: $text-alpha-inverse !important; }
+.text-green         { color: $green !important; }
+.text-yellow        { color: $yellow !important; }
+.text-gray-darker   { color: $gray-darker !important; }
+.text-gray-dark     { color: $gray-dark !important; }
+.text-gray          { color: $gray !important; }
+.text-gray-light    { color: $gray-light !important; }
+.text-gray-lighter  { color: $gray-lighter !important; }
+.text-inherit       { color: inherit !important; }
+
+// Text sizing
+
+.text-sm { font-size: $text-sm; }
+.text-md { font-size: $text-md; }
+.text-lg { font-size: $text-lg; }
+
+// Text others
+
+.text-nowrap { white-space: nowrap; }
+.text-thin   { font-weight: 100 !important; }
+.text-normal { font-weight: normal !important; }
+.text-bold   { font-weight: bold !important; }
+
+.inline { display: inline-block !important; }
+.block-center { margin: 0 auto; }
+
+// Background helpers
+
+.bg-primary      { @include bgcolor-variant('primary'); }
+.bg-success      { @include bgcolor-variant('success'); }
+.bg-info         { @include bgcolor-variant('info'); }
+.bg-warning      { @include bgcolor-variant('warning'); }
+.bg-danger       { @include bgcolor-variant('danger'); }
+.bg-green        { @include bgcolor-variant('green'); }
+.bg-pink         { @include bgcolor-variant('pink'); }
+.bg-purple       { @include bgcolor-variant('purple'); }
+.bg-inverse      { @include bgcolor-variant('inverse'); }
+.bg-yellow       { @include bgcolor-variant('yellow'); }
+
+.bg-white        { @include make-bg(#fff, inherit); }
+.bg-gray-darker  { @include make-bg($gray-darker); }
+.bg-gray-dark    { @include make-bg($gray-dark); }
+.bg-gray         { @include make-bg($gray, $body-color); }
+.bg-gray-light   { @include make-bg($gray-light, $body-color); }
+.bg-gray-lighter { @include make-bg($gray-lighter, $body-color); }
+
+.bg-transparent  { background-color: transparent !important; }
+
+.bg-cover {
+    background-size: cover;
+}
+
+// Common thumbnail sizes (ideal for images)
+
+.thumb8   { @include thumnbail-size(); }
+.thumb16  { @include thumnbail-size(16px); }
+.thumb24  { @include thumnbail-size(24px); }
+.thumb32  { @include thumnbail-size(32px); }
+.thumb48  { @include thumnbail-size(48px); }
+.thumb64  { @include thumnbail-size(64px); }
+.thumb80  { @include thumnbail-size(80px); }
+.thumb96  { @include thumnbail-size(96px); }
+.thumb128 { @include thumnbail-size(128px); }
+
+
+// Vertical align helpers
+
+.align-middle {
+    vertical-align: middle;
+}
+.align-top {
+    vertical-align: top;
+}
+.align-bottom {
+    vertical-align: bottom;
+}
+
+
+// Background image
+.bg-center {
+    background-position: center center;
+    background-size: cover;
+}
+
+// List
+.list-icon {
+    em {
+        font-size: 14px;
+        width: 40px;
+        vertical-align: middle;
+        margin: 0;
+        display: inline-block;
+        text-align: center;
+        @include transition(all .2s);
+        line-height: 30px;
+    }
+    div:hover em {
+        transform: scale(3, 3)
+    }
+}
+
+// Fixed table layout algorithm
+.d-table-fixed {
+    table-layout: fixed;
+}
+
+// Components size
+
+.wd-xxs  { width: $wd-xxs;  }
+.wd-xs   { width: $wd-xs;   }
+.wd-sm   { width: $wd-sm;   }
+.wd-sd   { width: $wd-sd;   }
+.wd-md   { width: $wd-md;   }
+.wd-lg   { width: $wd-lg;   }
+.wd-xl   { width: $wd-xl;   }
+.wd-xxl  { width: $wd-xxl;  }
+.wd-wide { width: $wd-wide; }
+.wd-auto { width: $wd-auto; }
+.wd-zero { width: $wd-zero; }
+
+// Simulate clickable element
+.clickable {
+    cursor: pointer;
+}
+
+// Absolute center element
+// -----------------------------------
+
+.abs-center-container {
+    position: relative;
+}
+.abs-center {
+    // width: 50%;
+    height: 50%;
+    overflow: auto;
+    margin: auto;
+    position: absolute;
+    top: 0; left: 0; bottom: 0; right: 0;
+
+    &.abs-fixed {
+        position: fixed;
+        z-index: 999;
+    }
+
+    &.abs-right {
+        left: auto; right: 20px;
+        text-align: right;
+    }
+
+    &.abs-left {
+        right: auto; left: 20px;
+        text-align: left;
+    }
+}
+
+@media (max-height: 720px) {
+    .abs-center {
+        position: relative;
+    }
+}
+
+
+.link-unstyled {
+    text-decoration: none !important;
+    outline: none !important;
+}
+
+.no-resize {
+    resize: none;
+    max-width: 100%;
+    min-width: 100%;
+}
+
+.ie-fix-flex {
+    -ms-flex: 0 0 auto;
+}

styles/app/common/variables.scss

@@ -1,210 +1,210 @@
-
-// Cutoms Gray colors for theme
-$gray-darker:           #232735;
-$gray-dark:             #3a3f51;
-$gray:                  #dde6e9;
-$gray-light:            #e4eaec;
-$gray-lighter:          #edf1f2;
-
-// Custom brand colors for theme
-$inverse:               #131e26;
-$purple:                #7266ba;
-$pink:                  #f532e5;
-$yellow:                #fad732;
-$green:                 #37bc9b;
-
-$primary:               #5d9cec;
-$secondary:             #fff;
-$success:               #27c24c;
-$info:                  #23b7e5;
-$warning:               #ff902b;
-$danger:                #f05050;
-$dark:                  #3a3f51;
-
-// Custom color variants
-$amountOfLight: 10%;
-
-$primary-light:         lighten($primary, $amountOfLight);
-$success-light:         lighten($success, $amountOfLight);
-$info-light:            lighten($info, $amountOfLight);
-$warning-light:         lighten($warning, $amountOfLight);
-$danger-light:          lighten($danger, $amountOfLight);
-$inverse-light:         lighten($inverse, $amountOfLight);
-$green-light:           lighten($green, $amountOfLight);
-$pink-light:            lighten($pink, $amountOfLight);
-$purple-light:          lighten($purple, $amountOfLight);
-$yellow-light:          lighten($yellow, $amountOfLight);
-$primary-dark:          darken($primary, $amountOfLight);
-$success-dark:          darken($success, $amountOfLight);
-$info-dark:             darken($info, $amountOfLight);
-$warning-dark:          darken($warning, $amountOfLight);
-$danger-dark:           darken($danger, $amountOfLight);
-$inverse-dark:          darken($inverse, $amountOfLight);
-$green-dark:            darken($green, $amountOfLight);
-$pink-dark:             darken($pink, $amountOfLight);
-$purple-dark:           darken($purple, $amountOfLight);
-$yellow-dark:           darken($yellow, $amountOfLight);
-
-// Theme variables
-
-// used for sidebars and content spacing
-$navbar-height:                    55px;
-
-// Button secondary redefinition style for theme
-$btn-secondary-color:              #333;
-$btn-secondary-bg:                 #fff;
-$btn-secondary-border:             #eaeaea;
-
-// Top Border color for custom default cards (.card-default)
-$card-default-border-color:        #cfdbe2;
-
-
-// ---------------------
-// Utilities variables
-// ---------------------
-
-$text-alpha:            rgba(255,255,255,.5);
-$text-alpha-inverse:    rgba(0,0,0,.5);
-
-$font-size-base:        1rem;
-$text-sm:               $font-size-base * 0.74375;
-$text-md:               $font-size-base * 1.6625;
-$text-lg:               $font-size-base * 2.625;
-
-$border-color:          rgba(0,0,0,.12);
-
-$wd-xxs:                60px;
-$wd-xs:                 90px;
-$wd-sm:                 150px;
-$wd-sd:                 200px; // sd == standard
-$wd-md:                 240px;
-$wd-lg:                 280px;
-$wd-xl:                 320px;
-$wd-xxl:                360px;
-$wd-wide:               100%;
-$wd-auto:               auto;
-$wd-zero:               0;
-
-
-// ---------------------
-// Bootstrap 4 Variables Override
-// ---------------------
-
-// Color system
-
-$colors: (
-    "purple":     $purple,
-    "pink":       $pink,
-    "yellow":     $yellow,
-    "green":      $green,
-    "primary":    $primary,
-    "success":    $success,
-    "info":       $info,
-    "warning":    $warning,
-    "danger":     $danger,
-    'inverse':    $inverse,
-
-    'primary-light': $primary-light,
-    'primary-dark':  $primary-dark,
-    'success-light': $success-light,
-    'success-dark':  $success-dark,
-    'info-light':    $info-light,
-    'info-dark':     $info-dark,
-    'warning-light': $warning-light,
-    'warning-dark':  $warning-dark,
-    'danger-light':  $danger-light,
-    'danger-dark':   $danger-dark,
-    'green-light':   $green-light,
-    'green-dark':    $green-dark,
-    'pink-light':    $pink-light,
-    'pink-dark':     $pink-dark,
-    'purple-light':  $purple-light,
-    'purple-dark':   $purple-dark,
-    'inverse-light': $inverse-light,
-    'inverse-dark':  $inverse-dark,
-    'yellow-light':  $yellow-light,
-    'yellow-dark':   $yellow-dark,
-);
-
-
-$theme-colors: (
-  "primary":    $primary,
-  "secondary":  $secondary,
-  "success":    $success,
-  "info":       $info,
-  "warning":    $warning,
-  "danger":     $danger
-);
-
-// Body
-
-$body-bg:                   #f5f7fa;
-$body-color:                #656565;
-
-$border-radius:               .25rem;
-$border-radius-lg:            .375rem;
-
-$line-height-base:            1.528571429;
-
-$headings-line-height:        1.1;
-
-$text-muted:                  #909FA7;
-
-// Tables
-
-$table-accent-bg:             #fafbfc;
-$table-hover-bg:              #fafbfc;
-
-$table-border-color:          #eee;
-
-// Buttons + Forms
-
-$input-btn-padding-y:         .375rem;
-$input-btn-padding-x:         1rem;
-
-$input-btn-padding-y-sm:      .3125rem;
-$input-btn-padding-x-sm:      .625rem;
-
-$input-btn-padding-y-lg:      .625rem;
-$input-btn-padding-x-lg:      1.25rem;
-
-$input-height:                2.1875rem; // 35px
-
-// Forms
-
-$input-disabled-bg:                     $gray-lighter;
-$input-border-color:                    $gray;
-$input-focus-border-color:              #66afe9;
-$input-placeholder-color:               #b7bac9;
-
-$form-feedback-icon-valid:              none;
-$form-feedback-icon-invalid:            none;
-
-$custom-control-indicator-active-bg:    lighten($primary, 25%);
-
-// Dropdowns
-
-$dropdown-border-color:             #e1e1e1;
-
-// Navs
-
-$nav-tabs-link-active-bg:           #fff;
-
-// Jumbotron
-
-$jumbotron-bg:                      #fcfcfc;
-
-// List group
-
-$list-group-border-color:           #e4eaec;
-
-// Image thumbnails
-
-$thumbnail-padding:                 .125rem;
-
-
-// Breadcrumbs
-
-$breadcrumb-bg:                     #fafafa;
-$breadcrumb-divider-color:          #c1c2c3;
-$breadcrumb-active-color:           $body-color;
+
+// Cutoms Gray colors for theme
+$gray-darker:           #232735;
+$gray-dark:             #3a3f51;
+$gray:                  #dde6e9;
+$gray-light:            #e4eaec;
+$gray-lighter:          #edf1f2;
+
+// Custom brand colors for theme
+$inverse:               #131e26;
+$purple:                #7266ba;
+$pink:                  #f532e5;
+$yellow:                #fad732;
+$green:                 #37bc9b;
+
+$primary:               #5d9cec;
+$secondary:             #fff;
+$success:               #27c24c;
+$info:                  #23b7e5;
+$warning:               #ff902b;
+$danger:                #f05050;
+$dark:                  #3a3f51;
+
+// Custom color variants
+$amountOfLight: 10%;
+
+$primary-light:         lighten($primary, $amountOfLight);
+$success-light:         lighten($success, $amountOfLight);
+$info-light:            lighten($info, $amountOfLight);
+$warning-light:         lighten($warning, $amountOfLight);
+$danger-light:          lighten($danger, $amountOfLight);
+$inverse-light:         lighten($inverse, $amountOfLight);
+$green-light:           lighten($green, $amountOfLight);
+$pink-light:            lighten($pink, $amountOfLight);
+$purple-light:          lighten($purple, $amountOfLight);
+$yellow-light:          lighten($yellow, $amountOfLight);
+$primary-dark:          darken($primary, $amountOfLight);
+$success-dark:          darken($success, $amountOfLight);
+$info-dark:             darken($info, $amountOfLight);
+$warning-dark:          darken($warning, $amountOfLight);
+$danger-dark:           darken($danger, $amountOfLight);
+$inverse-dark:          darken($inverse, $amountOfLight);
+$green-dark:            darken($green, $amountOfLight);
+$pink-dark:             darken($pink, $amountOfLight);
+$purple-dark:           darken($purple, $amountOfLight);
+$yellow-dark:           darken($yellow, $amountOfLight);
+
+// Theme variables
+
+// used for sidebars and content spacing
+$navbar-height:                    55px;
+
+// Button secondary redefinition style for theme
+$btn-secondary-color:              #333;
+$btn-secondary-bg:                 #fff;
+$btn-secondary-border:             #eaeaea;
+
+// Top Border color for custom default cards (.card-default)
+$card-default-border-color:        #cfdbe2;
+
+
+// ---------------------
+// Utilities variables
+// ---------------------
+
+$text-alpha:            rgba(255,255,255,.5);
+$text-alpha-inverse:    rgba(0,0,0,.5);
+
+$font-size-base:        1rem;
+$text-sm:               $font-size-base * 0.74375;
+$text-md:               $font-size-base * 1.6625;
+$text-lg:               $font-size-base * 2.625;
+
+$border-color:          rgba(0,0,0,.12);
+
+$wd-xxs:                60px;
+$wd-xs:                 90px;
+$wd-sm:                 150px;
+$wd-sd:                 200px; // sd == standard
+$wd-md:                 240px;
+$wd-lg:                 280px;
+$wd-xl:                 320px;
+$wd-xxl:                360px;
+$wd-wide:               100%;
+$wd-auto:               auto;
+$wd-zero:               0;
+
+
+// ---------------------
+// Bootstrap 4 Variables Override
+// ---------------------
+
+// Color system
+
+$colors: (
+    "purple":     $purple,
+    "pink":       $pink,
+    "yellow":     $yellow,
+    "green":      $green,
+    "primary":    $primary,
+    "success":    $success,
+    "info":       $info,
+    "warning":    $warning,
+    "danger":     $danger,
+    'inverse':    $inverse,
+
+    'primary-light': $primary-light,
+    'primary-dark':  $primary-dark,
+    'success-light': $success-light,
+    'success-dark':  $success-dark,
+    'info-light':    $info-light,
+    'info-dark':     $info-dark,
+    'warning-light': $warning-light,
+    'warning-dark':  $warning-dark,
+    'danger-light':  $danger-light,
+    'danger-dark':   $danger-dark,
+    'green-light':   $green-light,
+    'green-dark':    $green-dark,
+    'pink-light':    $pink-light,
+    'pink-dark':     $pink-dark,
+    'purple-light':  $purple-light,
+    'purple-dark':   $purple-dark,
+    'inverse-light': $inverse-light,
+    'inverse-dark':  $inverse-dark,
+    'yellow-light':  $yellow-light,
+    'yellow-dark':   $yellow-dark,
+);
+
+
+$theme-colors: (
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "success":    $success,
+  "info":       $info,
+  "warning":    $warning,
+  "danger":     $danger
+);
+
+// Body
+
+$body-bg:                   #f5f7fa;
+$body-color:                #656565;
+
+$border-radius:               .25rem;
+$border-radius-lg:            .375rem;
+
+$line-height-base:            1.528571429;
+
+$headings-line-height:        1.1;
+
+$text-muted:                  #909FA7;
+
+// Tables
+
+$table-accent-bg:             #fafbfc;
+$table-hover-bg:              #fafbfc;
+
+$table-border-color:          #eee;
+
+// Buttons + Forms
+
+$input-btn-padding-y:         .375rem;
+$input-btn-padding-x:         1rem;
+
+$input-btn-padding-y-sm:      .3125rem;
+$input-btn-padding-x-sm:      .625rem;
+
+$input-btn-padding-y-lg:      .625rem;
+$input-btn-padding-x-lg:      1.25rem;
+
+$input-height:                2.1875rem; // 35px
+
+// Forms
+
+$input-disabled-bg:                     $gray-lighter;
+$input-border-color:                    $gray;
+$input-focus-border-color:              #66afe9;
+$input-placeholder-color:               #b7bac9;
+
+$form-feedback-icon-valid:              none;
+$form-feedback-icon-invalid:            none;
+
+$custom-control-indicator-active-bg:    lighten($primary, 25%);
+
+// Dropdowns
+
+$dropdown-border-color:             #e1e1e1;
+
+// Navs
+
+$nav-tabs-link-active-bg:           #fff;
+
+// Jumbotron
+
+$jumbotron-bg:                      #fcfcfc;
+
+// List group
+
+$list-group-border-color:           #e4eaec;
+
+// Image thumbnails
+
+$thumbnail-padding:                 .125rem;
+
+
+// Breadcrumbs
+
+$breadcrumb-bg:                     #fafafa;
+$breadcrumb-divider-color:          #c1c2c3;
+$breadcrumb-active-color:           $body-color;

styles/app/extras/calendar.scss

@@ -1,70 +1,70 @@
-/* ========================================================================
-     Component: calendar
- ========================================================================== */
-
-.calendar-app {
-
-    .fc-state-highlight,
-    .fc-day:hover {
-        background-color: #f7f8f9;
-    }
-
-    .fc-today {
-        background-color: transparent !important;
-        .fc-day-number {
-            color: $info;
-        }
-    }
-
-    .fc-day-number {
-        font-size: 18px;
-        font-weight: bold;
-        color: #a1a2a3;
-    }
-
-    .fc-event {
-        color: #fff !important;
-    } // Allow to drag event outside the calendar
-    .fc-view {
-        overflow: visible;
-    }
-
-    @include media-breakpoint-down(lg) {
-        // hide views buttons
-        .fc-right {
-            display: none;
-        }
-    }
-    @include media-breakpoint-down(md) {
-        // hide views buttons and date buttons
-        .fc-right, .fc-left {
-            display: none;
-        }
-    }
-
-}
-
-// Calendar app styles
-// -----------------------
-.external-events {
-    margin: 0;
-    >div {
-        // display: inline-block;
-        margin-right: 5px;
-        margin-bottom: 5px;
-        padding: 6px 10px;
-        color: #fff;
-        font-size: 11px;
-        border-radius: 2px;
-        cursor: move;
-    }
-    &:empty {
-        content: "EMPTY";
-    }
-} // Remove events drop area
-
-#external-event-color-selector {
-    .circle.selected {
-        border: 3px solid rgba(255, 255, 255, .5);
-    }
-}
+/* ========================================================================
+     Component: calendar
+ ========================================================================== */
+
+.calendar-app {
+
+    .fc-state-highlight,
+    .fc-day:hover {
+        background-color: #f7f8f9;
+    }
+
+    .fc-today {
+        background-color: transparent !important;
+        .fc-day-number {
+            color: $info;
+        }
+    }
+
+    .fc-day-number {
+        font-size: 18px;
+        font-weight: bold;
+        color: #a1a2a3;
+    }
+
+    .fc-event {
+        color: #fff !important;
+    } // Allow to drag event outside the calendar
+    .fc-view {
+        overflow: visible;
+    }
+
+    @include media-breakpoint-down(lg) {
+        // hide views buttons
+        .fc-right {
+            display: none;
+        }
+    }
+    @include media-breakpoint-down(md) {
+        // hide views buttons and date buttons
+        .fc-right, .fc-left {
+            display: none;
+        }
+    }
+
+}
+
+// Calendar app styles
+// -----------------------
+.external-events {
+    margin: 0;
+    >div {
+        // display: inline-block;
+        margin-right: 5px;
+        margin-bottom: 5px;
+        padding: 6px 10px;
+        color: #fff;
+        font-size: 11px;
+        border-radius: 2px;
+        cursor: move;
+    }
+    &:empty {
+        content: "EMPTY";
+    }
+} // Remove events drop area
+
+#external-event-color-selector {
+    .circle.selected {
+        border: 3px solid rgba(255, 255, 255, .5);
+    }
+}

styles/app/layout/layout-animation.scss

@@ -1,53 +1,53 @@
-/* ========================================================================
-   Component: layout-animation.less
- ========================================================================== */
-
-.wrapper .aside-container {
-    @include transition(#{"width .2s cubic-bezier(0.35, 0, 0.25, 1), transform .3s cubic-bezier(0.35, 0, 0.25, 1)"});
-}
-
-.aside-inner,
-.navbar-header,
-.sidebar>.sidebar-nav>li {
-    transition: width .2s cubic-bezier(0.35, 0, 0.25, 1);
-}
-
-.wrapper .section-container {
-    transition: transform .3s cubic-bezier(0.35, 0, 0.25, 1);
-}
-
-.sidebar>.sidebar-nav .badge {
-    animation: fadeInRight 1s;
-    animation-fill-mode: both;
-}
-
-.aside-collapsed .sidebar>.sidebar-nav .badge,
-.aside-collapsed-text .sidebar>.sidebar-nav .badge {
-    animation: fadeIn 1s;
-}
-
-.sidebar .sidebar-nav>li>a {
-    animation: fadeInLeft .5s;
-}
-
-.sidebar>.sidebar-nav>.nav-heading,
-.sidebar>.sidebar-nav>li>a>span,
-.navbar-brand .brand-logo {
-    animation: fadeIn 1s;
-}
-
-.sidebar li>a,
-.sidebar li>.nav-item,
-.sidebar>.sidebar-nav>.nav-heading {
-    white-space: nowrap;
-}
-
-.aside-collapsed,
-.aside-collapsed-text {
-    .user-block-picture {
-        transition: width .2s cubic-bezier(0.35, 0, 0.25, 1);
-    }
-    .user-block {
-        transition: padding .2s cubic-bezier(0.35, 0, 0.25, 1);
-    }
-}
+/* ========================================================================
+   Component: layout-animation.less
+ ========================================================================== */
+
+.wrapper .aside-container {
+    @include transition(#{"width .2s cubic-bezier(0.35, 0, 0.25, 1), transform .3s cubic-bezier(0.35, 0, 0.25, 1)"});
+}
+
+.aside-inner,
+.navbar-header,
+.sidebar>.sidebar-nav>li {
+    transition: width .2s cubic-bezier(0.35, 0, 0.25, 1);
+}
+
+.wrapper .section-container {
+    transition: transform .3s cubic-bezier(0.35, 0, 0.25, 1);
+}
+
+.sidebar>.sidebar-nav .badge {
+    animation: fadeInRight 1s;
+    animation-fill-mode: both;
+}
+
+.aside-collapsed .sidebar>.sidebar-nav .badge,
+.aside-collapsed-text .sidebar>.sidebar-nav .badge {
+    animation: fadeIn 1s;
+}
+
+.sidebar .sidebar-nav>li>a {
+    animation: fadeInLeft .5s;
+}
+
+.sidebar>.sidebar-nav>.nav-heading,
+.sidebar>.sidebar-nav>li>a>span,
+.navbar-brand .brand-logo {
+    animation: fadeIn 1s;
+}
+
+.sidebar li>a,
+.sidebar li>.nav-item,
+.sidebar>.sidebar-nav>.nav-heading {
+    white-space: nowrap;
+}
+
+.aside-collapsed,
+.aside-collapsed-text {
+    .user-block-picture {
+        transition: width .2s cubic-bezier(0.35, 0, 0.25, 1);
+    }
+    .user-block {
+        transition: padding .2s cubic-bezier(0.35, 0, 0.25, 1);
+    }
+}

styles/app/layout/layout-extra.scss

@@ -1,179 +1,179 @@
-/* ========================================================================
-   Component: layout-extra
- ========================================================================== */
-
-// Hide footer and expand content to the bottom
-.hidden-footer {
-    .wrapper .footer-container {
-        display: none;
-    }
-    .wrapper .section-container {
-        margin-bottom: 0 !important;
-    }
-}
-
-// Layout full size
-.layout-fs {
-    .wrapper .section-container {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: $footer-hg;
-        top: $navbar-hg;
-        height: auto;
-        margin-top: 0 !important;
-        margin-bottom: 0 !important;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
-        @include media-breakpoint-up(xs) {
-            overflow: hidden;
-        }
-
-        .content-wrapper {
-            width: 100%;
-            height: 100%;
-            padding: 0;
-            > * {
-                width: 100%;
-                height: 100%;
-            }
-        }
-    }
-
-    &.hidden-footer {
-        .wrapper .section-container {
-            bottom: 0;
-        }
-    }
-}
-
-// Layout Horizontal Nav
-// -----------------------------------
-.layout-h {
-    .wrapper {
-        .section-container {
-            max-width: 1140px;
-            margin-left: auto;
-            margin-right: auto;
-            .content-wrapper .content-heading {
-                display: none;
-                +.breadcrumb { display: none; }
-            }
-        }
-        .section-container {
-            // margin-top: 0;
-        }
-        .offsidebar {
-            margin-top: $navbar-hg;
-        }
-        .footer-container {
-            margin: 0;
-        }
-    }
-    &.layout-fixed .wrapper {
-        .section-container,
-        .offsidebar {
-            margin-top: $navbar-hg;
-        }
-    }
-}
-
-
-// Aside float
-// -----------------------------------
-$float-space: 15px;
-.aside-float {
-
-    .wrapper {
-        box-shadow: 0 0 0 #000; // removes
-        .footer-container {
-            border: 0;
-        }
-        .aside-container {
-            padding: $float-space 0;
-            background: transparent;
-            .aside-inner {
-                height: 100%;
-                top: $float-space;
-                bottom: $float-space;
-                left: inherit;
-            }
-            .sidebar {
-                border: 1px solid $gray-light;
-            }
-            .sidebar:after {
-                display: none;
-            }
-        }
-        @include media-breakpoint-up(md) {
-            .section-container {
-                padding-left: $float-space;
-            }
-            .footer-container {
-                left: $float-space;
-            }
-        }
-        .content-wrapper {
-            border: 0;
-            .content-heading {
-                padding-top: 30px;
-                border: 0;
-                background-color: transparent;
-            }
-            .unwrap {
-                // disables unwrap
-                margin: 0 !important;
-            }
-        }
-    }
-
-    &.aside-toggled .wrapper {
-        // small delay to add some effect to sidebar slide
-        .aside-container {
-            transition: delay(0.05s);
-            .aside-inner {
-                margin-left: $float-space;
-            }
-        }
-        .section-container {
-            padding-left: $float-space;
-        }
-        .footer-container {
-            left: $float-space;
-        }
-    } // adapt header logo
-    @include media-breakpoint-up(md) {
-        &.aside-collapsed .topnavbar .navbar-header {
-            width: $aside-wd-collapsed + ($float-space * 2);
-        }
-        &.aside-collapsed-text .topnavbar .navbar-header {
-            width: $aside-wd-collapsed-text + ($float-space * 2);
-        }
-        &.layout-fs {
-            .wrapper .section-container .content-wrapper {
-                padding: 0 0 0 20px;
-            }
-        }
-        .wrapper .aside-container .aside-inner {
-            margin-left: $float-space;
-        }
-    } // boxed behavior
-    @include media-breakpoint-up(lg) {
-        &.layout-boxed {
-            .wrapper .aside-container .aside-inner {
-                margin-left: 0;
-            }
-            .wrapper .section-container {
-                padding-left: 0;
-            }
-        }
-    } // toggle state
-    &.aside-toggled {
-        &.layout-fs {
-            .wrapper .section-container .content-wrapper {
-                padding: 0 0 0 20px;
-            }
-        }
-    }
-}
+/* ========================================================================
+   Component: layout-extra
+ ========================================================================== */
+
+// Hide footer and expand content to the bottom
+.hidden-footer {
+    .wrapper .footer-container {
+        display: none;
+    }
+    .wrapper .section-container {
+        margin-bottom: 0 !important;
+    }
+}
+
+// Layout full size
+.layout-fs {
+    .wrapper .section-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: $footer-hg;
+        top: $navbar-hg;
+        height: auto;
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        @include media-breakpoint-up(xs) {
+            overflow: hidden;
+        }
+
+        .content-wrapper {
+            width: 100%;
+            height: 100%;
+            padding: 0;
+            > * {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    &.hidden-footer {
+        .wrapper .section-container {
+            bottom: 0;
+        }
+    }
+}
+
+// Layout Horizontal Nav
+// -----------------------------------
+.layout-h {
+    .wrapper {
+        .section-container {
+            max-width: 1140px;
+            margin-left: auto;
+            margin-right: auto;
+            .content-wrapper .content-heading {
+                display: none;
+                +.breadcrumb { display: none; }
+            }
+        }
+        .section-container {
+            // margin-top: 0;
+        }
+        .offsidebar {
+            margin-top: $navbar-hg;
+        }
+        .footer-container {
+            margin: 0;
+        }
+    }
+    &.layout-fixed .wrapper {
+        .section-container,
+        .offsidebar {
+            margin-top: $navbar-hg;
+        }
+    }
+}
+
+
+// Aside float
+// -----------------------------------
+$float-space: 15px;
+.aside-float {
+
+    .wrapper {
+        box-shadow: 0 0 0 #000; // removes
+        .footer-container {
+            border: 0;
+        }
+        .aside-container {
+            padding: $float-space 0;
+            background: transparent;
+            .aside-inner {
+                height: 100%;
+                top: $float-space;
+                bottom: $float-space;
+                left: inherit;
+            }
+            .sidebar {
+                border: 1px solid $gray-light;
+            }
+            .sidebar:after {
+                display: none;
+            }
+        }
+        @include media-breakpoint-up(md) {
+            .section-container {
+                padding-left: $float-space;
+            }
+            .footer-container {
+                left: $float-space;
+            }
+        }
+        .content-wrapper {
+            border: 0;
+            .content-heading {
+                padding-top: 30px;
+                border: 0;
+                background-color: transparent;
+            }
+            .unwrap {
+                // disables unwrap
+                margin: 0 !important;
+            }
+        }
+    }
+
+    &.aside-toggled .wrapper {
+        // small delay to add some effect to sidebar slide
+        .aside-container {
+            transition: delay(0.05s);
+            .aside-inner {
+                margin-left: $float-space;
+            }
+        }
+        .section-container {
+            padding-left: $float-space;
+        }
+        .footer-container {
+            left: $float-space;
+        }
+    } // adapt header logo
+    @include media-breakpoint-up(md) {
+        &.aside-collapsed .topnavbar .navbar-header {
+            width: $aside-wd-collapsed + ($float-space * 2);
+        }
+        &.aside-collapsed-text .topnavbar .navbar-header {
+            width: $aside-wd-collapsed-text + ($float-space * 2);
+        }
+        &.layout-fs {
+            .wrapper .section-container .content-wrapper {
+                padding: 0 0 0 20px;
+            }
+        }
+        .wrapper .aside-container .aside-inner {
+            margin-left: $float-space;
+        }
+    } // boxed behavior
+    @include media-breakpoint-up(lg) {
+        &.layout-boxed {
+            .wrapper .aside-container .aside-inner {
+                margin-left: 0;
+            }
+            .wrapper .section-container {
+                padding-left: 0;
+            }
+        }
+    } // toggle state
+    &.aside-toggled {
+        &.layout-fs {
+            .wrapper .section-container .content-wrapper {
+                padding: 0 0 0 20px;
+            }
+        }
+    }
+}

styles/app/layout/layout.scss

@@ -1,480 +1,480 @@
-/* ========================================================================
-     Component: layout
- ========================================================================== */
-
-//
-// Main layout
-// This file controls the presentation of all components
-//  .wrapper
-//     .section-container
-//       .content-wrapper
-//     .aside-container
-//
-// If modified or removed make sure to check the variable
-// shared with other components
-// -------------------------------------------------------------
-$aside-wd:                                220px;
-$aside-wd-collapsed:                      70px;
-$aside-wd-collapsed-text:                 90px;
-$aside-bg:                                #fff;
-
-$content-bg:                              $body-bg;
-$content-heading-bg:                      #fafbfc;
-$content-heading-border:                  #cfdbe2;
-$content-padding:                         20px;
-
-$footer-hg:                               60px;
-
-$navbar-hg:                               $navbar-height;
-
-$boxed-max-width:                         1140px;
-$z-index-main-section:                    111;
-
-html {
-    /* $replace rtl */
-    direction: ltr;
-    height: 100%; // http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
-    -ms-touch-action: manipulation;
-    touch-action: manipulation;
-    font-size: 16px; // force same font size acrros all device
-}
-
-html, body, #__next, #__settings_provider, #__themes_provider {
-  // overflow-x: hidden;
-  height: 100%;
-}
-
-// Main wrapper
-// -----------------------------
-.wrapper {
-    position: relative;
-    width: 100%;
-    height: auto;
-    min-height: 100%;
-    overflow-x: hidden;
-    // Contains the main sidebar
-    .aside-container {
-        // visibility: hidden;
-        position: absolute;
-        width: $aside-wd;
-
-        top: 0;
-        left: 0;
-        bottom: 0;
-        z-index: $z-index-main-section + 5; // @include transition(visibility 0s linear .3s);
-        backface-visibility: hidden;
-        background-color: $aside-bg;
-
-        .aside-inner {
-            padding-top: $navbar-hg;
-            height: 100%;
-            width: $aside-wd;
-            overflow: hidden;
-        }
-
-        .nav-floating {
-
-            // position: handled from directive
-            left: inherit;
-            margin-left: $aside-wd;
-            z-index: $z-index-main-section * 10;
-
-            min-width: 190px;
-            overflow: auto;
-        }
-    }
-    // Contains the main content
-    .section-container {
-        position: relative;
-        height: 100%;
-        margin-left: 0; // overflow: hidden;
-        z-index: $z-index-main-section;
-        background-color: $content-bg;
-        margin-bottom: $footer-hg !important; // ensure a space for the footer
-    } // Page Footer
-    .footer-container {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: $footer-hg;
-        border-top: 1px solid $gray-light;
-        padding: $content-padding;
-        z-index: $z-index-main-section - 2;
-        font-size: .875rem;
-        p {
-            margin: 0;
-        }
-    }
-}
-
-.modal-open .wrapper {
-    z-index: 0;
-}
-
-// Page main content
-// -----------------------------
-.content-wrapper {
-    padding: 15px;
-    width: 100%; // styling to visually wrap the component
-    border-top: 1px solid rgba(0, 0, 0, .15);
-    margin-top: -1px;
-
-    .unwrap {
-        margin: -15px; // expand over wrapper padding
-        @include media-breakpoint-up(md) {
-            margin: -20px; // expand over wrapper padding
-        }
-    }
-
-    .content-heading {
-        display: flex;
-        align-items: center;
-        font-size: 1.5rem;
-        line-height: $headings-line-height;
-        color: #929292;
-        margin: -15px;
-        margin-bottom: 20px;
-        padding: 15px;
-        font-weight: normal;
-        background-color: $content-heading-bg;
-        border-bottom: 1px solid $content-heading-border;
-        small {
-            display: block;
-            font-size: 12px;
-            color: $text-muted;
-        }
-    }
-
-    .container,
-    .container-fluid {
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    @include media-breakpoint-up(md) {
-        padding: $content-padding; //overflow: auto; // required for portlets
-        .content-heading {
-            margin: -$content-padding;
-            margin-bottom: $content-padding;
-            padding: $content-padding;
-            button,
-            .btn {
-                margin: 0;
-            }
-        }
-    }
-}
-
-// Desktop layout
-// -----------------------------
-@include media-breakpoint-up(md) {
-
-    body {
-        min-height: 100%;
-    }
-
-    .wrapper {
-
-        .aside-container {
-            .aside-inner {
-                // padding-top: $navbar-hg;
-            }
-        }
-
-        .section-container,
-        .footer-container {
-            margin-left: $aside-wd;
-        }
-
-        .section-container {
-            // with just a margin we can make the
-            // right sidebar always visible
-            &.has-sidebar-right {
-                margin-right: $aside-wd + 20;
-                +.offsidebar {
-                    z-index: 1;
-                }
-            }
-        }
-    }
-}
-
-// Aside toggled layout
-// On mobile acts like offcanvas
-// -----------------------------
-@include media-breakpoint-down(sm) {
-
-    // csstransforms3d
-    .wrapper {
-        backface-visibility: hidden;
-        .section-container,
-        .footer-container {
-            margin-left: 0;
-            transform: translate3d(0, 0, 0);
-            transition: transform .3s ease;
-        }
-        .aside-container {
-            margin-left: 0;
-            transform: translate3d(-$aside-wd, 0, 0);
-            transition: transform .3s ease;
-        }
-    }
-
-    .aside-toggled {
-        .wrapper {
-            .section-container,
-            .footer-container {
-                transform: translate3d($aside-wd, 0, 0);
-            }
-            .aside-container {
-                transform: translate3d(0, 0, 0);
-            }
-        }
-    }
-
-}
-
-// Toggle and collapsed behavior overrides
-@include media-breakpoint-down(sm) {
-
-    // csstransforms3d
-    .aside-collapsed .wrapper {
-        backface-visibility: hidden;
-        .section-container,
-        .footer-container {
-            margin-left: 0;
-            transform: translate3d(0, 0, 0);
-            transition: transform .3s ease;
-        }
-        .aside-container {
-            margin-left: 0;
-            transform: translate3d(-$aside-wd-collapsed, 0, 0);
-            transition: transform .3s ease;
-        }
-    }
-
-    .aside-collapsed.aside-toggled {
-        .wrapper {
-            .section-container,
-            .footer-container {
-                transform: translate3d($aside-wd-collapsed, 0, 0);
-            }
-            .aside-container {
-                transform: translate3d(0, 0, 0);
-            }
-        }
-    }
-
-}
-
-// Aside collapsed layout
-// -------------------------------
-// Aside status toggled via JS
-.aside-collapsed {
-    overflow-y: auto;
-    .wrapper {
-        .aside-container {
-            &,
-            .aside-inner {
-                width: $aside-wd-collapsed;
-            }
-            .nav-floating {
-                margin-left: $aside-wd-collapsed;
-            }
-        }
-    }
-}
-
-// Margin only exists above tablet
-@include media-breakpoint-up(md) {
-    // Aside status toggled via JS
-    .aside-collapsed {
-        .wrapper {
-            .section-container,
-            .footer-container {
-                margin-left: $aside-wd-collapsed;
-            }
-        }
-    }
-}
-
-// ------------------------------
-// Collapsed variation with text
-// ------------------------------
-@include media-breakpoint-down(sm) {
-
-    // csstransforms3d
-    .aside-collapsed-text .wrapper {
-        backface-visibility: hidden;
-        .section-container,
-        .footer-container {
-            margin-left: 0;
-            transform: translate3d(0, 0, 0);
-            transition: transform .3s ease;
-        }
-        .aside-container {
-            margin-left: 0;
-            transform: translate3d(-$aside-wd-collapsed-text, 0, 0);
-            transition: transform .3s ease;
-        }
-    }
-
-    .aside-collapsed-text.aside-toggled {
-        .wrapper {
-            .section-container,
-            .footer-container {
-                transform: translate3d($aside-wd-collapsed-text, 0, 0);
-            }
-            .aside-container {
-                transform: translate3d(0, 0, 0);
-            }
-        }
-    }
-
-}
-
-// Aside collapsed layout
-// -------------------------------
-// Aside status toggled via JS
-.aside-collapsed-text {
-    overflow-y: auto;
-    .wrapper {
-        .aside-container {
-            &,
-            .aside-inner {
-                width: $aside-wd-collapsed-text;
-            }
-            .nav-floating {
-                margin-left: $aside-wd-collapsed-text;
-            }
-        }
-    }
-}
-
-// Margin only exists above tablet
-@include media-breakpoint-up(md) {
-    // Aside status toggled via JS
-    .aside-collapsed-text {
-        .wrapper {
-            .section-container,
-            .footer-container {
-                margin-left: $aside-wd-collapsed-text;
-            }
-        }
-    }
-}
-
-// end collapsed variation with text
-// mixin to remove transformations
-@mixin disable-transform() {
-    -webkit-transform: none;
-    -moz-transform: none;
-    -opera-transform: none;
-    -ms-transform: none;
-    transform: none;
-}
-
-// Fixed layout
-// -----------------------------
-.layout-fixed {
-
-    @media (max-width: $boxed-max-width) {
-        &.aside-toggled,
-        &.offsidebar-open {
-            overflow-y: hidden;
-        }
-    }
-
-    .wrapper {
-        .topnavbar-wrapper {
-            position: fixed;
-            top: 0;
-            width: 100%;
-            z-index: $z-index-main-section + 10;
-        }
-        .aside-container,
-        .offsidebar {
-            position: fixed;
-        }
-        /* only applied to sidebar */
-        .aside-container {
-            /* safari fix */
-            height: 1px;
-            min-height: 100%;
-            /* ios blanks space fix */
-            .aside-inner {
-                position: fixed;
-                top: 0;
-                bottom: 0;
-            }
-        }
-        .section-container {
-            margin-top: $navbar-hg;
-        }
-    }
-}
-
-
-/* IE10+ hack: safari fix breaks ie so we need to target ie only to restore */
-
-_:-ms-lang(x),
-.layout-fixed .wrapper .aside-container .aside-inner {
-    position: static !important;
-}
-
-// Boxed layout (only for desktops)
-// -----------------------------
-.layout-boxed {
-
-    @include media-breakpoint-up(lg) {
-        overflow: auto !important;
-        .wrapper {
-            margin: 0 auto;
-            overflow: hidden;
-            box-shadow: 0 0 13px rgba(0, 0, 0, .25);
-
-            .offsidebar {
-                position: absolute !important;
-            }
-
-            .aside-container {
-                left: inherit;
-            }
-            &,
-            & .topnavbar-wrapper {
-                width: 970px;
-            }
-        }
-
-        &.layout-fixed {
-            .wrapper .aside-container .aside-inner {
-                left: inherit;
-            }
-        }
-    } // max size for large devices
-    @include media-breakpoint-up(xl) {
-        .wrapper {
-            &,
-            & .topnavbar-wrapper {
-                width: $boxed-max-width;
-            }
-        }
-    }
-} // boxed
-
-// Sidebar backdrop
-.sidebar-backdrop {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: $aside-wd;
-    z-index: $z-index-main-section + 1;
-    .aside-collapsed & {
-        left: $aside-wd-collapsed;
-    }
-    .aside-collapsed-text & {
-        left: $aside-wd-collapsed-text
-    }
+/* ========================================================================
+     Component: layout
+ ========================================================================== */
+
+//
+// Main layout
+// This file controls the presentation of all components
+//  .wrapper
+//     .section-container
+//       .content-wrapper
+//     .aside-container
+//
+// If modified or removed make sure to check the variable
+// shared with other components
+// -------------------------------------------------------------
+$aside-wd:                                220px;
+$aside-wd-collapsed:                      70px;
+$aside-wd-collapsed-text:                 90px;
+$aside-bg:                                #fff;
+
+$content-bg:                              $body-bg;
+$content-heading-bg:                      #fafbfc;
+$content-heading-border:                  #cfdbe2;
+$content-padding:                         20px;
+
+$footer-hg:                               60px;
+
+$navbar-hg:                               $navbar-height;
+
+$boxed-max-width:                         1140px;
+$z-index-main-section:                    111;
+
+html {
+    /* $replace rtl */
+    direction: ltr;
+    height: 100%; // http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    font-size: 16px; // force same font size acrros all device
+}
+
+html, body, #__next, #__settings_provider, #__themes_provider {
+  // overflow-x: hidden;
+  height: 100%;
+}
+
+// Main wrapper
+// -----------------------------
+.wrapper {
+    position: relative;
+    width: 100%;
+    height: auto;
+    min-height: 100%;
+    overflow-x: hidden;
+    // Contains the main sidebar
+    .aside-container {
+        // visibility: hidden;
+        position: absolute;
+        width: $aside-wd;
+
+        top: 0;
+        left: 0;
+        bottom: 0;
+        z-index: $z-index-main-section + 5; // @include transition(visibility 0s linear .3s);
+        backface-visibility: hidden;
+        background-color: $aside-bg;
+
+        .aside-inner {
+            padding-top: $navbar-hg;
+            height: 100%;
+            width: $aside-wd;
+            overflow: hidden;
+        }
+
+        .nav-floating {
+
+            // position: handled from directive
+            left: inherit;
+            margin-left: $aside-wd;
+            z-index: $z-index-main-section * 10;
+
+            min-width: 190px;
+            overflow: auto;
+        }
+    }
+    // Contains the main content
+    .section-container {
+        position: relative;
+        height: 100%;
+        margin-left: 0; // overflow: hidden;
+        z-index: $z-index-main-section;
+        background-color: $content-bg;
+        margin-bottom: $footer-hg !important; // ensure a space for the footer
+    } // Page Footer
+    .footer-container {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: $footer-hg;
+        border-top: 1px solid $gray-light;
+        padding: $content-padding;
+        z-index: $z-index-main-section - 2;
+        font-size: .875rem;
+        p {
+            margin: 0;
+        }
+    }
+}
+
+.modal-open .wrapper {
+    z-index: 0;
+}
+
+// Page main content
+// -----------------------------
+.content-wrapper {
+    padding: 15px;
+    width: 100%; // styling to visually wrap the component
+    border-top: 1px solid rgba(0, 0, 0, .15);
+    margin-top: -1px;
+
+    .unwrap {
+        margin: -15px; // expand over wrapper padding
+        @include media-breakpoint-up(md) {
+            margin: -20px; // expand over wrapper padding
+        }
+    }
+
+    .content-heading {
+        display: flex;
+        align-items: center;
+        font-size: 1.5rem;
+        line-height: $headings-line-height;
+        color: #929292;
+        margin: -15px;
+        margin-bottom: 20px;
+        padding: 15px;
+        font-weight: normal;
+        background-color: $content-heading-bg;
+        border-bottom: 1px solid $content-heading-border;
+        small {
+            display: block;
+            font-size: 12px;
+            color: $text-muted;
+        }
+    }
+
+    .container,
+    .container-fluid {
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    @include media-breakpoint-up(md) {
+        padding: $content-padding; //overflow: auto; // required for portlets
+        .content-heading {
+            margin: -$content-padding;
+            margin-bottom: $content-padding;
+            padding: $content-padding;
+            button,
+            .btn {
+                margin: 0;
+            }
+        }
+    }
+}
+
+// Desktop layout
+// -----------------------------
+@include media-breakpoint-up(md) {
+
+    body {
+        min-height: 100%;
+    }
+
+    .wrapper {
+
+        .aside-container {
+            .aside-inner {
+                // padding-top: $navbar-hg;
+            }
+        }
+
+        .section-container,
+        .footer-container {
+            margin-left: $aside-wd;
+        }
+
+        .section-container {
+            // with just a margin we can make the
+            // right sidebar always visible
+            &.has-sidebar-right {
+                margin-right: $aside-wd + 20;
+                +.offsidebar {
+                    z-index: 1;
+                }
+            }
+        }
+    }
+}
+
+// Aside toggled layout
+// On mobile acts like offcanvas
+// -----------------------------
+@include media-breakpoint-down(sm) {
+
+    // csstransforms3d
+    .wrapper {
+        backface-visibility: hidden;
+        .section-container,
+        .footer-container {
+            margin-left: 0;
+            transform: translate3d(0, 0, 0);
+            transition: transform .3s ease;
+        }
+        .aside-container {
+            margin-left: 0;
+            transform: translate3d(-$aside-wd, 0, 0);
+            transition: transform .3s ease;
+        }
+    }
+
+    .aside-toggled {
+        .wrapper {
+            .section-container,
+            .footer-container {
+                transform: translate3d($aside-wd, 0, 0);
+            }
+            .aside-container {
+                transform: translate3d(0, 0, 0);
+            }
+        }
+    }
+
+}
+
+// Toggle and collapsed behavior overrides
+@include media-breakpoint-down(sm) {
+
+    // csstransforms3d
+    .aside-collapsed .wrapper {
+        backface-visibility: hidden;
+        .section-container,
+        .footer-container {
+            margin-left: 0;
+            transform: translate3d(0, 0, 0);
+            transition: transform .3s ease;
+        }
+        .aside-container {
+            margin-left: 0;
+            transform: translate3d(-$aside-wd-collapsed, 0, 0);
+            transition: transform .3s ease;
+        }
+    }
+
+    .aside-collapsed.aside-toggled {
+        .wrapper {
+            .section-container,
+            .footer-container {
+                transform: translate3d($aside-wd-collapsed, 0, 0);
+            }
+            .aside-container {
+                transform: translate3d(0, 0, 0);
+            }
+        }
+    }
+
+}
+
+// Aside collapsed layout
+// -------------------------------
+// Aside status toggled via JS
+.aside-collapsed {
+    overflow-y: auto;
+    .wrapper {
+        .aside-container {
+            &,
+            .aside-inner {
+                width: $aside-wd-collapsed;
+            }
+            .nav-floating {
+                margin-left: $aside-wd-collapsed;
+            }
+        }
+    }
+}
+
+// Margin only exists above tablet
+@include media-breakpoint-up(md) {
+    // Aside status toggled via JS
+    .aside-collapsed {
+        .wrapper {
+            .section-container,
+            .footer-container {
+                margin-left: $aside-wd-collapsed;
+            }
+        }
+    }
+}
+
+// ------------------------------
+// Collapsed variation with text
+// ------------------------------
+@include media-breakpoint-down(sm) {
+
+    // csstransforms3d
+    .aside-collapsed-text .wrapper {
+        backface-visibility: hidden;
+        .section-container,
+        .footer-container {
+            margin-left: 0;
+            transform: translate3d(0, 0, 0);
+            transition: transform .3s ease;
+        }
+        .aside-container {
+            margin-left: 0;
+            transform: translate3d(-$aside-wd-collapsed-text, 0, 0);
+            transition: transform .3s ease;
+        }
+    }
+
+    .aside-collapsed-text.aside-toggled {
+        .wrapper {
+            .section-container,
+            .footer-container {
+                transform: translate3d($aside-wd-collapsed-text, 0, 0);
+            }
+            .aside-container {
+                transform: translate3d(0, 0, 0);
+            }
+        }
+    }
+
+}
+
+// Aside collapsed layout
+// -------------------------------
+// Aside status toggled via JS
+.aside-collapsed-text {
+    overflow-y: auto;
+    .wrapper {
+        .aside-container {
+            &,
+            .aside-inner {
+                width: $aside-wd-collapsed-text;
+            }
+            .nav-floating {
+                margin-left: $aside-wd-collapsed-text;
+            }
+        }
+    }
+}
+
+// Margin only exists above tablet
+@include media-breakpoint-up(md) {
+    // Aside status toggled via JS
+    .aside-collapsed-text {
+        .wrapper {
+            .section-container,
+            .footer-container {
+                margin-left: $aside-wd-collapsed-text;
+            }
+        }
+    }
+}
+
+// end collapsed variation with text
+// mixin to remove transformations
+@mixin disable-transform() {
+    -webkit-transform: none;
+    -moz-transform: none;
+    -opera-transform: none;
+    -ms-transform: none;
+    transform: none;
+}
+
+// Fixed layout
+// -----------------------------
+.layout-fixed {
+
+    @media (max-width: $boxed-max-width) {
+        &.aside-toggled,
+        &.offsidebar-open {
+            overflow-y: hidden;
+        }
+    }
+
+    .wrapper {
+        .topnavbar-wrapper {
+            position: fixed;
+            top: 0px;
+            width: 100%;
+            z-index: $z-index-main-section + 10;
+        }
+        .aside-container,
+        .offsidebar {
+            position: fixed;
+        }
+        /* only applied to sidebar */
+        .aside-container {
+            /* safari fix */
+            height: 1px;
+            min-height: 100%;
+            /* ios blanks space fix */
+            .aside-inner {
+                position: fixed;
+                top: 0;
+                bottom: 0;
+            }
+        }
+        .section-container {
+            margin-top: $navbar-hg;
+        }
+    }
+}
+
+
+/* IE10+ hack: safari fix breaks ie so we need to target ie only to restore */
+
+_:-ms-lang(x),
+.layout-fixed .wrapper .aside-container .aside-inner {
+    position: static !important;
+}
+
+// Boxed layout (only for desktops)
+// -----------------------------
+.layout-boxed {
+
+    @include media-breakpoint-up(lg) {
+        overflow: auto !important;
+        .wrapper {
+            margin: 0 auto;
+            overflow: hidden;
+            box-shadow: 0 0 13px rgba(0, 0, 0, .25);
+
+            .offsidebar {
+                position: absolute !important;
+            }
+
+            .aside-container {
+                left: inherit;
+            }
+            &,
+            & .topnavbar-wrapper {
+                width: 970px;
+            }
+        }
+
+        &.layout-fixed {
+            .wrapper .aside-container .aside-inner {
+                left: inherit;
+            }
+        }
+    } // max size for large devices
+    @include media-breakpoint-up(xl) {
+        .wrapper {
+            &,
+            & .topnavbar-wrapper {
+                width: $boxed-max-width;
+            }
+        }
+    }
+} // boxed
+
+// Sidebar backdrop
+.sidebar-backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: $aside-wd;
+    z-index: $z-index-main-section + 1;
+    .aside-collapsed & {
+        left: $aside-wd-collapsed;
+    }
+    .aside-collapsed-text & {
+        left: $aside-wd-collapsed-text
+    }
 }

styles/app/layout/offsidebar.scss

@@ -1,86 +1,86 @@
-/* ========================================================================
-     Component: offsidebar
- ========================================================================== */
-
-//
-// A sidebar in offcanvas mode
-// Open status toggled via JS
-// -----------------------------------------
-
-$offsidebar-bg:           #fff;
-$offsidebar-border-color: grayscale(darken($offsidebar-bg, 20%));
-$offsidebar-color:        $body-color;
-$offsidebar-wd:           $aside-wd + 15px;      // match the width with the main aside component
-
-.offsidebar {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    width: $offsidebar-wd;
-    margin-top: $navbar-height;
-    border-left: 1px solid $offsidebar-border-color;
-    background-color: $offsidebar-bg;
-    color: $offsidebar-color;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-    z-index: -1;
-
-    >.list-group {
-        min-height: 100%;
-        overflow: hidden;
-        -webkit-transform: translateZ(0px);
-    }
-
-    .progress {
-        border: 0;
-    }
-
-    .tab-content {
-        padding: 0;
-        border: 0;
-    } // change style of tab component inside offsidebar
-    .nav-tabs {
-        border-bottom: 1px solid rgba(0, 0, 0, .05);
-        >.nav-item>.nav-link {
-            background-color: transparent;
-            border: 0;
-            border-right: 1px solid rgba(0, 0, 0, .05);
-            border-radius: 0;
-            color: $text-muted;
-            &.active {
-                color: $primary;
-            }
-        }
-    }
-
-
-    @include media-breakpoint-up(md) {
-        margin-top: $navbar-height;
-    }
-}
-
-// Global open status (attach to body)
-.offsidebar-open {
-    .offsidebar {
-        overflow-y: auto;
-        z-index: $z-index-main-section + 5;
-    }
-    @include media-breakpoint-up(md) {
-        overflow-y: auto;
-    }
-}
-
-/* Transformation ready devices*/
-
-.offsidebar {
-    right: 0;
-    transform: translate3d( ($offsidebar-wd), 0, 0);
-    transition: transform .3s ease, z-index 0s linear .3s;
-}
-.offsidebar-open {
-    .offsidebar {
-        transform: translate3d(0, 0, 0);
-        transition: transform .3s ease;
-    }
-}
+/* ========================================================================
+     Component: offsidebar
+ ========================================================================== */
+
+//
+// A sidebar in offcanvas mode
+// Open status toggled via JS
+// -----------------------------------------
+
+$offsidebar-bg:           #fff;
+$offsidebar-border-color: grayscale(darken($offsidebar-bg, 20%));
+$offsidebar-color:        $body-color;
+$offsidebar-wd:           $aside-wd + 15px;      // match the width with the main aside component
+
+.offsidebar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: $offsidebar-wd;
+    margin-top: $navbar-height;
+    border-left: 1px solid $offsidebar-border-color;
+    background-color: $offsidebar-bg;
+    color: $offsidebar-color;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    z-index: -1;
+
+    >.list-group {
+        min-height: 100%;
+        overflow: hidden;
+        -webkit-transform: translateZ(0px);
+    }
+
+    .progress {
+        border: 0;
+    }
+
+    .tab-content {
+        padding: 0;
+        border: 0;
+    } // change style of tab component inside offsidebar
+    .nav-tabs {
+        border-bottom: 1px solid rgba(0, 0, 0, .05);
+        >.nav-item>.nav-link {
+            background-color: transparent;
+            border: 0;
+            border-right: 1px solid rgba(0, 0, 0, .05);
+            border-radius: 0;
+            color: $text-muted;
+            &.active {
+                color: $primary;
+            }
+        }
+    }
+
+
+    @include media-breakpoint-up(md) {
+        margin-top: $navbar-height;
+    }
+}
+
+// Global open status (attach to body)
+.offsidebar-open {
+    .offsidebar {
+        overflow-y: auto;
+        z-index: $z-index-main-section + 5;
+    }
+    @include media-breakpoint-up(md) {
+        overflow-y: auto;
+    }
+}
+
+/* Transformation ready devices*/
+
+.offsidebar {
+    right: 0;
+    transform: translate3d( ($offsidebar-wd), 0, 0);
+    transition: transform .3s ease, z-index 0s linear .3s;
+}
+.offsidebar-open {
+    .offsidebar {
+        transform: translate3d(0, 0, 0);
+        transition: transform .3s ease;
+    }
+}

styles/app/layout/settings.scss

@@ -1,68 +1,68 @@
-// Used for theme swticher
-.setting-color {
-    padding: 0 5px;
-
-    >label {
-        display: block;
-        position: relative;
-        margin: 0 10px;
-        border-radius: 3px;
-        overflow: hidden;
-        border: 1px solid rgba(0, 0, 0, .1);
-        cursor: pointer;
-
-        &:first-child {
-            margin-left: 0
-        }
-        &:last-child {
-            margin-right: 0
-        }
-
-        $baseHg: 15px;
-        >.color {
-            display: block;
-            height: $baseHg * 1.2;
-        }
-
-        >.split {
-            @include clearfix();
-            display: block;
-            >.color {
-                display: block;
-                height: $baseHg * 2.5;
-                &:first-child {
-                    float: left;
-                    width: 70%;
-                }
-                &:last-child {
-                    float: right;
-                    width: 30%;
-                }
-            }
-        } // icon checked
-        >.icon-check {
-            position: absolute;
-            display: block;
-            left: 50%;
-            top: 50%;
-            width: 20px;
-            height: 20px;
-            margin-top: -20px;
-            margin-left: -10px;
-            text-align: center;
-            font-size: 1.33333333em;
-            vertical-align: -15%;
-            color: #fff;
-            opacity: 0;
-        }
-
-        >input[type="radio"] {
-            position: absolute;
-            opacity: 0;
-            visibility: hidden;
-            &:checked+.icon-check {
-                opacity: 1 !important;
-            }
-        }
-    }
-}
+// Used for theme swticher
+.setting-color {
+    padding: 0 5px;
+
+    >label {
+        display: block;
+        position: relative;
+        margin: 0 10px;
+        border-radius: 3px;
+        overflow: hidden;
+        border: 1px solid rgba(0, 0, 0, .1);
+        cursor: pointer;
+
+        &:first-child {
+            margin-left: 0
+        }
+        &:last-child {
+            margin-right: 0
+        }
+
+        $baseHg: 15px;
+        >.color {
+            display: block;
+            height: $baseHg * 1.2;
+        }
+
+        >.split {
+            @include clearfix();
+            display: block;
+            >.color {
+                display: block;
+                height: $baseHg * 2.5;
+                &:first-child {
+                    float: left;
+                    width: 70%;
+                }
+                &:last-child {
+                    float: right;
+                    width: 30%;
+                }
+            }
+        } // icon checked
+        >.icon-check {
+            position: absolute;
+            display: block;
+            left: 50%;
+            top: 50%;
+            width: 20px;
+            height: 20px;
+            margin-top: -20px;
+            margin-left: -10px;
+            text-align: center;
+            font-size: 1.33333333em;
+            vertical-align: -15%;
+            color: #fff;
+            opacity: 0;
+        }
+
+        >input[type="radio"] {
+            position: absolute;
+            opacity: 0;
+            visibility: hidden;
+            &:checked+.icon-check {
+                opacity: 1 !important;
+            }
+        }
+    }
+}

styles/app/layout/sidebar.scss

@@ -1,280 +1,281 @@
-/* ========================================================================
-     Component: sidebar
- ========================================================================== */
-
-$sidebar-bg:                      $aside-bg;
-
-$sidebar-item-color:              #515253;
-$sidebar-item-color-active:       $nav-top-bg;
-$sidebar-item-bg-active:          darken($sidebar-bg, 1%);
-
-$sidebar-icon-color:              inherits;
-$sidebar-icon-color-active:       $nav-top-bg;
-
-$sidebar-bullet-color:            rgba(0,0,0,.25);
-$sidebar-bullet-color-active:     $sidebar-icon-color-active;
-
-$sidebar-heading-color:           #919DA8;
-$sidebar-label-color:             $sidebar-item-color;
-
-$submenu-header-hg:               40px;   // Submenu header when hover collapse sidebar
-$sidebar-item-border-wd:          3px;
-$scrollbar-wd:                    17px;
-
-.sidebar {
-    height: 100%;
-    padding-bottom: 20px;
-    background-color: $sidebar-bg;
-    overflow-x: hidden;
-    -webkit-overflow-scrolling: touch; // draw a divider for the sidebar
-    &:after {
-        content: "";
-        background: rgba(0, 0, 0, .15);
-        position: absolute;
-        display: block;
-        top: 0;
-        bottom: 0;
-        right: 0;
-        width: 1px;
-        -webkit-transform: translateZ(0px);
-    }
-
-    .nav-heading {
-        padding: 12px 15px;
-        color: $sidebar-heading-color;
-        font-size: 13px;
-        letter-spacing: .035em;
-        pointer-events: none;
-        cursor: default;
-    }
-}
-
-// Items
-// First main level
-.sidebar-nav {
-    position: relative;
-    font-size: 14px;
-    margin-bottom: 0;
-    padding-left: 0;
-    list-style: none; // Only the first item in sidebar
-    >.nav-heading:first-child {
-        padding-top: 20px;
-    }
-
-    >li {
-        display: block;
-        border-left: $sidebar-item-border-wd solid transparent;
-        @include transition(border-left-color 0.4s ease);
-
-        >a,
-        >.nav-item {
-            position: relative;
-            display: block;
-            padding: 12px 24px;
-            color: $sidebar-item-color;
-            letter-spacing: .025em;
-            font-weight: normal;
-            cursor: pointer;
-
-            &:focus,
-            &:hover {
-                text-decoration: none;
-                outline: none;
-                color: $sidebar-item-color-active;
-            } // Item icon
-            >em {
-                width: 1.8em;
-                display: inline-block;
-                font-style: normal;
-                line-height: 1;
-                -webkit-font-smoothing: antialiased;
-                color: $sidebar-icon-color;
-            }
-        } // Active item state
-        &.active,
-        &.open {
-            &,
-            >a,
-            >.nav-item,
-            .sidebar-nav {
-                background-color: $sidebar-item-bg-active;
-                color: $sidebar-item-color-active;
-            }
-            >.nav-item>em,
-            >a>em {
-                color: $sidebar-icon-color-active;
-            }
-        }
-
-        &.active {
-            border-left-color: $sidebar-item-color-active;
-        }
-    }
-    .badge {
-        display: block;
-    }
-}
-
-// Hides the scrollbar only on desktops
-$tablet-landscape: 1025px;
-@media only screen and (min-width: $tablet-landscape) {
-    .sidebar:not(.show-scrollbar) {
-        margin-right: -$scrollbar-wd;
-        overflow-y: scroll;
-    }
-}
-
-// Sub Levels
-.sidebar-subnav {
-    background-color: $sidebar-bg;
-
-    >.sidebar-subnav-header {
-        color: $sidebar-item-color;
-        display: none;
-        padding: 10px 20px;
-        font-weight: bold;
-    }
-
-    >li {
-        border-left: 0 !important;
-        >a,
-        >.nav-item {
-            display: block;
-            position: relative;
-            padding: 10px 20px;
-            padding-left: 53px;
-            font-weight: normal;
-            background-color: transparent !important;
-            color: $sidebar-item-color;
-            &:focus,
-            &:hover {
-                color: $sidebar-item-color-active;
-            } // submenu icons
-            >em {
-                display: inline-block;
-                width: 1.8em;
-                margin: 0 0 0 -2em;
-            }
-        }
-
-        &.active {
-            >a,
-            >.nav-item {
-                color: $sidebar-icon-color-active;
-                &:after {
-                    border-color: $sidebar-bullet-color-active;
-                    background-color: $sidebar-bullet-color-active;
-                }
-            }
-        } // Nested levels
-        .sidebar-nav>li {
-            padding-left: 5px;
-        }
-    } // li
-    // This only happend when sidebar is collapsed and the submenu
-    // visibility is toggled via js
-    &.nav-floating {
-        border: 1px solid rgba(0, 0, 0, 0.15);
-        margin-left: -1px; // we resuse the collapse element so we need to override
-        &,
-        .collapse, .sidebar-subnav {
-            height: auto !important;
-            display: block !important;
-            visibility: visible !important;
-            &.opening {
-                animation: none !important;
-            }
-        }
-        >.sidebar-subnav-header {
-            display: block;
-        } // reduce padding when item is on sidebar collapsed
-        li>a,
-        li>.nav-item {
-            padding-left: 20px; // submenu icons
-            em {
-                margin-left: 0;
-            }
-        }
-    }
-}
-
-// Desktop styles
-// ---------------------------------
-@include media-breakpoint-up(md) {
-
-    .sidebar>.sidebar-nav {
-
-        .badge {
-            margin: 2px 0 0 0;
-        }
-    }
-} // @media @desktop
-// Collapsed state styles
-.aside-collapsed,
-.aside-collapsed-text {
-
-    .sidebar {
-        overflow-x: hidden; // Applies to first level items
-        >.sidebar-nav {
-
-            .sidebar-nav,
-            >.nav-heading,
-            >li>.nav-item>span,
-            >li>a>span {
-                display: none !important;
-            }
-
-            >li {
-                width: $aside-wd-collapsed - 1;
-                >a,
-                >.nav-item {
-                    text-indent: -$sidebar-item-border-wd;
-                    padding: 20px 0;
-                    text-align: center;
-                    >em {
-                        font-size: 1.6em; // increase icons size
-                        width: auto;
-                    }
-                    &:focus {
-                        // accessibility
-                        background-color: transparent;
-                        >em {
-                            color: inherit;
-                        }
-                    }
-                }
-            }
-        } // labels in menu items
-        .sidebar-nav {
-            .badge {
-                position: absolute;
-                top: 10px;
-                right: 5px;
-                text-indent: 0;
-            }
-        }
-    } // .sidebar
-} // .aside-collapsed/text
-.aside-collapsed-text {
-
-    .sidebar {
-        >.sidebar-nav {
-
-            >li>.nav-item>span,
-            >li>a>span {
-                display: block !important;
-                font-size: 12px;
-            }
-
-            >li {
-                width: $aside-wd-collapsed-text - 2;
-                >a {
-                    padding: 14px 0;
-                    >em {
-                        font-size: 1.4em;
-                    }
-                }
-            }
-        }
-    }
-}
+/* ========================================================================
+     Component: sidebar
+ ========================================================================== */
+
+$sidebar-bg:                      $aside-bg;
+
+$sidebar-item-color:              #515253;
+$sidebar-item-color-active:       $nav-top-bg;
+$sidebar-item-bg-active:          darken($sidebar-bg, 1%);
+
+$sidebar-icon-color:              inherits;
+$sidebar-icon-color-active:       $nav-top-bg;
+
+$sidebar-bullet-color:            rgba(0,0,0,.25);
+$sidebar-bullet-color-active:     $sidebar-icon-color-active;
+
+$sidebar-heading-color:           #6FB9DE;
+// $sidebar-heading-color:           #6FB9DE;
+$sidebar-label-color:             $sidebar-item-color;
+
+$submenu-header-hg:               40px;   // Submenu header when hover collapse sidebar
+$sidebar-item-border-wd:          3px;
+$scrollbar-wd:                    17px;
+
+.sidebar {
+    height: 100%;
+    padding-bottom: 20px;
+    background-color: $sidebar-bg;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch; // draw a divider for the sidebar
+    &:after {
+        content: "";
+        background: rgba(0, 0, 0, .15);
+        position: absolute;
+        display: block;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        width: 1px;
+        -webkit-transform: translateZ(0px);
+    }
+
+    .nav-heading {
+        padding: 12px 15px;
+        color: $sidebar-heading-color;
+        font-size: 13px;
+        letter-spacing: .035em;
+        pointer-events: none;
+        cursor: default;
+    }
+}
+
+// Items
+// First main level
+.sidebar-nav {
+    position: relative;
+    font-size: 14px;
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style: none; // Only the first item in sidebar
+    >.nav-heading:first-child {
+        padding-top: 20px;
+    }
+
+    >li {
+        display: block;
+        border-left: $sidebar-item-border-wd solid transparent;
+        @include transition(border-left-color 0.4s ease);
+
+        >a,
+        >.nav-item {
+            position: relative;
+            display: block;
+            padding: 12px 24px;
+            color: $sidebar-item-color;
+            letter-spacing: .025em;
+            font-weight: normal;
+            cursor: pointer;
+
+            &:focus,
+            &:hover {
+                text-decoration: none;
+                outline: none;
+                color: $sidebar-item-color-active;
+            } // Item icon
+            >em {
+                width: 1.8em;
+                display: inline-block;
+                font-style: normal;
+                line-height: 1;
+                -webkit-font-smoothing: antialiased;
+                color: $sidebar-icon-color;
+            }
+        } // Active item state
+        &.active,
+        &.open {
+            &,
+            >a,
+            >.nav-item,
+            .sidebar-nav {
+                background-color: $sidebar-item-bg-active;
+                color: $sidebar-item-color-active;
+            }
+            >.nav-item>em,
+            >a>em {
+                color: $sidebar-icon-color-active;
+            }
+        }
+
+        &.active {
+            border-left-color: $sidebar-item-color-active;
+        }
+    }
+    .badge {
+        display: block;
+    }
+}
+
+// Hides the scrollbar only on desktops
+$tablet-landscape: 1025px;
+@media only screen and (min-width: $tablet-landscape) {
+    .sidebar:not(.show-scrollbar) {
+        margin-right: -$scrollbar-wd;
+        overflow-y: scroll;
+    }
+}
+
+// Sub Levels
+.sidebar-subnav {
+    background-color: $sidebar-bg;
+
+    >.sidebar-subnav-header {
+        color: $sidebar-item-color;
+        display: none;
+        padding: 10px 20px;
+        font-weight: bold;
+    }
+
+    >li {
+        border-left: 0 !important;
+        >a,
+        >.nav-item {
+            display: block;
+            position: relative;
+            padding: 10px 20px;
+            padding-left: 53px;
+            font-weight: normal;
+            background-color: transparent !important;
+            color: $sidebar-item-color;
+            &:focus,
+            &:hover {
+                color: $sidebar-item-color-active;
+            } // submenu icons
+            >em {
+                display: inline-block;
+                width: 1.8em;
+                margin: 0 0 0 -2em;
+            }
+        }
+
+        &.active {
+            >a,
+            >.nav-item {
+                color: $sidebar-icon-color-active;
+                &:after {
+                    border-color: $sidebar-bullet-color-active;
+                    background-color: $sidebar-bullet-color-active;
+                }
+            }
+        } // Nested levels
+        .sidebar-nav>li {
+            padding-left: 5px;
+        }
+    } // li
+    // This only happend when sidebar is collapsed and the submenu
+    // visibility is toggled via js
+    &.nav-floating {
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        margin-left: -1px; // we resuse the collapse element so we need to override
+        &,
+        .collapse, .sidebar-subnav {
+            height: auto !important;
+            display: block !important;
+            visibility: visible !important;
+            &.opening {
+                animation: none !important;
+            }
+        }
+        >.sidebar-subnav-header {
+            display: block;
+        } // reduce padding when item is on sidebar collapsed
+        li>a,
+        li>.nav-item {
+            padding-left: 20px; // submenu icons
+            em {
+                margin-left: 0;
+            }
+        }
+    }
+}
+
+// Desktop styles
+// ---------------------------------
+@include media-breakpoint-up(md) {
+
+    .sidebar>.sidebar-nav {
+
+        .badge {
+            margin: 2px 0 0 0;
+        }
+    }
+} // @media @desktop
+// Collapsed state styles
+.aside-collapsed,
+.aside-collapsed-text {
+
+    .sidebar {
+        overflow-x: hidden; // Applies to first level items
+        >.sidebar-nav {
+
+            .sidebar-nav,
+            >.nav-heading,
+            >li>.nav-item>span,
+            >li>a>span {
+                display: none !important;
+            }
+
+            >li {
+                width: $aside-wd-collapsed - 1;
+                >a,
+                >.nav-item {
+                    text-indent: -$sidebar-item-border-wd;
+                    padding: 20px 0;
+                    text-align: center;
+                    >em {
+                        font-size: 1.6em; // increase icons size
+                        width: auto;
+                    }
+                    &:focus {
+                        // accessibility
+                        background-color: transparent;
+                        >em {
+                            color: inherit;
+                        }
+                    }
+                }
+            }
+        } // labels in menu items
+        .sidebar-nav {
+            .badge {
+                position: absolute;
+                top: 10px;
+                right: 5px;
+                text-indent: 0;
+            }
+        }
+    } // .sidebar
+} // .aside-collapsed/text
+.aside-collapsed-text {
+
+    .sidebar {
+        >.sidebar-nav {
+
+            >li>.nav-item>span,
+            >li>a>span {
+                display: block !important;
+                font-size: 12px;
+            }
+
+            >li {
+                width: $aside-wd-collapsed-text - 2;
+                >a {
+                    padding: 14px 0;
+                    >em {
+                        font-size: 1.4em;
+                    }
+                }
+            }
+        }
+    }
+}

styles/app/layout/top-navbar.scss

@@ -1,329 +1,329 @@
-/* ========================================================================
-     Component: top-navbar
- ========================================================================== */
-
-//
-// Horizontal top navbar
-// based on the bootstrap navbar styles and markup
-// ----------------------------------------------------
-
-$nav-header-wd:                 $aside-wd;
-$nav-header-wd-toggled:         $aside-wd-collapsed;
-
-$nav-header-wd-toggled-text:    $aside-wd-collapsed-text;
-
-$nav-top-bg:                    $info;
-$nav-top-bg-start:              $nav-top-bg;
-$nav-top-bg-end:                $info-light;
-$nav-header-bg:                 transparent;
-
-$nav-top-item-mobile:           $nav-top-bg;
-$nav-top-item-mobile-active:    darken($nav-top-item-mobile, 20%);
-
-$nav-top-item-desktop:          #fff;
-$nav-top-item-desktop-active:   $nav-top-item-mobile-active;
-
-
-// Navbar top layout
-.topnavbar {
-    -webkit-backface-visibility: hidden; /* fixes chrome jump */
-    margin-bottom: 0;
-    border-radius: 0;
-    z-index: 1050;
-    border: 0;
-    padding: 0;
-    min-height: $navbar-height;
-    background-color: $nav-top-bg;
-    @include gradient-x($nav-top-bg-start, $nav-top-bg-end); // // dont' allow stacked icons
-
-    @include media-breakpoint-up(md) {
-        .navbar-header {
-            width: $nav-header-wd;
-            text-align: center;
-            .navbar-brand {
-                width: 100%;
-            }
-        }
-    }
-}
-
-// Navbar Mobile General styles
-// ------------------------------
-.topnavbar {
-    position: relative;
-
-    .navbar-header {
-        background-color: $nav-header-bg;
-    }
-
-    .navbar-header {
-        position: relative;
-        z-index: 11;
-        padding-left: 2rem;
-
-        @include media-breakpoint-up(md) {
-            padding-left: 0;
-        } // Reset default to allow handle via different logo size
-        .navbar-brand {
-            padding: 0;
-        } // Different Logo size depends on the navbar state
-        .brand-logo,
-        .brand-logo-collapsed {
-            >img {
-                margin: 0 auto;
-            }
-        }
-        .brand-logo {
-            display: block;
-            padding: 10px 15px;
-        }
-        .brand-logo-collapsed {
-            display: none;
-            padding: 6px 15px;
-        }
-    }
-
-    .dropdown {
-        position: static; // allow header to be parent of dropdown
-        .dropdown-menu {
-            position: absolute;
-            margin-top: 0; // close to header
-            top: auto;
-            left: 0;
-            right: 0;
-        }
-    } // Top navbar dropdown on desktop
-    @include media-breakpoint-up(sm) {
-        .dropdown {
-            position: relative;
-            .dropdown-menu {
-                // standard left alignment
-                top: $navbar-height - 1;
-                left: 0;
-                right: auto;
-            } // redefined since we don't used navbar-expand-* class
-            .dropdown-menu-right {
-                right: 0;
-                left: auto;
-            }
-        }
-    }
-    .navbar-nav>.nav-item>.navbar-text {
-        color: $nav-top-item-desktop;
-    }
-
-    .navbar-nav>.nav-item>.nav-link {
-        padding: 1.1rem .95rem;
-        font-size: .85rem;
-    }
-    .navbar-nav>.nav-item>.nav-link,
-    .navbar-nav>.nav-item.show>.nav-link {
-        color: $nav-top-item-desktop;
-        &:hover,
-        &:focus {
-            color: $nav-top-item-desktop-active;
-        }
-    } // Navbar link active style
-    .navbar-nav>.nav-item.active>.nav-link,
-    .navbar-nav>.nav-item.show>.nav-link {
-        &,
-        &:hover,
-        &:focus {
-            display: inline-block;
-            box-shadow: 0 -3px 0 rgba(0,0,0,.125) inset;
-            background-color: transparent;
-            @include transition(all .2s);
-        }
-    } // the button to toggle search
-    .navbar-nav>li>[data-toggle='navbar-search'] {
-        position: absolute;
-        top: 0;
-        right: 0;
-        z-index: 20;
-        font-size: 16px;
-        line-height: $navbar-height;
-        color: #fff;
-        padding-top: 0;
-        padding-bottom: 0;
-        @include transition(color .3s ease);
-        @include media-breakpoint-up(md) {
-            color: $nav-top-item-desktop;
-        }
-    }
-
-    @include media-breakpoint-down(sm) {
-        .navbar-text {
-            margin: 10px;
-        }
-    }
-}
-
-
-// Customize header for horizontal layout
-.layout-h {
-    .topnavbar {
-        // flex-flow: wrap;
-        .navbar-header {
-            display: flex;
-            width: 100%;
-            padding: 0;
-            text-align: left;
-            @include media-breakpoint-up(lg) {
-                width: auto;
-            }
-            .navbar-brand {
-                min-height: $navbar-height;
-            }
-        }
-        .navbar-toggler {
-            border: 0;
-            margin-left: auto;
-            .navbar-toggler-icon {
-                $button-toggler-icon-color: rgba(255, 255, 255, 0.75);
-                background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='#{$button-toggler-icon-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
-            }
-        }
-        // make menu full size
-        .dropdown-menu {
-            @include media-breakpoint-down(md) {
-                left: 0 !important;
-                right: 0 !important;
-            }
-        }
-        .navbar-form {
-            left: 0;
-        }
-    }
-}
-
-@include media-breakpoint-down(sm) {
-    .sidebar-toggle {
-        position: absolute !important;
-        top: 2px;
-        left: 0;
-        z-index: 3001; // Add color only for the icon
-        >em {
-            color: white;
-        }
-    }
-}
-
-
-// Navbar Search Form
-// ------------------------------
-.topnavbar {
-
-    .navbar-form {
-        position: absolute;
-        top: -100%;
-        left: 0;
-        right: 0;
-        margin: 0;
-        padding: 0;
-        height: $navbar-height;
-        z-index: 9001;
-        transition: all .3s;
-        border: 0;
-        border-bottom: 1px solid #e1e2e3;
-
-        .form-group {
-            height: 100%;
-            width: 100%;
-        }
-
-        .form-control {
-            height: 100%;
-            border: 0;
-            border-radius: 0;
-            width: 100%;
-        }
-        &.open {
-            top: 0;
-        } // re locate and center feedback
-        .navbar-form-close {
-            position: absolute;
-            height: 30px;
-            cursor: pointer;
-            top: 50%;
-            right: 0;
-            margin-top: -15px;
-            line-height: 30px;
-            margin-right: 10px;
-            color: #c1c2c3;
-            font-size: 1.5em;
-            pointer-events: auto; // make icon clickable
-        }
-    }
-
-    @include media-breakpoint-up(sm) {
-        .navbar-form {
-            left: $nav-header-wd;
-        }
-    }
-}
-
-// Navbar Desktop styles
-// ------------------------------
-@include media-breakpoint-up(lg) {
-
-    // Navbar top styles
-    .topnavbar {
-
-        .navbar-nav>.nav-item.show>.nav-link {
-            &,
-            &:hover,
-            &:focus {
-                box-shadow: 0 -3px 0 darken($nav-top-bg, 6%) inset;
-                @include transition(all .2s);
-            }
-        }
-
-    } // .topnavbar
-}
-
-@include media-breakpoint-up(md) {
-    .aside-collapsed {
-        .topnavbar {
-            .navbar-header {
-                .brand-logo {
-                    display: none;
-                }
-                .brand-logo-collapsed {
-                    display: block;
-                }
-            }
-
-            .navbar-header {
-                width: $nav-header-wd-toggled;
-            }
-
-            .navbar-form {
-                left: $nav-header-wd-toggled;
-            }
-        }
-    }
-}
-
-// Header on aside collapsed with Text
-@include media-breakpoint-up(md) {
-    .aside-collapsed-text {
-        .topnavbar {
-            .navbar-header {
-                .brand-logo {
-                    display: none;
-                }
-                .brand-logo-collapsed {
-                    display: block;
-                }
-            }
-
-            .navbar-header {
-                width: $nav-header-wd-toggled-text;
-            }
-
-            .navbar-form {
-                left: $nav-header-wd-toggled-text;
-            }
-        }
-    }
-}
+/* ========================================================================
+     Component: top-navbar
+ ========================================================================== */
+
+//
+// Horizontal top navbar
+// based on the bootstrap navbar styles and markup
+// ----------------------------------------------------
+
+$nav-header-wd:                 $aside-wd;
+$nav-header-wd-toggled:         $aside-wd-collapsed;
+
+$nav-header-wd-toggled-text:    $aside-wd-collapsed-text;
+
+$nav-top-bg:                    #6FB9DE;
+$nav-top-bg-start:              $nav-top-bg;
+$nav-top-bg-end:                $info-light;
+$nav-header-bg:                 transparent;
+
+$nav-top-item-mobile:           $nav-top-bg;
+$nav-top-item-mobile-active:    darken($nav-top-item-mobile, 20%);
+
+$nav-top-item-desktop:          #fff;
+$nav-top-item-desktop-active:   $nav-top-item-mobile-active;
+
+
+// Navbar top layout
+.topnavbar {
+    -webkit-backface-visibility: hidden; /* fixes chrome jump */
+    margin-bottom: 0;
+    border-radius: 0;
+    z-index: 1050;
+    border: 0;
+    padding: 0;
+    min-height: $navbar-height;
+    background-color: $nav-top-bg;
+    @include gradient-x($nav-top-bg-start, $nav-top-bg-end); // // dont' allow stacked icons
+
+    @include media-breakpoint-up(md) {
+        .navbar-header {
+            width: $nav-header-wd;
+            text-align: center;
+            .navbar-brand {
+                width: 100%;
+            }
+        }
+    }
+}
+
+// Navbar Mobile General styles
+// ------------------------------
+.topnavbar {
+    position: relative;
+
+    .navbar-header {
+        background-color: $nav-header-bg;
+    }
+
+    .navbar-header {
+        position: relative;
+        z-index: 11;
+        padding-left: 2rem;
+
+        @include media-breakpoint-up(md) {
+            padding-left: 0;
+        } // Reset default to allow handle via different logo size
+        .navbar-brand {
+            padding: 0;
+        } // Different Logo size depends on the navbar state
+        .brand-logo,
+        .brand-logo-collapsed {
+            >img {
+                margin: 0 auto;
+            }
+        }
+        .brand-logo {
+            display: block;
+            padding: 10px 15px;
+        }
+        .brand-logo-collapsed {
+            display: none;
+            padding: 6px 15px;
+        }
+    }
+
+    .dropdown {
+        position: static; // allow header to be parent of dropdown
+        .dropdown-menu {
+            position: absolute;
+            margin-top: 0; // close to header
+            top: auto;
+            left: 0;
+            right: 0;
+        }
+    } // Top navbar dropdown on desktop
+    @include media-breakpoint-up(sm) {
+        .dropdown {
+            position: relative;
+            .dropdown-menu {
+                // standard left alignment
+                top: $navbar-height - 1;
+                left: 0;
+                right: auto;
+            } // redefined since we don't used navbar-expand-* class
+            .dropdown-menu-right {
+                right: 0;
+                left: auto;
+            }
+        }
+    }
+    .navbar-nav>.nav-item>.navbar-text {
+        color: $nav-top-item-desktop;
+    }
+
+    .navbar-nav>.nav-item>.nav-link {
+        padding: 1.1rem .95rem;
+        font-size: .85rem;
+    }
+    .navbar-nav>.nav-item>.nav-link,
+    .navbar-nav>.nav-item.show>.nav-link {
+        color: $nav-top-item-desktop;
+        &:hover,
+        &:focus {
+            color: $nav-top-item-desktop-active;
+        }
+    } // Navbar link active style
+    .navbar-nav>.nav-item.active>.nav-link,
+    .navbar-nav>.nav-item.show>.nav-link {
+        &,
+        &:hover,
+        &:focus {
+            display: inline-block;
+            box-shadow: 0 -3px 0 rgba(0,0,0,.125) inset;
+            background-color: transparent;
+            @include transition(all .2s);
+        }
+    } // the button to toggle search
+    .navbar-nav>li>[data-toggle='navbar-search'] {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 20;
+        font-size: 16px;
+        line-height: $navbar-height;
+        color: #fff;
+        padding-top: 0;
+        padding-bottom: 0;
+        @include transition(color .3s ease);
+        @include media-breakpoint-up(md) {
+            color: $nav-top-item-desktop;
+        }
+    }
+
+    @include media-breakpoint-down(sm) {
+        .navbar-text {
+            margin: 10px;
+        }
+    }
+}
+
+
+// Customize header for horizontal layout
+.layout-h {
+    .topnavbar {
+        // flex-flow: wrap;
+        .navbar-header {
+            display: flex;
+            width: 100%;
+            padding: 0;
+            text-align: left;
+            @include media-breakpoint-up(lg) {
+                width: auto;
+            }
+            .navbar-brand {
+                min-height: $navbar-height;
+            }
+        }
+        .navbar-toggler {
+            border: 0;
+            margin-left: auto;
+            .navbar-toggler-icon {
+                $button-toggler-icon-color: rgba(255, 255, 255, 0.75);
+                background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='#{$button-toggler-icon-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
+            }
+        }
+        // make menu full size
+        .dropdown-menu {
+            @include media-breakpoint-down(md) {
+                left: 0 !important;
+                right: 0 !important;
+            }
+        }
+        .navbar-form {
+            left: 0;
+        }
+    }
+}
+
+@include media-breakpoint-down(sm) {
+    .sidebar-toggle {
+        position: absolute !important;
+        top: 2px;
+        left: 0;
+        z-index: 3001; // Add color only for the icon
+        >em {
+            color: white;
+        }
+    }
+}
+
+
+// Navbar Search Form
+// ------------------------------
+.topnavbar {
+
+    .navbar-form {
+        position: absolute;
+        top: -100%;
+        left: 0;
+        right: 0;
+        margin: 0;
+        padding: 0;
+        height: $navbar-height;
+        z-index: 9001;
+        transition: all .3s;
+        border: 0;
+        border-bottom: 1px solid #e1e2e3;
+
+        .form-group {
+            height: 100%;
+            width: 100%;
+        }
+
+        .form-control {
+            height: 100%;
+            border: 0;
+            border-radius: 0;
+            width: 100%;
+        }
+        &.open {
+            top: 0;
+        } // re locate and center feedback
+        .navbar-form-close {
+            position: absolute;
+            height: 30px;
+            cursor: pointer;
+            top: 50%;
+            right: 0;
+            margin-top: -15px;
+            line-height: 30px;
+            margin-right: 10px;
+            color: #c1c2c3;
+            font-size: 1.5em;
+            pointer-events: auto; // make icon clickable
+        }
+    }
+
+    @include media-breakpoint-up(sm) {
+        .navbar-form {
+            left: $nav-header-wd;
+        }
+    }
+}
+
+// Navbar Desktop styles
+// ------------------------------
+@include media-breakpoint-up(lg) {
+
+    // Navbar top styles
+    .topnavbar {
+
+        .navbar-nav>.nav-item.show>.nav-link {
+            &,
+            &:hover,
+            &:focus {
+                box-shadow: 0 -3px 0 darken($nav-top-bg, 6%) inset;
+                @include transition(all .2s);
+            }
+        }
+
+    } // .topnavbar
+}
+
+@include media-breakpoint-up(md) {
+    .aside-collapsed {
+        .topnavbar {
+            .navbar-header {
+                .brand-logo {
+                    display: none;
+                }
+                .brand-logo-collapsed {
+                    display: block;
+                }
+            }
+
+            .navbar-header {
+                width: $nav-header-wd-toggled;
+            }
+
+            .navbar-form {
+                left: $nav-header-wd-toggled;
+            }
+        }
+    }
+}
+
+// Header on aside collapsed with Text
+@include media-breakpoint-up(md) {
+    .aside-collapsed-text {
+        .topnavbar {
+            .navbar-header {
+                .brand-logo {
+                    display: none;
+                }
+                .brand-logo-collapsed {
+                    display: block;
+                }
+            }
+
+            .navbar-header {
+                width: $nav-header-wd-toggled-text;
+            }
+
+            .navbar-form {
+                left: $nav-header-wd-toggled-text;
+            }
+        }
+    }
+}

styles/app/layout/user-block.scss

@@ -1,89 +1,89 @@
-/* ========================================================================
-     Component: user-block
- ========================================================================== */
-
-// for use as navbar item
-.has-user-block {
-    display: block;
-    overflow: hidden;
-    border: 0 !important;
-    // width: 100% !important;
-}
-
-.user-block {
-    position: relative;
-    padding: 25px 0 10px;
-    cursor: pointer;
-    @include clearfix();
-
-    > .user-block-picture {
-        position: relative;
-        width: 60px;
-        margin: 0 auto;
-
-        > img {
-            max-width: 100%;
-            height: auto;
-        }
-
-    }
-
-    .user-block-info {
-        padding-top: 15px;
-        text-align: center;
-        white-space: nowrap;
-
-        .user-block-name, .user-block-role {
-            display: block;
-        }
-
-        .user-block-name {
-            color: #7D848F;
-        }
-
-        .user-block-role {
-            font-size: 12px;
-            color: #aaa;
-        }
-
-    }
-
-}
-
-.user-block-status {
-    position: relative;
-
-    > .circle {
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        border: 2px solid #fff;
-    }
-
-}
-
-// Adapt to collapsed mode
-.aside-collapsed, .aside-collapsed-text {
-    .user-block {
-        padding: 15px 0 14px;
-        margin: 0;
-        text-align: center;
-
-        > .user-block-picture {
-            float: none;
-            margin: 0  auto;
-            width: 50px;
-
-            > .user-block-status {
-                display: block;
-            }
-
-        }
-
-        .user-block-info {
-            display: none;
-        }
-
-    }
-
-}
+/* ========================================================================
+     Component: user-block
+ ========================================================================== */
+
+// for use as navbar item
+.has-user-block {
+    display: block;
+    overflow: hidden;
+    border: 0 !important;
+    // width: 100% !important;
+}
+
+.user-block {
+    position: relative;
+    padding: 25px 0 10px;
+    cursor: pointer;
+    @include clearfix();
+
+    > .user-block-picture {
+        position: relative;
+        width: 60px;
+        margin: 0 auto;
+
+        > img {
+            max-width: 100%;
+            height: auto;
+        }
+
+    }
+
+    .user-block-info {
+        padding-top: 15px;
+        text-align: center;
+        white-space: nowrap;
+
+        .user-block-name, .user-block-role {
+            display: block;
+        }
+
+        .user-block-name {
+            color: #7D848F;
+        }
+
+        .user-block-role {
+            font-size: 12px;
+            color: #aaa;
+        }
+
+    }
+
+}
+
+.user-block-status {
+    position: relative;
+
+    > .circle {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        border: 2px solid #fff;
+    }
+
+}
+
+// Adapt to collapsed mode
+.aside-collapsed, .aside-collapsed-text {
+    .user-block {
+        padding: 15px 0 14px;
+        margin: 0;
+        text-align: center;
+
+        > .user-block-picture {
+            float: none;
+            margin: 0  auto;
+            width: 50px;
+
+            > .user-block-status {
+                display: block;
+            }
+
+        }
+
+        .user-block-info {
+            display: none;
+        }
+
+    }
+
+}

styles/bootstrap.scss

@@ -1,8 +1,8 @@
-//
-// This file compiles to a custom bootstrap stylesheet for Angle
-//
-
-// Override bootstrap variables
-@import "app/common/variables";
-// Bootstrap
+//
+// This file compiles to a custom bootstrap stylesheet for Angle
+//
+
+// Override bootstrap variables
+@import "app/common/variables";
+// Bootstrap
 @import "bootstrap/bootstrap";

styles/bootstrap/_alert.scss

@@ -1,52 +1,52 @@
-//
-// Base styles
-//
-
-.alert {
-  position: relative;
-  padding: $alert-padding-y $alert-padding-x;
-  margin-bottom: $alert-margin-bottom;
-  border: $alert-border-width solid transparent;
-  @include border-radius($alert-border-radius);
-}
-
-// Headings for larger alerts
-.alert-heading {
-  // Specified to prevent conflicts of changing $headings-color
-  color: inherit;
-}
-
-// Provide class for links that match alerts
-.alert-link {
-  font-weight: $alert-link-font-weight;
-}
-
-
-// Dismissible alerts
-//
-// Expand the right padding and account for the close button's positioning.
-
-.alert-dismissible {
-  padding-right: $close-font-size + $alert-padding-x * 2;
-
-  // Adjust close link position
-  .close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 2;
-    padding: $alert-padding-y $alert-padding-x;
-    color: inherit;
-  }
-}
-
-
-// Alternate styles
-//
-// Generate contextual modifier classes for colorizing the alert.
-
-@each $color, $value in $theme-colors {
-  .alert-#{$color} {
-    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
-  }
-}
+//
+// Base styles
+//
+
+.alert {
+  position: relative;
+  padding: $alert-padding-y $alert-padding-x;
+  margin-bottom: $alert-margin-bottom;
+  border: $alert-border-width solid transparent;
+  @include border-radius($alert-border-radius);
+}
+
+// Headings for larger alerts
+.alert-heading {
+  // Specified to prevent conflicts of changing $headings-color
+  color: inherit;
+}
+
+// Provide class for links that match alerts
+.alert-link {
+  font-weight: $alert-link-font-weight;
+}
+
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissible {
+  padding-right: $close-font-size + $alert-padding-x * 2;
+
+  // Adjust close link position
+  .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    padding: $alert-padding-y $alert-padding-x;
+    color: inherit;
+  }
+}
+
+
+// Alternate styles
+//
+// Generate contextual modifier classes for colorizing the alert.
+
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
+  }
+}

styles/bootstrap/_badge.scss

@@ -1,54 +1,54 @@
-// Base class
-//
-// Requires one of the contextual, color modifier classes for `color` and
-// `background-color`.
-
-.badge {
-  display: inline-block;
-  padding: $badge-padding-y $badge-padding-x;
-  @include font-size($badge-font-size);
-  font-weight: $badge-font-weight;
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  @include border-radius($badge-border-radius);
-  @include transition($badge-transition);
-
-  @at-root a#{&} {
-    @include hover-focus() {
-      text-decoration: none;
-    }
-  }
-
-  // Empty badges collapse automatically
-  &:empty {
-    display: none;
-  }
-}
-
-// Quick fix for badges in buttons
-.btn .badge {
-  position: relative;
-  top: -1px;
-}
-
-// Pill badges
-//
-// Make them extra rounded with a modifier to replace v3's badges.
-
-.badge-pill {
-  padding-right: $badge-pill-padding-x;
-  padding-left: $badge-pill-padding-x;
-  @include border-radius($badge-pill-border-radius);
-}
-
-// Colors
-//
-// Contextual variations (linked badges get darker on :hover).
-
-@each $color, $value in $theme-colors {
-  .badge-#{$color} {
-    @include badge-variant($value);
-  }
-}
+// Base class
+//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
+
+.badge {
+  display: inline-block;
+  padding: $badge-padding-y $badge-padding-x;
+  @include font-size($badge-font-size);
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  @include border-radius($badge-border-radius);
+  @include transition($badge-transition);
+
+  @at-root a#{&} {
+    @include hover-focus() {
+      text-decoration: none;
+    }
+  }
+
+  // Empty badges collapse automatically
+  &:empty {
+    display: none;
+  }
+}
+
+// Quick fix for badges in buttons
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+// Pill badges
+//
+// Make them extra rounded with a modifier to replace v3's badges.
+
+.badge-pill {
+  padding-right: $badge-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
+  @include border-radius($badge-pill-border-radius);
+}
+
+// Colors
+//
+// Contextual variations (linked badges get darker on :hover).
+
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}

styles/bootstrap/_breadcrumb.scss

@@ -1,42 +1,42 @@
-.breadcrumb {
-  display: flex;
-  flex-wrap: wrap;
-  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
-  margin-bottom: $breadcrumb-margin-bottom;
-  @include font-size($breadcrumb-font-size);
-  list-style: none;
-  background-color: $breadcrumb-bg;
-  @include border-radius($breadcrumb-border-radius);
-}
-
-.breadcrumb-item {
-  // The separator between breadcrumbs (by default, a forward-slash: "/")
-  + .breadcrumb-item {
-    padding-left: $breadcrumb-item-padding;
-
-    &::before {
-      float: left; // Suppress inline spacings and underlining of the separator
-      padding-right: $breadcrumb-item-padding;
-      color: $breadcrumb-divider-color;
-      content: escape-svg($breadcrumb-divider);
-    }
-  }
-
-  // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
-  // without `<ul>`s. The `::before` pseudo-element generates an element
-  // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
-  //
-  // To trick IE into suppressing the underline, we give the pseudo-element an
-  // underline and then immediately remove it.
-  + .breadcrumb-item:hover::before {
-    text-decoration: underline;
-  }
-  // stylelint-disable-next-line no-duplicate-selectors
-  + .breadcrumb-item:hover::before {
-    text-decoration: none;
-  }
-
-  &.active {
-    color: $breadcrumb-active-color;
-  }
-}
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
+  margin-bottom: $breadcrumb-margin-bottom;
+  @include font-size($breadcrumb-font-size);
+  list-style: none;
+  background-color: $breadcrumb-bg;
+  @include border-radius($breadcrumb-border-radius);
+}
+
+.breadcrumb-item {
+  // The separator between breadcrumbs (by default, a forward-slash: "/")
+  + .breadcrumb-item {
+    padding-left: $breadcrumb-item-padding;
+
+    &::before {
+      float: left; // Suppress inline spacings and underlining of the separator
+      padding-right: $breadcrumb-item-padding;
+      color: $breadcrumb-divider-color;
+      content: escape-svg($breadcrumb-divider);
+    }
+  }
+
+  // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
+  // without `<ul>`s. The `::before` pseudo-element generates an element
+  // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
+  //
+  // To trick IE into suppressing the underline, we give the pseudo-element an
+  // underline and then immediately remove it.
+  + .breadcrumb-item:hover::before {
+    text-decoration: underline;
+  }
+  // stylelint-disable-next-line no-duplicate-selectors
+  + .breadcrumb-item:hover::before {
+    text-decoration: none;
+  }
+
+  &.active {
+    color: $breadcrumb-active-color;
+  }
+}

styles/bootstrap/_button-group.scss

@@ -1,163 +1,163 @@
-// stylelint-disable selector-no-qualifying-type
-
-// Make the div behave like a button
-.btn-group,
-.btn-group-vertical {
-  position: relative;
-  display: inline-flex;
-  vertical-align: middle; // match .btn alignment given font-size hack above
-
-  > .btn {
-    position: relative;
-    flex: 1 1 auto;
-
-    // Bring the hover, focused, and "active" buttons to the front to overlay
-    // the borders properly
-    @include hover() {
-      z-index: 1;
-    }
-    &:focus,
-    &:active,
-    &.active {
-      z-index: 1;
-    }
-  }
-}
-
-// Optional: Group multiple button groups together for a toolbar
-.btn-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-
-  .input-group {
-    width: auto;
-  }
-}
-
-.btn-group {
-  // Prevent double borders when buttons are next to each other
-  > .btn:not(:first-child),
-  > .btn-group:not(:first-child) {
-    margin-left: -$btn-border-width;
-  }
-
-  // Reset rounded corners
-  > .btn:not(:last-child):not(.dropdown-toggle),
-  > .btn-group:not(:last-child) > .btn {
-    @include border-right-radius(0);
-  }
-
-  > .btn:not(:first-child),
-  > .btn-group:not(:first-child) > .btn {
-    @include border-left-radius(0);
-  }
-}
-
-// Sizing
-//
-// Remix the default button sizing classes into new ones for easier manipulation.
-
-.btn-group-sm > .btn { @extend .btn-sm; }
-.btn-group-lg > .btn { @extend .btn-lg; }
-
-
-//
-// Split button dropdowns
-//
-
-.dropdown-toggle-split {
-  padding-right: $btn-padding-x * .75;
-  padding-left: $btn-padding-x * .75;
-
-  &::after,
-  .dropup &::after,
-  .dropright &::after {
-    margin-left: 0;
-  }
-
-  .dropleft &::before {
-    margin-right: 0;
-  }
-}
-
-.btn-sm + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-sm * .75;
-  padding-left: $btn-padding-x-sm * .75;
-}
-
-.btn-lg + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-lg * .75;
-  padding-left: $btn-padding-x-lg * .75;
-}
-
-
-// The clickable button for toggling the menu
-// Set the same inset shadow as the :active state
-.btn-group.show .dropdown-toggle {
-  @include box-shadow($btn-active-box-shadow);
-
-  // Show no shadow for `.btn-link` since it has no other button styles.
-  &.btn-link {
-    @include box-shadow(none);
-  }
-}
-
-
-//
-// Vertical button groups
-//
-
-.btn-group-vertical {
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-
-  > .btn,
-  > .btn-group {
-    width: 100%;
-  }
-
-  > .btn:not(:first-child),
-  > .btn-group:not(:first-child) {
-    margin-top: -$btn-border-width;
-  }
-
-  // Reset rounded corners
-  > .btn:not(:last-child):not(.dropdown-toggle),
-  > .btn-group:not(:last-child) > .btn {
-    @include border-bottom-radius(0);
-  }
-
-  > .btn:not(:first-child),
-  > .btn-group:not(:first-child) > .btn {
-    @include border-top-radius(0);
-  }
-}
-
-
-// Checkbox and radio options
-//
-// In order to support the browser's form validation feedback, powered by the
-// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
-// `display: none;` or `visibility: hidden;` as that also hides the popover.
-// Simply visually hiding the inputs via `opacity` would leave them clickable in
-// certain cases which is prevented by using `clip` and `pointer-events`.
-// This way, we ensure a DOM element is visible to position the popover from.
-//
-// See https://github.com/twbs/bootstrap/pull/12794 and
-// https://github.com/twbs/bootstrap/pull/14559 for more information.
-
-.btn-group-toggle {
-  > .btn,
-  > .btn-group > .btn {
-    margin-bottom: 0; // Override default `<label>` value
-
-    input[type="radio"],
-    input[type="checkbox"] {
-      position: absolute;
-      clip: rect(0, 0, 0, 0);
-      pointer-events: none;
-    }
-  }
-}
+// stylelint-disable selector-no-qualifying-type
+
+// Make the div behave like a button
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle; // match .btn alignment given font-size hack above
+
+  > .btn {
+    position: relative;
+    flex: 1 1 auto;
+
+    // Bring the hover, focused, and "active" buttons to the front to overlay
+    // the borders properly
+    @include hover() {
+      z-index: 1;
+    }
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 1;
+    }
+  }
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  .input-group {
+    width: auto;
+  }
+}
+
+.btn-group {
+  // Prevent double borders when buttons are next to each other
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
+    margin-left: -$btn-border-width;
+  }
+
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-right-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-left-radius(0);
+  }
+}
+
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.btn-group-sm > .btn { @extend .btn-sm; }
+.btn-group-lg > .btn { @extend .btn-lg; }
+
+
+//
+// Split button dropdowns
+//
+
+.dropdown-toggle-split {
+  padding-right: $btn-padding-x * .75;
+  padding-left: $btn-padding-x * .75;
+
+  &::after,
+  .dropup &::after,
+  .dropright &::after {
+    margin-left: 0;
+  }
+
+  .dropleft &::before {
+    margin-right: 0;
+  }
+}
+
+.btn-sm + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-sm * .75;
+  padding-left: $btn-padding-x-sm * .75;
+}
+
+.btn-lg + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-lg * .75;
+  padding-left: $btn-padding-x-lg * .75;
+}
+
+
+// The clickable button for toggling the menu
+// Set the same inset shadow as the :active state
+.btn-group.show .dropdown-toggle {
+  @include box-shadow($btn-active-box-shadow);
+
+  // Show no shadow for `.btn-link` since it has no other button styles.
+  &.btn-link {
+    @include box-shadow(none);
+  }
+}
+
+
+//
+// Vertical button groups
+//
+
+.btn-group-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+
+  > .btn,
+  > .btn-group {
+    width: 100%;
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
+    margin-top: -$btn-border-width;
+  }
+
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-bottom-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-top-radius(0);
+  }
+}
+
+
+// Checkbox and radio options
+//
+// In order to support the browser's form validation feedback, powered by the
+// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
+// `display: none;` or `visibility: hidden;` as that also hides the popover.
+// Simply visually hiding the inputs via `opacity` would leave them clickable in
+// certain cases which is prevented by using `clip` and `pointer-events`.
+// This way, we ensure a DOM element is visible to position the popover from.
+//
+// See https://github.com/twbs/bootstrap/pull/12794 and
+// https://github.com/twbs/bootstrap/pull/14559 for more information.
+
+.btn-group-toggle {
+  > .btn,
+  > .btn-group > .btn {
+    margin-bottom: 0; // Override default `<label>` value
+
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: absolute;
+      clip: rect(0, 0, 0, 0);
+      pointer-events: none;
+    }
+  }
+}

styles/bootstrap/_buttons.scss

@@ -1,142 +1,204 @@
-// stylelint-disable selector-no-qualifying-type
-
-//
-// Base styles
-//
-
-.btn {
-  display: inline-block;
-  font-family: $btn-font-family;
-  font-weight: $btn-font-weight;
-  color: $body-color;
-  text-align: center;
-  text-decoration: if($link-decoration == none, null, none);
-  white-space: $btn-white-space;
-  vertical-align: middle;
-  user-select: none;
-  background-color: transparent;
-  border: $btn-border-width solid transparent;
-  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
-  @include transition($btn-transition);
-
-  @include hover() {
-    color: $body-color;
-    text-decoration: none;
-  }
-
-  &:focus,
-  &.focus {
-    outline: 0;
-    box-shadow: $btn-focus-box-shadow;
-  }
-
-  // Disabled comes first so active can properly restyle
-  &.disabled,
-  &:disabled {
-    opacity: $btn-disabled-opacity;
-    @include box-shadow(none);
-  }
-
-  &:not(:disabled):not(.disabled) {
-    cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
-
-    &:active,
-    &.active {
-      @include box-shadow($btn-active-box-shadow);
-
-      &:focus {
-        @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
-      }
-    }
-  }
-}
-
-// Future-proof disabling of clicks on `<a>` elements
-a.btn.disabled,
-fieldset:disabled a.btn {
-  pointer-events: none;
-}
-
-
-//
-// Alternate buttons
-//
-
-@each $color, $value in $theme-colors {
-  .btn-#{$color} {
-    @include button-variant($value, $value);
-  }
-}
-
-@each $color, $value in $theme-colors {
-  .btn-outline-#{$color} {
-    @include button-outline-variant($value);
-  }
-}
-
-
-//
-// Link buttons
-//
-
-// Make a button look and behave like a link
-.btn-link {
-  font-weight: $font-weight-normal;
-  color: $link-color;
-  text-decoration: $link-decoration;
-
-  @include hover() {
-    color: $link-hover-color;
-    text-decoration: $link-hover-decoration;
-  }
-
-  &:focus,
-  &.focus {
-    text-decoration: $link-hover-decoration;
-  }
-
-  &:disabled,
-  &.disabled {
-    color: $btn-link-disabled-color;
-    pointer-events: none;
-  }
-
-  // No need for an active state here
-}
-
-
-//
-// Button Sizes
-//
-
-.btn-lg {
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
-}
-
-.btn-sm {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
-}
-
-
-//
-// Block button
-//
-
-.btn-block {
-  display: block;
-  width: 100%;
-
-  // Vertically space out multiple block buttons
-  + .btn-block {
-    margin-top: $btn-block-spacing-y;
-  }
-}
-
-// Specificity overrides
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-  &.btn-block {
-    width: 100%;
-  }
-}
+// stylelint-disable selector-no-qualifying-type
+
+//
+// Base styles
+//
+
+.btn {
+  display: inline-block;
+  font-family: $btn-font-family;
+  font-weight: $btn-font-weight;
+  color: $body-color;
+  text-align: center;
+  text-decoration: if($link-decoration == none, null, none);
+  white-space: $btn-white-space;
+  vertical-align: middle;
+  user-select: none;
+  background-color: transparent;
+  border: $btn-border-width solid transparent;
+  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
+  @include transition($btn-transition);
+
+  @include hover() {
+    color: $body-color;
+    text-decoration: none;
+  }
+
+  &:focus,
+  &.focus {
+    outline: 0;
+    box-shadow: $btn-focus-box-shadow;
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    opacity: $btn-disabled-opacity;
+    @include box-shadow(none);
+  }
+
+  &:not(:disabled):not(.disabled) {
+    cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
+
+    &:active,
+    &.active {
+      @include box-shadow($btn-active-box-shadow);
+
+      &:focus {
+        @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+      }
+    }
+  }
+}
+
+// Future-proof disabling of clicks on `<a>` elements
+a.btn.disabled,
+fieldset:disabled a.btn {
+  pointer-events: none;
+}
+
+
+//
+// Alternate buttons
+//
+
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @include button-variant($value, $value);
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
+}
+
+
+//
+// Link buttons
+//
+
+// Make a button look and behave like a link
+.btn-link {
+  font-weight: $font-weight-normal;
+  color: $link-color;
+  text-decoration: $link-decoration;
+
+  @include hover() {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
+
+  &:focus,
+  &.focus {
+    text-decoration: $link-hover-decoration;
+  }
+
+  &:disabled,
+  &.disabled {
+    color: $btn-link-disabled-color;
+    pointer-events: none;
+  }
+
+  // No need for an active state here
+}
+
+
+//
+// Button Sizes
+//
+
+.btn-lg {
+  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+}
+
+.btn-sm {
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+}
+
+
+//
+// Block button
+//
+
+.btn-block {
+  display: block;
+  width: 100%;
+
+  // Vertically space out multiple block buttons
+  + .btn-block {
+    margin-top: $btn-block-spacing-y;
+  }
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  &.btn-block {
+    width: 100%;
+  }
+}
+
+.button-kirimlaporan{
+  // background: rgba(0, 0, 0, 0.05);
+  display: inline-block;
+background-color: #6FB9DE;
+width: 175px;
+height: 40px;
+
+}
+.text-kirimlaporan{
+  font-weight: 500;
+  font-size: 20px;
+  letter-spacing: 0.02em;
+  text-align: center;
+  padding-bottom: 5px;
+}
+.button-lihatpemantauan{
+  position: relative;
+  margin-left: auto;
+  // background: rgba(0, 0, 0, 0.05);
+  display: inline-block;
+  background-color: #6FB9DE;
+  width: 200px;
+  height: 40px;
+}
+.text-lihatpemantauan{
+  font-weight: 500;
+  font-size: 20px;
+  letter-spacing: 0.02em;
+  text-align: center;
+  padding-bottom: 5px
+}
+.btn-labeled {
+    padding-top: 0;
+    padding-bottom: 0;
+    font-size: 20px;
+    margin-top: 3%;
+    background: #6FB9DE;
+
+}
+.btn-labeled-2{
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-left: 20px;
+    margin-top: 3%;
+    background: #6FB9DE;
+}
+.btn-login{
+  background: #6FB9DE;
+}
+.navbar-color{
+  background-color: #6FB9DE;
+}
+.posisi-btn-1{
+  position: relative;
+  margin-left: auto;
+  padding-right: 20px;
+}
+.tengah{
+text-align: center;
+padding: 30px;
+}

styles/bootstrap/_card.scss

@@ -1,286 +1,313 @@
-//
-// Base styles
-//
-
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
-  height: $card-height;
-  word-wrap: break-word;
-  background-color: $card-bg;
-  background-clip: border-box;
-  border: $card-border-width solid $card-border-color;
-  @include border-radius($card-border-radius);
-
-  > hr {
-    margin-right: 0;
-    margin-left: 0;
-  }
-
-  > .list-group {
-    border-top: inherit;
-    border-bottom: inherit;
-
-    &:first-child {
-      border-top-width: 0;
-      @include border-top-radius($card-inner-border-radius);
-    }
-
-    &:last-child  {
-      border-bottom-width: 0;
-      @include border-bottom-radius($card-inner-border-radius);
-    }
-  }
-
-  // Due to specificity of the above selector (`.card > .list-group`), we must
-  // use a child selector here to prevent double borders.
-  > .card-header + .list-group,
-  > .list-group + .card-footer {
-    border-top: 0;
-  }
-}
-
-.card-body {
-  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
-  // as much space as possible, ensuring footers are aligned to the bottom.
-  flex: 1 1 auto;
-  // Workaround for the image size bug in IE
-  // See: https://github.com/twbs/bootstrap/pull/28855
-  min-height: 1px;
-  padding: $card-spacer-x;
-  color: $card-color;
-}
-
-.card-title {
-  margin-bottom: $card-spacer-y;
-}
-
-.card-subtitle {
-  margin-top: -$card-spacer-y / 2;
-  margin-bottom: 0;
-}
-
-.card-text:last-child {
-  margin-bottom: 0;
-}
-
-.card-link {
-  @include hover() {
-    text-decoration: none;
-  }
-
-  + .card-link {
-    margin-left: $card-spacer-x;
-  }
-}
-
-//
-// Optional textual caps
-//
-
-.card-header {
-  padding: $card-spacer-y $card-spacer-x;
-  margin-bottom: 0; // Removes the default margin-bottom of <hN>
-  color: $card-cap-color;
-  background-color: $card-cap-bg;
-  border-bottom: $card-border-width solid $card-border-color;
-
-  &:first-child {
-    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
-  }
-}
-
-.card-footer {
-  padding: $card-spacer-y $card-spacer-x;
-  color: $card-cap-color;
-  background-color: $card-cap-bg;
-  border-top: $card-border-width solid $card-border-color;
-
-  &:last-child {
-    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
-  }
-}
-
-
-//
-// Header navs
-//
-
-.card-header-tabs {
-  margin-right: -$card-spacer-x / 2;
-  margin-bottom: -$card-spacer-y;
-  margin-left: -$card-spacer-x / 2;
-  border-bottom: 0;
-}
-
-.card-header-pills {
-  margin-right: -$card-spacer-x / 2;
-  margin-left: -$card-spacer-x / 2;
-}
-
-// Card image
-.card-img-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: $card-img-overlay-padding;
-  @include border-radius($card-inner-border-radius);
-}
-
-.card-img,
-.card-img-top,
-.card-img-bottom {
-  flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
-  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
-}
-
-.card-img,
-.card-img-top {
-  @include border-top-radius($card-inner-border-radius);
-}
-
-.card-img,
-.card-img-bottom {
-  @include border-bottom-radius($card-inner-border-radius);
-}
-
-
-// Card deck
-
-.card-deck {
-  .card {
-    margin-bottom: $card-deck-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
-    margin-right: -$card-deck-margin;
-    margin-left: -$card-deck-margin;
-
-    .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
-      margin-right: $card-deck-margin;
-      margin-bottom: 0; // Override the default
-      margin-left: $card-deck-margin;
-    }
-  }
-}
-
-
-//
-// Card groups
-//
-
-.card-group {
-  // The child selector allows nested `.card` within `.card-group`
-  // to display properly.
-  > .card {
-    margin-bottom: $card-group-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
-    // The child selector allows nested `.card` within `.card-group`
-    // to display properly.
-    > .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
-      margin-bottom: 0;
-
-      + .card {
-        margin-left: 0;
-        border-left: 0;
-      }
-
-      // Handle rounded corners
-      @if $enable-rounded {
-        &:not(:last-child) {
-          @include border-right-radius(0);
-
-          .card-img-top,
-          .card-header {
-            // stylelint-disable-next-line property-disallowed-list
-            border-top-right-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            // stylelint-disable-next-line property-disallowed-list
-            border-bottom-right-radius: 0;
-          }
-        }
-
-        &:not(:first-child) {
-          @include border-left-radius(0);
-
-          .card-img-top,
-          .card-header {
-            // stylelint-disable-next-line property-disallowed-list
-            border-top-left-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            // stylelint-disable-next-line property-disallowed-list
-            border-bottom-left-radius: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-
-//
-// Columns
-//
-
-.card-columns {
-  .card {
-    margin-bottom: $card-columns-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    column-count: $card-columns-count;
-    column-gap: $card-columns-gap;
-    orphans: 1;
-    widows: 1;
-
-    .card {
-      display: inline-block; // Don't let them vertically span multiple columns
-      width: 100%; // Don't let their width change
-    }
-  }
-}
-
-
-//
-// Accordion
-//
-
-.accordion {
-  overflow-anchor: none;
-
-  > .card {
-    overflow: hidden;
-
-    &:not(:last-of-type) {
-      border-bottom: 0;
-      @include border-bottom-radius(0);
-    }
-
-    &:not(:first-of-type) {
-      @include border-top-radius(0);
-    }
-
-    > .card-header {
-      @include border-radius(0);
-      margin-bottom: -$card-border-width;
-    }
-  }
-}
+//
+// Base styles
+//
+
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+  height: $card-height;
+  word-wrap: break-word;
+  background-color: $card-bg;
+  background-clip: border-box;
+  border: $card-border-width solid $card-border-color;
+  @include border-radius($card-border-radius);
+
+  > hr {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  > .list-group {
+    border-top: inherit;
+    border-bottom: inherit;
+
+    &:first-child {
+      border-top-width: 0;
+      @include border-top-radius($card-inner-border-radius);
+    }
+
+    &:last-child  {
+      border-bottom-width: 0;
+      @include border-bottom-radius($card-inner-border-radius);
+    }
+  }
+
+  // Due to specificity of the above selector (`.card > .list-group`), we must
+  // use a child selector here to prevent double borders.
+  > .card-header + .list-group,
+  > .list-group + .card-footer {
+    border-top: 0;
+  }
+}
+
+.card-body {
+  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
+  // as much space as possible, ensuring footers are aligned to the bottom.
+  flex: 1 1 auto;
+  // Workaround for the image size bug in IE
+  // See: https://github.com/twbs/bootstrap/pull/28855
+  min-height: 1px;
+  padding: $card-spacer-x;
+  color: $card-color;
+}
+
+.card-title {
+  margin-bottom: $card-spacer-y;
+}
+
+.card-subtitle {
+  margin-top: -$card-spacer-y / 2;
+  margin-bottom: 0;
+}
+
+.card-text:last-child {
+  margin-bottom: 0;
+}
+
+.card-link {
+  @include hover() {
+    text-decoration: none;
+  }
+
+  + .card-link {
+    margin-left: $card-spacer-x;
+  }
+}
+
+//
+// Optional textual caps
+//
+
+.card-header {
+  padding: $card-spacer-y $card-spacer-x;
+  margin-bottom: 0; // Removes the default margin-bottom of <hN>
+  color: $card-cap-color;
+  background-color: $card-cap-bg;
+  border-bottom: $card-border-width solid $card-border-color;
+
+  &:first-child {
+    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
+  }
+}
+
+.card-footer {
+  padding: $card-spacer-y $card-spacer-x;
+  color: $card-cap-color;
+  background-color: $card-cap-bg;
+  border-top: $card-border-width solid $card-border-color;
+
+  &:last-child {
+    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
+  }
+}
+
+
+//
+// Header navs
+//
+
+.card-header-tabs {
+  margin-right: -$card-spacer-x / 2;
+  margin-bottom: -$card-spacer-y;
+  margin-left: -$card-spacer-x / 2;
+  border-bottom: 0;
+}
+
+.card-header-pills {
+  margin-right: -$card-spacer-x / 2;
+  margin-left: -$card-spacer-x / 2;
+}
+
+// Card image
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: $card-img-overlay-padding;
+  @include border-radius($card-inner-border-radius);
+}
+
+.card-img,
+.card-img-top,
+.card-img-bottom {
+  flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396
+  width: 300px;
+  height: 150px;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  // width: 345.73px;
+  // height: 185px;
+
+  // Required because we use flexbox and this inherently applies align-self: stretch
+}
+
+.card-img,
+.card-img-top {
+  @include border-top-radius($card-inner-border-radius);
+}
+
+.card-img,
+.card-img-bottom {
+  @include border-bottom-radius($card-inner-border-radius);
+}
+
+
+// Card deck
+
+.card-deck {
+  .card {
+    margin-bottom: $card-deck-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    display: flex;
+    flex-flow: row wrap;
+    margin-right: -$card-deck-margin;
+    margin-left: -$card-deck-margin;
+
+    .card {
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+      flex: 1 0 0%;
+      margin-right: $card-deck-margin;
+      margin-bottom: 0; // Override the default
+      margin-left: $card-deck-margin;
+    }
+  }
+}
+
+
+//
+// Card groups
+//
+
+.card-group {
+  // The child selector allows nested `.card` within `.card-group`
+  // to display properly.
+  > .card {
+    margin-bottom: $card-group-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    display: flex;
+    flex-flow: row wrap;
+    // The child selector allows nested `.card` within `.card-group`
+    // to display properly.
+    > .card {
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+      flex: 1 0 0%;
+      margin-bottom: 0;
+
+      + .card {
+        margin-left: 0;
+        border-left: 0;
+      }
+
+      // Handle rounded corners
+      @if $enable-rounded {
+        &:not(:last-child) {
+          @include border-right-radius(0);
+
+          .card-img-top,
+          .card-header {
+            // stylelint-disable-next-line property-disallowed-list
+            border-top-right-radius: 0;
+          }
+          .card-img-bottom,
+          .card-footer {
+            // stylelint-disable-next-line property-disallowed-list
+            border-bottom-right-radius: 0;
+          }
+        }
+
+        &:not(:first-child) {
+          @include border-left-radius(0);
+
+          .card-img-top,
+          .card-header {
+            // stylelint-disable-next-line property-disallowed-list
+            border-top-left-radius: 0;
+          }
+          .card-img-bottom,
+          .card-footer {
+            // stylelint-disable-next-line property-disallowed-list
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+//
+// Columns
+//
+
+.card-columns {
+  .card {
+    margin-bottom: $card-columns-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    column-count: $card-columns-count;
+    column-gap: $card-columns-gap;
+    orphans: 1;
+    widows: 1;
+
+    .card {
+      display: inline-block; // Don't let them vertically span multiple columns
+      width: 100%; // Don't let their width change
+    }
+  }
+}
+
+
+//
+// Accordion
+//
+
+.accordion {
+  overflow-anchor: none;
+
+  > .card {
+    overflow: hidden;
+
+    &:not(:last-of-type) {
+      border-bottom: 0;
+      @include border-bottom-radius(0);
+    }
+
+    &:not(:first-of-type) {
+      @include border-top-radius(0);
+    }
+
+    > .card-header {
+      @include border-radius(0);
+      margin-bottom: -$card-border-width;
+    }
+  }
+}
+
+.header-1{
+  background: #6FB9DE;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 5px;
+  // width: 830px;
+  height: 45px;
+  margin-bottom: 30px;
+}
+.card-title-1{
+  margin-left: 10px;
+  padding: 10px;
+  font-size: 25px;
+text-align: left;
+color: rgba(255, 255, 255, 0.9);
+}
+.border-radius-login{
+  border-radius: 5px;
+}

styles/bootstrap/_carousel.scss

@@ -1,197 +1,197 @@
-// Notes on the classes:
-//
-// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
-//    even when their scroll action started on a carousel, but for compatibility (with Firefox)
-//    we're preventing all actions instead
-// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
-//    the active slide is heading.
-// 3. .active.carousel-item is the current slide.
-// 4. .active.carousel-item-left and .active.carousel-item-right is the current
-//    slide in its in-transition state. Only one of these occurs at a time.
-// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
-//    is the upcoming slide in transition.
-
-.carousel {
-  position: relative;
-}
-
-.carousel.pointer-event {
-  touch-action: pan-y;
-}
-
-.carousel-inner {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-  @include clearfix();
-}
-
-.carousel-item {
-  position: relative;
-  display: none;
-  float: left;
-  width: 100%;
-  margin-right: -100%;
-  backface-visibility: hidden;
-  @include transition($carousel-transition);
-}
-
-.carousel-item.active,
-.carousel-item-next,
-.carousel-item-prev {
-  display: block;
-}
-
-.carousel-item-next:not(.carousel-item-left),
-.active.carousel-item-right {
-  transform: translateX(100%);
-}
-
-.carousel-item-prev:not(.carousel-item-right),
-.active.carousel-item-left {
-  transform: translateX(-100%);
-}
-
-
-//
-// Alternate transitions
-//
-
-.carousel-fade {
-  .carousel-item {
-    opacity: 0;
-    transition-property: opacity;
-    transform: none;
-  }
-
-  .carousel-item.active,
-  .carousel-item-next.carousel-item-left,
-  .carousel-item-prev.carousel-item-right {
-    z-index: 1;
-    opacity: 1;
-  }
-
-  .active.carousel-item-left,
-  .active.carousel-item-right {
-    z-index: 0;
-    opacity: 0;
-    @include transition(opacity 0s $carousel-transition-duration);
-  }
-}
-
-
-//
-// Left/right controls for nav
-//
-
-.carousel-control-prev,
-.carousel-control-next {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  // Use flex for alignment (1-3)
-  display: flex; // 1. allow flex styles
-  align-items: center; // 2. vertically center contents
-  justify-content: center; // 3. horizontally center contents
-  width: $carousel-control-width;
-  color: $carousel-control-color;
-  text-align: center;
-  opacity: $carousel-control-opacity;
-  @include transition($carousel-control-transition);
-
-  // Hover/focus state
-  @include hover-focus() {
-    color: $carousel-control-color;
-    text-decoration: none;
-    outline: 0;
-    opacity: $carousel-control-hover-opacity;
-  }
-}
-.carousel-control-prev {
-  left: 0;
-  @if $enable-gradients {
-    background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
-  }
-}
-.carousel-control-next {
-  right: 0;
-  @if $enable-gradients {
-    background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
-  }
-}
-
-// Icons for within
-.carousel-control-prev-icon,
-.carousel-control-next-icon {
-  display: inline-block;
-  width: $carousel-control-icon-width;
-  height: $carousel-control-icon-width;
-  background: 50% / 100% 100% no-repeat;
-}
-.carousel-control-prev-icon {
-  background-image: escape-svg($carousel-control-prev-icon-bg);
-}
-.carousel-control-next-icon {
-  background-image: escape-svg($carousel-control-next-icon-bg);
-}
-
-
-// Optional indicator pips
-//
-// Add an ordered list with the following class and add a list item for each
-// slide your carousel holds.
-
-.carousel-indicators {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 15;
-  display: flex;
-  justify-content: center;
-  padding-left: 0; // override <ol> default
-  // Use the .carousel-control's width as margin so we don't overlay those
-  margin-right: $carousel-control-width;
-  margin-left: $carousel-control-width;
-  list-style: none;
-
-  li {
-    box-sizing: content-box;
-    flex: 0 1 auto;
-    width: $carousel-indicator-width;
-    height: $carousel-indicator-height;
-    margin-right: $carousel-indicator-spacer;
-    margin-left: $carousel-indicator-spacer;
-    text-indent: -999px;
-    cursor: pointer;
-    background-color: $carousel-indicator-active-bg;
-    background-clip: padding-box;
-    // Use transparent borders to increase the hit area by 10px on top and bottom.
-    border-top: $carousel-indicator-hit-area-height solid transparent;
-    border-bottom: $carousel-indicator-hit-area-height solid transparent;
-    opacity: .5;
-    @include transition($carousel-indicator-transition);
-  }
-
-  .active {
-    opacity: 1;
-  }
-}
-
-
-// Optional captions
-//
-//
-
-.carousel-caption {
-  position: absolute;
-  right: (100% - $carousel-caption-width) / 2;
-  bottom: 20px;
-  left: (100% - $carousel-caption-width) / 2;
-  z-index: 10;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  color: $carousel-caption-color;
-  text-align: center;
-}
+// Notes on the classes:
+//
+// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
+//    even when their scroll action started on a carousel, but for compatibility (with Firefox)
+//    we're preventing all actions instead
+// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
+//    the active slide is heading.
+// 3. .active.carousel-item is the current slide.
+// 4. .active.carousel-item-left and .active.carousel-item-right is the current
+//    slide in its in-transition state. Only one of these occurs at a time.
+// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
+//    is the upcoming slide in transition.
+
+.carousel {
+  position: relative;
+}
+
+.carousel.pointer-event {
+  touch-action: pan-y;
+}
+
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  @include clearfix();
+}
+
+.carousel-item {
+  position: relative;
+  display: none;
+  float: left;
+  width: 100%;
+  margin-right: -100%;
+  backface-visibility: hidden;
+  @include transition($carousel-transition);
+}
+
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: block;
+}
+
+.carousel-item-next:not(.carousel-item-left),
+.active.carousel-item-right {
+  transform: translateX(100%);
+}
+
+.carousel-item-prev:not(.carousel-item-right),
+.active.carousel-item-left {
+  transform: translateX(-100%);
+}
+
+
+//
+// Alternate transitions
+//
+
+.carousel-fade {
+  .carousel-item {
+    opacity: 0;
+    transition-property: opacity;
+    transform: none;
+  }
+
+  .carousel-item.active,
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    z-index: 1;
+    opacity: 1;
+  }
+
+  .active.carousel-item-left,
+  .active.carousel-item-right {
+    z-index: 0;
+    opacity: 0;
+    @include transition(opacity 0s $carousel-transition-duration);
+  }
+}
+
+
+//
+// Left/right controls for nav
+//
+
+.carousel-control-prev,
+.carousel-control-next {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  // Use flex for alignment (1-3)
+  display: flex; // 1. allow flex styles
+  align-items: center; // 2. vertically center contents
+  justify-content: center; // 3. horizontally center contents
+  width: $carousel-control-width;
+  color: $carousel-control-color;
+  text-align: center;
+  opacity: $carousel-control-opacity;
+  @include transition($carousel-control-transition);
+
+  // Hover/focus state
+  @include hover-focus() {
+    color: $carousel-control-color;
+    text-decoration: none;
+    outline: 0;
+    opacity: $carousel-control-hover-opacity;
+  }
+}
+.carousel-control-prev {
+  left: 0;
+  @if $enable-gradients {
+    background-image: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
+  }
+}
+.carousel-control-next {
+  right: 0;
+  @if $enable-gradients {
+    background-image: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
+  }
+}
+
+// Icons for within
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: $carousel-control-icon-width;
+  height: $carousel-control-icon-width;
+  background: 50% / 100% 100% no-repeat;
+}
+.carousel-control-prev-icon {
+  background-image: escape-svg($carousel-control-prev-icon-bg);
+}
+.carousel-control-next-icon {
+  background-image: escape-svg($carousel-control-next-icon-bg);
+}
+
+
+// Optional indicator pips
+//
+// Add an ordered list with the following class and add a list item for each
+// slide your carousel holds.
+
+.carousel-indicators {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 15;
+  display: flex;
+  justify-content: center;
+  padding-left: 0; // override <ol> default
+  // Use the .carousel-control's width as margin so we don't overlay those
+  margin-right: $carousel-control-width;
+  margin-left: $carousel-control-width;
+  list-style: none;
+
+  li {
+    box-sizing: content-box;
+    flex: 0 1 auto;
+    width: $carousel-indicator-width;
+    height: $carousel-indicator-height;
+    margin-right: $carousel-indicator-spacer;
+    margin-left: $carousel-indicator-spacer;
+    text-indent: -999px;
+    cursor: pointer;
+    background-color: $carousel-indicator-active-bg;
+    background-clip: padding-box;
+    // Use transparent borders to increase the hit area by 10px on top and bottom.
+    border-top: $carousel-indicator-hit-area-height solid transparent;
+    border-bottom: $carousel-indicator-hit-area-height solid transparent;
+    opacity: .5;
+    @include transition($carousel-indicator-transition);
+  }
+
+  .active {
+    opacity: 1;
+  }
+}
+
+
+// Optional captions
+//
+//
+
+.carousel-caption {
+  position: absolute;
+  right: (100% - $carousel-caption-width) / 2;
+  bottom: 20px;
+  left: (100% - $carousel-caption-width) / 2;
+  z-index: 10;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: $carousel-caption-color;
+  text-align: center;
+}

styles/bootstrap/_close.scss

@@ -1,40 +1,40 @@
-.close {
-  float: right;
-  @include font-size($close-font-size);
-  font-weight: $close-font-weight;
-  line-height: 1;
-  color: $close-color;
-  text-shadow: $close-text-shadow;
-  opacity: .5;
-
-  // Override <a>'s hover style
-  @include hover() {
-    color: $close-color;
-    text-decoration: none;
-  }
-
-  &:not(:disabled):not(.disabled) {
-    @include hover-focus() {
-      opacity: .75;
-    }
-  }
-}
-
-// Additional properties for button version
-// iOS requires the button element instead of an anchor tag.
-// If you want the anchor version, it requires `href="#"`.
-// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
-
-// stylelint-disable-next-line selector-no-qualifying-type
-button.close {
-  padding: 0;
-  background-color: transparent;
-  border: 0;
-}
-
-// Future-proof disabling of clicks on `<a>` elements
-
-// stylelint-disable-next-line selector-no-qualifying-type
-a.close.disabled {
-  pointer-events: none;
-}
+.close {
+  float: right;
+  @include font-size($close-font-size);
+  font-weight: $close-font-weight;
+  line-height: 1;
+  color: $close-color;
+  text-shadow: $close-text-shadow;
+  opacity: .5;
+
+  // Override <a>'s hover style
+  @include hover() {
+    color: $close-color;
+    text-decoration: none;
+  }
+
+  &:not(:disabled):not(.disabled) {
+    @include hover-focus() {
+      opacity: .75;
+    }
+  }
+}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+// stylelint-disable-next-line selector-no-qualifying-type
+button.close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+}
+
+// Future-proof disabling of clicks on `<a>` elements
+
+// stylelint-disable-next-line selector-no-qualifying-type
+a.close.disabled {
+  pointer-events: none;
+}

styles/bootstrap/_code.scss

@@ -1,48 +1,48 @@
-// Inline code
-code {
-  @include font-size($code-font-size);
-  color: $code-color;
-  word-wrap: break-word;
-
-  // Streamline the style when inside anchors to avoid broken underline and more
-  a > & {
-    color: inherit;
-  }
-}
-
-// User input typically entered via keyboard
-kbd {
-  padding: $kbd-padding-y $kbd-padding-x;
-  @include font-size($kbd-font-size);
-  color: $kbd-color;
-  background-color: $kbd-bg;
-  @include border-radius($border-radius-sm);
-  @include box-shadow($kbd-box-shadow);
-
-  kbd {
-    padding: 0;
-    @include font-size(100%);
-    font-weight: $nested-kbd-font-weight;
-    @include box-shadow(none);
-  }
-}
-
-// Blocks of code
-pre {
-  display: block;
-  @include font-size($code-font-size);
-  color: $pre-color;
-
-  // Account for some code outputs that place code tags in pre tags
-  code {
-    @include font-size(inherit);
-    color: inherit;
-    word-break: normal;
-  }
-}
-
-// Enable scrollable blocks of code
-.pre-scrollable {
-  max-height: $pre-scrollable-max-height;
-  overflow-y: scroll;
-}
+// Inline code
+code {
+  @include font-size($code-font-size);
+  color: $code-color;
+  word-wrap: break-word;
+
+  // Streamline the style when inside anchors to avoid broken underline and more
+  a > & {
+    color: inherit;
+  }
+}
+
+// User input typically entered via keyboard
+kbd {
+  padding: $kbd-padding-y $kbd-padding-x;
+  @include font-size($kbd-font-size);
+  color: $kbd-color;
+  background-color: $kbd-bg;
+  @include border-radius($border-radius-sm);
+  @include box-shadow($kbd-box-shadow);
+
+  kbd {
+    padding: 0;
+    @include font-size(100%);
+    font-weight: $nested-kbd-font-weight;
+    @include box-shadow(none);
+  }
+}
+
+// Blocks of code
+pre {
+  display: block;
+  @include font-size($code-font-size);
+  color: $pre-color;
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    @include font-size(inherit);
+    color: inherit;
+    word-break: normal;
+  }
+}
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: $pre-scrollable-max-height;
+  overflow-y: scroll;
+}

styles/bootstrap/_custom-forms.scss

@@ -1,526 +1,526 @@
-// Embedded icons from Open Iconic.
-// Released under MIT and copyright 2014 Waybury.
-// https://useiconic.com/open
-
-
-// Checkboxes and radios
-//
-// Base class takes care of all the key behavioral aspects.
-
-.custom-control {
-  position: relative;
-  z-index: 1;
-  display: block;
-  min-height: $font-size-base * $line-height-base;
-  padding-left: $custom-control-gutter + $custom-control-indicator-size;
-  color-adjust: exact; // Keep themed appearance for print
-}
-
-.custom-control-inline {
-  display: inline-flex;
-  margin-right: $custom-control-spacer-x;
-}
-
-.custom-control-input {
-  position: absolute;
-  left: 0;
-  z-index: -1; // Put the input behind the label so it doesn't overlay text
-  width: $custom-control-indicator-size;
-  height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2;
-  opacity: 0;
-
-  &:checked ~ .custom-control-label::before {
-    color: $custom-control-indicator-checked-color;
-    border-color: $custom-control-indicator-checked-border-color;
-    @include gradient-bg($custom-control-indicator-checked-bg);
-    @include box-shadow($custom-control-indicator-checked-box-shadow);
-  }
-
-  &:focus ~ .custom-control-label::before {
-    // the mixin is not used here to make sure there is feedback
-    @if $enable-shadows {
-      box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow;
-    } @else {
-      box-shadow: $custom-control-indicator-focus-box-shadow;
-    }
-  }
-
-  &:focus:not(:checked) ~ .custom-control-label::before {
-    border-color: $custom-control-indicator-focus-border-color;
-  }
-
-  &:not(:disabled):active ~ .custom-control-label::before {
-    color: $custom-control-indicator-active-color;
-    background-color: $custom-control-indicator-active-bg;
-    border-color: $custom-control-indicator-active-border-color;
-    @include box-shadow($custom-control-indicator-active-box-shadow);
-  }
-
-  // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
-  &[disabled],
-  &:disabled {
-    ~ .custom-control-label {
-      color: $custom-control-label-disabled-color;
-
-      &::before {
-        background-color: $custom-control-indicator-disabled-bg;
-      }
-    }
-  }
-}
-
-// Custom control indicators
-//
-// Build the custom controls out of pseudo-elements.
-
-.custom-control-label {
-  position: relative;
-  margin-bottom: 0;
-  color: $custom-control-label-color;
-  vertical-align: top;
-  cursor: $custom-control-cursor;
-
-  // Background-color and (when enabled) gradient
-  &::before {
-    position: absolute;
-    top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
-    left: -($custom-control-gutter + $custom-control-indicator-size);
-    display: block;
-    width: $custom-control-indicator-size;
-    height: $custom-control-indicator-size;
-    pointer-events: none;
-    content: "";
-    background-color: $custom-control-indicator-bg;
-    border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
-    @include box-shadow($custom-control-indicator-box-shadow);
-  }
-
-  // Foreground (icon)
-  &::after {
-    position: absolute;
-    top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
-    left: -($custom-control-gutter + $custom-control-indicator-size);
-    display: block;
-    width: $custom-control-indicator-size;
-    height: $custom-control-indicator-size;
-    content: "";
-    background: 50% / #{$custom-control-indicator-bg-size} no-repeat;
-  }
-}
-
-
-// Checkboxes
-//
-// Tweak just a few things for checkboxes.
-
-.custom-checkbox {
-  .custom-control-label::before {
-    @include border-radius($custom-checkbox-indicator-border-radius);
-  }
-
-  .custom-control-input:checked ~ .custom-control-label {
-    &::after {
-      background-image: escape-svg($custom-checkbox-indicator-icon-checked);
-    }
-  }
-
-  .custom-control-input:indeterminate ~ .custom-control-label {
-    &::before {
-      border-color: $custom-checkbox-indicator-indeterminate-border-color;
-      @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
-      @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
-    }
-    &::after {
-      background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
-    }
-  }
-
-  .custom-control-input:disabled {
-    &:checked ~ .custom-control-label::before {
-      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
-    }
-    &:indeterminate ~ .custom-control-label::before {
-      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
-    }
-  }
-}
-
-// Radios
-//
-// Tweak just a few things for radios.
-
-.custom-radio {
-  .custom-control-label::before {
-    // stylelint-disable-next-line property-disallowed-list
-    border-radius: $custom-radio-indicator-border-radius;
-  }
-
-  .custom-control-input:checked ~ .custom-control-label {
-    &::after {
-      background-image: escape-svg($custom-radio-indicator-icon-checked);
-    }
-  }
-
-  .custom-control-input:disabled {
-    &:checked ~ .custom-control-label::before {
-      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
-    }
-  }
-}
-
-
-// switches
-//
-// Tweak a few things for switches
-
-.custom-switch {
-  padding-left: $custom-switch-width + $custom-control-gutter;
-
-  .custom-control-label {
-    &::before {
-      left: -($custom-switch-width + $custom-control-gutter);
-      width: $custom-switch-width;
-      pointer-events: all;
-      // stylelint-disable-next-line property-disallowed-list
-      border-radius: $custom-switch-indicator-border-radius;
-    }
-
-    &::after {
-      top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
-      left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
-      width: $custom-switch-indicator-size;
-      height: $custom-switch-indicator-size;
-      background-color: $custom-control-indicator-border-color;
-      // stylelint-disable-next-line property-disallowed-list
-      border-radius: $custom-switch-indicator-border-radius;
-      @include transition(transform .15s ease-in-out, $custom-forms-transition);
-    }
-  }
-
-  .custom-control-input:checked ~ .custom-control-label {
-    &::after {
-      background-color: $custom-control-indicator-bg;
-      transform: translateX($custom-switch-width - $custom-control-indicator-size);
-    }
-  }
-
-  .custom-control-input:disabled {
-    &:checked ~ .custom-control-label::before {
-      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
-    }
-  }
-}
-
-
-// Select
-//
-// Replaces the browser default select with a custom one, mostly pulled from
-// https://primer.github.io/.
-//
-
-.custom-select {
-  display: inline-block;
-  width: 100%;
-  height: $custom-select-height;
-  padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
-  font-family: $custom-select-font-family;
-  @include font-size($custom-select-font-size);
-  font-weight: $custom-select-font-weight;
-  line-height: $custom-select-line-height;
-  color: $custom-select-color;
-  vertical-align: middle;
-  background: $custom-select-bg $custom-select-background;
-  border: $custom-select-border-width solid $custom-select-border-color;
-  @include border-radius($custom-select-border-radius, 0);
-  @include box-shadow($custom-select-box-shadow);
-  appearance: none;
-
-  &:focus {
-    border-color: $custom-select-focus-border-color;
-    outline: 0;
-    @if $enable-shadows {
-      @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow);
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $custom-select-focus-box-shadow;
-    }
-
-    &::-ms-value {
-      // For visual consistency with other platforms/browsers,
-      // suppress the default white text on blue background highlight given to
-      // the selected option text when the (still closed) <select> receives focus
-      // in IE and (under certain conditions) Edge.
-      // See https://github.com/twbs/bootstrap/issues/19398.
-      color: $input-color;
-      background-color: $input-bg;
-    }
-  }
-
-  &[multiple],
-  &[size]:not([size="1"]) {
-    height: auto;
-    padding-right: $custom-select-padding-x;
-    background-image: none;
-  }
-
-  &:disabled {
-    color: $custom-select-disabled-color;
-    background-color: $custom-select-disabled-bg;
-  }
-
-  // Hides the default caret in IE11
-  &::-ms-expand {
-    display: none;
-  }
-
-  // Remove outline from select box in FF
-  &:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 $custom-select-color;
-  }
-}
-
-.custom-select-sm {
-  height: $custom-select-height-sm;
-  padding-top: $custom-select-padding-y-sm;
-  padding-bottom: $custom-select-padding-y-sm;
-  padding-left: $custom-select-padding-x-sm;
-  @include font-size($custom-select-font-size-sm);
-}
-
-.custom-select-lg {
-  height: $custom-select-height-lg;
-  padding-top: $custom-select-padding-y-lg;
-  padding-bottom: $custom-select-padding-y-lg;
-  padding-left: $custom-select-padding-x-lg;
-  @include font-size($custom-select-font-size-lg);
-}
-
-
-// File
-//
-// Custom file input.
-
-.custom-file {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  height: $custom-file-height;
-  margin-bottom: 0;
-}
-
-.custom-file-input {
-  position: relative;
-  z-index: 2;
-  width: 100%;
-  height: $custom-file-height;
-  margin: 0;
-  overflow: hidden;
-  opacity: 0;
-
-  &:focus ~ .custom-file-label {
-    border-color: $custom-file-focus-border-color;
-    box-shadow: $custom-file-focus-box-shadow;
-  }
-
-  // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
-  &[disabled] ~ .custom-file-label,
-  &:disabled ~ .custom-file-label {
-    background-color: $custom-file-disabled-bg;
-  }
-
-  @each $lang, $value in $custom-file-text {
-    &:lang(#{$lang}) ~ .custom-file-label::after {
-      content: $value;
-    }
-  }
-
-  ~ .custom-file-label[data-browse]::after {
-    content: attr(data-browse);
-  }
-}
-
-.custom-file-label {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 1;
-  height: $custom-file-height;
-  padding: $custom-file-padding-y $custom-file-padding-x;
-  overflow: hidden;
-  font-family: $custom-file-font-family;
-  font-weight: $custom-file-font-weight;
-  line-height: $custom-file-line-height;
-  color: $custom-file-color;
-  background-color: $custom-file-bg;
-  border: $custom-file-border-width solid $custom-file-border-color;
-  @include border-radius($custom-file-border-radius);
-  @include box-shadow($custom-file-box-shadow);
-
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 3;
-    display: block;
-    height: $custom-file-height-inner;
-    padding: $custom-file-padding-y $custom-file-padding-x;
-    line-height: $custom-file-line-height;
-    color: $custom-file-button-color;
-    content: "Browse";
-    @include gradient-bg($custom-file-button-bg);
-    border-left: inherit;
-    @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
-  }
-}
-
-// Range
-//
-// Style range inputs the same across browsers. Vendor-specific rules for pseudo
-// elements cannot be mixed. As such, there are no shared styles for focus or
-// active states on prefixed selectors.
-
-.custom-range {
-  width: 100%;
-  height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
-  padding: 0; // Need to reset padding
-  background-color: transparent;
-  appearance: none;
-
-  &:focus {
-    outline: 0;
-
-    // Pseudo-elements must be split across multiple rulesets to have an effect.
-    // No box-shadow() mixin for focus accessibility.
-    &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
-    &::-moz-range-thumb     { box-shadow: $custom-range-thumb-focus-box-shadow; }
-    &::-ms-thumb            { box-shadow: $custom-range-thumb-focus-box-shadow; }
-  }
-
-  &::-moz-focus-outer {
-    border: 0;
-  }
-
-  &::-webkit-slider-thumb {
-    width: $custom-range-thumb-width;
-    height: $custom-range-thumb-height;
-    margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
-    @include gradient-bg($custom-range-thumb-bg);
-    border: $custom-range-thumb-border;
-    @include border-radius($custom-range-thumb-border-radius);
-    @include box-shadow($custom-range-thumb-box-shadow);
-    @include transition($custom-forms-transition);
-    appearance: none;
-
-    &:active {
-      @include gradient-bg($custom-range-thumb-active-bg);
-    }
-  }
-
-  &::-webkit-slider-runnable-track {
-    width: $custom-range-track-width;
-    height: $custom-range-track-height;
-    color: transparent; // Why?
-    cursor: $custom-range-track-cursor;
-    background-color: $custom-range-track-bg;
-    border-color: transparent;
-    @include border-radius($custom-range-track-border-radius);
-    @include box-shadow($custom-range-track-box-shadow);
-  }
-
-  &::-moz-range-thumb {
-    width: $custom-range-thumb-width;
-    height: $custom-range-thumb-height;
-    @include gradient-bg($custom-range-thumb-bg);
-    border: $custom-range-thumb-border;
-    @include border-radius($custom-range-thumb-border-radius);
-    @include box-shadow($custom-range-thumb-box-shadow);
-    @include transition($custom-forms-transition);
-    appearance: none;
-
-    &:active {
-      @include gradient-bg($custom-range-thumb-active-bg);
-    }
-  }
-
-  &::-moz-range-track {
-    width: $custom-range-track-width;
-    height: $custom-range-track-height;
-    color: transparent;
-    cursor: $custom-range-track-cursor;
-    background-color: $custom-range-track-bg;
-    border-color: transparent; // Firefox specific?
-    @include border-radius($custom-range-track-border-radius);
-    @include box-shadow($custom-range-track-box-shadow);
-  }
-
-  &::-ms-thumb {
-    width: $custom-range-thumb-width;
-    height: $custom-range-thumb-height;
-    margin-top: 0; // Edge specific
-    margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
-    margin-left: $custom-range-thumb-focus-box-shadow-width;  // Workaround that overflowed box-shadow is hidden.
-    @include gradient-bg($custom-range-thumb-bg);
-    border: $custom-range-thumb-border;
-    @include border-radius($custom-range-thumb-border-radius);
-    @include box-shadow($custom-range-thumb-box-shadow);
-    @include transition($custom-forms-transition);
-    appearance: none;
-
-    &:active {
-      @include gradient-bg($custom-range-thumb-active-bg);
-    }
-  }
-
-  &::-ms-track {
-    width: $custom-range-track-width;
-    height: $custom-range-track-height;
-    color: transparent;
-    cursor: $custom-range-track-cursor;
-    background-color: transparent;
-    border-color: transparent;
-    border-width: $custom-range-thumb-height / 2;
-    @include box-shadow($custom-range-track-box-shadow);
-  }
-
-  &::-ms-fill-lower {
-    background-color: $custom-range-track-bg;
-    @include border-radius($custom-range-track-border-radius);
-  }
-
-  &::-ms-fill-upper {
-    margin-right: 15px; // arbitrary?
-    background-color: $custom-range-track-bg;
-    @include border-radius($custom-range-track-border-radius);
-  }
-
-  &:disabled {
-    &::-webkit-slider-thumb {
-      background-color: $custom-range-thumb-disabled-bg;
-    }
-
-    &::-webkit-slider-runnable-track {
-      cursor: default;
-    }
-
-    &::-moz-range-thumb {
-      background-color: $custom-range-thumb-disabled-bg;
-    }
-
-    &::-moz-range-track {
-      cursor: default;
-    }
-
-    &::-ms-thumb {
-      background-color: $custom-range-thumb-disabled-bg;
-    }
-  }
-}
-
-.custom-control-label::before,
-.custom-file-label,
-.custom-select {
-  @include transition($custom-forms-transition);
-}
+// Embedded icons from Open Iconic.
+// Released under MIT and copyright 2014 Waybury.
+// https://useiconic.com/open
+
+
+// Checkboxes and radios
+//
+// Base class takes care of all the key behavioral aspects.
+
+.custom-control {
+  position: relative;
+  z-index: 1;
+  display: block;
+  min-height: $font-size-base * $line-height-base;
+  padding-left: $custom-control-gutter + $custom-control-indicator-size;
+  color-adjust: exact; // Keep themed appearance for print
+}
+
+.custom-control-inline {
+  display: inline-flex;
+  margin-right: $custom-control-spacer-x;
+}
+
+.custom-control-input {
+  position: absolute;
+  left: 0;
+  z-index: -1; // Put the input behind the label so it doesn't overlay text
+  width: $custom-control-indicator-size;
+  height: ($font-size-base * $line-height-base + $custom-control-indicator-size) / 2;
+  opacity: 0;
+
+  &:checked ~ .custom-control-label::before {
+    color: $custom-control-indicator-checked-color;
+    border-color: $custom-control-indicator-checked-border-color;
+    @include gradient-bg($custom-control-indicator-checked-bg);
+    @include box-shadow($custom-control-indicator-checked-box-shadow);
+  }
+
+  &:focus ~ .custom-control-label::before {
+    // the mixin is not used here to make sure there is feedback
+    @if $enable-shadows {
+      box-shadow: $input-box-shadow, $custom-control-indicator-focus-box-shadow;
+    } @else {
+      box-shadow: $custom-control-indicator-focus-box-shadow;
+    }
+  }
+
+  &:focus:not(:checked) ~ .custom-control-label::before {
+    border-color: $custom-control-indicator-focus-border-color;
+  }
+
+  &:not(:disabled):active ~ .custom-control-label::before {
+    color: $custom-control-indicator-active-color;
+    background-color: $custom-control-indicator-active-bg;
+    border-color: $custom-control-indicator-active-border-color;
+    @include box-shadow($custom-control-indicator-active-box-shadow);
+  }
+
+  // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
+  &[disabled],
+  &:disabled {
+    ~ .custom-control-label {
+      color: $custom-control-label-disabled-color;
+
+      &::before {
+        background-color: $custom-control-indicator-disabled-bg;
+      }
+    }
+  }
+}
+
+// Custom control indicators
+//
+// Build the custom controls out of pseudo-elements.
+
+.custom-control-label {
+  position: relative;
+  margin-bottom: 0;
+  color: $custom-control-label-color;
+  vertical-align: top;
+  cursor: $custom-control-cursor;
+
+  // Background-color and (when enabled) gradient
+  &::before {
+    position: absolute;
+    top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
+    left: -($custom-control-gutter + $custom-control-indicator-size);
+    display: block;
+    width: $custom-control-indicator-size;
+    height: $custom-control-indicator-size;
+    pointer-events: none;
+    content: "";
+    background-color: $custom-control-indicator-bg;
+    border: $custom-control-indicator-border-color solid $custom-control-indicator-border-width;
+    @include box-shadow($custom-control-indicator-box-shadow);
+  }
+
+  // Foreground (icon)
+  &::after {
+    position: absolute;
+    top: ($font-size-base * $line-height-base - $custom-control-indicator-size) / 2;
+    left: -($custom-control-gutter + $custom-control-indicator-size);
+    display: block;
+    width: $custom-control-indicator-size;
+    height: $custom-control-indicator-size;
+    content: "";
+    background: 50% / #{$custom-control-indicator-bg-size} no-repeat;
+  }
+}
+
+
+// Checkboxes
+//
+// Tweak just a few things for checkboxes.
+
+.custom-checkbox {
+  .custom-control-label::before {
+    @include border-radius($custom-checkbox-indicator-border-radius);
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      background-image: escape-svg($custom-checkbox-indicator-icon-checked);
+    }
+  }
+
+  .custom-control-input:indeterminate ~ .custom-control-label {
+    &::before {
+      border-color: $custom-checkbox-indicator-indeterminate-border-color;
+      @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
+      @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
+    }
+    &::after {
+      background-image: escape-svg($custom-checkbox-indicator-icon-indeterminate);
+    }
+  }
+
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
+    }
+    &:indeterminate ~ .custom-control-label::before {
+      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
+    }
+  }
+}
+
+// Radios
+//
+// Tweak just a few things for radios.
+
+.custom-radio {
+  .custom-control-label::before {
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: $custom-radio-indicator-border-radius;
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      background-image: escape-svg($custom-radio-indicator-icon-checked);
+    }
+  }
+
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
+    }
+  }
+}
+
+
+// switches
+//
+// Tweak a few things for switches
+
+.custom-switch {
+  padding-left: $custom-switch-width + $custom-control-gutter;
+
+  .custom-control-label {
+    &::before {
+      left: -($custom-switch-width + $custom-control-gutter);
+      width: $custom-switch-width;
+      pointer-events: all;
+      // stylelint-disable-next-line property-disallowed-list
+      border-radius: $custom-switch-indicator-border-radius;
+    }
+
+    &::after {
+      top: add(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2, $custom-control-indicator-border-width * 2);
+      left: add(-($custom-switch-width + $custom-control-gutter), $custom-control-indicator-border-width * 2);
+      width: $custom-switch-indicator-size;
+      height: $custom-switch-indicator-size;
+      background-color: $custom-control-indicator-border-color;
+      // stylelint-disable-next-line property-disallowed-list
+      border-radius: $custom-switch-indicator-border-radius;
+      @include transition(transform .15s ease-in-out, $custom-forms-transition);
+    }
+  }
+
+  .custom-control-input:checked ~ .custom-control-label {
+    &::after {
+      background-color: $custom-control-indicator-bg;
+      transform: translateX($custom-switch-width - $custom-control-indicator-size);
+    }
+  }
+
+  .custom-control-input:disabled {
+    &:checked ~ .custom-control-label::before {
+      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
+    }
+  }
+}
+
+
+// Select
+//
+// Replaces the browser default select with a custom one, mostly pulled from
+// https://primer.github.io/.
+//
+
+.custom-select {
+  display: inline-block;
+  width: 100%;
+  height: $custom-select-height;
+  padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
+  font-family: $custom-select-font-family;
+  @include font-size($custom-select-font-size);
+  font-weight: $custom-select-font-weight;
+  line-height: $custom-select-line-height;
+  color: $custom-select-color;
+  vertical-align: middle;
+  background: $custom-select-bg $custom-select-background;
+  border: $custom-select-border-width solid $custom-select-border-color;
+  @include border-radius($custom-select-border-radius, 0);
+  @include box-shadow($custom-select-box-shadow);
+  appearance: none;
+
+  &:focus {
+    border-color: $custom-select-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $custom-select-focus-box-shadow;
+    }
+
+    &::-ms-value {
+      // For visual consistency with other platforms/browsers,
+      // suppress the default white text on blue background highlight given to
+      // the selected option text when the (still closed) <select> receives focus
+      // in IE and (under certain conditions) Edge.
+      // See https://github.com/twbs/bootstrap/issues/19398.
+      color: $input-color;
+      background-color: $input-bg;
+    }
+  }
+
+  &[multiple],
+  &[size]:not([size="1"]) {
+    height: auto;
+    padding-right: $custom-select-padding-x;
+    background-image: none;
+  }
+
+  &:disabled {
+    color: $custom-select-disabled-color;
+    background-color: $custom-select-disabled-bg;
+  }
+
+  // Hides the default caret in IE11
+  &::-ms-expand {
+    display: none;
+  }
+
+  // Remove outline from select box in FF
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 $custom-select-color;
+  }
+}
+
+.custom-select-sm {
+  height: $custom-select-height-sm;
+  padding-top: $custom-select-padding-y-sm;
+  padding-bottom: $custom-select-padding-y-sm;
+  padding-left: $custom-select-padding-x-sm;
+  @include font-size($custom-select-font-size-sm);
+}
+
+.custom-select-lg {
+  height: $custom-select-height-lg;
+  padding-top: $custom-select-padding-y-lg;
+  padding-bottom: $custom-select-padding-y-lg;
+  padding-left: $custom-select-padding-x-lg;
+  @include font-size($custom-select-font-size-lg);
+}
+
+
+// File
+//
+// Custom file input.
+
+.custom-file {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: $custom-file-height;
+  margin-bottom: 0;
+}
+
+.custom-file-input {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: $custom-file-height;
+  margin: 0;
+  overflow: hidden;
+  opacity: 0;
+
+  &:focus ~ .custom-file-label {
+    border-color: $custom-file-focus-border-color;
+    box-shadow: $custom-file-focus-box-shadow;
+  }
+
+  // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
+  &[disabled] ~ .custom-file-label,
+  &:disabled ~ .custom-file-label {
+    background-color: $custom-file-disabled-bg;
+  }
+
+  @each $lang, $value in $custom-file-text {
+    &:lang(#{$lang}) ~ .custom-file-label::after {
+      content: $value;
+    }
+  }
+
+  ~ .custom-file-label[data-browse]::after {
+    content: attr(data-browse);
+  }
+}
+
+.custom-file-label {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  height: $custom-file-height;
+  padding: $custom-file-padding-y $custom-file-padding-x;
+  overflow: hidden;
+  font-family: $custom-file-font-family;
+  font-weight: $custom-file-font-weight;
+  line-height: $custom-file-line-height;
+  color: $custom-file-color;
+  background-color: $custom-file-bg;
+  border: $custom-file-border-width solid $custom-file-border-color;
+  @include border-radius($custom-file-border-radius);
+  @include box-shadow($custom-file-box-shadow);
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+    display: block;
+    height: $custom-file-height-inner;
+    padding: $custom-file-padding-y $custom-file-padding-x;
+    line-height: $custom-file-line-height;
+    color: $custom-file-button-color;
+    content: "Browse";
+    @include gradient-bg($custom-file-button-bg);
+    border-left: inherit;
+    @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
+  }
+}
+
+// Range
+//
+// Style range inputs the same across browsers. Vendor-specific rules for pseudo
+// elements cannot be mixed. As such, there are no shared styles for focus or
+// active states on prefixed selectors.
+
+.custom-range {
+  width: 100%;
+  height: add($custom-range-thumb-height, $custom-range-thumb-focus-box-shadow-width * 2);
+  padding: 0; // Need to reset padding
+  background-color: transparent;
+  appearance: none;
+
+  &:focus {
+    outline: 0;
+
+    // Pseudo-elements must be split across multiple rulesets to have an effect.
+    // No box-shadow() mixin for focus accessibility.
+    &::-webkit-slider-thumb { box-shadow: $custom-range-thumb-focus-box-shadow; }
+    &::-moz-range-thumb     { box-shadow: $custom-range-thumb-focus-box-shadow; }
+    &::-ms-thumb            { box-shadow: $custom-range-thumb-focus-box-shadow; }
+  }
+
+  &::-moz-focus-outer {
+    border: 0;
+  }
+
+  &::-webkit-slider-thumb {
+    width: $custom-range-thumb-width;
+    height: $custom-range-thumb-height;
+    margin-top: ($custom-range-track-height - $custom-range-thumb-height) / 2; // Webkit specific
+    @include gradient-bg($custom-range-thumb-bg);
+    border: $custom-range-thumb-border;
+    @include border-radius($custom-range-thumb-border-radius);
+    @include box-shadow($custom-range-thumb-box-shadow);
+    @include transition($custom-forms-transition);
+    appearance: none;
+
+    &:active {
+      @include gradient-bg($custom-range-thumb-active-bg);
+    }
+  }
+
+  &::-webkit-slider-runnable-track {
+    width: $custom-range-track-width;
+    height: $custom-range-track-height;
+    color: transparent; // Why?
+    cursor: $custom-range-track-cursor;
+    background-color: $custom-range-track-bg;
+    border-color: transparent;
+    @include border-radius($custom-range-track-border-radius);
+    @include box-shadow($custom-range-track-box-shadow);
+  }
+
+  &::-moz-range-thumb {
+    width: $custom-range-thumb-width;
+    height: $custom-range-thumb-height;
+    @include gradient-bg($custom-range-thumb-bg);
+    border: $custom-range-thumb-border;
+    @include border-radius($custom-range-thumb-border-radius);
+    @include box-shadow($custom-range-thumb-box-shadow);
+    @include transition($custom-forms-transition);
+    appearance: none;
+
+    &:active {
+      @include gradient-bg($custom-range-thumb-active-bg);
+    }
+  }
+
+  &::-moz-range-track {
+    width: $custom-range-track-width;
+    height: $custom-range-track-height;
+    color: transparent;
+    cursor: $custom-range-track-cursor;
+    background-color: $custom-range-track-bg;
+    border-color: transparent; // Firefox specific?
+    @include border-radius($custom-range-track-border-radius);
+    @include box-shadow($custom-range-track-box-shadow);
+  }
+
+  &::-ms-thumb {
+    width: $custom-range-thumb-width;
+    height: $custom-range-thumb-height;
+    margin-top: 0; // Edge specific
+    margin-right: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
+    margin-left: $custom-range-thumb-focus-box-shadow-width;  // Workaround that overflowed box-shadow is hidden.
+    @include gradient-bg($custom-range-thumb-bg);
+    border: $custom-range-thumb-border;
+    @include border-radius($custom-range-thumb-border-radius);
+    @include box-shadow($custom-range-thumb-box-shadow);
+    @include transition($custom-forms-transition);
+    appearance: none;
+
+    &:active {
+      @include gradient-bg($custom-range-thumb-active-bg);
+    }
+  }
+
+  &::-ms-track {
+    width: $custom-range-track-width;
+    height: $custom-range-track-height;
+    color: transparent;
+    cursor: $custom-range-track-cursor;
+    background-color: transparent;
+    border-color: transparent;
+    border-width: $custom-range-thumb-height / 2;
+    @include box-shadow($custom-range-track-box-shadow);
+  }
+
+  &::-ms-fill-lower {
+    background-color: $custom-range-track-bg;
+    @include border-radius($custom-range-track-border-radius);
+  }
+
+  &::-ms-fill-upper {
+    margin-right: 15px; // arbitrary?
+    background-color: $custom-range-track-bg;
+    @include border-radius($custom-range-track-border-radius);
+  }
+
+  &:disabled {
+    &::-webkit-slider-thumb {
+      background-color: $custom-range-thumb-disabled-bg;
+    }
+
+    &::-webkit-slider-runnable-track {
+      cursor: default;
+    }
+
+    &::-moz-range-thumb {
+      background-color: $custom-range-thumb-disabled-bg;
+    }
+
+    &::-moz-range-track {
+      cursor: default;
+    }
+
+    &::-ms-thumb {
+      background-color: $custom-range-thumb-disabled-bg;
+    }
+  }
+}
+
+.custom-control-label::before,
+.custom-file-label,
+.custom-select {
+  @include transition($custom-forms-transition);
+}

styles/bootstrap/_dropdown.scss

@@ -1,192 +1,192 @@
-// The dropdown wrapper (`<div>`)
-.dropup,
-.dropright,
-.dropdown,
-.dropleft {
-  position: relative;
-}
-
-.dropdown-toggle {
-  white-space: nowrap;
-
-  // Generate the caret automatically
-  @include caret();
-}
-
-// The dropdown menu
-.dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: $zindex-dropdown;
-  display: none; // none by default, but block on "open" of the menu
-  float: left;
-  min-width: $dropdown-min-width;
-  padding: $dropdown-padding-y $dropdown-padding-x;
-  margin: $dropdown-spacer 0 0; // override default ul
-  @include font-size($dropdown-font-size);
-  color: $dropdown-color;
-  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
-  list-style: none;
-  background-color: $dropdown-bg;
-  background-clip: padding-box;
-  border: $dropdown-border-width solid $dropdown-border-color;
-  @include border-radius($dropdown-border-radius);
-  @include box-shadow($dropdown-box-shadow);
-}
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    .dropdown-menu#{$infix}-left {
-      right: auto;
-      left: 0;
-    }
-
-    .dropdown-menu#{$infix}-right {
-      right: 0;
-      left: auto;
-    }
-  }
-}
-
-// Allow for dropdowns to go bottom up (aka, dropup-menu)
-// Just add .dropup after the standard .dropdown class and you're set.
-.dropup {
-  .dropdown-menu {
-    top: auto;
-    bottom: 100%;
-    margin-top: 0;
-    margin-bottom: $dropdown-spacer;
-  }
-
-  .dropdown-toggle {
-    @include caret(up);
-  }
-}
-
-.dropright {
-  .dropdown-menu {
-    top: 0;
-    right: auto;
-    left: 100%;
-    margin-top: 0;
-    margin-left: $dropdown-spacer;
-  }
-
-  .dropdown-toggle {
-    @include caret(right);
-    &::after {
-      vertical-align: 0;
-    }
-  }
-}
-
-.dropleft {
-  .dropdown-menu {
-    top: 0;
-    right: 100%;
-    left: auto;
-    margin-top: 0;
-    margin-right: $dropdown-spacer;
-  }
-
-  .dropdown-toggle {
-    @include caret(left);
-    &::before {
-      vertical-align: 0;
-    }
-  }
-}
-
-// When Popper is enabled, reset the basic dropdown position
-// stylelint-disable-next-line no-duplicate-selectors
-.dropdown-menu {
-  &[x-placement^="top"],
-  &[x-placement^="right"],
-  &[x-placement^="bottom"],
-  &[x-placement^="left"] {
-    right: auto;
-    bottom: auto;
-  }
-}
-
-// Dividers (basically an `<hr>`) within the dropdown
-.dropdown-divider {
-  @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);
-}
-
-// Links, buttons, and more within the dropdown menu
-//
-// `<button>`-specific styles are denoted with `// For <button>s`
-.dropdown-item {
-  display: block;
-  width: 100%; // For `<button>`s
-  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-  clear: both;
-  font-weight: $font-weight-normal;
-  color: $dropdown-link-color;
-  text-align: inherit; // For `<button>`s
-  text-decoration: if($link-decoration == none, null, none);
-  white-space: nowrap; // prevent links from randomly breaking onto new lines
-  background-color: transparent; // For `<button>`s
-  border: 0; // For `<button>`s
-
-  // Prevent dropdown overflow if there's no padding
-  // See https://github.com/twbs/bootstrap/pull/27703
-  @if $dropdown-padding-y == 0 {
-    &:first-child {
-      @include border-top-radius($dropdown-inner-border-radius);
-    }
-
-    &:last-child {
-      @include border-bottom-radius($dropdown-inner-border-radius);
-    }
-  }
-
-  @include hover-focus() {
-    color: $dropdown-link-hover-color;
-    text-decoration: none;
-    @include gradient-bg($dropdown-link-hover-bg);
-  }
-
-  &.active,
-  &:active {
-    color: $dropdown-link-active-color;
-    text-decoration: none;
-    @include gradient-bg($dropdown-link-active-bg);
-  }
-
-  &.disabled,
-  &:disabled {
-    color: $dropdown-link-disabled-color;
-    pointer-events: none;
-    background-color: transparent;
-    // Remove CSS gradients if they're enabled
-    @if $enable-gradients {
-      background-image: none;
-    }
-  }
-}
-
-.dropdown-menu.show {
-  display: block;
-}
-
-// Dropdown section headers
-.dropdown-header {
-  display: block;
-  padding: $dropdown-header-padding;
-  margin-bottom: 0; // for use with heading elements
-  @include font-size($font-size-sm);
-  color: $dropdown-header-color;
-  white-space: nowrap; // as with > li > a
-}
-
-// Dropdown text
-.dropdown-item-text {
-  display: block;
-  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-  color: $dropdown-link-color;
-}
+// The dropdown wrapper (`<div>`)
+.dropup,
+.dropright,
+.dropdown,
+.dropleft {
+  position: relative;
+}
+
+.dropdown-toggle {
+  white-space: nowrap;
+
+  // Generate the caret automatically
+  @include caret();
+}
+
+// The dropdown menu
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: $zindex-dropdown;
+  display: none; // none by default, but block on "open" of the menu
+  float: left;
+  min-width: $dropdown-min-width;
+  padding: $dropdown-padding-y $dropdown-padding-x;
+  margin: $dropdown-spacer 0 0; // override default ul
+  @include font-size($dropdown-font-size);
+  color: $dropdown-color;
+  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+  list-style: none;
+  background-color: $dropdown-bg;
+  background-clip: padding-box;
+  border: $dropdown-border-width solid $dropdown-border-color;
+  @include border-radius($dropdown-border-radius);
+  @include box-shadow($dropdown-box-shadow);
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .dropdown-menu#{$infix}-left {
+      right: auto;
+      left: 0;
+    }
+
+    .dropdown-menu#{$infix}-right {
+      right: 0;
+      left: auto;
+    }
+  }
+}
+
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// Just add .dropup after the standard .dropdown class and you're set.
+.dropup {
+  .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: $dropdown-spacer;
+  }
+
+  .dropdown-toggle {
+    @include caret(up);
+  }
+}
+
+.dropright {
+  .dropdown-menu {
+    top: 0;
+    right: auto;
+    left: 100%;
+    margin-top: 0;
+    margin-left: $dropdown-spacer;
+  }
+
+  .dropdown-toggle {
+    @include caret(right);
+    &::after {
+      vertical-align: 0;
+    }
+  }
+}
+
+.dropleft {
+  .dropdown-menu {
+    top: 0;
+    right: 100%;
+    left: auto;
+    margin-top: 0;
+    margin-right: $dropdown-spacer;
+  }
+
+  .dropdown-toggle {
+    @include caret(left);
+    &::before {
+      vertical-align: 0;
+    }
+  }
+}
+
+// When Popper is enabled, reset the basic dropdown position
+// stylelint-disable-next-line no-duplicate-selectors
+.dropdown-menu {
+  &[x-placement^="top"],
+  &[x-placement^="right"],
+  &[x-placement^="bottom"],
+  &[x-placement^="left"] {
+    right: auto;
+    bottom: auto;
+  }
+}
+
+// Dividers (basically an `<hr>`) within the dropdown
+.dropdown-divider {
+  @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);
+}
+
+// Links, buttons, and more within the dropdown menu
+//
+// `<button>`-specific styles are denoted with `// For <button>s`
+.dropdown-item {
+  display: block;
+  width: 100%; // For `<button>`s
+  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+  clear: both;
+  font-weight: $font-weight-normal;
+  color: $dropdown-link-color;
+  text-align: inherit; // For `<button>`s
+  text-decoration: if($link-decoration == none, null, none);
+  white-space: nowrap; // prevent links from randomly breaking onto new lines
+  background-color: transparent; // For `<button>`s
+  border: 0; // For `<button>`s
+
+  // Prevent dropdown overflow if there's no padding
+  // See https://github.com/twbs/bootstrap/pull/27703
+  @if $dropdown-padding-y == 0 {
+    &:first-child {
+      @include border-top-radius($dropdown-inner-border-radius);
+    }
+
+    &:last-child {
+      @include border-bottom-radius($dropdown-inner-border-radius);
+    }
+  }
+
+  @include hover-focus() {
+    color: $dropdown-link-hover-color;
+    text-decoration: none;
+    @include gradient-bg($dropdown-link-hover-bg);
+  }
+
+  &.active,
+  &:active {
+    color: $dropdown-link-active-color;
+    text-decoration: none;
+    @include gradient-bg($dropdown-link-active-bg);
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $dropdown-link-disabled-color;
+    pointer-events: none;
+    background-color: transparent;
+    // Remove CSS gradients if they're enabled
+    @if $enable-gradients {
+      background-image: none;
+    }
+  }
+}
+
+.dropdown-menu.show {
+  display: block;
+}
+
+// Dropdown section headers
+.dropdown-header {
+  display: block;
+  padding: $dropdown-header-padding;
+  margin-bottom: 0; // for use with heading elements
+  @include font-size($font-size-sm);
+  color: $dropdown-header-color;
+  white-space: nowrap; // as with > li > a
+}
+
+// Dropdown text
+.dropdown-item-text {
+  display: block;
+  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+  color: $dropdown-link-color;
+}

styles/bootstrap/_forms.scss

@@ -1,347 +1,348 @@
-// stylelint-disable selector-no-qualifying-type
-
-//
-// Textual form controls
-//
-
-.form-control {
-  display: block;
-  width: 100%;
-  height: $input-height;
-  padding: $input-padding-y $input-padding-x;
-  font-family: $input-font-family;
-  @include font-size($input-font-size);
-  font-weight: $input-font-weight;
-  line-height: $input-line-height;
-  color: $input-color;
-  background-color: $input-bg;
-  background-clip: padding-box;
-  border: $input-border-width solid $input-border-color;
-
-  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
-  @include border-radius($input-border-radius, 0);
-
-  @include box-shadow($input-box-shadow);
-  @include transition($input-transition);
-
-  // Unstyle the caret on `<select>`s in IE10+.
-  &::-ms-expand {
-    background-color: transparent;
-    border: 0;
-  }
-
-  // Remove select outline from select box in FF
-  &:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 $input-color;
-  }
-
-  // Customize the `:focus` state to imitate native WebKit styles.
-  @include form-control-focus($ignore-warning: true);
-
-  // Placeholder
-  &::placeholder {
-    color: $input-placeholder-color;
-    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
-    opacity: 1;
-  }
-
-  // Disabled and read-only inputs
-  //
-  // HTML5 says that controls under a fieldset > legend:first-child won't be
-  // disabled if the fieldset is disabled. Due to implementation difficulty, we
-  // don't honor that edge case; we style them as disabled anyway.
-  &:disabled,
-  &[readonly] {
-    background-color: $input-disabled-bg;
-    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
-    opacity: 1;
-  }
-}
-
-input[type="date"],
-input[type="time"],
-input[type="datetime-local"],
-input[type="month"] {
-  &.form-control {
-    appearance: none; // Fix appearance for date inputs in Safari
-  }
-}
-
-select.form-control {
-  &:focus::-ms-value {
-    // Suppress the nested default white text on blue background highlight given to
-    // the selected option text when the (still closed) <select> receives focus
-    // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
-    // match the appearance of the native widget.
-    // See https://github.com/twbs/bootstrap/issues/19398.
-    color: $input-color;
-    background-color: $input-bg;
-  }
-}
-
-// Make file inputs better match text inputs by forcing them to new lines.
-.form-control-file,
-.form-control-range {
-  display: block;
-  width: 100%;
-}
-
-
-//
-// Labels
-//
-
-// For use with horizontal and inline forms, when you need the label (or legend)
-// text to align with the form controls.
-.col-form-label {
-  padding-top: add($input-padding-y, $input-border-width);
-  padding-bottom: add($input-padding-y, $input-border-width);
-  margin-bottom: 0; // Override the `<label>/<legend>` default
-  @include font-size(inherit); // Override the `<legend>` default
-  line-height: $input-line-height;
-}
-
-.col-form-label-lg {
-  padding-top: add($input-padding-y-lg, $input-border-width);
-  padding-bottom: add($input-padding-y-lg, $input-border-width);
-  @include font-size($input-font-size-lg);
-  line-height: $input-line-height-lg;
-}
-
-.col-form-label-sm {
-  padding-top: add($input-padding-y-sm, $input-border-width);
-  padding-bottom: add($input-padding-y-sm, $input-border-width);
-  @include font-size($input-font-size-sm);
-  line-height: $input-line-height-sm;
-}
-
-
-// Readonly controls as plain text
-//
-// Apply class to a readonly input to make it appear like regular plain
-// text (without any border, background color, focus indicator)
-
-.form-control-plaintext {
-  display: block;
-  width: 100%;
-  padding: $input-padding-y 0;
-  margin-bottom: 0; // match inputs if this class comes on inputs with default margins
-  @include font-size($input-font-size);
-  line-height: $input-line-height;
-  color: $input-plaintext-color;
-  background-color: transparent;
-  border: solid transparent;
-  border-width: $input-border-width 0;
-
-  &.form-control-sm,
-  &.form-control-lg {
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
-
-
-// Form control sizing
-//
-// Build on `.form-control` with modifier classes to decrease or increase the
-// height and font-size of form controls.
-//
-// Repeated in `_input_group.scss` to avoid Sass extend issues.
-
-.form-control-sm {
-  height: $input-height-sm;
-  padding: $input-padding-y-sm $input-padding-x-sm;
-  @include font-size($input-font-size-sm);
-  line-height: $input-line-height-sm;
-  @include border-radius($input-border-radius-sm);
-}
-
-.form-control-lg {
-  height: $input-height-lg;
-  padding: $input-padding-y-lg $input-padding-x-lg;
-  @include font-size($input-font-size-lg);
-  line-height: $input-line-height-lg;
-  @include border-radius($input-border-radius-lg);
-}
-
-// stylelint-disable-next-line no-duplicate-selectors
-select.form-control {
-  &[size],
-  &[multiple] {
-    height: auto;
-  }
-}
-
-textarea.form-control {
-  height: auto;
-}
-
-// Form groups
-//
-// Designed to help with the organization and spacing of vertical forms. For
-// horizontal forms, use the predefined grid classes.
-
-.form-group {
-  margin-bottom: $form-group-margin-bottom;
-}
-
-.form-text {
-  display: block;
-  margin-top: $form-text-margin-top;
-}
-
-
-// Form grid
-//
-// Special replacement for our grid system's `.row` for tighter form layouts.
-
-.form-row {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -$form-grid-gutter-width / 2;
-  margin-left: -$form-grid-gutter-width / 2;
-
-  > .col,
-  > [class*="col-"] {
-    padding-right: $form-grid-gutter-width / 2;
-    padding-left: $form-grid-gutter-width / 2;
-  }
-}
-
-
-// Checkboxes and radios
-//
-// Indent the labels to position radios/checkboxes as hanging controls.
-
-.form-check {
-  position: relative;
-  display: block;
-  padding-left: $form-check-input-gutter;
-}
-
-.form-check-input {
-  position: absolute;
-  margin-top: $form-check-input-margin-y;
-  margin-left: -$form-check-input-gutter;
-
-  // Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
-  &[disabled] ~ .form-check-label,
-  &:disabled ~ .form-check-label {
-    color: $text-muted;
-  }
-}
-
-.form-check-label {
-  margin-bottom: 0; // Override default `<label>` bottom margin
-}
-
-.form-check-inline {
-  display: inline-flex;
-  align-items: center;
-  padding-left: 0; // Override base .form-check
-  margin-right: $form-check-inline-margin-x;
-
-  // Undo .form-check-input defaults and add some `margin-right`.
-  .form-check-input {
-    position: static;
-    margin-top: 0;
-    margin-right: $form-check-inline-input-margin-x;
-    margin-left: 0;
-  }
-}
-
-
-// Form validation
-//
-// Provide feedback to users when form field values are valid or invalid. Works
-// primarily for client-side validation via scoped `:invalid` and `:valid`
-// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
-// server side validation.
-
-@each $state, $data in $form-validation-states {
-  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
-}
-
-// Inline forms
-//
-// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
-// forms begin stacked on extra small (mobile) devices and then go inline when
-// viewports reach <768px.
-//
-// Requires wrapping inputs and labels with `.form-group` for proper display of
-// default HTML form controls and our custom form controls (e.g., input groups).
-
-.form-inline {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
-
-  // Because we use flex, the initial sizing of checkboxes is collapsed and
-  // doesn't occupy the full-width (which is what we want for xs grid tier),
-  // so we force that here.
-  .form-check {
-    width: 100%;
-  }
-
-  // Kick in the inline
-  @include media-breakpoint-up(sm) {
-    label {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 0;
-    }
-
-    // Inline-block all the things for "inline"
-    .form-group {
-      display: flex;
-      flex: 0 0 auto;
-      flex-flow: row wrap;
-      align-items: center;
-      margin-bottom: 0;
-    }
-
-    // Allow folks to *not* use `.form-group`
-    .form-control {
-      display: inline-block;
-      width: auto; // Prevent labels from stacking above inputs in `.form-group`
-      vertical-align: middle;
-    }
-
-    // Make static controls behave like regular ones
-    .form-control-plaintext {
-      display: inline-block;
-    }
-
-    .input-group,
-    .custom-select {
-      width: auto;
-    }
-
-    // Remove default margin on radios/checkboxes that were used for stacking, and
-    // then undo the floating of radios and checkboxes to match.
-    .form-check {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: auto;
-      padding-left: 0;
-    }
-    .form-check-input {
-      position: relative;
-      flex-shrink: 0;
-      margin-top: 0;
-      margin-right: $form-check-input-margin-x;
-      margin-left: 0;
-    }
-
-    .custom-control {
-      align-items: center;
-      justify-content: center;
-    }
-    .custom-control-label {
-      margin-bottom: 0;
-    }
-  }
-}
+// stylelint-disable selector-no-qualifying-type
+
+//
+// Textual form controls
+//
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: $input-height;
+  padding: $input-padding-y $input-padding-x;
+  font-family: $input-font-family;
+  @include font-size($input-font-size);
+  font-weight: $input-font-weight;
+  line-height: $input-line-height;
+  color: $input-color;
+  background-color: $input-bg;
+  background-clip: padding-box;
+  border: $input-border-width solid $input-border-color;
+
+  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+  @include border-radius($input-border-radius, 0);
+
+  @include box-shadow($input-box-shadow);
+  @include transition($input-transition);
+
+  // Unstyle the caret on `<select>`s in IE10+.
+  &::-ms-expand {
+    background-color: transparent;
+    border: 0;
+  }
+
+  // Remove select outline from select box in FF
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 $input-color;
+  }
+
+  // Customize the `:focus` state to imitate native WebKit styles.
+  @include form-control-focus($ignore-warning: true);
+
+  // Placeholder
+  &::placeholder {
+    color: $input-placeholder-color;
+    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+    opacity: 1;
+  }
+
+  // Disabled and read-only inputs
+  //
+  // HTML5 says that controls under a fieldset > legend:first-child won't be
+  // disabled if the fieldset is disabled. Due to implementation difficulty, we
+  // don't honor that edge case; we style them as disabled anyway.
+  &:disabled,
+  &[readonly] {
+    background-color: $input-disabled-bg;
+    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+    opacity: 1;
+  }
+}
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  &.form-control {
+    appearance: none; // Fix appearance for date inputs in Safari
+  }
+}
+
+select.form-control {
+  &:focus::-ms-value {
+    // Suppress the nested default white text on blue background highlight given to
+    // the selected option text when the (still closed) <select> receives focus
+    // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
+    // match the appearance of the native widget.
+    // See https://github.com/twbs/bootstrap/issues/19398.
+    color: $input-color;
+    background-color: $input-bg;
+  }
+}
+
+// Make file inputs better match text inputs by forcing them to new lines.
+.form-control-file,
+.form-control-range {
+  display: block;
+  width: 100%;
+}
+
+
+//
+// Labels
+//
+
+// For use with horizontal and inline forms, when you need the label (or legend)
+// text to align with the form controls.
+.col-form-label {
+  padding-top: add($input-padding-y, $input-border-width);
+  padding-bottom: add($input-padding-y, $input-border-width);
+  margin-bottom: 0; // Override the `<label>/<legend>` default
+  @include font-size(inherit); // Override the `<legend>` default
+  line-height: $input-line-height;
+  margin-bottom: 15px;
+}
+
+.col-form-label-lg {
+  padding-top: add($input-padding-y-lg, $input-border-width);
+  padding-bottom: add($input-padding-y-lg, $input-border-width);
+  @include font-size($input-font-size-lg);
+  line-height: $input-line-height-lg;
+}
+
+.col-form-label-sm {
+  padding-top: add($input-padding-y-sm, $input-border-width);
+  padding-bottom: add($input-padding-y-sm, $input-border-width);
+  @include font-size($input-font-size-sm);
+  line-height: $input-line-height-sm;
+}
+
+
+// Readonly controls as plain text
+//
+// Apply class to a readonly input to make it appear like regular plain
+// text (without any border, background color, focus indicator)
+
+.form-control-plaintext {
+  display: block;
+  width: 100%;
+  padding: $input-padding-y 0;
+  margin-bottom: 0; // match inputs if this class comes on inputs with default margins
+  @include font-size($input-font-size);
+  line-height: $input-line-height;
+  color: $input-plaintext-color;
+  background-color: transparent;
+  border: solid transparent;
+  border-width: $input-border-width 0;
+
+  &.form-control-sm,
+  &.form-control-lg {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+
+// Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// Repeated in `_input_group.scss` to avoid Sass extend issues.
+
+.form-control-sm {
+  height: $input-height-sm;
+  padding: $input-padding-y-sm $input-padding-x-sm;
+  @include font-size($input-font-size-sm);
+  line-height: $input-line-height-sm;
+  @include border-radius($input-border-radius-sm);
+}
+
+.form-control-lg {
+  height: $input-height-lg;
+  padding: $input-padding-y-lg $input-padding-x-lg;
+  @include font-size($input-font-size-lg);
+  line-height: $input-line-height-lg;
+  @include border-radius($input-border-radius-lg);
+}
+
+// stylelint-disable-next-line no-duplicate-selectors
+select.form-control {
+  &[size],
+  &[multiple] {
+    height: auto;
+  }
+}
+
+textarea.form-control {
+  height: auto;
+}
+
+// Form groups
+//
+// Designed to help with the organization and spacing of vertical forms. For
+// horizontal forms, use the predefined grid classes.
+
+.form-group {
+  margin-bottom: $form-group-margin-bottom;
+}
+
+.form-text {
+  display: block;
+  margin-top: $form-text-margin-top;
+}
+
+
+// Form grid
+//
+// Special replacement for our grid system's `.row` for tighter form layouts.
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -$form-grid-gutter-width / 2;
+  margin-left: -$form-grid-gutter-width / 2;
+
+  > .col,
+  > [class*="col-"] {
+    padding-right: $form-grid-gutter-width / 2;
+    padding-left: $form-grid-gutter-width / 2;
+  }
+}
+
+
+// Checkboxes and radios
+//
+// Indent the labels to position radios/checkboxes as hanging controls.
+
+.form-check {
+  position: relative;
+  display: block;
+  padding-left: $form-check-input-gutter;
+}
+
+.form-check-input {
+  position: absolute;
+  margin-top: $form-check-input-margin-y;
+  margin-left: -$form-check-input-gutter;
+
+  // Use [disabled] and :disabled for workaround https://github.com/twbs/bootstrap/issues/28247
+  &[disabled] ~ .form-check-label,
+  &:disabled ~ .form-check-label {
+    color: $text-muted;
+  }
+}
+
+.form-check-label {
+  margin-bottom: 0; // Override default `<label>` bottom margin
+}
+
+.form-check-inline {
+  display: inline-flex;
+  align-items: center;
+  padding-left: 0; // Override base .form-check
+  margin-right: $form-check-inline-margin-x;
+
+  // Undo .form-check-input defaults and add some `margin-right`.
+  .form-check-input {
+    position: static;
+    margin-top: 0;
+    margin-right: $form-check-inline-input-margin-x;
+    margin-left: 0;
+  }
+}
+
+
+// Form validation
+//
+// Provide feedback to users when form field values are valid or invalid. Works
+// primarily for client-side validation via scoped `:invalid` and `:valid`
+// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
+// server side validation.
+
+@each $state, $data in $form-validation-states {
+  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
+}
+
+// Inline forms
+//
+// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
+// forms begin stacked on extra small (mobile) devices and then go inline when
+// viewports reach <768px.
+//
+// Requires wrapping inputs and labels with `.form-group` for proper display of
+// default HTML form controls and our custom form controls (e.g., input groups).
+
+.form-inline {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
+
+  // Because we use flex, the initial sizing of checkboxes is collapsed and
+  // doesn't occupy the full-width (which is what we want for xs grid tier),
+  // so we force that here.
+  .form-check {
+    width: 100%;
+  }
+
+  // Kick in the inline
+  @include media-breakpoint-up(sm) {
+    label {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 0;
+    }
+
+    // Inline-block all the things for "inline"
+    .form-group {
+      display: flex;
+      flex: 0 0 auto;
+      flex-flow: row wrap;
+      align-items: center;
+      margin-bottom: 0;
+    }
+
+    // Allow folks to *not* use `.form-group`
+    .form-control {
+      display: inline-block;
+      width: auto; // Prevent labels from stacking above inputs in `.form-group`
+      vertical-align: middle;
+    }
+
+    // Make static controls behave like regular ones
+    .form-control-plaintext {
+      display: inline-block;
+    }
+
+    .input-group,
+    .custom-select {
+      width: auto;
+    }
+
+    // Remove default margin on radios/checkboxes that were used for stacking, and
+    // then undo the floating of radios and checkboxes to match.
+    .form-check {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: auto;
+      padding-left: 0;
+    }
+    .form-check-input {
+      position: relative;
+      flex-shrink: 0;
+      margin-top: 0;
+      margin-right: $form-check-input-margin-x;
+      margin-left: 0;
+    }
+
+    .custom-control {
+      align-items: center;
+      justify-content: center;
+    }
+    .custom-control-label {
+      margin-bottom: 0;
+    }
+  }
+}

styles/bootstrap/_functions.scss

@@ -1,144 +1,144 @@
-// Bootstrap functions
-//
-// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
-
-// Ascending
-// Used to evaluate Sass maps like our grid breakpoints.
-@mixin _assert-ascending($map, $map-name) {
-  $prev-key: null;
-  $prev-num: null;
-  @each $key, $num in $map {
-    @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
-      // Do nothing
-    } @else if not comparable($prev-num, $num) {
-      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
-    } @else if $prev-num >= $num {
-      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
-    }
-    $prev-key: $key;
-    $prev-num: $num;
-  }
-}
-
-// Starts at zero
-// Used to ensure the min-width of the lowest breakpoint starts at 0.
-@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
-  @if length($map) > 0 {
-    $values: map-values($map);
-    $first-value: nth($values, 1);
-    @if $first-value != 0 {
-      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
-    }
-  }
-}
-
-// Replace `$search` with `$replace` in `$string`
-// Used on our SVG icon backgrounds for custom forms.
-//
-// @author Hugo Giraudel
-// @param {String} $string - Initial string
-// @param {String} $search - Substring to replace
-// @param {String} $replace ('') - New value
-// @return {String} - Updated string
-@function str-replace($string, $search, $replace: "") {
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-
-  @return $string;
-}
-
-// See https://codepen.io/kevinweber/pen/dXWoRw
-//
-// Requires the use of quotes around data URIs.
-
-@function escape-svg($string) {
-  @if str-index($string, "data:image/svg+xml") {
-    @each $char, $encoded in $escaped-characters {
-      // Do not escape the url brackets
-      @if str-index($string, "url(") == 1 {
-        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
-      } @else {
-        $string: str-replace($string, $char, $encoded);
-      }
-    }
-  }
-
-  @return $string;
-}
-
-// Color contrast
-@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
-  $r: red($color);
-  $g: green($color);
-  $b: blue($color);
-
-  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
-
-  @if ($yiq >= $yiq-contrasted-threshold) {
-    @return $dark;
-  } @else {
-    @return $light;
-  }
-}
-
-// Retrieve color Sass maps
-@function color($key: "blue") {
-  @return map-get($colors, $key);
-}
-
-@function theme-color($key: "primary") {
-  @return map-get($theme-colors, $key);
-}
-
-@function gray($key: "100") {
-  @return map-get($grays, $key);
-}
-
-// Request a theme color level
-@function theme-color-level($color-name: "primary", $level: 0) {
-  $color: theme-color($color-name);
-  $color-base: if($level > 0, $black, $white);
-  $level: abs($level);
-
-  @return mix($color-base, $color, $level * $theme-color-interval);
-}
-
-// Return valid calc
-@function add($value1, $value2, $return-calc: true) {
-  @if $value1 == null {
-    @return $value2;
-  }
-
-  @if $value2 == null {
-    @return $value1;
-  }
-
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
-    @return $value1 + $value2;
-  }
-
-  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
-}
-
-@function subtract($value1, $value2, $return-calc: true) {
-  @if $value1 == null and $value2 == null {
-    @return null;
-  }
-
-  @if $value1 == null {
-    @return -$value2;
-  }
-
-  @if $value2 == null {
-    @return $value1;
-  }
-
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
-    @return $value1 - $value2;
-  }
-
-  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
-}
+// Bootstrap functions
+//
+// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin _assert-ascending($map, $map-name) {
+  $prev-key: null;
+  $prev-num: null;
+  @each $key, $num in $map {
+    @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
+      // Do nothing
+    } @else if not comparable($prev-num, $num) {
+      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    } @else if $prev-num >= $num {
+      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    }
+    $prev-key: $key;
+    $prev-num: $num;
+  }
+}
+
+// Starts at zero
+// Used to ensure the min-width of the lowest breakpoint starts at 0.
+@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
+  @if length($map) > 0 {
+    $values: map-values($map);
+    $first-value: nth($values, 1);
+    @if $first-value != 0 {
+      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
+    }
+  }
+}
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+//
+// Requires the use of quotes around data URIs.
+
+@function escape-svg($string) {
+  @if str-index($string, "data:image/svg+xml") {
+    @each $char, $encoded in $escaped-characters {
+      // Do not escape the url brackets
+      @if str-index($string, "url(") == 1 {
+        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
+      } @else {
+        $string: str-replace($string, $char, $encoded);
+      }
+    }
+  }
+
+  @return $string;
+}
+
+// Color contrast
+@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+  @if ($yiq >= $yiq-contrasted-threshold) {
+    @return $dark;
+  } @else {
+    @return $light;
+  }
+}
+
+// Retrieve color Sass maps
+@function color($key: "blue") {
+  @return map-get($colors, $key);
+}
+
+@function theme-color($key: "primary") {
+  @return map-get($theme-colors, $key);
+}
+
+@function gray($key: "100") {
+  @return map-get($grays, $key);
+}
+
+// Request a theme color level
+@function theme-color-level($color-name: "primary", $level: 0) {
+  $color: theme-color($color-name);
+  $color-base: if($level > 0, $black, $white);
+  $level: abs($level);
+
+  @return mix($color-base, $color, $level * $theme-color-interval);
+}
+
+// Return valid calc
+@function add($value1, $value2, $return-calc: true) {
+  @if $value1 == null {
+    @return $value2;
+  }
+
+  @if $value2 == null {
+    @return $value1;
+  }
+
+  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+    @return $value1 + $value2;
+  }
+
+  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
+}
+
+@function subtract($value1, $value2, $return-calc: true) {
+  @if $value1 == null and $value2 == null {
+    @return null;
+  }
+
+  @if $value1 == null {
+    @return -$value2;
+  }
+
+  @if $value2 == null {
+    @return $value1;
+  }
+
+  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+    @return $value1 - $value2;
+  }
+
+  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
+}

styles/bootstrap/_grid.scss

@@ -1,73 +1,73 @@
-// Container widths
-//
-// Set the container width, and override it for fixed navbars in media queries.
-
-@if $enable-grid-classes {
-  // Single container class with breakpoint max-widths
-  .container,
-  // 100% wide container at all breakpoints
-  .container-fluid {
-    @include make-container();
-  }
-
-  // Responsive containers that are 100% wide until a breakpoint
-  @each $breakpoint, $container-max-width in $container-max-widths {
-    .container-#{$breakpoint} {
-      @extend .container-fluid;
-    }
-
-    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
-      %responsive-container-#{$breakpoint} {
-        max-width: $container-max-width;
-      }
-
-      // Extend each breakpoint which is smaller or equal to the current breakpoint
-      $extend-breakpoint: true;
-
-      @each $name, $width in $grid-breakpoints {
-        @if ($extend-breakpoint) {
-          .container#{breakpoint-infix($name, $grid-breakpoints)} {
-            @extend %responsive-container-#{$breakpoint};
-          }
-
-          // Once the current breakpoint is reached, stop extending
-          @if ($breakpoint == $name) {
-            $extend-breakpoint: false;
-          }
-        }
-      }
-    }
-  }
-}
-
-
-// Row
-//
-// Rows contain your columns.
-
-@if $enable-grid-classes {
-  .row {
-    @include make-row();
-  }
-
-  // Remove the negative margin from default .row, then the horizontal padding
-  // from all immediate children columns (to prevent runaway style inheritance).
-  .no-gutters {
-    margin-right: 0;
-    margin-left: 0;
-
-    > .col,
-    > [class*="col-"] {
-      padding-right: 0;
-      padding-left: 0;
-    }
-  }
-}
-
-// Columns
-//
-// Common styles for small and large grid columns
-
-@if $enable-grid-classes {
-  @include make-grid-columns();
-}
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+
+@if $enable-grid-classes {
+  // Single container class with breakpoint max-widths
+  .container,
+  // 100% wide container at all breakpoints
+  .container-fluid {
+    @include make-container();
+  }
+
+  // Responsive containers that are 100% wide until a breakpoint
+  @each $breakpoint, $container-max-width in $container-max-widths {
+    .container-#{$breakpoint} {
+      @extend .container-fluid;
+    }
+
+    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+      %responsive-container-#{$breakpoint} {
+        max-width: $container-max-width;
+      }
+
+      // Extend each breakpoint which is smaller or equal to the current breakpoint
+      $extend-breakpoint: true;
+
+      @each $name, $width in $grid-breakpoints {
+        @if ($extend-breakpoint) {
+          .container#{breakpoint-infix($name, $grid-breakpoints)} {
+            @extend %responsive-container-#{$breakpoint};
+          }
+
+          // Once the current breakpoint is reached, stop extending
+          @if ($breakpoint == $name) {
+            $extend-breakpoint: false;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+// Row
+//
+// Rows contain your columns.
+
+@if $enable-grid-classes {
+  .row {
+    @include make-row();
+  }
+
+  // Remove the negative margin from default .row, then the horizontal padding
+  // from all immediate children columns (to prevent runaway style inheritance).
+  .no-gutters {
+    margin-right: 0;
+    margin-left: 0;
+
+    > .col,
+    > [class*="col-"] {
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
+}
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+@if $enable-grid-classes {
+  @include make-grid-columns();
+}

styles/bootstrap/_images.scss

@@ -1,42 +1,104 @@
-// Responsive images (ensure images don't scale beyond their parents)
-//
-// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
-// We previously tried the "images are responsive by default" approach in Bootstrap v2,
-// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
-// which weren't expecting the images within themselves to be involuntarily resized.
-// See also https://github.com/twbs/bootstrap/issues/18178
-.img-fluid {
-  @include img-fluid();
-}
-
-
-// Image thumbnails
-.img-thumbnail {
-  padding: $thumbnail-padding;
-  background-color: $thumbnail-bg;
-  border: $thumbnail-border-width solid $thumbnail-border-color;
-  @include border-radius($thumbnail-border-radius);
-  @include box-shadow($thumbnail-box-shadow);
-
-  // Keep them at most 100% wide
-  @include img-fluid();
-}
-
-//
-// Figures
-//
-
-.figure {
-  // Ensures the caption's text aligns with the image.
-  display: inline-block;
-}
-
-.figure-img {
-  margin-bottom: $spacer / 2;
-  line-height: 1;
-}
-
-.figure-caption {
-  @include font-size($figure-caption-font-size);
-  color: $figure-caption-color;
-}
+// Responsive images (ensure images don't scale beyond their parents)
+//
+// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
+// We previously tried the "images are responsive by default" approach in Bootstrap v2,
+// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
+// which weren't expecting the images within themselves to be involuntarily resized.
+// See also https://github.com/twbs/bootstrap/issues/18178
+.img-fluid {
+  position: relative;
+  @include img-fluid();
+  width: 72px;
+  height: 37px;
+}
+
+
+// Image thumbnails
+.img-thumbnail {
+  padding: $thumbnail-padding;
+  background-color: $thumbnail-bg;
+  border: $thumbnail-border-width solid $thumbnail-border-color;
+  @include border-radius($thumbnail-border-radius);
+  @include box-shadow($thumbnail-box-shadow);
+
+  // Keep them at most 100% wide
+  @include img-fluid();
+}
+
+//
+// Figures
+//
+
+.figure {
+  // Ensures the caption's text aligns with the image.
+  display: inline-block;
+}
+
+.figure-img {
+  margin-bottom: $spacer / 2;
+  line-height: 1;
+}
+
+.figure-caption {
+  @include font-size($figure-caption-font-size);
+  color: $figure-caption-color;
+}
+
+.icon-pemantauan{
+  width: 35px;
+  height: 35px;
+  margin-right: -20px;
+}
+
+.icon-buatlaporan{
+  width: 35px;
+  height: 35px;
+  margin-right: -20px;
+}
+
+.img-text-vputih{
+  width: 55px;
+  height: 20px;
+  margin-left: 10px;
+}
+.icon-triangle{
+  width: 20px;
+  margin-right: 15px;
+  margin-left: 15px;
+  border-radius: 5px;
+}
+.identitas-pelapor{
+  width: 830px;
+  height: 50px;
+}
+.icon-pemantauan {
+  width: 35px;
+  height: 35px;
+  margin-right: -20px; }
+
+.icon-buatlaporan {
+  width: 35px;
+  height: 35px;
+  margin-right: -20px; }
+
+.img-text-vputih {
+  width: 55px;
+  height: 20px;
+  margin-left: 10px; }
+
+.icon-triangle {
+  width: 20px;
+  margin-right: 10px;
+  margin-left: 15px; }
+
+.identitas-pelapor {
+  width: 830px;
+  height: 50px; }
+
+  .img-fluid {
+    position: relative;
+    max-width: 100%;
+    height: auto;
+    width: 72px;
+    height: 37px; }
+  

styles/bootstrap/_input-group.scss

@@ -1,208 +1,208 @@
-// stylelint-disable selector-no-qualifying-type
-
-//
-// Base styles
-//
-
-.input-group {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap; // For form validation feedback
-  align-items: stretch;
-  width: 100%;
-
-  > .form-control,
-  > .form-control-plaintext,
-  > .custom-select,
-  > .custom-file {
-    position: relative; // For focus state's z-index
-    flex: 1 1 auto;
-    width: 1%;
-    min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
-    margin-bottom: 0;
-
-    + .form-control,
-    + .custom-select,
-    + .custom-file {
-      margin-left: -$input-border-width;
-    }
-  }
-
-  // Bring the "active" form control to the top of surrounding elements
-  > .form-control:focus,
-  > .custom-select:focus,
-  > .custom-file .custom-file-input:focus ~ .custom-file-label {
-    z-index: 3;
-  }
-
-  // Bring the custom file input above the label
-  > .custom-file .custom-file-input:focus {
-    z-index: 4;
-  }
-
-  > .form-control,
-  > .custom-select {
-    &:not(:first-child) { @include border-left-radius(0); }
-  }
-
-  // Custom file inputs have more complex markup, thus requiring different
-  // border-radius overrides.
-  > .custom-file {
-    display: flex;
-    align-items: center;
-
-    &:not(:last-child) .custom-file-label,
-    &:not(:first-child) .custom-file-label { @include border-left-radius(0); }
-  }
-
-  &:not(.has-validation) {
-    > .form-control:not(:last-child),
-    > .custom-select:not(:last-child),
-    > .custom-file:not(:last-child) .custom-file-label::after {
-      @include border-right-radius(0);
-    }
-  }
-
-  &.has-validation {
-    > .form-control:nth-last-child(n + 3),
-    > .custom-select:nth-last-child(n + 3),
-    > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
-      @include border-right-radius(0);
-    }
-  }
-}
-
-
-// Prepend and append
-//
-// While it requires one extra layer of HTML for each, dedicated prepend and
-// append elements allow us to 1) be less clever, 2) simplify our selectors, and
-// 3) support HTML5 form validation.
-
-.input-group-prepend,
-.input-group-append {
-  display: flex;
-
-  // Ensure buttons are always above inputs for more visually pleasing borders.
-  // This isn't needed for `.input-group-text` since it shares the same border-color
-  // as our inputs.
-  .btn {
-    position: relative;
-    z-index: 2;
-
-    &:focus {
-      z-index: 3;
-    }
-  }
-
-  .btn + .btn,
-  .btn + .input-group-text,
-  .input-group-text + .input-group-text,
-  .input-group-text + .btn {
-    margin-left: -$input-border-width;
-  }
-}
-
-.input-group-prepend { margin-right: -$input-border-width; }
-.input-group-append { margin-left: -$input-border-width; }
-
-
-// Textual addons
-//
-// Serves as a catch-all element for any text or radio/checkbox input you wish
-// to prepend or append to an input.
-
-.input-group-text {
-  display: flex;
-  align-items: center;
-  padding: $input-padding-y $input-padding-x;
-  margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
-  @include font-size($input-font-size); // Match inputs
-  font-weight: $font-weight-normal;
-  line-height: $input-line-height;
-  color: $input-group-addon-color;
-  text-align: center;
-  white-space: nowrap;
-  background-color: $input-group-addon-bg;
-  border: $input-border-width solid $input-group-addon-border-color;
-  @include border-radius($input-border-radius);
-
-  // Nuke default margins from checkboxes and radios to vertically center within.
-  input[type="radio"],
-  input[type="checkbox"] {
-    margin-top: 0;
-  }
-}
-
-
-// Sizing
-//
-// Remix the default form control sizing classes into new ones for easier
-// manipulation.
-
-.input-group-lg > .form-control:not(textarea),
-.input-group-lg > .custom-select {
-  height: $input-height-lg;
-}
-
-.input-group-lg > .form-control,
-.input-group-lg > .custom-select,
-.input-group-lg > .input-group-prepend > .input-group-text,
-.input-group-lg > .input-group-append > .input-group-text,
-.input-group-lg > .input-group-prepend > .btn,
-.input-group-lg > .input-group-append > .btn {
-  padding: $input-padding-y-lg $input-padding-x-lg;
-  @include font-size($input-font-size-lg);
-  line-height: $input-line-height-lg;
-  @include border-radius($input-border-radius-lg);
-}
-
-.input-group-sm > .form-control:not(textarea),
-.input-group-sm > .custom-select {
-  height: $input-height-sm;
-}
-
-.input-group-sm > .form-control,
-.input-group-sm > .custom-select,
-.input-group-sm > .input-group-prepend > .input-group-text,
-.input-group-sm > .input-group-append > .input-group-text,
-.input-group-sm > .input-group-prepend > .btn,
-.input-group-sm > .input-group-append > .btn {
-  padding: $input-padding-y-sm $input-padding-x-sm;
-  @include font-size($input-font-size-sm);
-  line-height: $input-line-height-sm;
-  @include border-radius($input-border-radius-sm);
-}
-
-.input-group-lg > .custom-select,
-.input-group-sm > .custom-select {
-  padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
-}
-
-
-// Prepend and append rounded corners
-//
-// These rulesets must come after the sizing ones to properly override sm and lg
-// border-radius values when extending. They're more specific than we'd like
-// with the `.input-group >` part, but without it, we cannot override the sizing.
-
-
-.input-group > .input-group-prepend > .btn,
-.input-group > .input-group-prepend > .input-group-text,
-.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
-.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
-.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
-.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
-.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
-.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
-  @include border-right-radius(0);
-}
-
-.input-group > .input-group-append > .btn,
-.input-group > .input-group-append > .input-group-text,
-.input-group > .input-group-prepend:not(:first-child) > .btn,
-.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
-.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
-.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
-  @include border-left-radius(0);
-}
+// stylelint-disable selector-no-qualifying-type
+
+//
+// Base styles
+//
+
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap; // For form validation feedback
+  align-items: stretch;
+  width: 100%;
+
+  > .form-control,
+  > .form-control-plaintext,
+  > .custom-select,
+  > .custom-file {
+    position: relative; // For focus state's z-index
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
+    margin-bottom: 0;
+
+    + .form-control,
+    + .custom-select,
+    + .custom-file {
+      margin-left: -$input-border-width;
+    }
+  }
+
+  // Bring the "active" form control to the top of surrounding elements
+  > .form-control:focus,
+  > .custom-select:focus,
+  > .custom-file .custom-file-input:focus ~ .custom-file-label {
+    z-index: 3;
+  }
+
+  // Bring the custom file input above the label
+  > .custom-file .custom-file-input:focus {
+    z-index: 4;
+  }
+
+  > .form-control,
+  > .custom-select {
+    &:not(:first-child) { @include border-left-radius(0); }
+  }
+
+  // Custom file inputs have more complex markup, thus requiring different
+  // border-radius overrides.
+  > .custom-file {
+    display: flex;
+    align-items: center;
+
+    &:not(:last-child) .custom-file-label,
+    &:not(:first-child) .custom-file-label { @include border-left-radius(0); }
+  }
+
+  &:not(.has-validation) {
+    > .form-control:not(:last-child),
+    > .custom-select:not(:last-child),
+    > .custom-file:not(:last-child) .custom-file-label::after {
+      @include border-right-radius(0);
+    }
+  }
+
+  &.has-validation {
+    > .form-control:nth-last-child(n + 3),
+    > .custom-select:nth-last-child(n + 3),
+    > .custom-file:nth-last-child(n + 3) .custom-file-label::after {
+      @include border-right-radius(0);
+    }
+  }
+}
+
+
+// Prepend and append
+//
+// While it requires one extra layer of HTML for each, dedicated prepend and
+// append elements allow us to 1) be less clever, 2) simplify our selectors, and
+// 3) support HTML5 form validation.
+
+.input-group-prepend,
+.input-group-append {
+  display: flex;
+
+  // Ensure buttons are always above inputs for more visually pleasing borders.
+  // This isn't needed for `.input-group-text` since it shares the same border-color
+  // as our inputs.
+  .btn {
+    position: relative;
+    z-index: 2;
+
+    &:focus {
+      z-index: 3;
+    }
+  }
+
+  .btn + .btn,
+  .btn + .input-group-text,
+  .input-group-text + .input-group-text,
+  .input-group-text + .btn {
+    margin-left: -$input-border-width;
+  }
+}
+
+.input-group-prepend { margin-right: -$input-border-width; }
+.input-group-append { margin-left: -$input-border-width; }
+
+
+// Textual addons
+//
+// Serves as a catch-all element for any text or radio/checkbox input you wish
+// to prepend or append to an input.
+
+.input-group-text {
+  display: flex;
+  align-items: center;
+  padding: $input-padding-y $input-padding-x;
+  margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
+  @include font-size($input-font-size); // Match inputs
+  font-weight: $font-weight-normal;
+  line-height: $input-line-height;
+  color: $input-group-addon-color;
+  text-align: center;
+  white-space: nowrap;
+  background-color: $input-group-addon-bg;
+  border: $input-border-width solid $input-group-addon-border-color;
+  @include border-radius($input-border-radius);
+
+  // Nuke default margins from checkboxes and radios to vertically center within.
+  input[type="radio"],
+  input[type="checkbox"] {
+    margin-top: 0;
+  }
+}
+
+
+// Sizing
+//
+// Remix the default form control sizing classes into new ones for easier
+// manipulation.
+
+.input-group-lg > .form-control:not(textarea),
+.input-group-lg > .custom-select {
+  height: $input-height-lg;
+}
+
+.input-group-lg > .form-control,
+.input-group-lg > .custom-select,
+.input-group-lg > .input-group-prepend > .input-group-text,
+.input-group-lg > .input-group-append > .input-group-text,
+.input-group-lg > .input-group-prepend > .btn,
+.input-group-lg > .input-group-append > .btn {
+  padding: $input-padding-y-lg $input-padding-x-lg;
+  @include font-size($input-font-size-lg);
+  line-height: $input-line-height-lg;
+  @include border-radius($input-border-radius-lg);
+}
+
+.input-group-sm > .form-control:not(textarea),
+.input-group-sm > .custom-select {
+  height: $input-height-sm;
+}
+
+.input-group-sm > .form-control,
+.input-group-sm > .custom-select,
+.input-group-sm > .input-group-prepend > .input-group-text,
+.input-group-sm > .input-group-append > .input-group-text,
+.input-group-sm > .input-group-prepend > .btn,
+.input-group-sm > .input-group-append > .btn {
+  padding: $input-padding-y-sm $input-padding-x-sm;
+  @include font-size($input-font-size-sm);
+  line-height: $input-line-height-sm;
+  @include border-radius($input-border-radius-sm);
+}
+
+.input-group-lg > .custom-select,
+.input-group-sm > .custom-select {
+  padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
+}
+
+
+// Prepend and append rounded corners
+//
+// These rulesets must come after the sizing ones to properly override sm and lg
+// border-radius values when extending. They're more specific than we'd like
+// with the `.input-group >` part, but without it, we cannot override the sizing.
+
+
+.input-group > .input-group-prepend > .btn,
+.input-group > .input-group-prepend > .input-group-text,
+.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn,
+.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text,
+.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn,
+.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .input-group-text,
+.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
+  @include border-right-radius(0);
+}
+
+.input-group > .input-group-append > .btn,
+.input-group > .input-group-append > .input-group-text,
+.input-group > .input-group-prepend:not(:first-child) > .btn,
+.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
+.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
+.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
+  @include border-left-radius(0);
+}

styles/bootstrap/_jumbotron.scss

@@ -1,17 +1,17 @@
-.jumbotron {
-  padding: $jumbotron-padding ($jumbotron-padding / 2);
-  margin-bottom: $jumbotron-padding;
-  color: $jumbotron-color;
-  background-color: $jumbotron-bg;
-  @include border-radius($border-radius-lg);
-
-  @include media-breakpoint-up(sm) {
-    padding: ($jumbotron-padding * 2) $jumbotron-padding;
-  }
-}
-
-.jumbotron-fluid {
-  padding-right: 0;
-  padding-left: 0;
-  @include border-radius(0);
-}
+.jumbotron {
+  padding: $jumbotron-padding ($jumbotron-padding / 2);
+  margin-bottom: $jumbotron-padding;
+  color: $jumbotron-color;
+  background-color: $jumbotron-bg;
+  @include border-radius($border-radius-lg);
+
+  @include media-breakpoint-up(sm) {
+    padding: ($jumbotron-padding * 2) $jumbotron-padding;
+  }
+}
+
+.jumbotron-fluid {
+  padding-right: 0;
+  padding-left: 0;
+  @include border-radius(0);
+}

styles/bootstrap/_list-group.scss

@@ -1,154 +1,154 @@
-// Base class
-//
-// Easily usable on <ul>, <ol>, or <div>.
-
-.list-group {
-  display: flex;
-  flex-direction: column;
-
-  // No need to set list-style: none; since .list-group-item is block level
-  padding-left: 0; // reset padding because ul and ol
-  margin-bottom: 0;
-  @include border-radius($list-group-border-radius);
-}
-
-
-// Interactive list items
-//
-// Use anchor or button elements instead of `li`s or `div`s to create interactive
-// list items. Includes an extra `.active` modifier class for selected items.
-
-.list-group-item-action {
-  width: 100%; // For `<button>`s (anchors become 100% by default though)
-  color: $list-group-action-color;
-  text-align: inherit; // For `<button>`s (anchors inherit)
-
-  // Hover state
-  @include hover-focus() {
-    z-index: 1; // Place hover/focus items above their siblings for proper border styling
-    color: $list-group-action-hover-color;
-    text-decoration: none;
-    background-color: $list-group-hover-bg;
-  }
-
-  &:active {
-    color: $list-group-action-active-color;
-    background-color: $list-group-action-active-bg;
-  }
-}
-
-
-// Individual list items
-//
-// Use on `li`s or `div`s within the `.list-group` parent.
-
-.list-group-item {
-  position: relative;
-  display: block;
-  padding: $list-group-item-padding-y $list-group-item-padding-x;
-  color: $list-group-color;
-  text-decoration: if($link-decoration == none, null, none);
-  background-color: $list-group-bg;
-  border: $list-group-border-width solid $list-group-border-color;
-
-  &:first-child {
-    @include border-top-radius(inherit);
-  }
-
-  &:last-child {
-    @include border-bottom-radius(inherit);
-  }
-
-  &.disabled,
-  &:disabled {
-    color: $list-group-disabled-color;
-    pointer-events: none;
-    background-color: $list-group-disabled-bg;
-  }
-
-  // Include both here for `<a>`s and `<button>`s
-  &.active {
-    z-index: 2; // Place active items above their siblings for proper border styling
-    color: $list-group-active-color;
-    background-color: $list-group-active-bg;
-    border-color: $list-group-active-border-color;
-  }
-
-  & + & {
-    border-top-width: 0;
-
-    &.active {
-      margin-top: -$list-group-border-width;
-      border-top-width: $list-group-border-width;
-    }
-  }
-}
-
-
-// Horizontal
-//
-// Change the layout of list group items from vertical (default) to horizontal.
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    .list-group-horizontal#{$infix} {
-      flex-direction: row;
-
-      > .list-group-item {
-        &:first-child {
-          @include border-bottom-left-radius($list-group-border-radius);
-          @include border-top-right-radius(0);
-        }
-
-        &:last-child {
-          @include border-top-right-radius($list-group-border-radius);
-          @include border-bottom-left-radius(0);
-        }
-
-        &.active {
-          margin-top: 0;
-        }
-
-        + .list-group-item {
-          border-top-width: $list-group-border-width;
-          border-left-width: 0;
-
-          &.active {
-            margin-left: -$list-group-border-width;
-            border-left-width: $list-group-border-width;
-          }
-        }
-      }
-    }
-  }
-}
-
-
-// Flush list items
-//
-// Remove borders and border-radius to keep list group items edge-to-edge. Most
-// useful within other components (e.g., cards).
-
-.list-group-flush {
-  @include border-radius(0);
-
-  > .list-group-item {
-    border-width: 0 0 $list-group-border-width;
-
-    &:last-child {
-      border-bottom-width: 0;
-    }
-  }
-}
-
-
-// Contextual variants
-//
-// Add modifier classes to change text and background color on individual items.
-// Organizationally, this must come after the `:hover` states.
-
-@each $color, $value in $theme-colors {
-  @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
-}
+// Base class
+//
+// Easily usable on <ul>, <ol>, or <div>.
+
+.list-group {
+  display: flex;
+  flex-direction: column;
+
+  // No need to set list-style: none; since .list-group-item is block level
+  padding-left: 0; // reset padding because ul and ol
+  margin-bottom: 0;
+  @include border-radius($list-group-border-radius);
+}
+
+
+// Interactive list items
+//
+// Use anchor or button elements instead of `li`s or `div`s to create interactive
+// list items. Includes an extra `.active` modifier class for selected items.
+
+.list-group-item-action {
+  width: 100%; // For `<button>`s (anchors become 100% by default though)
+  color: $list-group-action-color;
+  text-align: inherit; // For `<button>`s (anchors inherit)
+
+  // Hover state
+  @include hover-focus() {
+    z-index: 1; // Place hover/focus items above their siblings for proper border styling
+    color: $list-group-action-hover-color;
+    text-decoration: none;
+    background-color: $list-group-hover-bg;
+  }
+
+  &:active {
+    color: $list-group-action-active-color;
+    background-color: $list-group-action-active-bg;
+  }
+}
+
+
+// Individual list items
+//
+// Use on `li`s or `div`s within the `.list-group` parent.
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: $list-group-item-padding-y $list-group-item-padding-x;
+  color: $list-group-color;
+  text-decoration: if($link-decoration == none, null, none);
+  background-color: $list-group-bg;
+  border: $list-group-border-width solid $list-group-border-color;
+
+  &:first-child {
+    @include border-top-radius(inherit);
+  }
+
+  &:last-child {
+    @include border-bottom-radius(inherit);
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $list-group-disabled-color;
+    pointer-events: none;
+    background-color: $list-group-disabled-bg;
+  }
+
+  // Include both here for `<a>`s and `<button>`s
+  &.active {
+    z-index: 2; // Place active items above their siblings for proper border styling
+    color: $list-group-active-color;
+    background-color: $list-group-active-bg;
+    border-color: $list-group-active-border-color;
+  }
+
+  & + & {
+    border-top-width: 0;
+
+    &.active {
+      margin-top: -$list-group-border-width;
+      border-top-width: $list-group-border-width;
+    }
+  }
+}
+
+
+// Horizontal
+//
+// Change the layout of list group items from vertical (default) to horizontal.
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .list-group-horizontal#{$infix} {
+      flex-direction: row;
+
+      > .list-group-item {
+        &:first-child {
+          @include border-bottom-left-radius($list-group-border-radius);
+          @include border-top-right-radius(0);
+        }
+
+        &:last-child {
+          @include border-top-right-radius($list-group-border-radius);
+          @include border-bottom-left-radius(0);
+        }
+
+        &.active {
+          margin-top: 0;
+        }
+
+        + .list-group-item {
+          border-top-width: $list-group-border-width;
+          border-left-width: 0;
+
+          &.active {
+            margin-left: -$list-group-border-width;
+            border-left-width: $list-group-border-width;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+// Flush list items
+//
+// Remove borders and border-radius to keep list group items edge-to-edge. Most
+// useful within other components (e.g., cards).
+
+.list-group-flush {
+  @include border-radius(0);
+
+  > .list-group-item {
+    border-width: 0 0 $list-group-border-width;
+
+    &:last-child {
+      border-bottom-width: 0;
+    }
+  }
+}
+
+
+// Contextual variants
+//
+// Add modifier classes to change text and background color on individual items.
+// Organizationally, this must come after the `:hover` states.
+
+@each $color, $value in $theme-colors {
+  @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
+}

styles/bootstrap/_media.scss

@@ -1,8 +1,8 @@
-.media {
-  display: flex;
-  align-items: flex-start;
-}
-
-.media-body {
-  flex: 1;
-}
+.media {
+  display: flex;
+  align-items: flex-start;
+}
+
+.media-body {
+  flex: 1;
+}

styles/bootstrap/_mixins.scss

@@ -1,47 +1,47 @@
-// Toggles
-//
-// Used in conjunction with global variables to enable certain theme features.
-
-// Vendor
-@import "vendor/rfs";
-
-// Deprecate
-@import "mixins/deprecate";
-
-// Utilities
-@import "mixins/breakpoints";
-@import "mixins/hover";
-@import "mixins/image";
-@import "mixins/badge";
-@import "mixins/resize";
-@import "mixins/screen-reader";
-@import "mixins/size";
-@import "mixins/reset-text";
-@import "mixins/text-emphasis";
-@import "mixins/text-hide";
-@import "mixins/text-truncate";
-@import "mixins/visibility";
-
-// Components
-@import "mixins/alert";
-@import "mixins/buttons";
-@import "mixins/caret";
-@import "mixins/pagination";
-@import "mixins/lists";
-@import "mixins/list-group";
-@import "mixins/nav-divider";
-@import "mixins/forms";
-@import "mixins/table-row";
-
-// Skins
-@import "mixins/background-variant";
-@import "mixins/border-radius";
-@import "mixins/box-shadow";
-@import "mixins/gradients";
-@import "mixins/transition";
-
-// Layout
-@import "mixins/clearfix";
-@import "mixins/grid-framework";
-@import "mixins/grid";
-@import "mixins/float";
+// Toggles
+//
+// Used in conjunction with global variables to enable certain theme features.
+
+// Vendor
+@import "vendor/rfs";
+
+// Deprecate
+@import "mixins/deprecate";
+
+// Utilities
+@import "mixins/breakpoints";
+@import "mixins/hover";
+@import "mixins/image";
+@import "mixins/badge";
+@import "mixins/resize";
+@import "mixins/screen-reader";
+@import "mixins/size";
+@import "mixins/reset-text";
+@import "mixins/text-emphasis";
+@import "mixins/text-hide";
+@import "mixins/text-truncate";
+@import "mixins/visibility";
+
+// Components
+@import "mixins/alert";
+@import "mixins/buttons";
+@import "mixins/caret";
+@import "mixins/pagination";
+@import "mixins/lists";
+@import "mixins/list-group";
+@import "mixins/nav-divider";
+@import "mixins/forms";
+@import "mixins/table-row";
+
+// Skins
+@import "mixins/background-variant";
+@import "mixins/border-radius";
+@import "mixins/box-shadow";
+@import "mixins/gradients";
+@import "mixins/transition";
+
+// Layout
+@import "mixins/clearfix";
+@import "mixins/grid-framework";
+@import "mixins/grid";
+@import "mixins/float";

styles/bootstrap/_modal.scss

@@ -1,240 +1,240 @@
-// .modal-open      - body class for killing the scroll
-// .modal           - container to scroll within
-// .modal-dialog    - positioning shell for the actual modal
-// .modal-content   - actual modal w/ bg and corners and stuff
-
-
-.modal-open {
-  // Kill the scroll on the body
-  overflow: hidden;
-
-  .modal {
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-}
-
-// Container that the modal scrolls within
-.modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: $zindex-modal;
-  display: none;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  // Prevent Chrome on Windows from adding a focus outline. For details, see
-  // https://github.com/twbs/bootstrap/pull/10951.
-  outline: 0;
-  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
-  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
-  // See also https://github.com/twbs/bootstrap/issues/17695
-}
-
-// Shell div to position the modal with bottom padding
-.modal-dialog {
-  position: relative;
-  width: auto;
-  margin: $modal-dialog-margin;
-  // allow clicks to pass through for custom click handling to close modal
-  pointer-events: none;
-
-  // When fading in the modal, animate it to slide down
-  .modal.fade & {
-    @include transition($modal-transition);
-    transform: $modal-fade-transform;
-  }
-  .modal.show & {
-    transform: $modal-show-transform;
-  }
-
-  // When trying to close, animate focus to scale
-  .modal.modal-static & {
-    transform: $modal-scale-transform;
-  }
-}
-
-.modal-dialog-scrollable {
-  display: flex; // IE10/11
-  max-height: subtract(100%, $modal-dialog-margin * 2);
-
-  .modal-content {
-    max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
-    overflow: hidden;
-  }
-
-  .modal-header,
-  .modal-footer {
-    flex-shrink: 0;
-  }
-
-  .modal-body {
-    overflow-y: auto;
-  }
-}
-
-.modal-dialog-centered {
-  display: flex;
-  align-items: center;
-  min-height: subtract(100%, $modal-dialog-margin * 2);
-
-  // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
-  &::before {
-    display: block; // IE10
-    height: subtract(100vh, $modal-dialog-margin * 2);
-    height: min-content; // Reset height to 0 except on IE
-    content: "";
-  }
-
-  // Ensure `.modal-body` shows scrollbar (IE10/11)
-  &.modal-dialog-scrollable {
-    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-
-    .modal-content {
-      max-height: none;
-    }
-
-    &::before {
-      content: none;
-    }
-  }
-}
-
-// Actual modal
-.modal-content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
-  // counteract the pointer-events: none; in the .modal-dialog
-  color: $modal-content-color;
-  pointer-events: auto;
-  background-color: $modal-content-bg;
-  background-clip: padding-box;
-  border: $modal-content-border-width solid $modal-content-border-color;
-  @include border-radius($modal-content-border-radius);
-  @include box-shadow($modal-content-box-shadow-xs);
-  // Remove focus outline from opened modal
-  outline: 0;
-}
-
-// Modal background
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: $zindex-modal-backdrop;
-  width: 100vw;
-  height: 100vh;
-  background-color: $modal-backdrop-bg;
-
-  // Fade for backdrop
-  &.fade { opacity: 0; }
-  &.show { opacity: $modal-backdrop-opacity; }
-}
-
-// Modal header
-// Top section of the modal w/ title and dismiss
-.modal-header {
-  display: flex;
-  align-items: flex-start; // so the close btn always stays on the upper right corner
-  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
-  padding: $modal-header-padding;
-  border-bottom: $modal-header-border-width solid $modal-header-border-color;
-  @include border-top-radius($modal-content-inner-border-radius);
-
-  .close {
-    padding: $modal-header-padding;
-    // auto on the left force icon to the right even when there is no .modal-title
-    margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
-  }
-}
-
-// Title text within header
-.modal-title {
-  margin-bottom: 0;
-  line-height: $modal-title-line-height;
-}
-
-// Modal body
-// Where all modal content resides (sibling of .modal-header and .modal-footer)
-.modal-body {
-  position: relative;
-  // Enable `flex-grow: 1` so that the body take up as much space as possible
-  // when there should be a fixed height on `.modal-dialog`.
-  flex: 1 1 auto;
-  padding: $modal-inner-padding;
-}
-
-// Footer (for actions)
-.modal-footer {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center; // vertically center
-  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
-  padding: $modal-inner-padding - $modal-footer-margin-between / 2;
-  border-top: $modal-footer-border-width solid $modal-footer-border-color;
-  @include border-bottom-radius($modal-content-inner-border-radius);
-
-  // Place margin between footer elements
-  // This solution is far from ideal because of the universal selector usage,
-  // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
-  > * {
-    margin: $modal-footer-margin-between / 2;
-  }
-}
-
-// Measure scrollbar width for padding body during modal show/hide
-.modal-scrollbar-measure {
-  position: absolute;
-  top: -9999px;
-  width: 50px;
-  height: 50px;
-  overflow: scroll;
-}
-
-// Scale up the modal
-@include media-breakpoint-up(sm) {
-  // Automatically set modal's width for larger viewports
-  .modal-dialog {
-    max-width: $modal-md;
-    margin: $modal-dialog-margin-y-sm-up auto;
-  }
-
-  .modal-dialog-scrollable {
-    max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
-
-    .modal-content {
-      max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
-    }
-  }
-
-  .modal-dialog-centered {
-    min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
-
-    &::before {
-      height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
-      height: min-content;
-    }
-  }
-
-  .modal-content {
-    @include box-shadow($modal-content-box-shadow-sm-up);
-  }
-
-  .modal-sm { max-width: $modal-sm; }
-}
-
-@include media-breakpoint-up(lg) {
-  .modal-lg,
-  .modal-xl {
-    max-width: $modal-lg;
-  }
-}
-
-@include media-breakpoint-up(xl) {
-  .modal-xl { max-width: $modal-xl; }
-}
+// .modal-open      - body class for killing the scroll
+// .modal           - container to scroll within
+// .modal-dialog    - positioning shell for the actual modal
+// .modal-content   - actual modal w/ bg and corners and stuff
+
+
+.modal-open {
+  // Kill the scroll on the body
+  overflow: hidden;
+
+  .modal {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+
+// Container that the modal scrolls within
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $zindex-modal;
+  display: none;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  // Prevent Chrome on Windows from adding a focus outline. For details, see
+  // https://github.com/twbs/bootstrap/pull/10951.
+  outline: 0;
+  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
+  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
+  // See also https://github.com/twbs/bootstrap/issues/17695
+}
+
+// Shell div to position the modal with bottom padding
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: $modal-dialog-margin;
+  // allow clicks to pass through for custom click handling to close modal
+  pointer-events: none;
+
+  // When fading in the modal, animate it to slide down
+  .modal.fade & {
+    @include transition($modal-transition);
+    transform: $modal-fade-transform;
+  }
+  .modal.show & {
+    transform: $modal-show-transform;
+  }
+
+  // When trying to close, animate focus to scale
+  .modal.modal-static & {
+    transform: $modal-scale-transform;
+  }
+}
+
+.modal-dialog-scrollable {
+  display: flex; // IE10/11
+  max-height: subtract(100%, $modal-dialog-margin * 2);
+
+  .modal-content {
+    max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
+    overflow: hidden;
+  }
+
+  .modal-header,
+  .modal-footer {
+    flex-shrink: 0;
+  }
+
+  .modal-body {
+    overflow-y: auto;
+  }
+}
+
+.modal-dialog-centered {
+  display: flex;
+  align-items: center;
+  min-height: subtract(100%, $modal-dialog-margin * 2);
+
+  // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
+  &::before {
+    display: block; // IE10
+    height: subtract(100vh, $modal-dialog-margin * 2);
+    height: min-content; // Reset height to 0 except on IE
+    content: "";
+  }
+
+  // Ensure `.modal-body` shows scrollbar (IE10/11)
+  &.modal-dialog-scrollable {
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+
+    .modal-content {
+      max-height: none;
+    }
+
+    &::before {
+      content: none;
+    }
+  }
+}
+
+// Actual modal
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
+  // counteract the pointer-events: none; in the .modal-dialog
+  color: $modal-content-color;
+  pointer-events: auto;
+  background-color: $modal-content-bg;
+  background-clip: padding-box;
+  border: $modal-content-border-width solid $modal-content-border-color;
+  @include border-radius($modal-content-border-radius);
+  @include box-shadow($modal-content-box-shadow-xs);
+  // Remove focus outline from opened modal
+  outline: 0;
+}
+
+// Modal background
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $zindex-modal-backdrop;
+  width: 100vw;
+  height: 100vh;
+  background-color: $modal-backdrop-bg;
+
+  // Fade for backdrop
+  &.fade { opacity: 0; }
+  &.show { opacity: $modal-backdrop-opacity; }
+}
+
+// Modal header
+// Top section of the modal w/ title and dismiss
+.modal-header {
+  display: flex;
+  align-items: flex-start; // so the close btn always stays on the upper right corner
+  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
+  padding: $modal-header-padding;
+  border-bottom: $modal-header-border-width solid $modal-header-border-color;
+  @include border-top-radius($modal-content-inner-border-radius);
+
+  .close {
+    padding: $modal-header-padding;
+    // auto on the left force icon to the right even when there is no .modal-title
+    margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
+  }
+}
+
+// Title text within header
+.modal-title {
+  margin-bottom: 0;
+  line-height: $modal-title-line-height;
+}
+
+// Modal body
+// Where all modal content resides (sibling of .modal-header and .modal-footer)
+.modal-body {
+  position: relative;
+  // Enable `flex-grow: 1` so that the body take up as much space as possible
+  // when there should be a fixed height on `.modal-dialog`.
+  flex: 1 1 auto;
+  padding: $modal-inner-padding;
+}
+
+// Footer (for actions)
+.modal-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center; // vertically center
+  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
+  padding: $modal-inner-padding - $modal-footer-margin-between / 2;
+  border-top: $modal-footer-border-width solid $modal-footer-border-color;
+  @include border-bottom-radius($modal-content-inner-border-radius);
+
+  // Place margin between footer elements
+  // This solution is far from ideal because of the universal selector usage,
+  // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
+  > * {
+    margin: $modal-footer-margin-between / 2;
+  }
+}
+
+// Measure scrollbar width for padding body during modal show/hide
+.modal-scrollbar-measure {
+  position: absolute;
+  top: -9999px;
+  width: 50px;
+  height: 50px;
+  overflow: scroll;
+}
+
+// Scale up the modal
+@include media-breakpoint-up(sm) {
+  // Automatically set modal's width for larger viewports
+  .modal-dialog {
+    max-width: $modal-md;
+    margin: $modal-dialog-margin-y-sm-up auto;
+  }
+
+  .modal-dialog-scrollable {
+    max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
+
+    .modal-content {
+      max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
+    }
+  }
+
+  .modal-dialog-centered {
+    min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);
+
+    &::before {
+      height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
+      height: min-content;
+    }
+  }
+
+  .modal-content {
+    @include box-shadow($modal-content-box-shadow-sm-up);
+  }
+
+  .modal-sm { max-width: $modal-sm; }
+}
+
+@include media-breakpoint-up(lg) {
+  .modal-lg,
+  .modal-xl {
+    max-width: $modal-lg;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .modal-xl { max-width: $modal-xl; }
+}

styles/bootstrap/_nav.scss

@@ -1,120 +1,120 @@
-// Base class
-//
-// Kickstart any navigation component with a set of style resets. Works with
-// `<nav>`s, `<ul>`s or `<ol>`s.
-
-.nav {
-  display: flex;
-  flex-wrap: wrap;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-}
-
-.nav-link {
-  display: block;
-  padding: $nav-link-padding-y $nav-link-padding-x;
-  text-decoration: if($link-decoration == none, null, none);
-
-  @include hover-focus() {
-    text-decoration: none;
-  }
-
-  // Disabled state lightens text
-  &.disabled {
-    color: $nav-link-disabled-color;
-    pointer-events: none;
-    cursor: default;
-  }
-}
-
-//
-// Tabs
-//
-
-.nav-tabs {
-  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
-
-  .nav-link {
-    margin-bottom: -$nav-tabs-border-width;
-    border: $nav-tabs-border-width solid transparent;
-    @include border-top-radius($nav-tabs-border-radius);
-
-    @include hover-focus() {
-      border-color: $nav-tabs-link-hover-border-color;
-    }
-
-    &.disabled {
-      color: $nav-link-disabled-color;
-      background-color: transparent;
-      border-color: transparent;
-    }
-  }
-
-  .nav-link.active,
-  .nav-item.show .nav-link {
-    color: $nav-tabs-link-active-color;
-    background-color: $nav-tabs-link-active-bg;
-    border-color: $nav-tabs-link-active-border-color;
-  }
-
-  .dropdown-menu {
-    // Make dropdown border overlap tab border
-    margin-top: -$nav-tabs-border-width;
-    // Remove the top rounded corners here since there is a hard edge above the menu
-    @include border-top-radius(0);
-  }
-}
-
-
-//
-// Pills
-//
-
-.nav-pills {
-  .nav-link {
-    @include border-radius($nav-pills-border-radius);
-  }
-
-  .nav-link.active,
-  .show > .nav-link {
-    color: $nav-pills-link-active-color;
-    background-color: $nav-pills-link-active-bg;
-  }
-}
-
-
-//
-// Justified variants
-//
-
-.nav-fill {
-  > .nav-link,
-  .nav-item {
-    flex: 1 1 auto;
-    text-align: center;
-  }
-}
-
-.nav-justified {
-  > .nav-link,
-  .nav-item {
-    flex-basis: 0;
-    flex-grow: 1;
-    text-align: center;
-  }
-}
-
-
-// Tabbable tabs
-//
-// Hide tabbable panes to start, show them when `.active`
-
-.tab-content {
-  > .tab-pane {
-    display: none;
-  }
-  > .active {
-    display: block;
-  }
-}
+// Base class
+//
+// Kickstart any navigation component with a set of style resets. Works with
+// `<nav>`s, `<ul>`s or `<ol>`s.
+
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-link {
+  display: block;
+  padding: $nav-link-padding-y $nav-link-padding-x;
+  text-decoration: if($link-decoration == none, null, none);
+
+  @include hover-focus() {
+    text-decoration: none;
+  }
+
+  // Disabled state lightens text
+  &.disabled {
+    color: $nav-link-disabled-color;
+    pointer-events: none;
+    cursor: default;
+  }
+}
+
+//
+// Tabs
+//
+
+.nav-tabs {
+  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+
+  .nav-link {
+    margin-bottom: -$nav-tabs-border-width;
+    border: $nav-tabs-border-width solid transparent;
+    @include border-top-radius($nav-tabs-border-radius);
+
+    @include hover-focus() {
+      border-color: $nav-tabs-link-hover-border-color;
+    }
+
+    &.disabled {
+      color: $nav-link-disabled-color;
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    color: $nav-tabs-link-active-color;
+    background-color: $nav-tabs-link-active-bg;
+    border-color: $nav-tabs-link-active-border-color;
+  }
+
+  .dropdown-menu {
+    // Make dropdown border overlap tab border
+    margin-top: -$nav-tabs-border-width;
+    // Remove the top rounded corners here since there is a hard edge above the menu
+    @include border-top-radius(0);
+  }
+}
+
+
+//
+// Pills
+//
+
+.nav-pills {
+  .nav-link {
+    @include border-radius($nav-pills-border-radius);
+  }
+
+  .nav-link.active,
+  .show > .nav-link {
+    color: $nav-pills-link-active-color;
+    background-color: $nav-pills-link-active-bg;
+  }
+}
+
+
+//
+// Justified variants
+//
+
+.nav-fill {
+  > .nav-link,
+  .nav-item {
+    flex: 1 1 auto;
+    text-align: center;
+  }
+}
+
+.nav-justified {
+  > .nav-link,
+  .nav-item {
+    flex-basis: 0;
+    flex-grow: 1;
+    text-align: center;
+  }
+}
+
+
+// Tabbable tabs
+//
+// Hide tabbable panes to start, show them when `.active`
+
+.tab-content {
+  > .tab-pane {
+    display: none;
+  }
+  > .active {
+    display: block;
+  }
+}

styles/bootstrap/_navbar.scss

@@ -1,332 +1,332 @@
-// Contents
-//
-// Navbar
-// Navbar brand
-// Navbar nav
-// Navbar text
-// Navbar divider
-// Responsive navbar
-// Navbar position
-// Navbar themes
-
-
-// Navbar
-//
-// Provide a static navbar from which we expand to create full-width, fixed, and
-// other navbar variations.
-
-.navbar {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap; // allow us to do the line break for collapsing content
-  align-items: center;
-  justify-content: space-between; // space out brand from logo
-  padding: $navbar-padding-y $navbar-padding-x;
-
-  // Because flex properties aren't inherited, we need to redeclare these first
-  // few properties so that content nested within behave properly.
-  %container-flex-properties {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .container,
-  .container-fluid {
-    @extend %container-flex-properties;
-  }
-
-  @each $breakpoint, $container-max-width in $container-max-widths {
-    > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
-      @extend %container-flex-properties;
-    }
-  }
-}
-
-
-// Navbar brand
-//
-// Used for brand, project, or site names.
-
-.navbar-brand {
-  display: inline-block;
-  padding-top: $navbar-brand-padding-y;
-  padding-bottom: $navbar-brand-padding-y;
-  margin-right: $navbar-padding-x;
-  @include font-size($navbar-brand-font-size);
-  line-height: inherit;
-  white-space: nowrap;
-
-  @include hover-focus() {
-    text-decoration: none;
-  }
-}
-
-
-// Navbar nav
-//
-// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
-
-.navbar-nav {
-  display: flex;
-  flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-
-  .nav-link {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
-  .dropdown-menu {
-    position: static;
-    float: none;
-  }
-}
-
-
-// Navbar text
-//
-//
-
-.navbar-text {
-  display: inline-block;
-  padding-top: $nav-link-padding-y;
-  padding-bottom: $nav-link-padding-y;
-}
-
-
-// Responsive navbar
-//
-// Custom styles for responsive collapsing and toggling of navbar contents.
-// Powered by the collapse Bootstrap JavaScript plugin.
-
-// When collapsed, prevent the toggleable navbar contents from appearing in
-// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
-// on the `.navbar` parent.
-.navbar-collapse {
-  flex-basis: 100%;
-  flex-grow: 1;
-  // For always expanded or extra full navbars, ensure content aligns itself
-  // properly vertically. Can be easily overridden with flex utilities.
-  align-items: center;
-}
-
-// Button for toggling the navbar when in its collapsed state
-.navbar-toggler {
-  padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
-  @include font-size($navbar-toggler-font-size);
-  line-height: 1;
-  background-color: transparent; // remove default button style
-  border: $border-width solid transparent; // remove default button style
-  @include border-radius($navbar-toggler-border-radius);
-
-  @include hover-focus() {
-    text-decoration: none;
-  }
-}
-
-// Keep as a separate element so folks can easily override it with another icon
-// or image file as needed.
-.navbar-toggler-icon {
-  display: inline-block;
-  width: 1.5em;
-  height: 1.5em;
-  vertical-align: middle;
-  content: "";
-  background: 50% / 100% 100% no-repeat;
-}
-
-.navbar-nav-scroll {
-  max-height: $navbar-nav-scroll-max-height;
-  overflow-y: auto;
-}
-
-// Generate series of `.navbar-expand-*` responsive classes for configuring
-// where your navbar collapses.
-.navbar-expand {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($next, $grid-breakpoints);
-
-    &#{$infix} {
-      @include media-breakpoint-down($breakpoint) {
-        %container-navbar-expand-#{$breakpoint} {
-          padding-right: 0;
-          padding-left: 0;
-        }
-
-        > .container,
-        > .container-fluid {
-          @extend %container-navbar-expand-#{$breakpoint};
-        }
-
-        @each $size, $container-max-width in $container-max-widths {
-          > .container#{breakpoint-infix($size, $container-max-widths)} {
-            @extend %container-navbar-expand-#{$breakpoint};
-          }
-        }
-      }
-
-      @include media-breakpoint-up($next) {
-        flex-flow: row nowrap;
-        justify-content: flex-start;
-
-        .navbar-nav {
-          flex-direction: row;
-
-          .dropdown-menu {
-            position: absolute;
-          }
-
-          .nav-link {
-            padding-right: $navbar-nav-link-padding-x;
-            padding-left: $navbar-nav-link-padding-x;
-          }
-        }
-
-        // For nesting containers, have to redeclare for alignment purposes
-        %container-nesting-#{$breakpoint} {
-          flex-wrap: nowrap;
-        }
-
-        > .container,
-        > .container-fluid {
-          @extend %container-nesting-#{$breakpoint};
-        }
-
-        @each $size, $container-max-width in $container-max-widths {
-          > .container#{breakpoint-infix($size, $container-max-widths)} {
-            @extend %container-nesting-#{$breakpoint};
-          }
-        }
-
-        .navbar-nav-scroll {
-          overflow: visible;
-        }
-
-        .navbar-collapse {
-          display: flex !important; // stylelint-disable-line declaration-no-important
-
-          // Changes flex-bases to auto because of an IE10 bug
-          flex-basis: auto;
-        }
-
-        .navbar-toggler {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-
-// Navbar themes
-//
-// Styles for switching between navbars with light or dark background.
-
-// Dark links against a light background
-.navbar-light {
-  .navbar-brand {
-    color: $navbar-light-brand-color;
-
-    @include hover-focus() {
-      color: $navbar-light-brand-hover-color;
-    }
-  }
-
-  .navbar-nav {
-    .nav-link {
-      color: $navbar-light-color;
-
-      @include hover-focus() {
-        color: $navbar-light-hover-color;
-      }
-
-      &.disabled {
-        color: $navbar-light-disabled-color;
-      }
-    }
-
-    .show > .nav-link,
-    .active > .nav-link,
-    .nav-link.show,
-    .nav-link.active {
-      color: $navbar-light-active-color;
-    }
-  }
-
-  .navbar-toggler {
-    color: $navbar-light-color;
-    border-color: $navbar-light-toggler-border-color;
-  }
-
-  .navbar-toggler-icon {
-    background-image: escape-svg($navbar-light-toggler-icon-bg);
-  }
-
-  .navbar-text {
-    color: $navbar-light-color;
-    a {
-      color: $navbar-light-active-color;
-
-      @include hover-focus() {
-        color: $navbar-light-active-color;
-      }
-    }
-  }
-}
-
-// White links against a dark background
-.navbar-dark {
-  .navbar-brand {
-    color: $navbar-dark-brand-color;
-
-    @include hover-focus() {
-      color: $navbar-dark-brand-hover-color;
-    }
-  }
-
-  .navbar-nav {
-    .nav-link {
-      color: $navbar-dark-color;
-
-      @include hover-focus() {
-        color: $navbar-dark-hover-color;
-      }
-
-      &.disabled {
-        color: $navbar-dark-disabled-color;
-      }
-    }
-
-    .show > .nav-link,
-    .active > .nav-link,
-    .nav-link.show,
-    .nav-link.active {
-      color: $navbar-dark-active-color;
-    }
-  }
-
-  .navbar-toggler {
-    color: $navbar-dark-color;
-    border-color: $navbar-dark-toggler-border-color;
-  }
-
-  .navbar-toggler-icon {
-    background-image: escape-svg($navbar-dark-toggler-icon-bg);
-  }
-
-  .navbar-text {
-    color: $navbar-dark-color;
-    a {
-      color: $navbar-dark-active-color;
-
-      @include hover-focus() {
-        color: $navbar-dark-active-color;
-      }
-    }
-  }
-}
+// Contents
+//
+// Navbar
+// Navbar brand
+// Navbar nav
+// Navbar text
+// Navbar divider
+// Responsive navbar
+// Navbar position
+// Navbar themes
+
+
+// Navbar
+//
+// Provide a static navbar from which we expand to create full-width, fixed, and
+// other navbar variations.
+
+.navbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap; // allow us to do the line break for collapsing content
+  align-items: center;
+  justify-content: space-between; // space out brand from logo
+  padding: $navbar-padding-y $navbar-padding-x;
+
+  // Because flex properties aren't inherited, we need to redeclare these first
+  // few properties so that content nested within behave properly.
+  %container-flex-properties {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .container,
+  .container-fluid {
+    @extend %container-flex-properties;
+  }
+
+  @each $breakpoint, $container-max-width in $container-max-widths {
+    > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
+      @extend %container-flex-properties;
+    }
+  }
+}
+
+
+// Navbar brand
+//
+// Used for brand, project, or site names.
+
+.navbar-brand {
+  display: inline-block;
+  padding-top: $navbar-brand-padding-y;
+  padding-bottom: $navbar-brand-padding-y;
+  margin-right: $navbar-padding-x;
+  @include font-size($navbar-brand-font-size);
+  line-height: inherit;
+  white-space: nowrap;
+
+  @include hover-focus() {
+    text-decoration: none;
+  }
+}
+
+
+// Navbar nav
+//
+// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
+
+.navbar-nav {
+  display: flex;
+  flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+
+  .nav-link {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .dropdown-menu {
+    position: static;
+    float: none;
+  }
+}
+
+
+// Navbar text
+//
+//
+
+.navbar-text {
+  display: inline-block;
+  padding-top: $nav-link-padding-y;
+  padding-bottom: $nav-link-padding-y;
+}
+
+
+// Responsive navbar
+//
+// Custom styles for responsive collapsing and toggling of navbar contents.
+// Powered by the collapse Bootstrap JavaScript plugin.
+
+// When collapsed, prevent the toggleable navbar contents from appearing in
+// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
+// on the `.navbar` parent.
+.navbar-collapse {
+  flex-basis: 100%;
+  flex-grow: 1;
+  // For always expanded or extra full navbars, ensure content aligns itself
+  // properly vertically. Can be easily overridden with flex utilities.
+  align-items: center;
+}
+
+// Button for toggling the navbar when in its collapsed state
+.navbar-toggler {
+  padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
+  @include font-size($navbar-toggler-font-size);
+  line-height: 1;
+  background-color: transparent; // remove default button style
+  border: $border-width solid transparent; // remove default button style
+  @include border-radius($navbar-toggler-border-radius);
+
+  @include hover-focus() {
+    text-decoration: none;
+  }
+}
+
+// Keep as a separate element so folks can easily override it with another icon
+// or image file as needed.
+.navbar-toggler-icon {
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: middle;
+  content: "";
+  background: 50% / 100% 100% no-repeat;
+}
+
+.navbar-nav-scroll {
+  max-height: $navbar-nav-scroll-max-height;
+  overflow-y: auto;
+}
+
+// Generate series of `.navbar-expand-*` responsive classes for configuring
+// where your navbar collapses.
+.navbar-expand {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+
+    &#{$infix} {
+      @include media-breakpoint-down($breakpoint) {
+        %container-navbar-expand-#{$breakpoint} {
+          padding-right: 0;
+          padding-left: 0;
+        }
+
+        > .container,
+        > .container-fluid {
+          @extend %container-navbar-expand-#{$breakpoint};
+        }
+
+        @each $size, $container-max-width in $container-max-widths {
+          > .container#{breakpoint-infix($size, $container-max-widths)} {
+            @extend %container-navbar-expand-#{$breakpoint};
+          }
+        }
+      }
+
+      @include media-breakpoint-up($next) {
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+
+        .navbar-nav {
+          flex-direction: row;
+
+          .dropdown-menu {
+            position: absolute;
+          }
+
+          .nav-link {
+            padding-right: $navbar-nav-link-padding-x;
+            padding-left: $navbar-nav-link-padding-x;
+          }
+        }
+
+        // For nesting containers, have to redeclare for alignment purposes
+        %container-nesting-#{$breakpoint} {
+          flex-wrap: nowrap;
+        }
+
+        > .container,
+        > .container-fluid {
+          @extend %container-nesting-#{$breakpoint};
+        }
+
+        @each $size, $container-max-width in $container-max-widths {
+          > .container#{breakpoint-infix($size, $container-max-widths)} {
+            @extend %container-nesting-#{$breakpoint};
+          }
+        }
+
+        .navbar-nav-scroll {
+          overflow: visible;
+        }
+
+        .navbar-collapse {
+          display: flex !important; // stylelint-disable-line declaration-no-important
+
+          // Changes flex-bases to auto because of an IE10 bug
+          flex-basis: auto;
+        }
+
+        .navbar-toggler {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+
+// Navbar themes
+//
+// Styles for switching between navbars with light or dark background.
+
+// Dark links against a light background
+.navbar-light {
+  .navbar-brand {
+    color: $navbar-light-brand-color;
+
+    @include hover-focus() {
+      color: $navbar-light-brand-hover-color;
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      color: $navbar-light-color;
+
+      @include hover-focus() {
+        color: $navbar-light-hover-color;
+      }
+
+      &.disabled {
+        color: $navbar-light-disabled-color;
+      }
+    }
+
+    .show > .nav-link,
+    .active > .nav-link,
+    .nav-link.show,
+    .nav-link.active {
+      color: $navbar-light-active-color;
+    }
+  }
+
+  .navbar-toggler {
+    color: $navbar-light-color;
+    border-color: $navbar-light-toggler-border-color;
+  }
+
+  .navbar-toggler-icon {
+    background-image: escape-svg($navbar-light-toggler-icon-bg);
+  }
+
+  .navbar-text {
+    color: $navbar-light-color;
+    a {
+      color: $navbar-light-active-color;
+
+      @include hover-focus() {
+        color: $navbar-light-active-color;
+      }
+    }
+  }
+}
+
+// White links against a dark background
+.navbar-dark {
+  .navbar-brand {
+    color: $navbar-dark-brand-color;
+
+    @include hover-focus() {
+      color: $navbar-dark-brand-hover-color;
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      color: $navbar-dark-color;
+
+      @include hover-focus() {
+        color: $navbar-dark-hover-color;
+      }
+
+      &.disabled {
+        color: $navbar-dark-disabled-color;
+      }
+    }
+
+    .show > .nav-link,
+    .active > .nav-link,
+    .nav-link.show,
+    .nav-link.active {
+      color: $navbar-dark-active-color;
+    }
+  }
+
+  .navbar-toggler {
+    color: $navbar-dark-color;
+    border-color: $navbar-dark-toggler-border-color;
+  }
+
+  .navbar-toggler-icon {
+    background-image: escape-svg($navbar-dark-toggler-icon-bg);
+  }
+
+  .navbar-text {
+    color: $navbar-dark-color;
+    a {
+      color: $navbar-dark-active-color;
+
+      @include hover-focus() {
+        color: $navbar-dark-active-color;
+      }
+    }
+  }
+}

styles/bootstrap/_pagination.scss

@@ -1,74 +1,74 @@
-.pagination {
-  display: flex;
-  @include list-unstyled();
-  @include border-radius();
-}
-
-.page-link {
-  position: relative;
-  display: block;
-  padding: $pagination-padding-y $pagination-padding-x;
-  margin-left: -$pagination-border-width;
-  line-height: $pagination-line-height;
-  color: $pagination-color;
-  text-decoration: if($link-decoration == none, null, none);
-  background-color: $pagination-bg;
-  border: $pagination-border-width solid $pagination-border-color;
-
-  &:hover {
-    z-index: 2;
-    color: $pagination-hover-color;
-    text-decoration: none;
-    background-color: $pagination-hover-bg;
-    border-color: $pagination-hover-border-color;
-  }
-
-  &:focus {
-    z-index: 3;
-    outline: $pagination-focus-outline;
-    box-shadow: $pagination-focus-box-shadow;
-  }
-}
-
-.page-item {
-  &:first-child {
-    .page-link {
-      margin-left: 0;
-      @include border-left-radius($border-radius);
-    }
-  }
-  &:last-child {
-    .page-link {
-      @include border-right-radius($border-radius);
-    }
-  }
-
-  &.active .page-link {
-    z-index: 3;
-    color: $pagination-active-color;
-    background-color: $pagination-active-bg;
-    border-color: $pagination-active-border-color;
-  }
-
-  &.disabled .page-link {
-    color: $pagination-disabled-color;
-    pointer-events: none;
-    // Opinionated: remove the "hand" cursor set previously for .page-link
-    cursor: auto;
-    background-color: $pagination-disabled-bg;
-    border-color: $pagination-disabled-border-color;
-  }
-}
-
-
-//
-// Sizing
-//
-
-.pagination-lg {
-  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $pagination-border-radius-lg);
-}
-
-.pagination-sm {
-  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $pagination-border-radius-sm);
-}
+.pagination {
+  display: flex;
+  @include list-unstyled();
+  @include border-radius();
+}
+
+.page-link {
+  position: relative;
+  display: block;
+  padding: $pagination-padding-y $pagination-padding-x;
+  margin-left: -$pagination-border-width;
+  line-height: $pagination-line-height;
+  color: $pagination-color;
+  text-decoration: if($link-decoration == none, null, none);
+  background-color: $pagination-bg;
+  border: $pagination-border-width solid $pagination-border-color;
+
+  &:hover {
+    z-index: 2;
+    color: $pagination-hover-color;
+    text-decoration: none;
+    background-color: $pagination-hover-bg;
+    border-color: $pagination-hover-border-color;
+  }
+
+  &:focus {
+    z-index: 3;
+    outline: $pagination-focus-outline;
+    box-shadow: $pagination-focus-box-shadow;
+  }
+}
+
+.page-item {
+  &:first-child {
+    .page-link {
+      margin-left: 0;
+      @include border-left-radius($border-radius);
+    }
+  }
+  &:last-child {
+    .page-link {
+      @include border-right-radius($border-radius);
+    }
+  }
+
+  &.active .page-link {
+    z-index: 3;
+    color: $pagination-active-color;
+    background-color: $pagination-active-bg;
+    border-color: $pagination-active-border-color;
+  }
+
+  &.disabled .page-link {
+    color: $pagination-disabled-color;
+    pointer-events: none;
+    // Opinionated: remove the "hand" cursor set previously for .page-link
+    cursor: auto;
+    background-color: $pagination-disabled-bg;
+    border-color: $pagination-disabled-border-color;
+  }
+}
+
+
+//
+// Sizing
+//
+
+.pagination-lg {
+  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $pagination-border-radius-lg);
+}
+
+.pagination-sm {
+  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $pagination-border-radius-sm);
+}

styles/bootstrap/_popover.scss

@@ -1,170 +1,170 @@
-.popover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: $zindex-popover;
-  display: block;
-  max-width: $popover-max-width;
-  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-  // So reset our font and text properties to avoid inheriting weird values.
-  @include reset-text();
-  @include font-size($popover-font-size);
-  // Allow breaking very long words so they don't overflow the popover's bounds
-  word-wrap: break-word;
-  background-color: $popover-bg;
-  background-clip: padding-box;
-  border: $popover-border-width solid $popover-border-color;
-  @include border-radius($popover-border-radius);
-  @include box-shadow($popover-box-shadow);
-
-  .arrow {
-    position: absolute;
-    display: block;
-    width: $popover-arrow-width;
-    height: $popover-arrow-height;
-    margin: 0 $popover-border-radius;
-
-    &::before,
-    &::after {
-      position: absolute;
-      display: block;
-      content: "";
-      border-color: transparent;
-      border-style: solid;
-    }
-  }
-}
-
-.bs-popover-top {
-  margin-bottom: $popover-arrow-height;
-
-  > .arrow {
-    bottom: subtract(-$popover-arrow-height, $popover-border-width);
-
-    &::before {
-      bottom: 0;
-      border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
-      border-top-color: $popover-arrow-outer-color;
-    }
-
-    &::after {
-      bottom: $popover-border-width;
-      border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
-      border-top-color: $popover-arrow-color;
-    }
-  }
-}
-
-.bs-popover-right {
-  margin-left: $popover-arrow-height;
-
-  > .arrow {
-    left: subtract(-$popover-arrow-height, $popover-border-width);
-    width: $popover-arrow-height;
-    height: $popover-arrow-width;
-    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
-
-    &::before {
-      left: 0;
-      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
-      border-right-color: $popover-arrow-outer-color;
-    }
-
-    &::after {
-      left: $popover-border-width;
-      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
-      border-right-color: $popover-arrow-color;
-    }
-  }
-}
-
-.bs-popover-bottom {
-  margin-top: $popover-arrow-height;
-
-  > .arrow {
-    top: subtract(-$popover-arrow-height, $popover-border-width);
-
-    &::before {
-      top: 0;
-      border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
-      border-bottom-color: $popover-arrow-outer-color;
-    }
-
-    &::after {
-      top: $popover-border-width;
-      border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
-      border-bottom-color: $popover-arrow-color;
-    }
-  }
-
-  // This will remove the popover-header's border just below the arrow
-  .popover-header::before {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    display: block;
-    width: $popover-arrow-width;
-    margin-left: -$popover-arrow-width / 2;
-    content: "";
-    border-bottom: $popover-border-width solid $popover-header-bg;
-  }
-}
-
-.bs-popover-left {
-  margin-right: $popover-arrow-height;
-
-  > .arrow {
-    right: subtract(-$popover-arrow-height, $popover-border-width);
-    width: $popover-arrow-height;
-    height: $popover-arrow-width;
-    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
-
-    &::before {
-      right: 0;
-      border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
-      border-left-color: $popover-arrow-outer-color;
-    }
-
-    &::after {
-      right: $popover-border-width;
-      border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
-      border-left-color: $popover-arrow-color;
-    }
-  }
-}
-
-.bs-popover-auto {
-  &[x-placement^="top"] {
-    @extend .bs-popover-top;
-  }
-  &[x-placement^="right"] {
-    @extend .bs-popover-right;
-  }
-  &[x-placement^="bottom"] {
-    @extend .bs-popover-bottom;
-  }
-  &[x-placement^="left"] {
-    @extend .bs-popover-left;
-  }
-}
-
-
-// Offset the popover to account for the popover arrow
-.popover-header {
-  padding: $popover-header-padding-y $popover-header-padding-x;
-  margin-bottom: 0; // Reset the default from Reboot
-  @include font-size($font-size-base);
-  color: $popover-header-color;
-  background-color: $popover-header-bg;
-  border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
-  @include border-top-radius($popover-inner-border-radius);
-
-  &:empty {
-    display: none;
-  }
-}
-
-.popover-body {
-  padding: $popover-body-padding-y $popover-body-padding-x;
-  color: $popover-body-color;
-}
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $zindex-popover;
+  display: block;
+  max-width: $popover-max-width;
+  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  @include reset-text();
+  @include font-size($popover-font-size);
+  // Allow breaking very long words so they don't overflow the popover's bounds
+  word-wrap: break-word;
+  background-color: $popover-bg;
+  background-clip: padding-box;
+  border: $popover-border-width solid $popover-border-color;
+  @include border-radius($popover-border-radius);
+  @include box-shadow($popover-box-shadow);
+
+  .arrow {
+    position: absolute;
+    display: block;
+    width: $popover-arrow-width;
+    height: $popover-arrow-height;
+    margin: 0 $popover-border-radius;
+
+    &::before,
+    &::after {
+      position: absolute;
+      display: block;
+      content: "";
+      border-color: transparent;
+      border-style: solid;
+    }
+  }
+}
+
+.bs-popover-top {
+  margin-bottom: $popover-arrow-height;
+
+  > .arrow {
+    bottom: subtract(-$popover-arrow-height, $popover-border-width);
+
+    &::before {
+      bottom: 0;
+      border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-top-color: $popover-arrow-outer-color;
+    }
+
+    &::after {
+      bottom: $popover-border-width;
+      border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-top-color: $popover-arrow-color;
+    }
+  }
+}
+
+.bs-popover-right {
+  margin-left: $popover-arrow-height;
+
+  > .arrow {
+    left: subtract(-$popover-arrow-height, $popover-border-width);
+    width: $popover-arrow-height;
+    height: $popover-arrow-width;
+    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
+
+    &::before {
+      left: 0;
+      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-right-color: $popover-arrow-outer-color;
+    }
+
+    &::after {
+      left: $popover-border-width;
+      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-right-color: $popover-arrow-color;
+    }
+  }
+}
+
+.bs-popover-bottom {
+  margin-top: $popover-arrow-height;
+
+  > .arrow {
+    top: subtract(-$popover-arrow-height, $popover-border-width);
+
+    &::before {
+      top: 0;
+      border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+      border-bottom-color: $popover-arrow-outer-color;
+    }
+
+    &::after {
+      top: $popover-border-width;
+      border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+      border-bottom-color: $popover-arrow-color;
+    }
+  }
+
+  // This will remove the popover-header's border just below the arrow
+  .popover-header::before {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    display: block;
+    width: $popover-arrow-width;
+    margin-left: -$popover-arrow-width / 2;
+    content: "";
+    border-bottom: $popover-border-width solid $popover-header-bg;
+  }
+}
+
+.bs-popover-left {
+  margin-right: $popover-arrow-height;
+
+  > .arrow {
+    right: subtract(-$popover-arrow-height, $popover-border-width);
+    width: $popover-arrow-height;
+    height: $popover-arrow-width;
+    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
+
+    &::before {
+      right: 0;
+      border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+      border-left-color: $popover-arrow-outer-color;
+    }
+
+    &::after {
+      right: $popover-border-width;
+      border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+      border-left-color: $popover-arrow-color;
+    }
+  }
+}
+
+.bs-popover-auto {
+  &[x-placement^="top"] {
+    @extend .bs-popover-top;
+  }
+  &[x-placement^="right"] {
+    @extend .bs-popover-right;
+  }
+  &[x-placement^="bottom"] {
+    @extend .bs-popover-bottom;
+  }
+  &[x-placement^="left"] {
+    @extend .bs-popover-left;
+  }
+}
+
+
+// Offset the popover to account for the popover arrow
+.popover-header {
+  padding: $popover-header-padding-y $popover-header-padding-x;
+  margin-bottom: 0; // Reset the default from Reboot
+  @include font-size($font-size-base);
+  color: $popover-header-color;
+  background-color: $popover-header-bg;
+  border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
+  @include border-top-radius($popover-inner-border-radius);
+
+  &:empty {
+    display: none;
+  }
+}
+
+.popover-body {
+  padding: $popover-body-padding-y $popover-body-padding-x;
+  color: $popover-body-color;
+}

styles/bootstrap/_print.scss

@@ -1,141 +1,141 @@
-// stylelint-disable declaration-no-important, selector-no-qualifying-type
-
-// Source: https://github.com/h5bp/main.css/blob/master/src/_print.css
-
-// ==========================================================================
-// Print styles.
-// Inlined to avoid the additional HTTP request:
-// https://www.phpied.com/delay-loading-your-print-css/
-// ==========================================================================
-
-@if $enable-print-styles {
-  @media print {
-    *,
-    *::before,
-    *::after {
-      // Bootstrap specific; comment out `color` and `background`
-      //color: $black !important; // Black prints faster
-      text-shadow: none !important;
-      //background: transparent !important;
-      box-shadow: none !important;
-    }
-
-    a {
-      &:not(.btn) {
-        text-decoration: underline;
-      }
-    }
-
-    // Bootstrap specific; comment the following selector out
-    //a[href]::after {
-    //  content: " (" attr(href) ")";
-    //}
-
-    abbr[title]::after {
-      content: " (" attr(title) ")";
-    }
-
-    // Bootstrap specific; comment the following selector out
-    //
-    // Don't show links that are fragment identifiers,
-    // or use the `javascript:` pseudo protocol
-    //
-
-    //a[href^="#"]::after,
-    //a[href^="javascript:"]::after {
-    // content: "";
-    //}
-
-    pre {
-      white-space: pre-wrap !important;
-    }
-    pre,
-    blockquote {
-      border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px
-      page-break-inside: avoid;
-    }
-
-    //
-    // Printing Tables:
-    // https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
-    //
-
-    thead {
-      display: table-header-group;
-    }
-
-    tr,
-    img {
-      page-break-inside: avoid;
-    }
-
-    p,
-    h2,
-    h3 {
-      orphans: 3;
-      widows: 3;
-    }
-
-    h2,
-    h3 {
-      page-break-after: avoid;
-    }
-
-    // Bootstrap specific changes start
-
-    // Specify a size and min-width to make printing closer across browsers.
-    // We don't set margin here because it breaks `size` in Chrome. We also
-    // don't use `!important` on `size` as it breaks in Chrome.
-    @page {
-      size: $print-page-size;
-    }
-    body {
-      min-width: $print-body-min-width !important;
-    }
-    .container {
-      min-width: $print-body-min-width !important;
-    }
-
-    // Bootstrap components
-    .navbar {
-      display: none;
-    }
-    .badge {
-      border: $border-width solid $black;
-    }
-
-    .table {
-      border-collapse: collapse !important;
-
-      td,
-      th {
-        background-color: $white !important;
-      }
-    }
-
-    .table-bordered {
-      th,
-      td {
-        border: 1px solid $gray-300 !important;
-      }
-    }
-
-    .table-dark {
-      color: inherit;
-
-      th,
-      td,
-      thead th,
-      tbody + tbody {
-        border-color: $table-border-color;
-      }
-    }
-
-    .table .thead-dark th {
-      color: inherit;
-      border-color: $table-border-color;
-    }
-
-    // Bootstrap specific changes end
-  }
-}
+// stylelint-disable declaration-no-important, selector-no-qualifying-type
+
+// Source: https://github.com/h5bp/main.css/blob/master/src/_print.css
+
+// ==========================================================================
+// Print styles.
+// Inlined to avoid the additional HTTP request:
+// https://www.phpied.com/delay-loading-your-print-css/
+// ==========================================================================
+
+@if $enable-print-styles {
+  @media print {
+    *,
+    *::before,
+    *::after {
+      // Bootstrap specific; comment out `color` and `background`
+      //color: $black !important; // Black prints faster
+      text-shadow: none !important;
+      //background: transparent !important;
+      box-shadow: none !important;
+    }
+
+    a {
+      &:not(.btn) {
+        text-decoration: underline;
+      }
+    }
+
+    // Bootstrap specific; comment the following selector out
+    //a[href]::after {
+    //  content: " (" attr(href) ")";
+    //}
+
+    abbr[title]::after {
+      content: " (" attr(title) ")";
+    }
+
+    // Bootstrap specific; comment the following selector out
+    //
+    // Don't show links that are fragment identifiers,
+    // or use the `javascript:` pseudo protocol
+    //
+
+    //a[href^="#"]::after,
+    //a[href^="javascript:"]::after {
+    // content: "";
+    //}
+
+    pre {
+      white-space: pre-wrap !important;
+    }
+    pre,
+    blockquote {
+      border: $border-width solid $gray-500; // Bootstrap custom code; using `$border-width` instead of 1px
+      page-break-inside: avoid;
+    }
+
+    //
+    // Printing Tables:
+    // https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
+    //
+
+    thead {
+      display: table-header-group;
+    }
+
+    tr,
+    img {
+      page-break-inside: avoid;
+    }
+
+    p,
+    h2,
+    h3 {
+      orphans: 3;
+      widows: 3;
+    }
+
+    h2,
+    h3 {
+      page-break-after: avoid;
+    }
+
+    // Bootstrap specific changes start
+
+    // Specify a size and min-width to make printing closer across browsers.
+    // We don't set margin here because it breaks `size` in Chrome. We also
+    // don't use `!important` on `size` as it breaks in Chrome.
+    @page {
+      size: $print-page-size;
+    }
+    body {
+      min-width: $print-body-min-width !important;
+    }
+    .container {
+      min-width: $print-body-min-width !important;
+    }
+
+    // Bootstrap components
+    .navbar {
+      display: none;
+    }
+    .badge {
+      border: $border-width solid $black;
+    }
+
+    .table {
+      border-collapse: collapse !important;
+
+      td,
+      th {
+        background-color: $white !important;
+      }
+    }
+
+    .table-bordered {
+      th,
+      td {
+        border: 1px solid $gray-300 !important;
+      }
+    }
+
+    .table-dark {
+      color: inherit;
+
+      th,
+      td,
+      thead th,
+      tbody + tbody {
+        border-color: $table-border-color;
+      }
+    }
+
+    .table .thead-dark th {
+      color: inherit;
+      border-color: $table-border-color;
+    }
+
+    // Bootstrap specific changes end
+  }
+}

styles/bootstrap/_progress.scss

@@ -1,47 +1,47 @@
-// Disable animation if transitions are disabled
-@if $enable-transitions {
-  @keyframes progress-bar-stripes {
-    from { background-position: $progress-height 0; }
-    to { background-position: 0 0; }
-  }
-}
-
-.progress {
-  display: flex;
-  height: $progress-height;
-  overflow: hidden; // force rounded corners by cropping it
-  line-height: 0;
-  @include font-size($progress-font-size);
-  background-color: $progress-bg;
-  @include border-radius($progress-border-radius);
-  @include box-shadow($progress-box-shadow);
-}
-
-.progress-bar {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  overflow: hidden;
-  color: $progress-bar-color;
-  text-align: center;
-  white-space: nowrap;
-  background-color: $progress-bar-bg;
-  @include transition($progress-bar-transition);
-}
-
-.progress-bar-striped {
-  @include gradient-striped();
-  background-size: $progress-height $progress-height;
-}
-
-@if $enable-transitions {
-  .progress-bar-animated {
-    animation: $progress-bar-animation-timing progress-bar-stripes;
-
-    @if $enable-prefers-reduced-motion-media-query {
-      @media (prefers-reduced-motion: reduce) {
-        animation: none;
-      }
-    }
-  }
-}
+// Disable animation if transitions are disabled
+@if $enable-transitions {
+  @keyframes progress-bar-stripes {
+    from { background-position: $progress-height 0; }
+    to { background-position: 0 0; }
+  }
+}
+
+.progress {
+  display: flex;
+  height: $progress-height;
+  overflow: hidden; // force rounded corners by cropping it
+  line-height: 0;
+  @include font-size($progress-font-size);
+  background-color: $progress-bg;
+  @include border-radius($progress-border-radius);
+  @include box-shadow($progress-box-shadow);
+}
+
+.progress-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  color: $progress-bar-color;
+  text-align: center;
+  white-space: nowrap;
+  background-color: $progress-bar-bg;
+  @include transition($progress-bar-transition);
+}
+
+.progress-bar-striped {
+  @include gradient-striped();
+  background-size: $progress-height $progress-height;
+}
+
+@if $enable-transitions {
+  .progress-bar-animated {
+    animation: $progress-bar-animation-timing progress-bar-stripes;
+
+    @if $enable-prefers-reduced-motion-media-query {
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+    }
+  }
+}

styles/bootstrap/_reboot.scss

@@ -1,484 +1,484 @@
-// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
-
-// Reboot
-//
-// Normalization of HTML elements, manually forked from Normalize.css to remove
-// styles targeting irrelevant browsers while applying new styles.
-//
-// Normalize is licensed MIT. https://github.com/necolas/normalize.css
-
-
-// Document
-//
-// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
-// 2. Change the default font family in all browsers.
-// 3. Correct the line height in all browsers.
-// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
-// 5. Change the default tap highlight to be completely transparent in iOS.
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box; // 1
-}
-
-html {
-  font-family: sans-serif; // 2
-  line-height: 1.15; // 3
-  -webkit-text-size-adjust: 100%; // 4
-  -webkit-tap-highlight-color: rgba($black, 0); // 5
-}
-
-// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
-// TODO: remove in v5
-// stylelint-disable-next-line selector-list-comma-newline-after
-article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
-  display: block;
-}
-
-// Body
-//
-// 1. Remove the margin in all browsers.
-// 2. As a best practice, apply a default `background-color`.
-// 3. Set an explicit initial text-align value so that we can later use
-//    the `inherit` value on things like `<th>` elements.
-
-body {
-  margin: 0; // 1
-  font-family: $font-family-base;
-  @include font-size($font-size-base);
-  font-weight: $font-weight-base;
-  line-height: $line-height-base;
-  color: $body-color;
-  text-align: left; // 3
-  background-color: $body-bg; // 2
-}
-
-// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
-// on elements that programmatically receive focus but wouldn't normally show a visible
-// focus outline. In general, this would mean that the outline is only applied if the
-// interaction that led to the element receiving programmatic focus was a keyboard interaction,
-// or the browser has somehow determined that the user is primarily a keyboard user and/or
-// wants focus outlines to always be presented.
-//
-// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
-// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
-[tabindex="-1"]:focus:not(:focus-visible) {
-  outline: 0 !important;
-}
-
-
-// Content grouping
-//
-// 1. Add the correct box sizing in Firefox.
-// 2. Show the overflow in Edge and IE.
-
-hr {
-  box-sizing: content-box; // 1
-  height: 0; // 1
-  overflow: visible; // 2
-}
-
-
-//
-// Typography
-//
-
-// Remove top margins from headings
-//
-// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
-// margin for easier control within type scales as it avoids margin collapsing.
-// stylelint-disable-next-line selector-list-comma-newline-after
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: $headings-margin-bottom;
-}
-
-// Reset margins on paragraphs
-//
-// Similarly, the top margin on `<p>`s get reset. However, we also reset the
-// bottom margin to use `rem` units instead of `em`.
-p {
-  margin-top: 0;
-  margin-bottom: $paragraph-margin-bottom;
-}
-
-// Abbreviations
-//
-// 1. Duplicate behavior to the data-* attribute for our tooltip plugin
-// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-// 3. Add explicit cursor to indicate changed behavior.
-// 4. Remove the bottom border in Firefox 39-.
-// 5. Prevent the text-decoration to be skipped.
-
-abbr[title],
-abbr[data-original-title] { // 1
-  text-decoration: underline; // 2
-  text-decoration: underline dotted; // 2
-  cursor: help; // 3
-  border-bottom: 0; // 4
-  text-decoration-skip-ink: none; // 5
-}
-
-address {
-  margin-bottom: 1rem;
-  font-style: normal;
-  line-height: inherit;
-}
-
-ol,
-ul,
-dl {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
-  margin-bottom: 0;
-}
-
-dt {
-  font-weight: $dt-font-weight;
-}
-
-dd {
-  margin-bottom: .5rem;
-  margin-left: 0; // Undo browser default
-}
-
-blockquote {
-  margin: 0 0 1rem;
-}
-
-b,
-strong {
-  font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari
-}
-
-small {
-  @include font-size(80%); // Add the correct font size in all browsers
-}
-
-//
-// Prevent `sub` and `sup` elements from affecting the line height in
-// all browsers.
-//
-
-sub,
-sup {
-  position: relative;
-  @include font-size(75%);
-  line-height: 0;
-  vertical-align: baseline;
-}
-
-sub { bottom: -.25em; }
-sup { top: -.5em; }
-
-
-//
-// Links
-//
-
-a {
-  color: $link-color;
-  text-decoration: $link-decoration;
-  background-color: transparent; // Remove the gray background on active links in IE 10.
-
-  @include hover() {
-    color: $link-hover-color;
-    text-decoration: $link-hover-decoration;
-  }
-}
-
-// And undo these styles for placeholder links/named anchors (without href).
-// It would be more straightforward to just use a[href] in previous block, but that
-// causes specificity issues in many other styles that are too complex to fix.
-// See https://github.com/twbs/bootstrap/issues/19402
-
-a:not([href]):not([class]) {
-  color: inherit;
-  text-decoration: none;
-
-  @include hover() {
-    color: inherit;
-    text-decoration: none;
-  }
-}
-
-
-//
-// Code
-//
-
-pre,
-code,
-kbd,
-samp {
-  font-family: $font-family-monospace;
-  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
-}
-
-pre {
-  // Remove browser default top margin
-  margin-top: 0;
-  // Reset browser default of `1em` to use `rem`s
-  margin-bottom: 1rem;
-  // Don't allow content to break outside
-  overflow: auto;
-  // Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,
-  // making it impossible to interact with the content
-  -ms-overflow-style: scrollbar;
-}
-
-
-//
-// Figures
-//
-
-figure {
-  // Apply a consistent margin strategy (matches our type styles).
-  margin: 0 0 1rem;
-}
-
-
-//
-// Images and content
-//
-
-img {
-  vertical-align: middle;
-  border-style: none; // Remove the border on images inside links in IE 10-.
-}
-
-svg {
-  // Workaround for the SVG overflow bug in IE10/11 is still required.
-  // See https://github.com/twbs/bootstrap/issues/26878
-  overflow: hidden;
-  vertical-align: middle;
-}
-
-
-//
-// Tables
-//
-
-table {
-  border-collapse: collapse; // Prevent double borders
-}
-
-caption {
-  padding-top: $table-cell-padding;
-  padding-bottom: $table-cell-padding;
-  color: $table-caption-color;
-  text-align: left;
-  caption-side: bottom;
-}
-
-// 1. Removes font-weight bold by inheriting
-// 2. Matches default `<td>` alignment by inheriting `text-align`.
-// 3. Fix alignment for Safari
-
-th {
-  font-weight: $table-th-font-weight; // 1
-  text-align: inherit; // 2
-  text-align: -webkit-match-parent; // 3
-}
-
-
-//
-// Forms
-//
-
-label {
-  // Allow labels to use `margin` for spacing.
-  display: inline-block;
-  margin-bottom: $label-margin-bottom;
-}
-
-// Remove the default `border-radius` that macOS Chrome adds.
-//
-// Details at https://github.com/twbs/bootstrap/issues/24093
-button {
-  // stylelint-disable-next-line property-disallowed-list
-  border-radius: 0;
-}
-
-// Explicitly remove focus outline in Chromium when it shouldn't be
-// visible (e.g. as result of mouse click or touch tap). It already
-// should be doing this automatically, but seems to currently be
-// confused and applies its very visible two-tone outline anyway.
-
-button:focus:not(:focus-visible) {
-  outline: 0;
-}
-
-input,
-button,
-select,
-optgroup,
-textarea {
-  margin: 0; // Remove the margin in Firefox and Safari
-  font-family: inherit;
-  @include font-size(inherit);
-  line-height: inherit;
-}
-
-button,
-input {
-  overflow: visible; // Show the overflow in Edge
-}
-
-button,
-select {
-  text-transform: none; // Remove the inheritance of text transform in Firefox
-}
-
-// Set the cursor for non-`<button>` buttons
-//
-// Details at https://github.com/twbs/bootstrap/pull/30562
-[role="button"] {
-  cursor: pointer;
-}
-
-// Remove the inheritance of word-wrap in Safari.
-//
-// Details at https://github.com/twbs/bootstrap/issues/24990
-select {
-  word-wrap: normal;
-}
-
-
-// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
-//    controls in Android 4.
-// 2. Correct the inability to style clickable types in iOS and Safari.
-button,
-[type="button"], // 1
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; // 2
-}
-
-// Opinionated: add "hand" cursor to non-disabled button elements.
-@if $enable-pointer-cursor-for-buttons {
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    &:not(:disabled) {
-      cursor: pointer;
-    }
-  }
-}
-
-// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
-input[type="radio"],
-input[type="checkbox"] {
-  box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
-  padding: 0; // 2. Remove the padding in IE 10-
-}
-
-
-textarea {
-  overflow: auto; // Remove the default vertical scrollbar in IE.
-  // Textareas should really only resize vertically so they don't break their (horizontal) containers.
-  resize: vertical;
-}
-
-fieldset {
-  // Browsers set a default `min-width: min-content;` on fieldsets,
-  // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
-  // So we reset that to ensure fieldsets behave more like a standard block element.
-  // See https://github.com/twbs/bootstrap/issues/12359
-  // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
-  min-width: 0;
-  // Reset the default outline behavior of fieldsets so they don't affect page layout.
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-// 1. Correct the text wrapping in Edge and IE.
-// 2. Correct the color inheritance from `fieldset` elements in IE.
-legend {
-  display: block;
-  width: 100%;
-  max-width: 100%; // 1
-  padding: 0;
-  margin-bottom: .5rem;
-  @include font-size(1.5rem);
-  line-height: inherit;
-  color: inherit; // 2
-  white-space: normal; // 1
-}
-
-progress {
-  vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
-}
-
-// Correct the cursor style of increment and decrement buttons in Chrome.
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-[type="search"] {
-  // This overrides the extra rounded corners on search inputs in iOS so that our
-  // `.form-control` class can properly style them. Note that this cannot simply
-  // be added to `.form-control` as it's not specific enough. For details, see
-  // https://github.com/twbs/bootstrap/issues/11586.
-  outline-offset: -2px; // 2. Correct the outline style in Safari.
-  -webkit-appearance: none;
-}
-
-//
-// Remove the inner padding in Chrome and Safari on macOS.
-//
-
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-//
-// 1. Correct the inability to style clickable types in iOS and Safari.
-// 2. Change font properties to `inherit` in Safari.
-//
-
-::-webkit-file-upload-button {
-  font: inherit; // 2
-  -webkit-appearance: button; // 1
-}
-
-//
-// Correct element displays
-//
-
-output {
-  display: inline-block;
-}
-
-summary {
-  display: list-item; // Add the correct display in all browsers
-  cursor: pointer;
-}
-
-template {
-  display: none; // Add the correct display in IE
-}
-
-// Always hide an element with the `hidden` HTML attribute (from PureCSS).
-// Needed for proper display in IE 10-.
-[hidden] {
-  display: none !important;
-}
+// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+
+// Reboot
+//
+// Normalization of HTML elements, manually forked from Normalize.css to remove
+// styles targeting irrelevant browsers while applying new styles.
+//
+// Normalize is licensed MIT. https://github.com/necolas/normalize.css
+
+
+// Document
+//
+// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+// 2. Change the default font family in all browsers.
+// 3. Correct the line height in all browsers.
+// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+// 5. Change the default tap highlight to be completely transparent in iOS.
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box; // 1
+}
+
+html {
+  font-family: sans-serif; // 2
+  line-height: 1.15; // 3
+  -webkit-text-size-adjust: 100%; // 4
+  -webkit-tap-highlight-color: rgba($black, 0); // 5
+}
+
+// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
+// TODO: remove in v5
+// stylelint-disable-next-line selector-list-comma-newline-after
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
+
+// Body
+//
+// 1. Remove the margin in all browsers.
+// 2. As a best practice, apply a default `background-color`.
+// 3. Set an explicit initial text-align value so that we can later use
+//    the `inherit` value on things like `<th>` elements.
+
+body {
+  margin: 0; // 1
+  font-family: $font-family-base;
+  @include font-size($font-size-base);
+  font-weight: $font-weight-base;
+  line-height: $line-height-base;
+  color: $body-color;
+  text-align: left; // 3
+  background-color: $body-bg; // 2
+}
+
+// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
+// on elements that programmatically receive focus but wouldn't normally show a visible
+// focus outline. In general, this would mean that the outline is only applied if the
+// interaction that led to the element receiving programmatic focus was a keyboard interaction,
+// or the browser has somehow determined that the user is primarily a keyboard user and/or
+// wants focus outlines to always be presented.
+//
+// See https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
+// and https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
+[tabindex="-1"]:focus:not(:focus-visible) {
+  outline: 0 !important;
+}
+
+
+// Content grouping
+//
+// 1. Add the correct box sizing in Firefox.
+// 2. Show the overflow in Edge and IE.
+
+hr {
+  box-sizing: content-box; // 1
+  height: 0; // 1
+  overflow: visible; // 2
+}
+
+
+//
+// Typography
+//
+
+// Remove top margins from headings
+//
+// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
+// margin for easier control within type scales as it avoids margin collapsing.
+// stylelint-disable-next-line selector-list-comma-newline-after
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: $headings-margin-bottom;
+}
+
+// Reset margins on paragraphs
+//
+// Similarly, the top margin on `<p>`s get reset. However, we also reset the
+// bottom margin to use `rem` units instead of `em`.
+p {
+  margin-top: 0;
+  margin-bottom: $paragraph-margin-bottom;
+}
+
+// Abbreviations
+//
+// 1. Duplicate behavior to the data-* attribute for our tooltip plugin
+// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+// 3. Add explicit cursor to indicate changed behavior.
+// 4. Remove the bottom border in Firefox 39-.
+// 5. Prevent the text-decoration to be skipped.
+
+abbr[title],
+abbr[data-original-title] { // 1
+  text-decoration: underline; // 2
+  text-decoration: underline dotted; // 2
+  cursor: help; // 3
+  border-bottom: 0; // 4
+  text-decoration-skip-ink: none; // 5
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: $dt-font-weight;
+}
+
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0; // Undo browser default
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: $font-weight-bolder; // Add the correct font weight in Chrome, Edge, and Safari
+}
+
+small {
+  @include font-size(80%); // Add the correct font size in all browsers
+}
+
+//
+// Prevent `sub` and `sup` elements from affecting the line height in
+// all browsers.
+//
+
+sub,
+sup {
+  position: relative;
+  @include font-size(75%);
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub { bottom: -.25em; }
+sup { top: -.5em; }
+
+
+//
+// Links
+//
+
+a {
+  color: $link-color;
+  text-decoration: $link-decoration;
+  background-color: transparent; // Remove the gray background on active links in IE 10.
+
+  @include hover() {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
+}
+
+// And undo these styles for placeholder links/named anchors (without href).
+// It would be more straightforward to just use a[href] in previous block, but that
+// causes specificity issues in many other styles that are too complex to fix.
+// See https://github.com/twbs/bootstrap/issues/19402
+
+a:not([href]):not([class]) {
+  color: inherit;
+  text-decoration: none;
+
+  @include hover() {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+
+//
+// Code
+//
+
+pre,
+code,
+kbd,
+samp {
+  font-family: $font-family-monospace;
+  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
+}
+
+pre {
+  // Remove browser default top margin
+  margin-top: 0;
+  // Reset browser default of `1em` to use `rem`s
+  margin-bottom: 1rem;
+  // Don't allow content to break outside
+  overflow: auto;
+  // Disable auto-hiding scrollbar in IE & legacy Edge to avoid overlap,
+  // making it impossible to interact with the content
+  -ms-overflow-style: scrollbar;
+}
+
+
+//
+// Figures
+//
+
+figure {
+  // Apply a consistent margin strategy (matches our type styles).
+  margin: 0 0 1rem;
+}
+
+
+//
+// Images and content
+//
+
+img {
+  vertical-align: middle;
+  border-style: none; // Remove the border on images inside links in IE 10-.
+}
+
+svg {
+  // Workaround for the SVG overflow bug in IE10/11 is still required.
+  // See https://github.com/twbs/bootstrap/issues/26878
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+
+//
+// Tables
+//
+
+table {
+  border-collapse: collapse; // Prevent double borders
+}
+
+caption {
+  padding-top: $table-cell-padding;
+  padding-bottom: $table-cell-padding;
+  color: $table-caption-color;
+  text-align: left;
+  caption-side: bottom;
+}
+
+// 1. Removes font-weight bold by inheriting
+// 2. Matches default `<td>` alignment by inheriting `text-align`.
+// 3. Fix alignment for Safari
+
+th {
+  font-weight: $table-th-font-weight; // 1
+  text-align: inherit; // 2
+  text-align: -webkit-match-parent; // 3
+}
+
+
+//
+// Forms
+//
+
+label {
+  // Allow labels to use `margin` for spacing.
+  display: inline-block;
+  margin-bottom: $label-margin-bottom;
+}
+
+// Remove the default `border-radius` that macOS Chrome adds.
+//
+// Details at https://github.com/twbs/bootstrap/issues/24093
+button {
+  // stylelint-disable-next-line property-disallowed-list
+  border-radius: 0;
+}
+
+// Explicitly remove focus outline in Chromium when it shouldn't be
+// visible (e.g. as result of mouse click or touch tap). It already
+// should be doing this automatically, but seems to currently be
+// confused and applies its very visible two-tone outline anyway.
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0; // Remove the margin in Firefox and Safari
+  font-family: inherit;
+  @include font-size(inherit);
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible; // Show the overflow in Edge
+}
+
+button,
+select {
+  text-transform: none; // Remove the inheritance of text transform in Firefox
+}
+
+// Set the cursor for non-`<button>` buttons
+//
+// Details at https://github.com/twbs/bootstrap/pull/30562
+[role="button"] {
+  cursor: pointer;
+}
+
+// Remove the inheritance of word-wrap in Safari.
+//
+// Details at https://github.com/twbs/bootstrap/issues/24990
+select {
+  word-wrap: normal;
+}
+
+
+// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+//    controls in Android 4.
+// 2. Correct the inability to style clickable types in iOS and Safari.
+button,
+[type="button"], // 1
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; // 2
+}
+
+// Opinionated: add "hand" cursor to non-disabled button elements.
+@if $enable-pointer-cursor-for-buttons {
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    &:not(:disabled) {
+      cursor: pointer;
+    }
+  }
+}
+
+// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
+  padding: 0; // 2. Remove the padding in IE 10-
+}
+
+
+textarea {
+  overflow: auto; // Remove the default vertical scrollbar in IE.
+  // Textareas should really only resize vertically so they don't break their (horizontal) containers.
+  resize: vertical;
+}
+
+fieldset {
+  // Browsers set a default `min-width: min-content;` on fieldsets,
+  // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
+  // So we reset that to ensure fieldsets behave more like a standard block element.
+  // See https://github.com/twbs/bootstrap/issues/12359
+  // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+  min-width: 0;
+  // Reset the default outline behavior of fieldsets so they don't affect page layout.
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+// 1. Correct the text wrapping in Edge and IE.
+// 2. Correct the color inheritance from `fieldset` elements in IE.
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%; // 1
+  padding: 0;
+  margin-bottom: .5rem;
+  @include font-size(1.5rem);
+  line-height: inherit;
+  color: inherit; // 2
+  white-space: normal; // 1
+}
+
+progress {
+  vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+}
+
+// Correct the cursor style of increment and decrement buttons in Chrome.
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  // This overrides the extra rounded corners on search inputs in iOS so that our
+  // `.form-control` class can properly style them. Note that this cannot simply
+  // be added to `.form-control` as it's not specific enough. For details, see
+  // https://github.com/twbs/bootstrap/issues/11586.
+  outline-offset: -2px; // 2. Correct the outline style in Safari.
+  -webkit-appearance: none;
+}
+
+//
+// Remove the inner padding in Chrome and Safari on macOS.
+//
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+//
+// 1. Correct the inability to style clickable types in iOS and Safari.
+// 2. Change font properties to `inherit` in Safari.
+//
+
+::-webkit-file-upload-button {
+  font: inherit; // 2
+  -webkit-appearance: button; // 1
+}
+
+//
+// Correct element displays
+//
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item; // Add the correct display in all browsers
+  cursor: pointer;
+}
+
+template {
+  display: none; // Add the correct display in IE
+}
+
+// Always hide an element with the `hidden` HTML attribute (from PureCSS).
+// Needed for proper display in IE 10-.
+[hidden] {
+  display: none !important;
+}

styles/bootstrap/_root.scss

@@ -1,19 +1,19 @@
-:root {
-  // Custom variable values only support SassScript inside `#{}`.
-  @each $color, $value in $colors {
-    --#{$color}: #{$value};
-  }
-
-  @each $color, $value in $theme-colors {
-    --#{$color}: #{$value};
-  }
-
-  @each $bp, $value in $grid-breakpoints {
-    --breakpoint-#{$bp}: #{$value};
-  }
-
-  // Use `inspect` for lists so that quoted items keep the quotes.
-  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
-  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
-  --font-family-monospace: #{inspect($font-family-monospace)};
-}
+:root {
+  // Custom variable values only support SassScript inside `#{}`.
+  @each $color, $value in $colors {
+    --#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors {
+    --#{$color}: #{$value};
+  }
+
+  @each $bp, $value in $grid-breakpoints {
+    --breakpoint-#{$bp}: #{$value};
+  }
+
+  // Use `inspect` for lists so that quoted items keep the quotes.
+  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
+  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
+  --font-family-monospace: #{inspect($font-family-monospace)};
+}

styles/bootstrap/_spinners.scss

@@ -1,65 +1,65 @@
-//
-// Rotating border
-//
-
-@keyframes spinner-border {
-  to { transform: rotate(360deg); }
-}
-
-.spinner-border {
-  display: inline-block;
-  width: $spinner-width;
-  height: $spinner-height;
-  vertical-align: text-bottom;
-  border: $spinner-border-width solid currentColor;
-  border-right-color: transparent;
-  // stylelint-disable-next-line property-disallowed-list
-  border-radius: 50%;
-  animation: .75s linear infinite spinner-border;
-}
-
-.spinner-border-sm {
-  width: $spinner-width-sm;
-  height: $spinner-height-sm;
-  border-width: $spinner-border-width-sm;
-}
-
-//
-// Growing circle
-//
-
-@keyframes spinner-grow {
-  0% {
-    transform: scale(0);
-  }
-  50% {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.spinner-grow {
-  display: inline-block;
-  width: $spinner-width;
-  height: $spinner-height;
-  vertical-align: text-bottom;
-  background-color: currentColor;
-  // stylelint-disable-next-line property-disallowed-list
-  border-radius: 50%;
-  opacity: 0;
-  animation: .75s linear infinite spinner-grow;
-}
-
-.spinner-grow-sm {
-  width: $spinner-width-sm;
-  height: $spinner-height-sm;
-}
-
-@if $enable-prefers-reduced-motion-media-query {
-  @media (prefers-reduced-motion: reduce) {
-    .spinner-border,
-    .spinner-grow {
-      animation-duration: 1.5s;
-    }
-  }
-}
+//
+// Rotating border
+//
+
+@keyframes spinner-border {
+  to { transform: rotate(360deg); }
+}
+
+.spinner-border {
+  display: inline-block;
+  width: $spinner-width;
+  height: $spinner-height;
+  vertical-align: text-bottom;
+  border: $spinner-border-width solid currentColor;
+  border-right-color: transparent;
+  // stylelint-disable-next-line property-disallowed-list
+  border-radius: 50%;
+  animation: .75s linear infinite spinner-border;
+}
+
+.spinner-border-sm {
+  width: $spinner-width-sm;
+  height: $spinner-height-sm;
+  border-width: $spinner-border-width-sm;
+}
+
+//
+// Growing circle
+//
+
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.spinner-grow {
+  display: inline-block;
+  width: $spinner-width;
+  height: $spinner-height;
+  vertical-align: text-bottom;
+  background-color: currentColor;
+  // stylelint-disable-next-line property-disallowed-list
+  border-radius: 50%;
+  opacity: 0;
+  animation: .75s linear infinite spinner-grow;
+}
+
+.spinner-grow-sm {
+  width: $spinner-width-sm;
+  height: $spinner-height-sm;
+}
+
+@if $enable-prefers-reduced-motion-media-query {
+  @media (prefers-reduced-motion: reduce) {
+    .spinner-border,
+    .spinner-grow {
+      animation-duration: 1.5s;
+    }
+  }
+}

styles/bootstrap/_tables.scss

@@ -1,185 +1,185 @@
-//
-// Basic Bootstrap table
-//
-
-.table {
-  width: 100%;
-  margin-bottom: $spacer;
-  color: $table-color;
-  background-color: $table-bg; // Reset for nesting within parents with `background-color`.
-
-  th,
-  td {
-    padding: $table-cell-padding;
-    vertical-align: top;
-    border-top: $table-border-width solid $table-border-color;
-  }
-
-  thead th {
-    vertical-align: bottom;
-    border-bottom: (2 * $table-border-width) solid $table-border-color;
-  }
-
-  tbody + tbody {
-    border-top: (2 * $table-border-width) solid $table-border-color;
-  }
-}
-
-
-//
-// Condensed table w/ half padding
-//
-
-.table-sm {
-  th,
-  td {
-    padding: $table-cell-padding-sm;
-  }
-}
-
-
-// Border versions
-//
-// Add or remove borders all around the table and between all the columns.
-
-.table-bordered {
-  border: $table-border-width solid $table-border-color;
-
-  th,
-  td {
-    border: $table-border-width solid $table-border-color;
-  }
-
-  thead {
-    th,
-    td {
-      border-bottom-width: 2 * $table-border-width;
-    }
-  }
-}
-
-.table-borderless {
-  th,
-  td,
-  thead th,
-  tbody + tbody {
-    border: 0;
-  }
-}
-
-// Zebra-striping
-//
-// Default zebra-stripe styles (alternating gray and transparent backgrounds)
-
-.table-striped {
-  tbody tr:nth-of-type(#{$table-striped-order}) {
-    background-color: $table-accent-bg;
-  }
-}
-
-
-// Hover effect
-//
-// Placed here since it has to come after the potential zebra striping
-
-.table-hover {
-  tbody tr {
-    @include hover() {
-      color: $table-hover-color;
-      background-color: $table-hover-bg;
-    }
-  }
-}
-
-
-// Table backgrounds
-//
-// Exact selectors below required to override `.table-striped` and prevent
-// inheritance to nested tables.
-
-@each $color, $value in $theme-colors {
-  @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
-}
-
-@include table-row-variant(active, $table-active-bg);
-
-
-// Dark styles
-//
-// Same table markup, but inverted color scheme: dark background and light text.
-
-// stylelint-disable-next-line no-duplicate-selectors
-.table {
-  .thead-dark {
-    th {
-      color: $table-dark-color;
-      background-color: $table-dark-bg;
-      border-color: $table-dark-border-color;
-    }
-  }
-
-  .thead-light {
-    th {
-      color: $table-head-color;
-      background-color: $table-head-bg;
-      border-color: $table-border-color;
-    }
-  }
-}
-
-.table-dark {
-  color: $table-dark-color;
-  background-color: $table-dark-bg;
-
-  th,
-  td,
-  thead th {
-    border-color: $table-dark-border-color;
-  }
-
-  &.table-bordered {
-    border: 0;
-  }
-
-  &.table-striped {
-    tbody tr:nth-of-type(#{$table-striped-order}) {
-      background-color: $table-dark-accent-bg;
-    }
-  }
-
-  &.table-hover {
-    tbody tr {
-      @include hover() {
-        color: $table-dark-hover-color;
-        background-color: $table-dark-hover-bg;
-      }
-    }
-  }
-}
-
-
-// Responsive tables
-//
-// Generate series of `.table-responsive-*` classes for configuring the screen
-// size of where your table will overflow.
-
-.table-responsive {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($next, $grid-breakpoints);
-
-    &#{$infix} {
-      @include media-breakpoint-down($breakpoint) {
-        display: block;
-        width: 100%;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-
-        // Prevent double border on horizontal scroll due to use of `display: block;`
-        > .table-bordered {
-          border: 0;
-        }
-      }
-    }
-  }
-}
+//
+// Basic Bootstrap table
+//
+
+.table {
+  width: 100%;
+  margin-bottom: $spacer;
+  color: $table-color;
+  background-color: $table-bg; // Reset for nesting within parents with `background-color`.
+
+  th,
+  td {
+    padding: $table-cell-padding;
+    vertical-align: top;
+    border-top: $table-border-width solid $table-border-color;
+  }
+
+  thead th {
+    vertical-align: bottom;
+    border-bottom: (2 * $table-border-width) solid $table-border-color;
+  }
+
+  tbody + tbody {
+    border-top: (2 * $table-border-width) solid $table-border-color;
+  }
+}
+
+
+//
+// Condensed table w/ half padding
+//
+
+.table-sm {
+  th,
+  td {
+    padding: $table-cell-padding-sm;
+  }
+}
+
+
+// Border versions
+//
+// Add or remove borders all around the table and between all the columns.
+
+.table-bordered {
+  border: $table-border-width solid $table-border-color;
+
+  th,
+  td {
+    border: $table-border-width solid $table-border-color;
+  }
+
+  thead {
+    th,
+    td {
+      border-bottom-width: 2 * $table-border-width;
+    }
+  }
+}
+
+.table-borderless {
+  th,
+  td,
+  thead th,
+  tbody + tbody {
+    border: 0;
+  }
+}
+
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+.table-striped {
+  tbody tr:nth-of-type(#{$table-striped-order}) {
+    background-color: $table-accent-bg;
+  }
+}
+
+
+// Hover effect
+//
+// Placed here since it has to come after the potential zebra striping
+
+.table-hover {
+  tbody tr {
+    @include hover() {
+      color: $table-hover-color;
+      background-color: $table-hover-bg;
+    }
+  }
+}
+
+
+// Table backgrounds
+//
+// Exact selectors below required to override `.table-striped` and prevent
+// inheritance to nested tables.
+
+@each $color, $value in $theme-colors {
+  @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
+}
+
+@include table-row-variant(active, $table-active-bg);
+
+
+// Dark styles
+//
+// Same table markup, but inverted color scheme: dark background and light text.
+
+// stylelint-disable-next-line no-duplicate-selectors
+.table {
+  .thead-dark {
+    th {
+      color: $table-dark-color;
+      background-color: $table-dark-bg;
+      border-color: $table-dark-border-color;
+    }
+  }
+
+  .thead-light {
+    th {
+      color: $table-head-color;
+      background-color: $table-head-bg;
+      border-color: $table-border-color;
+    }
+  }
+}
+
+.table-dark {
+  color: $table-dark-color;
+  background-color: $table-dark-bg;
+
+  th,
+  td,
+  thead th {
+    border-color: $table-dark-border-color;
+  }
+
+  &.table-bordered {
+    border: 0;
+  }
+
+  &.table-striped {
+    tbody tr:nth-of-type(#{$table-striped-order}) {
+      background-color: $table-dark-accent-bg;
+    }
+  }
+
+  &.table-hover {
+    tbody tr {
+      @include hover() {
+        color: $table-dark-hover-color;
+        background-color: $table-dark-hover-bg;
+      }
+    }
+  }
+}
+
+
+// Responsive tables
+//
+// Generate series of `.table-responsive-*` classes for configuring the screen
+// size of where your table will overflow.
+
+.table-responsive {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+
+    &#{$infix} {
+      @include media-breakpoint-down($breakpoint) {
+        display: block;
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+
+        // Prevent double border on horizontal scroll due to use of `display: block;`
+        > .table-bordered {
+          border: 0;
+        }
+      }
+    }
+  }
+}

styles/bootstrap/_toasts.scss

@@ -1,46 +1,46 @@
-.toast {
-  // Prevents from shrinking in IE11, when in a flex container
-  // See https://github.com/twbs/bootstrap/issues/28341
-  flex-basis: $toast-max-width;
-  max-width: $toast-max-width;
-  @include font-size($toast-font-size);
-  color: $toast-color;
-  background-color: $toast-background-color;
-  background-clip: padding-box;
-  border: $toast-border-width solid $toast-border-color;
-  box-shadow: $toast-box-shadow;
-  opacity: 0;
-  @include border-radius($toast-border-radius);
-
-  &:not(:last-child) {
-    margin-bottom: $toast-padding-x;
-  }
-
-  &.showing {
-    opacity: 1;
-  }
-
-  &.show {
-    display: block;
-    opacity: 1;
-  }
-
-  &.hide {
-    display: none;
-  }
-}
-
-.toast-header {
-  display: flex;
-  align-items: center;
-  padding: $toast-padding-y $toast-padding-x;
-  color: $toast-header-color;
-  background-color: $toast-header-background-color;
-  background-clip: padding-box;
-  border-bottom: $toast-border-width solid $toast-header-border-color;
-  @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
-}
-
-.toast-body {
-  padding: $toast-padding-x; // apply to both vertical and horizontal
-}
+.toast {
+  // Prevents from shrinking in IE11, when in a flex container
+  // See https://github.com/twbs/bootstrap/issues/28341
+  flex-basis: $toast-max-width;
+  max-width: $toast-max-width;
+  @include font-size($toast-font-size);
+  color: $toast-color;
+  background-color: $toast-background-color;
+  background-clip: padding-box;
+  border: $toast-border-width solid $toast-border-color;
+  box-shadow: $toast-box-shadow;
+  opacity: 0;
+  @include border-radius($toast-border-radius);
+
+  &:not(:last-child) {
+    margin-bottom: $toast-padding-x;
+  }
+
+  &.showing {
+    opacity: 1;
+  }
+
+  &.show {
+    display: block;
+    opacity: 1;
+  }
+
+  &.hide {
+    display: none;
+  }
+}
+
+.toast-header {
+  display: flex;
+  align-items: center;
+  padding: $toast-padding-y $toast-padding-x;
+  color: $toast-header-color;
+  background-color: $toast-header-background-color;
+  background-clip: padding-box;
+  border-bottom: $toast-border-width solid $toast-header-border-color;
+  @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
+}
+
+.toast-body {
+  padding: $toast-padding-x; // apply to both vertical and horizontal
+}

styles/bootstrap/_tooltip.scss

@@ -1,115 +1,115 @@
-// Base class
-.tooltip {
-  position: absolute;
-  z-index: $zindex-tooltip;
-  display: block;
-  margin: $tooltip-margin;
-  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-  // So reset our font and text properties to avoid inheriting weird values.
-  @include reset-text();
-  @include font-size($tooltip-font-size);
-  // Allow breaking very long words so they don't overflow the tooltip's bounds
-  word-wrap: break-word;
-  opacity: 0;
-
-  &.show { opacity: $tooltip-opacity; }
-
-  .arrow {
-    position: absolute;
-    display: block;
-    width: $tooltip-arrow-width;
-    height: $tooltip-arrow-height;
-
-    &::before {
-      position: absolute;
-      content: "";
-      border-color: transparent;
-      border-style: solid;
-    }
-  }
-}
-
-.bs-tooltip-top {
-  padding: $tooltip-arrow-height 0;
-
-  .arrow {
-    bottom: 0;
-
-    &::before {
-      top: 0;
-      border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
-      border-top-color: $tooltip-arrow-color;
-    }
-  }
-}
-
-.bs-tooltip-right {
-  padding: 0 $tooltip-arrow-height;
-
-  .arrow {
-    left: 0;
-    width: $tooltip-arrow-height;
-    height: $tooltip-arrow-width;
-
-    &::before {
-      right: 0;
-      border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
-      border-right-color: $tooltip-arrow-color;
-    }
-  }
-}
-
-.bs-tooltip-bottom {
-  padding: $tooltip-arrow-height 0;
-
-  .arrow {
-    top: 0;
-
-    &::before {
-      bottom: 0;
-      border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
-      border-bottom-color: $tooltip-arrow-color;
-    }
-  }
-}
-
-.bs-tooltip-left {
-  padding: 0 $tooltip-arrow-height;
-
-  .arrow {
-    right: 0;
-    width: $tooltip-arrow-height;
-    height: $tooltip-arrow-width;
-
-    &::before {
-      left: 0;
-      border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
-      border-left-color: $tooltip-arrow-color;
-    }
-  }
-}
-
-.bs-tooltip-auto {
-  &[x-placement^="top"] {
-    @extend .bs-tooltip-top;
-  }
-  &[x-placement^="right"] {
-    @extend .bs-tooltip-right;
-  }
-  &[x-placement^="bottom"] {
-    @extend .bs-tooltip-bottom;
-  }
-  &[x-placement^="left"] {
-    @extend .bs-tooltip-left;
-  }
-}
-
-// Wrapper for the tooltip content
-.tooltip-inner {
-  max-width: $tooltip-max-width;
-  padding: $tooltip-padding-y $tooltip-padding-x;
-  color: $tooltip-color;
-  text-align: center;
-  background-color: $tooltip-bg;
-  @include border-radius($tooltip-border-radius);
-}
+// Base class
+.tooltip {
+  position: absolute;
+  z-index: $zindex-tooltip;
+  display: block;
+  margin: $tooltip-margin;
+  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  @include reset-text();
+  @include font-size($tooltip-font-size);
+  // Allow breaking very long words so they don't overflow the tooltip's bounds
+  word-wrap: break-word;
+  opacity: 0;
+
+  &.show { opacity: $tooltip-opacity; }
+
+  .arrow {
+    position: absolute;
+    display: block;
+    width: $tooltip-arrow-width;
+    height: $tooltip-arrow-height;
+
+    &::before {
+      position: absolute;
+      content: "";
+      border-color: transparent;
+      border-style: solid;
+    }
+  }
+}
+
+.bs-tooltip-top {
+  padding: $tooltip-arrow-height 0;
+
+  .arrow {
+    bottom: 0;
+
+    &::before {
+      top: 0;
+      border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+      border-top-color: $tooltip-arrow-color;
+    }
+  }
+}
+
+.bs-tooltip-right {
+  padding: 0 $tooltip-arrow-height;
+
+  .arrow {
+    left: 0;
+    width: $tooltip-arrow-height;
+    height: $tooltip-arrow-width;
+
+    &::before {
+      right: 0;
+      border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+      border-right-color: $tooltip-arrow-color;
+    }
+  }
+}
+
+.bs-tooltip-bottom {
+  padding: $tooltip-arrow-height 0;
+
+  .arrow {
+    top: 0;
+
+    &::before {
+      bottom: 0;
+      border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+      border-bottom-color: $tooltip-arrow-color;
+    }
+  }
+}
+
+.bs-tooltip-left {
+  padding: 0 $tooltip-arrow-height;
+
+  .arrow {
+    right: 0;
+    width: $tooltip-arrow-height;
+    height: $tooltip-arrow-width;
+
+    &::before {
+      left: 0;
+      border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+      border-left-color: $tooltip-arrow-color;
+    }
+  }
+}
+
+.bs-tooltip-auto {
+  &[x-placement^="top"] {
+    @extend .bs-tooltip-top;
+  }
+  &[x-placement^="right"] {
+    @extend .bs-tooltip-right;
+  }
+  &[x-placement^="bottom"] {
+    @extend .bs-tooltip-bottom;
+  }
+  &[x-placement^="left"] {
+    @extend .bs-tooltip-left;
+  }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+  max-width: $tooltip-max-width;
+  padding: $tooltip-padding-y $tooltip-padding-x;
+  color: $tooltip-color;
+  text-align: center;
+  background-color: $tooltip-bg;
+  @include border-radius($tooltip-border-radius);
+}

styles/bootstrap/_transitions.scss

@@ -1,20 +1,20 @@
-.fade {
-  @include transition($transition-fade);
-
-  &:not(.show) {
-    opacity: 0;
-  }
-}
-
-.collapse {
-  &:not(.show) {
-    display: none;
-  }
-}
-
-.collapsing {
-  position: relative;
-  height: 0;
-  overflow: hidden;
-  @include transition($transition-collapse);
-}
+.fade {
+  @include transition($transition-fade);
+
+  &:not(.show) {
+    opacity: 0;
+  }
+}
+
+.collapse {
+  &:not(.show) {
+    display: none;
+  }
+}
+
+.collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  @include transition($transition-collapse);
+}

styles/bootstrap/_type.scss

@@ -1,125 +1,136 @@
-// stylelint-disable selector-list-comma-newline-after
-
-//
-// Headings
-//
-
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6 {
-  margin-bottom: $headings-margin-bottom;
-  font-family: $headings-font-family;
-  font-weight: $headings-font-weight;
-  line-height: $headings-line-height;
-  color: $headings-color;
-}
-
-h1, .h1 { @include font-size($h1-font-size); }
-h2, .h2 { @include font-size($h2-font-size); }
-h3, .h3 { @include font-size($h3-font-size); }
-h4, .h4 { @include font-size($h4-font-size); }
-h5, .h5 { @include font-size($h5-font-size); }
-h6, .h6 { @include font-size($h6-font-size); }
-
-.lead {
-  @include font-size($lead-font-size);
-  font-weight: $lead-font-weight;
-}
-
-// Type display classes
-.display-1 {
-  @include font-size($display1-size);
-  font-weight: $display1-weight;
-  line-height: $display-line-height;
-}
-.display-2 {
-  @include font-size($display2-size);
-  font-weight: $display2-weight;
-  line-height: $display-line-height;
-}
-.display-3 {
-  @include font-size($display3-size);
-  font-weight: $display3-weight;
-  line-height: $display-line-height;
-}
-.display-4 {
-  @include font-size($display4-size);
-  font-weight: $display4-weight;
-  line-height: $display-line-height;
-}
-
-
-//
-// Horizontal rules
-//
-
-hr {
-  margin-top: $hr-margin-y;
-  margin-bottom: $hr-margin-y;
-  border: 0;
-  border-top: $hr-border-width solid $hr-border-color;
-}
-
-
-//
-// Emphasis
-//
-
-small,
-.small {
-  @include font-size($small-font-size);
-  font-weight: $font-weight-normal;
-}
-
-mark,
-.mark {
-  padding: $mark-padding;
-  background-color: $mark-bg;
-}
-
-
-//
-// Lists
-//
-
-.list-unstyled {
-  @include list-unstyled();
-}
-
-// Inline turns list items into inline-block
-.list-inline {
-  @include list-unstyled();
-}
-.list-inline-item {
-  display: inline-block;
-
-  &:not(:last-child) {
-    margin-right: $list-inline-padding;
-  }
-}
-
-
-//
-// Misc
-//
-
-// Builds on `abbr`
-.initialism {
-  @include font-size(90%);
-  text-transform: uppercase;
-}
-
-// Blockquotes
-.blockquote {
-  margin-bottom: $spacer;
-  @include font-size($blockquote-font-size);
-}
-
-.blockquote-footer {
-  display: block;
-  @include font-size($blockquote-small-font-size);
-  color: $blockquote-small-color;
-
-  &::before {
-    content: "\2014\00A0"; // em dash, nbsp
-  }
-}
+// stylelint-disable selector-list-comma-newline-after
+
+//
+// Headings
+//
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  margin-bottom: $headings-margin-bottom;
+  font-family: $headings-font-family;
+  font-weight: $headings-font-weight;
+  line-height: $headings-line-height;
+  color: $headings-color;
+}
+
+h1, .h1 { @include font-size($h1-font-size); }
+h2, .h2 { @include font-size($h2-font-size); }
+h3, .h3 { @include font-size($h3-font-size); }
+h4, .h4 { @include font-size($h4-font-size); }
+h5, .h5 { @include font-size($h5-font-size); }
+h6, .h6 { @include font-size($h6-font-size); }
+
+.lead {
+  @include font-size($lead-font-size);
+  font-weight: $lead-font-weight;
+  color: #000000;
+}
+
+// Type display classes
+.display-1 {
+  @include font-size($display1-size);
+  font-weight: $display1-weight;
+  line-height: $display-line-height;
+}
+.display-2 {
+  @include font-size($display2-size);
+  font-weight: $display2-weight;
+  line-height: $display-line-height;
+}
+.display-3 {
+  @include font-size($display3-size);
+  font-weight: $display3-weight;
+  line-height: $display-line-height;
+}
+.display-4 {
+  @include font-size($display4-size);
+  font-weight: $display4-weight;
+  line-height: $display-line-height;
+}
+
+.text-home{
+  margin-left: 55px;
+}
+
+
+//
+// Horizontal rules
+//
+
+hr {
+  margin-top: $hr-margin-y;
+  margin-bottom: $hr-margin-y;
+  border: 0;
+  border-top: $hr-border-width solid $hr-border-color;
+}
+
+
+//
+// Emphasis
+//
+
+small,
+.small {
+  @include font-size($small-font-size);
+  font-weight: $font-weight-normal;
+}
+
+mark,
+.mark {
+  padding: $mark-padding;
+  background-color: $mark-bg;
+}
+
+
+//
+// Lists
+//
+
+.list-unstyled {
+  @include list-unstyled();
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+  @include list-unstyled();
+}
+.list-inline-item {
+  display: inline-block;
+
+  &:not(:last-child) {
+    margin-right: $list-inline-padding;
+  }
+}
+
+
+//
+// Misc
+//
+
+// Builds on `abbr`
+.initialism {
+  @include font-size(90%);
+  text-transform: uppercase;
+}
+
+// Blockquotes
+.blockquote {
+  margin-bottom: $spacer;
+  @include font-size($blockquote-font-size);
+}
+
+.blockquote-footer {
+  display: block;
+  @include font-size($blockquote-small-font-size);
+  color: $blockquote-small-color;
+
+  &::before {
+    content: "\2014\00A0"; // em dash, nbsp
+  }
+}
+.display-5{
+  color: #000000;
+}
+.text-home-1{
+  font-size: 15px;
+}

styles/bootstrap/_utilities.scss

@@ -1,18 +1,18 @@
-@import "utilities/align";
-@import "utilities/background";
-@import "utilities/borders";
-@import "utilities/clearfix";
-@import "utilities/display";
-@import "utilities/embed";
-@import "utilities/flex";
-@import "utilities/float";
-@import "utilities/interactions";
-@import "utilities/overflow";
-@import "utilities/position";
-@import "utilities/screenreaders";
-@import "utilities/shadows";
-@import "utilities/sizing";
-@import "utilities/spacing";
-@import "utilities/stretched-link";
-@import "utilities/text";
-@import "utilities/visibility";
+@import "utilities/align";
+@import "utilities/background";
+@import "utilities/borders";
+@import "utilities/clearfix";
+@import "utilities/display";
+@import "utilities/embed";
+@import "utilities/flex";
+@import "utilities/float";
+@import "utilities/interactions";
+@import "utilities/overflow";
+@import "utilities/position";
+@import "utilities/screenreaders";
+@import "utilities/shadows";
+@import "utilities/sizing";
+@import "utilities/spacing";
+@import "utilities/stretched-link";
+@import "utilities/text";
+@import "utilities/visibility";

styles/bootstrap/_variables.scss

@@ -1,1146 +1,1146 @@
-// Variables
-//
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
-
-// Color system
-
-$white:    #fff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black:    #000 !default;
-
-$grays: () !default;
-$grays: map-merge(
-  (
-    "100": $gray-100,
-    "200": $gray-200,
-    "300": $gray-300,
-    "400": $gray-400,
-    "500": $gray-500,
-    "600": $gray-600,
-    "700": $gray-700,
-    "800": $gray-800,
-    "900": $gray-900
-  ),
-  $grays
-);
-
-$blue:    #007bff !default;
-$indigo:  #6610f2 !default;
-$purple:  #6f42c1 !default;
-$pink:    #e83e8c !default;
-$red:     #dc3545 !default;
-$orange:  #fd7e14 !default;
-$yellow:  #ffc107 !default;
-$green:   #28a745 !default;
-$teal:    #20c997 !default;
-$cyan:    #17a2b8 !default;
-
-$colors: () !default;
-$colors: map-merge(
-  (
-    "blue":       $blue,
-    "indigo":     $indigo,
-    "purple":     $purple,
-    "pink":       $pink,
-    "red":        $red,
-    "orange":     $orange,
-    "yellow":     $yellow,
-    "green":      $green,
-    "teal":       $teal,
-    "cyan":       $cyan,
-    "white":      $white,
-    "gray":       $gray-600,
-    "gray-dark":  $gray-800
-  ),
-  $colors
-);
-
-$primary:       $blue !default;
-$secondary:     $gray-600 !default;
-$success:       $green !default;
-$info:          $cyan !default;
-$warning:       $yellow !default;
-$danger:        $red !default;
-$light:         $gray-100 !default;
-$dark:          $gray-800 !default;
-
-$theme-colors: () !default;
-$theme-colors: map-merge(
-  (
-    "primary":    $primary,
-    "secondary":  $secondary,
-    "success":    $success,
-    "info":       $info,
-    "warning":    $warning,
-    "danger":     $danger,
-    "light":      $light,
-    "dark":       $dark
-  ),
-  $theme-colors
-);
-
-// Set a specific jump point for requesting color jumps
-$theme-color-interval:      8% !default;
-
-// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
-$yiq-contrasted-threshold:  150 !default;
-
-// Customize the light and dark text colors for use in our YIQ color contrast function.
-$yiq-text-dark:             $gray-900 !default;
-$yiq-text-light:            $white !default;
-
-// Characters which are escaped by the escape-svg function
-$escaped-characters: (
-  ("<", "%3c"),
-  (">", "%3e"),
-  ("#", "%23"),
-  ("(", "%28"),
-  (")", "%29"),
-) !default;
-
-
-// Options
-//
-// Quickly modify global styling by enabling or disabling optional features.
-
-$enable-caret:                                true !default;
-$enable-rounded:                              true !default;
-$enable-shadows:                              false !default;
-$enable-gradients:                            false !default;
-$enable-transitions:                          true !default;
-$enable-prefers-reduced-motion-media-query:   true !default;
-$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
-$enable-grid-classes:                         true !default;
-$enable-pointer-cursor-for-buttons:           true !default;
-$enable-print-styles:                         true !default;
-$enable-responsive-font-sizes:                false !default;
-$enable-validation-icons:                     true !default;
-$enable-deprecation-messages:                 true !default;
-
-
-// Spacing
-//
-// Control the default styling of most Bootstrap elements by modifying these
-// variables. Mostly focused on spacing.
-// You can add more entries to the $spacers map, should you need more variation.
-
-$spacer: 1rem !default;
-$spacers: () !default;
-$spacers: map-merge(
-  (
-    0: 0,
-    1: ($spacer * .25),
-    2: ($spacer * .5),
-    3: $spacer,
-    4: ($spacer * 1.5),
-    5: ($spacer * 3)
-  ),
-  $spacers
-);
-
-// This variable affects the `.h-*` and `.w-*` classes.
-$sizes: () !default;
-$sizes: map-merge(
-  (
-    25: 25%,
-    50: 50%,
-    75: 75%,
-    100: 100%,
-    auto: auto
-  ),
-  $sizes
-);
-
-
-// Body
-//
-// Settings for the `<body>` element.
-
-$body-bg:                   $white !default;
-$body-color:                $gray-900 !default;
-
-
-// Links
-//
-// Style anchor elements.
-
-$link-color:                              theme-color("primary") !default;
-$link-decoration:                         none !default;
-$link-hover-color:                        darken($link-color, 15%) !default;
-$link-hover-decoration:                   underline !default;
-// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
-$emphasized-link-hover-darken-percentage: 15% !default;
-
-// Paragraphs
-//
-// Style p element.
-
-$paragraph-margin-bottom:   1rem !default;
-
-
-// Grid breakpoints
-//
-// Define the minimum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
-
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px
-) !default;
-
-@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
-
-
-// Grid containers
-//
-// Define the maximum width of `.container` for different screen sizes.
-
-$container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px
-) !default;
-
-@include _assert-ascending($container-max-widths, "$container-max-widths");
-
-
-// Grid columns
-//
-// Set the number of columns and specify the width of the gutters.
-
-$grid-columns:                12 !default;
-$grid-gutter-width:           30px !default;
-$grid-row-columns:            6 !default;
-
-
-// Components
-//
-// Define common padding and border radius sizes and more.
-
-$line-height-lg:              1.5 !default;
-$line-height-sm:              1.5 !default;
-
-$border-width:                1px !default;
-$border-color:                $gray-300 !default;
-
-$border-radius:               .25rem !default;
-$border-radius-lg:            .3rem !default;
-$border-radius-sm:            .2rem !default;
-
-$rounded-pill:                50rem !default;
-
-$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
-$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
-$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
-
-$component-active-color:      $white !default;
-$component-active-bg:         theme-color("primary") !default;
-
-$caret-width:                 .3em !default;
-$caret-vertical-align:        $caret-width * .85 !default;
-$caret-spacing:               $caret-width * .85 !default;
-
-$transition-base:             all .2s ease-in-out !default;
-$transition-fade:             opacity .15s linear !default;
-$transition-collapse:         height .35s ease !default;
-
-$embed-responsive-aspect-ratios: () !default;
-$embed-responsive-aspect-ratios: join(
-  (
-    (21 9),
-    (16 9),
-    (4 3),
-    (1 1),
-  ),
-  $embed-responsive-aspect-ratios
-);
-
-// Typography
-//
-// Font, line-height, and color for body text, headings, and more.
-
-// stylelint-disable value-keyword-case
-$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-$font-family-base:            $font-family-sans-serif !default;
-// stylelint-enable value-keyword-case
-
-$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
-$font-size-lg:                $font-size-base * 1.25 !default;
-$font-size-sm:                $font-size-base * .875 !default;
-
-$font-weight-lighter:         lighter !default;
-$font-weight-light:           300 !default;
-$font-weight-normal:          400 !default;
-$font-weight-bold:            700 !default;
-$font-weight-bolder:          bolder !default;
-
-$font-weight-base:            $font-weight-normal !default;
-$line-height-base:            1.5 !default;
-
-$h1-font-size:                $font-size-base * 2.5 !default;
-$h2-font-size:                $font-size-base * 2 !default;
-$h3-font-size:                $font-size-base * 1.75 !default;
-$h4-font-size:                $font-size-base * 1.5 !default;
-$h5-font-size:                $font-size-base * 1.25 !default;
-$h6-font-size:                $font-size-base !default;
-
-$headings-margin-bottom:      $spacer / 2 !default;
-$headings-font-family:        null !default;
-$headings-font-weight:        500 !default;
-$headings-line-height:        1.2 !default;
-$headings-color:              null !default;
-
-$display1-size:               6rem !default;
-$display2-size:               5.5rem !default;
-$display3-size:               4.5rem !default;
-$display4-size:               3.5rem !default;
-
-$display1-weight:             300 !default;
-$display2-weight:             300 !default;
-$display3-weight:             300 !default;
-$display4-weight:             300 !default;
-$display-line-height:         $headings-line-height !default;
-
-$lead-font-size:              $font-size-base * 1.25 !default;
-$lead-font-weight:            300 !default;
-
-$small-font-size:             80% !default;
-
-$text-muted:                  $gray-600 !default;
-
-$blockquote-small-color:      $gray-600 !default;
-$blockquote-small-font-size:  $small-font-size !default;
-$blockquote-font-size:        $font-size-base * 1.25 !default;
-
-$hr-border-color:             rgba($black, .1) !default;
-$hr-border-width:             $border-width !default;
-
-$mark-padding:                .2em !default;
-
-$dt-font-weight:              $font-weight-bold !default;
-
-$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
-$nested-kbd-font-weight:      $font-weight-bold !default;
-
-$list-inline-padding:         .5rem !default;
-
-$mark-bg:                     #fcf8e3 !default;
-
-$hr-margin-y:                 $spacer !default;
-
-
-// Tables
-//
-// Customizes the `.table` component with basic values, each used across all table variations.
-
-$table-cell-padding:          .75rem !default;
-$table-cell-padding-sm:       .3rem !default;
-
-$table-color:                 $body-color !default;
-$table-bg:                    null !default;
-$table-accent-bg:             rgba($black, .05) !default;
-$table-hover-color:           $table-color !default;
-$table-hover-bg:              rgba($black, .075) !default;
-$table-active-bg:             $table-hover-bg !default;
-
-$table-border-width:          $border-width !default;
-$table-border-color:          $border-color !default;
-
-$table-head-bg:               $gray-200 !default;
-$table-head-color:            $gray-700 !default;
-$table-th-font-weight:        null !default;
-
-$table-dark-color:            $white !default;
-$table-dark-bg:               $gray-800 !default;
-$table-dark-accent-bg:        rgba($white, .05) !default;
-$table-dark-hover-color:      $table-dark-color !default;
-$table-dark-hover-bg:         rgba($white, .075) !default;
-$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;
-
-$table-striped-order:         odd !default;
-
-$table-caption-color:         $text-muted !default;
-
-$table-bg-level:              -9 !default;
-$table-border-level:          -6 !default;
-
-
-// Buttons + Forms
-//
-// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
-
-$input-btn-padding-y:         .375rem !default;
-$input-btn-padding-x:         .75rem !default;
-$input-btn-font-family:       null !default;
-$input-btn-font-size:         $font-size-base !default;
-$input-btn-line-height:       $line-height-base !default;
-
-$input-btn-focus-width:       .2rem !default;
-$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
-$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
-
-$input-btn-padding-y-sm:      .25rem !default;
-$input-btn-padding-x-sm:      .5rem !default;
-$input-btn-font-size-sm:      $font-size-sm !default;
-$input-btn-line-height-sm:    $line-height-sm !default;
-
-$input-btn-padding-y-lg:      .5rem !default;
-$input-btn-padding-x-lg:      1rem !default;
-$input-btn-font-size-lg:      $font-size-lg !default;
-$input-btn-line-height-lg:    $line-height-lg !default;
-
-$input-btn-border-width:      $border-width !default;
-
-
-// Buttons
-//
-// For each of Bootstrap's buttons, define text, background, and border color.
-
-$btn-padding-y:               $input-btn-padding-y !default;
-$btn-padding-x:               $input-btn-padding-x !default;
-$btn-font-family:             $input-btn-font-family !default;
-$btn-font-size:               $input-btn-font-size !default;
-$btn-line-height:             $input-btn-line-height !default;
-$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping
-
-$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
-$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
-$btn-font-size-sm:            $input-btn-font-size-sm !default;
-$btn-line-height-sm:          $input-btn-line-height-sm !default;
-
-$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
-$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
-$btn-font-size-lg:            $input-btn-font-size-lg !default;
-$btn-line-height-lg:          $input-btn-line-height-lg !default;
-
-$btn-border-width:            $input-btn-border-width !default;
-
-$btn-font-weight:             $font-weight-normal !default;
-$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
-$btn-focus-width:             $input-btn-focus-width !default;
-$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
-$btn-disabled-opacity:        .65 !default;
-$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
-
-$btn-link-disabled-color:     $gray-600 !default;
-
-$btn-block-spacing-y:         .5rem !default;
-
-// Allows for customizing button radius independently from global border radius
-$btn-border-radius:           $border-radius !default;
-$btn-border-radius-lg:        $border-radius-lg !default;
-$btn-border-radius-sm:        $border-radius-sm !default;
-
-$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-
-// Forms
-
-$label-margin-bottom:                   .5rem !default;
-
-$input-padding-y:                       $input-btn-padding-y !default;
-$input-padding-x:                       $input-btn-padding-x !default;
-$input-font-family:                     $input-btn-font-family !default;
-$input-font-size:                       $input-btn-font-size !default;
-$input-font-weight:                     $font-weight-base !default;
-$input-line-height:                     $input-btn-line-height !default;
-
-$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
-$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
-$input-font-size-sm:                    $input-btn-font-size-sm !default;
-$input-line-height-sm:                  $input-btn-line-height-sm !default;
-
-$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
-$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
-$input-font-size-lg:                    $input-btn-font-size-lg !default;
-$input-line-height-lg:                  $input-btn-line-height-lg !default;
-
-$input-bg:                              $white !default;
-$input-disabled-bg:                     $gray-200 !default;
-
-$input-color:                           $gray-700 !default;
-$input-border-color:                    $gray-400 !default;
-$input-border-width:                    $input-btn-border-width !default;
-$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;
-
-$input-border-radius:                   $border-radius !default;
-$input-border-radius-lg:                $border-radius-lg !default;
-$input-border-radius-sm:                $border-radius-sm !default;
-
-$input-focus-bg:                        $input-bg !default;
-$input-focus-border-color:              lighten($component-active-bg, 25%) !default;
-$input-focus-color:                     $input-color !default;
-$input-focus-width:                     $input-btn-focus-width !default;
-$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
-
-$input-placeholder-color:               $gray-600 !default;
-$input-plaintext-color:                 $body-color !default;
-
-$input-height-border:                   $input-border-width * 2 !default;
-
-$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
-$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
-$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y / 2) !default;
-
-$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
-$input-height-sm:                       add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
-$input-height-lg:                       add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
-
-$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-$form-text-margin-top:                  .25rem !default;
-
-$form-check-input-gutter:               1.25rem !default;
-$form-check-input-margin-y:             .3rem !default;
-$form-check-input-margin-x:             .25rem !default;
-
-$form-check-inline-margin-x:            .75rem !default;
-$form-check-inline-input-margin-x:      .3125rem !default;
-
-$form-grid-gutter-width:                10px !default;
-$form-group-margin-bottom:              1rem !default;
-
-$input-group-addon-color:               $input-color !default;
-$input-group-addon-bg:                  $gray-200 !default;
-$input-group-addon-border-color:        $input-border-color !default;
-
-$custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-$custom-control-gutter:                 .5rem !default;
-$custom-control-spacer-x:               1rem !default;
-$custom-control-cursor:                 null !default;
-
-$custom-control-indicator-size:         1rem !default;
-$custom-control-indicator-bg:           $input-bg !default;
-
-$custom-control-indicator-bg-size:      50% 50% !default;
-$custom-control-indicator-box-shadow:   $input-box-shadow !default;
-$custom-control-indicator-border-color: $gray-500 !default;
-$custom-control-indicator-border-width: $input-border-width !default;
-
-$custom-control-label-color:            null !default;
-
-$custom-control-indicator-disabled-bg:          $input-disabled-bg !default;
-$custom-control-label-disabled-color:           $gray-600 !default;
-
-$custom-control-indicator-checked-color:        $component-active-color !default;
-$custom-control-indicator-checked-bg:           $component-active-bg !default;
-$custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .5) !default;
-$custom-control-indicator-checked-box-shadow:   null !default;
-$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
-
-$custom-control-indicator-focus-box-shadow:     $input-focus-box-shadow !default;
-$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;
-
-$custom-control-indicator-active-color:         $component-active-color !default;
-$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
-$custom-control-indicator-active-box-shadow:    null !default;
-$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;
-
-$custom-checkbox-indicator-border-radius:       $border-radius !default;
-$custom-checkbox-indicator-icon-checked:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
-
-$custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;
-$custom-checkbox-indicator-indeterminate-color:        $custom-control-indicator-checked-color !default;
-$custom-checkbox-indicator-icon-indeterminate:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>") !default;
-$custom-checkbox-indicator-indeterminate-box-shadow:   null !default;
-$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
-
-$custom-radio-indicator-border-radius:          50% !default;
-$custom-radio-indicator-icon-checked:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
-
-$custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
-$custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
-$custom-switch-indicator-size:                  subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
-
-$custom-select-padding-y:           $input-padding-y !default;
-$custom-select-padding-x:           $input-padding-x !default;
-$custom-select-font-family:         $input-font-family !default;
-$custom-select-font-size:           $input-font-size !default;
-$custom-select-height:              $input-height !default;
-$custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
-$custom-select-font-weight:         $input-font-weight !default;
-$custom-select-line-height:         $input-line-height !default;
-$custom-select-color:               $input-color !default;
-$custom-select-disabled-color:      $gray-600 !default;
-$custom-select-bg:                  $input-bg !default;
-$custom-select-disabled-bg:         $gray-200 !default;
-$custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions
-$custom-select-indicator-color:     $gray-800 !default;
-$custom-select-indicator:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
-$custom-select-background:          escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
-
-$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
-$custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
-$custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;
-
-$custom-select-border-width:        $input-border-width !default;
-$custom-select-border-color:        $input-border-color !default;
-$custom-select-border-radius:       $border-radius !default;
-$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;
-
-$custom-select-focus-border-color:  $input-focus-border-color !default;
-$custom-select-focus-width:         $input-focus-width !default;
-$custom-select-focus-box-shadow:    0 0 0 $custom-select-focus-width $input-btn-focus-color !default;
-
-$custom-select-padding-y-sm:        $input-padding-y-sm !default;
-$custom-select-padding-x-sm:        $input-padding-x-sm !default;
-$custom-select-font-size-sm:        $input-font-size-sm !default;
-$custom-select-height-sm:           $input-height-sm !default;
-
-$custom-select-padding-y-lg:        $input-padding-y-lg !default;
-$custom-select-padding-x-lg:        $input-padding-x-lg !default;
-$custom-select-font-size-lg:        $input-font-size-lg !default;
-$custom-select-height-lg:           $input-height-lg !default;
-
-$custom-range-track-width:          100% !default;
-$custom-range-track-height:         .5rem !default;
-$custom-range-track-cursor:         pointer !default;
-$custom-range-track-bg:             $gray-300 !default;
-$custom-range-track-border-radius:  1rem !default;
-$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;
-
-$custom-range-thumb-width:                   1rem !default;
-$custom-range-thumb-height:                  $custom-range-thumb-width !default;
-$custom-range-thumb-bg:                      $component-active-bg !default;
-$custom-range-thumb-border:                  0 !default;
-$custom-range-thumb-border-radius:           1rem !default;
-$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
-$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
-$custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
-$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
-$custom-range-thumb-disabled-bg:             $gray-500 !default;
-
-$custom-file-height:                $input-height !default;
-$custom-file-height-inner:          $input-height-inner !default;
-$custom-file-focus-border-color:    $input-focus-border-color !default;
-$custom-file-focus-box-shadow:      $input-focus-box-shadow !default;
-$custom-file-disabled-bg:           $input-disabled-bg !default;
-
-$custom-file-padding-y:             $input-padding-y !default;
-$custom-file-padding-x:             $input-padding-x !default;
-$custom-file-line-height:           $input-line-height !default;
-$custom-file-font-family:           $input-font-family !default;
-$custom-file-font-weight:           $input-font-weight !default;
-$custom-file-color:                 $input-color !default;
-$custom-file-bg:                    $input-bg !default;
-$custom-file-border-width:          $input-border-width !default;
-$custom-file-border-color:          $input-border-color !default;
-$custom-file-border-radius:         $input-border-radius !default;
-$custom-file-box-shadow:            $input-box-shadow !default;
-$custom-file-button-color:          $custom-file-color !default;
-$custom-file-button-bg:             $input-group-addon-bg !default;
-$custom-file-text: (
-  en: "Browse"
-) !default;
-
-
-// Form validation
-
-$form-feedback-margin-top:          $form-text-margin-top !default;
-$form-feedback-font-size:           $small-font-size !default;
-$form-feedback-valid-color:         theme-color("success") !default;
-$form-feedback-invalid-color:       theme-color("danger") !default;
-
-$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
-$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
-$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
-$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
-
-$form-validation-states: () !default;
-$form-validation-states: map-merge(
-  (
-    "valid": (
-      "color": $form-feedback-valid-color,
-      "icon": $form-feedback-icon-valid
-    ),
-    "invalid": (
-      "color": $form-feedback-invalid-color,
-      "icon": $form-feedback-icon-invalid
-    ),
-  ),
-  $form-validation-states
-);
-
-// Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
-
-$zindex-dropdown:                   1000 !default;
-$zindex-sticky:                     1020 !default;
-$zindex-fixed:                      1030 !default;
-$zindex-modal-backdrop:             1040 !default;
-$zindex-modal:                      1050 !default;
-$zindex-popover:                    1060 !default;
-$zindex-tooltip:                    1070 !default;
-
-
-// Navs
-
-$nav-link-padding-y:                .5rem !default;
-$nav-link-padding-x:                1rem !default;
-$nav-link-disabled-color:           $gray-600 !default;
-
-$nav-tabs-border-color:             $gray-300 !default;
-$nav-tabs-border-width:             $border-width !default;
-$nav-tabs-border-radius:            $border-radius !default;
-$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
-$nav-tabs-link-active-color:        $gray-700 !default;
-$nav-tabs-link-active-bg:           $body-bg !default;
-$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
-
-$nav-pills-border-radius:           $border-radius !default;
-$nav-pills-link-active-color:       $component-active-color !default;
-$nav-pills-link-active-bg:          $component-active-bg !default;
-
-$nav-divider-color:                 $gray-200 !default;
-$nav-divider-margin-y:              $spacer / 2 !default;
-
-
-// Navbar
-
-$navbar-padding-y:                  $spacer / 2 !default;
-$navbar-padding-x:                  $spacer !default;
-
-$navbar-nav-link-padding-x:         .5rem !default;
-
-$navbar-brand-font-size:            $font-size-lg !default;
-// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
-$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
-
-$navbar-toggler-padding-y:          .25rem !default;
-$navbar-toggler-padding-x:          .75rem !default;
-$navbar-toggler-font-size:          $font-size-lg !default;
-$navbar-toggler-border-radius:      $btn-border-radius !default;
-
-$navbar-nav-scroll-max-height:      75vh !default;
-
-$navbar-dark-color:                 rgba($white, .5) !default;
-$navbar-dark-hover-color:           rgba($white, .75) !default;
-$navbar-dark-active-color:          $white !default;
-$navbar-dark-disabled-color:        rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-dark-toggler-border-color:  rgba($white, .1) !default;
-
-$navbar-light-color:                rgba($black, .5) !default;
-$navbar-light-hover-color:          rgba($black, .7) !default;
-$navbar-light-active-color:         rgba($black, .9) !default;
-$navbar-light-disabled-color:       rgba($black, .3) !default;
-$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-light-toggler-border-color: rgba($black, .1) !default;
-
-$navbar-light-brand-color:                $navbar-light-active-color !default;
-$navbar-light-brand-hover-color:          $navbar-light-active-color !default;
-$navbar-dark-brand-color:                 $navbar-dark-active-color !default;
-$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
-
-
-// Dropdowns
-//
-// Dropdown menu container and contents.
-
-$dropdown-min-width:                10rem !default;
-$dropdown-padding-x:                0 !default;
-$dropdown-padding-y:                .5rem !default;
-$dropdown-spacer:                   .125rem !default;
-$dropdown-font-size:                $font-size-base !default;
-$dropdown-color:                    $body-color !default;
-$dropdown-bg:                       $white !default;
-$dropdown-border-color:             rgba($black, .15) !default;
-$dropdown-border-radius:            $border-radius !default;
-$dropdown-border-width:             $border-width !default;
-$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
-$dropdown-divider-bg:               $gray-200 !default;
-$dropdown-divider-margin-y:         $nav-divider-margin-y !default;
-$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
-
-$dropdown-link-color:               $gray-900 !default;
-$dropdown-link-hover-color:         darken($gray-900, 5%) !default;
-$dropdown-link-hover-bg:            $gray-200 !default;
-
-$dropdown-link-active-color:        $component-active-color !default;
-$dropdown-link-active-bg:           $component-active-bg !default;
-
-$dropdown-link-disabled-color:      $gray-500 !default;
-
-$dropdown-item-padding-y:           .25rem !default;
-$dropdown-item-padding-x:           1.5rem !default;
-
-$dropdown-header-color:             $gray-600 !default;
-$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;
-
-
-// Pagination
-
-$pagination-padding-y:              .5rem !default;
-$pagination-padding-x:              .75rem !default;
-$pagination-padding-y-sm:           .25rem !default;
-$pagination-padding-x-sm:           .5rem !default;
-$pagination-padding-y-lg:           .75rem !default;
-$pagination-padding-x-lg:           1.5rem !default;
-$pagination-line-height:            1.25 !default;
-
-$pagination-color:                  $link-color !default;
-$pagination-bg:                     $white !default;
-$pagination-border-width:           $border-width !default;
-$pagination-border-color:           $gray-300 !default;
-
-$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
-$pagination-focus-outline:          0 !default;
-
-$pagination-hover-color:            $link-hover-color !default;
-$pagination-hover-bg:               $gray-200 !default;
-$pagination-hover-border-color:     $gray-300 !default;
-
-$pagination-active-color:           $component-active-color !default;
-$pagination-active-bg:              $component-active-bg !default;
-$pagination-active-border-color:    $pagination-active-bg !default;
-
-$pagination-disabled-color:         $gray-600 !default;
-$pagination-disabled-bg:            $white !default;
-$pagination-disabled-border-color:  $gray-300 !default;
-
-$pagination-border-radius-sm:       $border-radius-sm !default;
-$pagination-border-radius-lg:       $border-radius-lg !default;
-
-// Jumbotron
-
-$jumbotron-padding:                 2rem !default;
-$jumbotron-color:                   null !default;
-$jumbotron-bg:                      $gray-200 !default;
-
-
-// Cards
-
-$card-spacer-y:                     .75rem !default;
-$card-spacer-x:                     1.25rem !default;
-$card-border-width:                 $border-width !default;
-$card-border-radius:                $border-radius !default;
-$card-border-color:                 rgba($black, .125) !default;
-$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
-$card-cap-bg:                       rgba($black, .03) !default;
-$card-cap-color:                    null !default;
-$card-height:                       null !default;
-$card-color:                        null !default;
-$card-bg:                           $white !default;
-
-$card-img-overlay-padding:          1.25rem !default;
-
-$card-group-margin:                 $grid-gutter-width / 2 !default;
-$card-deck-margin:                  $card-group-margin !default;
-
-$card-columns-count:                3 !default;
-$card-columns-gap:                  1.25rem !default;
-$card-columns-margin:               $card-spacer-y !default;
-
-
-// Tooltips
-
-$tooltip-font-size:                 $font-size-sm !default;
-$tooltip-max-width:                 200px !default;
-$tooltip-color:                     $white !default;
-$tooltip-bg:                        $black !default;
-$tooltip-border-radius:             $border-radius !default;
-$tooltip-opacity:                   .9 !default;
-$tooltip-padding-y:                 .25rem !default;
-$tooltip-padding-x:                 .5rem !default;
-$tooltip-margin:                    0 !default;
-
-$tooltip-arrow-width:               .8rem !default;
-$tooltip-arrow-height:              .4rem !default;
-$tooltip-arrow-color:               $tooltip-bg !default;
-
-// Form tooltips must come after regular tooltips
-$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
-$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
-$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
-$form-feedback-tooltip-line-height:   $line-height-base !default;
-$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
-$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
-
-
-// Popovers
-
-$popover-font-size:                 $font-size-sm !default;
-$popover-bg:                        $white !default;
-$popover-max-width:                 276px !default;
-$popover-border-width:              $border-width !default;
-$popover-border-color:              rgba($black, .2) !default;
-$popover-border-radius:             $border-radius-lg !default;
-$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
-$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
-
-$popover-header-bg:                 darken($popover-bg, 3%) !default;
-$popover-header-color:              $headings-color !default;
-$popover-header-padding-y:          .5rem !default;
-$popover-header-padding-x:          .75rem !default;
-
-$popover-body-color:                $body-color !default;
-$popover-body-padding-y:            $popover-header-padding-y !default;
-$popover-body-padding-x:            $popover-header-padding-x !default;
-
-$popover-arrow-width:               1rem !default;
-$popover-arrow-height:              .5rem !default;
-$popover-arrow-color:               $popover-bg !default;
-
-$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
-
-
-// Toasts
-
-$toast-max-width:                   350px !default;
-$toast-padding-x:                   .75rem !default;
-$toast-padding-y:                   .25rem !default;
-$toast-font-size:                   .875rem !default;
-$toast-color:                       null !default;
-$toast-background-color:            rgba($white, .85) !default;
-$toast-border-width:                1px !default;
-$toast-border-color:                rgba(0, 0, 0, .1) !default;
-$toast-border-radius:               .25rem !default;
-$toast-box-shadow:                  0 .25rem .75rem rgba($black, .1) !default;
-
-$toast-header-color:                $gray-600 !default;
-$toast-header-background-color:     rgba($white, .85) !default;
-$toast-header-border-color:         rgba(0, 0, 0, .05) !default;
-
-
-// Badges
-
-$badge-font-size:                   75% !default;
-$badge-font-weight:                 $font-weight-bold !default;
-$badge-padding-y:                   .25em !default;
-$badge-padding-x:                   .4em !default;
-$badge-border-radius:               $border-radius !default;
-
-$badge-transition:                  $btn-transition !default;
-$badge-focus-width:                 $input-btn-focus-width !default;
-
-$badge-pill-padding-x:              .6em !default;
-// Use a higher than normal value to ensure completely rounded edges when
-// customizing padding or font-size on labels.
-$badge-pill-border-radius:          10rem !default;
-
-
-// Modals
-
-// Padding applied to the modal body
-$modal-inner-padding:               1rem !default;
-
-// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
-$modal-footer-margin-between:       .5rem !default;
-
-$modal-dialog-margin:               .5rem !default;
-$modal-dialog-margin-y-sm-up:       1.75rem !default;
-
-$modal-title-line-height:           $line-height-base !default;
-
-$modal-content-color:               null !default;
-$modal-content-bg:                  $white !default;
-$modal-content-border-color:        rgba($black, .2) !default;
-$modal-content-border-width:        $border-width !default;
-$modal-content-border-radius:       $border-radius-lg !default;
-$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;
-$modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .5) !default;
-
-$modal-backdrop-bg:                 $black !default;
-$modal-backdrop-opacity:            .5 !default;
-$modal-header-border-color:         $border-color !default;
-$modal-footer-border-color:         $modal-header-border-color !default;
-$modal-header-border-width:         $modal-content-border-width !default;
-$modal-footer-border-width:         $modal-header-border-width !default;
-$modal-header-padding-y:            1rem !default;
-$modal-header-padding-x:            1rem !default;
-$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
-
-$modal-xl:                          1140px !default;
-$modal-lg:                          800px !default;
-$modal-md:                          500px !default;
-$modal-sm:                          300px !default;
-
-$modal-fade-transform:              translate(0, -50px) !default;
-$modal-show-transform:              none !default;
-$modal-transition:                  transform .3s ease-out !default;
-$modal-scale-transform:             scale(1.02) !default;
-
-
-// Alerts
-//
-// Define alert colors, border radius, and padding.
-
-$alert-padding-y:                   .75rem !default;
-$alert-padding-x:                   1.25rem !default;
-$alert-margin-bottom:               1rem !default;
-$alert-border-radius:               $border-radius !default;
-$alert-link-font-weight:            $font-weight-bold !default;
-$alert-border-width:                $border-width !default;
-
-$alert-bg-level:                    -10 !default;
-$alert-border-level:                -9 !default;
-$alert-color-level:                 6 !default;
-
-
-// Progress bars
-
-$progress-height:                   1rem !default;
-$progress-font-size:                $font-size-base * .75 !default;
-$progress-bg:                       $gray-200 !default;
-$progress-border-radius:            $border-radius !default;
-$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;
-$progress-bar-color:                $white !default;
-$progress-bar-bg:                   theme-color("primary") !default;
-$progress-bar-animation-timing:     1s linear infinite !default;
-$progress-bar-transition:           width .6s ease !default;
-
-
-// List group
-
-$list-group-color:                  null !default;
-$list-group-bg:                     $white !default;
-$list-group-border-color:           rgba($black, .125) !default;
-$list-group-border-width:           $border-width !default;
-$list-group-border-radius:          $border-radius !default;
-
-$list-group-item-padding-y:         .75rem !default;
-$list-group-item-padding-x:         1.25rem !default;
-
-$list-group-hover-bg:               $gray-100 !default;
-$list-group-active-color:           $component-active-color !default;
-$list-group-active-bg:              $component-active-bg !default;
-$list-group-active-border-color:    $list-group-active-bg !default;
-
-$list-group-disabled-color:         $gray-600 !default;
-$list-group-disabled-bg:            $list-group-bg !default;
-
-$list-group-action-color:           $gray-700 !default;
-$list-group-action-hover-color:     $list-group-action-color !default;
-
-$list-group-action-active-color:    $body-color !default;
-$list-group-action-active-bg:       $gray-200 !default;
-
-
-// Image thumbnails
-
-$thumbnail-padding:                 .25rem !default;
-$thumbnail-bg:                      $body-bg !default;
-$thumbnail-border-width:            $border-width !default;
-$thumbnail-border-color:            $gray-300 !default;
-$thumbnail-border-radius:           $border-radius !default;
-$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;
-
-
-// Figures
-
-$figure-caption-font-size:          90% !default;
-$figure-caption-color:              $gray-600 !default;
-
-
-// Breadcrumbs
-
-$breadcrumb-font-size:              null !default;
-
-$breadcrumb-padding-y:              .75rem !default;
-$breadcrumb-padding-x:              1rem !default;
-$breadcrumb-item-padding:           .5rem !default;
-
-$breadcrumb-margin-bottom:          1rem !default;
-
-$breadcrumb-bg:                     $gray-200 !default;
-$breadcrumb-divider-color:          $gray-600 !default;
-$breadcrumb-active-color:           $gray-600 !default;
-$breadcrumb-divider:                quote("/") !default;
-
-$breadcrumb-border-radius:          $border-radius !default;
-
-
-// Carousel
-
-$carousel-control-color:             $white !default;
-$carousel-control-width:             15% !default;
-$carousel-control-opacity:           .5 !default;
-$carousel-control-hover-opacity:     .9 !default;
-$carousel-control-transition:        opacity .15s ease !default;
-
-$carousel-indicator-width:           30px !default;
-$carousel-indicator-height:          3px !default;
-$carousel-indicator-hit-area-height: 10px !default;
-$carousel-indicator-spacer:          3px !default;
-$carousel-indicator-active-bg:       $white !default;
-$carousel-indicator-transition:      opacity .6s ease !default;
-
-$carousel-caption-width:             70% !default;
-$carousel-caption-color:             $white !default;
-
-$carousel-control-icon-width:        20px !default;
-
-$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
-$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
-
-$carousel-transition-duration:       .6s !default;
-$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
-
-
-// Spinners
-
-$spinner-width:         2rem !default;
-$spinner-height:        $spinner-width !default;
-$spinner-border-width:  .25em !default;
-
-$spinner-width-sm:        1rem !default;
-$spinner-height-sm:       $spinner-width-sm !default;
-$spinner-border-width-sm: .2em !default;
-
-
-// Close
-
-$close-font-size:                   $font-size-base * 1.5 !default;
-$close-font-weight:                 $font-weight-bold !default;
-$close-color:                       $black !default;
-$close-text-shadow:                 0 1px 0 $white !default;
-
-
-// Code
-
-$code-font-size:                    87.5% !default;
-$code-color:                        $pink !default;
-
-$kbd-padding-y:                     .2rem !default;
-$kbd-padding-x:                     .4rem !default;
-$kbd-font-size:                     $code-font-size !default;
-$kbd-color:                         $white !default;
-$kbd-bg:                            $gray-900 !default;
-
-$pre-color:                         $gray-900 !default;
-$pre-scrollable-max-height:         340px !default;
-
-
-// Utilities
-
-$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
-$overflows: auto, hidden !default;
-$positions: static, relative, absolute, fixed, sticky !default;
-$user-selects: all, auto, none !default;
-
-
-// Printing
-
-$print-page-size:                   a3 !default;
-$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+// Color system
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$grays: () !default;
+$grays: map-merge(
+  (
+    "100": $gray-100,
+    "200": $gray-200,
+    "300": $gray-300,
+    "400": $gray-400,
+    "500": $gray-500,
+    "600": $gray-600,
+    "700": $gray-700,
+    "800": $gray-800,
+    "900": $gray-900
+  ),
+  $grays
+);
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #28a745 !default;
+$teal:    #20c997 !default;
+$cyan:    #17a2b8 !default;
+
+$colors: () !default;
+$colors: map-merge(
+  (
+    "blue":       $blue,
+    "indigo":     $indigo,
+    "purple":     $purple,
+    "pink":       $pink,
+    "red":        $red,
+    "orange":     $orange,
+    "yellow":     $yellow,
+    "green":      $green,
+    "teal":       $teal,
+    "cyan":       $cyan,
+    "white":      $white,
+    "gray":       $gray-600,
+    "gray-dark":  $gray-800
+  ),
+  $colors
+);
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+$theme-colors: () !default;
+$theme-colors: map-merge(
+  (
+    "primary":    $primary,
+    "secondary":  $secondary,
+    "success":    $success,
+    "info":       $info,
+    "warning":    $warning,
+    "danger":     $danger,
+    "light":      $light,
+    "dark":       $dark
+  ),
+  $theme-colors
+);
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval:      8% !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold:  150 !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark:             $gray-900 !default;
+$yiq-text-light:            $white !default;
+
+// Characters which are escaped by the escape-svg function
+$escaped-characters: (
+  ("<", "%3c"),
+  (">", "%3e"),
+  ("#", "%23"),
+  ("(", "%28"),
+  (")", "%29"),
+) !default;
+
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret:                                true !default;
+$enable-rounded:                              true !default;
+$enable-shadows:                              false !default;
+$enable-gradients:                            false !default;
+$enable-transitions:                          true !default;
+$enable-prefers-reduced-motion-media-query:   true !default;
+$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
+$enable-grid-classes:                         true !default;
+$enable-pointer-cursor-for-buttons:           true !default;
+$enable-print-styles:                         true !default;
+$enable-responsive-font-sizes:                false !default;
+$enable-validation-icons:                     true !default;
+$enable-deprecation-messages:                 true !default;
+
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+$spacer: 1rem !default;
+$spacers: () !default;
+$spacers: map-merge(
+  (
+    0: 0,
+    1: ($spacer * .25),
+    2: ($spacer * .5),
+    3: $spacer,
+    4: ($spacer * 1.5),
+    5: ($spacer * 3)
+  ),
+  $spacers
+);
+
+// This variable affects the `.h-*` and `.w-*` classes.
+$sizes: () !default;
+$sizes: map-merge(
+  (
+    25: 25%,
+    50: 50%,
+    75: 75%,
+    100: 100%,
+    auto: auto
+  ),
+  $sizes
+);
+
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg:                   $white !default;
+$body-color:                $gray-900 !default;
+
+
+// Links
+//
+// Style anchor elements.
+
+$link-color:                              theme-color("primary") !default;
+$link-decoration:                         none !default;
+$link-hover-color:                        darken($link-color, 15%) !default;
+$link-hover-decoration:                   underline !default;
+// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
+$emphasized-link-hover-darken-percentage: 15% !default;
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom:   1rem !default;
+
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;
+
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px
+) !default;
+
+@include _assert-ascending($container-max-widths, "$container-max-widths");
+
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns:                12 !default;
+$grid-gutter-width:           30px !default;
+$grid-row-columns:            6 !default;
+
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$line-height-lg:              1.5 !default;
+$line-height-sm:              1.5 !default;
+
+$border-width:                1px !default;
+$border-color:                $gray-300 !default;
+
+$border-radius:               .25rem !default;
+$border-radius-lg:            .3rem !default;
+$border-radius-sm:            .2rem !default;
+
+$rounded-pill:                50rem !default;
+
+$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
+$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
+
+$component-active-color:      $white !default;
+$component-active-bg:         theme-color("primary") !default;
+
+$caret-width:                 .3em !default;
+$caret-vertical-align:        $caret-width * .85 !default;
+$caret-spacing:               $caret-width * .85 !default;
+
+$transition-base:             all .2s ease-in-out !default;
+$transition-fade:             opacity .15s linear !default;
+$transition-collapse:         height .35s ease !default;
+
+$embed-responsive-aspect-ratios: () !default;
+$embed-responsive-aspect-ratios: join(
+  (
+    (21 9),
+    (16 9),
+    (4 3),
+    (1 1),
+  ),
+  $embed-responsive-aspect-ratios
+);
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// stylelint-disable value-keyword-case
+$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-base:            $font-family-sans-serif !default;
+// stylelint-enable value-keyword-case
+
+$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
+$font-size-lg:                $font-size-base * 1.25 !default;
+$font-size-sm:                $font-size-base * .875 !default;
+
+$font-weight-lighter:         lighter !default;
+$font-weight-light:           300 !default;
+$font-weight-normal:          400 !default;
+$font-weight-bold:            700 !default;
+$font-weight-bolder:          bolder !default;
+
+$font-weight-base:            $font-weight-normal !default;
+$line-height-base:            1.5 !default;
+
+$h1-font-size:                $font-size-base * 2.5 !default;
+$h2-font-size:                $font-size-base * 2 !default;
+$h3-font-size:                $font-size-base * 1.75 !default;
+$h4-font-size:                $font-size-base * 1.5 !default;
+$h5-font-size:                $font-size-base * 1.25 !default;
+$h6-font-size:                $font-size-base !default;
+
+$headings-margin-bottom:      $spacer / 2 !default;
+$headings-font-family:        null !default;
+$headings-font-weight:        500 !default;
+$headings-line-height:        1.2 !default;
+$headings-color:              null !default;
+
+$display1-size:               6rem !default;
+$display2-size:               5.5rem !default;
+$display3-size:               4.5rem !default;
+$display4-size:               3.5rem !default;
+
+$display1-weight:             300 !default;
+$display2-weight:             300 !default;
+$display3-weight:             300 !default;
+$display4-weight:             300 !default;
+$display-line-height:         $headings-line-height !default;
+
+$lead-font-size:              $font-size-base * 1.25 !default;
+$lead-font-weight:            300 !default;
+
+$small-font-size:             80% !default;
+
+$text-muted:                  $gray-600 !default;
+
+$blockquote-small-color:      $gray-600 !default;
+$blockquote-small-font-size:  $small-font-size !default;
+$blockquote-font-size:        $font-size-base * 1.25 !default;
+
+$hr-border-color:             rgba($black, .1) !default;
+$hr-border-width:             $border-width !default;
+
+$mark-padding:                .2em !default;
+
+$dt-font-weight:              $font-weight-bold !default;
+
+$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
+$nested-kbd-font-weight:      $font-weight-bold !default;
+
+$list-inline-padding:         .5rem !default;
+
+$mark-bg:                     #fcf8e3 !default;
+
+$hr-margin-y:                 $spacer !default;
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding:          .75rem !default;
+$table-cell-padding-sm:       .3rem !default;
+
+$table-color:                 $body-color !default;
+$table-bg:                    null !default;
+$table-accent-bg:             rgba($black, .05) !default;
+$table-hover-color:           $table-color !default;
+$table-hover-bg:              rgba($black, .075) !default;
+$table-active-bg:             $table-hover-bg !default;
+
+$table-border-width:          $border-width !default;
+$table-border-color:          $border-color !default;
+
+$table-head-bg:               $gray-200 !default;
+$table-head-color:            $gray-700 !default;
+$table-th-font-weight:        null !default;
+
+$table-dark-color:            $white !default;
+$table-dark-bg:               $gray-800 !default;
+$table-dark-accent-bg:        rgba($white, .05) !default;
+$table-dark-hover-color:      $table-dark-color !default;
+$table-dark-hover-bg:         rgba($white, .075) !default;
+$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;
+
+$table-striped-order:         odd !default;
+
+$table-caption-color:         $text-muted !default;
+
+$table-bg-level:              -9 !default;
+$table-border-level:          -6 !default;
+
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+$input-btn-padding-y:         .375rem !default;
+$input-btn-padding-x:         .75rem !default;
+$input-btn-font-family:       null !default;
+$input-btn-font-size:         $font-size-base !default;
+$input-btn-line-height:       $line-height-base !default;
+
+$input-btn-focus-width:       .2rem !default;
+$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
+$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
+$input-btn-padding-y-sm:      .25rem !default;
+$input-btn-padding-x-sm:      .5rem !default;
+$input-btn-font-size-sm:      $font-size-sm !default;
+$input-btn-line-height-sm:    $line-height-sm !default;
+
+$input-btn-padding-y-lg:      .5rem !default;
+$input-btn-padding-x-lg:      1rem !default;
+$input-btn-font-size-lg:      $font-size-lg !default;
+$input-btn-line-height-lg:    $line-height-lg !default;
+
+$input-btn-border-width:      $border-width !default;
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+$btn-padding-y:               $input-btn-padding-y !default;
+$btn-padding-x:               $input-btn-padding-x !default;
+$btn-font-family:             $input-btn-font-family !default;
+$btn-font-size:               $input-btn-font-size !default;
+$btn-line-height:             $input-btn-line-height !default;
+$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping
+
+$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
+$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
+$btn-font-size-sm:            $input-btn-font-size-sm !default;
+$btn-line-height-sm:          $input-btn-line-height-sm !default;
+
+$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
+$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
+$btn-font-size-lg:            $input-btn-font-size-lg !default;
+$btn-line-height-lg:          $input-btn-line-height-lg !default;
+
+$btn-border-width:            $input-btn-border-width !default;
+
+$btn-font-weight:             $font-weight-normal !default;
+$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
+$btn-focus-width:             $input-btn-focus-width !default;
+$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity:        .65 !default;
+$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
+
+$btn-link-disabled-color:     $gray-600 !default;
+
+$btn-block-spacing-y:         .5rem !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius:           $border-radius !default;
+$btn-border-radius-lg:        $border-radius-lg !default;
+$btn-border-radius-sm:        $border-radius-sm !default;
+
+$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+
+// Forms
+
+$label-margin-bottom:                   .5rem !default;
+
+$input-padding-y:                       $input-btn-padding-y !default;
+$input-padding-x:                       $input-btn-padding-x !default;
+$input-font-family:                     $input-btn-font-family !default;
+$input-font-size:                       $input-btn-font-size !default;
+$input-font-weight:                     $font-weight-base !default;
+$input-line-height:                     $input-btn-line-height !default;
+
+$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
+$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
+$input-font-size-sm:                    $input-btn-font-size-sm !default;
+$input-line-height-sm:                  $input-btn-line-height-sm !default;
+
+$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
+$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
+$input-font-size-lg:                    $input-btn-font-size-lg !default;
+$input-line-height-lg:                  $input-btn-line-height-lg !default;
+
+$input-bg:                              $white !default;
+$input-disabled-bg:                     $gray-200 !default;
+
+$input-color:                           $gray-700 !default;
+$input-border-color:                    $gray-400 !default;
+$input-border-width:                    $input-btn-border-width !default;
+$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;
+
+$input-border-radius:                   $border-radius !default;
+$input-border-radius-lg:                $border-radius-lg !default;
+$input-border-radius-sm:                $border-radius-sm !default;
+
+$input-focus-bg:                        $input-bg !default;
+$input-focus-border-color:              lighten($component-active-bg, 25%) !default;
+$input-focus-color:                     $input-color !default;
+$input-focus-width:                     $input-btn-focus-width !default;
+$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
+
+$input-placeholder-color:               $gray-600 !default;
+$input-plaintext-color:                 $body-color !default;
+
+$input-height-border:                   $input-border-width * 2 !default;
+
+$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
+$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
+$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y / 2) !default;
+
+$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
+$input-height-sm:                       add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
+$input-height-lg:                       add($input-line-height-lg * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
+
+$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$form-text-margin-top:                  .25rem !default;
+
+$form-check-input-gutter:               1.25rem !default;
+$form-check-input-margin-y:             .3rem !default;
+$form-check-input-margin-x:             .25rem !default;
+
+$form-check-inline-margin-x:            .75rem !default;
+$form-check-inline-input-margin-x:      .3125rem !default;
+
+$form-grid-gutter-width:                10px !default;
+$form-group-margin-bottom:              1rem !default;
+
+$input-group-addon-color:               $input-color !default;
+$input-group-addon-bg:                  $gray-200 !default;
+$input-group-addon-border-color:        $input-border-color !default;
+
+$custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$custom-control-gutter:                 .5rem !default;
+$custom-control-spacer-x:               1rem !default;
+$custom-control-cursor:                 null !default;
+
+$custom-control-indicator-size:         1rem !default;
+$custom-control-indicator-bg:           $input-bg !default;
+
+$custom-control-indicator-bg-size:      50% 50% !default;
+$custom-control-indicator-box-shadow:   $input-box-shadow !default;
+$custom-control-indicator-border-color: $gray-500 !default;
+$custom-control-indicator-border-width: $input-border-width !default;
+
+$custom-control-label-color:            null !default;
+
+$custom-control-indicator-disabled-bg:          $input-disabled-bg !default;
+$custom-control-label-disabled-color:           $gray-600 !default;
+
+$custom-control-indicator-checked-color:        $component-active-color !default;
+$custom-control-indicator-checked-bg:           $component-active-bg !default;
+$custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .5) !default;
+$custom-control-indicator-checked-box-shadow:   null !default;
+$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
+
+$custom-control-indicator-focus-box-shadow:     $input-focus-box-shadow !default;
+$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;
+
+$custom-control-indicator-active-color:         $component-active-color !default;
+$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
+$custom-control-indicator-active-box-shadow:    null !default;
+$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;
+
+$custom-checkbox-indicator-border-radius:       $border-radius !default;
+$custom-checkbox-indicator-icon-checked:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>") !default;
+
+$custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;
+$custom-checkbox-indicator-indeterminate-color:        $custom-control-indicator-checked-color !default;
+$custom-checkbox-indicator-icon-indeterminate:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/></svg>") !default;
+$custom-checkbox-indicator-indeterminate-box-shadow:   null !default;
+$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
+
+$custom-radio-indicator-border-radius:          50% !default;
+$custom-radio-indicator-icon-checked:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
+
+$custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
+$custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
+$custom-switch-indicator-size:                  subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
+
+$custom-select-padding-y:           $input-padding-y !default;
+$custom-select-padding-x:           $input-padding-x !default;
+$custom-select-font-family:         $input-font-family !default;
+$custom-select-font-size:           $input-font-size !default;
+$custom-select-height:              $input-height !default;
+$custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
+$custom-select-font-weight:         $input-font-weight !default;
+$custom-select-line-height:         $input-line-height !default;
+$custom-select-color:               $input-color !default;
+$custom-select-disabled-color:      $gray-600 !default;
+$custom-select-bg:                  $input-bg !default;
+$custom-select-disabled-bg:         $gray-200 !default;
+$custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions
+$custom-select-indicator-color:     $gray-800 !default;
+$custom-select-indicator:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") !default;
+$custom-select-background:          escape-svg($custom-select-indicator) right $custom-select-padding-x center / $custom-select-bg-size no-repeat !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+
+$custom-select-feedback-icon-padding-right: add(1em * .75, (2 * $custom-select-padding-y * .75) + $custom-select-padding-x + $custom-select-indicator-padding) !default;
+$custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
+$custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;
+
+$custom-select-border-width:        $input-border-width !default;
+$custom-select-border-color:        $input-border-color !default;
+$custom-select-border-radius:       $border-radius !default;
+$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;
+
+$custom-select-focus-border-color:  $input-focus-border-color !default;
+$custom-select-focus-width:         $input-focus-width !default;
+$custom-select-focus-box-shadow:    0 0 0 $custom-select-focus-width $input-btn-focus-color !default;
+
+$custom-select-padding-y-sm:        $input-padding-y-sm !default;
+$custom-select-padding-x-sm:        $input-padding-x-sm !default;
+$custom-select-font-size-sm:        $input-font-size-sm !default;
+$custom-select-height-sm:           $input-height-sm !default;
+
+$custom-select-padding-y-lg:        $input-padding-y-lg !default;
+$custom-select-padding-x-lg:        $input-padding-x-lg !default;
+$custom-select-font-size-lg:        $input-font-size-lg !default;
+$custom-select-height-lg:           $input-height-lg !default;
+
+$custom-range-track-width:          100% !default;
+$custom-range-track-height:         .5rem !default;
+$custom-range-track-cursor:         pointer !default;
+$custom-range-track-bg:             $gray-300 !default;
+$custom-range-track-border-radius:  1rem !default;
+$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;
+
+$custom-range-thumb-width:                   1rem !default;
+$custom-range-thumb-height:                  $custom-range-thumb-width !default;
+$custom-range-thumb-bg:                      $component-active-bg !default;
+$custom-range-thumb-border:                  0 !default;
+$custom-range-thumb-border-radius:           1rem !default;
+$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
+$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
+$custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
+$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
+$custom-range-thumb-disabled-bg:             $gray-500 !default;
+
+$custom-file-height:                $input-height !default;
+$custom-file-height-inner:          $input-height-inner !default;
+$custom-file-focus-border-color:    $input-focus-border-color !default;
+$custom-file-focus-box-shadow:      $input-focus-box-shadow !default;
+$custom-file-disabled-bg:           $input-disabled-bg !default;
+
+$custom-file-padding-y:             $input-padding-y !default;
+$custom-file-padding-x:             $input-padding-x !default;
+$custom-file-line-height:           $input-line-height !default;
+$custom-file-font-family:           $input-font-family !default;
+$custom-file-font-weight:           $input-font-weight !default;
+$custom-file-color:                 $input-color !default;
+$custom-file-bg:                    $input-bg !default;
+$custom-file-border-width:          $input-border-width !default;
+$custom-file-border-color:          $input-border-color !default;
+$custom-file-border-radius:         $input-border-radius !default;
+$custom-file-box-shadow:            $input-box-shadow !default;
+$custom-file-button-color:          $custom-file-color !default;
+$custom-file-button-bg:             $input-group-addon-bg !default;
+$custom-file-text: (
+  en: "Browse"
+) !default;
+
+
+// Form validation
+
+$form-feedback-margin-top:          $form-text-margin-top !default;
+$form-feedback-font-size:           $small-font-size !default;
+$form-feedback-valid-color:         theme-color("success") !default;
+$form-feedback-invalid-color:       theme-color("danger") !default;
+
+$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
+$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
+$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
+
+$form-validation-states: () !default;
+$form-validation-states: map-merge(
+  (
+    "valid": (
+      "color": $form-feedback-valid-color,
+      "icon": $form-feedback-icon-valid
+    ),
+    "invalid": (
+      "color": $form-feedback-invalid-color,
+      "icon": $form-feedback-icon-invalid
+    ),
+  ),
+  $form-validation-states
+);
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+$zindex-dropdown:                   1000 !default;
+$zindex-sticky:                     1020 !default;
+$zindex-fixed:                      1030 !default;
+$zindex-modal-backdrop:             1040 !default;
+$zindex-modal:                      1050 !default;
+$zindex-popover:                    1060 !default;
+$zindex-tooltip:                    1070 !default;
+
+
+// Navs
+
+$nav-link-padding-y:                .5rem !default;
+$nav-link-padding-x:                1rem !default;
+$nav-link-disabled-color:           $gray-600 !default;
+
+$nav-tabs-border-color:             $gray-300 !default;
+$nav-tabs-border-width:             $border-width !default;
+$nav-tabs-border-radius:            $border-radius !default;
+$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:        $gray-700 !default;
+$nav-tabs-link-active-bg:           $body-bg !default;
+$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
+
+$nav-pills-border-radius:           $border-radius !default;
+$nav-pills-link-active-color:       $component-active-color !default;
+$nav-pills-link-active-bg:          $component-active-bg !default;
+
+$nav-divider-color:                 $gray-200 !default;
+$nav-divider-margin-y:              $spacer / 2 !default;
+
+
+// Navbar
+
+$navbar-padding-y:                  $spacer / 2 !default;
+$navbar-padding-x:                  $spacer !default;
+
+$navbar-nav-link-padding-x:         .5rem !default;
+
+$navbar-brand-font-size:            $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
+$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
+
+$navbar-toggler-padding-y:          .25rem !default;
+$navbar-toggler-padding-x:          .75rem !default;
+$navbar-toggler-font-size:          $font-size-lg !default;
+$navbar-toggler-border-radius:      $btn-border-radius !default;
+
+$navbar-nav-scroll-max-height:      75vh !default;
+
+$navbar-dark-color:                 rgba($white, .5) !default;
+$navbar-dark-hover-color:           rgba($white, .75) !default;
+$navbar-dark-active-color:          $white !default;
+$navbar-dark-disabled-color:        rgba($white, .25) !default;
+$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-dark-toggler-border-color:  rgba($white, .1) !default;
+
+$navbar-light-color:                rgba($black, .5) !default;
+$navbar-light-hover-color:          rgba($black, .7) !default;
+$navbar-light-active-color:         rgba($black, .9) !default;
+$navbar-light-disabled-color:       rgba($black, .3) !default;
+$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-light-toggler-border-color: rgba($black, .1) !default;
+
+$navbar-light-brand-color:                $navbar-light-active-color !default;
+$navbar-light-brand-hover-color:          $navbar-light-active-color !default;
+$navbar-dark-brand-color:                 $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
+
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-min-width:                10rem !default;
+$dropdown-padding-x:                0 !default;
+$dropdown-padding-y:                .5rem !default;
+$dropdown-spacer:                   .125rem !default;
+$dropdown-font-size:                $font-size-base !default;
+$dropdown-color:                    $body-color !default;
+$dropdown-bg:                       $white !default;
+$dropdown-border-color:             rgba($black, .15) !default;
+$dropdown-border-radius:            $border-radius !default;
+$dropdown-border-width:             $border-width !default;
+$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
+$dropdown-divider-bg:               $gray-200 !default;
+$dropdown-divider-margin-y:         $nav-divider-margin-y !default;
+$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
+
+$dropdown-link-color:               $gray-900 !default;
+$dropdown-link-hover-color:         darken($gray-900, 5%) !default;
+$dropdown-link-hover-bg:            $gray-200 !default;
+
+$dropdown-link-active-color:        $component-active-color !default;
+$dropdown-link-active-bg:           $component-active-bg !default;
+
+$dropdown-link-disabled-color:      $gray-500 !default;
+
+$dropdown-item-padding-y:           .25rem !default;
+$dropdown-item-padding-x:           1.5rem !default;
+
+$dropdown-header-color:             $gray-600 !default;
+$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;
+
+
+// Pagination
+
+$pagination-padding-y:              .5rem !default;
+$pagination-padding-x:              .75rem !default;
+$pagination-padding-y-sm:           .25rem !default;
+$pagination-padding-x-sm:           .5rem !default;
+$pagination-padding-y-lg:           .75rem !default;
+$pagination-padding-x-lg:           1.5rem !default;
+$pagination-line-height:            1.25 !default;
+
+$pagination-color:                  $link-color !default;
+$pagination-bg:                     $white !default;
+$pagination-border-width:           $border-width !default;
+$pagination-border-color:           $gray-300 !default;
+
+$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
+$pagination-focus-outline:          0 !default;
+
+$pagination-hover-color:            $link-hover-color !default;
+$pagination-hover-bg:               $gray-200 !default;
+$pagination-hover-border-color:     $gray-300 !default;
+
+$pagination-active-color:           $component-active-color !default;
+$pagination-active-bg:              $component-active-bg !default;
+$pagination-active-border-color:    $pagination-active-bg !default;
+
+$pagination-disabled-color:         $gray-600 !default;
+$pagination-disabled-bg:            $white !default;
+$pagination-disabled-border-color:  $gray-300 !default;
+
+$pagination-border-radius-sm:       $border-radius-sm !default;
+$pagination-border-radius-lg:       $border-radius-lg !default;
+
+// Jumbotron
+
+$jumbotron-padding:                 2rem !default;
+$jumbotron-color:                   null !default;
+$jumbotron-bg:                      $gray-200 !default;
+
+
+// Cards
+
+$card-spacer-y:                     .75rem !default;
+$card-spacer-x:                     1.25rem !default;
+$card-border-width:                 $border-width !default;
+$card-border-radius:                $border-radius !default;
+$card-border-color:                 rgba($black, .125) !default;
+$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
+$card-cap-bg:                       rgba($black, .03) !default;
+$card-cap-color:                    null !default;
+$card-height:                       null !default;
+$card-color:                        null !default;
+$card-bg:                           $white !default;
+
+$card-img-overlay-padding:          1.25rem !default;
+
+$card-group-margin:                 $grid-gutter-width / 2 !default;
+$card-deck-margin:                  $card-group-margin !default;
+
+$card-columns-count:                3 !default;
+$card-columns-gap:                  1.25rem !default;
+$card-columns-margin:               $card-spacer-y !default;
+
+
+// Tooltips
+
+$tooltip-font-size:                 $font-size-sm !default;
+$tooltip-max-width:                 200px !default;
+$tooltip-color:                     $white !default;
+$tooltip-bg:                        $black !default;
+$tooltip-border-radius:             $border-radius !default;
+$tooltip-opacity:                   .9 !default;
+$tooltip-padding-y:                 .25rem !default;
+$tooltip-padding-x:                 .5rem !default;
+$tooltip-margin:                    0 !default;
+
+$tooltip-arrow-width:               .8rem !default;
+$tooltip-arrow-height:              .4rem !default;
+$tooltip-arrow-color:               $tooltip-bg !default;
+
+// Form tooltips must come after regular tooltips
+$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
+$form-feedback-tooltip-line-height:   $line-height-base !default;
+$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+
+
+// Popovers
+
+$popover-font-size:                 $font-size-sm !default;
+$popover-bg:                        $white !default;
+$popover-max-width:                 276px !default;
+$popover-border-width:              $border-width !default;
+$popover-border-color:              rgba($black, .2) !default;
+$popover-border-radius:             $border-radius-lg !default;
+$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
+$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
+
+$popover-header-bg:                 darken($popover-bg, 3%) !default;
+$popover-header-color:              $headings-color !default;
+$popover-header-padding-y:          .5rem !default;
+$popover-header-padding-x:          .75rem !default;
+
+$popover-body-color:                $body-color !default;
+$popover-body-padding-y:            $popover-header-padding-y !default;
+$popover-body-padding-x:            $popover-header-padding-x !default;
+
+$popover-arrow-width:               1rem !default;
+$popover-arrow-height:              .5rem !default;
+$popover-arrow-color:               $popover-bg !default;
+
+$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
+
+
+// Toasts
+
+$toast-max-width:                   350px !default;
+$toast-padding-x:                   .75rem !default;
+$toast-padding-y:                   .25rem !default;
+$toast-font-size:                   .875rem !default;
+$toast-color:                       null !default;
+$toast-background-color:            rgba($white, .85) !default;
+$toast-border-width:                1px !default;
+$toast-border-color:                rgba(0, 0, 0, .1) !default;
+$toast-border-radius:               .25rem !default;
+$toast-box-shadow:                  0 .25rem .75rem rgba($black, .1) !default;
+
+$toast-header-color:                $gray-600 !default;
+$toast-header-background-color:     rgba($white, .85) !default;
+$toast-header-border-color:         rgba(0, 0, 0, .05) !default;
+
+
+// Badges
+
+$badge-font-size:                   75% !default;
+$badge-font-weight:                 $font-weight-bold !default;
+$badge-padding-y:                   .25em !default;
+$badge-padding-x:                   .4em !default;
+$badge-border-radius:               $border-radius !default;
+
+$badge-transition:                  $btn-transition !default;
+$badge-focus-width:                 $input-btn-focus-width !default;
+
+$badge-pill-padding-x:              .6em !default;
+// Use a higher than normal value to ensure completely rounded edges when
+// customizing padding or font-size on labels.
+$badge-pill-border-radius:          10rem !default;
+
+
+// Modals
+
+// Padding applied to the modal body
+$modal-inner-padding:               1rem !default;
+
+// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
+$modal-footer-margin-between:       .5rem !default;
+
+$modal-dialog-margin:               .5rem !default;
+$modal-dialog-margin-y-sm-up:       1.75rem !default;
+
+$modal-title-line-height:           $line-height-base !default;
+
+$modal-content-color:               null !default;
+$modal-content-bg:                  $white !default;
+$modal-content-border-color:        rgba($black, .2) !default;
+$modal-content-border-width:        $border-width !default;
+$modal-content-border-radius:       $border-radius-lg !default;
+$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
+$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;
+$modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .5) !default;
+
+$modal-backdrop-bg:                 $black !default;
+$modal-backdrop-opacity:            .5 !default;
+$modal-header-border-color:         $border-color !default;
+$modal-footer-border-color:         $modal-header-border-color !default;
+$modal-header-border-width:         $modal-content-border-width !default;
+$modal-footer-border-width:         $modal-header-border-width !default;
+$modal-header-padding-y:            1rem !default;
+$modal-header-padding-x:            1rem !default;
+$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
+
+$modal-xl:                          1140px !default;
+$modal-lg:                          800px !default;
+$modal-md:                          500px !default;
+$modal-sm:                          300px !default;
+
+$modal-fade-transform:              translate(0, -50px) !default;
+$modal-show-transform:              none !default;
+$modal-transition:                  transform .3s ease-out !default;
+$modal-scale-transform:             scale(1.02) !default;
+
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding-y:                   .75rem !default;
+$alert-padding-x:                   1.25rem !default;
+$alert-margin-bottom:               1rem !default;
+$alert-border-radius:               $border-radius !default;
+$alert-link-font-weight:            $font-weight-bold !default;
+$alert-border-width:                $border-width !default;
+
+$alert-bg-level:                    -10 !default;
+$alert-border-level:                -9 !default;
+$alert-color-level:                 6 !default;
+
+
+// Progress bars
+
+$progress-height:                   1rem !default;
+$progress-font-size:                $font-size-base * .75 !default;
+$progress-bg:                       $gray-200 !default;
+$progress-border-radius:            $border-radius !default;
+$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;
+$progress-bar-color:                $white !default;
+$progress-bar-bg:                   theme-color("primary") !default;
+$progress-bar-animation-timing:     1s linear infinite !default;
+$progress-bar-transition:           width .6s ease !default;
+
+
+// List group
+
+$list-group-color:                  null !default;
+$list-group-bg:                     $white !default;
+$list-group-border-color:           rgba($black, .125) !default;
+$list-group-border-width:           $border-width !default;
+$list-group-border-radius:          $border-radius !default;
+
+$list-group-item-padding-y:         .75rem !default;
+$list-group-item-padding-x:         1.25rem !default;
+
+$list-group-hover-bg:               $gray-100 !default;
+$list-group-active-color:           $component-active-color !default;
+$list-group-active-bg:              $component-active-bg !default;
+$list-group-active-border-color:    $list-group-active-bg !default;
+
+$list-group-disabled-color:         $gray-600 !default;
+$list-group-disabled-bg:            $list-group-bg !default;
+
+$list-group-action-color:           $gray-700 !default;
+$list-group-action-hover-color:     $list-group-action-color !default;
+
+$list-group-action-active-color:    $body-color !default;
+$list-group-action-active-bg:       $gray-200 !default;
+
+
+// Image thumbnails
+
+$thumbnail-padding:                 .25rem !default;
+$thumbnail-bg:                      $body-bg !default;
+$thumbnail-border-width:            $border-width !default;
+$thumbnail-border-color:            $gray-300 !default;
+$thumbnail-border-radius:           $border-radius !default;
+$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;
+
+
+// Figures
+
+$figure-caption-font-size:          90% !default;
+$figure-caption-color:              $gray-600 !default;
+
+
+// Breadcrumbs
+
+$breadcrumb-font-size:              null !default;
+
+$breadcrumb-padding-y:              .75rem !default;
+$breadcrumb-padding-x:              1rem !default;
+$breadcrumb-item-padding:           .5rem !default;
+
+$breadcrumb-margin-bottom:          1rem !default;
+
+$breadcrumb-bg:                     $gray-200 !default;
+$breadcrumb-divider-color:          $gray-600 !default;
+$breadcrumb-active-color:           $gray-600 !default;
+$breadcrumb-divider:                quote("/") !default;
+
+$breadcrumb-border-radius:          $border-radius !default;
+
+
+// Carousel
+
+$carousel-control-color:             $white !default;
+$carousel-control-width:             15% !default;
+$carousel-control-opacity:           .5 !default;
+$carousel-control-hover-opacity:     .9 !default;
+$carousel-control-transition:        opacity .15s ease !default;
+
+$carousel-indicator-width:           30px !default;
+$carousel-indicator-height:          3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
+$carousel-indicator-spacer:          3px !default;
+$carousel-indicator-active-bg:       $white !default;
+$carousel-indicator-transition:      opacity .6s ease !default;
+
+$carousel-caption-width:             70% !default;
+$carousel-caption-color:             $white !default;
+
+$carousel-control-icon-width:        20px !default;
+
+$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
+$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
+
+$carousel-transition-duration:       .6s !default;
+$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+
+
+// Spinners
+
+$spinner-width:         2rem !default;
+$spinner-height:        $spinner-width !default;
+$spinner-border-width:  .25em !default;
+
+$spinner-width-sm:        1rem !default;
+$spinner-height-sm:       $spinner-width-sm !default;
+$spinner-border-width-sm: .2em !default;
+
+
+// Close
+
+$close-font-size:                   $font-size-base * 1.5 !default;
+$close-font-weight:                 $font-weight-bold !default;
+$close-color:                       $black !default;
+$close-text-shadow:                 0 1px 0 $white !default;
+
+
+// Code
+
+$code-font-size:                    87.5% !default;
+$code-color:                        $pink !default;
+
+$kbd-padding-y:                     .2rem !default;
+$kbd-padding-x:                     .4rem !default;
+$kbd-font-size:                     $code-font-size !default;
+$kbd-color:                         $white !default;
+$kbd-bg:                            $gray-900 !default;
+
+$pre-color:                         $gray-900 !default;
+$pre-scrollable-max-height:         340px !default;
+
+
+// Utilities
+
+$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
+$overflows: auto, hidden !default;
+$positions: static, relative, absolute, fixed, sticky !default;
+$user-selects: all, auto, none !default;
+
+
+// Printing
+
+$print-page-size:                   a3 !default;
+$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;

styles/bootstrap/bootstrap-grid.scss

@@ -1,30 +1,30 @@
-/*!
- * Bootstrap Grid v4.6.0 (https://getbootstrap.com/)
- * Copyright 2011-2021 The Bootstrap Authors
- * Copyright 2011-2021 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- */
-
-html {
-  box-sizing: border-box;
-  -ms-overflow-style: scrollbar;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-@import "functions";
-@import "variables";
-
-@import "mixins/deprecate";
-@import "mixins/breakpoints";
-@import "mixins/grid-framework";
-@import "mixins/grid";
-
-@import "grid";
-@import "utilities/display";
-@import "utilities/flex";
-@import "utilities/spacing";
+/*!
+ * Bootstrap Grid v4.6.0 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+html {
+  box-sizing: border-box;
+  -ms-overflow-style: scrollbar;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+@import "functions";
+@import "variables";
+
+@import "mixins/deprecate";
+@import "mixins/breakpoints";
+@import "mixins/grid-framework";
+@import "mixins/grid";
+
+@import "grid";
+@import "utilities/display";
+@import "utilities/flex";
+@import "utilities/spacing";

styles/bootstrap/bootstrap-reboot.scss

@@ -1,12 +1,12 @@
-/*!
- * Bootstrap Reboot v4.6.0 (https://getbootstrap.com/)
- * Copyright 2011-2021 The Bootstrap Authors
- * Copyright 2011-2021 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
- */
-
-@import "functions";
-@import "variables";
-@import "mixins";
-@import "reboot";
+/*!
+ * Bootstrap Reboot v4.6.0 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+
+@import "functions";
+@import "variables";
+@import "mixins";
+@import "reboot";

styles/bootstrap/bootstrap.scss

@@ -1,44 +1,44 @@
-/*!
- * Bootstrap v4.6.0 (https://getbootstrap.com/)
- * Copyright 2011-2021 The Bootstrap Authors
- * Copyright 2011-2021 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- */
-
-@import "functions";
-@import "variables";
-@import "mixins";
-@import "root";
-@import "reboot";
-@import "type";
-@import "images";
-@import "code";
-@import "grid";
-@import "tables";
-@import "forms";
-@import "buttons";
-@import "transitions";
-@import "dropdown";
-@import "button-group";
-@import "input-group";
-@import "custom-forms";
-@import "nav";
-@import "navbar";
-@import "card";
-@import "breadcrumb";
-@import "pagination";
-@import "badge";
-@import "jumbotron";
-@import "alert";
-@import "progress";
-@import "media";
-@import "list-group";
-@import "close";
-@import "toasts";
-@import "modal";
-@import "tooltip";
-@import "popover";
-@import "carousel";
-@import "spinners";
-@import "utilities";
-@import "print";
+/*!
+ * Bootstrap v4.6.0 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+@import "functions";
+@import "variables";
+@import "mixins";
+@import "root";
+@import "reboot";
+@import "type";
+@import "images";
+@import "code";
+@import "grid";
+@import "tables";
+@import "forms";
+@import "buttons";
+@import "transitions";
+@import "dropdown";
+@import "button-group";
+@import "input-group";
+@import "custom-forms";
+@import "nav";
+@import "navbar";
+@import "card";
+@import "breadcrumb";
+@import "pagination";
+@import "badge";
+@import "jumbotron";
+@import "alert";
+@import "progress";
+@import "media";
+@import "list-group";
+@import "close";
+@import "toasts";
+@import "modal";
+@import "tooltip";
+@import "popover";
+@import "carousel";
+@import "spinners";
+@import "utilities";
+@import "print";

styles/bootstrap/mixins/_alert.scss

@@ -1,13 +1,13 @@
-@mixin alert-variant($background, $border, $color) {
-  color: $color;
-  @include gradient-bg($background);
-  border-color: $border;
-
-  hr {
-    border-top-color: darken($border, 5%);
-  }
-
-  .alert-link {
-    color: darken($color, 10%);
-  }
-}
+@mixin alert-variant($background, $border, $color) {
+  color: $color;
+  @include gradient-bg($background);
+  border-color: $border;
+
+  hr {
+    border-top-color: darken($border, 5%);
+  }
+
+  .alert-link {
+    color: darken($color, 10%);
+  }
+}

styles/bootstrap/mixins/_background-variant.scss

@@ -1,23 +1,23 @@
-// stylelint-disable declaration-no-important
-
-// Contextual backgrounds
-
-@mixin bg-variant($parent, $color, $ignore-warning: false) {
-  #{$parent} {
-    background-color: $color !important;
-  }
-  a#{$parent},
-  button#{$parent} {
-    @include hover-focus() {
-      background-color: darken($color, 10%) !important;
-    }
-  }
-  @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
-}
-
-@mixin bg-gradient-variant($parent, $color, $ignore-warning: false) {
-  #{$parent} {
-    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
-  }
-  @include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning);
-}
+// stylelint-disable declaration-no-important
+
+// Contextual backgrounds
+
+@mixin bg-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    background-color: $color !important;
+  }
+  a#{$parent},
+  button#{$parent} {
+    @include hover-focus() {
+      background-color: darken($color, 10%) !important;
+    }
+  }
+  @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
+}
+
+@mixin bg-gradient-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+  }
+  @include deprecate("The `bg-gradient-variant` mixin", "v4.5.0", "v5", $ignore-warning);
+}

styles/bootstrap/mixins/_badge.scss

@@ -1,17 +1,17 @@
-@mixin badge-variant($bg) {
-  color: color-yiq($bg);
-  background-color: $bg;
-
-  @at-root a#{&} {
-    @include hover-focus() {
-      color: color-yiq($bg);
-      background-color: darken($bg, 10%);
-    }
-
-    &:focus,
-    &.focus {
-      outline: 0;
-      box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
-    }
-  }
-}
+@mixin badge-variant($bg) {
+  color: color-yiq($bg);
+  background-color: $bg;
+
+  @at-root a#{&} {
+    @include hover-focus() {
+      color: color-yiq($bg);
+      background-color: darken($bg, 10%);
+    }
+
+    &:focus,
+    &.focus {
+      outline: 0;
+      box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
+    }
+  }
+}

styles/bootstrap/mixins/_border-radius.scss

@@ -1,76 +1,76 @@
-// stylelint-disable property-disallowed-list
-// Single side border-radius
-
-// Helper function to replace negative values with 0
-@function valid-radius($radius) {
-  $return: ();
-  @each $value in $radius {
-    @if type-of($value) == number {
-      $return: append($return, max($value, 0));
-    } @else {
-      $return: append($return, $value);
-    }
-  }
-  @return $return;
-}
-
-@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
-  @if $enable-rounded {
-    border-radius: valid-radius($radius);
-  }
-  @else if $fallback-border-radius != false {
-    border-radius: $fallback-border-radius;
-  }
-}
-
-@mixin border-top-radius($radius) {
-  @if $enable-rounded {
-    border-top-left-radius: valid-radius($radius);
-    border-top-right-radius: valid-radius($radius);
-  }
-}
-
-@mixin border-right-radius($radius) {
-  @if $enable-rounded {
-    border-top-right-radius: valid-radius($radius);
-    border-bottom-right-radius: valid-radius($radius);
-  }
-}
-
-@mixin border-bottom-radius($radius) {
-  @if $enable-rounded {
-    border-bottom-right-radius: valid-radius($radius);
-    border-bottom-left-radius: valid-radius($radius);
-  }
-}
-
-@mixin border-left-radius($radius) {
-  @if $enable-rounded {
-    border-top-left-radius: valid-radius($radius);
-    border-bottom-left-radius: valid-radius($radius);
-  }
-}
-
-@mixin border-top-left-radius($radius) {
-  @if $enable-rounded {
-    border-top-left-radius: valid-radius($radius);
-  }
-}
-
-@mixin border-top-right-radius($radius) {
-  @if $enable-rounded {
-    border-top-right-radius: valid-radius($radius);
-  }
-}
-
-@mixin border-bottom-right-radius($radius) {
-  @if $enable-rounded {
-    border-bottom-right-radius: valid-radius($radius);
-  }
-}
-
-@mixin border-bottom-left-radius($radius) {
-  @if $enable-rounded {
-    border-bottom-left-radius: valid-radius($radius);
-  }
-}
+// stylelint-disable property-disallowed-list
+// Single side border-radius
+
+// Helper function to replace negative values with 0
+@function valid-radius($radius) {
+  $return: ();
+  @each $value in $radius {
+    @if type-of($value) == number {
+      $return: append($return, max($value, 0));
+    } @else {
+      $return: append($return, $value);
+    }
+  }
+  @return $return;
+}
+
+@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
+  @if $enable-rounded {
+    border-radius: valid-radius($radius);
+  }
+  @else if $fallback-border-radius != false {
+    border-radius: $fallback-border-radius;
+  }
+}
+
+@mixin border-top-radius($radius) {
+  @if $enable-rounded {
+    border-top-left-radius: valid-radius($radius);
+    border-top-right-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-right-radius($radius) {
+  @if $enable-rounded {
+    border-top-right-radius: valid-radius($radius);
+    border-bottom-right-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-bottom-radius($radius) {
+  @if $enable-rounded {
+    border-bottom-right-radius: valid-radius($radius);
+    border-bottom-left-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-left-radius($radius) {
+  @if $enable-rounded {
+    border-top-left-radius: valid-radius($radius);
+    border-bottom-left-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-top-left-radius($radius) {
+  @if $enable-rounded {
+    border-top-left-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-top-right-radius($radius) {
+  @if $enable-rounded {
+    border-top-right-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-bottom-right-radius($radius) {
+  @if $enable-rounded {
+    border-bottom-right-radius: valid-radius($radius);
+  }
+}
+
+@mixin border-bottom-left-radius($radius) {
+  @if $enable-rounded {
+    border-bottom-left-radius: valid-radius($radius);
+  }
+}

styles/bootstrap/mixins/_box-shadow.scss

@@ -1,20 +1,20 @@
-@mixin box-shadow($shadow...) {
-  @if $enable-shadows {
-    $result: ();
-
-    @if (length($shadow) == 1) {
-      // We can pass `@include box-shadow(none);`
-      $result: $shadow;
-    } @else {
-      // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
-      @for $i from 1 through length($shadow) {
-        @if nth($shadow, $i) != "none" {
-          $result: append($result, nth($shadow, $i), "comma");
-        }
-      }
-    }
-    @if (length($result) > 0) {
-      box-shadow: $result;
-    }
-  }
-}
+@mixin box-shadow($shadow...) {
+  @if $enable-shadows {
+    $result: ();
+
+    @if (length($shadow) == 1) {
+      // We can pass `@include box-shadow(none);`
+      $result: $shadow;
+    } @else {
+      // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`
+      @for $i from 1 through length($shadow) {
+        @if nth($shadow, $i) != "none" {
+          $result: append($result, nth($shadow, $i), "comma");
+        }
+      }
+    }
+    @if (length($result) > 0) {
+      box-shadow: $result;
+    }
+  }
+}

styles/bootstrap/mixins/_breakpoints.scss

@@ -1,123 +1,123 @@
-// Breakpoint viewport sizes and media queries.
-//
-// Breakpoints are defined as a map of (name: minimum width), order from small to large:
-//
-//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
-//
-// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
-
-// Name of the next breakpoint, or null for the last breakpoint.
-//
-//    >> breakpoint-next(sm)
-//    md
-//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    md
-//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
-//    md
-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
-  $n: index($breakpoint-names, $name);
-  @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
-}
-
-// Minimum breakpoint width. Null for the smallest (first) breakpoint.
-//
-//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    576px
-@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
-  $min: map-get($breakpoints, $name);
-  @return if($min != 0, $min, null);
-}
-
-// Maximum breakpoint width. Null for the largest (last) breakpoint.
-// The maximum value is calculated as the minimum of the next one less 0.02px
-// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
-// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
-// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
-// See https://bugs.webkit.org/show_bug.cgi?id=178261
-//
-//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    767.98px
-@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
-  $next: breakpoint-next($name, $breakpoints);
-  @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
-}
-
-// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
-// Useful for making responsive utilities.
-//
-//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    ""  (Returns a blank string)
-//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
-//    "-sm"
-@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
-  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
-}
-
-// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
-// Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
-  $min: breakpoint-min($name, $breakpoints);
-  @if $min {
-    @media (min-width: $min) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
-// Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
-  $max: breakpoint-max($name, $breakpoints);
-  @if $max {
-    @media (max-width: $max) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-// Media that spans multiple breakpoint widths.
-// Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
-  $min: breakpoint-min($lower, $breakpoints);
-  $max: breakpoint-max($upper, $breakpoints);
-
-  @if $min != null and $max != null {
-    @media (min-width: $min) and (max-width: $max) {
-      @content;
-    }
-  } @else if $max == null {
-    @include media-breakpoint-up($lower, $breakpoints) {
-      @content;
-    }
-  } @else if $min == null {
-    @include media-breakpoint-down($upper, $breakpoints) {
-      @content;
-    }
-  }
-}
-
-// Media between the breakpoint's minimum and maximum widths.
-// No minimum for the smallest breakpoint, and no maximum for the largest one.
-// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
-  $min: breakpoint-min($name, $breakpoints);
-  $max: breakpoint-max($name, $breakpoints);
-
-  @if $min != null and $max != null {
-    @media (min-width: $min) and (max-width: $max) {
-      @content;
-    }
-  } @else if $max == null {
-    @include media-breakpoint-up($name, $breakpoints) {
-      @content;
-    }
-  } @else if $min == null {
-    @include media-breakpoint-down($name, $breakpoints) {
-      @content;
-    }
-  }
-}
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.02px
+// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
+//
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    767.98px
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+  @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($name, $breakpoints) {
+      @content;
+    }
+  }
+}

styles/bootstrap/mixins/_buttons.scss

@@ -1,110 +1,110 @@
-// Button variants
-//
-// Easily pump out default styles, as well as :hover, :focus, :active,
-// and disabled options for all buttons
-
-@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
-  color: color-yiq($background);
-  @include gradient-bg($background);
-  border-color: $border;
-  @include box-shadow($btn-box-shadow);
-
-  @include hover() {
-    color: color-yiq($hover-background);
-    @include gradient-bg($hover-background);
-    border-color: $hover-border;
-  }
-
-  &:focus,
-  &.focus {
-    color: color-yiq($hover-background);
-    @include gradient-bg($hover-background);
-    border-color: $hover-border;
-    @if $enable-shadows {
-      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
-    }
-  }
-
-  // Disabled comes first so active can properly restyle
-  &.disabled,
-  &:disabled {
-    color: color-yiq($background);
-    background-color: $background;
-    border-color: $border;
-    // Remove CSS gradients if they're enabled
-    @if $enable-gradients {
-      background-image: none;
-    }
-  }
-
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active,
-  .show > &.dropdown-toggle {
-    color: color-yiq($active-background);
-    background-color: $active-background;
-    @if $enable-gradients {
-      background-image: none; // Remove the gradient for the pressed/active state
-    }
-    border-color: $active-border;
-
-    &:focus {
-      @if $enable-shadows and $btn-active-box-shadow != none {
-        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
-      } @else {
-        // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
-      }
-    }
-  }
-}
-
-@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
-  color: $color;
-  border-color: $color;
-
-  @include hover() {
-    color: $color-hover;
-    background-color: $active-background;
-    border-color: $active-border;
-  }
-
-  &:focus,
-  &.focus {
-    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
-  }
-
-  &.disabled,
-  &:disabled {
-    color: $color;
-    background-color: transparent;
-  }
-
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active,
-  .show > &.dropdown-toggle {
-    color: color-yiq($active-background);
-    background-color: $active-background;
-    border-color: $active-border;
-
-    &:focus {
-      @if $enable-shadows and $btn-active-box-shadow != none {
-        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
-      } @else {
-        // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
-      }
-    }
-  }
-}
-
-// Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
-  padding: $padding-y $padding-x;
-  @include font-size($font-size);
-  line-height: $line-height;
-  // Manually declare to provide an override to the browser default
-  @include border-radius($border-radius, 0);
-}
+// Button variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
+  color: color-yiq($background);
+  @include gradient-bg($background);
+  border-color: $border;
+  @include box-shadow($btn-box-shadow);
+
+  @include hover() {
+    color: color-yiq($hover-background);
+    @include gradient-bg($hover-background);
+    border-color: $hover-border;
+  }
+
+  &:focus,
+  &.focus {
+    color: color-yiq($hover-background);
+    @include gradient-bg($hover-background);
+    border-color: $hover-border;
+    @if $enable-shadows {
+      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+    }
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    color: color-yiq($background);
+    background-color: $background;
+    border-color: $border;
+    // Remove CSS gradients if they're enabled
+    @if $enable-gradients {
+      background-image: none;
+    }
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: color-yiq($active-background);
+    background-color: $active-background;
+    @if $enable-gradients {
+      background-image: none; // Remove the gradient for the pressed/active state
+    }
+    border-color: $active-border;
+
+    &:focus {
+      @if $enable-shadows and $btn-active-box-shadow != none {
+        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
+      } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+      }
+    }
+  }
+}
+
+@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
+  color: $color;
+  border-color: $color;
+
+  @include hover() {
+    color: $color-hover;
+    background-color: $active-background;
+    border-color: $active-border;
+  }
+
+  &:focus,
+  &.focus {
+    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $color;
+    background-color: transparent;
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    color: color-yiq($active-background);
+    background-color: $active-background;
+    border-color: $active-border;
+
+    &:focus {
+      @if $enable-shadows and $btn-active-box-shadow != none {
+        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
+      } @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+      }
+    }
+  }
+}
+
+// Button sizes
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+  padding: $padding-y $padding-x;
+  @include font-size($font-size);
+  line-height: $line-height;
+  // Manually declare to provide an override to the browser default
+  @include border-radius($border-radius, 0);
+}

styles/bootstrap/mixins/_caret.scss

@@ -1,62 +1,62 @@
-@mixin caret-down() {
-  border-top: $caret-width solid;
-  border-right: $caret-width solid transparent;
-  border-bottom: 0;
-  border-left: $caret-width solid transparent;
-}
-
-@mixin caret-up() {
-  border-top: 0;
-  border-right: $caret-width solid transparent;
-  border-bottom: $caret-width solid;
-  border-left: $caret-width solid transparent;
-}
-
-@mixin caret-right() {
-  border-top: $caret-width solid transparent;
-  border-right: 0;
-  border-bottom: $caret-width solid transparent;
-  border-left: $caret-width solid;
-}
-
-@mixin caret-left() {
-  border-top: $caret-width solid transparent;
-  border-right: $caret-width solid;
-  border-bottom: $caret-width solid transparent;
-}
-
-@mixin caret($direction: down) {
-  @if $enable-caret {
-    &::after {
-      display: inline-block;
-      margin-left: $caret-spacing;
-      vertical-align: $caret-vertical-align;
-      content: "";
-      @if $direction == down {
-        @include caret-down();
-      } @else if $direction == up {
-        @include caret-up();
-      } @else if $direction == right {
-        @include caret-right();
-      }
-    }
-
-    @if $direction == left {
-      &::after {
-        display: none;
-      }
-
-      &::before {
-        display: inline-block;
-        margin-right: $caret-spacing;
-        vertical-align: $caret-vertical-align;
-        content: "";
-        @include caret-left();
-      }
-    }
-
-    &:empty::after {
-      margin-left: 0;
-    }
-  }
-}
+@mixin caret-down() {
+  border-top: $caret-width solid;
+  border-right: $caret-width solid transparent;
+  border-bottom: 0;
+  border-left: $caret-width solid transparent;
+}
+
+@mixin caret-up() {
+  border-top: 0;
+  border-right: $caret-width solid transparent;
+  border-bottom: $caret-width solid;
+  border-left: $caret-width solid transparent;
+}
+
+@mixin caret-right() {
+  border-top: $caret-width solid transparent;
+  border-right: 0;
+  border-bottom: $caret-width solid transparent;
+  border-left: $caret-width solid;
+}
+
+@mixin caret-left() {
+  border-top: $caret-width solid transparent;
+  border-right: $caret-width solid;
+  border-bottom: $caret-width solid transparent;
+}
+
+@mixin caret($direction: down) {
+  @if $enable-caret {
+    &::after {
+      display: inline-block;
+      margin-left: $caret-spacing;
+      vertical-align: $caret-vertical-align;
+      content: "";
+      @if $direction == down {
+        @include caret-down();
+      } @else if $direction == up {
+        @include caret-up();
+      } @else if $direction == right {
+        @include caret-right();
+      }
+    }
+
+    @if $direction == left {
+      &::after {
+        display: none;
+      }
+
+      &::before {
+        display: inline-block;
+        margin-right: $caret-spacing;
+        vertical-align: $caret-vertical-align;
+        content: "";
+        @include caret-left();
+      }
+    }
+
+    &:empty::after {
+      margin-left: 0;
+    }
+  }
+}

styles/bootstrap/mixins/_clearfix.scss

@@ -1,7 +1,7 @@
-@mixin clearfix() {
-  &::after {
-    display: block;
-    clear: both;
-    content: "";
-  }
-}
+@mixin clearfix() {
+  &::after {
+    display: block;
+    clear: both;
+    content: "";
+  }
+}

styles/bootstrap/mixins/_deprecate.scss

@@ -1,10 +1,10 @@
-// Deprecate mixin
-//
-// This mixin can be used to deprecate mixins or functions.
-// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
-// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
-@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
-  @if ($enable-deprecation-messages != false and $ignore-warning != true) {
-    @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
-  }
-}
+// Deprecate mixin
+//
+// This mixin can be used to deprecate mixins or functions.
+// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to
+// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)
+@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {
+  @if ($enable-deprecation-messages != false and $ignore-warning != true) {
+    @warn "#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.";
+  }
+}

styles/bootstrap/mixins/_float.scss

@@ -1,14 +1,14 @@
-// stylelint-disable declaration-no-important
-
-@mixin float-left() {
-  float: left !important;
-  @include deprecate("The `float-left` mixin", "v4.3.0", "v5");
-}
-@mixin float-right() {
-  float: right !important;
-  @include deprecate("The `float-right` mixin", "v4.3.0", "v5");
-}
-@mixin float-none() {
-  float: none !important;
-  @include deprecate("The `float-none` mixin", "v4.3.0", "v5");
-}
+// stylelint-disable declaration-no-important
+
+@mixin float-left() {
+  float: left !important;
+  @include deprecate("The `float-left` mixin", "v4.3.0", "v5");
+}
+@mixin float-right() {
+  float: right !important;
+  @include deprecate("The `float-right` mixin", "v4.3.0", "v5");
+}
+@mixin float-none() {
+  float: none !important;
+  @include deprecate("The `float-none` mixin", "v4.3.0", "v5");
+}

styles/bootstrap/mixins/_forms.scss

@@ -1,185 +1,185 @@
-// Form control focus state
-//
-// Generate a customized focus state and for any input with the specified color,
-// which defaults to the `$input-focus-border-color` variable.
-//
-// We highly encourage you to not customize the default value, but instead use
-// this to tweak colors on an as-needed basis. This aesthetic change is based on
-// WebKit's default styles, but applicable to a wider range of browsers. Its
-// usability and accessibility should be taken into account with any change.
-//
-// Example usage: change the default blue border and shadow to white for better
-// contrast against a dark gray background.
-@mixin form-control-focus($ignore-warning: false) {
-  &:focus {
-    color: $input-focus-color;
-    background-color: $input-focus-bg;
-    border-color: $input-focus-border-color;
-    outline: 0;
-    @if $enable-shadows {
-      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
-    } @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $input-focus-box-shadow;
-    }
-  }
-  @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
-}
-
-// This mixin uses an `if()` technique to be compatible with Dart Sass
-// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
-@mixin form-validation-state-selector($state) {
-  @if ($state == "valid" or $state == "invalid") {
-    .was-validated #{if(&, "&", "")}:#{$state},
-    #{if(&, "&", "")}.is-#{$state} {
-      @content;
-    }
-  } @else {
-    #{if(&, "&", "")}.is-#{$state} {
-      @content;
-    }
-  }
-}
-
-@mixin form-validation-state($state, $color, $icon) {
-  .#{$state}-feedback {
-    display: none;
-    width: 100%;
-    margin-top: $form-feedback-margin-top;
-    @include font-size($form-feedback-font-size);
-    color: $color;
-  }
-
-  .#{$state}-tooltip {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: 5;
-    display: none;
-    max-width: 100%; // Contain to parent when possible
-    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
-    margin-top: .1rem;
-    @include font-size($form-feedback-tooltip-font-size);
-    line-height: $form-feedback-tooltip-line-height;
-    color: color-yiq($color);
-    background-color: rgba($color, $form-feedback-tooltip-opacity);
-    @include border-radius($form-feedback-tooltip-border-radius);
-
-    // See https://github.com/twbs/bootstrap/pull/31557
-    // Align tooltip to form elements
-    .form-row > .col > &,
-    .form-row > [class*="col-"] > & {
-      left: $form-grid-gutter-width / 2;
-    }
-  }
-
-  @include form-validation-state-selector($state) {
-    ~ .#{$state}-feedback,
-    ~ .#{$state}-tooltip {
-      display: block;
-    }
-  }
-
-  .form-control {
-    @include form-validation-state-selector($state) {
-      border-color: $color;
-
-      @if $enable-validation-icons {
-        padding-right: $input-height-inner;
-        background-image: escape-svg($icon);
-        background-repeat: no-repeat;
-        background-position: right $input-height-inner-quarter center;
-        background-size: $input-height-inner-half $input-height-inner-half;
-      }
-
-      &:focus {
-        border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
-      }
-    }
-  }
-
-  // stylelint-disable-next-line selector-no-qualifying-type
-  textarea.form-control {
-    @include form-validation-state-selector($state) {
-      @if $enable-validation-icons {
-        padding-right: $input-height-inner;
-        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
-      }
-    }
-  }
-
-  .custom-select {
-    @include form-validation-state-selector($state) {
-      border-color: $color;
-
-      @if $enable-validation-icons {
-        padding-right: $custom-select-feedback-icon-padding-right;
-        background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
-      }
-
-      &:focus {
-        border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
-      }
-    }
-  }
-
-  .form-check-input {
-    @include form-validation-state-selector($state) {
-      ~ .form-check-label {
-        color: $color;
-      }
-
-      ~ .#{$state}-feedback,
-      ~ .#{$state}-tooltip {
-        display: block;
-      }
-    }
-  }
-
-  .custom-control-input {
-    @include form-validation-state-selector($state) {
-      ~ .custom-control-label {
-        color: $color;
-
-        &::before {
-          border-color: $color;
-        }
-      }
-
-      &:checked {
-        ~ .custom-control-label::before {
-          border-color: lighten($color, 10%);
-          @include gradient-bg(lighten($color, 10%));
-        }
-      }
-
-      &:focus {
-        ~ .custom-control-label::before {
-          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
-        }
-
-        &:not(:checked) ~ .custom-control-label::before {
-          border-color: $color;
-        }
-      }
-    }
-  }
-
-  // custom file
-  .custom-file-input {
-    @include form-validation-state-selector($state) {
-      ~ .custom-file-label {
-        border-color: $color;
-      }
-
-      &:focus {
-        ~ .custom-file-label {
-          border-color: $color;
-          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
-        }
-      }
-    }
-  }
-}
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `$input-focus-border-color` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+@mixin form-control-focus($ignore-warning: false) {
+  &:focus {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
+  @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);
+}
+
+// This mixin uses an `if()` technique to be compatible with Dart Sass
+// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details
+@mixin form-validation-state-selector($state) {
+  @if ($state == "valid" or $state == "invalid") {
+    .was-validated #{if(&, "&", "")}:#{$state},
+    #{if(&, "&", "")}.is-#{$state} {
+      @content;
+    }
+  } @else {
+    #{if(&, "&", "")}.is-#{$state} {
+      @content;
+    }
+  }
+}
+
+@mixin form-validation-state($state, $color, $icon) {
+  .#{$state}-feedback {
+    display: none;
+    width: 100%;
+    margin-top: $form-feedback-margin-top;
+    @include font-size($form-feedback-font-size);
+    color: $color;
+  }
+
+  .#{$state}-tooltip {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 5;
+    display: none;
+    max-width: 100%; // Contain to parent when possible
+    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;
+    margin-top: .1rem;
+    @include font-size($form-feedback-tooltip-font-size);
+    line-height: $form-feedback-tooltip-line-height;
+    color: color-yiq($color);
+    background-color: rgba($color, $form-feedback-tooltip-opacity);
+    @include border-radius($form-feedback-tooltip-border-radius);
+
+    // See https://github.com/twbs/bootstrap/pull/31557
+    // Align tooltip to form elements
+    .form-row > .col > &,
+    .form-row > [class*="col-"] > & {
+      left: $form-grid-gutter-width / 2;
+    }
+  }
+
+  @include form-validation-state-selector($state) {
+    ~ .#{$state}-feedback,
+    ~ .#{$state}-tooltip {
+      display: block;
+    }
+  }
+
+  .form-control {
+    @include form-validation-state-selector($state) {
+      border-color: $color;
+
+      @if $enable-validation-icons {
+        padding-right: $input-height-inner;
+        background-image: escape-svg($icon);
+        background-repeat: no-repeat;
+        background-position: right $input-height-inner-quarter center;
+        background-size: $input-height-inner-half $input-height-inner-half;
+      }
+
+      &:focus {
+        border-color: $color;
+        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+      }
+    }
+  }
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  textarea.form-control {
+    @include form-validation-state-selector($state) {
+      @if $enable-validation-icons {
+        padding-right: $input-height-inner;
+        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
+      }
+    }
+  }
+
+  .custom-select {
+    @include form-validation-state-selector($state) {
+      border-color: $color;
+
+      @if $enable-validation-icons {
+        padding-right: $custom-select-feedback-icon-padding-right;
+        background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
+      }
+
+      &:focus {
+        border-color: $color;
+        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+      }
+    }
+  }
+
+  .form-check-input {
+    @include form-validation-state-selector($state) {
+      ~ .form-check-label {
+        color: $color;
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+  }
+
+  .custom-control-input {
+    @include form-validation-state-selector($state) {
+      ~ .custom-control-label {
+        color: $color;
+
+        &::before {
+          border-color: $color;
+        }
+      }
+
+      &:checked {
+        ~ .custom-control-label::before {
+          border-color: lighten($color, 10%);
+          @include gradient-bg(lighten($color, 10%));
+        }
+      }
+
+      &:focus {
+        ~ .custom-control-label::before {
+          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        }
+
+        &:not(:checked) ~ .custom-control-label::before {
+          border-color: $color;
+        }
+      }
+    }
+  }
+
+  // custom file
+  .custom-file-input {
+    @include form-validation-state-selector($state) {
+      ~ .custom-file-label {
+        border-color: $color;
+      }
+
+      &:focus {
+        ~ .custom-file-label {
+          border-color: $color;
+          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        }
+      }
+    }
+  }
+}