:root {

    --zindex: 40;

    --zindextop: 50;

    --color-orange: #E08D18;

    --color-grey: #5C5D5F;

    --color-blue: #ADCBE7;

    --box-maxwidth: 344px;

    --color-bluem: #5f9ba9;

}





.smartshop.smartshopbasket {

    position:absolute;

    top:0;

    left:0;

    width:100%;

    display:flex;

    flex-flow: column nowrap;

    justify-content:center;

    align-items:flex-end;





}



.smartshop.smartshopbasket .basket{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    width:48px;

    height:48px;

    margin-right:4px;

    background-image:url('/media/mod_smartshopbasket/images/basket_32.png');

    background-repeat: no-repeat;

    background-size: 32px 32px;

    background-position: center;

    background-color:rgba(121,161,188,.8);

    border-radius: 50%;

    border: 1px solid rgba(121,161,188,.9);

    box-shadow: 0 1px 3px 0px rgba(121,161,188,.5), inset 0 1px rgba(121,161,188,.1);

    transition: all .2s;

    z-index:var(--zindextop);

    cursor:pointer;

    &:hover{

        border:solid 1px rgba(121,161,188,.7);

        background-color:rgba(121,161,188,.95);

    }

}







.smartshop.smartshopbasket .basket>.count{

    position:relative;

    z-index:var(--zindex);

    display:inline-block;

    color:#fff;

    font-size:18px;

    font-weight:700;

    user-select: none;

}



.smartshop.smartshopbasket div:first-of-type:hover + div.cart, .smartshop.smartshopbasket .smartshop.cart:hover {

    display:block;

    height:auto;

}



.smartshop.cart {

    display:none;

    height:0;

    position:absolute;

    right:0;

    margin-right:0;

    top:24px;

    width:100%;

    background: rgba(121,161,188,.8);

    border-radius: 5px;

    box-shadow: 0 4px 30px rgba(121,161,188, 0.2);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

    border: 1px solid rgba(63, 82, 107, 0.3);

    z-index:var(--zindex);

    color:#fff;

    transition-delay:.05s;

    transition-timing-function: ease;

    transition: height 4s;

}



.smartshop .cartheader{

    padding:4px 16px;

    width:100%;

    border-bottom: 1px solid rgba(63, 82, 107, 0.6);

    font-weight:600;

}



.smartshop .cartlist>.entry{

    position:relative;

    margin: 0 8px 0 8px;

    padding: 2px 0;

    border-bottom: 1px solid rgba(63, 82, 107, 0.2);

    display:flex;

    flex-flow:row nowrap;

    justify-content:space-between;

    align-items:center;

}



.smartshop .cartlist>.entry>span{

    display:block;

}



.smartshop .cartlist>.entry>span.name{

    width:200px;

}



.smartshop .cartlist>.entry>span.name>a{

    color:#fff;

    text-decoration-color:#fff;

    cursor:pointer;

}



.smartshop .cartlist>.entry>span.price{

    width:90px;

    text-align:center;

}



.smartshop .cartlist>.entry>span.removefromcart{

    width:16px;

    cursor:pointer;

}



.smartshop .cartfooter {

    display:flex;

    flex-flow: column nowrap;

    align-items:center;

    justify-content:center;

}



.smartshop .cartfooter .total {

    font-weight:500;

}



.smartshop .cartfooter .total {

    font-weight:500;

}



.smartshop .cartfooter>a{

    color:#fff;

    text-decoration-color:#fff;

    font-weight:500;

    cursor:pointer;

}



@media (min-width: 360px) {

    .smartshop .cartlist>.entry>span.name{

        width:240px;

    }

}



@media (min-width: 400px) {

    .smartshop.cart {

        width:400px;

        margin-right:4px;

    }

    .smartshop .cartlist>.entry>span.name{

        width:240px;

    }



}