:root {
--Ratio: 0.6 ;
--CardW: 315px ;
--CardWMedium: ( var(--CardW) + (var(--CardW) * 0.5 ) ) ;
--CardWSmall: ( var(--CardW) - (var(--CardW) * 0.2 ) ) ;
--PhotoMargin: 0.00 ;
}



.AppProductBoxHRefBtn { position: absolute; top: 40px; left: 0; width: 100%; height: 70% ; z-index: 1 ; background-color: rgba(137, 43, 226, 0); }

.AppProductBox0Card { width: fit-content; }
.AppProductBox1Card { float: left ; position: relative ; width: var( --CardW ) ; height: fit-content ; }


.AppProductCardBtnBox { float: left; width: 100%; padding: 0 10px 0 ; display: flex; flex-direction: row ; background-color: rgba(147, 30, 30, 0) ; }
.AppProductCardBtnBoxLeft { float: left; width: 100%; background-color: rgba(137, 43, 226, 0); display: flex; }
.AppProductCardBtnBoxRight { float: right; width: 100%; background-color: rgba(30, 255, 0, 0); display: flex; justify-content: right; }

.CardResponseBtnsBox0 { position: relative; width: fit-content; height: fit-content; display: flex ; justify-content: center; align-items: center; flex-direction: column; padding: 0px 10px 0px ; background-color: rgba(0, 0, 255, 0) ; border-radius: 0.2rem ; z-index: 2 ; }
.CardResponseBtnsIndicator { position: absolute; top: -4px ; left: 0 ; font-size: 0.8rem; width: 100% ; display: flex; justify-content: center; align-content: center;  }

.CardResponseBtnsImageBox { height: 45px; width: auto; border-radius: 0 ; overflow: hidden; display: flex; align-items: center; justify-content: center ; background-color: rgba(0, 0, 0, 0) ; }



.AppStoreCloseButton { position: absolute; top: 0; right: 0; height: 30px; width: 30px; display: flex; justify-content: center; align-items: center; z-index: 2 ; font-size: 1.2rem ; background-color: rgba(240, 248, 255, 0); }



.AppProductCustomerResponseOptionBox { float: left ; margin:  0 0 50px ; }



.StoreManagementSection  { float: left; width: 100% ; padding: 70px 20% 150px ; }



.AppProductPhotoPopup0 { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 30 ; background-color: black; display: flex; justify-content: center; justify-items: center; }
.AppProductPhotoPopup { height: 100%; width: auto; overflow: hidden; display: flex ; justify-content: center; align-items: center; }
.AppProductPhotoPopupImage { width: auto; height: 100% ; }



.Complete {  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) ; background-color: rgba(144, 144, 144, 0.15 ); }
.Incomplete { background-color: rgba(144, 144, 144, 0.05 ) ; }


.AppProductPhotoBox { float: left; position: relative; 
    width: calc( ( var(--CardW) / 2 ) - ( ( ( var(--CardW) / 2 ) * var(--PhotoMargin) ) * 2 ) ) ; 
    height: calc( ( var(--CardW) / 2 )  * var(--Ratio) ) ; 
    margin: calc( ( var(--CardW) / 2 ) * var(--PhotoMargin) )  ;
    overflow: hidden; display: flex ; justify-content: center; align-items: center; border-radius: 0px ; cursor: pointer;
}

.AppProductPhotoBoxMedim { float: left; position: relative; 
    width: calc( ( var(--CardWMedium) / 2 ) - ( ( ( var(--CardWMedium) / 2 ) * var(--PhotoMargin) ) * 2 ) ) ; 
    height: calc( ( var(--CardWMedium) / 2 )  * var(--Ratio) ) ; 
    margin: calc( ( var(--CardWMedium) / 2 ) * var(--PhotoMargin) ) ;
    overflow: hidden; display: flex ; justify-content: center; align-items: center; border-radius: 0px ; cursor: pointer;
}

.AppProductPhotoBoxSmall { float: left; position: relative; 
    width: calc( ( var(--CardWSmall) / 2 ) - ( ( ( var(--CardWSmall) / 2 ) * var(--PhotoMargin) ) * 2 ) ) ;
    height: calc( ( var(--CardWSmall) / 2 )  * var(--Ratio) ) ;
    margin: calc( ( var(--CardWSmall) / 2 ) * var(--PhotoMargin) )  ;
    overflow: hidden; display: flex ; justify-content: center; align-items: center; border-radius: 0px ; cursor: pointer;
}



.ViewStoreItemDetails { position: fixed; top: 0; left: 0; width: 100%; height: 100vh ; padding: 100px 3% 100px;  z-index: 25 ; overflow: scroll; display: flex; justify-content: left; flex-wrap: wrap; }



.AppProductButtonBox { position: relative; width: 100% ; padding: 5px 0 100px ; display: flex; justify-content: right ;  flex-wrap: wrap; }



.StoreDescription { height: 3.4rem; width: 100% ; background-color: rgba(84, 188, 74, 0) ;  overflow: hidden ; font-size: 0.8rem ; margin: 15px 0 15px ; opacity: 0.6 ; text-justify: inter-word; line-height: 1.1rem ; }




















.AppProductDisplayTop { position: absolute; bottom: 0.5rem ; left: 1rem ; display: flex; align-items: center; flex-direction: row; height: 2rem ; width: auto ; background-color: rgba(59, 170, 49, 0) ; margin: 5px 0 5px ; z-index: 1 ; }

.AppProductDisplayType { height: 100%; width: 100% ; display: flex ; align-items: center ; background-color: rgba(154, 196, 150, 0) ; padding: 0 0 0 ; margin: 0 0 15px ;  text-transform: capitalize; color: white ; }

.AppProductDisplayLogoBox { width: 40px ; height: 40px; overflow: hidden; display: flex; justify-content: center; align-items: center ; border-radius: 50% ; }
.AppProductDisplayLogo { height: 50% ; }












@media screen and ( max-width: 1700px ) {
}

@media screen and ( max-width: 1200px ) {
}

@media screen and ( max-width: 800px ) {

    .AppProductPhotoPopupImage { width: 100%; height: auto ;  }
    .StoreManagementSection { padding-left: 5%; padding-right: 5%; }
}

@media screen and ( max-width: 500px ) {
}