﻿/* ICON SHOPLIST PRODUCTLIST */
.ListIcon { float: left; position: relative; z-index: 2; cursor: pointer; width: 100%; text-align: center; box-sizing: border-box; color: #34495e; line-height: 24px; height: 24px; margin-top: 10px; transition: color 300ms linear; }
    .ListIcon:before { display: inline-block; vertical-align: middle; /* content:'\f03a'; */ content: '\f08a';     margin-top: -4px; font-family: FontAwesome; font-size: 24px; line-height: 24px; padding-right: 5px; }
    .ListIcon.Active:before { color: #1fa67a; content:'\f004'; }
    .ListIcon.Login { color: #aaa; }
    .ListIcon:hover { color: #34698e; }
    .ListIcon:focus { color: #34698e; }

/* For å få et punkt å plassere boks ut i fra */
.ProductCommandPlaceholder {
    position:relative;
}

.ProductListWrapper.ListView .ListIcon { width: auto; float: right;}
/* POPUP SHOPLIST PRODUCTLIST */
.ShoplistWrapper { }
/*.ShopListPopupWrapper { bottom: 0; right: 0; top: 0; width: 100%; min-width: 238px; min-height: 346px; position: absolute; background: #fff; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5); display: none; z-index: 99; box-sizing: border-box; border-radius: 3px; }*/
.ProductWrapper .ShopListPopupWrapper { bottom: 0; right: 0; top: 0; width: 100%; min-width: 238px; min-height: 346px; position: absolute; background: #fff; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5); display: none; z-index: 100; box-sizing: border-box; border-radius: 3px; }
.ProductListWrapper.ListView .ProductListItemWrapper .ShopListPopupWrapper { min-width:160px; max-width:300px; min-height:300px; right:0; position: absolute; background: #fff; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5); display: none; z-index: 99; box-sizing: border-box; border-radius: 3px;}

.ProductListWrapper.GridView .ProductListItemWrapper .ShopListPopupWrapper { left: 0; bottom: 0; right: 0; top: 0;  position: absolute; background: #fff; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5); display: none; z-index: 99; box-sizing: border-box; border-radius: 3px; }
.ShopListPopupWrapper h3 { padding: 8px; color: #fff; margin-top: 0px; margin-bottom: 0; font-size: 1.1rem; border-bottom: 0px solid #72A29F; background-color: #42a19d; }
    .ShopListPopupWrapper h3:after { content: '\f00d'; font-family: FontAwesome; float: right; cursor: pointer; }
.ShopListPopupContentWrapper { padding: 7px; }
.ShopListPopupContent { float: left; width: 100%; margin-bottom: 0px; overflow: auto; padding-top: 2px; }
    .ShopListPopupContent p { font-size: 0.8rem; }
    .ShopListPopupContent input[type=checkbox] { display: none; }
    .ShopListPopupContent label { width: 100% !important; margin-bottom: 3px !important; position: relative; padding-left: 25px; font-size: 1rem; box-sizing: border-box; display: block; text-align: left; }
        .ShopListPopupContent label:before { content: '\f096'; font-family: FontAwesome; position: absolute; left: 0; font-size: 24px; }
    .ShopListPopupContent input[type="checkbox"]:checked + label:before { content: '\f046'; }

    .ShopListPopupContent label:hover { }
.ShopListPopupButtonWrapper { float: left; width: 100%; border-bottom: 1px solid #ccc; margin-bottom: 10px; }
    .ShopListPopupButtonWrapper .CloseShopList { float: left; width: 100%; margin-bottom: 10px; }
.ShopListPopupFooter input[type=text] { width: 100%; }
.ShopListPopupFooter .CreateNewShopList { float: left; width: 100%; cursor: pointer; color: #fff; box-sizing: border-box; padding-left: 0px; padding-right: 0px; }
    .ShopListPopupFooter .CreateNewShopList:hover { }
.ShopListPopupFooter .Form { margin-bottom: 0px; margin-top: 5px; }

/* SHOPPING LIST - MY PAGE */
.ShoppingListTableWrapper { float: left; width: 100%; box-sizing: border-box; margin-bottom: 20px; }
    .ShoppingListTableWrapper .ShoppingListTableContent { width: 100%; display: table; table-layout: fixed; }
    .ShoppingListTableWrapper .ShoppingListItem { width: 100%; display: table-row; border-bottom: 1px solid #ccc; }
        .ShoppingListTableWrapper .ShoppingListItem.Header { height: 30px; }
            .ShoppingListTableWrapper .ShoppingListItem.Header .ProductImageWrapper { padding-top: 0px; padding-bottom: 10px; }
            .ShoppingListTableWrapper .ShoppingListItem.Header .ProductInfoWrapper { padding-top: 0px; padding-bottom: 10px; }
            .ShoppingListTableWrapper .ShoppingListItem.Header .UnitWrapper { padding-top: 0px; padding-bottom: 10px; }
            .ShoppingListTableWrapper .ShoppingListItem.Header .QuantityWrapper { padding-top: 0px; padding-bottom: 10px; }
            .ShoppingListTableWrapper .ShoppingListItem.Header .PerPriceWrapper { padding-top: 0px; padding-bottom: 10px; }
            .ShoppingListTableWrapper .ShoppingListItem.Header .TotalPriceWrapper { padding-top: 0px; padding-bottom: 10px; }
            .ShoppingListTableWrapper .ShoppingListItem.Header .DeleteItemWrapper { padding-top: 0px; padding-bottom: 10px; }
        .ShoppingListTableWrapper .ShoppingListItem .MobileHeader { display: none; font-weight: 700; }
    .ShoppingListTableWrapper .ProductImageWrapper { width: 120px; display: table-cell; border-bottom: 1px solid #ccc; padding-top: 15px; padding-right: 15px; box-sizing: border-box; }
        .ShoppingListTableWrapper .ProductImageWrapper img { max-width: 100%; }
    .ShoppingListTableWrapper .ProductInfoWrapper { display: table-cell; vertical-align: top; border-bottom: 1px solid #ccc; padding-top: 15px; box-sizing: border-box; padding-bottom: 15px; }
    .ShoppingListTableWrapper .UnitWrapper { width: 10%; display: table-cell; vertical-align: top; text-align: right; border-bottom: 1px solid #ccc; padding-top: 15px; box-sizing: border-box; }
    .ShoppingListTableWrapper .QuantityWrapper { width: 10%; display: table-cell; vertical-align: top; text-align: right; border-bottom: 1px solid #ccc; padding-top: 15px; box-sizing: border-box; }
    .ShoppingListTableWrapper .PerPriceWrapper { width: 10%; display: table-cell; vertical-align: top; text-align: right; border-bottom: 1px solid #ccc; padding-top: 15px; box-sizing: border-box; }
    .ShoppingListTableWrapper .TotalPriceWrapper { width: 10%; display: table-cell; vertical-align: top; text-align: right; border-bottom: 1px solid #ccc; padding-top: 15px; box-sizing: border-box; }
    .ShoppingListTableWrapper .DeleteItemWrapper { width: 5%; display: table-cell; vertical-align: top; text-align: right; border-bottom: 1px solid #ccc; padding-top: 15px; box-sizing: border-box; }
    .ShoppingListTableWrapper .Trashcan { position: relative; cursor: pointer; display: none; }
    .ShoppingListTableWrapper .btnDeleteOrderLine { position: absolute; left: 0px; background: none; border: 0px; width: 100%; height: 30px; bottom: 0px; }

    .ShoppingListTableWrapper .ArticleNo { float: left; width: 100%; }
    .ShoppingListTableWrapper .UpdateQuantity { float: left; padding-top: 8px; margin-left: 10px; }
    .ShoppingListTableWrapper .TextboxWrapper { width: 40px; display: inline-block; border: 1px solid #ddd; background: #fff; padding: 5px; border-radius: 3px; margin-top: -8px; position: relative; }
    .ShoppingListTableWrapper .txtQty input { width: 100%; text-align: right; border: none; font-family: 'Open Sans',sans-serif; font-size: 14px; line-height: 20px; padding: 0px; padding-top: 2px; }
        .ShoppingListTableWrapper .txtQty input[type=number]::-webkit-inner-spin-button, .ShoppingListTableWrapper .txtQty input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
.ShoppingListTableContent .QuantityWrapper.ReadOnly .TextboxWrapper.txtQty { background-color: #fafafa; }
.ShoppingListTableContent textarea { float: left; width: 80%; border: 1px solid #ddd; padding: 0px; font-family: 'Open Sans',sans-serif; font-size: 14px; border-radius: 3px; box-sizing: border-box; padding: 5px; }
.ShoppingListTableContent .ProductInfoWrapper a { float: left; text-decoration: none; }
    .ShoppingListTableContent .ProductInfoWrapper a:hover { color: #000; }
.ShoppingListTableContent .ShoppingListCommentWrapper { background: none; position: relative; float: left; width: 100%; }
.ShoppingListTableContent .CommentSaveAnimation { float: left; margin-left: 10px; font-size: 0.8rem; background-color: #3c763d; color: #fff; padding: 10px; padding-top: 5px; padding-bottom: 5px; border-radius: 3px; opacity: 0; transition: opacity 300ms ease-in-out; }
    .ShoppingListTableContent .CommentSaveAnimation:before { content: '\f0c7'; font-family: FontAwesome; padding-right: 5px; font-size: 16px; float: left; }
    .ShoppingListTableContent .CommentSaveAnimation.Active { opacity: 1; }
.ShoppingListTableContent input.btnProductComment { display: none; }
.ShoppingListTableContent input[type=checkbox] { display: none; }
.ShoppingListTableContent label { width: 100% !important; margin-bottom: 0px !important; position: relative; padding-left: 25px; font-size: 1rem; box-sizing: border-box; margin-left: 10px; }
    .ShoppingListTableContent label:before { content: '\f096'; font-family: FontAwesome; position: absolute; left: 0; font-size: 24px; }
.ShoppingListTableContent input[type="checkbox"]:checked + label:before { content: '\f046'; }
.SelectedList input[type=text], .SelectedList textarea { margin-bottom: 10px; }

.ShoppingListTableContent .UnitTypeText { position: absolute; right: -25px; top: 8px; }

.SharedPopupShoppingWrapper { top: 50px; position: absolute; min-width: 470px; max-width: 600px; border: 1px solid #ddd; background-color: #fafafa; z-index: 99; padding: 10px; box-sizing: border-box; opacity: 0; transition: opacity 300ms ease-in-out; }
    .SharedPopupShoppingWrapper.Active { opacity: 1; }
    .SharedPopupShoppingWrapper h4 { }
        .SharedPopupShoppingWrapper h4:after { content: '\f00d'; font-family: FontAwesome; float: right; cursor: pointer; }

/* SHARED SHOPPING LIST */
.SharedShoppingListWrapper { }
    .SharedShoppingListWrapper h2 span { }
        .SharedShoppingListWrapper h2 span:before { content: '-'; padding-right: 10px; padding-left: 5px; }
        .SharedShoppingListWrapper h2 span:first-child:before { content: ''; padding: 0px; }
