.wizard,
.tabcontrol {display: block; width: 100%; overflow: hidden;}
.wizard a,
.tabcontrol a {outline: 0;}
.wizard ul,
.tabcontrol ul {list-style: none !important; padding: 0; margin: 0; display: flex; justify-content: space-between; padding-bottom: 1rem; margin-bottom: 1rem;}
.wizard ul > li,
.tabcontrol ul > li {display: block; padding: 0;}

/* Accessibility */
.wizard > .steps .current-info,
.tabcontrol > .steps .current-info {position: absolute; left: -999em;}
.wizard > .content > .title,
.tabcontrol > .content > .title {position: absolute; left: -999em;}

/* Wizard */
.wizard > .steps {position: relative; display: block; width: 100%;}
.wizard.vertical > .steps {display: inline; float: left; width: 30%;}
.wizard > .steps .number {font-size: 1.429em;}
.wizard > .steps > ul > li {width: auto;}
.wizard > .steps > ul > li,
.wizard > .actions > ul > li {float: left;}
.wizard.vertical > .steps > ul > li {float: none; width: 100%;}
.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active {display: block; position: relative; width: auto; text-decoration: none; min-width: 40px; text-align: center;}
.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover,
.wizard > .steps .disabled a:active {background: #eee; color: #aaa; cursor: default;}
.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active {cursor: default;}
.wizard > .steps .current a:after {content: ""; width: 40px; height: 4px; position: absolute; bottom: -16px; left: 0; display: block;}
.wizard > .steps .current a:before{content: ""; width: 0; height: 0; position: absolute; bottom: -23px; left: 15px; border-left: 5px solid transparent; border-right: 5px solid transparent; display: block;}
.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active {color: #ccc;}
.wizard > .steps .error a,
.wizard > .steps .error a:hover,
.wizard > .steps .error a:active {background: #ff3111; color: #fff;}
.wizard > .content {display: block; overflow: hidden; position: relative; width: auto; min-height: 10px;}
.wizard.vertical > .content {display: inline; float: left; margin: 0 2.5% 0.5em 2.5%; width: 65%;}
.wizard > .content > .body {float: left; position: absolute; width: 100%; height: auto;}
.wizard > .content > .body ul {list-style: disc !important;}
.wizard > .content > .body ul > li {display: list-item;}
.wizard > .content > .body > iframe {border: 0 none; width: 100%; height: 100%;}
.wizard > .content > .body input {display: block; border: 1px solid #ccc;}
.wizard > .content > .body input[type="checkbox"] {display: inline-block;}
.wizard > .content > .body input.error {background: rgb(251, 227, 228); border: 1px solid #fbc2c4; color: #8a1f11;}
.wizard > .content > .body label {display: inline-block; margin-bottom: 0.5em;}
.wizard > .content > .body label.error {color: #8a1f11; display: inline-block; margin-left: 1.5em;}
.wizard > .actions {position: relative; display: block; text-align: right; width: 100%;}
.wizard.vertical > .actions {display: inline; float: right; margin: 0 2.5%; width: 95%;}
.wizard > .actions > ul {display: inline-block; text-align: right;}
.wizard > .actions > ul > li {margin: 0 0.5em;}
.wizard.vertical > .actions > ul > li {margin: 0 0 0 1em;}
.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active {background: #999; color: #fff; display: block; padding: 0.5em 1em; text-decoration: none; border-radius: 5px;}
.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active {background: #eee; color: #aaa;}
.wizard > .loading {}
.wizard > .loading .spinner {}

/* Tabcontrol */
.tabcontrol > .steps {position: relative; display: block; width: 100%;}
.tabcontrol > .steps > ul {position: relative; margin: 6px 0 0 0; top: 1px; z-index: 1;}
.tabcontrol > .steps > ul > li {float: left; margin: 5px 2px 0 0; padding: 1px; border-top-left-radius: 5px; border-top-right-radius: 5px;}
.tabcontrol > .steps > ul > li:hover {background: #edecec; border: 1px solid #bbb; padding: 0;}
.tabcontrol > .steps > ul > li.current {background: #fff; border: 1px solid #bbb; border-bottom: 0 none; padding: 0 0 1px 0; margin-top: 0;}
.tabcontrol > .steps > ul > li > a {color: #5f5f5f; display: inline-block; border: 0 none; margin: 0; padding: 10px 30px; text-decoration: none;}
.tabcontrol > .steps > ul > li > a:hover {text-decoration: none;}
.tabcontrol > .steps > ul > li.current > a {padding: 15px 30px 10px 30px;}
.tabcontrol > .content {position: relative; display: inline-block; width: 100%; height: 35em; overflow: hidden; border-top: 1px solid #bbb; padding-top: 20px;}
.tabcontrol > .content > .body {float: left; position: absolute; width: 95%; height: 95%; padding: 2.5%;}
.tabcontrol > .content > .body ul {list-style: disc !important;}
.tabcontrol > .content > .body ul > li {display: list-item;}
