.order-order, .order-confirm {
    #block-infos {
        margin-top: 50px;
    }
}

.order-order #main {
    #app-order-order {
        display: block ;

        .wrapper {
            display: none;
        }
        &.loaded .wrapper {
            display: block ;
        }

        h3 {
            font-family: "worksans_bold" ;
        }
        
        #distribution-date, #order-distribution-date {
            display: none ;
        }

        .alert-edit-order {
            strong {
                //font-weight: bold;
            }
        }
        
        .slide-enter-active {
            transition: all .2s ease;
        }
        
        .slide-leave-active {
            transition: all 0s ease;
        }
        .slide-enter, .slide-leave-to {
            transform: translateX(10px);
            opacity: 0;
        }
        
        #steps {
            margin-bottom: 20px ;
            ul {
                height: 70px ;
                list-style-type: none;
                padding: 0px;
                margin-bottom: 40px;
                
                li {
                    text-align: center ;
                    padding-right: 8px ;
                    padding-left: 8px ;
                    position: relative ;
                    
                    .info-step {
                        position: absolute ;
                        top: 45px ;
                        left: 0px ;
                        width: 100% ;
                        text-transform: normal ;
                        color: $color-primary ;
                        font-size: 17px ;
                        font-weight: bold ;
                    }
                    
                    .glyphicon-chevron-right, 
                    &.active .glyphicon-chevron-right {
                        float: right ;
                        color: gray ;
                        position: relative ;
                        top: 10px ;
                    }

                    &.first {
                        padding-left: 0px ;
                    }
                    
                    &#step-payment {
                        padding-right: 0px ;
                    }
                    
                    &#step-products .btn::after,
                    &.first .btn::before {
                        display: none ;
                    }
                    
                    .btn {
                        color: black;
                        background-color: $color-gray;
                        text-transform: uppercase ;
                        display: block ;
                        width: 100% ;
                        position: relative ;
                        @include border-radius(0px) ;
                        border: 0px none ;
                        text-transform: uppercase ;
                        
                        .button-content {
                            position: relative;
                            left: 8px ;
                        }
                        
                        &::after, &::before {
                            content: '' ;
                            position: absolute ;
                            top: 1px;
                        }
                        
                        &::after {
                            right: -34px ;
                            border:17px solid transparent;
                            border-left:17px solid $color-gray;
                            background-color: transparent ;
                        }
                        
                        &::before {
                            left: 0px ;
                            border:17px solid transparent;
                            border-left:17px solid white;
                            background-color: transparent ;
                        }
                    }
                    
                    .btn-primary {
                        color: white ;
                    }
                }
            }
        }
        
        #legend {
            #order-date-color, 
            #distribution-date-color,
            #leave-period-date-color {
                width: 13px ;
                height: 13px ;
                display: inline-block ;
            }
            
            #order-date-color {
                background-color: #198754 ;
                border: solid 2px #198754;
            }
            #distribution-date-color {
                background-color: white;
                border: solid 2px #198754;
            }
            #leave-period-date-color {
                background-color: #E09F3E;
                border: solid 2px #E09F3E;
            }
        }
        
        #calendar {
            margin-bottom: 15px ;
            .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title[data-v-2083cb72] {
                font-size: 2rem ;
            } 
            .c-day-background {
                padding: 20px ;
            }
            
            .c-day:hover {
                .c-day-background {
                    background-color: $color-primary !important ;
                    color: white !important ;
                }
            }
            
            .c-day-popover-content {
                font-size: 1.3rem ;
            }
        }

        #credit-online-payment {
            .panel {
                .panel-heading {
                    .btn-default {
                        float: right;
                        position: relative;
                        top: -5px;
                    }
                }
            }
        }

        #content-step-date {
            #distributions-list {
                .card {
                    margin-bottom: 20px;

                    .btn-primary {
                        float: right ;
                    }

                    .date {
                        font-size: 1.2rem ;
                        line-height: 1.4rem;
                        text-transform: uppercase;
                        font-family: 'worksans_semibold';
                    }

                    .point-sales {
                        color: gray ;
                        font-size: 14px ;
                        margin-top: 8px ;
                    }
                }
            }
        }
        
        .block-actions {
            text-align: center ;
            margin-top: 40px ;
        }
     
        table#points-sale {
            td.name {
                .the-name {
                    color: black ;
                    font-size: 1.2em ;
                    line-height: 1.4em ;
                    font-family: 'worksans_semibold';
                }

                .locality {
                    display: none;
                }

                .comment,
                .minimum-order-amount {
                    color: gray;

                    a {
                        color: $color-primary;
                    }
                }
            }
            
            td.actions {
                width: 150px ;
                button {
                    width: 100% ;
                }
            }
            
            tr.selected {
                td {
                    //background-color: white ;
                }            
            }
        }
        
        table#products {
            margin-bottom: 40px;
            border-top: solid 1px $color-gray-dark;
            border-left: solid 1px $color-gray-dark;
            border-right: solid 1px $color-gray-dark;

            thead {
                display: none;
            }

            td {
                border-bottom: solid 1px $color-gray-dark;
                border-left: 0px none;
                border-right: 0px none;
            }

            tr.category-closed:hover,
            tr.category-open {
                td.category-name {
                    padding-left: 30px;
                    background-color: $color-gray-light;
                }
            }


            td.category-name {
                transition: all 0.1s linear;
                background-color: $color-gray-light;
                border-left: solid 5px $color-gray-dark;
                font-family: "worksans_bold" ;
                font-size: 22px ;
                line-height: 30px;
                text-transform: uppercase;
                padding-top: 13px ;
                padding-left: 20px;

                .bi-caret-down-fill,
                .bi-caret-right-fill {
                    font-size: 15px ;
                }

                span.badge {
                    font-family: 'worksans_bold' ;
                    text-transform: uppercase ;
                    margin-left: 5px ;
                    font-size: 0.85rem;
                    position: relative;
                    top: -3px;

                    &.bg-primary {
                        float: right;
                        top: 2px;
                    }
                }

                &:hover {
                    cursor: pointer ;
                    background-color: white;
                }
            }

            td.photo {
                img {
                    width: 75px ;
                }
            }
            
            td.name {

            }

            .price-unit {
                .decreasing-prices {
                    margin-top: 10px;
                    font-size: 10px;
                    padding-top: 6px;
                    padding-bottom: 2px;
                    margin-bottom: 0px;

                    ul {
                        li {
                            margin-bottom: 5px;
                            strong {
                                font-weight: bold;
                            }
                        }
                    }
                }
            }

            .price-unit, .price-total {
                width: 135px ;
                text-align: center ;
                
                .price-infos {
                    color: gray ;
                    font-size: 13px ;
                    line-height: 15px;
                }
            }

            tr.product-open td.price-total {
                font-size: 1.1rem ;
                font-family: 'worksans_bold';
                padding-top: 19px;
            }

            .td-quantity {
                width: 175px ;

                input.quantity,
                .input-group-text {
                    background-color: white;
                }

                input.quantity {
                    text-align: center ;
                    border: 0px none;
                }
                .input-group-text {
                    border: 0px none;
                    padding-right: 10px ;
                    padding-left: 0px;
                    margin: 0px ;
                }

                .input-group-btn {
                    button {
                        padding: 4px 5px 0px 5px;
                        .bi {
                            font-size: 1.5em;
                            font-weight: bold;
                            margin: 0px;
                        }
                    }
                }
            }
            
            tr.total {

                .summary {
                    padding: 25px;

                    h3 {
                        font-family: 'worksans_bold';
                        margin-top: 0px ;
                        text-transform: uppercase ;
                        margin-bottom: 5px ;
                    }

                    ul {
                        margin-bottom: 15px ;
                        padding-left: 20px ;
                        font-size: 1.1rem ;
                        line-height: 1.4rem;
                        list-style-type: disc;

                        li {
                            .quantity {
                                font-weight: bold;
                            }

                        }
                    }
                }
                .price-total {
                    padding-top: 25px;
                    font-size: 1.5rem ;
                    font-family: 'worksans_bold';

                    span {
                        display: inline-block;
                        padding: 7px 15px;
                        @include border-radius(15px);
                        color: white;
                        font-size: 1.2rem;
                    }
                }
            }
        }

        #payment-methods {
            .infos {
                margin-top: 10px;
                color: gray;
            }
        }
        
        #content-step-payment {
            .delivery {
                margin-bottom: 20px ;
            }

            .comment {
                margin-bottom: 20px ;
            }

            #payment-methods {
                margin-bottom: 20px ;
            }

            .credit {
                .info {
                    margin-left: 20px ;
                    color: gray ;
                }
            }
        }


    }
}

#main #content {
    .panel {
        h3 {
            font-family: "worksans_bold" ;
            margin: 0px ;
            padding-top: 10px ;
            padding-bottom: 4px ;
            font-size: 20px ;
        }
    }
}