.uploadimg-container .photo__frame{
    border: 1px dashed var(--color-ccc);
    cursor: grab;
    overflow: hidden;
    position: relative;
    margin: auto;
    display: inline-block;
    border-radius: 10px;
}
.uploadimg-container .photo__frame:hover, .is-dragover .uploadimg-container .photo__frame, .is-dragover .uploadimg-container:not(.photo--empty) .photo__helper,
.dropZoneui .dropzone:hover, .dropZoneui .dropzone.dz-drag-hover{
  background-color: var(--lightblue);
  border-color: var(--primary);
}
.uploadimg-container.photo--empty .photo__frame{
  width: 98% !important;
  height: 100% !important;
  cursor: pointer;
  border-radius: 10px;
}

 .profileimg-container .currentimg-container{
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--gray);
  position: relative;
}
.currentimg-container img{
  max-width: 160px;
}


.photo__frame .message {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--theme);
  z-index: 3; 
  width: 100%;
}

.uploadimg-container .message > span, .dropZoneui:not(.dropZoneui-full) .dz-message .material-symbols-rounded{
  font-size: 50px;
  line-height: normal;
  color: var(--primary);
  width: 100%;
}
.uploadimg-container .message > p, .dropZoneui .dz-message .text-primary{
  font-size: 1.5rem;
  font-weight: 500;
}

body.dark-mode .uploadimg-container .message > p{
  color: var(--dark-text-clr);
}
body.dark-mode .uploadimg-container .photo__frame:hover .message > p{
  color: var(--theme);
}

.photo__options {
  position: absolute;
  top: 105%;
  text-align: center;
  list-style: none;
  width: 70%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.photo--empty .message.is-empty, .is-desktop .message--desktop {
  display: block;
}

.zoom-handler.zoom--maxValue ~ .max_zoom{
  font-size: 30px;
  line-height: 30px;
}
.photo__zoom{
  position: relative;
}
.photo__zoom input ~ span{
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
  color: var(--secondary);
}

.photo__zoom input ~ span.min_zoom{
    right: unset;
    left: 0px;
}

.photo__zoom input ~ span.max_zoom{
  font-size: 30px;
}

.photo__zoom input.zoom--minValue ~ span.min_zoom, .photo__zoom input.zoom--maxValue ~ span.max_zoom{
  color: var(--gray);
}



.currentimg-container > img:not([src^="data:image"]) + #removeCurImg{
  display: block !important;
  line-height: 30px;
}


 /* IMMUTABLE */
.hide {
  display: none !important;
}

.photo__zoom input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.photo__zoom input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
.photo__zoom input[type=range]:focus {
  outline: none;
}
.photo__zoom input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.photo__zoom input[type=range]:focus::-ms-thumb {
  border-color: var(--darkblue);
  box-shadow: 0 0 1px 0px var(--darkblue);
}
.photo__zoom input[type=range]:focus::-moz-range-thumb {
  border-color: var(--darkblue);
  box-shadow: 0 0 1px 0px var(--darkblue);
}
.photo__zoom input[type=range]:focus::-webkit-slider-thumb {
  border-color: var(--darkblue);
  box-shadow: 0 0 1px 0px var(--darkblue);
}
.photo__zoom input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -9px;
  box-sizing: border-box;
  cursor: pointer;
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 50%;
  background: var(--lightgray);
  border: 1px solid var(--gray);
}
.photo__zoom input[type=range]::-webkit-slider-thumb:hover {
  border-color: var(--color-ccc);
}
.photo__zoom input[type=range]::-ms-thumb {
  margin-top: 0;
  box-sizing: border-box;
  cursor: pointer;
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 50%;
  background: var(--lightgray);
  border: 1px solid var(--gray);
}
.photo__zoom input[type=range]::-ms-thumb:hover {
  border-color: var(--color-ccc);
}
.photo__zoom input[type=range]::-moz-range-thumb {
  margin-top: 0;
  box-sizing: border-box;
  cursor: pointer;
  width: 18px;
  height: 18px;
  display: block;
  border-radius: 50%;
  background: var(--lightgray);
  border: 1px solid var(--gray);
}
.photo__zoom input[type=range]::-moz-range-thumb:hover {
  border-color: var(--color-ccc);
}
.photo__zoom input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: var(--lightgray);
  border: 0;
}
.photo__zoom input[type=range]::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: var(--lightgray);
  border: 0;
}
.photo__zoom input[type=range]::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: var(--lightgray);
  border: 0;
}



/**
* FRAME STYLE
*/
.photo__helper {
  position: relative;
  padding: 15px 0;
}
.uploadimg-container:not(.photo--empty) .photo__helper{
  border: 1px solid var(--lightgray);
  border-radius: 10px;
  overflow: hidden;
}

.photo__helper .canvas--helper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.photo__frame img,
.photo__helper {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.profile {
  position: relative;
  font-family: 'HelveticaNeueLTPro-Roman', sans-serif;
  font-size: 85%;
  width: 300px;
}
.photo input[type=file] {
  display: none;
}

.photo__frame img,
.photo__helper img {
  position: relative;
}
.photo__frame .is-dragover {
  display: none;
}
.photo--empty .photo__frame {
  cursor: pointer;
}
/**
* IMG states
*/
.profile.is-dragover .photo__frame img,
.photo--empty img,
.photo--error img,
.photo--error--file-type img,
.photo--error--image-size img,
.photo--loading img {
  display: none;
}
/**
* States
*/
/** SELECT PHOTO MESSAGE */
.message--desktop,
.message--mobile {
  display: none;
}
/* MOBILE */
.is-mobile .message--mobile {
  display: inline-block;
}
.is-mobile .message--desktop {
  display: none;
}
.is-desktop .message--mobile {
  display: none;
}
/* DEFAULT */
.message.is-empty,
.message.is-loading,
.message.is-wrong-file-type,
.message.is-wrong-image-size,
.message.is-something-wrong,
.message.is-dragover {
  display: none;
}
/* EMPTY */
.photo--empty .photo__options {
  display: none;
}
/* LOADING */
.photo--loading .message.is-loading {
  display: inline-block;
}
.photo--loading .message.is-empty,
.photo--loading .message.is-wrong-file-type,
.photo--loading .message.is-dragover,
.photo--loading .message.is-wrong-image-size,
.photo--loading .photo__options {
  display: none;
}
/* ERROR */
/* UNKNOWN */
.photo--error .message.is-empty,
.photo--error .message.is-loading,
.photo--error .message.is-dragover,
.photo--error .message.is-wrong-image-size,
.photo--error .photo__options {
  display: none;
}
.photo--error .message.is-something-wrong {
  display: inline-block;
}
/* FILE TYPE*/
.photo--error--file-type .message.is-empty,
.photo--error--file-type .message.is-loading,
.photo--error--file-type .message.is-dragover,
.photo--error--file-type .message.is-wrong-image-size,
.photo--error--file-type .photo__options {
  display: none;
}
.photo--error--file-type .message.is-wrong-file-type {
  display: inline-block;
}
/* IMAGE SIZE */
.photo--error--image-size .message.is-empty,
.photo--error--image-size .message.is-loading,
.photo--error--image-size .message.is-dragover,
.photo--error--image-size .message.is-wrong-file-type,
.photo--error--image-size .photo__options {
  display: none;
}
.photo--error--image-size .message.is-wrong-image-size {
  display: inline-block;
}
/* DRAGOVER */
.profile.is-dragover .photo__frame .is-dragover {
  display: inline-block;
}
.profile.is-dragover .message.is-empty,
.profile.is-dragover .message.is-loading,
.profile.is-dragover .message.is-wrong-file-type,
.profile.is-dragover .message.is-wrong-image-size {
  display: none;
}

.disabled {
  pointer-events: none;
  opacity: 0.5; 
}

@media only screen and (max-width:767px){
  .currentimg-container img {
    max-width: 100px;
  }
}