ul.thumbnails.image_picker_selector {
  overflow: auto;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
	  
  /* GRID */
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
  ul.thumbnails.image_picker_selector li.group {width:100%;} 
  ul.thumbnails.image_picker_selector li.group_title {
    float: none; }
  ul.thumbnails.image_picker_selector li {
    /* margin: 6px;
    float: left; */
    text-align: center; }
    .thumbnails-2nd ul.thumbnails.image_picker_selector, .image-picker-override.thumbnails-2nd.frm_image_options .frm_opt_container {
        /* width: 47%; */
		grid-template-columns: repeat(2, 1fr);
    }
    .thumbnails-3rd ul.thumbnails.image_picker_selector, .image-picker-override.thumbnails-3rd.frm_image_options .frm_opt_container {
        /* width: 31%; */
		grid-template-columns: repeat(3, 1fr);
    }
    .thumbnails-4th ul.thumbnails.image_picker_selector, .image-picker-override.thumbnails-4th.frm_image_options .frm_opt_container {
        /* width: 23%; */
		grid-template-columns: repeat(4, 1fr);
    }
    .last-other ul.thumbnails.image_picker_selector li:nth-last-child(1) {
        grid-column: span 2;
        margin-top: 1em;
    }
    .last-other ul.thumbnails.image_picker_selector li:nth-last-child(1) img {
        display: none;
    }
    .last-other ul.thumbnails.image_picker_selector li:nth-last-child(1) p {
        min-height: auto;
    }
    ul.thumbnails.image_picker_selector li .thumbnail, .image-picker-override.frm_image_options .frm_image_option_container {
        cursor:pointer;
        padding: 20px;
        border: 4px solid #5f5fa0;
        background-color: #e4f1ff;
        border-radius: 12px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none; }
      ul.thumbnails.image_picker_selector li .thumbnail:hover {
          background-color: #c6ffd5;
          border: 4px solid #5fa064; }
      ul.thumbnails.image_picker_selector li .thumbnail img {
        -webkit-user-drag: none;
        height: 150px;
        /* filter: invert(100%); */ }
        ul.thumbnails.image_picker_selector li .thumbnail:hover img {
          filter: invert(0); }
      ul.thumbnails.image_picker_selector li .thumbnail p {
        margin-top: 1em;
        font-size: 1.3em;
        line-height: 1.25em;
        min-height: 2.5em;
        margin-bottom: 1em; }
      .no-label ul.thumbnails.image_picker_selector li .thumbnail p {
        display:none; }
        ul.thumbnails.image_picker_selector li .thumbnail:hover p {
          color: #5f5fa0; }
    ul.thumbnails.image_picker_selector li .thumbnail.selected {
      background: #008300 !important;
      border: 4px solid #008300 !important;
      color: #014201; }
	  .image-picker{display:none;}
	  ul.thumbnails.image_picker_selector li .thumbnail.selected img {
	     filter: invert(100%); }
	  ul.thumbnails.image_picker_selector li .thumbnail.selected p {
	     color: #ffffff; }


/***** OVERRIDE NATIVE IMAGE FIELDS *****/
.image-picker-override.frm_image_options .frm_opt_container {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
.image-picker-override.frm_form_field .frm_opt_container .frm_checkbox.frm_image_option {
    margin: 0 !important;
    width: auto !important;
}
.image-picker-override.frm_image_options .frm_image_option_container img {
    object-fit: unset;
}
.image-picker-override.frm_image_options .frm_image_option_container:hover {
    background-color: #c6ffd5;
    border: 4px solid #5fa064;
}
.image-picker-override.frm_image_options input[type="checkbox"]:checked + .frm_image_option_container {
    background-color: #c6ffd5;
    border: 4px solid #5fa064;
}
.image-picker-override.frm_image_options.frm_blank_field.frm_image_options .frm_image_option_container {
    border-color: var(--border-color-error);
}



/***** RESPONSIVE *****/
@media only screen and (max-width: 767px) {
    ul.thumbnails.image_picker_selector {
        grid-column-gap: 5px;
        grid-row-gap: 5px;
	}
    ul.thumbnails.image_picker_selector li .thumbnail, .image-picker-override.frm_image_options .frm_image_option_container {
        padding:10px;
    }
    ul.thumbnails.image_picker_selector li .thumbnail img {
        height: 100px;
    }
    ul.thumbnails.image_picker_selector li .thumbnail p {
        font-size: 16px;
		margin-top: 10px;
    }
    .frm_style_formidable-style.with_frm_style .frm_submit button {
        padding: 10px 30px;
        width: 100%;
    }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
        .thumbnails-4th ul.thumbnails.image_picker_selector {
			grid-template-columns: repeat(2, 1fr);
        }
        .thumbnails-3rd ul.thumbnails.image_picker_selector li {
            margin: 4px;
        }
}