/* shoplist */

.shoplist {
    position: relative;
}

.shoplist--modal {
    width: 90%;
    height: calc(100% - 120px);
    max-width: 1200px;
    margin: 60px auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    border-radius: 6px;
    outline: 0;
    overflow: hidden;
    display: flex;
    flex-flow: column;
}

.shoplist__header {
    background-color: #efeeef;
}

.shoplist__list {
    flex: 1;
    box-shadow: none;
    border: none;
    display: flex;
    flex-flow: column;
    overflow: hidden;
}

.shoplist__list--cart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-shadow: none;
    border: none;
    transform: translateY(100%);
    transition-duration: 0.3s;
}

.shoplist__list--cart-open {
    transform: translateY(0);
}

.shoplist__title {}

.shoplist__subtitle {
    margin-top: 5px;
    margin-bottom: 0;
    font-size: 85%;
    font-weight: 700;
}

.shoplist__body {
    flex: 1;
    padding: 0;
    display: flex;
    flex-flow: column;
    overflow: hidden;
}

.shoplist__filter {
    padding: 15px;
}

.shoplist__label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: 700;
}

.shoplist__search {
    width: 100%;
}

.shoplist__category {
    border-color: #adacad !important;
    background-color: #efeeef !important;
}

.shoplist__category--active {
    color: #fff;
    background-color: #a2ad00 !important;
    border-color: #a2ad00 !important;
}

.shoplist__table {
    width: 100%;
    flex: 1;
    display: flex;
    flex-flow: column;
    overflow: hidden;
}

.shoplist__tablehead {
    padding-left: 15px;
    padding-right: 15px;
    background-color: #efeeef;
}

.shoplist__tablehead .row {
    padding-right: 17px;
}

.shoplist__tablebody {
    flex: 1;
    overflow-y: scroll;
    padding-left: 15px;
    padding-right: 15px;
}

.shoplist__cell {
    padding: 25px 15px;
}

.shoplist__cell--header {
    padding: 5px 15px;
}

.shoplist__cell--intertitle {
    padding: 0;
}

.shoplist__cell--text {
    padding-right: 45px;
}

.shoplist__tablebody .row {
    margin-top: -1px;
    border-top: 1px solid #cecdce;
}

.shoplist__description {
    font-size: 85%;
}

.shoplist__productname {
    font-weight: bold;
}

.shoplist__footer {
    position: relative;
    padding: 0;
    background-color: #efeeef;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    z-index: 2
}

.shoplist__infobar {
    padding: 15px;
    background-color: #efeeef;
}

.shoplist__controlbar {
    padding: 15px;
    background-color: #dedede;
}

.shoplist__cartbutton {
    position: relative;
    width: 100%;
    max-width: 260px;
    padding: 10px 15px;
    background-color: #5a585a;
    border: none;
    border-radius: 4px;
    box-shadow: none;
    color: #fff;
    text-align: left;
    margin-top: 8px;
}

.shoplist__carticon {
    position: relative;
    font-size: 200%;
    margin-right: 15px;
}

.shoplist__cartamount {
    position: absolute;
    top: -6px;
    left: 70%;
    display: inline-block;
    min-width: 18px;
    padding: 3px;
    background-color: #a2ad00;
    border-radius: 9px;
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    text-align: center;
}

.shoplist__carttext {
    display: inline-block;
    transform: translateY(-5px);
}

.shoplist__cartbuttonicon {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    transition-duration: 0.3s;
}

.shoplist__cartbuttonicon--open {
    transform: translateY(-50%) rotate(180deg);
}

.shoplist__number {
    font-weight: 700;
}

.shoplist__discount {
    color: #a2ad00;
}

.shoplist__sumblock {
    font-size: 85%;
}

.shoplist__sum {}

.shoplist__endsum {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #adacad;
    font-size: 130%;
}

.shoplist__category-title {
    padding: 5px 15px !important;
    background-color: #5a585ad9 !important;
    color: #fff;
}


/* numberinput */

.numberinput {
    display: flex;
}

.numberinput__input {
    flex: 1;
    width: 50%;
    padding: 8px 15px;
    border: 1px solid #adacad;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background-color: #fff;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.numberinput__input--highlight {
    box-shadow: none;
    font-weight: 700;
    background-color: #f6f7e6;
}

.numberinput__input::-webkit-outer-spin-button,
.numberinput__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.numberinput__input[type=number] {
    -moz-appearance: textfield;
}

.numberinput__button {
    padding: 9px 15px;
    border: 1px solid #adacad;
    border-left: none;
    background-color: #efeeef;
    font-weight: 700;
}

.numberinput__button--remove {}

.numberinput__button--add {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}


/* button */

.button--secondary {
    border-color: #adacad !important;
    background-color: #efeeef !important;
}

.button--ghost {
    border-color: transparent !important;
    background-color: transparent !important;
}


/* buttongroup */

.btn-group--shoplist {
    display: block;
}

.btn-group--shoplist .btn:first-of-type {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}


/* helpers */

.mr-15 {
    margin-right: 15px;
}

.m-inline-10 {
    margin-top: -10px;
    margin-bottom: -10px;
}

.m-inline-5 {
    margin-top: -5px;
    margin-bottom: -5px;
}

.wiggle {
    transform-origin: 50% 50%;
    animation: wiggle 0.3s forwards;
}

.dropIt {
    transform-origin: 50% 50%;
    animation: dropIt 0.3s forwards;
}


/* animatons */

@keyframes wiggle {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    25% {
        transform: translateX(2px) rotate(1deg);
    }
    75% {
        transform: translateX(-2px) rotate(-1deg);
    }
    100% {
        transform: translateX(0) rotate(0deg);
    }
}

@keyframes dropIt {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(1px);
    }
    75% {
        transform: translateY(-2px);
    }
    100% {
        transform: translateY(0);
    }
}


/* responsive */

@media only screen and (max-width: 991px) {
    .shoplist--modal {
        height: calc(100% - 30px);
        margin: 15px auto;
    }
    .shoplist__cell {
        padding: 10px 15px;
    }
    .shoplist__cartbutton {
        margin-bottom: 30px;
        max-width: 100%;
        transform: translateY(0);
    }
    .m-inline-10 {
        margin-top: 0;
        margin-bottom: 0;
    }
    .m-inline-5 {
        margin-top: 0;
        margin-bottom: 0;
    }
}