/*customer modal UI */ .wizard { background: #f1f1f1; padding: 10px; } .wizard .nav-tabs { position: relative; border: 0px; } .wizard > div.wizard-inner { position: relative; margin: 0 0 0 80px !important; } .connecting-line{ height:12px; background: #e0e0e0; position: absolute; width: 115%; margin: 0 auto; left: 0; right: 0; top:38%; z-index: 1; border-radius: 15px; } .active-line{ height:12px; background: #e0e0e0; position: absolute; width: 5%; margin: 0 auto; left: 0; right: 0; top:61%; z-index: 1; border-radius: 15px !important; } .connecting-line a.active{ background-color: #2ED4E0; } .border-right{ border-radius: 15px 0 0 15px; } .border-left{ border-radius: 0; } .wizard .nav-tabs > li { margin-bottom: -20px; } .wizard .nav-tabs > li > a.active > a, .wizard .nav-tabs > li > a.active > a:hover, .wizard .nav-tabs > li > a.active > a:focus { cursor: default; border: 0; color:#2ED4E0; border-bottom-color: transparent; } .nav-tabs li p{ padding-top:40px; font-size: 14px; text-align: center; } .list-inline{ text-align: center; } span.round-tab { width: 28px; height: 28px; line-height: 28px; display: inline-block; border-radius: 100px; background:#DFE3E4; border: 2px solid #fff; z-index:1; position:absolute; text-align: center; font-size: 16px; } .wizard li > a.active span.round-tab{ background:#2196F3; color:white; border: 1px solid #fff; } span.round-tab:hover{ color: white; border: 1px solid #fff; background-color:#2196F3; } .wizard .nav-tabs > li { width: 25%; } .wizard .nav-tabs > li a{ width: 28px; height: 28px; margin: 18px auto; border-radius: 100%; padding: 0; color: #777; } .wizard .tab-pane { position: relative; padding-top: 5px; border-top: 1px solid #fff; margin-top: 20px; } .next-step:hover, .next-step, .prev-step:hover, .prev-step{ position: relative; background-color: #2196F3; font-size: 14px; color: #FFFFFF; } /*customer modal UI */