当前位置：网站首页>NuxtJS实战案例
NuxtJS实战案例
2022-06-25 10:20:00 【后海 0_o】
持续修路自己最能够安身立命的本事，得志行天下，不得志独善其身，淡定而从容
一、案例介绍
目的：实现一个博客项目，能够注册/登录/退出、文章发表/修改/列表/分页/标签/详情/点赞/取消点赞、个人中心，个人信息更新。
- GItee 代码仓库地址：https://gitee.com/yuan0_0/realworld-demo
- 在线 Demo 示例：https://demo.realworld.io/#/
- 静态页模板：https://realworld-docs.netlify.app/docs/specs/frontend-specs/templates/
- 接口文档：https://realworld-docs.netlify.app/docs/specs/backend-specs/endpoints/
- realWorld GitHub 仓库地址：https://github.com/gothinkster/realworld
- NuxtJS 官网：https://www.nuxtjs.cn/guide/routing
- jsdelivr官网：https://www.jsdelivr.com
二、项目初始化
1. 创建项目
# 创建项目目录
mkdir realworld-nuxtjs
# 进入项目目录
cd realworld-nuxtjs
# 生成 package.json 文件
npm init -y
# 安装 nuxt 依赖
npm i nuxt
在 package.json 中添加启动脚本：
"scripts": {
"dev": "nuxt"
}
创建 pages/index.vue 入口文件：
<template>
<div class="home">首页</div>
</template>
启动服务：
npm run dev
2. 导入样式
基于 layout/header 引入样式，需要通过 jsdelivr 转换成国内地址，提高引用速度；
新建 根目录/app.html 视图模板文件：
<!DOCTYPE html>
<html {
{
HTML_ATTRS }}>
<head {
{
HEAD_ATTRS }}>
{
{ HEAD }}
<!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- Import the custom Bootstrap 4 theme from our hosted CDN -->
<!-- <link rel="stylesheet" href="//demo.productionready.io/main.css"> -->
<link rel="stylesheet" href="/index.css">
</head>
<body {
{
BODY_ATTRS }}>
{
{ APP }} <!-- 这body里就是渲染视图的位置，这个app就是根组件 -->
</body>
</html>
新建 static/index.css 自定义样式文件：
.logo-font{
font-family:titillium web,sans-serif}html{
position:relative;min-height:100vh;padding-bottom:100px}/*!* Bootstrap v4.0.0-alpha.2 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)*//*!normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css*/html{
font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{
margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{
display:block}audio,canvas,progress,video{
display:inline-block;vertical-align:baseline}audio:not([controls]){
display:none;height:0}[hidden],template{
display:none}a{
background-color:transparent}a:active{
outline:0}a:hover{
outline:0}abbr[title]{
border-bottom:1px dotted}b,strong{
font-weight:700}dfn{
font-style:italic}h1{
font-size:2em;margin:.67em 0}mark{
background:#ff0;color:#000}small{
font-size:80%}sub,sup{
font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{
top:-.5em}sub{
bottom:-.25em}img{
border:0}svg:not(:root){
overflow:hidden}figure{
margin:1em 40px}hr{
box-sizing:content-box;height:0}pre{
overflow:auto}code,kbd,pre,samp{
font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{
color:inherit;font:inherit;margin:0}button{
overflow:visible}button,select{
text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{
-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{
cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{
border:0;padding:0}input{
line-height:normal}input[type=checkbox],input[type=radio]{
box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{
height:auto}input[type=search]{
-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{
-webkit-appearance:none}fieldset{
border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{
border:0;padding:0}textarea{
overflow:auto}optgroup{
font-weight:700}table{
border-collapse:collapse;border-spacing:0}td,th{
padding:0}@media print{
*,*::before,*::after,*::first-letter,*::first-line{
text-shadow:none!important;box-shadow:none!important}a,a:visited{
text-decoration:underline}abbr[title]::after{
content:" (" attr(title) ")"}pre,blockquote{
border:1px solid #999;page-break-inside:avoid}thead{
display:table-header-group}tr,img{
page-break-inside:avoid}p,h2,h3{
orphans:3;widows:3}h2,h3{
page-break-after:avoid}.navbar{
display:none}.btn>.caret,.dropup>.btn>.caret{
border-top-color:#000!important}.tag{
border:1px solid #000}.table{
border-collapse:collapse!important}.table td,.table th{
background-color:#fff!important}.table-bordered th,.table-bordered td{
border:1px solid #ddd!important}}html{
box-sizing:border-box}*,*::before,*::after{
box-sizing:inherit}@-ms-viewport{
width:device-width;}html{
font-size:16px;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}body{
font-family:source sans pro,sans-serif;font-size:1rem;line-height:1.5;color:#373a3c;background-color:#fff}[tabindex="-1"]:focus{
outline:none!important}h1,h2,h3,h4,h5,h6{
margin-top:0;margin-bottom:.5rem}p{
margin-top:0;margin-bottom:1rem}abbr[title],abbr[data-original-title]{
cursor:help;border-bottom:1px dotted #818a91}address{
margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul,dl{
margin-top:0;margin-bottom:1rem}ol ol,ul ul,ol ul,ul ol{
margin-bottom:0}dt{
font-weight:700}dd{
margin-bottom:.5rem;margin-left:0}blockquote{
margin:0 0 1rem}a{
color:#5cb85c;text-decoration:none}a:focus,a:hover{
color:#3d8b3d;text-decoration:underline}a:focus{
outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}a:not([href]){
color:inherit;text-decoration:none}a:not([href]):focus,a:not([href]):hover{
color:inherit;text-decoration:none}a:not([href]):focus{
outline:none}pre{
margin-top:0;margin-bottom:1rem}figure{
margin:0 0 1rem}img{
vertical-align:middle}[role=button]{
cursor:pointer}a,area,button,[role=button],input,label,select,summary,textarea{
touch-action:manipulation}table{
background-color:transparent}caption{
padding-top:.75rem;padding-bottom:.75rem;color:#818a91;text-align:left;caption-side:bottom}th{
text-align:left}label{
display:inline-block;margin-bottom:.5rem}button:focus{
outline:1px dotted;outline:5px auto -webkit-focus-ring-color}input,button,select,textarea{
margin:0;line-height:inherit;border-radius:0}textarea{
resize:vertical}fieldset{
min-width:0;padding:0;margin:0;border:0}legend{
display:block;width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit}input[type=search]{
-webkit-appearance:none}output{
display:inline-block}[hidden]{
display:none!important}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
margin-bottom:.5rem;font-family:inherit;font-weight:500;line-height:1.1;color:inherit}h1,.h1{
font-size:2.5rem}h2,.h2{
font-size:2rem}h3,.h3{
font-size:1.75rem}h4,.h4{
font-size:1.5rem}h5,.h5{
font-size:1.25rem}h6,.h6{
font-size:1rem}.lead{
font-size:1.25rem;font-weight:300}.display-1{
font-size:6rem;font-weight:300}.display-2{
font-size:5.5rem;font-weight:300}.display-3{
font-size:4.5rem;font-weight:300}.display-4{
font-size:3.5rem;font-weight:300}hr{
margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}small,.small{
font-size:80%;font-weight:400}mark,.mark{
padding:.2em;background-color:#fcf8e3}.list-unstyled{
padding-left:0;list-style:none}.list-inline{
padding-left:0;list-style:none}.list-inline-item{
display:inline-block}.list-inline-item:not(:last-child){
margin-right:5px}.initialism{
font-size:90%;text-transform:uppercase}.blockquote{
padding:.5rem 1rem;margin-bottom:1rem;font-size:1.25rem;border-left:.25rem solid #eceeef}.blockquote-footer{
display:block;font-size:80%;color:#818a91}.blockquote-footer::before{
content:"\2014 \00A0"}.blockquote-reverse{
padding-right:1rem;padding-left:0;text-align:right;border-right:.25rem solid #eceeef;border-left:0}.blockquote-reverse .blockquote-footer::before{
content:""}.blockquote-reverse .blockquote-footer::after{
content:"\00A0 \2014"}.img-fluid,.carousel-inner>.carousel-item>img,.carousel-inner>.carousel-item>a>img{
display:block;max-width:100%;height:auto}.img-rounded{
border-radius:.3rem}.img-thumbnail{
padding:.25rem;background-color:#fff;border:1px solid #ddd;border-radius:.25rem;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{
border-radius:50%}.figure{
display:inline-block}.figure-img{
margin-bottom:.5rem;line-height:1}.figure-caption{
font-size:90%;color:#818a91}code,kbd,pre,samp{
font-family:Menlo,Monaco,Consolas,liberation mono,courier new,monospace}code{
padding:.2rem .4rem;font-size:90%;color:#bd4147;background-color:#f7f7f9;border-radius:.25rem}kbd{
padding:.2rem .4rem;font-size:90%;color:#fff;background-color:#333;border-radius:.2rem}kbd kbd{
padding:0;font-size:100%;font-weight:700}pre{
display:block;margin-top:0;margin-bottom:1rem;font-size:90%;color:#373a3c}pre code{
padding:0;font-size:inherit;color:inherit;background-color:transparent;border-radius:0}.pre-scrollable{
max-height:340px;overflow-y:scroll}.container{
margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px}@media(min-width:544px){
.container{
max-width:576px}}@media(min-width:768px){
.container{
max-width:720px}}@media(min-width:992px){
.container{
max-width:940px}}@media(min-width:1200px){
.container{
max-width:1140px}}.container-fluid{
margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px}.row{
display:flex;flex-wrap:wrap;margin-left:-15px;margin-right:-15px}.col-xs{
position:relative;flex-basis:0;flex-grow:1;max-width:100%;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 8.33333%;max-width:8.33333%}.col-xs-2{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 16.66667%;max-width:16.66667%}.col-xs-3{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 25%;max-width:25%}.col-xs-4{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 33.33333%;max-width:33.33333%}.col-xs-5{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 41.66667%;max-width:41.66667%}.col-xs-6{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 50%;max-width:50%}.col-xs-7{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 58.33333%;max-width:58.33333%}.col-xs-8{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 66.66667%;max-width:66.66667%}.col-xs-9{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 75%;max-width:75%}.col-xs-10{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 83.33333%;max-width:83.33333%}.col-xs-11{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 91.66667%;max-width:91.66667%}.col-xs-12{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 100%;max-width:100%}.pull-xs-0{
right:auto}.pull-xs-1{
right:8.33333%}.pull-xs-2{
right:16.66667%}.pull-xs-3{
right:25%}.pull-xs-4{
right:33.33333%}.pull-xs-5{
right:41.66667%}.pull-xs-6{
right:50%}.pull-xs-7{
right:58.33333%}.pull-xs-8{
right:66.66667%}.pull-xs-9{
right:75%}.pull-xs-10{
right:83.33333%}.pull-xs-11{
right:91.66667%}.pull-xs-12{
right:100%}.push-xs-0{
left:auto}.push-xs-1{
left:8.33333%}.push-xs-2{
left:16.66667%}.push-xs-3{
left:25%}.push-xs-4{
left:33.33333%}.push-xs-5{
left:41.66667%}.push-xs-6{
left:50%}.push-xs-7{
left:58.33333%}.push-xs-8{
left:66.66667%}.push-xs-9{
left:75%}.push-xs-10{
left:83.33333%}.push-xs-11{
left:91.66667%}.push-xs-12{
left:100%}.offset-xs-1{
margin-left:8.33333%}.offset-xs-2{
margin-left:16.66667%}.offset-xs-3{
margin-left:25%}.offset-xs-4{
margin-left:33.33333%}.offset-xs-5{
margin-left:41.66667%}.offset-xs-6{
margin-left:50%}.offset-xs-7{
margin-left:58.33333%}.offset-xs-8{
margin-left:66.66667%}.offset-xs-9{
margin-left:75%}.offset-xs-10{
margin-left:83.33333%}.offset-xs-11{
margin-left:91.66667%}@media(min-width:544px){
.col-sm{
position:relative;flex-basis:0;flex-grow:1;max-width:100%;min-height:1px;padding-right:15px;padding-left:15px}.col-sm-1{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 8.33333%;max-width:8.33333%}.col-sm-2{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 16.66667%;max-width:16.66667%}.col-sm-3{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 25%;max-width:25%}.col-sm-4{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 33.33333%;max-width:33.33333%}.col-sm-5{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 41.66667%;max-width:41.66667%}.col-sm-6{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 50%;max-width:50%}.col-sm-7{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 58.33333%;max-width:58.33333%}.col-sm-8{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 66.66667%;max-width:66.66667%}.col-sm-9{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 75%;max-width:75%}.col-sm-10{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 83.33333%;max-width:83.33333%}.col-sm-11{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 91.66667%;max-width:91.66667%}.col-sm-12{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 100%;max-width:100%}.pull-sm-0{
right:auto}.pull-sm-1{
right:8.33333%}.pull-sm-2{
right:16.66667%}.pull-sm-3{
right:25%}.pull-sm-4{
right:33.33333%}.pull-sm-5{
right:41.66667%}.pull-sm-6{
right:50%}.pull-sm-7{
right:58.33333%}.pull-sm-8{
right:66.66667%}.pull-sm-9{
right:75%}.pull-sm-10{
right:83.33333%}.pull-sm-11{
right:91.66667%}.pull-sm-12{
right:100%}.push-sm-0{
left:auto}.push-sm-1{
left:8.33333%}.push-sm-2{
left:16.66667%}.push-sm-3{
left:25%}.push-sm-4{
left:33.33333%}.push-sm-5{
left:41.66667%}.push-sm-6{
left:50%}.push-sm-7{
left:58.33333%}.push-sm-8{
left:66.66667%}.push-sm-9{
left:75%}.push-sm-10{
left:83.33333%}.push-sm-11{
left:91.66667%}.push-sm-12{
left:100%}.offset-sm-0{
margin-left:0%}.offset-sm-1{
margin-left:8.33333%}.offset-sm-2{
margin-left:16.66667%}.offset-sm-3{
margin-left:25%}.offset-sm-4{
margin-left:33.33333%}.offset-sm-5{
margin-left:41.66667%}.offset-sm-6{
margin-left:50%}.offset-sm-7{
margin-left:58.33333%}.offset-sm-8{
margin-left:66.66667%}.offset-sm-9{
margin-left:75%}.offset-sm-10{
margin-left:83.33333%}.offset-sm-11{
margin-left:91.66667%}}@media(min-width:768px){
.col-md{
position:relative;flex-basis:0;flex-grow:1;max-width:100%;min-height:1px;padding-right:15px;padding-left:15px}.col-md-1{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 8.33333%;max-width:8.33333%}.col-md-2{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 16.66667%;max-width:16.66667%}.col-md-3{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 25%;max-width:25%}.col-md-4{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 33.33333%;max-width:33.33333%}.col-md-5{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 41.66667%;max-width:41.66667%}.col-md-6{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 50%;max-width:50%}.col-md-7{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 58.33333%;max-width:58.33333%}.col-md-8{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 66.66667%;max-width:66.66667%}.col-md-9{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 75%;max-width:75%}.col-md-10{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 83.33333%;max-width:83.33333%}.col-md-11{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 91.66667%;max-width:91.66667%}.col-md-12{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 100%;max-width:100%}.pull-md-0{
right:auto}.pull-md-1{
right:8.33333%}.pull-md-2{
right:16.66667%}.pull-md-3{
right:25%}.pull-md-4{
right:33.33333%}.pull-md-5{
right:41.66667%}.pull-md-6{
right:50%}.pull-md-7{
right:58.33333%}.pull-md-8{
right:66.66667%}.pull-md-9{
right:75%}.pull-md-10{
right:83.33333%}.pull-md-11{
right:91.66667%}.pull-md-12{
right:100%}.push-md-0{
left:auto}.push-md-1{
left:8.33333%}.push-md-2{
left:16.66667%}.push-md-3{
left:25%}.push-md-4{
left:33.33333%}.push-md-5{
left:41.66667%}.push-md-6{
left:50%}.push-md-7{
left:58.33333%}.push-md-8{
left:66.66667%}.push-md-9{
left:75%}.push-md-10{
left:83.33333%}.push-md-11{
left:91.66667%}.push-md-12{
left:100%}.offset-md-0{
margin-left:0%}.offset-md-1{
margin-left:8.33333%}.offset-md-2{
margin-left:16.66667%}.offset-md-3{
margin-left:25%}.offset-md-4{
margin-left:33.33333%}.offset-md-5{
margin-left:41.66667%}.offset-md-6{
margin-left:50%}.offset-md-7{
margin-left:58.33333%}.offset-md-8{
margin-left:66.66667%}.offset-md-9{
margin-left:75%}.offset-md-10{
margin-left:83.33333%}.offset-md-11{
margin-left:91.66667%}}@media(min-width:992px){
.col-lg{
position:relative;flex-basis:0;flex-grow:1;max-width:100%;min-height:1px;padding-right:15px;padding-left:15px}.col-lg-1{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 8.33333%;max-width:8.33333%}.col-lg-2{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 16.66667%;max-width:16.66667%}.col-lg-3{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 25%;max-width:25%}.col-lg-4{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 33.33333%;max-width:33.33333%}.col-lg-5{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 41.66667%;max-width:41.66667%}.col-lg-6{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 50%;max-width:50%}.col-lg-7{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 58.33333%;max-width:58.33333%}.col-lg-8{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 66.66667%;max-width:66.66667%}.col-lg-9{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 75%;max-width:75%}.col-lg-10{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 83.33333%;max-width:83.33333%}.col-lg-11{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 91.66667%;max-width:91.66667%}.col-lg-12{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 100%;max-width:100%}.pull-lg-0{
right:auto}.pull-lg-1{
right:8.33333%}.pull-lg-2{
right:16.66667%}.pull-lg-3{
right:25%}.pull-lg-4{
right:33.33333%}.pull-lg-5{
right:41.66667%}.pull-lg-6{
right:50%}.pull-lg-7{
right:58.33333%}.pull-lg-8{
right:66.66667%}.pull-lg-9{
right:75%}.pull-lg-10{
right:83.33333%}.pull-lg-11{
right:91.66667%}.pull-lg-12{
right:100%}.push-lg-0{
left:auto}.push-lg-1{
left:8.33333%}.push-lg-2{
left:16.66667%}.push-lg-3{
left:25%}.push-lg-4{
left:33.33333%}.push-lg-5{
left:41.66667%}.push-lg-6{
left:50%}.push-lg-7{
left:58.33333%}.push-lg-8{
left:66.66667%}.push-lg-9{
left:75%}.push-lg-10{
left:83.33333%}.push-lg-11{
left:91.66667%}.push-lg-12{
left:100%}.offset-lg-0{
margin-left:0%}.offset-lg-1{
margin-left:8.33333%}.offset-lg-2{
margin-left:16.66667%}.offset-lg-3{
margin-left:25%}.offset-lg-4{
margin-left:33.33333%}.offset-lg-5{
margin-left:41.66667%}.offset-lg-6{
margin-left:50%}.offset-lg-7{
margin-left:58.33333%}.offset-lg-8{
margin-left:66.66667%}.offset-lg-9{
margin-left:75%}.offset-lg-10{
margin-left:83.33333%}.offset-lg-11{
margin-left:91.66667%}}@media(min-width:1200px){
.col-xl{
position:relative;flex-basis:0;flex-grow:1;max-width:100%;min-height:1px;padding-right:15px;padding-left:15px}.col-xl-1{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 8.33333%;max-width:8.33333%}.col-xl-2{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 16.66667%;max-width:16.66667%}.col-xl-3{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 25%;max-width:25%}.col-xl-4{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 33.33333%;max-width:33.33333%}.col-xl-5{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 41.66667%;max-width:41.66667%}.col-xl-6{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 50%;max-width:50%}.col-xl-7{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 58.33333%;max-width:58.33333%}.col-xl-8{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 66.66667%;max-width:66.66667%}.col-xl-9{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 75%;max-width:75%}.col-xl-10{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 83.33333%;max-width:83.33333%}.col-xl-11{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 91.66667%;max-width:91.66667%}.col-xl-12{
position:relative;min-height:1px;padding-right:15px;padding-left:15px;flex:0 0 100%;max-width:100%}.pull-xl-0{
right:auto}.pull-xl-1{
right:8.33333%}.pull-xl-2{
right:16.66667%}.pull-xl-3{
right:25%}.pull-xl-4{
right:33.33333%}.pull-xl-5{
right:41.66667%}.pull-xl-6{
right:50%}.pull-xl-7{
right:58.33333%}.pull-xl-8{
right:66.66667%}.pull-xl-9{
right:75%}.pull-xl-10{
right:83.33333%}.pull-xl-11{
right:91.66667%}.pull-xl-12{
right:100%}.push-xl-0{
left:auto}.push-xl-1{
left:8.33333%}.push-xl-2{
left:16.66667%}.push-xl-3{
left:25%}.push-xl-4{
left:33.33333%}.push-xl-5{
left:41.66667%}.push-xl-6{
left:50%}.push-xl-7{
left:58.33333%}.push-xl-8{
left:66.66667%}.push-xl-9{
left:75%}.push-xl-10{
left:83.33333%}.push-xl-11{
left:91.66667%}.push-xl-12{
left:100%}.offset-xl-0{
margin-left:0%}.offset-xl-1{
margin-left:8.33333%}.offset-xl-2{
margin-left:16.66667%}.offset-xl-3{
margin-left:25%}.offset-xl-4{
margin-left:33.33333%}.offset-xl-5{
margin-left:41.66667%}.offset-xl-6{
margin-left:50%}.offset-xl-7{
margin-left:58.33333%}.offset-xl-8{
margin-left:66.66667%}.offset-xl-9{
margin-left:75%}.offset-xl-10{
margin-left:83.33333%}.offset-xl-11{
margin-left:91.66667%}}.table{
width:100%;max-width:100%;margin-bottom:1rem}.table th,.table td{
padding:.75rem;vertical-align:top;border-top:1px solid #eceeef}.table thead th{
vertical-align:bottom;border-bottom:2px solid #eceeef}.table tbody+tbody{
border-top:2px solid #eceeef}.table .table{
background-color:#fff}.table-sm th,.table-sm td{
padding:.3rem}.table-bordered{
border:1px solid #eceeef}.table-bordered th,.table-bordered td{
border:1px solid #eceeef}.table-bordered thead th,.table-bordered thead td{
border-bottom-width:2px}.table-striped tbody tr:nth-of-type(odd){
background-color:#f9f9f9}.table-hover tbody tr:hover{
background-color:#f5f5f5}.table-active,.table-active>th,.table-active>td{
background-color:#f5f5f5}.table-hover .table-active:hover{
background-color:#e8e8e8}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{
background-color:#e8e8e8}.table-success,.table-success>th,.table-success>td{
background-color:#dff0d8}.table-hover .table-success:hover{
background-color:#d0e9c6}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{
background-color:#d0e9c6}.table-info,.table-info>th,.table-info>td{
background-color:#d9edf7}.table-hover .table-info:hover{
background-color:#c4e3f3}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{
background-color:#c4e3f3}.table-warning,.table-warning>th,.table-warning>td{
background-color:#fcf8e3}.table-hover .table-warning:hover{
background-color:#faf2cc}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{
background-color:#faf2cc}.table-danger,.table-danger>th,.table-danger>td{
background-color:#f2dede}.table-hover .table-danger:hover{
background-color:#ebcccc}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{
background-color:#ebcccc}.table-responsive{
display:block;width:100%;min-height:.01%;overflow-x:auto}.thead-inverse th{
color:#fff;background-color:#373a3c}.thead-default th{
color:#55595c;background-color:#eceeef}.table-inverse{
color:#eceeef;background-color:#373a3c}.table-inverse.table-bordered{
border:0}.table-inverse th,.table-inverse td,.table-inverse thead th{
border-color:#55595c}.table-reflow thead{
float:left}.table-reflow tbody{
display:block;white-space:nowrap}.table-reflow th,.table-reflow td{
border-top:1px solid #eceeef;border-left:1px solid #eceeef}.table-reflow th:last-child,.table-reflow td:last-child{
border-right:1px solid #eceeef}.table-reflow thead:last-child tr:last-child th,.table-reflow thead:last-child tr:last-child td,.table-reflow tbody:last-child tr:last-child th,.table-reflow tbody:last-child tr:last-child td,.table-reflow tfoot:last-child tr:last-child th,.table-reflow tfoot:last-child tr:last-child td{
border-bottom:1px solid #eceeef}.table-reflow tr{
float:left}.table-reflow tr th,.table-reflow tr td{
display:block!important;border:1px solid #eceeef}.form-control{
display:block;width:100%;padding:.5rem .75rem;font-size:1rem;line-height:1.25;color:#55595c;background-color:#fff;background-image:none;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.form-control::-ms-expand{
background-color:transparent;border:0}.form-control:focus{
border-color:#66afe9;outline:none}.form-control::placeholder{
color:#999;opacity:1}.form-control:disabled,.form-control[readonly]{
background-color:#eceeef;opacity:1}.form-control:disabled{
cursor:not-allowed}select.form-control:not([size]):not([multiple]){
height:2.5rem}.form-control-file,.form-control-range{
display:block}.form-control-label{
padding:.5rem .75rem;margin-bottom:0}.form-control-legend{
padding:.5rem .75rem;margin-bottom:0;font-size:1rem}_::-webkit-full-page-media.form-control,input[type=date].form-control,input[type=time].form-control,input[type=datetime-local].form-control,input[type=month].form-control{
line-height:2.5rem}_::-webkit-full-page-media.input-sm,.input-group-sm _::-webkit-full-page-media.form-control,input[type=date].input-sm,.input-group-sm input[type=date].form-control,input[type=time].input-sm,.input-group-sm input[type=time].form-control,input[type=datetime-local].input-sm,.input-group-sm input[type=datetime-local].form-control,input[type=month].input-sm,.input-group-sm input[type=month].form-control{
line-height:1.8125rem}_::-webkit-full-page-media.input-lg,.input-group-lg _::-webkit-full-page-media.form-control,input[type=date].input-lg,.input-group-lg input[type=date].form-control,input[type=time].input-lg,.input-group-lg input[type=time].form-control,input[type=datetime-local].input-lg,.input-group-lg input[type=datetime-local].form-control,input[type=month].input-lg,.input-group-lg input[type=month].form-control{
line-height:3.16667rem}.form-control-static{
min-height:2.5rem;padding-top:.5rem;padding-bottom:.5rem;margin-bottom:0}.form-control-static.form-control-sm,.input-group-sm>.form-control-static.form-control,.input-group-sm>.form-control-static.input-group-addon,.input-group-sm>.input-group-btn>.form-control-static.btn,.form-control-static.form-control-lg,.input-group-lg>.form-control-static.form-control,.input-group-lg>.form-control-static.input-group-addon,.input-group-lg>.input-group-btn>.form-control-static.btn{
padding-right:0;padding-left:0}.form-control-sm,.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{
padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.form-control-lg,.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{
padding:.75rem 1.5rem;font-size:1.25rem;border-radius:.3rem}.form-group{
margin-bottom:1rem}.radio,.checkbox{
position:relative;display:block;margin-bottom:.75rem}.radio label,.checkbox label{
padding-left:1.25rem;margin-bottom:0;cursor:pointer}.radio label input:only-child,.checkbox label input:only-child{
position:static}.radio input[type=radio],.radio-inline input[type=radio],.checkbox input[type=checkbox],.checkbox-inline input[type=checkbox]{
position:absolute;margin-top:.25rem;margin-left:-1.25rem}.radio+.radio,.checkbox+.checkbox{
margin-top:-.25rem}.radio-inline,.checkbox-inline{
position:relative;display:inline-block;padding-left:1.25rem;margin-bottom:0;vertical-align:middle;cursor:pointer}.radio-inline+.radio-inline,.checkbox-inline+.checkbox-inline{
margin-top:0;margin-left:.75rem}input[type=radio]:disabled,input[type=radio].disabled,input[type=checkbox]:disabled,input[type=checkbox].disabled{
cursor:not-allowed}.radio-inline.disabled,.checkbox-inline.disabled{
cursor:not-allowed}.radio.disabled label,.checkbox.disabled label{
cursor:not-allowed}.form-control-success,.form-control-warning,.form-control-danger{
padding-right:2.25rem;background-repeat:no-repeat;background-position:center right .625rem;background-size:1.25rem 1.25rem}.has-success .text-help,.has-success .form-control-label,.has-success .radio,.has-success .checkbox,.has-success .radio-inline,.has-success .checkbox-inline,.has-success.radio label,.has-success.checkbox label,.has-success.radio-inline label,.has-success.checkbox-inline label,.has-success .custom-control{
color:#5cb85c}.has-success .form-control{
border-color:#5cb85c}.has-success .input-group-addon{
color:#5cb85c;border-color:#5cb85c;background-color:#eaf6ea}.has-success .form-control-feedback{
color:#5cb85c}.has-success .form-control-success{
background-image:url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGZpbGw9JyM1Y2I4NWMnIGQ9J00yLjMgNi43M0wuNiA0LjUzYy0uNC0xLjA0LjQ2LTEuNCAxLjEtLjhsMS4xIDEuNCAzLjQtMy44Yy42LS42MyAxLjYtLjI3IDEuMi43bC00IDQuNmMtLjQzLjUtLjguNC0xLjEuMXonLz48L3N2Zz4=)}.has-warning .text-help,.has-warning .form-control-label,.has-warning .radio,.has-warning .checkbox,.has-warning .radio-inline,.has-warning .checkbox-inline,.has-warning.radio label,.has-warning.checkbox label,.has-warning.radio-inline label,.has-warning.checkbox-inline label,.has-warning .custom-control{
color:#f0ad4e}.has-warning .form-control{
border-color:#f0ad4e}.has-warning .input-group-addon{
color:#f0ad4e;border-color:#f0ad4e;background-color:#fff}.has-warning .form-control-feedback{
color:#f0ad4e}.has-warning .form-control-warning{
background-image:url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGZpbGw9JyNmMGFkNGUnIGQ9J000LjQgNS4zMjRoLS44di0yLjQ2aC44em0wIDEuNDJoLS44VjUuODloLjh6TTMuNzYuNjNMLjA0IDcuMDc1Yy0uMTE1LjIuMDE2LjQyNS4yNi40MjZoNy4zOTdjLjI0MiAwIC4zNzItLjIyNi4yNTgtLjQyNkM2LjcyNiA0LjkyNCA1LjQ3IDIuNzkgNC4yNTMuNjNjLS4xMTMtLjE3NC0uMzktLjE3NC0uNDk0IDB6Jy8+PC9zdmc+)}.has-danger .text-help,.has-danger .form-control-label,.has-danger .radio,.has-danger .checkbox,.has-danger .radio-inline,.has-danger .checkbox-inline,.has-danger.radio label,.has-danger.checkbox label,.has-danger.radio-inline label,.has-danger.checkbox-inline label,.has-danger .custom-control{
color:#b85c5c}.has-danger .form-control{
border-color:#b85c5c}.has-danger .input-group-addon{
color:#b85c5c;border-color:#b85c5c;background-color:#f6eaea}.has-danger .form-control-feedback{
color:#b85c5c}.has-danger .form-control-danger{
background-image:url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9JyNkOTUzNGYnIHZpZXdCb3g9Jy0yIC0yIDcgNyc+PHBhdGggc3Ryb2tlPScjZDk1MzRmJyBkPSdNMCAwbDMgM20wLTNMMCAzJy8+PGNpcmNsZSByPScuNScvPjxjaXJjbGUgY3g9JzMnIHI9Jy41Jy8+PGNpcmNsZSBjeT0nMycgcj0nLjUnLz48Y2lyY2xlIGN4PSczJyBjeT0nMycgcj0nLjUnLz48L3N2Zz4=)}@media(min-width:544px){
.form-inline .form-group{
display:inline-block;margin-bottom:0;vertical-align:middle}.form-inline .form-control{
display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-static{
display:inline-block}.form-inline .input-group{
display:inline-table;vertical-align:middle}.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn,.form-inline .input-group .form-control{
width:auto}.form-inline .input-group>.form-control{
width:100%}.form-inline .form-control-label{
margin-bottom:0;vertical-align:middle}.form-inline .radio,.form-inline .checkbox{
display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.form-inline .radio label,.form-inline .checkbox label{
padding-left:0}.form-inline .radio input[type=radio],.form-inline .checkbox input[type=checkbox]{
position:relative;margin-left:0}.form-inline .has-feedback .form-control-feedback{
top:0}}.btn{
display:inline-block;font-weight:400;line-height:1.25;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;border:1px solid transparent;padding:.5rem 1rem;font-size:1rem;border-radius:.25rem}.btn:focus,.btn.focus,.btn:active:focus,.btn:active.focus,.btn.active:focus,.btn.active.focus{
outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn:focus,.btn:hover{
text-decoration:none}.btn.focus{
text-decoration:none}.btn:active,.btn.active{
background-image:none;outline:0}.btn.disabled,.btn:disabled{
cursor:not-allowed;opacity:.65}a.btn.disabled,fieldset[disabled] a.btn{
pointer-events:none}.btn-primary{
color:#fff;background-color:#5cb85c;border-color:#5cb85c}.btn-primary:hover{
color:#fff;background-color:#449d44;border-color:#419641}.btn-primary:focus,.btn-primary.focus{
color:#fff;background-color:#449d44;border-color:#419641}.btn-primary:active,.btn-primary.active,.open>.btn-primary.dropdown-toggle{
color:#fff;background-color:#449d44;border-color:#419641;background-image:none}.btn-primary:active:hover,.btn-primary:active:focus,.btn-primary:active.focus,.btn-primary.active:hover,.btn-primary.active:focus,.btn-primary.active.focus,.open>.btn-primary.dropdown-toggle:hover,.open>.btn-primary.dropdown-toggle:focus,.open>.btn-primary.dropdown-toggle.focus{
color:#fff;background-color:#398439;border-color:#2d672d}.btn-primary.disabled:focus,.btn-primary.disabled.focus,.btn-primary:disabled:focus,.btn-primary:disabled.focus{
background-color:#5cb85c;border-color:#5cb85c}.btn-primary.disabled:hover,.btn-primary:disabled:hover{
background-color:#5cb85c;border-color:#5cb85c}.btn-secondary{
color:#373a3c;background-color:#fff;border-color:#ccc}.btn-secondary:hover{
color:#373a3c;background-color:#e6e6e6;border-color:#adadad}.btn-secondary:focus,.btn-secondary.focus{
color:#373a3c;background-color:#e6e6e6;border-color:#adadad}.btn-secondary:active,.btn-secondary.active,.open>.btn-secondary.dropdown-toggle{
color:#373a3c;background-color:#e6e6e6;border-color:#adadad;background-image:none}.btn-secondary:active:hover,.btn-secondary:active:focus,.btn-secondary:active.focus,.btn-secondary.active:hover,.btn-secondary.active:focus,.btn-secondary.active.focus,.open>.btn-secondary.dropdown-toggle:hover,.open>.btn-secondary.dropdown-toggle:focus,.open>.btn-secondary.dropdown-toggle.focus{
color:#373a3c;background-color:#d4d4d4;border-color:#8c8c8c}.btn-secondary.disabled:focus,.btn-secondary.disabled.focus,.btn-secondary:disabled:focus,.btn-secondary:disabled.focus{
background-color:#fff;border-color:#ccc}.btn-secondary.disabled:hover,.btn-secondary:disabled:hover{
background-color:#fff;border-color:#ccc}.btn-info{
color:#fff;background-color:#5bc0de;border-color:#5bc0de}.btn-info:hover{
color:#fff;background-color:#31b0d5;border-color:#2aabd2}.btn-info:focus,.btn-info.focus{
color:#fff;background-color:#31b0d5;border-color:#2aabd2}.btn-info:active,.btn-info.active,.open>.btn-info.dropdown-toggle{
color:#fff;background-color:#31b0d5;border-color:#2aabd2;background-image:none}.btn-info:active:hover,.btn-info:active:focus,.btn-info:active.focus,.btn-info.active:hover,.btn-info.active:focus,.btn-info.active.focus,.open>.btn-info.dropdown-toggle:hover,.open>.btn-info.dropdown-toggle:focus,.open>.btn-info.dropdown-toggle.focus{
color:#fff;background-color:#269abc;border-color:#1f7e9a}.btn-info.disabled:focus,.btn-info.disabled.focus,.btn-info:disabled:focus,.btn-info:disabled.focus{
background-color:#5bc0de;border-color:#5bc0de}.btn-info.disabled:hover,.btn-info:disabled:hover{
background-color:#5bc0de;border-color:#5bc0de}.btn-success{
color:#fff;background-color:#5cb85c;border-color:#5cb85c}.btn-success:hover{
color:#fff;background-color:#449d44;border-color:#419641}.btn-success:focus,.btn-success.focus{
color:#fff;background-color:#449d44;border-color:#419641}.btn-success:active,.btn-success.active,.open>.btn-success.dropdown-toggle{
color:#fff;background-color:#449d44;border-color:#419641;background-image:none}.btn-success:active:hover,.btn-success:active:focus,.btn-success:active.focus,.btn-success.active:hover,.btn-success.active:focus,.btn-success.active.focus,.open>.btn-success.dropdown-toggle:hover,.open>.btn-success.dropdown-toggle:focus,.open>.btn-success.dropdown-toggle.focus{
color:#fff;background-color:#398439;border-color:#2d672d}.btn-success.disabled:focus,.btn-success.disabled.focus,.btn-success:disabled:focus,.btn-success:disabled.focus{
background-color:#5cb85c;border-color:#5cb85c}.btn-success.disabled:hover,.btn-success:disabled:hover{
background-color:#5cb85c;border-color:#5cb85c}.btn-warning{
color:#fff;background-color:#f0ad4e;border-color:#f0ad4e}.btn-warning:hover{
color:#fff;background-color:#ec971f;border-color:#eb9316}.btn-warning:focus,.btn-warning.focus{
color:#fff;background-color:#ec971f;border-color:#eb9316}.btn-warning:active,.btn-warning.active,.open>.btn-warning.dropdown-toggle{
color:#fff;background-color:#ec971f;border-color:#eb9316;background-image:none}.btn-warning:active:hover,.btn-warning:active:focus,.btn-warning:active.focus,.btn-warning.active:hover,.btn-warning.active:focus,.btn-warning.active.focus,.open>.btn-warning.dropdown-toggle:hover,.open>.btn-warning.dropdown-toggle:focus,.open>.btn-warning.dropdown-toggle.focus{
color:#fff;background-color:#d58512;border-color:#b06d0f}.btn-warning.disabled:focus,.btn-warning.disabled.focus,.btn-warning:disabled:focus,.btn-warning:disabled.focus{
background-color:#f0ad4e;border-color:#f0ad4e}.btn-warning.disabled:hover,.btn-warning:disabled:hover{
background-color:#f0ad4e;border-color:#f0ad4e}.btn-danger{
color:#fff;background-color:#b85c5c;border-color:#b85c5c}.btn-danger:hover{
color:#fff;background-color:#9d4444;border-color:#964141}.btn-danger:focus,.btn-danger.focus{
color:#fff;background-color:#9d4444;border-color:#964141}.btn-danger:active,.btn-danger.active,.open>.btn-danger.dropdown-toggle{
color:#fff;background-color:#9d4444;border-color:#964141;background-image:none}.btn-danger:active:hover,.btn-danger:active:focus,.btn-danger:active.focus,.btn-danger.active:hover,.btn-danger.active:focus,.btn-danger.active.focus,.open>.btn-danger.dropdown-toggle:hover,.open>.btn-danger.dropdown-toggle:focus,.open>.btn-danger.dropdown-toggle.focus{
color:#fff;background-color:#843939;border-color:#672d2d}.btn-danger.disabled:focus,.btn-danger.disabled.focus,.btn-danger:disabled:focus,.btn-danger:disabled.focus{
background-color:#b85c5c;border-color:#b85c5c}.btn-danger.disabled:hover,.btn-danger:disabled:hover{
background-color:#b85c5c;border-color:#b85c5c}.btn-outline-primary{
color:#5cb85c;background-image:none;background-color:transparent;border-color:#5cb85c}.btn-outline-primary:hover{
color:#fff;background-color:#5cb85c;border-color:#5cb85c}.btn-outline-primary:focus,.btn-outline-primary.focus{
color:#fff;background-color:#5cb85c;border-color:#5cb85c}.btn-outline-primary:active,.btn-outline-primary.active,.open>.btn-outline-primary.dropdown-toggle{
color:#fff;background-color:#5cb85c;border-color:#5cb85c}.btn-outline-primary:active:hover,.btn-outline-primary:active:focus,.btn-outline-primary:active.focus,.btn-outline-primary.active:hover,.btn-outline-primary.active:focus,.btn-outline-primary.active.focus,.open>.btn-outline-primary.dropdown-toggle:hover,.open>.btn-outline-primary.dropdown-toggle:focus,.open>.btn-outline-primary.dropdown-toggle.focus{
color:#fff;background-color:#398439;border-color:#2d672d}.btn-outline-primary.disabled:focus,.btn-outline-primary.disabled.focus,.btn-outline-primary:disabled:focus,.btn-outline-primary:disabled.focus{
border-color:#a3d7a3}.btn-outline-primary.disabled:hover,.btn-outline-primary:disabled:hover{
border-color:#a3d7a3}.btn-outline-secondary{
color:#ccc;background-image:none;background-color:transparent;border-color:#ccc}.btn-outline-secondary:hover{
color:#fff;background-color:#ccc;border-color:#ccc}.btn-outline-secondary:focus,.btn-outline-secondary.focus{
color:#fff;background-color:#ccc;border-color:#ccc}.btn-outline-secondary:active,.btn-outline-secondary.active,.open>.btn-outline-secondary.dropdown-toggle{
color:#fff;background-color:#ccc;border-color:#ccc}.btn-outline-secondary:active:hover,.btn-outline-secondary:active:focus,.btn-outline-secondary:active.focus,.btn-outline-secondary.active:hover,.btn-outline-secondary.active:focus,.btn-outline-secondary.active.focus,.open>.btn-outline-secondary.dropdown-toggle:hover,.open>.btn-outline-secondary.dropdown-toggle:focus,.open>.btn-outline-secondary.dropdown-toggle.focus{
color:#fff;background-color:#a1a1a1;border-color:#8c8c8c}.btn-outline-secondary.disabled:focus,.btn-outline-secondary.disabled.focus,.btn-outline-secondary:disabled:focus,.btn-outline-secondary:disabled.focus{
border-color:#fff}.btn-outline-secondary.disabled:hover,.btn-outline-secondary:disabled:hover{
border-color:#fff}.btn-outline-info{
color:#5bc0de;background-image:none;background-color:transparent;border-color:#5bc0de}.btn-outline-info:hover{
color:#fff;background-color:#5bc0de;border-color:#5bc0de}.btn-outline-info:focus,.btn-outline-info.focus{
color:#fff;background-color:#5bc0de;border-color:#5bc0de}.btn-outline-info:active,.btn-outline-info.active,.open>.btn-outline-info.dropdown-toggle{
color:#fff;background-color:#5bc0de;border-color:#5bc0de}.btn-outline-info:active:hover,.btn-outline-info:active:focus,.btn-outline-info:active.focus,.btn-outline-info.active:hover,.btn-outline-info.active:focus,.btn-outline-info.active.focus,.open>.btn-outline-info.dropdown-toggle:hover,.open>.btn-outline-info.dropdown-toggle:focus,.open>.btn-outline-info.dropdown-toggle.focus{
color:#fff;background-color:#269abc;border-color:#1f7e9a}.btn-outline-info.disabled:focus,.btn-outline-info.disabled.focus,.btn-outline-info:disabled:focus,.btn-outline-info:disabled.focus{
border-color:#b0e1ef}.btn-outline-info.disabled:hover,.btn-outline-info:disabled:hover{
border-color:#b0e1ef}.btn-outline-success{
color:#5cb85c;background-image:none;background-color:transparent;border-color:#5cb85c}.btn-outline-success:hover{
color:#fff;background-color:#5cb85c;border-color:#5cb85c}.btn-outline-success:focus,.btn-outline-success.focus{
color:#fff;background-color:#5cb85c;border-color:#5cb85c}.btn-outline-success:active,.btn-outline-success.active,.open>.btn-outline-success.dropdown-toggle{
color:#fff;background-color:#5cb85c;border-color:#5cb85c}.btn-outline-success:active:hover,.btn-outline-success:active:focus,.btn-outline-success:active.focus,.btn-outline-success.active:hover,.btn-outline-success.active:focus,.btn-outline-success.active.focus,.open>.btn-outline-success.dropdown-toggle:hover,.open>.btn-outline-success.dropdown-toggle:focus,.open>.btn-outline-success.dropdown-toggle.focus{
color:#fff;background-color:#398439;border-color:#2d672d}.btn-outline-success.disabled:focus,.btn-outline-success.disabled.focus,.btn-outline-success:disabled:focus,.btn-outline-success:disabled.focus{
border-color:#a3d7a3}.btn-outline-success.disabled:hover,.btn-outline-success:disabled:hover{
border-color:#a3d7a3}.btn-outline-warning{
color:#f0ad4e;background-image:none;background-color:transparent;border-color:#f0ad4e}.btn-outline-warning:hover{
color:#fff;background-color:#f0ad4e;border-color:#f0ad4e}.btn-outline-warning:focus,.btn-outline-warning.focus{
color:#fff;background-color:#f0ad4e;border-color:#f0ad4e}.btn-outline-warning:active,.btn-outline-warning.active,.open>.btn-outline-warning.dropdown-toggle{
color:#fff;background-color:#f0ad4e;border-color:#f0ad4e}.btn-outline-warning:active:hover,.btn-outline-warning:active:focus,.btn-outline-warning:active.focus,.btn-outline-warning.active:hover,.btn-outline-warning.active:focus,.btn-outline-warning.active.focus,.open>.btn-outline-warning.dropdown-toggle:hover,.open>.btn-outline-warning.dropdown-toggle:focus,.open>.btn-outline-warning.dropdown-toggle.focus{
color:#fff;background-color:#d58512;border-color:#b06d0f}.btn-outline-warning.disabled:focus,.btn-outline-warning.disabled.focus,.btn-outline-warning:disabled:focus,.btn-outline-warning:disabled.focus{
border-color:#f8d9ac}.btn-outline-warning.disabled:hover,.btn-outline-warning:disabled:hover{
border-color:#f8d9ac}.btn-outline-danger{
color:#b85c5c;background-image:none;background-color:transparent;border-color:#b85c5c}.btn-outline-danger:hover{
color:#fff;background-color:#b85c5c;border-color:#b85c5c}.btn-outline-danger:focus,.btn-outline-danger.focus{
color:#fff;background-color:#b85c5c;border-color:#b85c5c}.btn-outline-danger:active,.btn-outline-danger.active,.open>.btn-outline-danger.dropdown-toggle{
color:#fff;background-color:#b85c5c;border-color:#b85c5c}.btn-outline-danger:active:hover,.btn-outline-danger:active:focus,.btn-outline-danger:active.focus,.btn-outline-danger.active:hover,.btn-outline-danger.active:focus,.btn-outline-danger.active.focus,.open>.btn-outline-danger.dropdown-toggle:hover,.open>.btn-outline-danger.dropdown-toggle:focus,.open>.btn-outline-danger.dropdown-toggle.focus{
color:#fff;background-color:#843939;border-color:#672d2d}.btn-outline-danger.disabled:focus,.btn-outline-danger.disabled.focus,.btn-outline-danger:disabled:focus,.btn-outline-danger:disabled.focus{
border-color:#d7a3a3}.btn-outline-danger.disabled:hover,.btn-outline-danger:disabled:hover{
border-color:#d7a3a3}.btn-link{
font-weight:400;color:#5cb85c;border-radius:0}.btn-link,.btn-link:active,.btn-link.active,.btn-link:disabled{
background-color:transparent}.btn-link,.btn-link:focus,.btn-link:active{
border-color:transparent}.btn-link:hover{
border-color:transparent}.btn-link:focus,.btn-link:hover{
color:#3d8b3d;text-decoration:underline;background-color:transparent}.btn-link:disabled:focus,.btn-link:disabled:hover{
color:#818a91;text-decoration:none}.btn-lg,.btn-group-lg>.btn{
padding:.75rem 1.5rem;font-size:1.25rem;border-radius:.3rem}.btn-sm,.btn-group-sm>.btn{
padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.btn-block{
display:block;width:100%}.btn-block+.btn-block{
margin-top:5px}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{
width:100%}.fade{
opacity:0;transition:opacity .15s linear}.fade.in{
opacity:1}.collapse{
display:none}.collapse.in{
display:block}.collapsing{
position:relative;height:0;overflow:hidden;transition-timing-function:ease;transition-duration:.35s;transition-property:height}.dropup,.dropdown{
position:relative}.dropdown-toggle::after{
display:inline-block;width:0;height:0;margin-right:.25rem;margin-left:.25rem;vertical-align:middle;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-left:.3em solid transparent}.dropdown-toggle:focus{
outline:0}.dropup .dropdown-toggle::after{
border-top:0;border-bottom:.3em solid}.dropdown-menu{
position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:1rem;color:#373a3c;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-divider{
height:1px;margin:.5rem 0;overflow:hidden;background-color:#e5e5e5}.dropdown-item{
display:block;width:100%;padding:3px 20px;clear:both;font-weight:400;color:#373a3c;text-align:inherit;white-space:nowrap;background:0 0;border:0}.dropdown-item:focus,.dropdown-item:hover{
color:#2b2d2f;text-decoration:none;background-color:#f5f5f5}.dropdown-item.active,.dropdown-item.active:focus,.dropdown-item.active:hover{
color:#fff;text-decoration:none;background-color:#5cb85c;outline:0}.dropdown-item.disabled,.dropdown-item.disabled:focus,.dropdown-item.disabled:hover{
color:#818a91}.dropdown-item.disabled:focus,.dropdown-item.disabled:hover{
text-decoration:none;cursor:not-allowed;background-color:transparent;background-image:none;filter:"progid:DXImageTransform.Microsoft.gradient(enabled = false)"}.open>.dropdown-menu{
display:block}.open>a{
outline:0}.dropdown-menu-right{
right:0;left:auto}.dropdown-menu-left{
right:auto;left:0}.dropdown-header{
display:block;padding:5px 20px;font-size:.875rem;color:#818a91;white-space:nowrap}.dropdown-backdrop{
position:fixed;top:0;right:0;bottom:0;left:0;z-index:990}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{
content:"";border-top:0;border-bottom:.3em solid}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{
top:auto;bottom:100%;margin-bottom:2px}.btn-group,.btn-group-vertical{
position:relative;display:inline-block;vertical-align:middle}.btn-group>.btn,.btn-group-vertical>.btn{
position:relative;float:left}.btn-group>.btn:focus,.btn-group>.btn:active,.btn-group>.btn.active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn.active{
z-index:2}.btn-group>.btn:hover,.btn-group-vertical>.btn:hover{
z-index:2}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group{
margin-left:-1px}.btn-toolbar{
margin-left:-5px}.btn-toolbar::after{
content:"";display:table;clear:both}.btn-toolbar .btn-group,.btn-toolbar .input-group{
float:left}.btn-toolbar>.btn,.btn-toolbar>.btn-group,.btn-toolbar>.input-group{
margin-left:5px}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){
border-radius:0}.btn-group>.btn:first-child{
margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){
border-bottom-right-radius:0;border-top-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){
border-bottom-left-radius:0;border-top-left-radius:0}.btn-group>.btn-group{
float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{
border-radius:0}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{
border-bottom-right-radius:0;border-top-right-radius:0}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{
border-bottom-left-radius:0;border-top-left-radius:0}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle{
outline:0}.btn-group>.btn+.dropdown-toggle{
padding-right:8px;padding-left:8px}.btn-group>.btn-lg+.dropdown-toggle,.btn-group-lg.btn-group>.btn+.dropdown-toggle{
padding-right:12px;padding-left:12px}.btn .caret{
margin-left:0}.btn-lg .caret,.btn-group-lg>.btn .caret{
border-width:.3em .3em 0;border-bottom-width:0}.dropup .btn-lg .caret,.dropup .btn-group-lg>.btn .caret{
border-width:0 .3em .3em}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group,.btn-group-vertical>.btn-group>.btn{
display:block;float:none;width:100%;max-width:100%}.btn-group-vertical>.btn-group::after{
content:"";display:table;clear:both}.btn-group-vertical>.btn-group>.btn{
float:none}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{
margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:not(:first-child):not(:last-child){
border-radius:0}.btn-group-vertical>.btn:first-child:not(:last-child){
border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:last-child:not(:first-child){
border-top-right-radius:0;border-top-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{
border-radius:0}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{
border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{
border-top-right-radius:0;border-top-left-radius:0}[data-toggle=buttons]>.btn input[type=radio],[data-toggle=buttons]>.btn input[type=checkbox],[data-toggle=buttons]>.btn-group>.btn input[type=radio],[data-toggle=buttons]>.btn-group>.btn input[type=checkbox]{
position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{
position:relative;width:100%;display:flex}.input-group .form-control{
position:relative;z-index:2;flex:1;margin-bottom:0}.input-group .form-control:focus,.input-group .form-control:active,.input-group .form-control:hover{
z-index:3}.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child),.input-group .form-control:not(:first-child):not(:last-child){
border-radius:0}.input-group-addon,.input-group-btn{
white-space:nowrap;vertical-align:middle}.input-group-addon{
padding:.5rem .75rem;margin-bottom:0;font-size:1rem;font-weight:400;line-height:1.25;color:#55595c;text-align:center;background-color:#eceeef;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.input-group-addon.form-control-sm,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.input-group-addon.btn{
padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.input-group-addon.form-control-lg,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.input-group-addon.btn{
padding:.75rem 1.5rem;font-size:1.25rem;border-radius:.3rem}.input-group-addon input[type=radio],.input-group-addon input[type=checkbox]{
margin-top:0}.input-group .form-control:not(:last-child),.input-group-addon:not(:last-child),.input-group-btn:not(:last-child)>.btn,.input-group-btn:not(:last-child)>.btn-group>.btn,.input-group-btn:not(:last-child)>.dropdown-toggle,.input-group-btn:not(:first-child)>.btn:not(:last-child):not(.dropdown-toggle),.input-group-btn:not(:first-child)>.btn-group:not(:last-child)>.btn{
border-bottom-right-radius:0;border-top-right-radius:0}.input-group-addon:not(:last-child){
border-right:0}.input-group .form-control:not(:first-child),.input-group-addon:not(:first-child),.input-group-btn:not(:first-child)>.btn,.input-group-btn:not(:first-child)>.btn-group>.btn,.input-group-btn:not(:first-child)>.dropdown-toggle,.input-group-btn:not(:last-child)>.btn:not(:first-child),.input-group-btn:not(:last-child)>.btn-group:not(:first-child)>.btn{
border-bottom-left-radius:0;border-top-left-radius:0}.form-control+.input-group-addon:not(:first-child){
border-left:0}.input-group-btn{
position:relative;font-size:0;white-space:nowrap}.input-group-btn>.btn{
position:relative}.input-group-btn>.btn+.btn{
margin-left:-1px}.input-group-btn>.btn:focus,.input-group-btn>.btn:active,.input-group-btn>.btn:hover{
z-index:3}.input-group-btn:not(:last-child)>.btn,.input-group-btn:not(:last-child)>.btn-group{
margin-right:-1px}.input-group-btn:not(:first-child)>.btn,.input-group-btn:not(:first-child)>.btn-group{
z-index:2;margin-left:-1px}.input-group-btn:not(:first-child)>.btn:focus,.input-group-btn:not(:first-child)>.btn:active,.input-group-btn:not(:first-child)>.btn:hover,.input-group-btn:not(:first-child)>.btn-group:focus,.input-group-btn:not(:first-child)>.btn-group:active,.input-group-btn:not(:first-child)>.btn-group:hover{
z-index:3}.custom-control{
position:relative;display:inline;padding-left:1.5rem;cursor:pointer}.custom-control+.custom-control{
margin-left:1rem}.custom-control-input{
position:absolute;z-index:-1;opacity:0}.custom-control-input:checked~.custom-control-indicator{
color:#fff;background-color:#0074d9}.custom-control-input:focus~.custom-control-indicator{
box-shadow:0 0 0 .075rem #fff,0 0 0 .2rem #0074d9}.custom-control-input:active~.custom-control-indicator{
color:#fff;background-color:#84c6ff}.custom-control-input:disabled~.custom-control-indicator{
cursor:not-allowed;background-color:#eee}.custom-control-input:disabled~.custom-control-description{
color:#767676;cursor:not-allowed}.custom-control-indicator{
position:absolute;top:.0625rem;left:0;display:block;width:1rem;height:1rem;pointer-events:none;user-select:none;background-color:#ddd;background-repeat:no-repeat;background-position:center center;background-size:50% 50%}.custom-checkbox .custom-control-indicator{
border-radius:.25rem}.custom-checkbox .custom-control-input:checked~.custom-control-indicator{
background-image:url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGZpbGw9JyNmZmYnIGQ9J002LjU2NC43NWwtMy41OSAzLjYxMi0xLjUzOC0xLjU1TDAgNC4yNiAyLjk3NCA3LjI1IDggMi4xOTN6Jy8+PC9zdmc+)}.custom-checkbox .custom-control-input:indeterminate~.custom-control-indicator{
background-color:#0074d9;background-image:url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDQnPjxwYXRoIHN0cm9rZT0nI2ZmZicgZD0nTTAgMmg0Jy8+PC9zdmc+)}.custom-radio .custom-control-indicator{
border-radius:50%}.custom-radio .custom-control-input:checked~.custom-control-indicator{
background-image:url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9Jy00IC00IDggOCc+PGNpcmNsZSByPSczJyBmaWxsPScjZmZmJy8+PC9zdmc+)}.custom-controls-stacked .custom-control{
display:inline}.custom-controls-stacked .custom-control::after{
display:block;margin-bottom:.25rem;content:""}.custom-controls-stacked .custom-control+.custom-control{
margin-left:0}.custom-select{
display:inline-block;max-width:100%;padding:.375rem 1.75rem .375rem .75rem;padding-right:.75rem \9;color:#55595c;vertical-align:middle;background:#fff url(data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0IDUnPjxwYXRoIGZpbGw9JyMzMzMnIGQ9J00yIDBMMCAyaDR6bTAgNUwwIDNoNHonLz48L3N2Zz4=) no-repeat right .75rem center;background-image:none \9;background-size:8px 10px;border:1px solid rgba(0,0,0,.15);border-radius:.25rem;-moz-appearance:none;-webkit-appearance:none}.custom-select:focus{
border-color:#51a7e8;outline:none}.custom-select::-ms-expand{
opacity:0}.custom-select-sm{
padding-top:.375rem;padding-bottom:.375rem;font-size:75%}.custom-file{
position:relative;display:inline-block;max-width:100%;height:2.5rem;cursor:pointer}.custom-file-input{
min-width:14rem;max-width:100%;margin:0;filter:alpha(opacity=0);opacity:0}.custom-file-control{
position:absolute;top:0;right:0;left:0;z-index:5;height:2.5rem;padding:.5rem 1rem;line-height:1.5;color:#555;user-select:none;background-color:#fff;border:1px solid #ddd;border-radius:.25rem}.custom-file-control:lang(en)::after{
content:"Choose file..."}.custom-file-control::before{
position:absolute;top:-1px;right:-1px;bottom:-1px;z-index:6;display:block;height:2.5rem;padding:.5rem 1rem;line-height:1.5;color:#555;background-color:#eee;border:1px solid #ddd;border-radius:0 .25rem .25rem 0}.custom-file-control:lang(en)::before{
content:"Browse"}.nav{
padding-left:0;margin-bottom:0;list-style:none}.nav-link{
display:inline-block}.nav-link:focus,.nav-link:hover{
text-decoration:none}.nav-link.disabled{
color:#818a91}.nav-link.disabled,.nav-link.disabled:focus,.nav-link.disabled:hover{
color:#818a91;cursor:not-allowed;background-color:transparent}.nav-inline .nav-item{
display:inline-block}.nav-inline .nav-item+.nav-item,.nav-inline .nav-link+.nav-link{
margin-left:1rem}.nav-tabs{
border-bottom:1px solid #ddd}.nav-tabs::after{
content:"";display:table;clear:both}.nav-tabs .nav-item{
float:left;margin-bottom:-1px}.nav-tabs .nav-item+.nav-item{
margin-left:.2rem}.nav-tabs .nav-link{
display:block;padding:.5em 1em;border:1px solid transparent;border-radius:.25rem .25rem 0 0}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{
border-color:#eceeef #eceeef #ddd}.nav-tabs .nav-link.disabled,.nav-tabs .nav-link.disabled:focus,.nav-tabs .nav-link.disabled:hover{
color:#818a91;background-color:transparent;border-color:transparent}.nav-tabs .nav-link.active,.nav-tabs .nav-link.active:focus,.nav-tabs .nav-link.active:hover,.nav-tabs .nav-item.open .nav-link,.nav-tabs .nav-item.open .nav-link:focus,.nav-tabs .nav-item.open .nav-link:hover{
color:#55595c;background-color:#fff;border-color:#ddd #ddd transparent}.nav-tabs .dropdown-menu{
margin-top:-1px;border-top-right-radius:0;border-top-left-radius:0}.nav-pills::after{
content:"";display:table;clear:both}.nav-pills .nav-item{
float:left}.nav-pills .nav-item+.nav-item{
margin-left:.2rem}.nav-pills .nav-link{
display:block;padding:.5em 1em;border-radius:.25rem}.nav-pills .nav-link.active,.nav-pills .nav-link.active:focus,.nav-pills .nav-link.active:hover,.nav-pills .nav-item.open .nav-link,.nav-pills .nav-item.open .nav-link:focus,.nav-pills .nav-item.open .nav-link:hover{
color:#fff;cursor:default;background-color:#5cb85c}.nav-stacked .nav-item{
display:block;float:none}.nav-stacked .nav-item+.nav-item{
margin-top:.2rem;margin-left:0}.tab-content>.tab-pane{
display:none}.tab-content>.active{
display:block}.navbar{
position:relative;padding:.5rem 1rem}.navbar::after{
content:"";display:table;clear:both}@media(min-width:544px){
.navbar{
border-radius:.25rem}}.navbar-full{
z-index:1000}@media(min-width:544px){
.navbar-full{
border-radius:0}}.navbar-fixed-top,.navbar-fixed-bottom{
position:fixed;right:0;left:0;z-index:1030}@media(min-width:544px){
.navbar-fixed-top,.navbar-fixed-bottom{
border-radius:0}}.navbar-fixed-top{
top:0}.navbar-fixed-bottom{
bottom:0}.navbar-sticky-top{
position:sticky;top:0;z-index:1030;width:100%}@media(min-width:544px){
.navbar-sticky-top{
border-radius:0}}.navbar-brand{
float:left;padding-top:.25rem;padding-bottom:.25rem;margin-right:1rem;font-size:1.25rem}.navbar-brand:focus,.navbar-brand:hover{
text-decoration:none}.navbar-brand>img{
display:block}.navbar-divider{
float:left;width:1px;padding-top:.425rem;padding-bottom:.425rem;margin-right:1rem;margin-left:1rem;overflow:hidden}.navbar-divider::before{
content:"\00a0"}.navbar-toggler{
padding:.5rem .75rem;font-size:1.25rem;line-height:1;background:0 0;border:1px solid transparent;border-radius:.25rem}.navbar-toggler:focus,.navbar-toggler:hover{
text-decoration:none}@media(min-width:544px){
.navbar-toggleable-xs{
display:block!important}}@media(min-width:768px){
.navbar-toggleable-sm{
display:block!important}}@media(min-width:992px){
.navbar-toggleable-md{
display:block!important}}.navbar-nav .nav-item{
float:left}.navbar-nav .nav-link{
display:block;padding-top:.425rem;padding-bottom:.425rem}.navbar-nav .nav-link+.nav-link{
margin-left:1rem}.navbar-nav .nav-item+.nav-item{
margin-left:1rem}.navbar-light .navbar-brand{
color:rgba(0,0,0,.8)}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{
color:rgba(0,0,0,.8)}.navbar-light .navbar-nav .nav-link{
color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{
color:rgba(0,0,0,.6)}.navbar-light .navbar-nav .open>.nav-link,.navbar-light .navbar-nav .open>.nav-link:focus,.navbar-light .navbar-nav .open>.nav-link:hover,.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .active>.nav-link:focus,.navbar-light .navbar-nav .active>.nav-link:hover,.navbar-light .navbar-nav .nav-link.open,.navbar-light .navbar-nav .nav-link.open:focus,.navbar-light .navbar-nav .nav-link.open:hover,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.active:focus,.navbar-light .navbar-nav .nav-link.active:hover{
color:rgba(0,0,0,.8)}.navbar-light .navbar-divider{
background-color:rgba(0,0,0,.075)}.navbar-dark .navbar-brand{
color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{
color:#fff}.navbar-dark .navbar-nav .nav-link{
color:rgba(255,255,255,.5)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{
color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .open>.nav-link,.navbar-dark .navbar-nav .open>.nav-link:focus,.navbar-dark .navbar-nav .open>.nav-link:hover,.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .active>.nav-link:focus,.navbar-dark .navbar-nav .active>.nav-link:hover,.navbar-dark .navbar-nav .nav-link.open,.navbar-dark .navbar-nav .nav-link.open:focus,.navbar-dark .navbar-nav .nav-link.open:hover,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.active:focus,.navbar-dark .navbar-nav .nav-link.active:hover{
color:#fff}.navbar-dark .navbar-divider{
background-color:rgba(255,255,255,.075)}.card{
position:relative;display:block;margin-bottom:.75rem;background-color:#fff;border-radius:.25rem;box-shadow:inset 0 0 0 1px rgba(0,0,0,.125)}.card-block{
padding:1.25rem}.card-block::after{
content:"";display:table;clear:both}.card-title{
margin-bottom:.75rem}.card-subtitle{
margin-top:-.375rem;margin-bottom:0}.card-text:last-child{
margin-bottom:0}.card-link:hover{
text-decoration:none}.card-link+.card-link{
margin-left:1.25rem}.card>.list-group:first-child .list-group-item:first-child{
border-top-left-radius:.25rem;border-top-right-radius:.25rem}.card>.list-group:last-child .list-group-item:last-child{
border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.card-header{
padding:.75rem 1.25rem;background-color:#f5f5f5;box-shadow:inset 0 0 0 1px rgba(0,0,0,.125)}.card-header::after{
content:"";display:table;clear:both}.card-header:first-child{
border-radius:.25rem .25rem 0 0}.card-footer{
padding:.75rem 1.25rem;background-color:#f5f5f5;box-shadow:inset 0 0 0 1px rgba(0,0,0,.125)}.card-footer::after{
content:"";display:table;clear:both}.card-footer:last-child{
border-radius:0 0 .25rem .25rem}.card-header-tabs{
margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}.card-header-tabs .nav-item{
margin-bottom:0}.card-header-pills{
margin-right:-.625rem;margin-left:-.625rem}.card-primary{
background-color:#5cb85c;border-color:#5cb85c}.card-success{
background-color:#5cb85c;border-color:#5cb85c}.card-info{
background-color:#5bc0de;border-color:#5bc0de}.card-warning{
background-color:#f0ad4e;border-color:#f0ad4e}.card-danger{
background-color:#b85c5c;border-color:#b85c5c}.card-outline-primary{
background-color:transparent;border-color:#5cb85c}.card-outline-secondary{
background-color:transparent;border-color:#ccc}.card-outline-info{
background-color:transparent;border-color:#5bc0de}.card-outline-success{
background-color:transparent;border-color:#5cb85c}.card-outline-warning{
background-color:transparent;border-color:#f0ad4e}.card-outline-danger{
background-color:transparent;border-color:#b85c5c}.card-inverse .card-header,.card-inverse .card-footer{
border-bottom:1px solid rgba(255,255,255,.2)}.card-inverse .card-header,.card-inverse .card-footer,.card-inverse .card-title,.card-inverse .card-blockquote{
color:#fff}.card-inverse .card-link,.card-inverse .card-text,.card-inverse .card-blockquote>footer{
color:rgba(255,255,255,.65)}.card-inverse .card-link:focus,.card-inverse .card-link:hover{
color:#fff}.card-blockquote{
padding:0;margin-bottom:0;border-left:0}.card-img{
border-radius:.25rem}.card-img-overlay{
position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem}.card-img-top{
border-radius:.25rem .25rem 0 0}.card-img-bottom{
border-radius:0 0 .25rem .25rem}@media(min-width:544px){
.card-deck{
display:flex;flex-flow:row wrap;margin-right:-.625rem;margin-left:-.625rem}.card-deck .card{
flex:1 0 0;margin-right:.625rem;margin-left:.625rem}}@media(min-width:544px){
.card-group{
display:flex;flex-flow:row wrap}.card-group .card{
flex:1 0 0}.card-group .card+.card{
margin-left:0;border-left:0}.card-group .card:first-child{
border-bottom-right-radius:0;border-top-right-radius:0}.card-group .card:first-child .card-img-top{
border-top-right-radius:0}.card-group .card:first-child .card-img-bottom{
border-bottom-right-radius:0}.card-group .card:last-child{
border-bottom-left-radius:0;border-top-left-radius:0}.card-group .card:last-child .card-img-top{
border-top-left-radius:0}.card-group .card:last-child .card-img-bottom{
border-bottom-left-radius:0}.card-group .card:not(:first-child):not(:last-child){
border-radius:0}.card-group .card:not(:first-child):not(:last-child) .card-img-top,.card-group .card:not(:first-child):not(:last-child) .card-img-bottom{
border-radius:0}}@media(min-width:544px){
.card-columns{
column-count:3;column-gap:1.25rem}.card-columns .card{
display:inline-block;width:100%}}.breadcrumb{
padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#eceeef;border-radius:.25rem}.breadcrumb::after{
content:"";display:table;clear:both}.breadcrumb-item{
float:left}.breadcrumb-item+.breadcrumb-item::before{
display:inline-block;padding-right:.5rem;padding-left:.5rem;color:#818a91;content:"/"}.breadcrumb-item+.breadcrumb-item:hover::before{
text-decoration:underline}.breadcrumb-item+.breadcrumb-item:hover::before{
text-decoration:none}.breadcrumb-item.active{
color:#818a91}.pagination{
display:inline-block;padding-left:0;margin-top:1rem;margin-bottom:1rem;border-radius:.25rem}.page-item{
display:inline}.page-item:first-child .page-link{
margin-left:0;border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.page-item:last-child .page-link{
border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}.page-item.active .page-link,.page-item.active .page-link:focus,.page-item.active .page-link:hover{
z-index:2;color:#fff;cursor:default;background-color:#5cb85c;border-color:#5cb85c}.page-item.disabled .page-link,.page-item.disabled .page-link:focus,.page-item.disabled .page-link:hover{
color:#818a91;pointer-events:none;cursor:not-allowed;background-color:#fff;border-color:#ddd}.page-link{
position:relative;float:left;padding:.5rem .75rem;margin-left:-1px;color:#5cb85c;text-decoration:none;background-color:#fff;border:1px solid #ddd}.page-link:focus,.page-link:hover{
color:#3d8b3d;background-color:#eceeef;border-color:#ddd}.pagination-lg .page-link{
padding:.75rem 1.5rem;font-size:1.25rem}.pagination-lg .page-item:first-child .page-link{
border-bottom-left-radius:.3rem;border-top-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{
border-bottom-right-radius:.3rem;border-top-right-radius:.3rem}.pagination-sm .page-link{
padding:.275rem .75rem;font-size:.875rem}.pagination-sm .page-item:first-child .page-link{
border-bottom-left-radius:.2rem;border-top-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{
border-bottom-right-radius:.2rem;border-top-right-radius:.2rem}.tag{
display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.tag:empty{
display:none}.btn .tag{
position:relative;top:-1px}a.tag:focus,a.tag:hover{
color:#fff;text-decoration:none;cursor:pointer}.tag-pill{
padding-right:.6em;padding-left:.6em;border-radius:10rem}.tag-default{
background-color:#818a91}.tag-default[href]:focus,.tag-default[href]:hover{
background-color:#687077}.tag-primary{
background-color:#5cb85c}.tag-primary[href]:focus,.tag-primary[href]:hover{
background-color:#449d44}.tag-success{
background-color:#5cb85c}.tag-success[href]:focus,.tag-success[href]:hover{
background-color:#449d44}.tag-info{
background-color:#5bc0de}.tag-info[href]:focus,.tag-info[href]:hover{
background-color:#31b0d5}.tag-warning{
background-color:#f0ad4e}.tag-warning[href]:focus,.tag-warning[href]:hover{
background-color:#ec971f}.tag-danger{
background-color:#b85c5c}.tag-danger[href]:focus,.tag-danger[href]:hover{
background-color:#9d4444}.jumbotron{
padding:2rem 1rem;margin-bottom:2rem;background-color:#eceeef;border-radius:.3rem}@media(min-width:544px){
.jumbotron{
padding:4rem 2rem}}.jumbotron-hr{
border-top-color:#d0d5d8}.jumbotron-fluid{
padding-right:0;padding-left:0;border-radius:0}.alert{
padding:15px;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-heading{
color:inherit}.alert-link{
font-weight:700}.alert-dismissible{
padding-right:35px}.alert-dismissible .close{
position:relative;top:-2px;right:-21px;color:inherit}.alert-success{
background-color:#dff0d8;border-color:#d0e9c6;color:#3c763d}.alert-success hr{
border-top-color:#c1e2b3}.alert-success .alert-link{
color:#2b542c}.alert-info{
background-color:#d9edf7;border-color:#bcdff1;color:#31708f}.alert-info hr{
border-top-color:#a6d5ec}.alert-info .alert-link{
color:#245269}.alert-warning{
background-color:#fcf8e3;border-color:#faf2cc;color:#8a6d3b}.alert-warning hr{
border-top-color:#f7ecb5}.alert-warning .alert-link{
color:#66512c}.alert-danger{
background-color:#f2dede;border-color:#ebcccc;color:#a94442}.alert-danger hr{
border-top-color:#e4b9b9}.alert-danger .alert-link{
color:#843534}@keyframes progress-bar-stripes{
from{
background-position:1rem 0}to{
background-position:0 0}}.progress{
display:block;width:100%;height:1rem;margin-bottom:1rem}.progress[value]{
background-color:#eee;border:0;appearance:none;border-radius:.25rem}.progress[value]::-ms-fill{
background-color:#0074d9;border:0}.progress[value]::-moz-progress-bar{
background-color:#0074d9;border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.progress[value]::-webkit-progress-value{
background-color:#0074d9;border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.progress[value="100"]::-moz-progress-bar{
border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}.progress[value="100"]::-webkit-progress-value{
border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}.progress[value]::-webkit-progress-bar{
background-color:#eee;border-radius:.25rem}base::-moz-progress-bar,.progress[value]{
background-color:#eee;border-radius:.25rem}@media screen and (min-width:0\0){
.progress{
background-color:#eee;border-radius:.25rem}.progress-bar{
display:inline-block;height:1rem;text-indent:-999rem;background-color:#0074d9;border-bottom-left-radius:.25rem;border-top-left-radius:.25rem}.progress[width="100%"]{
border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}}.progress-striped[value]::-webkit-progress-value{
background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progress-striped[value]::-moz-progress-bar{
background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progress-striped[value]::-ms-fill{
background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}@media screen and (min-width:0\0){
.progress-bar-striped{
background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}}.progress-animated[value]::-webkit-progress-value{
animation:progress-bar-stripes 2s linear infinite}.progress-animated[value]::-moz-progress-bar{
animation:progress-bar-stripes 2s linear infinite}@media screen and (min-width:0\0){
.progress-animated .progress-bar-striped{
animation:progress-bar-stripes 2s linear infinite}}.progress-success[value]::-webkit-progress-value{
background-color:#5cb85c}.progress-success[value]::-moz-progress-bar{
background-color:#5cb85c}.progress-success[value]::-ms-fill{
background-color:#5cb85c}@media screen and (min-width:0\0){
.progress-success .progress-bar{
background-color:#5cb85c}}.progress-info[value]::-webkit-progress-value{
background-color:#5bc0de}.progress-info[value]::-moz-progress-bar{
background-color:#5bc0de}.progress-info[value]::-ms-fill{
background-color:#5bc0de}@media screen and (min-width:0\0){
.progress-info .progress-bar{
background-color:#5bc0de}}.progress-warning[value]::-webkit-progress-value{
background-color:#f0ad4e}.progress-warning[value]::-moz-progress-bar{
background-color:#f0ad4e}.progress-warning[value]::-ms-fill{
background-color:#f0ad4e}@media screen and (min-width:0\0){
.progress-warning .progress-bar{
background-color:#f0ad4e}}.progress-danger[value]::-webkit-progress-value{
background-color:#b85c5c}.progress-danger[value]::-moz-progress-bar{
background-color:#b85c5c}.progress-danger[value]::-ms-fill{
background-color:#b85c5c}@media screen and (min-width:0\0){
.progress-danger .progress-bar{
background-color:#b85c5c}}.media{
display:flex;margin-bottom:1rem}.media-body{
flex:1}.media-middle{
align-self:center}.media-bottom{
align-self:flex-end}.media-object{
display:block}.media-object.img-thumbnail{
max-width:none}.media-right{
padding-left:10px}.media-left{
padding-right:10px}.media-heading{
margin-top:0;margin-bottom:5px}.media-list{
padding-left:0;list-style:none}.list-group{
padding-left:0;margin-bottom:0}.list-group-item{
position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:-1px;background-color:#fff;border:1px solid #ddd}.list-group-item:first-child{
border-top-right-radius:.25rem;border-top-left-radius:.25rem}.list-group-item:last-child{
margin-bottom:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.list-group-item.disabled,.list-group-item.disabled:focus,.list-group-item.disabled:hover{
color:#818a91;cursor:not-allowed;background-color:#eceeef}.list-group-item.disabled .list-group-item-heading,.list-group-item.disabled:focus .list-group-item-heading,.list-group-item.disabled:hover .list-group-item-heading{
color:inherit}.list-group-item.disabled .list-group-item-text,.list-group-item.disabled:focus .list-group-item-text,.list-group-item.disabled:hover .list-group-item-text{
color:#818a91}.list-group-item.active,.list-group-item.active:focus,.list-group-item.active:hover{
z-index:2;color:#fff;text-decoration:none;background-color:#5cb85c;border-color:#5cb85c}.list-group-item.active .list-group-item-heading,.list-group-item.active .list-group-item-heading>small,.list-group-item.active .list-group-item-heading>.small,.list-group-item.active:focus .list-group-item-heading,.list-group-item.active:focus .list-group-item-heading>small,.list-group-item.active:focus .list-group-item-heading>.small,.list-group-item.active:hover .list-group-item-heading,.list-group-item.active:hover .list-group-item-heading>small,.list-group-item.active:hover .list-group-item-heading>.small{
color:inherit}.list-group-item.active .list-group-item-text,.list-group-item.active:focus .list-group-item-text,.list-group-item.active:hover .list-group-item-text{
color:#eaf6ea}.list-group-flush .list-group-item{
border-radius:0}.list-group-item-action{
width:100%;color:#555;text-align:inherit}.list-group-item-action .list-group-item-heading{
color:#333}.list-group-item-action:focus,.list-group-item-action:hover{
color:#555;text-decoration:none;background-color:#f5f5f5}.list-group-item-success{
color:#3c763d;background-color:#dff0d8}a.list-group-item-success,button.list-group-item-success{
color:#3c763d}a.list-group-item-success .list-group-item-heading,button.list-group-item-success .list-group-item-heading{
color:inherit}a.list-group-item-success:focus,a.list-group-item-success:hover,button.list-group-item-success:focus,button.list-group-item-success:hover{
color:#3c763d;background-color:#d0e9c6}a.list-group-item-success.active,a.list-group-item-success.active:focus,a.list-group-item-success.active:hover,button.list-group-item-success.active,button.list-group-item-success.active:focus,button.list-group-item-success.active:hover{
color:#fff;background-color:#3c763d;border-color:#3c763d}.list-group-item-info{
color:#31708f;background-color:#d9edf7}a.list-group-item-info,button.list-group-item-info{
color:#31708f}a.list-group-item-info .list-group-item-heading,button.list-group-item-info .list-group-item-heading{
color:inherit}a.list-group-item-info:focus,a.list-group-item-info:hover,button.list-group-item-info:focus,button.list-group-item-info:hover{
color:#31708f;background-color:#c4e3f3}a.list-group-item-info.active,a.list-group-item-info.active:focus,a.list-group-item-info.active:hover,button.list-group-item-info.active,button.list-group-item-info.active:focus,button.list-group-item-info.active:hover{
color:#fff;background-color:#31708f;border-color:#31708f}.list-group-item-warning{
color:#8a6d3b;background-color:#fcf8e3}a.list-group-item-warning,button.list-group-item-warning{
color:#8a6d3b}a.list-group-item-warning .list-group-item-heading,button.list-group-item-warning .list-group-item-heading{
color:inherit}a.list-group-item-warning:focus,a.list-group-item-warning:hover,button.list-group-item-warning:focus,button.list-group-item-warning:hover{
color:#8a6d3b;background-color:#faf2cc}a.list-group-item-warning.active,a.list-group-item-warning.active:focus,a.list-group-item-warning.active:hover,button.list-group-item-warning.active,button.list-group-item-warning.active:focus,button.list-group-item-warning.active:hover{
color:#fff;background-color:#8a6d3b;border-color:#8a6d3b}.list-group-item-danger{
color:#a94442;background-color:#f2dede}a.list-group-item-danger,button.list-group-item-danger{
color:#a94442}a.list-group-item-danger .list-group-item-heading,button.list-group-item-danger .list-group-item-heading{
color:inherit}a.list-group-item-danger:focus,a.list-group-item-danger:hover,button.list-group-item-danger:focus,button.list-group-item-danger:hover{
color:#a94442;background-color:#ebcccc}a.list-group-item-danger.active,a.list-group-item-danger.active:focus,a.list-group-item-danger.active:hover,button.list-group-item-danger.active,button.list-group-item-danger.active:focus,button.list-group-item-danger.active:hover{
color:#fff;background-color:#a94442;border-color:#a94442}.list-group-item-heading{
margin-top:0;margin-bottom:5px}.list-group-item-text{
margin-bottom:0;line-height:1.3}.embed-responsive{
position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive iframe,.embed-responsive embed,.embed-responsive object,.embed-responsive video{
position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-21by9{
padding-bottom:42.85714%}.embed-responsive-16by9{
padding-bottom:56.25%}.embed-responsive-4by3{
padding-bottom:75%}.embed-responsive-1by1{
padding-bottom:100%}.close{
float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}.close:focus,.close:hover{
color:#000;text-decoration:none;cursor:pointer;opacity:.5}button.close{
padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}.modal-open{
overflow:hidden}.modal{
position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;outline:0;-webkit-overflow-scrolling:touch}.modal.fade .modal-dialog{
transition:transform .3s ease-out;transform:translate(0,-25%)}.modal.in .modal-dialog{
transform:translate(0,0)}.modal-open .modal{
overflow-x:hidden;overflow-y:auto}.modal-dialog{
position:relative;width:auto;margin:10px}.modal-content{
position:relative;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{
position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{
opacity:0}.modal-backdrop.in{
opacity:.5}.modal-header{
padding:15px;border-bottom:1px solid #e5e5e5}.modal-header::after{
content:"";display:table;clear:both}.modal-header .close{
margin-top:-2px}.modal-title{
margin:0;line-height:1.5}.modal-body{
position:relative;padding:15px}.modal-footer{
padding:15px;text-align:right;border-top:1px solid #e5e5e5}.modal-footer::after{
content:"";display:table;clear:both}.modal-scrollbar-measure{
position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media(min-width:544px){
.modal-dialog{
max-width:600px;margin:30px auto}.modal-sm{
max-width:300px}}@media(min-width:992px){
.modal-lg{
max-width:900px}}.tooltip{
position:absolute;z-index:1070;display:block;font-family:source sans pro,sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;line-break:auto;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;font-size:.875rem;word-wrap:break-word;opacity:0}.tooltip.in{
opacity:.9}.tooltip.tooltip-top,.tooltip.bs-tether-element-attached-bottom{
padding:5px 0;margin-top:-3px}.tooltip.tooltip-top .tooltip-arrow,.tooltip.bs-tether-element-attached-bottom .tooltip-arrow{
bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#000}.tooltip.tooltip-right,.tooltip.bs-tether-element-attached-left{
padding:0 5px;margin-left:3px}.tooltip.tooltip-right .tooltip-arrow,.tooltip.bs-tether-element-attached-left .tooltip-arrow{
top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.tooltip-bottom,.tooltip.bs-tether-element-attached-top{
padding:5px 0;margin-top:3px}.tooltip.tooltip-bottom .tooltip-arrow,.tooltip.bs-tether-element-attached-top .tooltip-arrow{
top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#000}.tooltip.tooltip-left,.tooltip.bs-tether-element-attached-right{
padding:0 5px;margin-left:-3px}.tooltip.tooltip-left .tooltip-arrow,.tooltip.bs-tether-element-attached-right .tooltip-arrow{
top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#000}.tooltip-inner{
max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#000;border-radius:.25rem}.tooltip-arrow{
position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.popover{
position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;padding:1px;font-family:source sans pro,sans-serif;font-style:normal;font-weight:400;letter-spacing:normal;line-break:auto;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;white-space:normal;word-break:normal;word-spacing:normal;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}.popover.popover-top,.popover.bs-tether-element-attached-bottom{
margin-top:-10px}.popover.popover-top .popover-arrow,.popover.bs-tether-element-attached-bottom .popover-arrow{
bottom:-11px;left:50%;margin-left:-11px;border-top-color:rgba(0,0,0,.25);border-bottom-width:0}.popover.popover-top .popover-arrow::after,.popover.bs-tether-element-attached-bottom .popover-arrow::after{
bottom:1px;margin-left:-10px;content:"";border-top-color:#fff;border-bottom-width:0}.popover.popover-right,.popover.bs-tether-element-attached-left{
margin-left:10px}.popover.popover-right .popover-arrow,.popover.bs-tether-element-attached-left .popover-arrow{
top:50%;left:-11px;margin-top:-11px;border-right-color:rgba(0,0,0,.25);border-left-width:0}.popover.popover-right .popover-arrow::after,.popover.bs-tether-element-attached-left .popover-arrow::after{
bottom:-10px;left:1px;content:"";border-right-color:#fff;border-left-width:0}.popover.popover-bottom,.popover.bs-tether-element-attached-top{
margin-top:10px}.popover.popover-bottom .popover-arrow,.popover.bs-tether-element-attached-top .popover-arrow{
top:-11px;left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:rgba(0,0,0,.25)}.popover.popover-bottom .popover-arrow::after,.popover.bs-tether-element-attached-top .popover-arrow::after{
top:1px;margin-left:-10px;content:"";border-top-width:0;border-bottom-color:#fff}.popover.popover-left,.popover.bs-tether-element-attached-right{
margin-left:-10px}.popover.popover-left .popover-arrow,.popover.bs-tether-element-attached-right .popover-arrow{
top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:rgba(0,0,0,.25)}.popover.popover-left .popover-arrow::after,.popover.bs-tether-element-attached-right .popover-arrow::after{
right:1px;bottom:-10px;content:"";border-right-width:0;border-left-color:#fff}.popover-title{
padding:8px 14px;margin:0;font-size:1rem;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:.2375rem .2375rem 0 0}.popover-content{
padding:9px 14px}.popover-arrow,.popover-arrow::after{
position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover-arrow{
border-width:11px}.popover-arrow::after{
content:"";border-width:10px}.carousel{
position:relative}.carousel-inner{
position:relative;width:100%;overflow:hidden}.carousel-inner>.carousel-item{
position:relative;display:none;transition:.6s ease-in-out left}.carousel-inner>.carousel-item>img,.carousel-inner>.carousel-item>a>img{
line-height:1}@media all and (transform-3d),(-webkit-transform-3d){
.carousel-inner>.carousel-item{
transition:transform .6s ease-in-out;backface-visibility:hidden;perspective:1000px}.carousel-inner>.carousel-item.next,.carousel-inner>.carousel-item.active.right{
left:0;transform:translate3d(100%,0,0)}.carousel-inner>.carousel-item.prev,.carousel-inner>.carousel-item.active.left{
left:0;transform:translate3d(-100%,0,0)}.carousel-inner>.carousel-item.next.left,.carousel-inner>.carousel-item.prev.right,.carousel-inner>.carousel-item.active{
left:0;transform:translate3d(0,0,0)}}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{
display:block}.carousel-inner>.active{
left:0}.carousel-inner>.next,.carousel-inner>.prev{
position:absolute;top:0;width:100%}.carousel-inner>.next{
left:100%}.carousel-inner>.prev{
left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{
left:0}.carousel-inner>.active.left{
left:-100%}.carousel-inner>.active.right{
left:100%}.carousel-control{
position:absolute;top:0;bottom:0;left:0;width:15%;font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6);opacity:.5}.carousel-control.left{
background-image:linear-gradient(to right,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.0001) 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000',endColorstr='#00000000',GradientType=1)}.carousel-control.right{
right:0;left:auto;background-image:linear-gradient(to right,rgba(0,0,0,0.0001) 0%,rgba(0,0,0,0.5) 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#80000000',GradientType=1)}.carousel-control:focus,.carousel-control:hover{
color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control .icon-prev,.carousel-control .icon-next{
position:absolute;top:50%;z-index:5;display:inline-block;width:20px;height:20px;margin-top:-10px;font-family:serif;line-height:1}.carousel-control .icon-prev{
left:50%;margin-left:-10px}.carousel-control .icon-next{
right:50%;margin-right:-10px}.carousel-control .icon-prev::before{
content:"\2039"}.carousel-control .icon-next::before{
content:"\203a"}.carousel-indicators{
position:absolute;bottom:10px;left:50%;z-index:15;width:60%;padding-left:0;margin-left:-30%;text-align:center;list-style:none}.carousel-indicators li{
display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;cursor:pointer;background-color:transparent;border:1px solid #fff;border-radius:10px}.carousel-indicators .active{
width:12px;height:12px;margin:0;background-color:#fff}.carousel-caption{
position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{
text-shadow:none}@media(min-width:544px){
.carousel-control .icon-prev,.carousel-control .icon-next{
width:30px;height:30px;margin-top:-15px;font-size:30px}.carousel-control .icon-prev{
margin-left:-15px}.carousel-control .icon-next{
margin-right:-15px}.carousel-caption{
right:20%;left:20%;padding-bottom:30px}.carousel-indicators{
bottom:20px}}.bg-inverse{
color:#eceeef;background-color:#373a3c}.bg-faded{
background-color:#f7f7f9}.bg-primary{
color:#fff!important;background-color:#5cb85c!important}a.bg-primary:focus,a.bg-primary:hover{
background-color:#449d44!important}.bg-success{
color:#fff!important;background-color:#5cb85c!important}a.bg-success:focus,a.bg-success:hover{
background-color:#449d44!important}.bg-info{
color:#fff!important;background-color:#5bc0de!important}a.bg-info:focus,a.bg-info:hover{
background-color:#31b0d5!important}.bg-warning{
color:#fff!important;background-color:#f0ad4e!important}a.bg-warning:focus,a.bg-warning:hover{
background-color:#ec971f!important}.bg-danger{
color:#fff!important;background-color:#b85c5c!important}a.bg-danger:focus,a.bg-danger:hover{
background-color:#9d4444!important}.clearfix::after{
content:"";display:table;clear:both}.pull-xs-left{
float:left!important}.pull-xs-right{
float:right!important}.pull-xs-none{
float:none!important}@media(min-width:544px){
.pull-sm-left{
float:left!important}.pull-sm-right{
float:right!important}.pull-sm-none{
float:none!important}}@media(min-width:768px){
.pull-md-left{
float:left!important}.pull-md-right{
float:right!important}.pull-md-none{
float:none!important}}@media(min-width:992px){
.pull-lg-left{
float:left!important}.pull-lg-right{
float:right!important}.pull-lg-none{
float:none!important}}@media(min-width:1200px){
.pull-xl-left{
float:left!important}.pull-xl-right{
float:right!important}.pull-xl-none{
float:none!important}}.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{
position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.m-x-auto{
margin-right:auto!important;margin-left:auto!important}.m-a-0{
margin:0!important}.m-t-0{
margin-top:0!important}.m-r-0{
margin-right:0!important}.m-b-0{
margin-bottom:0!important}.m-l-0{
margin-left:0!important}.m-x-0{
margin-right:0!important;margin-left:0!important}.m-y-0{
margin-top:0!important;margin-bottom:0!important}.m-a-1{
margin:1rem!important}.m-t-1{
margin-top:1rem!important}.m-r-1{
margin-right:1rem!important}.m-b-1{
margin-bottom:1rem!important}.m-l-1{
margin-left:1rem!important}.m-x-1{
margin-right:1rem!important;margin-left:1rem!important}.m-y-1{
margin-top:1rem!important;margin-bottom:1rem!important}.m-a-2{
margin:1.5rem!important}.m-t-2{
margin-top:1.5rem!important}.m-r-2{
margin-right:1.5rem!important}.m-b-2{
margin-bottom:1.5rem!important}.m-l-2{
margin-left:1.5rem!important}.m-x-2{
margin-right:1.5rem!important;margin-left:1.5rem!important}.m-y-2{
margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-a-3{
margin:3rem!important}.m-t-3{
margin-top:3rem!important}.m-r-3{
margin-right:3rem!important}.m-b-3{
margin-bottom:3rem!important}.m-l-3{
margin-left:3rem!important}.m-x-3{
margin-right:3rem!important;margin-left:3rem!important}.m-y-3{
margin-top:3rem!important;margin-bottom:3rem!important}.p-a-0{
padding:0!important}.p-t-0{
padding-top:0!important}.p-r-0{
padding-right:0!important}.p-b-0{
padding-bottom:0!important}.p-l-0{
padding-left:0!important}.p-x-0{
padding-right:0!important;padding-left:0!important}.p-y-0{
padding-top:0!important;padding-bottom:0!important}.p-a-1{
padding:1rem!important}.p-t-1{
padding-top:1rem!important}.p-r-1{
padding-right:1rem!important}.p-b-1{
padding-bottom:1rem!important}.p-l-1{
padding-left:1rem!important}.p-x-1{
padding-right:1rem!important;padding-left:1rem!important}.p-y-1{
padding-top:1rem!important;padding-bottom:1rem!important}.p-a-2{
padding:1.5rem!important}.p-t-2{
padding-top:1.5rem!important}.p-r-2{
padding-right:1.5rem!important}.p-b-2{
padding-bottom:1.5rem!important}.p-l-2{
padding-left:1.5rem!important}.p-x-2{
padding-right:1.5rem!important;padding-left:1.5rem!important}.p-y-2{
padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-a-3{
padding:3rem!important}.p-t-3{
padding-top:3rem!important}.p-r-3{
padding-right:3rem!important}.p-b-3{
padding-bottom:3rem!important}.p-l-3{
padding-left:3rem!important}.p-x-3{
padding-right:3rem!important;padding-left:3rem!important}.p-y-3{
padding-top:3rem!important;padding-bottom:3rem!important}.pos-f-t{
position:fixed;top:0;right:0;left:0;z-index:1030}.text-justify{
text-align:justify!important}.text-nowrap{
white-space:nowrap!important}.text-truncate{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-xs-left{
text-align:left!important}.text-xs-right{
text-align:right!important}.text-xs-center{
text-align:center!important}@media(min-width:544px){
.text-sm-left{
text-align:left!important}.text-sm-right{
text-align:right!important}.text-sm-center{
text-align:center!important}}@media(min-width:768px){
.text-md-left{
text-align:left!important}.text-md-right{
text-align:right!important}.text-md-center{
text-align:center!important}}@media(min-width:992px){
.text-lg-left{
text-align:left!important}.text-lg-right{
text-align:right!important}.text-lg-center{
text-align:center!important}}@media(min-width:1200px){
.text-xl-left{
text-align:left!important}.text-xl-right{
text-align:right!important}.text-xl-center{
text-align:center!important}}.text-lowercase{
text-transform:lowercase!important}.text-uppercase{
text-transform:uppercase!important}.text-capitalize{
text-transform:capitalize!important}.font-weight-normal{
font-weight:400}.font-weight-bold{
font-weight:700}.font-italic{
font-style:italic}.text-muted{
color:#818a91!important}a.text-muted:focus,a.text-muted:hover{
color:#687077}.text-primary{
color:#5cb85c!important}a.text-primary:focus,a.text-primary:hover{
color:#449d44}.text-success{
color:#5cb85c!important}a.text-success:focus,a.text-success:hover{
color:#449d44}.text-info{
color:#5bc0de!important}a.text-info:focus,a.text-info:hover{
color:#31b0d5}.text-warning{
color:#f0ad4e!important}a.text-warning:focus,a.text-warning:hover{
color:#ec971f}.text-danger{
color:#b85c5c!important}a.text-danger:focus,a.text-danger:hover{
color:#9d4444}.text-hide{
font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.invisible{
visibility:hidden!important}.hidden-xs-up{
display:none!important}@media(max-width:543px){
.hidden-xs-down{
display:none!important}}@media(min-width:544px){
.hidden-sm-up{
display:none!important}}@media(max-width:767px){
.hidden-sm-down{
display:none!important}}@media(min-width:768px){
.hidden-md-up{
display:none!important}}@media(max-width:991px){
.hidden-md-down{
display:none!important}}@media(min-width:992px){
.hidden-lg-up{
display:none!important}}@media(max-width:1199px){
.hidden-lg-down{
display:none!important}}@media(min-width:1200px){
.hidden-xl-up{
display:none!important}}.hidden-xl-down{
display:none!important}.visible-print-block{
display:none!important}@media print{
.visible-print-block{
display:block!important}}.visible-print-inline{
display:none!important}@media print{
.visible-print-inline{
display:inline!important}}.visible-print-inline-block{
display:none!important}@media print{
.visible-print-inline-block{
display:inline-block!important}}@media print{
.hidden-print{
display:none!important}}.flex-xs-first{
order:-1}.flex-xs-last{
order:1}.flex-items-xs-top{
align-items:flex-start}.flex-items-xs-middle{
align-items:center}.flex-items-xs-bottom{
align-items:flex-end}.flex-xs-top{
align-self:flex-start}.flex-xs-middle{
align-self:center}.flex-xs-bottom{
align-self:flex-end}.flex-items-xs-left{
justify-content:flex-start}.flex-items-xs-center{
justify-content:center}.flex-items-xs-right{
justify-content:flex-end}.flex-items-xs-around{
justify-content:space-around}.flex-items-xs-between{
justify-content:space-between}@media(min-width:544px){
.flex-sm-first{
order:-1}.flex-sm-last{
order:1}}@media(min-width:544px){
.flex-items-sm-top{
align-items:flex-start}.flex-items-sm-middle{
align-items:center}.flex-items-sm-bottom{
align-items:flex-end}}@media(min-width:544px){
.flex-sm-top{
align-self:flex-start}.flex-sm-middle{
align-self:center}.flex-sm-bottom{
align-self:flex-end}}@media(min-width:544px){
.flex-items-sm-left{
justify-content:flex-start}.flex-items-sm-center{
justify-content:center}.flex-items-sm-right{
justify-content:flex-end}.flex-items-sm-around{
justify-content:space-around}.flex-items-sm-between{
justify-content:space-between}}@media(min-width:768px){
.flex-md-first{
order:-1}.flex-md-last{
order:1}}@media(min-width:768px){
.flex-items-md-top{
align-items:flex-start}.flex-items-md-middle{
align-items:center}.flex-items-md-bottom{
align-items:flex-end}}@media(min-width:768px){
.flex-md-top{
align-self:flex-start}.flex-md-middle{
align-self:center}.flex-md-bottom{
align-self:flex-end}}@media(min-width:768px){
.flex-items-md-left{
justify-content:flex-start}.flex-items-md-center{
justify-content:center}.flex-items-md-right{
justify-content:flex-end}.flex-items-md-around{
justify-content:space-around}.flex-items-md-between{
justify-content:space-between}}@media(min-width:992px){
.flex-lg-first{
order:-1}.flex-lg-last{
order:1}}@media(min-width:992px){
.flex-items-lg-top{
align-items:flex-start}.flex-items-lg-middle{
align-items:center}.flex-items-lg-bottom{
align-items:flex-end}}@media(min-width:992px){
.flex-lg-top{
align-self:flex-start}.flex-lg-middle{
align-self:center}.flex-lg-bottom{
align-self:flex-end}}@media(min-width:992px){
.flex-items-lg-left{
justify-content:flex-start}.flex-items-lg-center{
justify-content:center}.flex-items-lg-right{
justify-content:flex-end}.flex-items-lg-around{
justify-content:space-around}.flex-items-lg-between{
justify-content:space-between}}@media(min-width:1200px){
.flex-xl-first{
order:-1}.flex-xl-last{
order:1}}@media(min-width:1200px){
.flex-items-xl-top{
align-items:flex-start}.flex-items-xl-middle{
align-items:center}.flex-items-xl-bottom{
align-items:flex-end}}@media(min-width:1200px){
.flex-xl-top{
align-self:flex-start}.flex-xl-middle{
align-self:center}.flex-xl-bottom{
align-self:flex-end}}@media(min-width:1200px){
.flex-items-xl-left{
justify-content:flex-start}.flex-items-xl-center{
justify-content:center}.flex-items-xl-right{
justify-content:flex-end}.flex-items-xl-around{
justify-content:space-around}.flex-items-xl-between{
justify-content:space-between}}.tag-default{
color:#fff!important;font-size:.8rem;padding-top:.1rem;padding-bottom:.1rem;white-space:nowrap;margin-right:3px;margin-bottom:.2rem;display:inline-block}.tag-default:hover{
text-decoration:none}.tag-default.tag-outline{
border:1px solid #ddd;color:#aaa!important;background:0 0!important}ul.tag-list{
padding-left:0!important;display:inline-block;list-style:none!important}ul.tag-list li{
display:inline-block!important}.navbar-brand{
font-family:titillium web,sans-serif;font-size:1.5rem!important;padding-top:0!important;margin-right:2rem!important;color:#5cb85c!important}.nav-link .user-pic{
height:26px;border-radius:50px;float:left;margin-right:5px}.nav-link:hover{
transition:.1s all}.nav-pills.outline-active .nav-link{
border-radius:0;border:none;border-bottom:2px solid transparent;background:0 0;color:#aaa}.nav-pills.outline-active .nav-link:hover{
color:#555}.nav-pills.outline-active .nav-link.active{
background:#fff!important;border-bottom:2px solid #5cb85c!important;color:#5cb85c!important}footer{
background:#f3f3f3;margin-top:3rem;padding:1rem 0;position:absolute;bottom:0;width:100%}footer .logo-font{
vertical-align:middle}footer .attribution{
vertical-align:middle;margin-left:10px;font-size:.8rem;color:#bbb;font-weight:300}.error-messages{
color:#b85c5c!important;font-weight:700}.banner{
color:#fff;background:#333;padding:2rem;margin-bottom:2rem}.banner h1{
text-shadow:0 1px 3px rgba(0,0,0,.3);margin-bottom:0}.container.page{
margin-top:1.5rem}.preview-link{
color:inherit!important}.preview-link:hover{
text-decoration:inherit!important}.article-meta{
display:block;position:relative;font-weight:300}.article-meta img{
display:inline-block;vertical-align:middle;height:32px;width:32px;border-radius:30px}.article-meta .info{
margin:0 1.5rem 0 .3rem;display:inline-block;vertical-align:middle;line-height:1rem}.article-meta .info .author{
display:block;font-weight:500!important}.article-meta .info .date{
color:#bbb;font-size:.8rem;display:block}.article-preview{
border-top:1px solid rgba(0,0,0,.1);padding:1.5rem 0}.article-preview .article-meta{
margin:0 0 1rem}.article-preview .preview-link h1{
font-weight:600!important;font-size:1.5rem!important;margin-bottom:3px}.article-preview .preview-link p{
font-weight:300;font-size:24px;color:#999;margin-bottom:15px;font-size:1rem;line-height:1.3rem}.article-preview .preview-link span{
max-width:30%;font-size:.8rem;font-weight:300;color:#bbb;vertical-align:middle}.article-preview .preview-link ul{
float:right;max-width:50%;vertical-align:top}.article-preview .preview-link ul li{
font-weight:300;font-size:.8rem!important;padding-top:0!important;padding-bottom:0!important}.btn .counter{
font-size:.8rem!important}.home-page .banner{
background:#5cb85c;box-shadow:inset 0 8px 8px -8px rgba(0,0,0,.3),inset 0 -8px 8px -8px rgba(0,0,0,.3)}.home-page .banner p{
color:#fff;text-align:center;font-size:1.5rem;font-weight:300!important;margin-bottom:0}.home-page .banner h1{
text-shadow:0 1px 3px rgba(0,0,0,.3);font-weight:700!important;text-align:center;font-size:3.5rem;padding-bottom:.5rem}.home-page .feed-toggle{
margin-bottom:-1px}.home-page .sidebar{
padding:5px 10px 10px;background:#f3f3f3;border-radius:4px}.home-page .sidebar p{
margin-bottom:.2rem}.article-page .banner{
padding:2rem 0}.article-page .banner h1{
font-size:2.8rem;font-weight:600}.article-page .banner .btn{
opacity:.8}.article-page .banner .btn:hover{
transition:.1s all;opacity:1}.article-page .banner .article-meta{
margin:2rem 0 0}.article-page .banner .article-meta .author{
color:#fff}.article-page .article-content p{
font-family:'source serif pro',serif;font-size:1.2rem;line-height:1.8rem;margin-bottom:2rem}.article-page .article-content h1,.article-page .article-content h2,.article-page .article-content h3,.article-page .article-content h4,.article-page .article-content h5,.article-page .article-content h6{
font-weight:500!important;margin:1.6rem 0 1rem}.article-page .article-actions{
text-align:center;margin:1.5rem 0 3rem}.article-page .article-actions .article-meta .info{
text-align:left}.article-page .comment-form .card-block{
padding:0}.article-page .comment-form .card-block textarea{
border:0;padding:1.25rem}.article-page .comment-form .card-footer .btn{
font-weight:700;float:right}.article-page .comment-form .card-footer .comment-author-img{
height:30px;width:30px}.article-page .card{
border:1px solid #e5e5e5;box-shadow:none!important}.article-page .card .card-footer{
border-top:1px solid #e5e5e5;box-shadow:none!important;font-size:.8rem;font-weight:300}.article-page .card .comment-author-img{
display:inline-block;vertical-align:middle;height:20px;width:20px;border-radius:30px}.article-page .card .comment-author{
display:inline-block;vertical-align:middle}.article-page .card .date-posted{
display:inline-block;vertical-align:middle;margin-left:5px;color:#bbb}.article-page .card .mod-options{
float:right;color:#333;font-size:1rem}.article-page .card .mod-options i{
margin-left:5px;opacity:.6;cursor:pointer}.article-page .card .mod-options i:hover{
opacity:1}.profile-page .user-info{
text-align:center;background:#f3f3f3;padding:2rem 0 1rem}.profile-page .user-info .user-img{
width:100px;height:100px;border-radius:100px;margin-bottom:1rem}.profile-page .user-info h4{
font-weight:700}.profile-page .user-info p{
margin:0 auto .5rem;color:#aaa;max-width:450px;font-weight:300}.profile-page .user-info .action-btn{
float:right;color:#999;border:1px solid #999}.profile-page .articles-toggle{
margin:1.5rem 0 -1px}.editor-page .tag-list i{
font-size:.6rem;margin-right:5px;cursor:pointer}
3. layout 布局
基于 realWorld 的模板页面，嵌入 header、footer、子路由
新增 layout/index.vue 布局组件：
<template>
<div>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-light">
<div class="container">
<!-- <a class="navbar-brand" href="index.html">conduit</a> -->
<!-- <a class="navbar-brand" href="/">Home</a> -->
<nuxt-link class="navbar-brand" to="/">Home</nuxt-link>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<!-- Add "active" class when you're on that page" -->
<nuxt-link class="nav-link active" to="/">Home</nuxt-link>
</li>
<li class="nav-item">
<nuxt-link class="nav-link" to="/editor">
<i class="ion-compose"></i> New Article
</nuxt-link>
</li>
<li class="nav-item">
<nuxt-link class="nav-link" to="/settings">
<i class="ion-gear-a"></i> Settings
</nuxt-link>
</li>
<li class="nav-item">
<nuxt-link class="nav-link" to="/login">Sign in</nuxt-link>
</li>
<li class="nav-item">
<nuxt-link class="nav-link" to="/register">Sign up</nuxt-link>
</li>
<li class="nav-item">
<nuxt-link class="nav-link" to="profile/123">
<img class="user-pic" src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fpics0.baidu.com%2Ffeed%2F72f082025aafa40f5a84eff1fb197f4579f019e6.jpeg%3Ftoken%3Dd27ba594bee0f90becf417f2d9490d2e&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f360,240&n=0&g=0n&q=75&fmt=auto?sec=1655312400&t=9bc0b5f298c9f18e3e6eb19ed2cddb3c" >
username
</nuxt-link>
</li>
</ul>
</div>
</nav>
<!-- 子路由 -->
<nuxt-child/>
<!-- 底部信息栏 -->
<footer>
<div class="container">
<nuxt-link to="/" class="logo-font">conduit</nuxt-link>
<span class="attribution">
An interactive learning project from <nuxt-link to="https://thinkster.io">Thinkster</nuxt-link>. Code & design licensed under MIT.
</span>
</div>
</footer>
</div>
</template>
<script> export default {
name: 'LayoutIndex' } </script>
4. 自定义路由
参考 NuxtJS 官方文档：
/** * Nuxt.js 配置文件 */
module.exports = {
router: {
// 自定义路由表规则
// routes: 一个数组，路由配置表
// resolve: 解析路由组件路径
extendRoutes(routes, resolve) {
// 这个routes参数就是个数组，这里面就是默认以文件路径配置的路由规则
// 清除 Nuxt.js 基于 pages 目录默认生成的路由表规则
routes.splice(0)
// 添加自己的路由规则
routes.push(...[
{
path: '/',
component: resolve(__dirname, 'pages/layout/')
}
])
}
}
}
新建 根目录/nuxt.config.js 路由文件：
export default {
router: {
extendRoutes(routes, resolve) {
// 清除 Nuxt.js 基于 pages 目录默认生成的路由表规则
routes.splice(0)
routes.push(...[
{
path: '/',
component: 'pages/layout/index.vue',
children: [
{
path: '', // 默认路由
component: 'pages/home/index.vue',
name: 'home'
},{
path: '/login',
component: 'pages/login/index.vue',
name: 'login'
},{
path: '/register',
component: 'pages/login/index.vue',
name: 'register'
},{
path: '/settings',
component: 'pages/settings/index.vue',
name: 'settings'
},{
path: '/editor',
component: 'pages/editor/index.vue',
name: 'editor'
},{
path: '/article/:slug',
component: 'pages/article/index.vue',
name: 'article'
},{
path: '/profile/:username',
component: 'pages/profile/index.vue',
name: 'profile'
}
]
}
])
}
}
}
5. 导入其余页面
导入登录、注册页面，用户设置页面，文章页面等，其对应关系如下
| 路径 | 页面 |
|---|---|
| / | 首页 |
| /login | 登录 |
| /register | 注册 |
| /settings | 用户设置 |
| /editor | 发布文章 |
| /editor/:slug | 编辑文章 |
| /article/:slug | 文章详情 |
| /profile/:username | 用户页面 |
| /profile/:username/favorites | 用户页面/喜欢的文章 |
6. 导航栏链接样式
编辑 nuxt.config.js 路由文件（导航栏对应标题高亮）：
router: {
linkActiveClass: 'active',
...
}
编辑 layout/index.vue 路由文件（Home标题关闭高亮）：
<!-- 精确匹配，只有路由等于'/'才会高亮 -->
<nuxt-link class="nav-link" to="/" exact>Home</nuxt-link>
三、登录注册
1. 请求封装
新建 utils/request.js 请求模块：
// utils/request.js
/** * 基于 axios 封装的请求模块 */
import axios from 'axios'
const request = axios.create({
baseURL: 'https://conduit.productionready.io/'
})
export default request
2. 基础登录功能
- 实现数据绑定
- 实现基础登录功能
- 将报错的原因提示给用户
编辑 pages/login/login 登录组件：
<template>
<div class="auth-page">
<div class="container page">
<div class="row">
<div class="col-md-6 offset-md-3 col-xs-12">
<h1 class="text-xs-center">{
{ isLogin ? "Sign in" : "Sign up" }}</h1>
<p class="text-xs-center">
<nuxt-link to='/register' v-if="isLogin" href="">Have an account?</nuxt-link>
<nuxt-link to='/login' v-else href="">Need an account?</nuxt-link>
</p>
<ul class="error-messages" v-for="(messages, reason, index) in this.errors" :key="index">
<li v-for="(message, index) in messages" :key="index">{
{reason}}{
{message}}</li>
</ul>
<form @submit.prevent="onSubmit">
<fieldset v-if="!isLogin" class="form-group">
<input v-model="user.username" class="form-control form-control-lg" type="text" placeholder="Your Name" required />
</fieldset>
<fieldset class="form-group">
<input v-model="user.email" class="form-control form-control-lg" type="email" placeholder="Email" required />
</fieldset>
<fieldset class="form-group">
<input v-model="user.password" class="form-control form-control-lg" type="password" placeholder="Password" minlength="8" required />
</fieldset>
<button class="btn btn-lg btn-primary pull-xs-right">
Sign up
</button>
</form>
</div>
</div>
</div>
</div>
</template>
<script> import request from "@/utils/request.js"; export default {
name: "LoginIndex", computed: {
isLogin() {
return this.$route.name === "login"; }, }, data() {
return {
user: {
username: "", email: "", password: "", }, errors: {
} }; }, methods: {
async onSubmit() {
try {
const {
data } = await request({
method: 'POST', url: '/api/users/login', data: this.user }) console.log("data=>", data); this.$router.push("/"); } catch (error) {
this.errors = error.response.data.errors } }, }, }; </script>
3. api 请求封装
新建 api/index.js 文件：
import request from '../plugins/request'
export const login = data => {
// 登录
return request ({
method: 'POST',
url: '/api/users/login',
data
})
}
export const register = data => {
// 注册
return request ({
method: 'POST',
url: '/api/users',
data
})
}
4. 注册功能
编辑 pages/login/login 登录组件：
<template>
<div class="auth-page">
<div class="container page">
<div class="row">
<div class="col-md-6 offset-md-3 col-xs-12">
<h1 class="text-xs-center">{
{ isLogin ? "Sign in" : "Sign up" }}</h1>
<p class="text-xs-center">
<nuxt-link to='/register' v-if="isLogin" href="">Have an account?</nuxt-link>
<nuxt-link to='/login' v-else href="">Need an account?</nuxt-link>
</p>
<ul class="error-messages" v-for="(messages, reason, index) in this.errors" :key="index">
<li v-for="(message, index) in messages" :key="index">{
{reason}}{
{message}}</li>
</ul>
<form @submit.prevent="onSubmit">
<fieldset v-if="!isLogin" class="form-group">
<input v-model="user.username" class="form-control form-control-lg" type="text" placeholder="Your Name" required />
</fieldset>
<fieldset class="form-group">
<input v-model="user.email" class="form-control form-control-lg" type="email" placeholder="Email" required />
</fieldset>
<fieldset class="form-group">
<input v-model="user.password" class="form-control form-control-lg" type="password" placeholder="Password" minlength="8" required />
</fieldset>
<button class="btn btn-lg btn-primary pull-xs-right">
Sign up
</button>
</form>
</div>
</div>
</div>
</div>
</template>
<script> import {
login, register } from "@/api/index"; export default {
name: "LoginIndex", computed: {
isLogin() {
return this.$route.name === "login"; }, }, data() {
return {
user: {
username: "", email: "", password: "", }, errors: {
} }; }, methods: {
async onSubmit() {
try {
const {
data } = this.isLogin ? await login({
user: this.user }) : await register({
user: this.user }) console.log("data=>", data); this.$router.push("/"); } catch (error) {
this.errors = error.response.data.errors } }, }, }; </script>
5. vuex
将用户登录登录状态（信息）储存到 vuex 中
新建 store/index.js vuex 状态管理文件：
// 在服务端渲染期间运行都是同一个实例
// 为了防止数据冲突，务必要把 state 定义成一个函数，返回数据对象
export const state = () => {
return {
user: null // 用户信息
}
}
export const mutations = {
setUser(state, data) {
state.user = data
}
}
export const actions = {
}
编辑 pages/login/index.vue 登录文件：
...
// 储存用户登录状态
this.$store.commit('setUser', data.user)
6. 身份状态信息
不同于以往项目，使用nuxt的项目在状态处理时需要考虑：既要在客户端渲染获取到登录状态也要在服务端渲染也要能拿到登录状态
- 将登录状态（用户信息）存储到Vue的store容器中，客户端先向vuex中存一次
- 此时数据只是存储在内存当中，刷新过后将会消失，因此接下来要将登录状态持久化。
- 但是不能放到本地存储，因为本地存储只有客户端可以获取到，需要数据既能被客户端获取又能被服务端获取
- 因此将数据放到cookie，这样前后端都能获取
NuxtJS 官方提示的案例，解决登录状态的问题： 跨域身份验证 (JWT)
js-cookie
js-cookie是一个简单的,轻量级的处理cookies的js API，用来处理cookie相关的插件
在服务端渲染时会先自动调用
nuxtServerInit方法（该方法仅在服务端执行），这个方法里面会检查请求头里面是否有cookie，如果有cookie并判断是否在服务端环境，如果在服务端环境就加载cookieparser这个包，并且解析这个cookie，拿到用户数据，并将用户数据进行commit提交mutation，将用户信息同步到Vuex的state中，实现状态的持久化【服务端又向vuex中更新一次】
// 安装 js-cookie
npm i js-cookie
编辑 pages/login/index.vue 登录文件：
<script>
// 仅在客户端加载
const Cookie = process.client ? require('js-cookie') : undefined
...
// 数据持久化
Cookie.set('user', data.user)
编辑 store/index.js vuex 状态管理文件：
const cookieparser = process.server ? require('cookieparser') : undefined
...
export const actions = {
// nuxtServerInit 是一个特殊的 action 方法,会在服务器渲染期间自动调用
// 作用: 初始化容器数据,传递给客户端使用
nuxtServerInit ({
commit }, {
req }) {
let user = null
if (req.headers.cookie) {
const parsed = cookieparser.parse(req.headers.cookie)
try {
user = JSON.parse(parsed.user)
} catch (err) {
// No valid cookie found
}
}
// 提交 mutation 修改 cookie
commit('setUser', user)
}
}
预览：
刷新页面，Vuex 的状态不会丢失
7. 页面访问权限
nuxtJS 官方路由处理方案：中间件
新建 middleware/authenticated.js 中间件文件：
/** * 验证是否登录的中间件 */
export default function ({
store, redirect }) {
// If the user is not authenticated
if (!store.state.user) {
return redirect('/login')
}
}
配置页面权限（修改路由，会被拦截，强制跳转到 登录页）：
<script> export default {
name: 'xxx', middleware: "authenticated", } </script>
新建 middleware/notAuthenticated.js 中间件文件：
export default function ({
store, redirect }) {
// If the user is authenticated redirect to home page
if (store.state.user) {
return redirect('/')
}
}
编辑 pages/login/index.vue 登录入口：
<script>
...
export default {
name: "LoginIndex",
middleware: "notAuthenticated",
...
四、首页
1. 文章列表
配置文章列表路由，新建 api/article.js 文件：
import request from '../plugins/request'
export const getArticles = params => {
// 获取文章列表
return request ({
method: 'GET',
url: '/api/articles',
params
})
}
export const getTags = () => {
// 获取标签列表
return request ({
method: 'GET',
url: '/api/tags'
})
}
编辑 pages/home/index.vue 主页入口文件：
<template>
<div class="home-page">
<div class="banner">
<div class="container">
<h1 class="logo-font">conduit</h1>
<p>A place to share your knowledge.</p>
</div>
</div>
<div class="container page">
<div class="row">
<div class="col-md-9">
<div class="feed-toggle">
<ul class="nav nav-pills outline-active">
<li class="nav-item">
<a class="nav-link disabled" href="">Your Feed</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="">Global Feed</a>
</li>
</ul>
</div>
<div v-for="article in articles" :key="article.slug" class="article-preview" >
<div class="article-meta">
<nuxt-link :to="{ name: 'profile', params: { username: article.author.username }, }" >
<img :src="article.author.image" />
</nuxt-link>
<div class="info">
<nuxt-link :to="{ name: 'profile', params: { username: article.author.username }, }" class="author" >{
{ article.author.username }}
</nuxt-link>
<span class="date">{
{ article.createdAt }}</span>
</div>
<button class="btn btn-outline-primary btn-sm pull-xs-right" :class="{ active: article.favorited }" >
<i class="ion-heart"></i>
{
{ article.favoritesCount }}
</button>
</div>
<nuxt-link :to="{ name: 'article', params: { slug: article.slug }, }" class="preview-link" >
<h1>{
{ article.title }}</h1>
<p>{
{ article.description }}</p>
<span>Read more...</span>
</nuxt-link>
</div>
<nav>
<ul class="pagination">
<li class="page-item" :class="{ active: item === page, }" v-for="item in totalPage" :key="item" >
<nuxt-link class="page-link" :to="{ name: 'home', query: { page: item, tag: $route.query.tag, }, }" >{
{ item }}</nuxt-link >
</li>
</ul>
</nav>
</div>
<div class="col-md-3">
<div class="sidebar">
<p>Popular Tags</p>
<div v-for="item in tags" class="tag-list" :key="item">
<nuxt-link :to="{ name: 'home', query: { tag: item, }, }" class="tag-pill tag-default" >
{
{ item }}
</nuxt-link>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script> import {
getArticles, getTags } from "@/api/article.js"; export default {
// 监听参数字符串的更改 watchQuery: ["page"], name: "HomeIndex", // query 查询字符串的参数对象 async asyncData({
query }) {
const page = Number.parseInt(query.page || 1); const limit = 1; const [articleRes, tagRes] = await Promise.all([ getArticles({
limit, offset: (page - 1) * limit, }), getTags(), ]); const {
articles, articlesCount } = articleRes.data; const {
tags } = tagRes.data; return {
articles, articlesCount, limit, page, tags }; }, computed: {
totalPage() {
return Math.ceil(this.articlesCount / this.limit); }, }, }; </script>
2. 文章列表导航栏
- 我关注的： 展示关注的作者的文章列表
- 全部： 展示全部文章
- 标签： 展示关于该类标签的文章
编辑 pages/home/index.vue 主页入口文件：
<template>
<div class="home-page">
<div class="banner">
<div class="container">
<h1 class="logo-font">conduit</h1>
<p>A place to share your knowledge.</p>
</div>
</div>
<div class="container page">
<div class="row">
<div class="col-md-9">
<div class="feed-toggle">
<ul class="nav nav-pills outline-active">
<li v-if="user" class="nav-item">
<nuxt-link class="nav-link" :class="{active: tab === 'your_feed'}" exact :to="{ name: 'home', query: { tab: 'your_feed' }, }" >Your Feed</nuxt-link>
</li>
<li class="nav-item">
<nuxt-link class="nav-link" :class="{active: tab === 'tag'}" exact :to="{ name: 'home', query: { tab: 'tag', tag }, }" >Global Feed</nuxt-link>
</li>
<li v-if="tag" class="nav-item">
<nuxt-link class="nav-link" :class="{active: tab === 'global_feed'}" :to="{ name: 'home', query: { } }" exact ># {
{tag}}</nuxt-link>
</li>
</ul>
</div>
<div v-for="article in articles" :key="article.slug" class="article-preview" >
<div class="article-meta">
<nuxt-link :to="{ name: 'profile', params: { username: article.author.username }, }" >
<img :src="article.author.image" />
</nuxt-link>
<div class="info">
<nuxt-link :to="{ name: 'profile', params: { username: article.author.username }, }" class="author" >{
{ article.author.username }}
</nuxt-link>
<span class="date">{
{ article.createdAt | date }}</span>
</div>
<button class="btn btn-outline-primary btn-sm pull-xs-right" :class="{ active: article.favorited }" @click="onFavorite(article)" :disabled="article.favoriteDisabled" >
<i class="ion-heart"></i>
{
{ article.favoritesCount }}
</button>
</div>
<nuxt-link :to="{ name: 'article', params: { slug: article.slug }, }" class="preview-link" >
<h1>{
{ article.title }}</h1>
<p>{
{ article.description }}</p>
<span>Read more...</span>
</nuxt-link>
</div>
<nav>
<ul class="pagination">
<li class="page-item" :class="{ active: item === page, }" v-for="item in totalPage" :key="item" >
<nuxt-link class="page-link" :to="{ name: 'home', query: { page: item, tag: $route.query.tag, tab }, }" >{
{ item }}</nuxt-link >
</li>
</ul>
</nav>
</div>
<div class="col-md-3">
<div class="sidebar">
<p>Popular Tags</p>
<div v-for="item in tags" class="tag-list" :key="item">
<nuxt-link :to="{ name: 'home', query: { tag: item, tab: 'tag' }, }" class="tag-pill tag-default" >
{
{ item }}
</nuxt-link>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script> import {
getArticles, getFeedArticles, getTags, addFavorite, deleteFavorite } from "@/api/article.js"; import {
mapState } from 'vuex' export default {
// 监听参数字符串的更改 watchQuery: ["page", 'tag', 'tab'], name: "HomeIndex", // query 查询字符串的参数对象 async asyncData({
query }) {
const page = Number.parseInt(query.page || 1); const limit = 1; const {
tag } = query const {
tab } = query.tab || 'global_feed' const loadArticle = tab === 'your_feed' ? getFeedArticles : getArticles const [articleRes, tagRes] = await Promise.all([ loadArticle({
limit, offset: (page - 1) * limit, tag, }), getTags(), ]); const {
articles, articlesCount } = articleRes.data; articles.forEach(article => {
article.favoriteDisabled = false }); const {
tags } = tagRes.data; return {
articles, articlesCount, limit, page, tags, tag, tab }; }, computed: {
totalPage() {
return Math.ceil(this.articlesCount / this.limit); }, ...mapState(['user']) }, methods: {
async onFavorite(article) {
article.favoriteDisabled = true if(!article.favorited) {
await addFavorite(article.slug) article.favoritesCount += 1 article.favorited = true } else {
await deleteFavorite(article.slug) article.favoritesCount += -1 article.favorited = false } article.favoriteDisabled = false } } }; </script>
3. 时间格式化（Dayjs）
Day.js被设计用于在浏览器和Node.js中工作。 所有代码都应该在这两种环境中工作，所有单元测试都应该在这两种环境中运行。 目前用于ci系统的浏览器有:Windows XP上的Chrome, Windows 7上的IE 8、ie9和10,Windows 10上的IE 11, Linux上的最新Firefox，以及OSX 10.8和10.11上的最新Safari。 如果您想尝试示例代码，只需打开浏览器控制台并输入它们。
4. 统一设置用户 Token
编辑 pages/login/index.vue 登录文件：
<template>
<div class="auth-page">
<div class="container page">
<div class="row">
<div class="col-md-6 offset-md-3 col-xs-12">
<h1 class="text-xs-center">{
{ isLogin ? "Sign in" : "Sign up" }}</h1>
<p class="text-xs-center">
<nuxt-link to="/register" v-if="isLogin" href="" >Have an account?</nuxt-link >
<nuxt-link to="/login" v-else href="">Need an account?</nuxt-link>
</p>
<ul class="error-messages" v-for="(messages, reason, index) in this.errors" :key="index" >
<li v-for="(message, index) in messages" :key="index">
{
{ reason }}{
{ message }}
</li>
</ul>
<form @submit.prevent="onSubmit">
<fieldset v-if="!isLogin" class="form-group">
<input v-model="user.username" class="form-control form-control-lg" type="text" placeholder="Your Name" required />
</fieldset>
<fieldset class="form-group">
<input v-model="user.email" class="form-control form-control-lg" type="email" placeholder="Email" required />
</fieldset>
<fieldset class="form-group">
<input v-model="user.password" class="form-control form-control-lg" type="password" placeholder="Password" required />
</fieldset>
<button class="btn btn-lg btn-primary pull-xs-right">
Sign up
</button>
</form>
</div>
</div>
</div>
</div>
</template>
<script> import {
login, register } from "@/api/index"; // 仅在客户端加载 const Cookie = process.client ? require("js-cookie") : undefined; export default {
name: "LoginIndex", middleware: "notAuthenticated", computed: {
isLogin() {
return this.$route.name === "login"; }, }, data() {
return {
user: {
username: "", email: "[email protected]", password: "123456", }, errors: {
}, }; }, mounted() {
}, methods: {
async onSubmit() {
try {
const {
data } = this.isLogin ? await login({
user: this.user }) : await register({
user: this.user }); // 储存用户登录状态 this.$store.commit("setUser", data.user); // 数据持久化 Cookie.set("user", data.user); this.$router.push("/"); } catch (error) {
this.errors = error.response.data.errors; } }, }, }; </script>
五、文章详情页
1. markdown-it
markdown-it 是前端的一个 markdown 解析库, 将 markdown 解析成 Token 流
2. 文章详情
编辑 pages/article/index.vue 文章详情入口文件：
<template>
<div class="article-page">
<div class="banner">
<div class="container">
<h1>{
{ article.title }}</h1>
<ArticleMeta :article="article" />
</div>
</div>
<div class="container page">
<div class="row article-content">
<div class="col-md-12" v-html="article.body"></div>
</div>
<hr />
<div class="article-actions">
<ArticleMeta :article="article" />
</div>
<div class="row">
<div class="col-xs-12 col-md-8 offset-md-2">
<form class="card comment-form">
<div class="card-block">
<textarea class="form-control" placeholder="Write a comment..." rows="3" ></textarea>
</div>
<div class="card-footer">
<img src="http://i.imgur.com/Qr71crq.jpg" class="comment-author-img" />
<button class="btn btn-sm btn-primary">Post Comment</button>
</div>
</form>
<ArticleComponent :article="article" />
</div>
</div>
</div>
</div>
</template>
<script> import {
getArticle } from "@/api/article"; import MarkdownIt from "markdown-it"; import ArticleMeta from "./components/article-meta.vue"; import ArticleComponent from "./components/article-component.vue"; export default {
name: "ArticleIndex", components: {
ArticleMeta, ArticleComponent }, async asyncData({
params }) {
const {
data } = await getArticle(params.slug); const {
article } = data; const md = new MarkdownIt(); article.body = md.render(article.body); return {
article, }; }, head() {
// 设置当前页面的头部标签 return {
title: `${
this.article.title} - RealWorld`, meta: [ {
hid: "description", name: "description", content: this.article.description, }, ], }; }, }; </script>
3. 作者信息组件
新建 pages/article/components/article-meta.vue 文件：
<template>
<div>
<div class="article-meta">
<nuxt-link :to="{ name: 'profile', params: { username: article.author.username }, }" >
<img :src="article.author.image" />
</nuxt-link>
<div class="info">
<nuxt-link :to="{ name: 'profile', params: { username: article.author.username }, }" class="author" >
{
{ article.author.username }}
</nuxt-link>
<span class="date">{
{ article.createdAt | date("MMM DD, YYYY") }}</span>
</div>
<button class="btn btn-sm btn-outline-secondary" :class="{ active: article.author.following }" >
<i class="ion-plus-round"></i>
Follow Eric Simons <span class="counter">(10)</span>
</button>
<button class="btn btn-sm btn-outline-primary" :class="{ active: article.favorited }" >
<i class="ion-heart"></i>
Favorite Post
<span class="counter">({
{ article.favoritesCount }})</span>
</button>
</div>
</div>
</template>
<script> export default {
name: "articleMeta", props: {
article: {
type: Object, required: true, }, }, }; </script>
4. 文章评论组件
新建 pages/article/components/article-component.vue 文件：
<template>
<div>
<div class="card" v-for="comment in comments" :key="comment.id">
<div class="card-block">
<p class="card-text">{
{comment.body}}</p>
</div>
<div class="card-footer">
<nuxt-link :to="{ name: 'profile', params: { username: article.author.username }, }" class="comment-author">
<img :src="comment.author.image" class="comment-author-img" />
</nuxt-link>
<nuxt-link :to="{ name: 'profile', params: {username: article.author.username} }" class="comment-author">{
{comment.author.username}}</nuxt-link>
<span class="date-posted">{
{comment.createdAt | date('MMM DD, YYYY')}}</span>
</div>
</div>
</div>
</template>
<script> import {
getComponents } from '@/api/article' export default {
name: "articleComponent", props: {
article: {
type: Object, required: true } }, data() {
return {
comments: [] } }, async mounted () {
const {
data } = await getComponents(this.article.slug) this.comments = data.comments } }; </script>
六、发布部署
1. 简单的部署方式
⑴. 配置 Host + Post：
编辑 nuxt.config.js ：
server: {
host: '0.0.0.0', // 默认localhost
port: 3000
}
⑵. 上传服务端
- 需要传递到服务端的文件：（并用电脑压缩软件进行压缩，生成一个压缩包传递到服务端）
- 整个
.nuxt文件夹：Nuxt打包生成的资源文件 - static： 静态资源
- nuxt.config.js： 提供给Nuxt服务
- package.json： 用于服务端第三方包的安装
- package-lock.json： 用于服务端第三方包的安装
⑶. 把发布包传到服务端
得到realworld-nuxtjs.zip传递到服务端
ssh [email protected] // 链接服务器
mkdir realworld-nuxtjs // 创建项目目录
cd realworld-nuxtjs/ // 转到当前目录
pwd // 打印当前路径，并复制
复制路径path并exit退出服务
scp .\realworld-nuxtjs.zip [email protected]:/root/realworld-nuxtjs
⑷. 解压
ssh [email protected] // 重连服务器
cd realworld-nuxtjs/ // 转到项目目录
unzip realworld-nuxtjs.zip // 解压上传的压缩包
ls -a // 显示以.开头的隐藏文件
npm i // 安装依赖
npm run start // 启动服务
2. 使用PM2启动Node服务
⑴. PM2
PM2 是什么？
刚才我们在服务端是直接通过npm run start命令来启动了Web服务，如果我们通过这种方式启动起来以后，此时占用了命令行。我们希望它在后台运行这个应用，因此就需要用到pm2工具：
⑵. 使用 PM2 启动服务
- GitHub 仓库地址：https://github.com/Unitech/pm2
- 官方文档：https://pm2.io/
- 安装：npm install --global pm2
- 启动：pm2 start 脚本路径
# 没有node环境的话
# wget -qO- https://getpm2.com/install.sh | bash
npm install --global pm2
pm2 start npm -- start // 相当于用pm2守护执行 npm run start
⑶. PM2 常用命令
| 命令 | 说明 |
|---|---|
| pm2 list | 查看应用列表 |
| pm2 start | 启动应用 |
| pm2 stop | 停止应用 |
| pm2 reload | 重载应用 |
| pm2 restart | 重启应用 |
| pm2 delete | 删除应用 |
3. 部署
⑴. 传统部署
传统的部署方式需要反复地更新、构建、发布，显得很麻烦，所以引入了自动化部署
⑵. 现代化的部署方式（CI/CD）
- CI ： 持续集成
- CD：持续部署
⑶. 使用GitHub Actions 来实现自动部署
- 配置 GitHub Access Token
- 配置到项目的 Secrets 中
- 配置 GitHub Actions 执行脚本
在项目根目录创建 .github/workflows 目录
下载 main.yml到 workflows 目录中，注意要保证后缀名是yml
新增pm2的配置文件：pm2.config.json
{ "apps": [ { "name": "RealWorld", "script": "npm", "args": "start" } ] }提交更新
git add . git commit -m "发布部署-测试" git tag v0.1.0 git push origin v0.1.0查看自动部署状态
访问网络
提交更新
4. 上线地址
最终项目上线部署地址为：http://117.50.98.227:3306/
边栏推荐
- Dependent properties, dependent additional properties, and type conversions
- 指南针在上面开股票账户安全吗？
- View. post VS Handler. Differences and usage scenarios of post
- 我的作文题目是——《我的区长父亲》
- 宏的运用接续符\
- 戴尔科技演绎“快”字诀，玩转CI/CD
- 好好思考
- 一文了解Prometheus
- [today in history] June 24: Netease was established; The first consumer electronics exhibition was held; The first webcast in the world
- How to install SSL certificates in Microsoft Exchange 2010
猜你喜欢
Your driver settings have been set to force 4x antialiasing in OpenGL applications
ShardingSphere-Proxy 4.1 分庫分錶
The path of Architects
How to build a wechat applet? How to open an applet?
Flask博客实战 - 实现侧边栏文章归档及标签
Flask博客实战 - 实现侧边栏最新文章及搜索
我希望按照我的思路尽可能将canvas基础讲明白
Can two Mitsubishi PLC adopt bcnettcp protocol to realize wireless communication of network interface?
Houdini图文笔记：Your driver settings have been set to force 4x Antialiasing in OpenGL applications问题的解决
【观察】ObjectScale：重新定义下一代对象存储，戴尔科技的重构与创新
随机推荐
Principle of distribution: understanding the gossip protocol
Kotlin implements a simple login page
How to do the wechat selling applet? How to apply for applets
之前字符串反转的题目
How much does a wechat applet cost? Wechat applet development and production costs? Come and have a look
【动态规划】—— 数字三角形
【论文阅读｜深读】LINE: Large-scale Information Network Embedding
Flask博客实战 - 实现个人中心及权限管理
无心剑中译伊玛·拉扎罗斯《新巨人·自由女神》
Yolov5更换上采样方式
WPF Prism框架
持续交付-Jenkinsfile 语法
ShardingSphere-Proxy 4.1 分庫分錶
浅谈二叉树
What is CRA
网络协议学习---LLDP协议学习
Dependent properties, dependent additional properties, and type conversions
I hope to explain the basics of canvas as clearly as possible according to my ideas
Difference between malloc and calloc
The title of my composition is - "my district head father"