<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<section>
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1" class="wizard-tab-a">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2" class="wizard-tab-a">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3" class="wizard-tab-a">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete" class="wizard-tab-a">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<div class="form-group">
<div class="row">
<h2 id="step1" class="text-center">Lựa chọn giáo trình</h2>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active text-center text-uppercase" style="width:50%;"><a href="#muatheobo" aria-controls="muatheobo" role="tab" data-toggle="tab"><b>Mua theo bộ</b></a></li>
<li role="presentation" class="text-center text-uppercase" style="width:50%;"><a href="#muatungphan" aria-controls="muatungphan" role="tab" data-toggle="tab"><b>Mua từng phần</b></a></li>
</ul>
</div>
<div class="panel-body">
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="muatheobo">
<div>
<h4 class="text-center text-uppercase" style="margin-bottom:10px;"></h4>
<div>
<div class="input-group spinner"> <div class="input-group-btn">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary eefc" for="studentcourse">
<input style="" type="checkbox" name="entry.662069527" id="studentcourse" value="STUDENT [400]" class="effortlessenglish">
<span class="glyphicon glyphicon-ok"></span> <strong class="name">BỘ STUDENT</strong> </label>
</div>
</div>
<input type="text" name="entry.662069527" class="form-control studentcourse" value="0" min="0" max="3" style="text-align: center;" disabled>
<div class="input-group-btn-vertical">
<button class="btn btn-default studentcourse" type="button" disabled><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default studentcourse" type="button" disabled><i class="fa fa-caret-down"></i></button>
</div>
<span class="input-group-addon default price"> <del>600.000</del> <strong>400.000 VNĐ</strong> </span> </div>
<span class="help-block" style="display:block;">Chương trình học 06 tháng: 40 lessons (đã bao gồm sách & đĩa) <a href="http://www.effortlessenglishclub.vn/courses.html" target="_blank"> <span class="glyphicon glyphicon-new-window"></span> </a> </span>
<span class="help-block" style="display:block;">Giáo trình bao gồm: [1] [2] </span>
<div class="input-group spinner"> <div class="input-group-btn">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-danger eefc" for="mastercourse">
<input style="" type="checkbox" name="entry.662069527" id="mastercourse" value="MASTER [650]" class="effortlessenglish">
<span class="glyphicon glyphicon-ok"></span> <strong class="name">BỘ MASTER</strong> </label>
</div>
</div>
<input type="text" name="entry.662069527" class="form-control mastercourse" value="0" min="0" max="3" style="text-align: center;" disabled>
<div class="input-group-btn-vertical">
<button class="btn btn-default mastercourse" type="button" disabled><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default mastercourse" type="button" disabled><i class="fa fa-caret-down"></i></button>
</div>
<span class="input-group-addon default price"> <del>950.000</del> <strong>650.000 VNĐ</strong> </span> </div>
<span class="help-block" style="display:block;">Chương trình học 12 tháng: 60 lessons (đã bao gồm sách & đĩa) <a href="http://www.effortlessenglishclub.vn/courses.html" target="_blank"> <span class="glyphicon glyphicon-new-window"></span> </a> </span>
<span class="help-block" style="display:block;">Giáo trình bao gồm: [1] [3] [4]</span>
<div class="input-group spinner"> <div class="input-group-btn">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success eefc" for="nativecourse">
<input style="" type="checkbox" name="entry.662069527" id="nativecourse" value="NATIVE [1000]" class="effortlessenglish">
<span class="glyphicon glyphicon-ok"></span> <strong class="name">BỘ NATIVE</strong> </label>
</div>
</div>
<input type="text" name="entry.662069527" class="form-control nativecourse" value="0" min="0" max="3" style="text-align: center;" disabled>
<div class="input-group-btn-vertical">
<button class="btn btn-default nativecourse" type="button" disabled><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default nativecourse" type="button" disabled><i class="fa fa-caret-down"></i></button>
</div>
<span class="input-group-addon default price"> <del>1.300.000</del> <strong>1.000.000 VNĐ</strong> </span> </div>
<span class="help-block" style="display:block;">Chương trình học 18 tháng: 100+ lessons (đã bao gồm sách & đĩa) </span>
<span class="help-block" style="display:block;">Giáo trình bao gồm: [1] [2] [3] [4] + [khuyến mãi tặng kèm]</span>
<div class="input-group spinner"> <div class="input-group-btn">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-warning eefc" for="vipcourse">
<input style="" type="checkbox" name="entry.662069527" id="vipcourse" value="VIP [1500]" class="effortlessenglish">
<span class="glyphicon glyphicon-ok"></span> <strong class="name">BỘ VIP</strong> </label>
</div>
</div>
<input type="text" name="entry.662069527" class="form-control vipcourse" value="0" min="0" max="3"style="text-align: center;" disabled>
<div class="input-group-btn-vertical">
<button class="btn btn-default vipcourse" type="button" disabled><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default vipcourse" type="button" disabled><i class="fa fa-caret-down"></i></button>
</div>
<span class="input-group-addon default price"> <del>1.800.000</del> <strong>1.500.000 VNĐ</strong> </span> </div>
<span class="help-block" style="display:block;">Chương trình học 24 tháng: 100+ lessons (đã bao gồm sách đĩa và tài khoản học trực tuyến)</span>
<span class="help-block" style="display:block;">Giáo trình bao gồm: [1] [2] [3] [4] [5] + [khuyến mãi tặng kèm] </span>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="muatungphan">
<div>
<h4 class="text-center text-uppercase" style="margin-bottom:10px;"></h4>
<div>
<div class="input-group spinner"> <div class="input-group-btn">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default eefc" for="dvdcourse">
<input style="" type="checkbox" name="entry.662069527" id="dvdcourse" value="DVD [250]" class="effortlessenglish">
<span class="glyphicon glyphicon-ok"></span> <span class="badge">1</span><strong class="name">ĐĨA DVD COURSE</strong> </label>
</div>
</div>
<input type="text" name="entry.662069527" class="form-control dvdcourse" value="0" min="0" max="3" style="text-align: center;"disabled>
<div class="input-group-btn-vertical">
<button class="btn btn-default dvdcourse" type="button" disabled><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default dvdcourse" type="button" disabled><i class="fa fa-caret-down"></i></button>
</div>
<span class="input-group-addon default price"> <strong>250.000 VNĐ</strong> </span> </div>
<span class="help-block" style="display:block;">Bộ đĩa DVD nguyên bản gốc đầy đủ các bài học Audio, Video, Ebook<a href="http://www.effortlessenglishclub.vn/courses.html" target="_blank"> <span class="glyphicon glyphicon-new-window"></span> </a> </span>
<div class="input-group spinner"> <div class="input-group-btn">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default eefc" for="originalbook">
<input style="" type="checkbox" name="entry.662069527" id="originalbook" value="ORIGINAL [350]" class="effortlessenglish">
<span class="glyphicon glyphicon-ok"></span> <span class="badge">2</span><strong class="name">SÁCH ORIGINAL COURSE</strong> </label>
</div>
</div>
<input type="text" name="entry.662069527" class="form-control originalbook" value="0" min="0" max="3" style="text-align: center;" disabled>
<div class="input-group-btn-vertical">
<button class="btn btn-default originalbook" type="button" disabled><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default originalbook" type="button" disabled><i class="fa fa-caret-down"></i></button>
</div>
<span class="input-group-addon default price"> <strong>350.000 VNĐ</strong> </span> </div>
<span class="help-block" style="display:block;">Sách giáo trình Effortless English Original Course (không bao gồm đĩa)<a href="http://www.effortlessenglishclub.vn/courses.html" target="_blank"> <span class="glyphicon glyphicon-new-window"></span> </a> </span>
<div class="input-group spinner"> <div class="input-group-btn">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default eefc" for="powerbook">
<input style="" type="checkbox" name="entry.662069527" id="powerbook" value="POWER [350]" class="effortlessenglish">
<span class="glyphicon glyphicon-ok"></span> <span class="badge">3</span><strong class="name">SÁCH POWER COURSE</strong> </label>
</div>
</div>
<input type="text" name="entry.662069527" class="form-control powerbook" value="0" min="0" max="3" style="text-align: center;" disabled>
<div class="input-group-btn-vertical">
<button class="btn btn-default powerbook" type="button" disabled><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default powerbook" type="button" disabled><i class="fa fa-caret-down"></i></button>
</div>
<span class="input-group-addon default price"> <strong>350.000 VNĐ</strong> </span> </div>
<span class="help-block" style="display:block;">Sách giáo trình Effortless English Power Course (không bao gồm đĩa)<a href="http://www.effortlessenglishclub.vn/courses.html" target="_blank"> <span class="glyphicon glyphicon-new-window"></span> </a> </span>
<div class="input-group spinner"> <div class="input-group-btn">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default eefc" for="realbook">
<input style="" type="checkbox" name="entry.662069527" id="realbook" value="REAL [350]" class="effortlessenglish">
<span class="glyphicon glyphicon-ok"></span> <span class="badge">4</span><strong class="name">SÁCH REAL COURSE</strong> </label>
</div>
</div>
<input type="text" name="entry.662069527" class="form-control realbook" value="0" min="0" max="3" style="text-align: center;" disabled>
<div class="input-group-btn-vertical">
<button class="btn btn-default realbook" type="button" disabled><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default realbook" type="button" disabled><i class="fa fa-caret-down"></i></button>
</div>
<span class="input-group-addon default price"> <strong>350.000 VNĐ</strong> </span> </div>
<span class="help-block" style="display:block;">Sách giáo trình Effortless English Real Course (không bao gồm đĩa)<a href="http://www.effortlessenglishclub.vn/courses.html" target="_blank"> <span class="glyphicon glyphicon-new-window"></span> </a> </span>
<div class="input-group spinner"> <div class="input-group-btn">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default eefc" for="onlinecourse">
<input style="" type="checkbox" name="entry.662069527" id="onlinecourse" value="ONLINE [500]" class="effortlessenglish">
<span class="glyphicon glyphicon-ok"></span> <span class="badge">5</span><strong class="name">TÀI KHOẢN ONLINE</strong> </label>
</div>
</div>
<input type="text" name="entry.662069527" class="form-control onlinecourse" value="0" min="0" max="3"style="text-align: center;" disabled>
<div class="input-group-btn-vertical">
<button class="btn btn-default onlinecourse" type="button" disabled><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default onlinecourse" type="button" disabled><i class="fa fa-caret-down"></i></button>
</div>
<span class="input-group-addon default price"> <strong>500.000 VNĐ</strong> </span> </div>
<span class="help-block" style="display:block;">Tài khoản học trực tuyến, dễ dàng, nhanh chóng, tiện dụng, mọi lúc, mọi nơi </span>
<div class="input-group spinner"> <div class="input-group-btn">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default eefc" for="studybook">
<input style="" type="checkbox" name="entry.662069527" id="studybook" value="AJHOGE [150K]" class="effortlessenglish">
<span class="glyphicon glyphicon-ok"></span> <span class="badge">6</span><strong class="name">SÁCH HƯỚNG DẪN HỌC...</strong> </label>
</div>
</div>
<input type="text" name="entry.662069527" class="form-control studybook" value="0" min="0" max="3" style="text-align: center;" disabled>
<div class="input-group-btn-vertical">
<button class="btn btn-default studybook" type="button" disabled><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default studybook" type="button" disabled><i class="fa fa-caret-down"></i></button>
</div>
<span class="input-group-addon default price"> <strong>150.000 VNĐ</strong> </span> </div>
<span class="help-block" style="display:block;">Sách luyện nói tiếng Anh như người bản ngữ (tái bản 2016) <a href="http://www.effortlessenglishclub.vn/study-book.html" target="_blank"> <span class="glyphicon glyphicon-new-window"></span> </a> </span>
<div class="input-group spinner"> <div class="input-group-btn">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default eefc" for="vocabularybook">
<input style="" type="checkbox" name="entry.662069527" id="vocabularybook" value="VOCABULARY [60]" class="effortlessenglish">
<span class="glyphicon glyphicon-ok"></span> <span class="badge">7</span><strong class="name">SÁCH 3000 TỪ VỰNG</strong> </label>
</div>
</div>
<input type="text" name="entry.662069527" class="form-control vocabularybook" value="0" min="0" max="3" style="text-align: center;" disabled>
<div class="input-group-btn-vertical">
<button class="btn btn-default vocabularybook" type="button" disabled><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default vocabularybook" type="button" disabled><i class="fa fa-caret-down"></i></button>
</div>
<span class="input-group-addon default price"> <strong>60.000 VNĐ</strong> </span> </div>
<span class="help-block" style="display:block;">Sách từ điển 3000 từ vựng thông dụng song ngữ Anh-Việt <a href="http://www.effortlessenglishclub.vn/vocabulary.html" target="_blank"> <span class="glyphicon glyphicon-new-window"></span> </a> </span>
<div class="input-group spinner"> <div class="input-group-btn">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default eefc" for="pimsleurdvd">
<input style="" type="checkbox" name="entry.662069527" id="pimsleurdvd" value="PIMSLEUR [350]" class="effortlessenglish">
<span class="glyphicon glyphicon-ok"></span> <span class="badge">8</span><strong class="name">ĐĨA PIMSLEUR 2016</strong> </label>
</div>
</div>
<input type="text" name="entry.662069527" class="form-control pimsleurdvd" value="0" min="0" max="3" style="text-align: center;" disabled>
<div class="input-group-btn-vertical">
<button class="btn btn-default pimsleurdvd" type="button" disabled><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default pimsleurdvd" type="button" disabled><i class="fa fa-caret-down"></i></button>
</div>
<span class="input-group-addon default price"> <strong>350.000 VNĐ</strong> </span> </div>
<span class="help-block" style="display:block;">DVD tiếng Anh giao tiếp thông dụng cho người mới bắt đầu & “mất gốc” <a href="http://www.effortlessenglishclub.vn/pimsleur-english.html" target="_blank"> <span class="glyphicon glyphicon-new-window"></span> </a> </span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Step 2</h3>
<p>This is step 2</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h3>Step 3</h3>
<p>This is step 3</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step">Skip</button></li>
<li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3>Complete</h3>
<p>You have successfully completed all steps.</p>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
</div>
.required {
border-color: #FF9D9D;
}
.bg-primary {
background-color: #DB2828;
margin: 0 15px;
max-width: 942px;
}
.row h2 {
margin: 7px 0;
}
.help-block {
font-size: 0.8em;
}
.input-group-addon.primary {
color: rgb(255, 255, 255);
background-color: rgb(50, 118, 177);
border-color: rgb(40, 94, 142);
}
.input-group-addon.success {
color: rgb(255, 255, 255);
background-color: rgb(92, 184, 92);
border-color: rgb(76, 174, 76);
}
.input-group-addon.info {
color: rgb(255, 255, 255);
background-color: rgb(57, 179, 215);
border-color: rgb(38, 154, 188);
}
.input-group-addon.warning {
color: rgb(255, 255, 255);
background-color: rgb(240, 173, 78);
border-color: rgb(238, 162, 54);
}
.input-group-addon.danger {
color: rgb(255, 255, 255);
background-color: rgb(217, 83, 79);
border-color: rgb(212, 63, 58);
}
.btn.eefc span.glyphicon {
opacity: 0.1;
}
.btn.active.eefc span.glyphicon {
opacity: 1;
}
.price {
min-width:110px!important;
}
.input-group .name {
display: inline-block;
min-width: 190px;
text-align: left;
margin-left: 5px;
}
.input-group .bonus {
display: inline-block;
min-width: 190px;
text-align: left;
margin-left: 5px;
}
.spinner input {
text-align: right;
}
.input-group-btn-vertical {
position: relative;
white-space: nowrap;
width: 2%;
vertical-align: middle;
display: table-cell;
}
.input-group-btn-vertical > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
padding: 8px;
margin-left: -1px;
position: relative;
border-radius: 0;
}
.input-group-btn-vertical > .btn:first-child {
border-top-right-radius: 0;
}
.input-group-btn-vertical > .btn:last-child {
margin-top: -2px;
border-bottom-right-radius: 0;
}
.input-group-btn-vertical i {
position: absolute;
top: 0;
left: 4px;
}
.panel.with-nav-tabs .panel-heading{
padding: 5px 5px 0 5px;
}
.panel.with-nav-tabs .nav-tabs{
border-bottom: none;
}
.panel.with-nav-tabs .nav-justified{
margin-bottom: -1px;
}
/********************************************************************/
/*** PANEL DEFAULT ***/
.with-nav-tabs.panel-default .nav-tabs > li > a,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
color: #777;
}
.with-nav-tabs.panel-default .nav-tabs > .open > a,
.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
color: #777;
background-color: #ddd;
border-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.active > a,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
color: #555;
background-color: #fff;
border-color: #ddd;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
background-color: #f5f5f5;
border-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #777;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #ddd;
}
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #555;
}
/********************************************************************/
/*** PANEL PRIMARY ***/
.with-nav-tabs.panel-primary .nav-tabs > li > a,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > .open > a,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
color: #fff;
background-color: #3071a9;
border-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
color: #428bca;
background-color: #fff;
border-color: #428bca;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
background-color: #428bca;
border-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #fff;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #3071a9;
}
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
background-color: #4a9fe9;
}
/********************************************************************/
/*** PANEL SUCCESS ***/
.with-nav-tabs.panel-success .nav-tabs > li > a,
.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
color: #3c763d;
}
.with-nav-tabs.panel-success .nav-tabs > .open > a,
.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
color: #3c763d;
background-color: #d6e9c6;
border-color: transparent;
}
.with-nav-tabs.panel-success .nav-tabs > li.active > a,
.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
color: #3c763d;
background-color: #fff;
border-color: #d6e9c6;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
background-color: #dff0d8;
border-color: #d6e9c6;
}
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #3c763d;
}
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #d6e9c6;
}
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #3c763d;
}
/********************************************************************/
/*** PANEL INFO ***/
.with-nav-tabs.panel-info .nav-tabs > li > a,
.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
color: #31708f;
}
.with-nav-tabs.panel-info .nav-tabs > .open > a,
.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
color: #31708f;
background-color: #bce8f1;
border-color: transparent;
}
.with-nav-tabs.panel-info .nav-tabs > li.active > a,
.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
color: #31708f;
background-color: #fff;
border-color: #bce8f1;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
background-color: #d9edf7;
border-color: #bce8f1;
}
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #31708f;
}
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #bce8f1;
}
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #31708f;
}
/********************************************************************/
/*** PANEL WARNING ***/
.with-nav-tabs.panel-warning .nav-tabs > li > a,
.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
color: #8a6d3b;
}
.with-nav-tabs.panel-warning .nav-tabs > .open > a,
.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
color: #8a6d3b;
background-color: #faebcc;
border-color: transparent;
}
.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
color: #8a6d3b;
background-color: #fff;
border-color: #faebcc;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
background-color: #fcf8e3;
border-color: #faebcc;
}
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #8a6d3b;
}
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #faebcc;
}
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff;
background-color: #8a6d3b;
}
/********************************************************************/
/*** PANEL DANGER ***/
.with-nav-tabs.panel-danger .nav-tabs > li > a,
.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
color: #a94442;
}
.with-nav-tabs.panel-danger .nav-tabs > .open > a,
.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
color: #a94442;
background-color: #ebccd1;
border-color: transparent;
}
.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
color: #a94442;
background-color: #fff;
border-color: #ebccd1;
border-bottom-color: transparent;
}
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
background-color: #f2dede; /* bg color */
border-color: #ebccd1; /* border color */
}
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
color: #a94442; /* normal text color */
}
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
background-color: #ebccd1; /* hover bg color */
}
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
color: #fff; /* active text color */
background-color: #a94442; /* active bg color */
}
.wizard {
margin: 20px auto;
background: #fff;
}
.wizard .nav-tabs {
position: relative;
margin: 40px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}
.wizard > div.wizard-inner {
position: relative;
}
.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.wizard .nav-tabs > li.active > a.wizard-tab-a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a.wizard-tab-a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i{
color:#555555;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #5bc0de;
}
.wizard li.active span.round-tab i{
color: #5bc0de;
}
span.round-tab:hover {
color: #333;
border: 2px solid #333;
}
.wizard .nav-tabs > li {
width: 25%;
}
.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #5bc0de;
transition: 0.1s ease-in-out;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #5bc0de;
}
.wizard .nav-tabs > li a.wizard-tab-a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.wizard .nav-tabs > li a.wizard-tab-a:hover {
background: transparent;
}
.wizard .tab-pane {
position: relative;
padding-top: 50px;
}
.wizard h3 {
margin-top: 0;
}
@media( max-width : 585px ) {
.wizard {
width: 90%;
height: auto !important;
}
span.round-tab {
font-size: 16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard .nav-tabs > li a {
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 35%;
}
}
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
