xp-dev.com Git - namibia/blob - public/css/app/step-form.css

   1
   2 .sf-left {
   3     float: left;
   4 }
   5 .sf-right {
   6     float: right;
   7 }
   8 .sf-step>fieldset {
   9     border: 0;
  10     margin: 0;
  11     padding: 0;
  12     display: block;
  13 }
  14 .sf-hide-legend legend, .sf-hide-buttons {
  15     display: none;
  16 }
  17 .sf-nav {
  18     list-style: none;
  19     width: 100%;
  20     margin: 0;
  21     padding: 0;
  22 }
  23 .sf-viewport {
  24     position: relative;
  25     width: 100%;
  26     overflow: hidden;
  27     margin-bottom: 20px;
  28 }
  29 .sf-viewport legend {
  30     font-size: 20px;
  31     padding: 15px 0;
  32     font-weight: bold;
  33     background: 0;
  34     margin: 0;
  35     width: 100%;
  36     border-bottom: 1px solid #e5e5e5;
  37     margin-bottom: 15px;
  38 }
  39 .sf-viewport .sf-btn.sf-btn-finish {
  40     margin: 0 0 0 10px;
  41 }
  42 .sf-nav-bottom {
  43     margin-top: 6px;
  44 }
  45 .sf-nav-wrap {
  46     overflow: hidden;
  47     width: 100%;
  48     position: relative;
  49     left: 0;
  50 }
  51 .sf-nav-top, .sf-nav-bottom {
  52     height: 40px;
  53 }
  54 .sf-nav-top .sf-nav, .sf-nav-bottom .sf-nav {
  55     width: 9999px;
  56     position: absolute;
  57 }
  58 .sf-nav-left {
  59     float: left;
  60     width: 20%;
  61     height: auto;
  62     overflow: hidden;
  63 }
  64 .sf-nav-right {
  65     float: right;
  66     width: 20%;
  67     height: auto;
  68 }
  69 .sf-nav-wrap.sf-nav-left li, .sf-nav-wrap.sf-nav-right li {
  70     float: none;
  71     margin-bottom: 10px;
  72 }
  73 .sf-nav li {
  74     float: left;
  75     position: relative;
  76     margin-right: 10px;
  77 }
  78 .sf-nav li.sf-nav-link {
  79     cursor: pointer;
  80 }
  81 .sf-nav-right li, .sf-nav-left li {
  82     padding-right: 10px;
  83 }
  84 .sf-nav-on-left {
  85     width: 80%;
  86     margin-left: 20%}
  87 .sf-nav-on-right {
  88     width: 80%;
  89     margin-right: 20%}
  90 .sf-nav-right li {
  91     margin-right: 0;
  92     margin-left: 10px;
  93 }
  94 .sf-step>fieldset {
  95     overflow: auto;
  96     overflow-x: hidden;
  97 }
  98 .sf-step-no-active {
  99     height: 1px;
 100 }
 101 .sf-step-no-active>fieldset {
 102     display: none;
 103 }
 104 li.sf-li-nonumber {
 105     text-align: center;
 106 }
 107 .sf-li-nonumber .sf-nav-number {
 108     display: none;
 109 }
 110 .sf-wizard .sf-btn, form .nocsript-sf-btn {
 111     padding: 0 35px;
 112 }
 113 .sf-wizard>form {
 114     box-sizing: border-box;
 115 }
 116 .sf-wizard>form.sf-hide-legend {
 117     padding-top: 30px;
 118 }
 119 .sf-controls input {
 120     margin: 0;
 121 }
 122 .sf-sea .sf-nav-bottom {
 123     margin-top: 10px;
 124     height: 60px;
 125 }
 126 .sf-sea .sf-nav-top {
 127     height: 83px;
 128 }
 129 .sf-sea .sf-nav-top li, .sf-sea .sf-nav-bottom li {
 130     -webkit-transition: margin 200ms;
 131     -moz-transition: margin 200ms;
 132     -ms-transition: margin 200ms;
 133     -o-transition: margin 200ms;
 134     transition: margin 200ms;
 135 }
 136 .sf-sea .sf-nav li {
 137     font-size: 16px;
 138     color: #FFF;
 139     background: #283d50;
 140     height: 60px;
 141     line-height: 60px;
 142     padding: 0 45px;
 143     border-radius: 3px;
 144     font-family: sans-serif;
 145 }
 146 .sf-sea .sf-nav-top .sf-nav li:last-child, .sf-sea .sf-nav-bottom .sf-nav li:last-child {
 147     margin-right: 0;
 148 }
 149 .sf-sea .sf-nav li.sf-active, .sf-sea .sf-nav li.sf-nav-link:hover {
 150     background: #14b5c8;
 151 }
 152 .sf-sea .sf-nav li.sf-nav-prev-step {
 153     background: #203140;
 154 }
 155 .sf-sea .sf-nav-top li.sf-active {
 156     margin-top: 6px;
 157 }
 158 .sf-sea .sf-nav-number {
 159     position: absolute;
 160     left: 12px;
 161     top: 0;
 162     font-size: 96px;
 163     font-weight: 700;
 164     overflow: hidden;
 165 }
 166 .sf-sea .sf-nav-number-inner {
 167     display: block;
 168 }
 169 .sf-sea .sf-li-number .sf-nav-subtext {
 170     padding-left: 35px;
 171 }
 172 .sf-sea .sf-nav-top .sf-nav-step.sf-active:after {
 173     content: "";
 174     width: 5px;
 175     height: 5px;
 176     background: transparent;
 177     -webkit-transform: rotate(45deg);
 178     -moz-transform: rotate(45deg);
 179     -o-transform: rotate(45deg);
 180     -ms-transform: rotate(45deg);
 181     position: absolute;
 182     bottom: -10px;
 183     left: 50%;
 184     margin-left: -12px;
 185     border: 12px solid black;
 186     border-color: transparent #14b5c8 #14b5c8 transparent;
 187     z-index: -1;
 188 }
 189 .sf-sea .sf-wizard .sf-btn, .sf-sea form .nocsript-sf-btn {
 190     height: 45px;
 191     line-height: 45px;
 192     padding: 0 25px;
 193     border-radius: 3px;
 194     border: 0;
 195     color: #FFF;
 196     text-decoration: none;
 197     background-color: #283d50;
 198 }
 199 .sf-sea .sf-wizard .sf-btn:hover, .sf-sea .nocsript-sf-btn:hover {
 200     background-color: #14b5c8;
 201 }
 202 .sf-sea .sf-wizard .sf-btn.sf-btn-next {
 203     background: url("http://ajoke.cz/wizard/img/t1-arr-right.png") no-repeat right 15px #283d50;
 204     padding-right: 50px;
 205 }
 206 .sf-sea .sf-wizard .sf-btn.sf-btn-prev {
 207     background: url("http://ajoke.cz/wizard/img/t1-arr-left.png") no-repeat left 15px #3d4750;
 208     padding-left: 50px;
 209 }
 210 .sf-sea .sf-wizard .sf-btn.sf-btn-next:hover {
 211     background-position: right -35px;
 212 }
 213 .sf-sea .sf-wizard .sf-btn.sf-btn-prev:hover {
 214     background-position: left -35px;
 215 }
 216 .sf-sea .sf-wizard>form {
 217     background: #f2f2f2;
 218     padding: 20px;
 219     border-radius: 3px;
 220 }
 221 .sf-sea .sf-step legend {
 222     padding-top: 5px;
 223 }
 224 .sf-sky .sf-nav-bottom {
 225     margin-top: 20px;
 226 }
 227 .sf-sky .sf-nav-top, .sf-sky .sf-nav-bottom {
 228     height: 80px;
 229 }
 230 .sf-sky .sf-nonumbers .sf-nav-top {
 231     height: 65px;
 232 }
 233 .sf-sky .sf-nonumbers .sf-nav-bottom {
 234     height: 42px;
 235 }
 236 .sf-sky .sf-nav {
 237     margin-bottom: 25px;
 238 }
 239 .sf-sky .sf-nav li {
 240     font-size: 14px;
 241     color: #adb3b8;
 242     background: #f2f2f2;
 243     height: 52px;
 244     line-height: 42px;
 245     padding: 0 40px;
 246     text-align: center;
 247     border-radius: 3px;
 248     font-family: sans-serif;
 249     margin-right: 30px;
 250     font-weight: 600;
 251 }
 252 .sf-sky .sf-nav li.sf-li-nonumber {
 253     height: 42px;
 254 }
 255 .sf-sky .sf-nav-left .sf-nav li.sf-li-nonumber, .sf-sky .sf-nav-right .sf-nav li.sf-li-nonumber {
 256     margin-bottom: 32px;
 257 }
 258 .sf-sky .sf-nav-top li.sf-li-nonumber:after, .sf-sky .sf-nav-bottom li.sf-li-nonumber:after {
 259     top: -8px;
 260 }
 261 .sf-sky .sf-nav-right li.sf-li-nonumber:after, .sf-sky .sf-nav-left li.sf-li-nonumber:after {
 262     bottom: -47px;
 263 }
 264 .sf-sky .sf-nav li:after {
 265     content: "";
 266     position: absolute;
 267     right: -30px;
 268     top: 0;
 269     background: url("http://ajoke.cz/wizard/img/t2-nav-arr.png") no-repeat center center transparent;
 270     width: 30px;
 271     height: 54px;
 272 }
 273 .sf-sky .sf-nav li:last-child:after {
 274     display: none;
 275 }
 276 .sf-sky .sf-nav-right li {
 277     margin-right: 0;
 278     margin-left: 30px;
 279 }
 280 .sf-sky .sf-nav-right li:after, .sf-sky .sf-nav-left li:after {
 281     background: url("http://ajoke.cz/wizard/img/t2-nav-arr-down.png") no-repeat center center transparent;
 282     left: 50%;
 283     top: auto;
 284     bottom: -55px;
 285     margin-left: -15px;
 286 }
 287 .sf-sky .sf-nav li.sf-active, .sf-sky .sf-nav li.sf-nav-link:hover {
 288     background: #283d50;
 289     color: #FFF;
 290 }
 291 .sf-sky .sf-nav li.sf-nav-prev-step {
 292     background: #283d50;
 293 }
 294 .sf-sky .sf-nav li.sf-nav-prev-step .sf-nav-number {
 295     background: #36b28c;
 296 }
 297 .sf-sky .sf-nav-top li.sf-active {
 298     margin-top: 0;
 299 }
 300 .sf-sky .sf-nav-wrap.sf-nav-left li, .sf-sky .sf-nav-wrap.sf-nav-right li {
 301     margin-bottom: 40px;
 302 }
 303 .sf-sky .sf-nav-number {
 304     position: absolute;
 305     left: 50%;
 306     bottom: -15px;
 307     margin-left: -15px;
 308     font-size: 14px;
 309     line-height: 24px;
 310     font-weight: 700;
 311     background: #c7c7c7;
 312     border-radius: 50px;
 313     border: 3px solid #FFF;
 314     width: 30px;
 315     height: 30px;
 316     text-align: center;
 317     color: #FFF;
 318 }
 319 .sf-sky .sf-nav li.sf-active .sf-nav-number {
 320     background: #f56b46;
 321 }
 322 .sf-sky .sf-li-number .sf-nav-subtext {
 323     padding-left: 0;
 324 }
 325 .sf-sky .sf-wizard .sf-btn, .sf-sky form .nocsript-sf-btn {
 326     height: 50px;
 327     line-height: 50px;
 328     padding: 0 30px;
 329     border-radius: 3px;
 330     border: 0;
 331     color: #FFF;
 332     text-decoration: none;
 333     background: #283d50;
 334     position: relative;
 335 }
 336 .sf-sky .sf-wizard .sf-btn:after {
 337     content: "";
 338     position: absolute;
 339     right: -15px;
 340     top: 10px;
 341     margin-left: -15px;
 342     font-size: 14px;
 343     line-height: 26px;
 344     font-weight: 700;
 345     background: url("http://ajoke.cz/wizard/img/t2-arr-right.png") no-repeat center center #f56b46;
 346     border-radius: 50px;
 347     border: 3px solid #FFF;
 348     width: 30px;
 349     height: 30px;
 350     text-align: center;
 351     color: #FFF;
 352 }
 353 .sf-sky .sf-wizard .sf-btn.sf-btn-next {
 354     padding-right: 35px;
 355     margin-right: 12px;
 356 }
 357 .sf-sky .sf-wizard .sf-btn.sf-btn-prev {
 358     padding-left: 35px;
 359     margin-left: 12px;
 360 }
 361 .sf-sky .sf-wizard .sf-btn.sf-btn-prev:after {
 362     right: auto;
 363     left: 0;
 364     background-image: url("http://ajoke.cz/wizard/img/t2-arr-left.png");
 365 }
 366 .sf-sky .sf-wizard .sf-btn.sf-btn-next:hover {
 367     background-position: right -35px;
 368 }
 369 .sf-sky .sf-wizard .sf-btn.sf-btn-prev:hover {
 370     background-position: left -35px;
 371 }
 372 .sf-sky .sf-wizard>form {
 373     background: transparent;
 374     padding: 15px;
 375     border-radius: 3px;
 376     border: 1px solid #e7e7e7;
 377 }
 378 .sf-simple .sf-nav-top, .sf-simple .sf-nav-bottom {
 379     height: 80px;
 380 }
 381 .sf-simple .sf-nonumbers .sf-nav-top, .sf-simple .sf-nonumbers .sf-nav-bottom {
 382     height: 50px;
 383 }
 384 .sf-simple .sf-nav-top {
 385     padding-bottom: 20px;
 386     border-bottom: 1px solid #dadada;
 387 }
 388 .sf-simple .sf-nav-bottom {
 389     margin-top: 20px;
 390 }
 391 .sf-simple .sf-nav {
 392     margin-bottom: 25px;
 393 }
 394 .sf-simple .sf-nav li {
 395     font-size: 13px;
 396     color: #929292;
 397     height: 60px;
 398     line-height: 40px;
 399     text-align: left;
 400     font-family: sans-serif;
 401     margin-right: 0;
 402     padding: 30px 40px 0 0;
 403     font-weight: 400;
 404 }
 405 .sf-simple .sf-nav li.sf-active, .sf-simple .sf-nav li.sf-nav-link:hover {
 406     color: #b21948;
 407 }
 408 .sf-simple .sf-nav-top li, .sf-simple .sf-nav-bottom li {
 409     background: url("http://ajoke.cz/wizard/img/t2-nav-bg.png") repeat-x left 15px transparent;
 410 }
 411 .sf-simple .sf-nav-top li:last-child, .sf-simple .sf-nav-bottom li:last-child {
 412     background: 0;
 413 }
 414 .sf-simple .sf-nav li.sf-li-nonumber {
 415     background: 0;
 416     height: 30px;
 417     padding-top: 0;
 418     line-height: 30px;
 419 }
 420 .sf-simple .sf-nav-top li.sf-active {
 421     margin-top: 0;
 422 }
 423 .sf-simple .sf-nav-wrap.sf-nav-left li, .sf-simple .sf-nav-wrap.sf-nav-right li {
 424     padding: 0 20px 0 40px;
 425     height: 30px;
 426     margin-bottom: 30px;
 427     line-height: 30px;
 428 }
 429 .sf-simple .sf-nav-wrap.sf-nav-right li {
 430     margin-left: 20px;
 431 }
 432 .sf-simple .sf-wizard .sf-nav-on-left {
 433     padding-left: 20px;
 434     border-left: 1px solid #dadada;
 435 }
 436 .sf-simple .sf-wizard .sf-nav-on-right {
 437     padding-right: 20px;
 438     border-right: 1px solid #dadada;
 439 }
 440 .sf-simple .sf-nav-right li.sf-li-nonumber, .sf-simple .sf-nav-left li.sf-li-nonumber {
 441     padding-left: 0;
 442     margin-bottom: 10px;
 443 }
 444 .sf-simple .sf-nav-number {
 445     background: #FFF;
 446     position: absolute;
 447     top: 0;
 448     left: 0;
 449     font-size: 14px;
 450     line-height: 30px;
 451     font-weight: 700;
 452     height: 30px;
 453     width: 30px;
 454     border: 1px solid #c1c1c1;
 455     text-align: center;
 456     color: #929292;
 457 }
 458 .sf-simple .sf-nav li.sf-active .sf-nav-number {
 459     background: #b21948;
 460     color: #FFF;
 461     border-color: #b21948;
 462 }
 463 .sf-simple .sf-nav li.sf-nav-prev-step .sf-nav-number {
 464     background: #b21948;
 465     color: #FFF;
 466     border-color: #b21948;
 467 }
 468 .sf-simple .sf-li-number .sf-nav-subtext {
 469     padding-left: 0;
 470 }
 471 .sf-simple .sf-wizard .sf-btn, .sf-simple form .nocsript-sf-btn {
 472     height: 40px;
 473     line-height: 40px;
 474     padding: 0 40px;
 475     border: 1px solid #c1c1c1;
 476     color: #929292;
 477     text-decoration: none;
 478     background: #FFF;
 479 }
 480 .sf-simple .sf-wizard .sf-btn:hover, .sf-simple .sf-wizard .sf-btn:hover {
 481     background: #b21948;
 482     color: #FFF;
 483     border-color: #b21948;
 484 }
 485 .sf-simple .sf-wizard>form {
 486     background: transparent;
 487     padding: 0;
 488     border: 0;
 489 }
 490 .sf-simple .sf-wizard .sf-nav-on-bottom {
 491     padding-bottom: 20px;
 492     border-bottom: 1px solid #dadada;
 493 }
 494 .sf-circle .sf-nav-bottom {
 495     margin-top: 23px;
 496     padding-top: 12px;
 497 }
 498 .sf-circle .sf-nav-top, .sf-circle .sf-nav-bottom {
 499     height: 150px;
 500 }
 501 .sf-circle .sf-nonumbers .sf-nav-top, .sf-circle .sf-nonumbers .sf-nav-bottom {
 502     height: 70px;
 503 }
 504 .sf-circle .sf-nonumbers .sf-nav-bottom {
 505     padding-top: 0;
 506 }
 507 .sf-circle .sf-nav-top {
 508     padding-bottom: 20px;
 509 }
 510 .sf-circle .sf-nav {
 511     margin-bottom: 25px;
 512     top: 12px;
 513 }
 514 .sf-circle .sf-nav li {
 515     font-size: 13px;
 516     color: #a3aab0;
 517     height: 60px;
 518     line-height: 40px;
 519     text-align: center;
 520     font-family: sans-serif;
 521     margin-right: 40px;
 522     padding: 75px 0 0 0;
 523     min-width: 95px;
 524     font-weight: 700;
 525 }
 526 .sf-circle .sf-nav li.sf-active, .sf-circle .sf-nav li.sf-nav-link:hover {
 527     color: #40464b;
 528 }
 529 .sf-circle .sf-nav-top li.sf-active {
 530     margin-top: 0;
 531 }
 532 .sf-circle .sf-nav-number {
 533     position: absolute;
 534     margin-left: -35px;
 535     top: 0;
 536     left: 50%;
 537     font-size: 30px;
 538     line-height: 66px;
 539     font-weight: 800;
 540     height: 70px;
 541     width: 70px;
 542     border-radius: 70px;
 543     border: 1px solid #cfcfcf;
 544     text-align: center;
 545     color: #929292;
 546 }
 547 .sf-circle .sf-nav-number:before {
 548     content: "";
 549     display: block;
 550     width: 90px;
 551     height: 90px;
 552     top: -11px;
 553     left: -11px;
 554     border-radius: 90px;
 555     position: absolute;
 556     background: #dedede;
 557     z-index: -3;
 558     box-shadow: 0 3px 4px #c6c5c4 inset;
 559 }
 560 .sf-circle .sf-nav .sf-nav-number:after {
 561     content: "";
 562     display: block;
 563     width: 135px;
 564     height: 15px;
 565     top: 27px;
 566     left: 75px;
 567     position: absolute;
 568     background: #dedede;
 569     z-index: -2;
 570 }
 571 .sf-circle .sf-nav li:last-child .sf-nav-number:after {
 572     display: none;
 573 }
 574 .sf-circle .sf-nav li.sf-active .sf-nav-number, .sf-circle .sf-nav li.sf-nav-prev-step .sf-nav-number {
 575     border-color: transparent;
 576 }
 577 .sf-circle .sf-nav li .sf-nav-number-inner {
 578     position: absolute;
 579     top: 9px;
 580     left: 9px;
 581     margin-left: auto;
 582     line-height: 50px;
 583     display: block;
 584     height: 50px;
 585     width: 50px;
 586     border-radius: 60px;
 587     color: #a3aab0;
 588 }
 589 .sf-circle .sf-nav li .sf-nav-number-inner:before {
 590     -webkit-transition: all 300ms;
 591     -moz-transition: all 300ms;
 592     -ms-transition: all 300ms;
 593     -o-transition: all 300ms;
 594     transition: all 300ms;
 595     content: "";
 596     background: #FFF;
 597     position: absolute;
 598     z-index: -1;
 599     margin-left: -25px;
 600     top: 0;
 601     left: 50%;
 602     height: 50px;
 603     width: 50px;
 604     border-radius: 70px;
 605     border: 1px solid #cfcfcf;
 606 }
 607 .sf-circle .sf-nav li .sf-nav-number-inner:after {
 608     -webkit-transition: all 300ms;
 609     -moz-transition: all 300ms;
 610     -ms-transition: all 300ms;
 611     -o-transition: all 300ms;
 612     transition: all 300ms;
 613     content: "";
 614     position: absolute;
 615     z-index: -1;
 616     top: -10px;
 617     left: 50%;
 618     margin-left: -35px;
 619     line-height: 50px;
 620     display: block;
 621     height: 70px;
 622     width: 70px;
 623     border-radius: 70px;
 624     background: #fff;
 625     background: -moz-linear-gradient(top, #fff 0, #fff 39%, #ebebeb 98%);
 626     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(39%, #fff), color-stop(98%, #ebebeb));
 627     background: -webkit-linear-gradient(top, #fff 0, #fff 39%, #ebebeb 98%);
 628     background: -o-linear-gradient(top, #fff 0, #fff 39%, #ebebeb 98%);
 629     background: -ms-linear-gradient(top, #fff 0, #fff 39%, #ebebeb 98%);
 630     background: linear-gradient(to bottom, #fff 0, #fff 39%, #ebebeb 98%);
 631     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ebebeb', GradientType=0);
 632 }
 633 .sf-circle .sf-nav li.sf-active .sf-nav-number-inner, .sf-circle .sf-nav li.sf-nav-prev-step .sf-nav-number-inner {
 634     color: #40464b;
 635 }
 636 .sf-circle .sf-nav li.sf-nav-prev-step .sf-nav-number-inner {
 637     color: #61676b;
 638 }
 639 .sf-circle .sf-nav li.sf-active .sf-nav-number-inner:before, .sf-circle .sf-nav li.sf-nav-prev-step .sf-nav-number-inner:before {
 640     content: "";
 641     background: #13d9b7;
 642     border: 1px solid #cfcfcf;
 643     box-shadow: 0 3px 4px #00b89b inset;
 644     margin-left: -37px;
 645     top: -12px;
 646     left: 50%;
 647     height: 74px;
 648     width: 74px;
 649 }
 650 .sf-circle .sf-nav li.sf-nav-prev-step .sf-nav-number-inner:before {
 651     background: #40d8b9;
 652     box-shadow: 0 3px 4px #04b497 inset;
 653 }
 654 .sf-circle .sf-nav li.sf-active .sf-nav-number-inner:after {
 655     background: #e1e1e1;
 656     color: #40464b;
 657     box-shadow: 0 3px 4px #dbf3ef inset;
 658     top: 0;
 659     left: 50%;
 660     margin-left: -25px;
 661     line-height: 50px;
 662     height: 50px;
 663     width: 50px;
 664 }
 665 .sf-circle .sf-nav li.sf-nav-prev-step .sf-nav-number-inner:after {
 666     top: 0;
 667     left: 50%;
 668     margin-left: -25px;
 669     line-height: 50px;
 670     height: 50px;
 671     width: 50px;
 672 }
 673 .sf-circle .sf-li-number .sf-nav-subtext {
 674     padding-left: 0;
 675 }
 676 .sf-circle .sf-nav-top li.sf-li-nonumber, .sf-circle .sf-nav-bottom li.sf-li-nonumber {
 677     height: 30px;
 678     padding: 0;
 679 }
 680 .sf-circle .sf-nav-right .sf-nav {
 681     margin-left: 20px;
 682 }
 683 .sf-circle .sf-nav-left li, .sf-circle .sf-nav-right li {
 684     height: 100px;
 685     padding-top: 25px;
 686     text-align: left;
 687     margin-bottom: 0;
 688 }
 689 .sf-circle .sf-nav-left li .sf-nav-subtext, .sf-circle .sf-nav-right li .sf-nav-subtext {
 690     padding-left: 117px;
 691 }
 692 .sf-circle .sf-nav-left li .sf-nav-number, .sf-circle .sf-nav-right li .sf-nav-number {
 693     left: 50px;
 694     top: 12px;
 695 }
 696 .sf-circle .sf-nav-left .sf-nav-number:after, .sf-circle .sf-nav-right .sf-nav-number:after {
 697     width: 15px;
 698     height: 60px;
 699     top: 70px;
 700     left: 27px;
 701     position: absolute;
 702     background: #dedede;
 703     z-index: -2;
 704 }
 705 .sf-circle .sf-nav-left li.sf-li-nonumber, .sf-circle .sf-nav-right li.sf-li-nonumber {
 706     height: 30px;
 707     line-height: 30px;
 708     padding: 0;
 709 }
 710 .sf-circle .sf-nav-left li.sf-li-nonumber .sf-nav-subtext, .sf-circle .sf-nav-right li.sf-li-nonumber .sf-nav-subtext {
 711     padding-left: 0;
 712 }
 713 .sf-circle .sf-wizard .sf-btn, .sf-circle form .nocsript-sf-btn {
 714     height: 40px;
 715     line-height: 40px;
 716     padding: 0 40px;
 717     border: 1px solid #c8c8c8;
 718     border-radius: 5px;
 719     color: #40464b;
 720     font-size: 13px;
 721     font-weight: 700;
 722     text-decoration: none;
 723     background: #ebebeb;
 724     background: -moz-linear-gradient(top, #ebebeb 0, #dadada 100%);
 725     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ebebeb), color-stop(100%, #dadada));
 726     background: -webkit-linear-gradient(top, #ebebeb 0, #dadada 100%);
 727     background: -o-linear-gradient(top, #ebebeb 0, #dadada 100%);
 728     background: -ms-linear-gradient(top, #ebebeb 0, #dadada 100%);
 729     background: linear-gradient(to bottom, #ebebeb 0, #dadada 100%);
 730     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#dadada', GradientType=0);
 731 }
 732 .sf-circle .sf-wizard .sf-btn:hover, .sf-circle .sf-wizard .sf-btn:hover {
 733     background: #efefef;
 734 }
 735 .sf-circle .sf-wizard>form {
 736     background: transparent;
 737     padding: 30px;
 738     border-radius: 5px;
 739     border: 1px solid #c7c6c5;
 740     box-shadow: 0 0 4px #d1cfcf inset, 0 0 0 10px #e4e4e4 inset;
 741 }
 742 .sf-circle .sf-wizard>form:before {
 743     content: "";
 744     display: block;
 745 }
 746 @media screen, projection {
 747     .sf-wizard *, .sf-wizard *:after, .sf-wizard *:before {
 748         -moz-box-sizing: border-box;
 749         -webkit-box-sizing: border-box;
 750         box-sizing: border-box;
 751     }
 752 }@media all and (max-width:1200px) {
 753     .sf-sea .sf-nav li {
 754         padding: 0 10px;
 755     }
 756     .sf-sea .sf-li-number .sf-nav-subtext {
 757         padding-left: 65px;
 758     }
 759     .sf-sky .sf-nav li {
 760         padding: 0 10px;
 761     }
 762     .sf-circle .sf-nav li {
 763         margin-right: 20px;
 764     }
 765 }@media all and (max-width:992px) {
 766     .sf-sea .sf-nav li {
 767         padding: 0 31px;
 768     }
 769     .sf-sea .sf-nav li>span {
 770         display: none;
 771     }
 772     .sf-sea .sf-nav-number {
 773         left: 4px;
 774     }
 775     .sf-sea .sf-nav li.sf-active:after {
 776         border: 0;
 777     }
 778     .sf-sea .sf-nav-top .sf-nav-step.sf-active:after {
 779         display: none;
 780     }
 781     .sf-sea .sf-wizard .sf-btn {
 782         padding: 0 10px;
 783     }
 784     .sf-sky .sf-nav li {
 785         padding: 0;
 786         width: 42px;
 787         height: 42px;
 788     }
 789     .sf-sky .sf-nav li .sf-nav-subtext {
 790         display: none;
 791     }
 792     .sf-sky .sf-nav-top .sf-li-number:after {
 793         height: 42px;
 794     }
 795     .sf-sky .sf-nav-left li {
 796         margin-right: 20px;
 797     }
 798     .sf-sky .sf-wizard .sf-btn {
 799         padding: 0 10px;
 800     }
 801     .sf-sky .sf-wizard .sf-btn.sf-btn-next {
 802         padding-right: 22px;
 803     }
 804     .sf-sky .sf-wizard .sf-btn.sf-btn-prev {
 805         padding-left: 22px;
 806     }
 807     .sf-simple .sf-nav-top, .sf-simple .sf-nav-bottom {
 808         height: 55px;
 809     }
 810     .sf-simple .sf-nav-left .sf-nav li {
 811         margin-right: 20px;
 812         padding: 0;
 813     }
 814     .sf-simple .sf-nav li {
 815         padding: 0 50px 0 0;
 816         width: 30px;
 817     }
 818     .sf-simple .sf-nav li .sf-nav-subtext {
 819         display: none;
 820     }
 821     .sf-simple .sf-nav-wrap.sf-nav-left li, .sf-simple .sf-nav-wrap.sf-nav-right li {
 822         margin-bottom: 10px;
 823     }
 824     .sf-simple .sf-nav-wrap.sf-nav-right li {
 825         padding: 0;
 826     }
 827     .sf-simple .sf-nav li.sf-li-nonumber .sf-nav-number {
 828         display: block;
 829     }
 830     .sf-simple .sf-wizard .sf-btn {
 831         padding: 0 10px;
 832     }
 833     .sf-circle .sf-nav-top, .sf-circle .sf-nav-bottom {
 834         height: 115px;
 835     }
 836     .sf-circle .sf-nav-right .sf-nav {
 837         margin-left: 0;
 838     }
 839     .sf-circle .sf-nav-left li.sf-li-nonumber, .sf-circle .sf-nav-right li.sf-li-nonumber {
 840         height: 90px;
 841     }
 842     .sf-circle .sf-nav-top .sf-nav-number:after, .sf-circle .sf-nav-bottom .sf-nav-number:after {
 843         width: 50px;
 844     }
 845     .sf-circle .sf-nonumbers li.sf-nav-step {
 846         height: 60px;
 847     }
 848     .sf-circle .sf-nav li span {
 849         display: none;
 850     }
 851     .sf-circle .sf-nav li.sf-active:after {
 852         border: 0;
 853     }
 854     .sf-circle .sf-nav-left li {
 855         margin-right: 5px;
 856     }
 857     .sf-circle .sf-nav-right li {
 858         margin-left: 5px;
 859         margin-right: 0;
 860     }
 861     .sf-circle .sf-nav-top .sf-nav-step.sf-active:after {
 862         display: none;
 863     }
 864     .sf-circle .sf-nav li.sf-li-nonumber .sf-nav-number {
 865         display: block;
 866     }
 867     .sf-circle .sf-nonumbers .sf-nav-top, .sf-circle .sf-nonumbers .sf-nav-bottom {
 868         height: 115px;
 869     }
 870     .sf-circle .sf-nonumbers .sf-nav-left li, .sf-circle .sf-nonumbers .sf-nav-right li {
 871         height: 100px;
 872     }
 873     .sf-circle .sf-wizard .sf-btn {
 874         padding: 0 10px;
 875     }
 876 }
 877 .hljs {
 878      display: block;
 879      padding: .5em;
 880      color: #333;
 881      background: #f8f8f8;
 882  }
 883 .hljs-comment, .hljs-template_comment, .diff .hljs-header, .hljs-javadoc {
 884     color: #998;
 885     font-style: italic;
 886 }
 887 .hljs-keyword, .css .rule .hljs-keyword, .hljs-winutils, .javascript .hljs-title, .nginx .hljs-title, .hljs-subst, .hljs-request, .hljs-status {
 888     color: #333;
 889     font-weight: bold;
 890 }
 891 .hljs-number, .hljs-hexcolor, .ruby .hljs-constant {
 892     color: #099;
 893 }
 894 .hljs-string, .hljs-tag .hljs-value, .hljs-phpdoc, .tex .hljs-formula {
 895     color: #d14;
 896 }
 897 .hljs-title, .hljs-id, .coffeescript .hljs-params, .scss .hljs-preprocessor {
 898     color: #900;
 899     font-weight: bold;
 900 }
 901 .javascript .hljs-title, .lisp .hljs-title, .clojure .hljs-title, .hljs-subst {
 902     font-weight: normal;
 903 }
 904 .hljs-class .hljs-title, .haskell .hljs-type, .vhdl .hljs-literal, .tex .hljs-command {
 905     color: #458;
 906     font-weight: bold;
 907 }
 908 .hljs-tag, .hljs-tag .hljs-title, .hljs-rules .hljs-property, .django .hljs-tag .hljs-keyword {
 909     color: #000080;
 910     font-weight: normal;
 911 }
 912 .hljs-attribute, .hljs-variable, .lisp .hljs-body {
 913     color: #008080;
 914 }
 915 .hljs-regexp {
 916     color: #009926;
 917 }
 918 .hljs-symbol, .ruby .hljs-symbol .hljs-string, .lisp .hljs-keyword, .tex .hljs-special, .hljs-prompt {
 919     color: #990073;
 920 }
 921 .hljs-built_in, .lisp .hljs-title, .clojure .hljs-built_in {
 922     color: #0086b3;
 923 }
 924 .hljs-preprocessor, .hljs-pragma, .hljs-pi, .hljs-doctype, .hljs-shebang, .hljs-cdata {
 925     color: #999;
 926     font-weight: bold;
 927 }
 928 .hljs-deletion {
 929     background: #fdd;
 930 }
 931 .hljs-addition {
 932     background: #dfd;
 933 }
 934 .diff .hljs-change {
 935     background: #0086b3;
 936 }
 937 .hljs-chunk {
 938     color: #aaa;
 939 }
 940 .mCustomScrollbar {
 941     -ms-touch-action: none;
 942     touch-action: none;
 943 }
 944 .mCustomScrollbar.mCS_no_scrollbar {
 945     -ms-touch-action: auto;
 946     touch-action: auto;
 947 }