
#app-bar{
	width:100%;
	height: 70px;
	position: fixed;
	bottom:0;
	background-color: white;
	z-index: 999999;
    box-shadow: 0 0 3px rgba(0,0,0,0.4);
    line-height: 1!important;
    display: none;
}

#app-bar p {
    margin:0;
}
.app-price{
    display:inline-block;
}
#app-bar .app-banner-rating-container,
#app-bar .app-banner-star{
    width: 70px;
}
#app-bar .app-banner-rating-container,
#app-bar .app-banner-star,
#app-bar .app-banner-current-rating{
    height: 14px;
}
#app-bar .app-banner-rating-container {

}
#app-bar .app-banner-star {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAAkklEQVR4AdXTMQrDMAyF4UIgmydBB68BDwZBQEf7709rjFtwRdRka/M2oW94Ir49LuaXwfwhyDz5BhS9ABCsRc4D7UBPAhI2kgLASuJOpqBvoBRymyZWDyoWpHqwBKSy+A7HpK0flH4Rv+6Bu9B0qQCIAxKD7ECOwTbWSov1bCHopZU0+ihGjcGOfPyGuwf//qafuZqXBK6OLwsAAAAASUVORK5CYII=);
}
#app-bar .app-banner-current-rating {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAAlklEQVR4AdXTQQ3DMAyF4UEohEIJFEOY9BMIpEIIBEMwhDLwoiqqFFn12tvWd7P8HZ7VvPxhfhnMH4LMk2/AsAcAwXvkPrAD2E1AwUdKAlgpvKk07ARGo/ZpYY1A8SQawZIQZYkdrklfvygdyLkeQbjQdKkESACSgxpAzcE21lqPH9lyoDhGGX0MR3Owz78cwh7Bv7/pD0t39Qi2PqJ9AAAAAElFTkSuQmCC) left top;
}
#app-bar .app-banner-current-rating,
#app-bar .app-banner-star{
    background-size: contain;
}

@media screen and (max-width:1024px){
    body.app-bar-shown #layoutcontainer{
        margin-top: 100px;
    }

    #app-bar .app-close{
        display:inline-block;
        width: 40px;
        height:100%;
        vertical-align: middle;
        cursor: pointer;
        float:left;
    }
    #app-bar .app-close:before{
        content: "";
        background-color: #828282;
        height: 10;
        width: 2px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 20px;
        height: 15px;
        margin: auto;
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);

    }
    #app-bar .app-close:after{
        content: "";
        background-color: #828282;
        height: 10;
        width: 2px;
        position: absolute;
        top: 0;
        left: 20px;
        bottom: 0;
        height: 15px;
        margin: auto;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);

    }
    #app-bar .app-content{
        width: calc(100% - 95px);
        height: 100%;
        float: left;
    }
    #app-bar .rel-wrap{
        width: 100%;
        height: 100%;
    }

    #app-bar .app-image-wrap{
        float: left;
        height: 100%;
        width: 70px;
        position: relative;
        margin-right: -8px;
        margin-left: -10px;
    }
    #app-bar .app-img{
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        display: block;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 80%;
        height: 80%;
        border: 1px solid #e6e1e1;
        border-radius: 14px;
        background-size: cover;
        background-position:center center;
    }

    /*body.app-banner-device-iphone #app-bar .app-img:after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 80%;
        width: 80%;
        margin: auto;
        background-image: url(mask.png);
        background-size: 90%;
        background-position: center;
        background-repeat: no-repeat;
        background: transparent;
        !*border-radius: 15px;
        border: 1px solid #e2dfdf;*!
        z-index: 2;
    }*/

    #app-bar .app-title{
        float:left;
        height: 100%;
        width: calc(100% - 70px);
        text-align: left;
        padding: 4px 0 0px 10px;
        box-sizing: border-box;
    }
    #app-bar .app-title p{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
    }
    #app-bar .app-title p a{
        font-size: 15px;
        font-family: Poppins;
        color: #414141;
    }

    #app-bar .app-open{
        float: right;
        height: 100%;
        width: auto;
        box-sizing: border-box;
        padding-right: 0px;
        padding: 0 15px 0 0;
    }
    #app-bar .app-open>a{
        color: #4087f7;
        font-size: 16px;
        font-family: Poppins;
        display: block;
        height: 70px;
        line-height: 70px;
    }

    body.app-banner-device-google #app-bar {

    }
    body.app-banner-device-iphone #app-bar {

    }

    #app-bar.active
    {
        display: block;
    }
    #app-bar.non-active
    {
        display: none;
    }

    #app-bar, body .app-content, body .app-img:after,body .app-close,body .app-open{
        background: rgb(242,242,242); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(242,242,242,1) 53%, rgba(209,209,209,1) 101%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 53%,rgba(209,209,209,1) 101%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(242,242,242,1) 0%,rgba(242,242,242,1) 53%,rgba(209,209,209,1) 101%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#d1d1d1',GradientType=0 ); /* IE6-9 */
    }
    body .app-content, body .app-img:after,body .app-close,body .app-open{
    z-index: -1;
    }
    html.app-banner-margin-top.top-active, #wpadminbar.app-banner-margin-top{
        margin-top:70px!important;
    }
    html.app-banner-margin-bottom.bot-active{
        margin-bottom:70px!important;
    }
}



