@import 'new_demo/fonts.css';

.koszyk {

    background: #fff;

    padding:15px 0;
}


.koszyk .tabel-product
{
    margin-top:15px;

}
.koszyk .wrapper {
    background: #fff;
    /*    padding-left: 40px;
        padding-right: 40px;*/
    max-width:100%;
}
.koszyk .wrapper.container
{
    max-width:100%;
}
.koszyk .top ul {
    background-color: #f2f2f2;
    list-style: none;
    padding: 0;
}
.koszyk .top ul li {
    color: #9d9d9d;
    display: inline-block;
    padding: 12px 0;
    padding-left: 35px;
    position: relative;
    width: 24%;
    font-size: 15px;
}


.koszyk .top ul li::after, .koszyk .top ul li::after {
    display: inline-block;
    content: '\00bb';
    margin: 0 .6em;
    color: #959fa5;
}
.koszyk .top ul li::after, 
.koszyk .top ul li > *::after {

    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    content: '';
    height: 0;
    width: 0;
    /* 48px is the height of the <a> element */
    border: 22px solid transparent;
    border-right-width: 0;
    border-left-width: 20px;
}
.koszyk .top ul li::after {
    /* this is the white separator between two items */
    z-index: 1;
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
    border-left-color: #ffffff;
    /* reset style */
    margin: 0;
}
.koszyk .top ul li > *::after {

    z-index: 2;
    border-left-color: inherit;
}
.koszyk .top ul li > *::before {

    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-right: .4em;
    margin-top: -2px;
    background: url(../images/koszyk/ico.png) no-repeat 0 0;
    vertical-align: middle;
}

.koszyk .top ul li:nth-of-type(2) > *::before
{

    background-position: -20px 0;
}
.koszyk .top ul li:nth-of-type(3) > *::before {
    background-position: -40px 0;
}
.koszyk .top ul li:nth-of-type(4) > *::before {
    background-position: -60px 0;
} 



.koszyk .top ul li > *
{
    border-color:#f2f2f2;

}

.koszyk .top ul li:last-of-type::after, 
.koszyk .top ul li:last-of-type > *::after {

    display: none;
}





.koszyk .top ul li.active {
    color: #000;
    font-weight: bold;
}
/* PRODUKTY */
.koszyk .product-list {
    margin-top: 50px;
}
.koszyk .product-list span.first {
    display: block;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}
.koszyk table.products th {
    font-weight: normal;
    color: #898989;
    text-align: center;
    border-right: 1px solid #ddd;
    padding: 8px 0;
    font-size: 15px;
}
.koszyk table.products th.prod {
    content: "";
    background: url(../images/koszyk/product-arrow.png) no-repeat;
    width: 13px;
    text-align: left;
    height: 7px;
    padding-left: 25px;
    background-position: 8px;
}
.koszyk table.products td {
    border: 1px solid #ddd;
    color: #515151;
    text-align: center;
    padding: 4px;
}
.koszyk table.products td img {
    max-width: 50px;
}
.koszyk table.products td.name {
    text-align: left;
}
.koszyk table.products .st-val.name {
    text-align: center;
}
.koszyk table.products td.name a {
    color: #515151;
}
.koszyk table.products td .input-group {
    width: 71%;
    margin: 0 auto;
}
.koszyk table.products td .input-group .form-control:focus {
    box-shadow: none;
    border-color: #ccc;
}
.koszyk table.products td .input-group .form-control {
    padding: 6px 0;
    text-align: center;
}
.koszyk table.products td .input-group .btn {
    background: url("../images/koszyk/sync.png") no-repeat scroll 4px 4px #eeeeee;
    text-shadow: none;
    padding: 16px;
}
.koszyk table.products td .cross {
    background: url("../images/koszyk/cross.png") no-repeat scroll 4px 4px;
    padding: 16px;
}
.koszyk table.products td:last-of-type {
    border-right: medium none;
}
.koszyk table.products td:first-of-type {
    border-left: medium none;
}
.koszyk table.products th:last-of-type {
    border-right: medium none;
}
/* RABAT */
.koszyk .rabat {
    margin-top: 30px;
}
.koszyk .rabat span {
    font-weight: 100;
    margin-left: 5px;
}

.koszyk .rabat label {
    font-size: 15px;
}
.koszyk .rabat .input-rabat {
    display: none;
    margin-top: 10px;
}
.koszyk .rabat .input-rabat .form-control {
    border-radius: 0;
    width: 200px;
    min-width: auto;
}
.koszyk .rabat .input-rabat .form-control:focus {
    box-shadow: none;
    border-color: #ccc;
}
.koszyk .rabat .input-rabat .btn {
    background-color: #000;
    border: medium none;
    border-radius: 0;
    color: #fff;
    margin-left: 4px;
    background-image: none;
    text-shadow: none;
}
/* DELIV */
.koszyk .deliv {
    background-color: #efefef;
    margin: 20px 0 0;
    padding: 8px 12px;
    font-size: 15px;
}
/* CASH */
.koszyk .cash {
    color: #3f3f3f;
    font-weight: 100;
    width: 415px;
    float: right;
    margin-top: 30px;
}
.koszyk .cash span.first {
    font-size: 14px;
}
.koszyk .cash span.value {
    color: #dd0000;
    display: inline-block;
    float: right;
    font-size: 16px;
    font-weight: bold;
}
.koszyk .cash span.secound {
    display: block;
    margin-top: 29px;
    font-size: 14px;
}
/* CHOICE-SEND */
.koszyk .choice-send {
    margin-top: 30px;
    height: 100%;
}
.koszyk .choice-send  label
{
    font-size: 15px;
    display:block;
}
.koszyk .choice-send .head {
    padding: 10px 20px;
    font-weight: bold;
    font-size: 15px;
}
.koszyk .choice-send .pay {
    padding-right: 0;
    height: 100%;
}
.koszyk .choice-send .pay .head {
    background-color: #eee;
}
.koszyk .choice-send .send {
    padding-left: 0;
    padding-right: 0;
    display: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    height: 100%;
}
.koszyk .choice-send .send .head {
    background-color: #ddd;
}
.koszyk .choice-send .doc {
    padding-left: 0;
    display: none;
    height: 100%;
}
.koszyk .choice-send .doc .head {
    background-color: #eee;
}
.koszyk .choice-send .input-radio {
    padding: 9px 0 20px 30px;
}
.koszyk .choice-send .input-radio input {
    margin-top: 10px;
    margin-right: 2px;
}
.koszyk .choice-send .input-radio span {
    color: #df2222;
}
/* COST */
.koszyk .cost {
    width: 100%;
    border-top: solid 1px #e6e6e6;
    border-bottom: solid 1px #e6e6e6;
    padding: 10px;
    text-align: right;
    font-size: 18px;
    margin-top: 20px;
}
.koszyk .cost .price {
    font-weight: bold;
    display: block;
    float: right;
    margin-left: 15px;
}
/* BUTTON-NEXT-BACK */
.koszyk .nav-button {
    width: 100%;
    margin-top: 30px;
}
.koszyk .nav-button::after {
    display: block;
    clear: both;
    content: "";
}
.koszyk .nav-button .back {
    background: none;
    border: solid 1px #000;
    color: #000;
    font-size: 18px;
    height: 55px;
    width: 200px;
    float: left;
    padding: 15px 0;
    text-align:center;
    display:block;
    text-decoration: none;
    transition: all 0.3s;
}
.koszyk .nav-button .back:hover {
    background: #f5f5f5;
}
.koszyk .nav-button .next {
    background: #000;
    color: #fff;
    border: none;
    font-size: 18px;
    height: 55px;
    width: 200px;
    float: right;
}
.koszyk .nav-button .next:hover {
    background: #828282;
}
/* CLIENT-TEXT */
.koszyk .client-text {
    width: 100%;
    margin: 60px 0;
    border: solid 1px #e6e6e6;
    clear: both;
    min-height: 165px;
    padding: 10px;
    text-align: center;
}
.koszyk .dane .client-text {
    width: 100%;
    margin-top: 20px;
    border: solid 1px #e6e6e6;
    clear: both;
    min-height: 400px;
    padding: 10px;
    text-align: center;
}
.koszyk .dane .client-text > span {
    color: #b3b3b3;
    display: block;
    margin: 62px 0 38px;
}
/* LOGOWANIE */
.koszyk .dane .login {
    border: solid 1px #eaeaea;
}
.koszyk .dane .login h1 {
    font-size: 15px;
    margin: 0;
    padding: 10px;
    border-bottom: solid 1px #eaeaea;
}
.koszyk .dane .login .left-col {
    text-align: center;
    margin-top: 30px;
}
.koszyk .dane .login .right-col {
    text-align: right;
    padding-right: 30px;    
    margin-top: 10px;
}

.koszyk .dane .login .right-col label {
    margin: 0;
}
.koszyk .dane .login .right-col span {
    font-size: 13px;
}
.koszyk .dane .login .right-col .text {
    width: 100%;
    margin: 5px 0 0;
    height: 30px;
    border: solid 1px #d2d2d2;
}
.koszyk .dane .login .right-col .zapamietaj {
    margin: 10px 150px 10px 0;
    font-size: 13px;
}
.koszyk .dane .login .right-col .zapamietaj input {
    margin-right: 2px;
}
.koszyk .dane .login .right-col a {
    font-size: 13px;
    color: #000;
}
.koszyk .dane .login .right-col button {
    float: right;
    background: #000;
    color: #fff;
    border: none;
    width: 200px;
    height: 45px;
    margin: 10px;
    cursor: pointer;
}
/* DANE DO REJESTRACJI */
.koszyk .dane .registration {
    border: solid 1px #eaeaea;
    overflow: auto;
    padding: 0 10px 10px 10px;
}
.koszyk .dane .registration h1 {
    font-size: 15px;
    margin: 0 -10px;
    padding: 10px;
    border-bottom: solid 1px #eaeaea;
}
.koszyk .dane .registration .select {
    float: right;
    margin: 15px 0;
}
.koszyk .dane .registration .select input {
    margin: 2px 7px 0 14px;
    float: right;
}
.koszyk .dane .registration .select span {
    font-size: 12px;
    display: block;
    float: right;
}
.koszyk .dane .registration .line {
    text-align: right;
    clear: both;
    margin: 10px 0;
}
.koszyk .dane .registration .line .text-s {
    font-size: 13px;
    display: inline-block;
    margin-right: 7px;
    position: relative;
}
.koszyk .dane .registration .line .text-s.tip:before {
    background: url("../images/koszyk/i.png") no-repeat;
    content: "";
    cursor: pointer;
    height: 10px;
    left: -13px;
    position: absolute;
    top: 5px;
    width: 10px;
}
.koszyk .dane .registration .line .text {
    width: 250px;
    border: solid 1px #d2d2d2;
    height: 30px;
}
.koszyk .dane .registration .line .adres-long {
    width: 185px;
    border: solid 1px #d2d2d2;
    height: 30px;
}
.koszyk .dane .registration .line .adres-short {
    width: 62px;
    border: solid 1px #d2d2d2;
    height: 30px;
}
.koszyk .dane .registration .line .kod {
    font-size: 12px;
    margin-right: 197px;
}

.koszyk .dane .registration .line .error
{
    display:block;
    font-size: 12px;
}
.koszyk .dane .registration .line .mie-text {
    width: 200px;
    border: solid 1px #d2d2d2;
    height: 30px;
    margin-right: 6px;
}
.koszyk textarea {
    margin-left: 5px; 
}
.koszyk .line textarea {
    width: 250px;
    border: solid 1px #d2d2d2;
    height: 75px;
    font-size: 12px;
    margin: 0;
}
.koszyk .dane .registration .line .uwagi-text {
    font-size: 13px;
    margin-right: 7px;
    vertical-align: top;
}
.koszyk .dane .registration .line .check {
    width: 230px;
    display: inline-block;
    text-align: left;
}
.koszyk .dane .registration .line .check-i {
    margin: 4px 5px 0 0;
    vertical-align: top;
}
.koszyk .dane .registration .pola-obo {
    display: block;
    float: right;
    margin-top: 20px;
    margin-bottom: 10px;

}

/* CONFIRM */
.koszyk .confirm {
    overflow: hidden;
}
.koszyk .confirm > span {
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin: 30px 0 30px 20px;
}
.koszyk .confirm .name-top {
    border-bottom: 1px solid #f2f3ee;
    display: block;
    font-weight: 100;
    margin-left: 28px;
    padding-bottom: 2px;
}
.koszyk .confirm table {
    margin-left: 30px;
    margin-top: 15px;
    font-size: 14px;
}
.koszyk .confirm td.first {
    color: #808080;
    font-weight: 100;
    padding: 3px 10px 3px 0;
}
.koszyk .confirm td.secound {
    font-weight: 100;
    padding: 3px 10px 3px 0;
}
.koszyk .confirm button {
    background: none repeat scroll 0 0 #000;
    border: medium none;
    color: #fff;
    float: right;
    height: 45px;

    width: 200px;
}
/* ZAKOŃCZENIE*/
.koszyk .nr-zamowienia {
    display: block;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    margin: 15px 0;
    font-size: 18px;
    background: #f9f5ef;
}
.koszyk .zamowienie-info {
    border: solid 3px #949494;
    padding: 15px;
    font-size: 14px;
}
.koszyk .zamowienie-info table tr td {
    padding: 2px 5px 0 0;
}


.koszyk .stacktable { width: 100%; }
.koszyk .st-head-row { padding-top: 1em; }
.koszyk .st-head-row.st-head-row-main { font-size: 1.5em; padding-top: 0; }
.koszyk .st-key { width: 49%; text-align: right; padding-right: 1%; }
.koszyk .st-val { width: 49%; padding-left: 1%; }


.koszyk .paczkomat 
{
    padding: 9px 20px 20px 30px;

}
.koszyk .paczkomat .text {
    width: 300px;
    margin: 10px 10px 5px 10px;
    height: 30px;
    background-color:#fff;
    border: solid 1px #d2d2d2;
}

.koszyk .kod
{
    font-weight:100;
}


.koszyk input[type="text"],
.koszyk input[type="password"],
.koszyk textarea
{
    padding:3px 5px ;
}
.koszyk input[type="text"]:hover,
.koszyk input[type="password"]:hover,
.koszyk textarea:hover,
.koszyk .dane .login .right-col .text:hover,
.koszyk .dane .registration .line .text:hover,
.koszyk .dane .registration .line textarea:hover
{
    border-color:#000;
}

/* RESPONSIVE EXAMPLE */

.koszyk .stacktable.large-only { display: table; }
.koszyk .stacktable.small-only { display: none; }


@media (max-width: 992px) {
    .koszyk .dane .login .right-col {
        padding-left: 30px;
    }
}

@media (max-width: 900px) {
    .koszyk .stacktable.large-only { display: none; }
    .koszyk .stacktable.small-only { display: table; }
}


@media (max-width: 767px) {
    .koszyk .top ul li {
        width: 100%;
        padding: 10px 0;
        text-align: center;
        border-bottom: 1px solid #fff;
    }
    .koszyk .top ul li > ::after {
        display:none;
    }
    .koszyk .tabel-product img {
        width: 30%;
    }
}

.koszyk label
{
    font-weight:500;
    font-size: 14px;
}

.registration label {
    margin: 0;
}