:root {
  --uploaderText: var(--black);
  --uploaderBackground: var(--gray240);
  --uploaderRadius: var(--twoTimesPadding);
  --uploaderBorderColor: var(--gray235);
  
  --progressBarBackground: #012D4E;
  --progressBarForeground: var(--blue);
  --progressBarOutline: #0079D5;
  --uploadFileStatus: var(--uploaderText);
}

:root .dark {
  --uploaderText: var(--white);
  --uploaderBackground: #003B67;
  --uploaderBorderColor: var(--borderColor);
  --uploaderRadius: var(--twoTimesPadding);
  
  --progressBarBackground: #012D4E;
  --progressBarForeground: #005697;
  --progressBarOutline: #0079D5;
  --uploadFileStatus: var(--uploaderText);
}

#uploadsContainer {
  /* padding-bottom: 20px; */
  /* grid-column: 2 / 3; */
  /* grid-row: 1; */
  /* position: absolute; */
  /* bottom: 0; */
  /* left: 0; */
  /* right: 0; */
  /* z-index: 3; */
  /* border-bottom: var(--borderColor) solid var(--borderSize); */
  max-height: 200px;
  overflow-y: auto;
  /* min-height: 110px; */
  padding: 0px;
  margin: 0px;
  position: relative;
  top: -1;
}

#uploads {
  /* padding: 10px; */
  /* margin: 0px 2px; */
  /* background: var(--black); */
  text-align: left;
  
  /* max-height: 0px; */
  /* height: 100%; */
  /* width: 100px; */
  /* overflow-x: hidden; */
  /* overflow-y: auto; */
  
  /* align-content: center; */
  /* justify-content: left; */
  /* text-align: center; */
  /* align-items: center; */
  place-content: center start;

  
  /* display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-basis: 250px;
  flex-grow: 0;
  flex-shrink: 0; */

  display: grid;
  grid-template: minmax(0px, auto) / 100%;
  /* grid-auto-flow: row; */
  /* grid-auto-columns: 250px; */
  /* grid-gap: var(--padding); */
  box-sizing: border-box;
  padding: 0px;
  
  /* border-bottom: var(--borderColor) solid var(--borderSize); */
  /* border-top: none; */
  /* border-right: none; */
  /* border-left: none; */
  /* padding: var(--padding); */
  
  /* border-radius: 10px 10px 0px 0px; */
  /* position: relative; */
  /* bottom: 10px; */
  /* left: 0px; */
  /* border-top: none; */
  
  /* background-image: linear-gradient(180deg, rgba(57,54,54,0.50) 0%, rgba(0,0,0,0.50) 100%); */
  /* box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50); */
  /* border-radius: 20px; */
  /* background: var(--textColor); */
  
  

}

.uploadContainer {
    all: unset;
    display: grid;
    grid-template: auto / 1fr 1fr;
    transition: all 250ms;
    overflow: hidden;
    place-content: center center;
    padding: var(--twoTimesPadding);
    /* margin-bottom: var(--twoTimesPadding); */
    min-width: 250px;
    /* width: 100%; */
    /* max-width: 25%; */
    /* background: blue; */
    background: var(--uploaderBackground);
    display: grid;
    grid-template: auto / 4fr 1fr;
/*     margin: var(--uploaderRadius); */
    /* margin-top: 0px; */
    /* border-radius: var(--uploaderRadius); */
    grid-column: 1 / -1;
    grid-row-gap: var(--padding);
    /* box-shadow: 0px 0px 2px 0px rgba(0,0,0, 0.5); */
    border-bottom: 1px solid var(--uploaderBorderColor);
    color: var(--uploaderText);
    border-radius: var(--radius);
    margin-top: 10px;
}

#detailsContent .uploadContainer, #newFilesList .uploadContainer {
  border-radius: var(--radius);
  border: 1px solid var(--uploaderBorderColor);
  margin-bottom: var(--padding);
  margin-top: var(--threeTimesPadding
    
  );
}

.uploadContainer:first-child {
  /* border-bottom: var(--borderColor) solid var(--borderSize); */
  /* margin-top: var(--uploaderRadius); */
}


.uploadContainer:last-child {
  /* border-bottom: var(--borderColor) solid var(--borderSize); */
  /* margin-bottom: var(--uploaderRadius); */
}

.upload-progress-container {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  grid-template: auto auto / 1fr;
  place-content: center;
}

.upload-progress-bar-container {
  border-radius: var(--radius);
  /* border: var(--progressBar) solid var(--borderSize); */
  width: 100%;
  /* grid-column: 2; */
  /* grid-row: 2 / -1; */
  background: var(--progressBarBackground);
  height: 9px;
}

.upload-progress-bar {
  width: 0%;
  height: 100%;
  background: var(--progressBarForeground);
  border: 1px solid var(--progressBarOutline);
  border-radius: var(--radius);
}

.upload-progress-bar.fail {
  width: 100%;
  background: var(--red);
}

.upload-progress-bar.success {
  width: 100%;
  background: var(--green);
}



.upload-progress-number {
  /* grid-column: 2;
  grid-row: 1 / 2;
  display: grid;
  grid-template: auto / auto;
  align-content: center;
  justify-content: end; */
  font-family: csheavy;
  font-size: 18px;
  color: var(--uploaderText);
  text-align: right;
}

.uploads-title {
/*  font-size: 18px;*/
  /* color: var(--background); */
  color: var(--uploaderText);
  font-family: csheavy;-
}

.upload-status {
  color: var(--uploadFileStatus);
}

.upload-status.fail {
  color: var(--red);
}