CIS407A Week 2 iLab User Input Web Pages

Description

Lab Overview
Scenario/Summary
In this lab, we will demonstrate how to create an ASP.NET Web application using MVC. In this application we will create a new model and learn how to make our web application responsive.
Please watch the tutorials before each step.
Required Software
Microsoft Visual Studio.Net
Lab Steps
STEP 1: Create Razor Pages
Before every lab, you will want to make a copy of the previous lab so you always have a backup.
Open the Management Portal web application from Lab 1. In our previous lab we used a query string to pass data. This is not an ideal way to pass information. ASP.NET Core MVC uses a Model to store the data for a page. A model is a C# class that models the data for an app and is stored in the Models folder.
In the Solution Explorer, right click on Models and Select Add-> Class.
Name the class Employee.cs
We will add the following Properties and method for the Employee class. Note that the Id property is automatically set as a primary key. Any property named EmployeeId, EmployeeID, or Id is set as a primary key and the value is automatically generated. When coding by convention the identifiers in the controller, views, and models need to be the same.
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public DateTime StartDate { get; set; }
public string Title { get; set; }
public decimal PayRate { get; set; }
public decimal Hours { get; set; }
public decimal CalculatePay()
{
return PayRate * Hours;
}
}
Next we will add an EmployeeController. This controller will run in response to GET and POST actions. Right click on the Controllers folder then choose Add->Controller, Choose an Empty controller.
Name this controller EmployeeController.cs
We are going to create an overloaded Salary() action that can handle both GET and POST responses and retrieve values from the Model we just created. To access the Model, we must include the following code at the beginning of the Controller code:
using ManagementPortal.Models;
This will prevent errors when we access the Models. If you forget to add this statement at the beginning of the code, Visual Studio intellisense will prompt you to add it later.
Now write the following code in your EmployeeController. Please note in the [HttpGet] Salary() action we are returning the view that corresponds to the current controller and action with the code return View(). In the [HttpPost] Salary() action we are passing the model to the view that corresponds to the current controller and action. This allows the view to bind to the model. The code is return View(model).
Also note in this code we are using ViewBag rather than ViewData. ViewBag is similar to ViewData and is also dynamic in which properties can be set, however properties in ViewBag look different. ViewData[“Salary”] versus ViewBag.Salary. You will come across both types of dynamic objects when you are developing web applications.
Add this code below the existing Index() action method
[HttpGet]
public IActionResult Salary()
{
ViewBag.Salary = 0;
return View();
}
[HttpPost]
public IActionResult Salary(Employee model)
{
ViewBag.Salary = model.CalculatePay();
return View(model);
}
In the above code the Get request will display a blank form to the user and the POST request will process the data that’s submitted.
Next we need to modify our view. The Salary.cshtml is a View in the home folder but we would like to move it and reorganize our Views better. Click on View and right click and choose Add-> New Folder and name the new folder Employee
Cut and paste the Salary.cshtml page from the Home folder to the Employee folder.
You may get a message box, click OK
Open the Salary.cshtml file. We will now bind the model to the view. At the top of the razor page add the following code:
@model Employee
Note: if you have an older version of Visual Studio, you may need the fully qualified name:
@model ManagementPortal.Models.Employee
We can now make use of the model to enter data on the form. Replace the code you previously had in the Salary.cshtml view to the one below. Make note of the form command. The action is Salary and the method is post. Note the action must be set to Salary in order for the Salary action in the controller to run. You will also notice that we can now use the properties from our model. Your code should look like the following:
@model Employee
Salary Calculator
Name:
Pay Rate:
Hours Worked:
Salary:
Calculate
Clear
Save and run your application. Our code is in the Employee controller and Salary View. So we will need to add /Employee/Salary at the end of our web address. It will look something like this in your URL (your port will most likely look different from this):- https://localhost:44359/Employee/Salary (Links to an external site.)
Enter in data in the form and click Calculate. You will notice that the salary field updates when you click Submit and the post method of the form runs.
STEP 2: Making an App Responsive
Because so many applications run on different devices such as laptops, phones, and tablets it is important to ensure your app looks good on every device. This is known as responsive web design and we will make our application mobile friendly. Bootstrap is a popular framework for responsive web design. By going to https://bootswatch.com/ (Links to an external site.) you can review some of the free themes for Bootstrap. You can download a css file from this site and add it to your project. You can also use Visual Studio to add font-awesome as well as jQuery for client side validation. Bootstrap is already installed in ASP.NET MVC Core web applications.
To add new client side libraries, in the Solution Explorer right click on the project name (ManagementPortal) and choose Add -> Client Side library.
In the dialog box type in font-awesome@
and press enter. You will see the font-awesome library appear. Click Install. You may have to click “I Accept” to accept the license agreement.
To view the bootstrap.css, in your solution explorer click on wwwroot/lib/bootstrap/dist/css and expand it to view the code.
We want to be sure this css file is used in all our web pages. All razor pages share the same default layout. This shared layout is located in the Views/Shared/_Layout.cshtml file. Open the _Layout.cshtml file
Here you will see the default layout for all pages. We will also add a link to font-awesome. Note that if you want to make a change to your pages, the _Layout.cshtml is where you can make this change. You can also override default the layout by adding Layout=null at the top of your .cshtml pages.
Add the line in bold below.
Next change the link for the main page. Right now it says “ManagementPortal” and the action is Index(). We will change it to Employees but leave the action as Index(). We will modify the Index() page later.
Employees
Save the layout. We will come back to it later. In the wwwroot folder, create a folder named images. Within that folder add the logo.jpg
from the Files section. Save it to your own computer first, then copy and paste it into the images folder.
To add this logo to all pages you will want to add it to the _Layout.cshtml. Open the Views/Shared/ _Layout.cshtml file and add the code for the logo at the end of the header. You will also add the jumbotron bootstrap class for the design. Feel free to research the jumbotron class as well as other bootstrap classes for user experience.
Now run your application and notice that the logo appears at the top of the page and the links are “Employees”, “Home”, and “Privacy”.
Navigate to the /Employee/Salary page and note the difference in appearance in your form.
Font-awesome allows you to work with icons and symbols to decorate your page. Go to https://fontawesome.com/ (Links to an external site.) and browse some of the icons shown on the site. These can be added to your forms and page by using the prefix fa or fas (for font awesome solid) and then the name of the icon. Icons must also be coded in an element such as a and there are no leading or trailing spaces. You may want to add a   to your html code to include spaces.
In the Salary.cshtml razor page, add a font-awesome icon to the salary label:
Salary:
Image below:
Run your application and note the addition of the icon on your page.
STEP 3: On Your Own
Add the title to your Salary.cshtml page below the Name of the employee. Include the bootstrap classes to format the title label and input box. Customize your form by adding another font-awesome icon or additional bootstrap classes to improve the user experience. Search on the font-awesome site for icon class names. For example, shopping cart can be coded with . Review the bootstrap site or the w3schools site for bootstrap classes to add to your page: Bootstrap 3 Tutorial (w3schools.com). (Links to an external site.) Remember that the changes should be made to the Salary.cshtml page and not to the _Layout.cshtml razor page.
STEP 4: Submit
Save your work and run your Salary.cshtml page after step 3 and enter your full name (first and last), title, a pay rate and salary and click the Calculate button to show that it is working. You should have a nice user experience with icons, bootstrap css formatting and correct calculations. Save a screenshot of your working program to a Word document, and include screenshots of your code. Once you have verified that it works, submit the Word document. .
Be sure to add comments. Comments show professionalism and are a must in systems. As a professional developer, comments will set you apart from others and make your life much easier if maintenance and debugging are needed.
SCREENSHOTS
SOLUTION
PAYMENT
ENTIRE COURSE
The solution includes a Visual Studio ASP.NET project
Attachments [Move over files to preview content of those files]
CIS407A_Week_2_Lab.zip (4.95 MB)
Screenshots
Code-Screenshot.jpg
Employee-Screenshot.jpg
Home-Screenshot.jpg
Visual Studio Project
ManagementPortal
.vs
ManagementPortal
config
applicationhost.config
DesignTimeBuild
.dtbcache.v2
v16
.suo
appsettings.Development.json
appsettings.json
bin
Debug
net5.0
appsettings.Development.json
appsettings.json
libman.json
ManagementPortal.deps.json
ManagementPortal.dll
ManagementPortal.exe
ManagementPortal.pdb
ManagementPortal.runtimeconfig.dev.json
ManagementPortal.runtimeconfig.json
ManagementPortal.Views.dll
ManagementPortal.Views.pdb
ref
ManagementPortal.dll
Controllers
EmployeeController.cs
HomeController.cs
libman.json
ManagementPortal
ManagementPortal.csproj
ManagementPortal.csproj.user
ManagementPortal.sln
Models
Employee.cs
ErrorViewModel.cs
obj
Debug
net5.0
.NETCoreApp,Version=v5.0.AssemblyAttributes.cs
apphost.exe
ManagementPortal.AssemblyInfo.cs
ManagementPortal.AssemblyInfoInputs.cache
ManagementPortal.assets.cache
ManagementPortal.csproj.AssemblyReference.cache
ManagementPortal.csproj.CopyComplete
ManagementPortal.csproj.CoreCompileInputs.cache
ManagementPortal.csproj.FileListAbsolute.txt
ManagementPortal.dll
ManagementPortal.GeneratedMSBuildEditorConfig.editorconfig
ManagementPortal.genruntimeconfig.cache
ManagementPortal.MvcApplicationPartsAssemblyInfo.cache
ManagementPortal.pdb
ManagementPortal.RazorAssemblyInfo.cache
ManagementPortal.RazorAssemblyInfo.cs
ManagementPortal.RazorCoreGenerate.cache
ManagementPortal.RazorTargetAssemblyInfo.cache
ManagementPortal.RazorTargetAssemblyInfo.cs
ManagementPortal.TagHelpers.input.cache
ManagementPortal.TagHelpers.output.cache
ManagementPortal.Views.dll
ManagementPortal.Views.pdb
Razor
Views
Employee
Salary.cshtml.g.cs
Home
Index.cshtml.g.cs
Privacy.cshtml.g.cs
Shared
Error.cshtml.g.cs
_Layout.cshtml.g.cs
_ValidationScriptsPartial.cshtml.g.cs
_ViewImports.cshtml.g.cs
_ViewStart.cshtml.g.cs
ref
ManagementPortal.dll
staticwebassets
ManagementPortal.StaticWebAssets.Manifest.cache
ManagementPortal.StaticWebAssets.xml
ManagementPortal.csproj.nuget.dgspec.json
ManagementPortal.csproj.nuget.g.props
ManagementPortal.csproj.nuget.g.targets
project.assets.json
project.nuget.cache
Program.cs
Properties
launchSettings.json
Startup.cs
Views
Employee
Salary.cshtml
Home
Index.cshtml
Privacy.cshtml
Shared
Error.cshtml
_Layout.cshtml
_ValidationScriptsPartial.cshtml
_ViewImports.cshtml
_ViewStart.cshtml
wwwroot
css
site.css
favicon.ico
images
logo.jpg
js
site.js
lib
bootstrap
dist
css
bootstrap-grid.css
bootstrap-grid.css.map
bootstrap-grid.min.css
bootstrap-grid.min.css.map
bootstrap-reboot.css
bootstrap-reboot.css.map
bootstrap-reboot.min.css
bootstrap-reboot.min.css.map
bootstrap.css
bootstrap.css.map
bootstrap.min.css
bootstrap.min.css.map
js
bootstrap.bundle.js
bootstrap.bundle.js.map
bootstrap.bundle.min.js
bootstrap.bundle.min.js.map
bootstrap.js
bootstrap.js.map
bootstrap.min.js
bootstrap.min.js.map
LICENSE
font-awesome
css
all.css
all.min.css
brands.css
brands.min.css
fontawesome.css
fontawesome.min.css
regular.css
regular.min.css
solid.css
solid.min.css
svg-with-js.css
svg-with-js.min.css
v4-shims.css
v4-shims.min.css
js
all.js
all.min.js
brands.js
brands.min.js
conflict-detection.js
conflict-detection.min.js
fontawesome.js
fontawesome.min.js
regular.js
regular.min.js
solid.js
solid.min.js
v4-shims.js
v4-shims.min.js
sprites
brands.svg
regular.svg
solid.svg
webfonts
fa-brands-400.eot
fa-brands-400.svg
fa-brands-400.ttf
fa-brands-400.woff
fa-brands-400.woff2
fa-regular-400.eot
fa-regular-400.svg
fa-regular-400.ttf
fa-regular-400.woff
fa-regular-400.woff2
fa-solid-900.eot
fa-solid-900.svg
fa-solid-900.ttf
fa-solid-900.woff
fa-solid-900.woff2
jquery
dist
jquery.js
jquery.min.js
jquery.min.map
LICENSE.txt
jquery-validation
dist
additional-methods.js
additional-methods.min.js
jquery.validate.js
jquery.validate.min.js
LICENSE.md
jquery-validation-unobtrusive
jquery.validate.unobtrusive.js
jquery.validate.unobtrusive.min.js
LICENSE.txt
Preview EmployeeController.cs
xxxxx xxxxxxxxx.xxxxxxxxxx.xxx;
xxxxx xxxxxx;
xxxxx xxxxxx.xxxxxxxxxxx.xxxxxxx;
xxxxx xxxxxx.xxxx;
xxxxx xxxxxx.xxxxxxxxx.xxxxx;
using ManagementPortal.Models;
namespace ManagementPortal.Controllers { public class EmployeeController : Controller { [HttpGet]
xxxxxx xxxxxxxxxxxxx xxxxxx()
{
xxxxxxx.xxxxxx = 0;
xxxxxx xxxx();
}
[xxxxxxxx]
Preview HomeController.cs
{
xxxxxx xxxxx xxxxxxxxxxxxxx : xxxxxxxxxx
{
xxxxxxx xxxxxxxx xxxxxxx
_xxxxxx;
public HomeController(ILogger
logger) { _logger = logger; }
public IActionResult Index() { return View(); }
public IActionResult Salary(string name, int hours, int payRate) {
xxxxxxxx[“xxxxx”] = “xxxxxx xxxxxxxxxx”;
xxxxxxxx[“xxxxxxx”] = “xxxxxx xxxxxxxxxx xxx xxxxxxxx: ” + xxxx;
xxxxxxxx[“xxxxx”] = xxxxx;
xxxxxxxx[“xxxxxxx”] = xxxxxxx;
xxxxxx xxxx();
Preview Employee.cs
xxxxx xxxxxx;
xxxxx xxxxxx.xxxxxxxxxxx.xxxxxxx;
xxxxx xxxxxx.xxxx;
xxxxx xxxxxx.xxxxxxxxx.xxxxx;
namespace ManagementPortal.Models { public class Employee { public int Id { get; set; } public string Name { get; set; } public DateTime StartDate { get; set; }
xxxxxx xxxxxx xxxxx { xxx; xxx; }
xxxxxx xxxxxxx xxxxxxx { xxx; xxx; }
xxxxxx xxxxxxx xxxxx { xxx; xxx; }
xxxxxx xxxxxxx xxxxxxxxxxxx()
{
xxxxxx xxxxxxx * xxxxx;
Preview ErrorViewModel.cs
xxxxx xxxxxx;
xxxxxxxxx xxxxxxxxxxxxxxxx.xxxxxx
{
xxxxxx xxxxx xxxxxxxxxxxxxx
{ public string RequestId { get; set; }
public bool ShowRequestId => !string.IsNullOrEmpty(RequestId); } }
}
Preview Program.cs
xxxxx xxxxxxxxx.xxxxxxxxxx.xxxxxxx;
xxxxx xxxxxxxxx.xxxxxxxxxx.xxxxxxxxxxxxx;
xxxxx xxxxxxxxx.xxxxxxxxxx.xxxxxxx;
xxxxx xxxxxxxxx.xxxxxxxxxx.xxxxxxx;
xxxxx xxxxxx;
using System.Collections.Generic; using System.Linq; using System.Threading.Tasks;
namespace ManagementPortal { public class Program
{
xxxxxx xxxxxx xxxx xxxx(xxxxxx[] xxxx)
{
xxxxxxxxxxxxxxxxx(xxxx).xxxxx().xxx();
}
Preview Startup.cs
xxxxxxxxx xxxxxxxxxxxxxxxx
{
xxxxxx xxxxx xxxxxxx
{
xxxxxx xxxxxxx(xxxxxxxxxxxxxx xxxxxxxxxxxxx)
{ Configuration = configuration; }
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { services.AddControllersWithViews(); }
// xxxx xxxxxx xxxx xxxxxx xx xxx xxxxxxx. xxx xxxx xxxxxx xx xxxxxxxxx xxx xxxx xxxxxxx xxxxxxxx.
xxxxxx xxxx xxxxxxxxx(xxxxxxxxxxxxxxxxxxx xxx, xxxxxxxxxxxxxxxxxxx xxx)
{
xx (xxx.xxxxxxxxxxxxx())
{
xxx.xxxxxxxxxxxxxxxxxxxxxxxxx();
Preview site.css
}
.xxx-xxxxxxx {
xxxxx: #xxx;
xxxxxxxxxx-xxxxx: #1x6xx2;
border-color: #1861ac; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background-color: #1b6ec2; border-color: #1861ac; }
html { font-size: 14px; }
@xxxxx (xxx-xxxxx: 768xx) {
xxxx {
xxxx-xxxx: 16xx;
}
}
Preview bootstrap-grid.css
}
.xxxxxxxxx {
xxxxx: 100%;
xxxxxxx-xxxxx: 15xx;
padding-left: 15px; margin-right: auto; margin-left: auto; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) {
.xxxxxxxxx {
xxx-xxxxx: 720xx;
}
}
@xxxxx (xxx-xxxxx: 992xx) {
Preview bootstrap-grid.min.css
html{box-sizing:border-box;-ms-overflow-style:scrollbar}*,::after,::before{box-sizing:inherit}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;padding-right:15px;padding-left:15px}.col{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-first{-ms-flex-order:-1;order:-1}.order-last{-ms-flex-order:13;order:13}.order-0{-ms-flex-order:0;order:0}.order-1{-ms-flex-order:1;order:1}.order-2{-ms-flex-order:2;order:2}.order-3{-ms-flex-order:3;order:3}.order-4{-ms-flex-order:4;order:4}.order-5{-ms-flex-order:5;order:5}.order-6{-ms-flex-order:6;order:6}.order-7{-ms-flex-order:7;order:7}.order-8{-ms-flex-order:8;order:8}.order-9{-ms-flex-order:9;order:9}.order-10{-ms-flex-order:10;order:10}.order-11{-ms-flex-order:11;order:11}.order-12{-ms-flex-order:12;order:12}.offset-1{margin-left:8.333333%}.offset-2{margin-left:16.666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.333333%}.offset-5{margin-left:41.666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.333333%}.offset-8{margin-left:66.666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.333333%}.offset-11{margin-left:91.666667%}@media (min-width:576px){.col-sm{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-sm-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-sm-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-sm-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-sm-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-sm-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-sm-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-sm-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-sm-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-sm-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-sm-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-sm-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-sm-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-sm-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-sm-first{-ms-flex-order:-1;order:-1}.order-sm-last{-ms-flex-order:13;order:13}.order-sm-0{-ms-flex-order:0;order:0}.order-sm-1{-ms-flex-order:1;order:1}.order-sm-2{-ms-flex-order:2;order:2}.order-sm-3{-ms-flex-order:3;order:3}.order-sm-4{-ms-flex-order:4;order:4}.order-sm-5{-ms-flex-order:5;order:5}.order-sm-6{-ms-flex-order:6;order:6}.order-sm-7{-ms-flex-order:7;order:7}.order-sm-8{-ms-flex-order:8;order:8}.order-sm-9{-ms-flex-order:9;order:9}.order-sm-10{-ms-flex-order:10;order:10}.order-sm-11{-ms-flex-order:11;order:11}.order-sm-12{-ms-flex-order:12;order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.333333%}.offset-sm-2{margin-left:16.666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.333333%}.offset-sm-5{margin-left:41.666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.333333%}.offset-sm-8{margin-left:66.666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.333333%}.offset-sm-11{margin-left:91.666667%}}@media (min-width:768px){.col-md{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-md-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-md-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-md-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-md-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-md-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-md-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-md-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-md-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-md-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-md-first{-ms-flex-order:-1;order:-1}.order-md-last{-ms-flex-order:13;order:13}.order-md-0{-ms-flex-order:0;order:0}.order-md-1{-ms-flex-order:1;order:1}.order-md-2{-ms-flex-order:2;order:2}.order-md-3{-ms-flex-order:3;order:3}.order-md-4{-ms-flex-order:4;order:4}.order-md-5{-ms-flex-order:5;order:5}.order-md-6{-ms-flex-order:6;order:6}.order-md-7{-ms-flex-order:7;order:7}.order-md-8{-ms-flex-order:8;order:8}.order-md-9{-ms-flex-order:9;order:9}.order-md-10{-ms-flex-order:10;order:10}.order-md-11{-ms-flex-order:11;order:11}.order-md-12{-ms-flex-order:12;order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.333333%}.offset-md-2{margin-left:16.666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.333333%}.offset-md-5{margin-left:41.666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.333333%}.offset-md-8{margin-left:66.666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.333333%}.offset-md-11{margin-left:91.666667%}}@media (min-width:992px){.col-lg{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-lg-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-lg-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-lg-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-lg-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-lg-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-lg-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-lg-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-lg-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-lg-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-lg-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-lg-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-lg-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-lg-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-lg-first{-ms-flex-order:-1;order:-1}.order-lg-last{-ms-flex-order:13;order:13}.order-lg-0{-ms-flex-order:0;order:0}.order-lg-1{-ms-flex-order:1;order:1}.order-lg-2{-ms-flex-order:2;order:2}.order-lg-3{-ms-flex-order:3;order:3}.order-lg-4{-ms-flex-order:4;order:4}.order-lg-5{-ms-flex-order:5;order:5}.order-lg-6{-ms-flex-order:6;order:6}.order-lg-7{-ms-flex-order:7;order:7}.order-lg-8{-ms-flex-order:8;order:8}.order-lg-9{-ms-flex-order:9;order:9}.order-lg-10{-ms-flex-order:10;order:10}.order-lg-11{-ms-flex-order:11;order:11}.order-lg-12{-ms-flex-order:12;order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.333333%}.offset-lg-2{margin-left:16.666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.333333%}.offset-lg-5{margin-left:41.666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.333333%}.offset-lg-8{margin-left:66.666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.333333%}.offset-lg-11{margin-left:91.666667%}}@media (min-width:1200px){.col-xl{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-xl-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-xl-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-xl-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-xl-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xl-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-xl-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-xl-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xl-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-xl-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-xl-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-xl-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-xl-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-xl-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-xl-first{-ms-flex-order:-1;order:-1}.order-xl-last{-ms-flex-order:13;order:13}.order-xl-0{-ms-flex-order:0;order:0}.order-xl-1{-ms-flex-order:1;order:1}.order-xl-2{-ms-flex-order:2;order:2}.order-xl-3{-ms-flex-order:3;order:3}.order-xl-4{-ms-flex-order:4;order:4}.order-xl-5{-ms-flex-order:5;order:5}.order-xl-6{-ms-flex-order:6;order:6}.order-xl-7{-ms-flex-order:7;order:7}.order-xl-8{-ms-flex-order:8;order:8}.order-xl-9{-ms-flex-order:9;order:9}.order-xl-10{-ms-flex-order:10;order:10}.order-xl-11{-ms-flex-order:11;order:11}.order-xl-12{-ms-flex-order:12;order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.333333%}.offset-xl-2{margin-left:16.666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.333333%}.offset-xl-5{margin-left:41.666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.333333%}.offset-xl-8{margin-left:66.666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.333333%}.offset-xl-11{margin-left:91.666667%}}.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:-ms-flexbox!important;display:flex!important}.d-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}@media (min-width:576px){.d-sm-none{display:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:-ms-flexbox!important;display:flex!important}.d-sm-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:768px){.d-md-none{display:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:-ms-flexbox!important;display:flex!important}.d-md-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:-ms-flexbox!important;display:flex!important}.d-lg-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:1200px){.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:-ms-flexbox!important;display:flex!important}.d-xl-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media print{.d-print-none{display:none!important}.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:-ms-flexbox!important;display:flex!important}.d-print-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}.flex-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.flex-fill{-ms-flex:1 1 auto!important;flex:1 1 auto!important}.flex-grow-0{-ms-flex-positive:0!important;flex-grow:0!important}.flex-grow-1{-ms-flex-positive:1!important;flex-grow:1!important}.flex-shrink-0{-ms-flex-negative:0!important;flex-shrink:0!important}.flex-shrink-1{-ms-flex-negative:1!important;flex-shrink:1!important}.justify-content-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-center{-ms-flex-align:center!important;align-items:center!important}.align-items-baseline{-ms-flex-align:baseline!impor