.ugallery-frame{display:block;margin: 0; padding: 0;width: 100%;text-align: center;}
.ugallery-box{width:200px; height:200px;display: inline-block;margin: 0; padding: 0;border: 1px solid #ad9271; border-radius: 5px; 
    background: rgba(255,255,255,0.5) url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM3Nzc3NzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0xMiA0djE2bTgtOEg0IiBjb2xvcj0iY3VycmVudENvbG9yIi8+PC9zdmc+") center center no-repeat; 
    background-size: 30px;
    margin-right: 5px;
}
.box-selectable { cursor: pointer; }
.ugallery-box:hover {border:1px solid #d7c3af; background-color: #d7c3af; cursor: pointer; }

.ugallery-frame {
    position: relative;
	cursor: default;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.ugallery-box:nth-child(1) {
    border: 5px solid var(--selected) !important;
}

.ugallery-box {
	position: relative;
	overflow: hidden;
}

.ugallery-box input[type="file"] {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0 !important;
	border: solid transparent !important;
	width: 100% !important;
    height: 100% !important;
	opacity: .0;
	filter: alpha(opacity= 0);
	cursor: pointer;
}

.ugallery-box-preview {
    background-size: cover;
    display: block;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	width: 100%;
    height: 100%;
	cursor: pointer;
    background-position: center;
}

.ugallery-box-preview-web {
    background-size: cover;
    display: none;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	width: 100%;
    height: 100%;
	cursor: pointer;
    background-position: center;
}


.ugallery-box-uploading {
    display: block;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	width: 100%;
    height: 100%;
	cursor: pointer;
    display: none;
    opacity: 1;
    background: rgba(255,255,255,0.8);
    text-align: center;
}

.ugallery-box-uploading .progress {
    top: 45%;
    margin: 0 auto;
    display: block;
    border: 1px solid #ad9271;
    position: relative;
    width: 90%;
    height: 20px;
    background: #d7c3af;
    overflow: hidden;

    background: repeating-linear-gradient(-45deg,#d7c3af 0 15px,#ad9271 0 20px) left/200% 100%;
    animation: l3 4s infinite linear;
}

@keyframes l3 {
    100% {background-position:right}
}

.ugallery-box-uploading .progress-in {
    display: block;
    position: relative;
    width: 0%;
    height: 20px;
    background: #ad9271;
    color: #ffffff;
    font-size: 14px;
}


.ugallery-box-remove {
    display: block;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	width: 100%;
    height: 100%;
	cursor: pointer;
    display: none;
    opacity: 1;
    background-color: rgba(173, 146, 113, 0);
}

.ugallery-box-remove:hover {
    opacity: 1;
    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCAxMjIuODggMTIyLjg3OSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTIyLjg4IDEyMi44NzkiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiNGRjQxNDEiIGQ9Ik02MS40NCwwYzE2Ljk2LDAsMzIuMzI4LDYuODgyLDQzLjQ1MywxNy45ODZjMTEuMTA0LDExLjEyNSwxNy45ODYsMjYuNDk0LDE3Ljk4Niw0My40NTMgYzAsMTYuOTYxLTYuODgzLDMyLjMyOC0xNy45ODYsNDMuNDUzQzkzLjc2OSwxMTUuOTk4LDc4LjQsMTIyLjg3OSw2MS40NCwxMjIuODc5Yy0xNi45NiwwLTMyLjMyOS02Ljg4MS00My40NTQtMTcuOTg2IEM2Ljg4Miw5My43NjgsMCw3OC40LDAsNjEuNDM5QzAsNDQuNDgsNi44ODIsMjkuMTExLDE3Ljk4NiwxNy45ODZDMjkuMTEyLDYuODgyLDQ0LjQ4LDAsNjEuNDQsMEw2MS40NCwweiBNNzMuNDUyLDM5LjE1MiBjMi43NS0yLjc5Miw3LjIyMS0yLjgwNSw5Ljk4Ni0wLjAyNmMyLjc2NCwyLjc3NiwyLjc3NSw3LjI5MiwwLjAyNywxMC4wODNMNzEuNCw2MS40NDVsMTIuMDc3LDEyLjI1IGMyLjcyOCwyLjc3LDIuNjg5LDcuMjU2LTAuMDgxLDEwLjAyMWMtMi43NzIsMi43NjYtNy4yMjksMi43NTgtOS45NTQtMC4wMTJMNjEuNDQ1LDcxLjU0MUw0OS40MjgsODMuNzI5IGMtMi43NSwyLjc5My03LjIyLDIuODA1LTkuOTg1LDAuMDI1Yy0yLjc2My0yLjc3NS0yLjc3Ni03LjI5MS0wLjAyNi0xMC4wODJMNTEuNDgsNjEuNDM1bC0xMi4wNzgtMTIuMjUgYy0yLjcyNi0yLjc2OS0yLjY4OS03LjI1NiwwLjA4Mi0xMC4wMjJjMi43NzItMi43NjUsNy4yMjktMi43NTgsOS45NTQsMC4wMTNMNjEuNDM1LDUxLjM0TDczLjQ1MiwzOS4xNTJMNzMuNDUyLDM5LjE1MnogTTk2Ljg5OSwyNS45OEM4Ny44MjYsMTYuOTA3LDc1LjI5LDExLjI5Niw2MS40NCwxMS4yOTZjLTEzLjg1MSwwLTI2LjM4Nyw1LjYxMS0zNS40NiwxNC42ODUgYy05LjA3Myw5LjA3My0xNC42ODQsMjEuNjA5LTE0LjY4NCwzNS40NTlzNS42MTEsMjYuMzg3LDE0LjY4NCwzNS40NTljOS4wNzMsOS4wNzQsMjEuNjA5LDE0LjY4NiwzNS40NiwxNC42ODYgYzEzLjg1LDAsMjYuMzg2LTUuNjExLDM1LjQ1OS0xNC42ODZjOS4wNzMtOS4wNzIsMTQuNjg0LTIxLjYwOSwxNC42ODQtMzUuNDU5UzEwNS45NzMsMzUuMDU0LDk2Ljg5OSwyNS45OEw5Ni44OTksMjUuOTh6Ii8+PC9nPjwvc3ZnPg==")
     center center no-repeat;
    background-color: rgba(173, 146, 113, 0.6);
}