.convertor-layout .Choosebutton {
    margin: 20px 0;
}

.convertor-layout img {
    max-height: 100%;
    max-width: 100%;
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.75);
}

.convertor-layout .dropTarget {
    position: relative;
    /* border: 3px dashed silver; */
    border-radius: 24px;
    flex-basis: auto;
    flex-grow: 20;
    height: 40vh;
    width: 60%;
    min-height: 40vh;
    max-height: 40vh;
}

.convertor-layout .dropTarget::before {
    content: 'Drop your files here';
    color: black;
    font-size: 5vh;
    height: 5vh;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    pointer-events: none;
    user-select: none;
}

.convertor-layout #previews>.files-list >div.imageBox {
    box-sizing: border-box;
    height: auto;
    width: 240px;
    padding: 20px;
    display: inline-block;
    justify-content: center;
    align-items: center;
    vertical-align: top;
}

.convertor-layout #previews>.files-list >div.imageBox>progress {
    width: 80%;
}

.convertor-layout {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;
    min-height: calc(60vh - 10rem);  
    width: 100%;
}

.gradient:nth-child(1){
    background-image: radial-gradient(circle closest-side, #208dec94, #0d6fc46f);
    animation: 3s infinite alternate floating;
}
.gradient:nth-child(2){
    background-image: radial-gradient(circle closest-side, #3f95e194, #1f09826f);
    animation: 3s infinite alternate floating;
}
.gradient:nth-child(3){
    background-image: radial-gradient(circle closest-side, #1f5ad1b0, #7013a96f);
    animation: 3s infinite alternate floating;
}
.gradient:nth-child(4){
    background-image: radial-gradient(circle closest-side, #442dd47e, #0b5d8d6f);
    /* animation: 3s infinite alternate floating; */
}
.gradient:nth-child(5){
    background-image: radial-gradient(circle closest-side, #3f95e194, #1f09826f);
    animation: 3s infinite alternate floating;
}

@keyframes floating {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-10px);
	}
	100% {
		transform: translatey(0px);
	}
}

.checkbox {
    opacity: 0;
    position: absolute;
  }
  
  .checkbox-label {
    background-color: #111;
    width: 50px;
    height: 26px;
    border-radius: 50px;
    position: relative;
    padding: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .fa-moon {color: #f1c40f;}
  
  .fa-sun {color: #f39c12;}
  
  .checkbox-label .ball {
    background-color: #fff;
    width: 22px;
    height: 22px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    transition: transform 0.2s linear;
  }
  
  .checkbox:checked + .checkbox-label .ball {
    transform: translateX(24px);
  }