#wizard-overlay-close {
    /*position: fixed;*/
    /*top: 0;*/
    /*right: 5px;*/
    font-size: 15px;
    line-height: 15px;
    font-weight: bold;
    cursor: pointer;
    color: #000;
    text-decoration: none;
    float: right;
    margin: -3px 0 5px 5px;
}

#wizard-overlay-close:hover {
    color: #333;
}

#wizard-helper-text {
    position: fixed;
    padding:5px;
    border:1px solid #2c6ab2;
    background:#eee;
    /* css3 */
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    color: rgb( 102, 102, 102 );
    max-width: 300px;
}

#wizard-helper-text.nw {
    margin-left: 40px;
}

#wizard-helper-text.n:before,
#wizard-helper-text.nw:before,
#wizard-helper-text.w:before,
#wizard-helper-text.e:before,
#wizard-helper-text.s:before
{
    content:"";
    position:absolute;
    border-style:solid;
    border-color:#2c6ab2 transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}

#wizard-helper-text.n:before {
    bottom:-10px; /* value = - border-top-width - border-bottom-width */
    left:5px; /* controls horizontal position */
    border-width:10px 10px 0;
}

#wizard-helper-text.nw:before {
    bottom:-10px; /* value = - border-top-width - border-bottom-width */
    right:5px; /* controls horizontal position */
    border-width:10px 10px 0;
}

#wizard-helper-text.w:before {
    top: 3px;
    right: -10px;
    border-width:10px 0 10px 10px;
    border-color: transparent #2c6ab2;
}

#wizard-helper-text.e:before {
    top: 3px;
    left: -10px;
    border-width:10px 10px 10px 0;
    border-color: transparent #2c6ab2;
}

#wizard-helper-text.s:before {
    top: -10px;
    left: 3px;
    border-width:0 10px 10px;
}

/* creates the smaller  triangle */
#wizard-helper-text.n:after,
#wizard-helper-text.nw:after,
#wizard-helper-text.w:after,
#wizard-helper-text.e:after,
#wizard-helper-text.s:after {
    content:"";
    position:absolute;
    border-style:solid;
    border-color:#eee transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}

#wizard-helper-text.n:after {
    bottom:-9px; /* value = - border-top-width - border-bottom-width */
    left:6px; /* value = (:before left) + (:before border-left) - (:after border-left) */
    border-width:9px 9px 0;
}

#wizard-helper-text.nw:after {
    bottom:-9px; /* value = - border-top-width - border-bottom-width */
    right:6px; /* value = (:before left) + (:before border-left) - (:after border-left) */
    border-width:9px 9px 0;
}

#wizard-helper-text.w:after {
    top:4px; /* value = - border-top-width - border-bottom-width */
    right: -9px; /* value = (:before left) + (:before border-left) - (:after border-left) */
    border-width:9px 0 9px 9px;
    border-color:transparent #eee;
}

#wizard-helper-text.e:after {
    top:4px; /* value = - border-top-width - border-bottom-width */
    left: -9px; /* value = (:before left) + (:before border-left) - (:after border-left) */
    border-width:9px 9px 9px 0;
    border-color:transparent #eee;
}

#wizard-helper-text.s:after {
    left:4px; /* value = - border-top-width - border-bottom-width */
    top: -9px; /* value = (:before left) + (:before border-left) - (:after border-left) */
    border-width:0 9px 9px;
}

#wizard-helper-text .actions {
    margin-top: 3px;
    display: -webkit-flex;
    display: flex;
}

#wizard-helper-text .actions .steps {
    float: left;
    font-size: 80%;
    color: #999;
    -webkit-align-self: flex-end;
    align-self: flex-end;
    -webkit-flex: 1;
    flex: 1;
}

.helper-block {
    position: fixed;
    background: black;
    opacity: 0.4;
    /*transition: top,left,bottom,right,width,height .3s ease-out;*/
    padding: 0!important;
    margin: 0!important;
    border: none!important;
}

.helper-block.left, .helper-block.right {
    top: 0;
    height: 100%;
}

.helper-block.left {
    left: 0;
}

.helper-block.top {
    top: 0;
}
.helper-block.bottom {
    bottom: 0;
}

.helper-block.top:before, .helper-block.top:after, .helper-block.bottom:before, .helper-block.bottom:after {
    content: '';
    width: 5px;
    height: 5px;
    position: absolute;
}

.helper-block.top:before {
    bottom: -5px;
    left: 0;
    background: radial-gradient(10px at 5px 5px , transparent 0%, transparent 5px, #000 5px, #000 10px);
}

.helper-block.top:after {
    bottom: -5px;
    right: 0;
    background: radial-gradient(10px at 0px 5px , transparent 0%, transparent 5px, #000 5px, #000 10px);
}

.helper-block.bottom:before {
    top: -5px;
    left: 0;
    background: radial-gradient(10px at 5px 0px , transparent 0%, transparent 5px, #000 5px, #000 10px);
}

.helper-block.bottom:after {
    top: -5px;
    right: 0;
    background: radial-gradient(10px at 0px 0px , transparent 0%, transparent 5px, #000 5px, #000 10px);
}

.fake-element {
    position: fixed;
    background: transparent;
    padding: 0!important;
    margin: 0!important;
    border: none!important;
    cursor: pointer;
}

.wizard-full-height {
    height: 100%;
}

.wizard-canvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: all;
}