/* Styles gerais datatable*/
.cart-table {
    font-size: 0.72em;
    margin: 0 1em;
}

    .cart-table th.delete {
        width: 2%;
    }

    .cart-table th.products {
        text-align: left;
        border-right: solid 2px #fff;
    }

    .cart-table th.qtd {
        text-align: center;
        border-right: solid 2px #fff;
        width: 7%;
    }

    .cart-table th.price {
        text-align: center;
        width: 13%;
    }

    .cart-table td.image {
        width: 10%;
    }

        .cart-table td.image img {
            max-width: 85px;
            width: 100%;
        }

    .cart-table .qtd_table {
        width: 3em;
        margin: 0 auto;
    }

        .cart-table .qtd_table div {
            margin: 0 !important;
        }

        .cart-table .qtd_table .qtd_box {
            width: 100%;
            border: 0;
            text-align: center;
        }

        .cart-table .qtd_table .price_nr, .cart-table .price_nr {
            text-align: center;
        }

    .cart-table .empty_cart {
        border: 0 none;
    }

        .cart-table .empty_cart td {
            text-align: center;
            padding: 20px;
        }

    .cart-table .footer.bold {
        font-weight: bold;
    }

    .cart-table .footer.center {
        text-align: center;
    }
    .cart-table td {
        padding:0.8em 0
    }
.form_register input:disabled {
    background: #dddddd;
}


/* Styles da pesquisa */

table.cart-table thead th, table.cart-table tfoot th {
    font-family: "Julius Sans One",sans-serif;
    color: #1d327a;
    font-weight: 400;
    font-size: 1.2em;
    -webkit-font-smoothing: antialiased;
    border-bottom: none;
    padding: 0.55em 0.8em;
}

table.cart-table td {
    border-bottom: 1px solid #dddddd;
}

    table.cart-table td.footer {
        border: none;
    }


.qtd_bt {
    background-color: #dedede;
    border: medium none;
    color: #8e8e8e;
    display: block;
    font-weight: 800;
    padding: 0;
    width: 100%;
}

.price_title {
    color: #adadad;
}

.price {
    color: #88b410;
}

.btAddToCart {
    cursor: pointer;
}

div.multi-step.numbered ol > li .wrap a, div.multi-step.numbered ol > li .wrap a:hover, div.multi-step.numbered ol > li .wrap a:active {
    text-decoration: none;
}

/* gerais */
.buttons_padding {
    padding: 2em 3%;
}

.buttons {
    display: inline-block;
    float: right;
}

.login, .entrega, .pagamento, .conclusao {
    width: 100%;
}

    .login .nota {
        margin: 2em 1.5%;
        color: #67a6c6;
    }

.passos_colunas {
    margin: 0 3%;
}

    .passos_colunas .titulo {
        margin-bottom: 0.5em;
    }

    .passos_colunas .registo {
        margin: 1.33em 0;
    }

.login .erro {
    color: #d9383d;
    margin-top: 0;
    font-weight: bold;
}

.passos_colunas.margin {
    margin-top: 2em !important;
}
.passos_colunas.inner {
    margin: 0 2% ;
}

.entrega img, .pagamento img {
    vertical-align: middle;
    padding: 0 1em;
}

.pagamento .smalltxt {
    font-size: 0.7em;
    color: #8e8e8e;
    display: block;
    margin-bottom: 2em;
}

.conclusao .title {
    font-size:0.9em;
    color: #67a6c6;
}
.conclusao .info {
    font-size:0.9em;
    color:#828282
}
.passos_colunas .observacoes {
    font-size:0.8em

}

/*COLORS*/

div.multi-step ol > li.current .title { /* current title text color */
    color: #fff;
}

div.multi-step ol > li .title { /* title text color */
    color: #fff;
    font-family: 'Julius Sans One', sans-serif;
}


div.multi-step.numbered ol > li .wrap:before { /* step number, background, border and text color */
    color: #fff;
}


div.multi-step.color-1 ol > li,
div.multi-step.color-1 ol > li:before { /* default step background */
    background-image: url(../Images/checkout.png) !important;
}

    div.multi-step.color-1 ol > li.current,
    div.multi-step.color-1 ol > li.current:before { /* the active step */
        background-image: url(../Images/checkout_active.png) !important;
    }
/*MODERN*/
div.multi-step {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; /* without it, the box will be 20 pixels more than 100% wide */
    display: table;
    font-size: 1em;
    padding-right: 20px;
    width: 98%;
    position: relative;
    z-index: 10;
    margin-top: 1em;
}

    div.multi-step ol {
        display: table-row;
        margin: 0;
        padding: 0;
    }

        div.multi-step ol > li {
            background-position: 0 50%;
            background-repeat: no-repeat;
            display: table-cell; /* table cells have equal heights */
            list-style: none;
            margin: 0;
            padding: 0;
        }

            div.multi-step ol > li:before {
                background-position: 100% 50%;
                background-repeat: no-repeat;
                content: "";
                display: block;
                position: absolute;
                top: 0;
                bottom: 0;
                width: 22px;
                margin-left: -20px;
                z-index: -1;
            }

            div.multi-step ol > li.current p,
            div.multi-step ol > li.current .wrap,
            div.multi-step ol > li.current ~ li .wrap {
                opacity: 1;
                filter: alpha(opacity=100); /* this is for IE 8 */
            }

            div.multi-step ol > li .wrap {
                min-height: 20px; /* the number is abolutely positioned, so I need to save some space */
                padding: 8px 8px 8px 28px;
                opacity: 0.5;
                filter: alpha(opacity=50);
            }

            div.multi-step ol > li p {
                margin: 0;
            }

            div.multi-step ol > li .title {
                line-height: 1;
            }

            div.multi-step ol > li .subtitle {
                font-size: 0.8em;
                line-height: 1.2;
                margin-top: 0.4em;
            }


    div.multi-step.numbered ol {
        counter-reset: li; /* initialize the step number */
    }

        div.multi-step.numbered ol > li .wrap {
            padding-left: 58px;
            position: relative;
        }

            div.multi-step.numbered ol > li .wrap:before {
                content: counter(li); /* the step number is generated with CSS and placed in the :before pseudo-element */
                counter-increment: li;
                position: absolute;
                top: 4px;
                left: 22px;
                width: 24px;
                height: 24px;
                line-height: 22px;
                font-size: 0.8em;
                font-weight: normal;
                text-align: center;
            }


    /* specific widths are needed for each step (LI) since table-cell are only as wide as it's content needs by default
   you should not really need less than three or more than five steps!
   the left percentages are for the arrows */
    div.multi-step.three-steps ol > li {
        width: 34%;
    }

        div.multi-step.three-steps ol > li:first-child {
            width: 33%;
        }

        div.multi-step.three-steps ol > li:before {
            left: 33.6%;
        }

        div.multi-step.three-steps ol > li + li:before {
            left: 66.6%;
        }

        div.multi-step.three-steps ol > li + li + li:before {
            left: 100%;
        }

    div.multi-step.four-steps ol > li {
        width: 25%;
    }

        div.multi-step.four-steps ol > li:before {
            left: 26%;
        }

        div.multi-step.four-steps ol > li + li:before {
            left: 50.4%;
        }

        div.multi-step.four-steps ol > li + li + li:before {
            left: 74.8%;
        }

        div.multi-step.four-steps ol > li + li + li + li:before {
            left: 100%;
        }

    div.multi-step.five-steps ol > li {
        width: 20%;
    }

        div.multi-step.five-steps ol > li:before {
            left: 21%;
        }

        div.multi-step.five-steps ol > li + li:before {
            left: 40.6%;
        }

        div.multi-step.five-steps ol > li + li + li:before {
            left: 60%;
        }

        div.multi-step.five-steps ol > li + li + li + li:before {
            left: 79.6%;
        }

        div.multi-step.five-steps ol > li + li + li + li + li:before {
            left: 100%;
        }


/* IE 8 fixes */
@media \0screen {
    div.multi-step ol > li .wrap:before {
        border-width: 0;
        top: 6px;
    }
}
/*RESPONSIVE*/
@media only screen and (max-width: 320px) {
    /* Don't mess with the page width please! */
    div.multi-step {
        overflow: hidden;
    }

        /* Move the background, try to use all the available space */
        div.multi-step ol > li {
            background-position: -8px 50%;
        }

            /* Decrease the font size */
            div.multi-step ol > li p {
                font-size: .8em;
            }

            /* Loose the bolds, might get save some space, to keep the contents inside the “box” */
            div.multi-step ol > li .title {
                font-weight: normal;
                word-break: break-all;
                -webkit-hyphens: auto;
                -moz-hyphens: auto;
                -ms-hyphens: auto;
                hyphens: auto;
            }

            /* No room for subtitles! */
            div.multi-step ol > li .subtitle {
                display: none;
            }

            /* Make the steps more compact, try to keep the layout from falling apart! */
            div.multi-step ol > li .wrap {
                max-width: 100%;
                min-height: 1px;
                padding: 8px 0 8px 18px;
                overflow: hidden;
            }

        /* If we have numbers, loose the titles too! */
        div.multi-step.numbered ol > li .title {
            display: none;
        }

        /* Make the steps more compact */
        div.multi-step.numbered ol > li .wrap {
            padding: 2px 2px 2px 18px;
        }

            /* The number changes in style and shape */
            div.multi-step.numbered ol > li .wrap:before {
                position: static;
                top: auto;
                left: auto;
                background: transparent;
                border: 0;
                border-radius: 0;
                width: auto;
                height: auto;
                color: #fff;
                font-size: 1.2em;
                line-height: 1;
            }

        /* This is the active color of the title, from colors.css */
        div.multi-step.numbered ol > li.current .wrap:before {
            color: #fff;
        }

        /* Fine tune the arrows and the gaps between the steps, again */
        div.multi-step.three-steps ol > li:before {
            left: 32.2%;
        }

        div.multi-step.three-steps ol > li + li:before {
            left: 64.2%;
        }

        div.multi-step.three-steps ol > li + li + li:before {
            left: 98%;
        }

        div.multi-step.four-steps ol > li:before {
            left: 25.8%;
        }

        div.multi-step.four-steps ol > li + li:before {
            left: 49.4%;
        }

        div.multi-step.four-steps ol > li + li + li:before {
            left: 72.4%;
        }

        div.multi-step.four-steps ol > li + li + li + li:before {
            left: 98%;
        }

        div.multi-step.five-steps ol > li:before {
            left: 20.6%;
        }

        div.multi-step.five-steps ol > li + li:before {
            left: 39.4%;
        }

        div.multi-step.five-steps ol > li + li + li:before {
            left: 58.2%;
        }

        div.multi-step.five-steps ol > li + li + li + li:before {
            left: 77%;
        }

        div.multi-step.five-steps ol > li + li + li + li + li:before {
            left: 98%;
        }
}


@media only screen and (min-width: 321px) and (max-width: 640px) {
    div.multi-step {
        overflow: hidden;
    }

        /* And another decrease in font size */
        div.multi-step ol > li p {
            font-size: .8em;
        }

        /* Loose the bolds, might get save some space, to keep the contents inside the “box” */
        div.multi-step ol > li .title {
            font-weight: normal;
            word-break: break-all;
            -webkit-hyphens: auto;
            -moz-hyphens: auto;
            -ms-hyphens: auto;
            hyphens: auto;
        }

        /* No room for subtitles! */
        div.multi-step ol > li .subtitle {
            display: none;
        }

        /* Make the steps more compact, try to keep the layout from falling apart! */
        div.multi-step ol > li .wrap {
            min-height: 1px;
        }

        /* Five steps, with text, in less than 480 pixels, cannot really work, but please try to keep it -kind of- nice! */
        div.multi-step.five-steps ol > li .title {
            max-height: 4em;
        }

        /* If we have numbers, loose the titles too! */
        div.multi-step.numbered ol > li .title {
            display: none;
        }

        /* Make the steps more compact */
        div.multi-step.numbered ol > li .wrap {
            max-width: auto;
            padding: 4px 4px 4px 32px;
        }

            /* The number changes in style and shape */
            div.multi-step.numbered ol > li .wrap:before {
                position: static;
                top: auto;
                left: auto;
                background: transparent;
                border: 0;
                border-radius: 0;
                width: auto;
                height: auto;
                color: #ffffff;
                font-size: 1.2em;
                line-height: 1;
            }

        /* This is the active color of the title, from colors.css */
        div.multi-step.numbered ol > li.current .wrap:before {
            color: #fff;
        }

        /* Fine tune the arrows and the gaps between the steps, again */
        div.multi-step.three-steps ol > li:before {
            left: 34.4%;
        }

        div.multi-step.three-steps ol > li + li:before {
            left: 66.8%;
        }

        div.multi-step.three-steps ol > li + li + li:before {
            left: 98%;
        }

        div.multi-step.four-steps ol > li:before {
            left: 27%;
        }

        div.multi-step.four-steps ol > li + li:before {
            left: 51%;
        }

        div.multi-step.four-steps ol > li + li + li:before {
            left: 74.8%;
        }

        div.multi-step.four-steps ol > li + li + li + li:before {
            left: 98%;
        }

        div.multi-step.five-steps ol > li:before {
            left: 22.8%;
        }

        div.multi-step.five-steps ol > li + li:before {
            left: 41.6%;
        }

        div.multi-step.five-steps ol > li + li + li:before {
            left: 60.6%;
        }

        div.multi-step.five-steps ol > li + li + li + li:before {
            left: 79.6%;
        }

        div.multi-step.five-steps ol > li + li + li + li + li:before {
            left: 98%;
        }
}