.ui-widget.ui-widget-content {
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            }
            .ui-widget-header {
                border: 1px solid #dddddd;
                /*background: #C6EFC4;*/
                background: #C6EFC4;
                color: #333333;
                font-weight: bold;
              }
              .ui-widget-header a {
                color: #333333;
              }





.product-wrapper {
	display: block;
	width: 100%;
	float: left;
	transition: width .2s;
	border:  1px solid gray;
	margin: 10px;
	background-color: #E2F4FC;
}


.products {
	list-style: none;
	margin: 0 -5px 0 0;
	padding: 0;
}

.product-photo {
	position: relative;
	padding-bottom: 100%;
	overflow: hidden;
}


.product-photo img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 90%;
	max-height: 90%;
	margin: auto;
	transition: transform .4s ease-out;
}


	
.product-photo video {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	transition: transform .4s ease-out;
}


.product-name {
	position: relative;
	overflow: hidden;
	text-align: center;
	font-weight: bold;
	max-width: 100%;
	/*border:  1px solid lightslategray;*/
	background-color: lightgray;
	max-height: ;

  height: 2.3vh;
  display: flex;
  flex-direction: column;
  background: lightgray;
  cursor: pointer;
}

.product-cat {
	position: relative;
	overflow: hidden;
	text-align: center;
	font-weight: normal;
	max-width: 100%;
}



.product-dt {
		
		font-size: 7px;
		text-align: center;
}

.product-photo img:hover {
	transform: scale(1.05);
	cursor:  pointer;

}


.bg-success
{
	--bs-bg-opacity: 1;
  background-color: rgb(25, 83, 135) !important;
}

.ok
{
	background-color: #51A1D0;
}
								@media only screen and (min-width: 450px) {
									.product-wrapper {
										width: 50%;
									}
								}

								@media only screen and (min-width: 768px) {
									.product-wrapper {
										width: 30%;
									}
								}

								@media only screen and (min-width: 1000px) {
									.product-wrapper {
										width: 16%;
									}
								}


.button {
	padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
  cursor: pointer;
  text-transform: none;
  border-radius: 0;
  box-sizing: border-box;
  -webkit-appearance: button;
}

.button:hover
{
	cursor: pointer;
}

.kfile-image{
   width: 100px;
   height: 100px;
   float:left; 
   margin-bottom:5px; margin-left:5px;
   border:2px solid #b06c1c;
   border-radius:10px;
   position: relative;
}

.btn-delete {
   position: absolute;
   cursor: pointer;
   right: 2px;
   top: 2px;
    z-index: 200;
   /* This was edited out because it was stupid. See fernholz's answer.
   left: 100%; 
   margin-left: -10px;
   margin-top: 2px; */
}

.img-pos{
    position: relative;
   width: 100px;
   height: 100px;
   float:left; 
   margin-bottom:5px; margin-left:5px;
   border:1px solid #efefef;
   border-radius:10px;
   position: relative;

}
.img-pos img.close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;
    font-weight: bold;
    cursor: pointer;
    width: 20px;
}
.img-pos img.show {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 100;
    font-weight: bold;
    cursor: pointer;
    width: 20px;
}