.ds-image-mask{position: relative;overflow:visible;}
.ds-image-mask--mask {
  z-index: 2;
  position: relative;
}
.ds-image-mask--mask svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ds-image-mask--image {
  height:100%;
  position: absolute;  top:0;left:0;
  top:0;
  left:0;
  z-index: 1;
  width: 100%;
}

.ds-imageselect-checkboxes-wrap {
  display: flex;
  flex-wrap: wrap;
  height: 250px;
  overflow-y: scroll;
}

/* Scrollbar style */
.ds-imageselect-checkboxes-wrap::-webkit-scrollbar {
  width: 5px;
}

.ds-imageselect-checkboxes-wrap::-webkit-scrollbar-track {
  background-color: transparent;
}

.ds-imageselect-checkboxes-wrap::-webkit-scrollbar-thumb {
  background: #2b87da;
  border-radius: 5px;
}

.ds-imageselect-checkbox {
  width: 25%;
  padding: 4px;
}

.ds-imageselect-checkbox .ds-imageselect-img img {
  max-width: 100%;
}

.ds-imageselect-checkbox .ds-imageselect-img i.ds-imageselect-checkmark {
  transform: scale(0);
  width: 15px;
  height: 15px;
  position: absolute;
  top: 5px;
  right: 5px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c3ZnanM9Imh0dHA6Ly9zdmdqcy5jb20vc3ZnanMiIHZlcnNpb249IjEuMSIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAzMzAgMzMwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIj48Zz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGQ9Ik0xNjUsMEM3NC4wMTksMCwwLDc0LjAxOSwwLDE2NXM3NC4wMTksMTY1LDE2NSwxNjVzMTY1LTc0LjAxOSwxNjUtMTY1UzI1NS45ODEsMCwxNjUsMHogTTE2NSwzMDAgICBjLTc0LjQ0LDAtMTM1LTYwLjU2MS0xMzUtMTM1UzkwLjU2LDMwLDE2NSwzMHMxMzUsNjAuNTYxLDEzNSwxMzVTMjM5LjQzOSwzMDAsMTY1LDMwMHoiIGZpbGw9IiM1ZWIzNGIiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0eWxlPSIiIGNsYXNzPSIiLz4KCTxwYXRoIGQ9Ik0yMjYuODcyLDEwNi42NjRsLTg0Ljg1NCw4NC44NTNsLTM4Ljg5LTM4Ljg5MWMtNS44NTctNS44NTctMTUuMzU1LTUuODU4LTIxLjIxMy0wLjAwMSAgIGMtNS44NTgsNS44NTgtNS44NTgsMTUuMzU1LDAsMjEuMjEzbDQ5LjQ5Niw0OS40OThjMi44MTMsMi44MTMsNi42MjgsNC4zOTQsMTAuNjA2LDQuMzk0YzAuMDAxLDAsMCwwLDAuMDAxLDAgICBjMy45NzgsMCw3Ljc5My0xLjU4MSwxMC42MDYtNC4zOTNsOTUuNDYxLTk1LjQ1OWM1Ljg1OC01Ljg1OCw1Ljg1OC0xNS4zNTUsMC0yMS4yMTMgICBDMjQyLjIyNywxMDAuODA3LDIzMi43MywxMDAuODA2LDIyNi44NzIsMTA2LjY2NHoiIGZpbGw9IiM1ZWIzNGIiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0eWxlPSIiIGNsYXNzPSIiLz4KPC9nPgo8L2c+Cjwvc3ZnPgo=);
  background-size: contain;
}

.ds-imageselect-img {
  position: relative;
  background-color: #eef2f6;
  border-radius: 6px;
  transition: all .2s ease;
  padding: 25%;
  opacity: 0.8;
}

.ds-imageselect-img img {
  display: block;
}

.ds-imageselect-checkbox:hover .ds-imageselect-img {
  opacity: 1;
}

.ds-imageselect-checkbox input[type='checkbox']:checked+.ds-imageselect-img {
  background: #fff;
  box-shadow: 0 5px 5px rgba(152, 167, 184, 0.1), 0px 0px 5px rgba(152, 167, 184, 0.15);
  opacity: 1;
}

.ds-imageselect-checkbox input[type='checkbox']:checked+.ds-imageselect-img .ds-imageselect-checkmark {
  transform: scale(1);
  transition: transform .3s ease;
}

.ds-imageselect-checkbox input[type='checkbox'] {
  visibility: hidden;
  position: absolute;
}