.wizard {

    .content {
        @extend .margin-0;
        min-height: 245px;        
        overflow-y: auto;        
        border-radius: 0; 

        .body {
            padding: 15px;

            label.error{
                @extend .margin-0;
                font-size: 12px;
                color: $color-danger;
            }

            input[type="checkbox"]{
                display: none;
            }
        }
    }

    .actions {
        position: relative;
        @extend .displayblock;
        @extend .align-right;
        width: 100%;            
        margin-top: 10px !important;      

        ul{
            @extend .inlineblock;
            > li{
                float: left;
                margin: 0 !important;
            }
        }

        a {
            color: $col-white;
            @extend .displayblock;
            text-decoration: none;
            @extend .m-l-5;

            &:hover, &:active {
                color: $col-white;
                @extend .displayblock;                    
                text-decoration: none;                    
            }
        }

        .disabled a {
            background: $grey-200;
            color: #aaa;

            &:hover, &:active {
                background: $grey-200;
                color: #aaa;
            }
        }
    }

    .steps {

        position: relative;
        @extend .displayblock;
        width: 100%;
        margin-bottom: 2px;

        a {
            @extend .displayblock;
            width: auto;
            margin: 0 2px 0 0;
            padding: 10px;
            text-decoration: none;
            border-radius: 0;

            &:hover, &:active {
                @extend .displayblock;                
                width: auto;
                margin: 0 2px 0 0;
                padding: 10px;
                text-decoration: none;
                border-radius: 0;
            }
        }

        .number{
            font-size: 15px;
        }

        .disabled a {
            background: $grey-200;
            color: $grey-400;
            cursor: default;

            &:hover, &:active {
                background: $grey-200;
                color: $grey-400;
                cursor: default;
            }
        }

        .current a {
            color: $col-white;
            cursor: default;

            &:hover, &:active {
                color: $col-white;
                cursor: default;
            }
        }

        .done a {
            color: $col-white;
            opacity: 0.7;

            &:hover, &:active {
                color: $col-white;
                opacity: 0.7;
            }
        }

        > ul > li {
            width: 25%;
            float: left;
            &:last-child{
                a{
                    margin: 0;
                }
            }
        }
        
    }

    &.vertical {
        > .steps {
            float: left;
            width: 30%;
            @extend .p-r-5;

            > ul > li {
                float: none;
                width: 100%;

                a{
                    margin: 0 0 2px 0;
                }
            }
        }

        > .content {
            float: left;            
            width: 70%;
            margin: 0;
        }

        > .actions {
            float: right;
            width: 100%;
            margin: 0;
        }        
    }
}

.wizard_validation{
    .wizard .steps>ul>li{
        width: auto !important;
    }
}

@include max-screen($break-small - 1px){
    .wizard {
        > .steps{
            > ul > li{
                width: 100%;
                margin-bottom: 2px;
            }
            a{
                margin: 0;
            }
        }
        &.wizard.vertical{
            >.content, >.steps{
                width: 100%;
                padding: 0;
                
            }
        }
    } 
    .wizard_validation .wizard .steps>ul>li{
        width: 100% !important;
    }  
}