﻿/* 
[Wiz] CSS
------------------
CSS for [v0.3]
Created by EN for TBG
Based on a snippet by Nasir (https://bootsnipp.com/snippets/66ma5) - Licensed under MIT (http://opensource.org/licenses/MIT) - Copyright (c) 2013 Bootsnipp.com.
------------------
*/

.wiz-element {display:block;overflow-x:hidden;}
.wiz-element[data-currentstep="0"] .wiz-button-back {display:none;}

/* Wiz Progress */
.wiz-element .wiz-progress {}
.wiz-element .wiz-progress .wiz-progress-gradient {pointer-events: none;display:none;height:40px;width: 100%;position: absolute;bottom: -40px;background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );}
.wiz-element[data-loadarea="hub"] .wiz-progress .wiz-progress-gradient {background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(255,255,255,0) 100%);background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(255,255,255,0) 100%);background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(255,255,255,0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#00ffffff',GradientType=0 );}
.wiz-progress.fixed .wiz-progress-gradient {display:block;}
.wiz-progress.wiz-progress-hidden {display:none;}
.wiz-element .wiz-progress > ul {margin:0;padding:15px 0;background: #fff;counter-reset: wiz-progress-counter;list-style: none; position: relative; width: 100%;  display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; flex-wrap: nowrap; }
.wiz-element[data-loadarea="hub"] .wiz-progress > ul {background:#fcfcfc;}
.wiz-progress > ul a, .wiz-progress > ul a:active, .wiz-progress > ul a:focus, .wiz-progress > ul a:hover {outline: 0;line-height: 0;display: inline-block;cursor:default; text-decoration: none; }
.wiz-progress > ul > li {list-style:none;margin-bottom: 20px;position:relative;counter-increment: wiz-progress-counter; -webkit-flex-grow:1 ;flex-grow:1;flex-basis: 0; text-align: center; padding-left: 0;transition: all 100ms ease-out; }
.wiz-progress > ul > li.step-hidden {display:none;}
.wiz-progress > ul > li a .step-circle {width:40px;height:40px; display: inline-block; font-size: 15px; font-weight: 700; position: relative; text-align: center; }
.wiz-progress > ul > li a .step-circle > .step-circle-circle {top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;position:absolute;margin:0 auto;width:40px;height:40px; background: #B2B5B9; color: #fff;padding:0; border: 3px solid transparent; border-radius: 50%; line-height: normal; transition: all 100ms ease-out;}
.wiz-progress > ul > li a .step-circle > .step-circle-number {top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);left: 0;width:100%;color:#fff;z-index:3;position:absolute;margin:0 auto;line-height: normal; transition: all 100ms ease-out;}
.wiz-progress > ul > li a .step-circle > .step-circle-checkmark {top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);left: 0;width:100%;color:#fff;z-index:3;position:absolute;margin:0 auto;line-height: normal; transition: all 100ms ease-out;}
.wiz-progress > ul > li a .step-circle > .step-circle-checkmark i {font-size: 10px; font-weight: 400;color:#fff;position: relative;}
.wiz-progress > ul > li a .step-circle > .step-circle-checkmark {display:none;}
.wiz-progress > ul > li.complete:not(.current):not(.no-click) a {cursor:pointer;}
.wiz-progress > ul > li.complete a .step-circle > .step-circle-checkmark,.wiz-progress > ul > li.error a .step-circle > .step-circle-checkmark {display:inline-block;font-size: 0;}
.wiz-progress > ul > li.complete a .step-circle > .step-circle-number,.wiz-progress > ul > li.error a .step-circle > .step-circle-number {display:none;}
.wiz-progress > ul > li a .step-circle > .step-circle-number[data-numbertype="number"]:before { content: counter(wiz-progress-counter); }
.wiz-progress > ul > li:before { height: 3px;background: #55606E; content: ""; display: block; font-size: 0; overflow: hidden; position: relative; top: 22px; right: 1px; width: 100%; z-index: 1; }
.wiz-progress > ul > li:first-child:before { left: 50%; max-width: 50%; }
.wiz-progress > ul > li:last-child:before { max-width: 50%; width: 50%; }
.wiz-progress > ul > li.complete:not(.current) a .step-circle .step-circle-circle { background: #0aa66e; width:25px;height:25px; border: 3px solid #55606E; }
.wiz-progress > ul > li.complete.current a .step-circle .step-circle-circle { background: #0aa66e; border: 3px solid #55606E; }
.wiz-progress > ul > li.complete:not(.current):not(.no-click) a:hover .step-circle > .step-circle-circle {width:35px;height:35px;}
.wiz-progress > ul > li.current .step-circle .step-circle-circle { background: #0091d9;border-radius: 50%; border: 3px solid #55606E; }
.wiz-progress > ul > li.current.error .step-circle .step-circle-circle { background:#c9302c; }
.wiz-progress > ul > li.current .step-title, .wiz-progress > ul > li.complete .step-title { color: #2B3D53; }
.wiz-progress > ul > li.current .step-title { font-weight: bold; }
.wiz-progress > ul > li.current.error .step-title { font-weight: bold;color:#c9302c; }
.wiz-progress > ul > li.current.error a .step-circle > .step-circle-checkmark i {font-size: 15px;}
.wiz-progress > ul > li .step-title { color: #bfbfbf; display: block; font-size: 14px; line-height: 15px; max-width: 100%; position: absolute;width: 100%;left: 0; table-layout: fixed; text-align: center; margin-top: 5px; word-wrap: break-word; }

/* Wiz Body */
.panel-body.wiz-panel-body {padding-bottom:0;padding-top:0;}
.wiz-form-inner {white-space: nowrap;position:relative;overflow: hidden;}
.wiz-form-inner.fade-animate {white-space: nowrap;}
.wiz-form-inner.fade-animate .wiz-form-inner-container {position:absolute;top:0;}
.wiz-form-inner .wiz-form-inner-container > div {white-space: normal;height: 100%;display: inline-block;vertical-align:top;}

/* Wiz Error Map */
.wiz-errormap { margin-top: 15px; }
.wiz-errormap ul {padding-left: 15px;margin-top:5px;}
.wiz-errormap ul li a,.wiz-errormap ul li a:active,.wiz-errormap ul li a:focus,.wiz-errormap ul li a:hover {color:#fff;text-decoration:none;}

/* Wiz Footer */
.wiz-footer {display:block;}
.wiz-footer button.pull-left {margin-right:10px;}
.wiz-footer button.pull-right {margin-left:10px;}

/* Sticky Panel Footer */
.wiz-footer-sticky {background:#fff;border-top: 2px solid #fff;padding:15px;border-top:none;}
.wiz-footer-sticky.fixed {background-color:#f5f5f5;border-top: 2px solid #ccc;-webkit-box-shadow: 0 -2px 2px 0 rgba(0,0,0,0.1);box-shadow: 0 -2px 2px 0 rgba(0,0,0,0.1);}
hr.wiz-hr-sticky {margin-bottom:0;margin-left:15px;margin-right:15px;}