.EnterViewArea {
}

.Brdr {
    border:1px solid black;
}

.BSize {
    box-sizing:border-box;
}

.Trns {
    transition: ease-in-out 0.3s;
    -webkit-transition: ease-in-out 0.3s;
}

.FTrns {
    transition: ease-in-out 0.1s;
    -webkit-transition: ease-in-out 0.1s;
}

.BGImage {
    background-size:contain; background-repeat:no-repeat; background-position:center center;
}

.BigTextBox {
    font: bold 14px cairoregular;
    border-radius:5px;
    box-sizing:border-box;
    padding:3px;
}

.NoResize {
    resize: none;
}

.LargTitle {
    display:inline-flex; flex-flow:row wrap;
    font: bold 22px cairoregular;
}
.MedTitle {
    font: bold 18px cairoregular;
}

.SmallTitle {
    display:inline-flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start; text-align:start; 
    font: bold 14px cairoregular; color:#8f8f8f; box-sizing:border-box; padding:5px;
}


.file-upload {
    display: inline-flex;
    overflow: hidden;
    justify-content:center;align-items:center;text-align: center;    
    border: 1px solid #124d77;
    background: black;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    width: 110px;
    height: 30px;
    line-height: 30px;
    font:bold 14px cairoregular;    
}
.file-upload:hover {                   
    background-color: white;
    color:black;
}  

.Btns {
    display:inline-flex; justify-content:center;align-items:center;
    box-sizing:border-box; margin:5px; padding:5px;
    min-width:150px;
    font:normal 15px cairoregular;
    background-color:#534f33; color:white;
    cursor:pointer;
    transition: ease-in-out 0.3s;
    -webkit-transition: ease-in-out 0.3s;
    border-radius:4px;
    background-size:0%; background-repeat:no-repeat; background-position:center center;
    background-image: url(../Pics/Wait.gif);
}

.Btns:hover{
    background-color:#9d9035; color:black;
}

.DelBtns {
    background-color:red; color:white;
}
.DelBtns:hover {
    background-color:darkred; color:white;
}

.LinkButton {
    font: bold 14px cairoregular;
    color: blue;
    cursor: pointer
}

.LinkButton:hover {
    text-decoration: underline;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera, and Firefox */
}

/*Items block Properioes --------------------------------------------------------------*/
.ItemBlock {
    display: inline-flex;
    flex-flow: column nowrap;
    box-sizing: border-box;
    width: calc(25% - 10px);
    min-width: calc(25% - 10px);
    margin: 5px;
    padding: 4px;
    justify-content: flex-start; /*Vertically*/
    align-items: center; /*Horizontaly*/
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    background-color: white;
    transition: ease-in-out 0.3s;
    -webkit-transition: ease-in-out 0.3s;
}

.ItemBlock2 {
}

.ItemBlock:hover {
    box-shadow:2px 2px 20px silver;
}

.ItemPic {
    display: block;
    text-align: left;
    box-sizing: border-box;
    width: calc(100% - 8px);
    height: 240px;
    background-repeat: no-repeat; background-size: contain; background-position: center;
    cursor:pointer;
    /*border: 1px solid black;*/
}

.ItemFav {
    display: inline-block;    
    width: 40px; height: 40px;
    background-repeat: no-repeat; background-size: contain; background-position: center;
    transition: ease-in-out 0.3s;
    -webkit-transition: ease-in-out 0.3s;
    background-color: #f7f7f7;
    opacity: 0.7;
    box-sizing: border-box;
    border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-radius: 5px;
    cursor: pointer;
    background-image: url(../Pics/Buttons/CmdFav.png);
}
.ItemFav:hover {
    background-color: white;
    border: 1px solid silver;
    opacity:1;
}

.ItemInfoContainer {
    display: inline-flex; flex-flow:column wrap;
    justify-content:space-between;
    align-items:center;
    box-sizing: border-box;
    width: calc(100% - 8px);    
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /*border: 1px solid black;*/
}

.ItemName {
    display: inline-block;
    box-sizing: border-box;
    font: bold 14px cairoregular;
    width: 100%;
    height: 54px;
    text-wrap: normal;
    overflow: hidden;
    /*border: 1px solid black;*/
}

.ItemPrice {
    display: inline-block;
    box-sizing: border-box;
    font: bold 18px cairoregular;
    width: 100%;
    height: 32px;
    text-align: center;
    overflow: hidden;
    /*border: 1px solid red;*/
    color: #03161d;
}

.ItemOrgPrice {
    display: inline-block;
    box-sizing: border-box;
    font: bold 14px cairoregular;
    width: 100%;
    height: 30px;
    text-align: center;
    overflow: hidden;    
    color: gray;
    text-decoration:line-through;
}

.ItemDiscount {
    display: inline-flex;
    box-sizing: border-box;
    font: bold 16px cairoregular;
    height: 30px;
    justify-content:center;align-items:center;
    background-color: green;
    border-radius:6px;
    margin-left: 5px; margin-right: 5px;
    padding-left: 10px; padding-right: 10px;
    color: white;
}

.ItemAddToCart {
    display: inline-block;
    width: 50%; height: 50px;
    padding: 4px; margin-top:5px;
    background-repeat: no-repeat; background-size: contain; background-position: center;
    transition: ease-in-out 0.1s;
    -webkit-transition: ease-in-out 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    background-image: url(../Pics/Buttons/CmdAddToCart2.png);
    background-color:transparent;
    /*border: 1px solid red;*/
}

.ItemAddToCart:hover {   
    border: 1px solid silver;
    width: 100%;
    border-radius: 5px;
    background-color:#a8f584;
    background-image: url(../Pics/Buttons/CmdAddToCart2.png);
}

.ItemAddedToCartContainer {
    display: inline-flex; flex-flow:row nowrap;
    justify-content:center; align-items:center;
    width: 100%;
    height: 50px;
    padding: 4px; margin-top:5px;   
    transition: ease-in-out 0.1s;
    -webkit-transition: ease-in-out 0.3s;
    box-sizing: border-box;    
}
.ItemAddedToCartButtons {
    display: inline-flex;
    box-sizing: border-box;
    margin-left: 4px; margin-right: 4px;
    width: 32px; height: 32px;    
    justify-content: center; align-items: center;    
    cursor:pointer;    
}

.ItemAddedToCartIncDec {
    background-color: #534f33;
    font: bold 18px arial;
    border-radius: 4px;
    color: white;
}

.ItemAddedToCartIncDec:hover {
    background-color: #a8f584;
    color:black;
}

.ItemAddedToCartDel {
    background-color: transparent;
    background-repeat: no-repeat; background-size: contain; background-position: center;
    background-image:url(../Pics/Buttons/CmdRecycle.png);
}
.ItemAddedToCartDel:hover {
    background-image:url(../Pics/Buttons/CmdRecycleRed.png);
}

.ItemAddedToCartCount {
    display: inline-flex;
    box-sizing: border-box;   
    font: bold 18px arial;
    width: 70px; height: 32px;
    justify-content: center; align-items: center;
    border:1px solid gray; border-radius: 4px;
    color: black;
}

/*---------------------------------------------------------------------------------------*/
/*Items block Properioes ----------------------------------------------------------------*/
.GroupBlock {
    display: inline-flex;
    flex-flow: column nowrap;
    box-sizing: border-box;
    width: calc(25% - 20px);
    min-width: calc(25% - 20px);
    aspect-ratio: 1.25/1;    
    margin: 10px;
    justify-content: flex-start;
    align-items: center;
    background-color: transparent;
    border: 1px solid black;
    border-radius: 20px;
    overflow: hidden;
    transition: ease-in-out 0.3s;
    -webkit-transition: ease-in-out 0.3s;
}

.GroupPic {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    font: bold 16px cairoregular;
    width: 100%;
    height: calc(100% - 45px); background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.GroupPicCover {
    width: 100%;
    box-sizing: border-box;
    background-color: transparent;
    box-sizing: border-box;
    border-block-color: red;
}

.GroupName {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    font: normal 18px cairoregular;
    width: 100%;
    height: 45px;
    overflow: hidden;
    background-color: #534f33;
    color: white;
    text-decoration: none !important;
}



/*.GroupFotter {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;    
    width: 100%;
    height: 15px;
    background-color: #03161d;   
    border-bottom-right-radius:12px; border-bottom-left-radius:12px;
}*/
/*---------------------------------------------------------------------------------------*/

@media screen and (max-width: 1200px) {
    .ItemBlock {
        width: calc(25% - 10px);
        min-width: calc(25% - 10px);
        /*background-color: yellow;*/
    }
    
}

@media screen and (max-width: 992px) {
    .ItemBlock {
        width: calc(33.3% - 10px);
        min-width: calc(33.3% - 10px);       
    }
    .ItemBlock2 {
        width: calc(32% - 10px);
        min-width: calc(32% - 10px);
    }

    .GroupBlock {
        width: calc(33.33% - 10px);
        min-width: calc(33.33% - 10px);
        margin: 5px;
    }
}

@media screen and (max-width: 850px) {
    .GroupBlock {
        width: calc(33.33% - 10px);
        min-width: calc(33.33% - 10px);       
        margin: 5px;
    }

    .GroupName {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .ItemBlock {
        width: calc(50% - 10px);
        min-width: calc(50% - 10px);       
    }
    .ItemBlock2 {
        width: calc(45% - 10px);
        min-width: calc(45% - 10px);
    }

    .GroupBlock {
        width: calc(50% - 10px);
        min-width: calc(20% - 10px);
        margin:5px;
    }
    .GroupName {
        font-size: 16px;
    }
}

@media screen and (max-width: 550px) {
    .ItemBlock {
        width: calc(100% - 10px);
        min-width: calc(100% - 10px);        
    }
    .ItemBlock2 {
        width: calc(90% - 10px);
        min-width: calc(90% - 10px);
    }

    .GroupBlock {
        width: calc(100% - 10px);
        min-width: calc(100% - 10px);
        /*height:300px;*/
        margin: 5px;
    }

    .GroupName {
        font-size: 16px;
    }

    .LargTitle {
        font-size: 19px;
    }
}


@media screen and (min-width: 1367px) {
    .ItemBlock {
        width: calc(25% - 10px);
        min-width: calc(25% - 10px);        
    }
}