body,
div,
ul,
ol,
li,
form,
p,
h1,
h2,
h3,
dl,
dt,
dd,
table,
th,
td,
select,
textarea,
input {
 margin: 0;
 padding: 0;
 border: 0;
}

body {
 background: #fff;
 font-family: "微软雅黑", Helvetica, Tahoma, sans-serif;
 font-size: 16px;
 color: #555;
 -webkit-text-size-adjust: none;
}

ul, ol {
 list-style: none;
}

a img {
 border: none;
}

h1, h2, h3, div, li, p {
 font-size: 100%;
}

a {
 text-decoration: none;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:hover, a.current {
 text-decoration: none;
 outline: none;
}

em, i {
 font-style: normal;
}

.br {
 display: block;
}

input[type="submit"], input[type="button"] {
 -webkit-appearance: none;
}

input {
 outline: none;
}

/*个性化样式*/
.banner {
 background-image: url("../img/banner.png");
 background-repeat: no-repeat;
 background-size: 100% 100%;
 height: 44px;
 top: 0;
 position: fixed;
 width: 100%;
}

header {
 position: fixed;
 top: 0;
 height: 44px;
 width: 100%;
 line-height: 44px;
}

header .l-txt {
 width: 70px;
 height: 44px;
 position: absolute;
 left: 0;
 top: 0;
 line-height: 44px;
 text-align: center;
}

header .l-txt a {
 color: #fff;
 font-size: 14px;

}
header .r-txt {
 width: 70px;
 height: 44px;
 position: absolute;
 right: 0;
 top: 0;
 line-height: 44px;
 text-align: center;
}
header .r-txt a {
 display: block;
 width: 70px;
 height: 44px;
 background-image: url(../img/Refresh.png);
 background-repeat: no-repeat;
 background-position: 16px center;
 background-size: 17px 20px;
}
header h2 {
 text-align: center;
 font-size: 18px;
 color: #fff;
 font-weight: normal;
 margin:0 !important;
 height:44px;
 line-height:44px;
}
.top {
 height: 44px;
 position: fixed;
 width: 100%;
 top: 0;
 background-color: #f8f8f8;
}
 .top header {
 height: 44px;
 width: 100%;
 line-height: 44px;
}

.top header h2 {
 text-align: center;
 font-size: 18px;
 color: #333;
 font-weight: normal;
 margin:0 !important;
 height:44px;
 line-height:44px;
}

.footer {
 background-color: #f8f8f8;
 position: absolute;
 /*left:0;*/
 bottom:44px;
 right: 0;
 width: 100%;
 padding: 0;
 height: 56px;
 line-height: 56px;
 display: block;
 border-top:1px solid #ddd;
}
.footer button {
 /*float: right;*/
 margin: 0px 11px 0 0 ;
 width:101px;
 height: 39px;
}
.footer .footer-btn {
 float: right;
 height: 56px;
 line-height: 56px;
}

.content{
 width: 100%;
 height: 100%;
 position: fixed;
 top: 44px;
}

.subcontent{
 position: absolute;
 top: 44px;
 width: 100%;
 height: inherit;
 padding-top: 20px;
 display: block;
 overflow-x: hidden;
 overflow-y: auto;
}


.sidebar {
 display: block;
 padding: 0px !important;
 overflow: hidden;
 background-color: #86C3F2;
 border-right: 1px solid #eee;
 height: inherit;
 text-align: center;
}

.sidebar .shadow {
	position:absolute;
	right:0;
	top:0;
	width:10px;
	height:100%;
	background:url(../img/shadowBg.png) repeat-y;
}
.sidebar .photo {
 height: 60px;
 width: 60px;
 background-image: url("../img/user.png");
 background-repeat: no-repeat;
 background-size: 100% 100%;
 margin: 10px auto;
}
.sidebar .photo img{
 margin:20px 0 0 0;
 width: 54px;
 height: 54px;
 text-align: center;
}
/* Sidebar navigation */
.nav-sidebar {
 margin-right: -21px; /* 20px padding + 1px border */
 margin-bottom: 20px;
 margin-left: -20px;
}

.nav-sidebar li a {
 padding-right: 20px;
 padding-left: 20px;
 color: #fff;
 height: 80px;
 text-align: center;
 font-size: 16px;
}
.nav-sidebar > li > a:hover {
 text-decoration: none;
 color:#1f8edb !important;
 background-color: #bdddf6 !important;
}
.nav-sidebar li a p i {
	text-indent:-9999px;
	height:32px;
	width:32px;
 margin-bottom: 5px;
}

.nav-sidebar .active a,
.nav-sidebar .active a:hover {
 color: #1f8edb;
 background-color: #E7F3FC;
}
.nav-sidebar li a.menu1 p i {
	background:url(../img/note.png) no-repeat;
	background-size:100% 100%
}
.nav-sidebar li:hover a.menu1 p i {
	background:url(../img/note_hover.png) no-repeat;
	background-size:100% 100%
}
.nav-sidebar li.active a.menu1 p i {
	background:url(../img/note_hover.png) no-repeat;
	background-size:100% 100%
}
.nav-sidebar li a.menu2 p i {
	background:url(../img/file.png) no-repeat;
	background-size:100% 100%
}
.nav-sidebar li:hover a.menu2 p i {
	background:url(../img/file_hover.png) no-repeat;
	background-size:100% 100%
}
.nav-sidebar li.active a.menu2 p i {
	background:url(../img/file_hover.png) no-repeat;
	background-size:100% 100%
}
.nav-sidebar li a.menu3 p i {
	background:url(../img/clock.png) no-repeat;
	background-size:100% 100%
}
.nav-sidebar li:hover a.menu3 p i {
	background:url(../img/clock_hover.png) no-repeat;
	background-size:100% 100%
}
.nav-sidebar li.active a.menu3 p i {
	background:url(../img/clock_hover.png) no-repeat;
	background-size:100% 100%
}


/*
 * Main content
 */
.main {
 height: 100%;
 /*background-color: #f0f0f0;*/
}

.main .main-row { height: inherit; }

.main .container-fluid {
 margin: 0 0 0 0;
 padding: 0 0 0 0;
 height: 100%;
}

.sys {
 width: 100%;
 height: 100%;
 padding: 0px;
 padding-right:0 !important
}

.accordion {
 width: 100%;
 /*background: #fff;*/
 border-radius: 4px;
 margin-left: -15px;
 width: 100%;
 height: 100%;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 /*z-index: 1000;*/
 display: block;
 padding: 0px;
 overflow-x: hidden;
 overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.accordion .link {
 cursor: pointer;
 display: block;
 padding: 12px 21px 12px 18px;
 color: #333;
 font-size: 18px;
 background:#f7f8f9;
 border-bottom: 1px solid #dedede;
 position: relative;
 -webkit-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;
}
.accordion .link a{
 outline: none;
 text-decoration: none;
 color: #666;
}
.accordion .Mainbadge {
	display:block;
	position:absolute;
	right:49px;
	top:22px;
	font-size:12px;
	color:#999
	}

/*.accordion li:last-child .link {*/
 /*border-bottom: 0;*/
/*}*/

.accordion li i {
 position: absolute;
 top: 22px;
 left: 12px;
 font-size: 18px;
 color: #9b9b9b;
 -webkit-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 transition: all 0.4s ease;
}

.accordion li i.glyphicon-chevron-down {
 right: 21px;
 left: auto;
 font-size: 16px;
 text-indent:-9999px;
 width:16px;
 height:16px;
 background:url(../img/right.png) no-repeat;
 background-size:100% 100%
}

.accordion li.open .link {
 color: #666;
}

.accordion li.open i {
 color: #666;
}
.accordion li.open i.glyphicon-chevron-down {
 -webkit-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 transform: rotate(90deg);
}

/**
 * Submenu
 -----------------------------*/
.submenu {
 display: none;
 background: #fff;
 font-size: 16px;
}

.submenu li {
 border-bottom: 1px solid #dedede;
}

.submenu a {
 display: block;
 text-decoration: none;
 font-size:16px;
 color: #333;
 padding: 12px;
 padding-left: 34px;
 -webkit-transition: all 0.25s ease;
 -o-transition: all 0.25s ease;
 transition: all 0.25s ease;
}

.submenu a:hover {
 background: #f0f0f0;
 color: #333;
 text-decoration: none;
}

.submenu .active {
 background: #f0f0f0;
 color: #333;
 text-decoration: none;
}

.submenu a span { 
float: right;
width:20px;
height:20px;
line-height:20px;
padding:0 !important
 }

.sidebar-icon {
 width: 34px;
 height: 54px;
}

.sys-icon{
 width: 37px;
 height: 37px;
 margin-right: 8px;
}

.sys-font {
 color: #9b9b9b;
 float: right;
 height: 37px;
 margin-top: 10px;
}
/*.wrap-outer {*/
 /*margin-left: calc(100vw - 100%);*/
/*}*/
.task {
 /*background-color: #fff;*/

 height: inherit;
 margin-left: -15px;
 margin-right: -15px;
 padding-left:0 !important;
 padding-right:0 !important
}
@media (min-width: 768px) {
 .task {
 padding-right: 40px;
 padding-left: 40px;
 padding-left:0 !important;
 padding-right:0 !important
 }
}
.task-block {
 height: inherit;
 background-color: #f0f0f0;
 position: relative;
}
.task-block .taskDiv {
 height: inherit;
 margin-bottom: 56px;
 display: block;
 padding: 0px;
 overflow-x: hidden;
 overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
 padding-bottom: 100px;
 position: relative;
}
.task-block .taskDiv .task-list {
 /*margin-top: 0;*/
 width: 100%;
 font-size: 16px;
}

.task-list li{
 height: 62px;
 background-color: #fff;
 overflow: hidden;
 margin-top:10px;
 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 padding: 10px 18px 10px 15px;
}
.task-list li .list-left { float: left; padding-right: 10px }
.task-list li .list-center {
 float: left;
 width: 78%
}
.task-list li .list-center span {
 margin-left: 10px
}
.task-list li .list-right {
 color: #999;
 float: right;
 /*width: 70px;*/
}

.task-info {
 color: #666;
 word-break:keep-all;
 white-space:nowrap;
 overflow:hidden;
}

.task-info-sub { color: #999; }

.task-block header {
 height: 50px;
 width: 100%;
 line-height: 50px;
 display: inline-block;
 text-align: center;
 background-color: #fff;
 position: relative;
}

.task-block header .right-txt{
 position: absolute;
 right: 15px;
 top:0;
 width: 120px;
}
/* 选项卡 */
.tab{
 width:60%;
 margin:0 auto;
 height: inherit;
 line-height: inherit;
 /*padding-top: 9px;*/
}
.tab a{
 float: left;
 height: 36px;
 display: block;
 text-align: center;
 line-height: 36px;
 color: #666;
 border: 1px solid #ccc;
 width: 32%;
 text-decoration: none;
 margin-top: 7px;
}
.tab a:hover{ text-decoration: none; }
.tab .current {
 background-color:#61bbef;
 border: 1px solid #61bbef;
 color: #fff;
 text-decoration: none;
}
.tab .leftradius {
 /*-webkit-border-radius: 4px 0 0 4px;*/
 /*border-radius: 4px 0 0 4px;*/
 margin-right: -1px;
}
.tab .rightradius {
 /*-webkit-border-radius: 0 4px 4px 0;*/
 /*border-radius: 0 4px 4px 0;*/
 margin-left: -1px;
}
.c-txt {
 width: 92px;
 height: inherit;
 color: #666;
 position: absolute;
 right:15px;
 top: 0;
 line-height: inherit;
 text-align: center;
 background-image: url("../img/bitbug_favicon.ico");
 background-repeat: no-repeat;
 background-size: 18px 18px;
 background-position: 5px 16px;
 text-indent: 23px;
 text-decoration: none;
}
.c-txt:hover {text-decoration: none;}

/*单据页面*/
.taskItem {
 /*top:44px;*/
 width: 100%;
 height: inherit;
 background-color: #f0f0f0;
 font-size: 14px;
 position: relative;
}

.taskItem header {
 position: absolute;
 top:0;
 height: 44px;
 width: 100%;
 line-height: 44px;
 display: inline-block;
}

.taskItem header a {
 color: #666;
 text-decoration: none;
 display: block;
 height: 44px;
 line-height: 44px;
}

.taskItem header h2 {
 color: #333;
 text-align: center;
 font-size: 18px;
 font-weight: normal;
 margin:0 !important;
 height:44px;
 line-height:44px;
}

.taskItem .l-txt {
 position: absolute;
 left: 0;
 top: 0;
}

.taskItem .r-txt {
 position: absolute;
 right: 15px;
 top:0;
}

.taskItem-content {
 position: absolute;
 top: 44px;
 display: block;
 padding: 24px;
 height: inherit;
 overflow-x: hidden;
 overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
 width: 100%;
 padding-bottom: 158px;
}

.taskItem-content ul {
 background: #fff;
 border-radius: 4px;
 width: 100%;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 font-size: 16px;
}

.taskItem-content ul li {
 border-bottom: 1px solid #e0e0e0;
 padding: 5px 10px 5px 10px;
}

.taskItem-content ul li .li-tr {
 width: 175px;
 text-align: right;
 color: #777;
 display: inline-block;/* 如果对象是inline对象,width属性就会被忽略 */
}
.taskItem-content ul li .li-td {
 color: #444;
 margin-left: 10px;
 display: inline-block;
}

.taskItem-content .li-header {
 background: #f7f8fa;
 color: #666;
 font-size: 14px;
 font-weight: bold;
}


/*process map*/

.processmap {
 width: 60%;
 margin:0 auto;
}

.processmap-legend {
 color: #666;
 position: fixed;
 top:64px;
 right: 25%;
 font-size: 14px;
}

.node {
 display: inline-block;
 min-width: 10px;
 padding: 3px 7px;
 font-size: 12px;
 font-weight: bold;
 line-height: 1;
 color: #fff;
 text-align: center;
 white-space: nowrap;
 vertical-align: middle;
 border-radius: 10px;
 width: 15px;
 height: 15px;
}
.node-todo {
 background-color: #19d25b;
 -webkit-box-shadow: 0 0 12px #0dee1d;
 box-shadow: 0 0 12px #0dee1d;
}
.node-recaption { background-color: #f4a735; }
.node-done { background-color: #39b1ff; }
.node-will { background-color: #bbbcc0; }
.node-lg {
 display: inline-block;
 min-width: 10px;
 padding: 3px 7px;
 font-size: 12px;
 font-weight: bold;
 line-height: 1;
 color: #fff;
 text-align: center;
 white-space: nowrap;
 vertical-align: middle;
 border-radius: 10px;
 width: 40px;
 height: 40px;
}
.node-lg-start { background-color: #39b1ff; }
.node-lg-end {
 background-color: #f65737;
}
.node-lg-end-shadow{
 -webkit-box-shadow: 0 0 12px #f65737;
 box-shadow: 0 0 12px #f65737;
}

/*时间轴*/
#cd-timeline {
 position: relative;
 padding: 32px 0;
 margin: 40px auto 0 auto;
}
#cd-timeline::before {
 /* this is the vertical line */
 content: '';
 position: absolute;
 top: 0;
 left: 18px;
 height: 100%;
 width: 4px;
 background: #d7e4ed;
}
@media only screen and (min-width: 768px) {
 #cd-timeline { margin: 40px auto 0 auto; }
 #cd-timeline::before {
 left: 50%;
 margin-left: -2px;
 }
}

.cd-timeline-block {
 position: relative;
 margin-bottom: 10px;
}
.cd-timeline-block:after {
 content: "";
 display: table;
 clear: both;
}
.cd-timeline-block:first-child {
 margin-top: 0;
}
.cd-timeline-block:last-child {
 margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
 .cd-timeline-block:first-child {
 margin-top: 0;
 }
 .cd-timeline-block:last-child {
 margin-bottom: 0;
 }
}

.cd-timeline-img-lg {
 position: absolute;
 top: 0;
 left: 0;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 margin-left: 0;
 color: #fff;
 line-height: 40px;
 text-align: center;
 font-size: 14px;
}

.cd-timeline-img {
 position: absolute;
 top: 0;
 left: 0;
 width: 15px;
 height: 15px;
 border-radius: 50%;
 margin-left: 12px;
 margin-top: 16px;
}
.cd-timeline-img img {
 display: block;
 width: 24px;
 height: 24px;
 position: relative;
 left: 50%;
 top: 50%;
 margin-left: -8px;
 margin-top: -12px;
}
.cd-timeline-img.cd-picture {
 background: #75ce66;
}
.cd-timeline-img.cd-movie {
 background: #c03b44;
}
.cd-timeline-img.cd-location {
 background: #f0ca45;
}
@media only screen and (min-width: 768px) {
 .cd-timeline-img {
 left: 50%;
 margin-left: -8px;
 margin-top: 24px;
 /* Force Hardware Acceleration in WebKit */
 -webkit-transform: translateZ(0);
 -webkit-backface-visibility: hidden;
 }
 .cd-timeline-img-lg {
 left: 50%;
 margin-left: -20px;
 margin-top: 0;
 /* Force Hardware Acceleration in WebKit */
 -webkit-transform: translateZ(0);
 -webkit-backface-visibility: hidden;
 }
 .cssanimations .cd-timeline-img.is-hidden {
 visibility: hidden;
 }
 .cssanimations .cd-timeline-img.bounce-in {
 visibility: visible;
 -webkit-animation: cd-bounce-1 0.6s;
 -moz-animation: cd-bounce-1 0.6s;
 animation: cd-bounce-1 0.6s;
 }
}

.cd-timeline-content {
 position: relative;
 margin-left: 60px;
 background: white;
 border-radius: 4px;
 padding: 10px;
}
.cd-timeline-content:after {
 content: "";
 display: table;
 clear: both;
}
.cd-timeline-content h2 {
 color: #303e49;
}
.cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
 /*font-size: 13px;*/
 /*font-size: 0.8125rem;*/
}
.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
 display: inline-block;
}
.cd-timeline-content p {line-height: 1.2;}
.cd-timeline-content .cd-read-more {
 float: right;
 padding: .8em 1em;
 background: #acb7c0;
 color: white;
 border-radius: 0.25em;
}
.no-touch .cd-timeline-content .cd-read-more:hover {
 background-color: #bac4cb;
}
a.cd-read-more:hover{text-decoration:none; background-color: #424242; }
.cd-timeline-content .cd-date {
 float: left;
 padding: .8em 0;
 opacity: .7;
}
.cd-timeline-content::before {
 content: '';
 position: absolute;
 top: 16px;
 right: 100%;
 height: 0;
 width: 0;
 border: 7px solid transparent;
 border-right: 7px solid white;
}
.cd-timeline-content h2 {
 font-size: 20px;
 font-size: 1.25rem;
 }

.cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
 font-size: 16px;
 font-size: 0.875rem;
 }

@media only screen and (min-width: 768px) {
 .cd-timeline-content {
 margin-left: 0;
 width: 45%;
 }
 .cd-timeline-content::before {
 top: 24px;
 left: 100%;
 border-color: transparent;
 border-left-color: white;
 }
 .cd-timeline-content .cd-read-more {
 float: left;
 }
 .cd-timeline-content .cd-date {
 position: absolute;
 width: 100%;
 left: 115%;
 top: 2.5px;
 font-size: 14px;
 /*font-size: 1rem;*/
 margin-top: 8px
 }
 .cd-timeline-block:nth-child(even) .cd-timeline-content {
 float: right;
 }
 .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
 top: 24px;
 left: auto;
 right: 100%;
 border-color: transparent;
 border-right-color: white;
 }
 .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
 float: right;
 }
 .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
 left: auto;
 right: 115%;
 text-align: right;
 }
 .cssanimations .cd-timeline-content.is-hidden {
 visibility: hidden;
 }
 .cssanimations .cd-timeline-content.bounce-in {
 visibility: visible;
 -webkit-animation: cd-bounce-2 0.6s;
 -moz-animation: cd-bounce-2 0.6s;
 animation: cd-bounce-2 0.6s;
 }
}

@media only screen and (min-width: 768px) {
 /* inverse bounce effect on even content blocks */
 .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
 -webkit-animation: cd-bounce-2-inverse 0.6s;
 -moz-animation: cd-bounce-2-inverse 0.6s;
 animation: cd-bounce-2-inverse 0.6s;
 }
}

.general {
 width: 100%;
 display: inline-block;
 font-size: 14px;
 margin: 0;
}

.general .op_submit_name {
 color: #999;
 margin: 5px 10px;
 /*display: inline-block;*/
 /*width: 100px;*/
}

.general .biz_date {
 color: #999;
 margin: 5px 10px;
 display: inline-block;
 float: right;
}

.general .summary {
 color: #7f7f7f;
 margin: 5px 10px;
 display: inline-block;
}

.general .waiting {
 color: #1ad35b;
 margin: 5px 10px;
 display: inline-block;
 float: right;
}

/**/
@-webkit-keyframes sliderightout{from{-webkit-transform: translateX(0px); opacity: 1} to{-webkit-transform: translateX(50%); opacity: 0}}
@-webkit-keyframes slideleftin{from{-webkit-transform: translateX(-50%); opacity: 0} to{-webkit-transform: translateX(0px); opacity: 1}}
@-webkit-keyframes slideleftout{from{-webkit-transform: translateX(0px); opacity: 1} to{-webkit-transform: translateX(-50%); opacity: 0}}
@-webkit-keyframes sliderightin{from{-webkit-transform: translateX(50%); opacity: 0} to{-webkit-transform: translateX(0px); opacity: 1}}
@-moz-keyframes sliderightout{from{-moz-transform: translateX(0px); opacity: 1} to{-moz-transform: translateX(50%); opacity: 0}}
@-moz-keyframes slideleftin{from{-moz-transform: translateX(-50%); opacity: 0} to{-moz-transform: translateX(0px); opacity: 1}}
@-moz-keyframes slideleftout{from{-moz-transform: translateX(0px); opacity: 1} to{-moz-transform: translateX(-50%); opacity: 0}}
@-moz-keyframes sliderightin{from{-moz-transform: translateX(50%); opacity: 0} to{-moz-transform: translateX(0px); opacity: 1}}
@keyframes sliderightout{from{transform: translateX(0px); opacity: 1} to{transform: translateX(50%); opacity: 0}}
@keyframes slideleftin{from{transform: translateX(-50%); opacity: 0} to{transform: translateX(0px); opacity: 1}}
@keyframes slideleftout{from{transform: translateX(0px); opacity: 1} to{transform: translateX(-50%); opacity: 0}}
@keyframes sliderightin{from{transform: translateX(50%); opacity: 0} to{-webkit-transform: translateX(0px); opacity: 1}}
.slideleftout{-webkit-animation: slideleftout 350ms ease-in-out; -moz-animation: slideleftout 350ms ease-in-out; animation: slideleftout 350ms ease-in-out}
.slideleftin{-webkit-animation: slideleftin 350ms ease-in-out; -moz-animation: slideleftin 350ms ease-in-out; animation: slideleftin 350ms ease-in-out}
.sliderightout{-webkit-animation: sliderightout 350ms ease-in-out; -moz-animation: sliderightout 350ms ease-in-out; animation: sliderightout 350ms ease-in-out}
.sliderightin{-webkit-animation: sliderightin 350ms ease-in-out; -moz-animation: sliderightin 350ms ease-in-out; animation: sliderightin 350ms ease-in-out}
.animatestart{position: absolute; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; overflow-x: hidden}
.animatestart.sub-viewport{overflow-x: hidden; -webkit-backface-visibility: hidden; background-color: #f5f5f5; }

.modal.fade .filterView {
 -webkit-transition: -webkit-transform .35s ease-out;
 -o-transition: -o-transform .35s ease-out;
 transition: transform .35s ease-out;
 -webkit-transform: translate(50%, 0);
 -ms-transform: translate(50%, 0);
 -o-transform: translate(50%, 0);
 transform: translate(50%, 0);
}
.filterView {
 position: absolute !important;
 right: 0 !important;
 width: 25% !important;
 height: 100% !important;
 margin: 0 auto !important;
}
.filterView .modal-content{ height: 100% !important; }
.filterView .modal-content .modal-header h4{text-align: center}
.filterView .modal-content .modal-footer {
 position: absolute;
 bottom: 0;
 width: 100%;
 text-align: center !important;
}
.filterView .modal-content .modal-footer button {
 width: 76%;
 margin-left: auto;
 margin-right: auto;
}
@media (min-width: 768px) {
 .filterView {
 width: 25% !important;
 margin: 0px auto !important;
 height: 100% !important;
 }
}

.modal.fade .flowView {
 -webkit-transition: -webkit-transform .35s ease-out;
 -o-transition: -o-transform .35s ease-out;
 transition: transform .35s ease-out;
 -webkit-transform: translate(0, 75%);
 -ms-transform: translate(0, 75%);
 -o-transform: translate(0, 75%);
 transform: translate(0, 75%);
}
.flowView {
 position: absolute !important;
 right: 0 !important;
 width: 93% !important;
 height: 100% !important;
 margin: 0 auto !important;

}
.flowView .modal-content{
 height: 100% !important;
 background-color: #f0f0f0 !important;
}
.flowView .modal-content .modal-header h4{text-align: center}

.flowView header .l-txt{
 position: fixed;
 left: -40px;
 top: 7px;
 display: block;
 width: 70px;
 height: 44px;
 background-image: url(../img/arrow.png);
 background-repeat: no-repeat;
 /*background-position: 16px center;*/
 background-size: 30px 30px;
}

@media (min-width: 768px) {
 .flowView {
 width: 93% !important;
 margin: 0px auto !important;
 height: 100% !important;
 }
}

.modal.fade .alertView {
 -webkit-transition: -webkit-transform .3s ease-out;
 -o-transition: -o-transform .3s ease-out;
 transition: transform .3s ease-out;
 -webkit-transform: translate(0, -25%);
 -ms-transform: translate(0, -25%);
 -o-transform: translate(0, -25%);
 transform: translate(0, -25%);
}
.alertView {
 width: 350px !important;
 /*height: 150px !important;*/
 margin: 100px auto !important;
}
.alertView .modal-content{
 height: 100% !important;
 border-radius: 6px;
}
.alertView .modal-body {
 padding-bottom: 40px;
}
.alertView .modal-body h4{
 text-align: center;
 color: #666;
}
.alertView .modal-body p{
 color: #999;
 word-wrap: break-word;
 font-size: 14px;

}
.alertView .modal-content .modal-footer {
 position: absolute;
 bottom: 0;
 width: 100%;
 text-align: center !important;
 padding: 0 !important;
}
.alertView .modal-content .modal-footer a {
 width: 350px;
 height: 40px;
 text-decoration: none;
}
.alertView .modal-content .modal-footer button {
 width: 100%;
 border: none !important;
}
@media (min-width: 768px) {
 .alertView {
 margin: 100px auto !important;
 width: 350px !important;
 /*height: 150px !important;*/
 }
}