/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 13 févr. 2017, 09:40:56
    Author     : httpcs-72
*/

/* Multistep */
/* See below for SASS (allows you easily set dot radius and progress bar thickness and adjusts everything else! */
.multistep .multistep-step {
    padding: 0;
    position: relative;
    margin-bottom: 10px;
}

    .multistep .multistep-step .multistep-stepname {
        margin-bottom: 16px;
        color: #595959;
        font-size: 1.6rem;
        white-space: nowrap;
    }

    .multistep .multistep-step .multistep-dot {
        position: absolute;
        right: 50%;
        left: 50%;
        width: 32px;
        height: 32px;
        display: block;
        margin-top: -16px;
        margin-left: -15.5px;
        border-radius: 50%;
        background: #f5f5f5;
        /* Inner Dot */
    }

        .multistep .multistep-step .multistep-dot:after {
            content: ' ';
            border-radius: 50px;
            position: absolute;
            top: 8px;
            bottom: 8px;
            left: 8px;
            right: 8px;
            background: #e0e0e0;
        }

    .multistep .multistep-step .progress {
        position: absolute;
        width: 100%;
        height: 10.56px;
        margin-top: -5.28px;
        box-shadow: none;
        border-radius: 0;
    }

        .multistep .multistep-step .progress .progress-bar {
            width: 0px;
            box-shadow: none;
            background: #47b4f6;
        }

    .multistep .multistep-step:first-child > .progress {
        left: 50%;
        width: 50%;
    }

    .multistep .multistep-step:last-child > .progress {
        width: 50%;
    }

    .multistep .multistep-step.complete .multistep-dot {
        background: #47b4f6;
    }

        .multistep .multistep-step.complete .multistep-dot:after {
            background: url("../icons/small/valid.svg") center center no-repeat;
        }

    .multistep .multistep-step.complete .progress > .progress-bar {
        width: 100%;
    }

    .multistep .multistep-step.next:hover .multistep-dot {
        background: #267ae9;
    }

        .multistep .multistep-step.next:hover .multistep-dot:after {
            background: #FBB81C;
        }

    .multistep .multistep-step.current .multistep-dot {
        background: #47b4f6;
    }

        .multistep .multistep-step.current .multistep-dot:after {
            background: #ffffff;
        }

    .multistep .multistep-step.current .progress > .progress-bar {
        width: 50%;
    }

    .multistep .multistep-step.current:first-child > .progress > .progress-bar {
        width: 0%;
    }

    .multistep .multistep-step.current:last-child > .progress > .progress-bar {
        width: 100%;
    }

    .multistep .multistep-step a.multistep-dot {
        pointer-events: none;
    }

    .multistep .multistep-step.next a.multistep-dot {
        pointer-events: all;
    }
    .multistep .multistep-step.previous a.multistep-dot {
        pointer-events: all;
    }
    
@media only screen and (max-width : 480px){
    .container.shop-cart{
        width: 100% !important;
    }
}
/* SASS
$inactiveColor: #f5f5f5;
$inactiveDotColor: #e0e0e0;
$activeColor: #fbe8aa;
$activeDotColor: #fbbd19;
$stepNameColor: #595959;
$dotRadius: 16px;
$barThickness: $dotRadius * .66;
$stepNameSize: 1.6rem;

.multistep {
    .multistep-step {
        padding: 0;
        position: relative;
        margin-bottom: 10px;

        .multistep-stepname {
            margin-bottom: $dotRadius;
            color: $stepNameColor;
            font-size: $stepNameSize;
            white-space: nowrap;
        }

        .multistep-dot {
            position: absolute;
            right: 50%;
            left: 50%;
            width: $dotRadius * 2;
            height: $dotRadius * 2;
            display: block;
            margin-top: -$dotRadius;
            margin-left: -$dotRadius + .5;
            border-radius: 50%;
            background: $inactiveColor;
            &:after {
                content: ' ';
                border-radius: 50px;
                position: absolute;
                top: $dotRadius / 2;
                bottom: $dotRadius / 2;
                left: $dotRadius / 2;
                right: $dotRadius / 2;
                background: $inactiveDotColor;
            }
        }

        .progress {
            position: absolute;
            width: 100%;
            height: $barThickness;
            margin-top: -$barThickness / 2;
            box-shadow: none;
            border-radius: 0;

            .progress-bar {
                width: 0px;
                box-shadow: none;
                background: $activeColor;
            }
        }

        &:first-child > .progress {
            left: 50%;
            width: 50%;
        }

        &:last-child > .progress {
            width: 50%;
        }

        &.complete {
            .multistep-dot {
                background: $activeColor;

                &:after {
                    background: $activeDotColor;
                }
            }

            .progress > .progress-bar {
                width: 100%;
            }
        }

        &.next:hover {
            .multistep-dot {
                background: $activeColor;
            }

            .multistep-dot:after {
                background: $activeDotColor;
            }
        }

        &.current {
            .multistep-dot {
                background: $activeColor;

                &:after {
                    background: $activeDotColor;
                }
            }

            .progress > .progress-bar {
                width: 50%;
            }

            &:first-child > .progress > .progress-bar {
                width: 0%;
            }

            &:last-child > .progress > .progress-bar {
                width: 100%;
            }
        }

        a.multistep-dot {
            pointer-events: none;
        }

        &.next a.multistep-dot {
            pointer-events: all;
        }
    }
}
*/