*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

/*----- REMOVE BLUE HIGHLIGHT ON TOUCH -----*/
*:hover,
*:focus,
*:focus-visible,
*:active {
  -webkit-tap-highlight-color: transparent;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

:root {
  --ui-000: #f9f9fa;
  --ui-00: #f4f4f6;
  --ui-0: #ececef;
  --ui-1: #dedee3;
  --ui-2: #d0d0d7;
  --ui-3: #c2c2cb;
  --ui-4: #b5b5c0;
  --ui-5: #a7a7b4;
  --ui-6: #9999a8;
  --ui-7: #8b8b9c;
  --ui-8: #7e7e91;
  --ui-9: #717184;
  --ui-10: #656576;
  --ui-11: #595969;
  --ui-12: #4d4d5b;
  --ui-13: #42424d;
  --ui-14: #36363f;
  --ui-15: #2a2a32;
  --ui-16: #1e1e24;
  --ui-17: #131316;
  --ui-18: #060607;
  --ui-19: #070708;


  --primary-0: #e9e7fe;
  --primary-1: #dbd8fd;
  --primary-2: #cecafc;
  --primary-3: #c1bbfb;
  --primary-4: #b3adfb;
  --primary-5: #a69efa;
  --primary-6: #9890f9;
  --primary-7: #8b81f8;
  --primary-8: #7e72f8;
  --primary-9: #7064f7;
  --primary-10: #6355f6;
  --primary-11: #5547f5;
  --primary-12: #4838f5;
  --primary-13: #3b2af4;
  --primary-14: #2d1bf3;
  --primary-15: #200df2;
  --primary-16: #1e0ce4;
  --primary-17: #1c0bd5;
  --primary-18: #1a0ac7;
  --primary-19: #180ab8;
  --primary-20: #1609aa;
  --primary-21: #14089b;
  --primary-22: #12078d;
  --primary-23: #11077e;
  --primary-24: #0f066f;
  --primary-25: #0d0561;
  --primary-26: #0b0452;
  --primary-27: #090444;
  --primary-28: #070335;
  --primary-29: #050227;
  --primary-30: #030118;


  --error-0: #fceeee;
  --error-1: #f8d8d8;
  --error-2: #f4c2c2;
  --error-3: #f0adad;
  --error-4: #ed9797;
  --error-5: #e98181;
  --error-6: #e56c6c;
  --error-7: #e15656;
  --error-8: #dd4040;
  --error-9: #da2b2b;
  --error-10: #c72323;
  --error-11: #b21f1f;
  --error-12: #9c1c1c;
  --error-13: #861818;
  --error-14: #711414;
  --error-15: #5b1010;
  --error-16: #450c0c;
  --error-17: #300808;
  --error-18: #1a0505;

}

::selection {
  color: #fff;
  background-color: var(--primary-13);
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Mulish', sans-serif;
  line-height: 1.5;
  background-color: var(--ui-00);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}


h1,
h2,
h3,
h4 {
  margin-bottom: 0.5em;
  line-height: 1.25em;
  color: var(--ui-16);
}

h1 {
  font-size: 2.625rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.375rem;
}

h4 {
  font-size: 1.125rem;
}

p {
  margin-bottom: 1.5em;
  color: var(--ui-14);
}

input[type=text],
input[type=number] {
  padding: 0.625rem;
  font-family: 'Mulish', sans-serif;
  font-size: 0.875rem;
  line-height: 1rem;
  border-width: 2px;
  border-style: solid;
  /* border-color: inherit; */
  border-radius: 0.375rem;
  transition: border-color 150ms;
}

/*----- REMOVE DEFAULT NUMBER INCREMENT -----*/
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/*----- HOVER AND FOCUS -----*/
input[type=text]:hover,
input[type=number]:hover {
  /* border-color: inherit; */
  outline: transparent;
}

input[type=text]:focus-within,
input[type=number]:focus-within {
  /* border-color: inherit; */
  outline: transparent;
}

input[type=submit] {
  transition: 150ms;
}


.form-flex-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.num-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.num-input-row label {
  font-size: 0.875rem;
}

.num-input {
  display: flex;
  align-items: center;
  width: 5rem;
  border-color: var(--ui-2);
}

.num-input-row::after {
  pointer-events: none;
  content: "px";
  position: absolute;
  font-size: 0.875rem;
  color: var(--ui-5);
  /* background-color: red; */
  /* transform: translateX(-2.25rem); */
  right: calc(0.625rem + 2px);
}

.num-input:focus-visible {
  border-color: var(--primary-16);
}

.num-input.error {
  border-color: var(--error-6);
}



button,
.link-btn,
.input-btn {
  padding: 0.75rem 1rem;
  font-family: 'Mulish', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  line-height: 1rem;
  color: var(--ui-0);
  text-decoration: none;
  border: solid 1px var(--ui-16);
  border-radius: 0.375rem;
  outline: solid 3px transparent;
  background-color: var(--ui-16);
  transition: 150ms;
}

button:hover,
.link-btn:hover,
.input-btn:hover {
  cursor: pointer;
  border: solid 1px var(--ui-18);
  background-color: var(--ui-18);
}

button:focus-visible,
.link-btn:focus-visible,
.input-btn:focus-visible {
  outline: solid 3px var(--ui-2);
  border: solid 1px var(--ui-2);
}

button:disabled,
.link-btn:disabled,
.input-btn:disabled,
button.disabled,
.link-btn.disabled,
.input-btn.disabled {
  /* pointer-events: none; */
  color: var(--ui-5);
  border: solid 1px var(--ui-0);
  outline: solid 3px transparent;
  background-color: var(--ui-0);
  background-image: none;
}

button:hover:disabled,
.link-btn:hover:disabled,
.input-btn:hover:disabled,
button:hover.disabled,
.link-btn:hover.disabled,
.input-btn:hover.disabled {
  cursor: not-allowed;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

select {
  appearance: none;
  position: relative;
  margin: 0;
  padding: 0.75rem 1rem;
  font-family: 'Mulish', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  line-height: 1rem;
  color: var(--ui-18);
  text-decoration: none;
  border: solid 2px var(--ui-1);
  border-radius: 0.375rem;
  outline: solid 3px transparent;
  background-color: var(--ui-00);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.75rem top 50%;
  background-size: 1rem;
  transition: 150ms;
}

select::-ms-expand {
  display: none;
}

select:hover {
  cursor: pointer;
  border: solid 2px var(--ui-5);
}

select:focus-visible {
  cursor: pointer;
  border: solid 2px var(--ui-5);
  outline: solid 3px var(--ui-2);
}

select:disabled {
  /* pointer-events: none; */
  color: var(--ui-5);
  border: solid 2px var(--ui-1);
  outline: solid 3px transparent;
  background-color: var(--ui-0);
  background-image: none;
}

select:hover:disabled {
  cursor: not-allowed;
}

option {
  border: solid 2px var(--ui-1);
  background-color: var(--ui-00);
  transition: 150ms;
}

option:hover {
  text-align: left;
  line-height: 1rem;
  color: var(--ui-18);
  text-decoration: none;
  background-color: var(--ui-1);
}

.btn-icon {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.btn-icon svg {
  width: 1.5rem;
}

.btn-primary {
  color: #fff;
  border: solid 1px var(--primary-12);
  background-color: var(--primary-12);
}

.btn-primary:hover {
  cursor: pointer;
  border: solid 1px var(--primary-11);
  background-color: var(--primary-11);
}

.btn-primary:focus-visible {
  outline: transparent;
  border: solid 1px var(--primary-15);
}

.btn-primary-dark {
  color: #fff;
  border: solid 1px var(--primary-16);
  outline: solid 3px transparent;
  background-color: var(--primary-16);
}

.btn-primary-dark:hover {
  cursor: pointer;
  border: solid 1px var(--primary-18);
  background-color: var(--primary-18);
}

.btn-primary-dark:focus-visible {
  border: solid 1px var(--primary-18);
  outline: solid 3px var(--primary-4);
  background-color: var(--primary-18);
}

.btn-primary-dark:disabled,
.btn-primary-dark.disabled {
  /* pointer-events: none; */
  color: var(--ui-5);
  border: solid 1px var(--ui-0);
  outline: solid 3px transparent;
  background-color: var(--ui-0);
  background-image: none;
}

.btn-primary-dark:hover:disabled,
.btn-primary-dark:hover.disabled {
  cursor: not-allowed;
}


main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-inline: auto;
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding: 1rem;
  max-width: 600px;
  width: 100%;
  height: auto;
}

#controls {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}




#dropbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: relative;
  padding: 3rem;
  width: 100%;
  min-height: 10rem;
  text-align: center;
  color: var(--ui-8);
  border: 2px solid transparent;
  border-radius: 0.375rem;
  background: var(--ui-0);
  transition: 150ms;
}

#dropbox.added {
  color: var(--primary-16);
  background: var(--primary-0);
}

#dropbox.added #dropbox-icon svg {
  fill: var(--primary-16);
}

#dropbox.error {
  color: var(--error-12);
  background: var(--error-1);
}

#dropbox.error #dropbox-icon svg {
  fill: var(--error-12);
}

#dropbox-icon svg {
  pointer-events: none;
  width: 2.5rem;
  fill: var(--ui-8);
  transition: 150ms;
}

#dropbox-text {
  /* pointer-events: none; */
  /* cursor: default; */
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1em;
}

#dropbox.dragenter {
  color: var(--primary-16);
  border: 2px solid var(--primary-16);
  background: var(--primary-0);
}

#dropbox.dragenter #dropbox-icon svg {
  fill: var(--primary-16);
}

.spin {
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}




/* .bg-color {
  animation-name: bgColor;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes bgColor {
  0% {
    background-color: var(--primary-16);
  }

  50% {
    background-color: var(--error-9);
  }

  100% {
    background-color: var(--primary-16);
  }
} */


.processing-animation {
  /* background: linear-gradient(to right, #1e0ce4 25%, #6355f6 45%, #6355f6 55%, #1e0ce4 75%); */
  background: linear-gradient(to right, #1e0ce4 0%, #6355f6 50%, #1e0ce4 100%);
  background-size: 200% auto;
  animation: processing 2s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes processing {
  0% {
    background-position: 0% 0%
  }

  100% {
    background-position: -200% 0%
  }
}


#output {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.download-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--primary-16);
  padding: 1rem;
  border: 2px solid var(--primary-1);
  border-radius: 0.375rem;
  background: var(--primary-0);
}

.download-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.zip-folder-icon {
  flex-shrink: 0;
  width: 3rem;
  /* fill: var(--primary-10); */
}

.download-text {
  display: flex;
  flex-direction: column;
}

.folder-name {
  margin-bottom: 0.25rem;
  line-height: 1em;
}

.folder-files {
  font-size: 0.875rem;
  line-height: 1em;
}

.download-info .folder-name {
  font-weight: bold;
}



.download-item.disabled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  color: var(--ui-5);
  border: 2px solid var(--ui-1);
  border-radius: 0.375rem;
  background: var(--ui-0);
}




#resize-crop-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.grid-col-head {
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.25em;
  color: var(--ui-16);
}

.form-grid-row {
  display: grid;
  /* grid-template-columns: repeat(autofit, minmax(14rem, 1fr)); */
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}

#column-name {
  flex-grow: 0;
  /* min-width: 12rem; */
}

.file-item {
  padding: 1rem;
  border: 2px solid var(--primary-1);
  border-radius: 0.375rem;
  background: var(--primary-0);
}

.file-item select {
  border: 2px solid var(--primary-1);
}

.file-item select:hover {
  border: 2px solid var(--primary-5);
}

.file-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  font-weight: bold;
  color: var(--primary-16);
}

.file-info .bi-filetype-csv {
  width: 1.75rem;
  fill: var(--primary-16);
}

.file-item.disabled {
  padding: 1rem;
  border: 2px solid var(--ui-1);
  border-radius: 0.375rem;
  background: var(--ui-0);
}

.file-item.disabled .file-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  color: var(--ui-5);
}

.file-item.disabled .bi-filetype-csv {
  fill: var(--ui-5);
}



#image-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
}

.image-preview {
  width: 100%;
  height: auto;
  object-fit: cover;
}




#processing-cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

#processing-bar-cont {
  position: absolute;
  bottom: -2px;
  /* make up for border */
  width: calc(100% + 4px);
  /* make up for border */
  height: 0.5rem;
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
  background-color: none;
  overflow: hidden;
}

#processing-bar {
  display: block;
  width: 0%;
  height: 100%;
  background-color: var(--primary-8);
  transition: 150ms;
}




@keyframes spin-forever {
  100% {
    transform: rotate(360deg)
  }
}

.spin-forever {
  animation: spin-forever 600ms linear infinite;
}



.transition {
  transition: opacity 150ms;
}

/* .fade {
  opacity: 0;
} */