#bookform {
    padding: 12px;
}

.wizard > .steps
{
    position: relative;
    display: block;
    width: 100%;
}

.wizard > .steps .number
{
    font-size: 1em;
}

.wizard > .steps > ul > li
{
    width: 20%;
}

.wizard > .steps > ul > li
{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding-bottom: 10px;
    white-space: normal;
    position: relative;
    color: silver;
    border-bottom: 4px solid silver;
}

.wizard > .actions > ul > li
{
    float:left;
}

.wizard > .steps > ul > li > a,
.wizard > .steps > ul > li > a:hover,
.wizard > .steps > ul > li > a:active
{

}

.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover,
.wizard > .steps .disabled a:active
{
    background: #FFFFFF;
    color: #aaa;
    cursor: default;
}

.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active
{
    /*background: var(--main-color); /*#2184be;*/
    color: #000;
    cursor: default;
}

.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active
{
    background: white;
    color: #aaa;
}

/* bottom buttons */

.wizard > .actions
{
    position: relative;
    display: block;
    text-align: right;
    width: 100%;
}

.wizard > .actions > ul
{
    display: inline-block;
    text-align: right;
}

.wizard > .actions > ul > li
{
    margin: 0 0.5em;
}

.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active
{
    background: var(--main-color); /*#2184be;*/
    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 ul
{
    display: table;
    list-style: none;
    margin: 0 auto 20px auto;
    padding: 0;
    table-layout: fixed;
    width: 100%;
}

.wizard > .content > .title
{
    position: absolute;
    left: -999em;
}

.wizard > .content > .body
{
    /*float: left;*/
    /*!*position: absolute;*!*/
    /*width: 95%;*/
    /*height: 95%;*/
    padding: 2.5%;
}

.wizard > .steps > ul > li::before{
    content: "";
    position: absolute;
    bottom: -11px;
    left: 50%;
    margin-left: -7.5px;

    background-color: white;
    height: 15px;
    width: 15px;
    line-height: 15px;
    border: 2px solid silver;
    border-radius: 15px;
}
.wizard > .steps > ul > li.current::before{
    content: "";
    color: var(--main-color);
    border-color: var(--main-color);
}

.wizard > .steps > ul > li.done::before{
    background-color: var(--main-color);
    border-color: var(--main-color);
    content: "\2713"; /* check mark */
    color: white;
}

/*

In the future, if we need the x that matches the check mark used,
the css code for the symbol is \2717

*/

.wizard > .steps .current,
.wizard > .steps .done
{
    border-color: var(--main-color);/*#2184be;*/;
}

.btn-tall
{
    height: 4em;
    width: 6em;
}