*{
  font-family: Calibri, sans-serif;
}

html {
  scroll-behavior: smooth;
  
}

body{
  /* background-color: #f8f8f8 !important; */
  background-image: url("/static/images/1072.jpg");
}

a:focus,
li:focus{
  text-decoration: none !important;
}

.main {
  margin-top: 30px;
  margin-left: 100px;
  margin-right: 100px;
  margin-bottom: 50px;
}

.header-title{
  font-size: 18px;
  margin-top: -40;
}

.mb-0{
  cursor: pointer;
}

/* f106 angle up f107 angle down */
.plus-icon:after{
  font-family: 'FontAwesome';
  content: "\f107";
  float: right;
  color: inherit;
}

.minus-icon:after{
  font-family: 'FontAwesome';
  content: "\f106";
  float: right;
  color: inherit;
}

button:focus{
  outline: none !important;
}

.button-upload{
  border-radius: 0.3rem;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width: 115px;
  height: 34px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 0.4rem;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #E8A8A2;
  color: white;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07);
}

.button-upload:hover{
  background-color: #c48e89;
}

.button-upload:disabled{
  border-radius: 0.3rem;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  width: 115px;
  height: 34px;
  border-radius: 3px;
  cursor: default;
  margin-top: 0.4rem;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #a9a9a9;
  color: rgb(20, 20, 20);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07);
  text-align: center;
}

.button-upload:disabled:hover{
  background-color: #a9a9a9;
  color: rgb(20, 20, 20);
}

.upload-row{
  margin-top: 1rem;
}

.button-customize {
  border-radius: 0.3rem;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-size: 12px;
  width: 115px;
  height: 34px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 0.4rem;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid #4D4D4D;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: white;
  color: #4D4D4D;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07);
}

.button-customize:hover{
  background-color: #4d4d4d;
  color: white;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


.button-generate {
  border-radius: 0.3rem;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-size: 12px;
  width: 100%;
  height: 60px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 0.4rem;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #056571;
  color: white;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07);
}

.button-generate:hover{
  background-color: #014750;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.button-graph{
  border-radius: 0.3rem;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-size: 12px;
  width: 115px;
  height: 34px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 0.4rem;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: white;
  border-color: #4D4D4D;
  color: #4D4D4D;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07);
}

.button-graph:hover{
  background-color: rgb(175, 175, 175);
  border-color: white;
  color: white;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.button-export{
  border-radius: 0.3rem;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-size: 12px;
  width: 115px;
  height: 34px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 0.4rem;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #4D4D4D;
  color: white;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07);
}

.button-export:hover{
  background-color: #2e2e2e;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.export{
  position: relative;
  display: inline-block;
}

.export-content{
  display: none;
  position: absolute;
  background-color: none;
  min-width: 130px;
  z-index: 1;
  bottom: 35px;
}

.export:hover .export-content{
  display: block;
}

.export-content button{
  display: block;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-size: 12px;
  width: 115px;
  height: 34px;
  cursor: pointer;
  margin-top: 0.1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #4D4D4D;
  color: white;
}

.export-content button:hover{
  background-color: rgb(175, 175, 175);
  border-color: white;
  color: white;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.button-close-modal{
  border-radius: 0.3rem;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-size: 12px;
  width: 115px;
  height: 34px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 0.4rem;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #D11A2A;
  color: white;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07);
}

.button-close-modal:hover{
  background-color: #8f141e;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#file-chosen{
  margin-left: 0.3rem;
  font-size: 0.8rem;
}

.navbar{
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.055);
  height: 70px;
}

.navbar-text a{
 text-decoration: none;
 font-size: 24px;
 color:black;
}

.navbar-text a:hover{
  text-decoration: none;
  color:rgb(65, 65, 65);
 }

.icon-bar{
  font-size: 25px;
  
}

button:disabled{
  border: none;
  margin: 0;
  text-decoration: none;
  text-align: center;
  transition: background 250ms ease-in-out, 
              transform 150ms ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
  color: black;
  text-align: left;
}

.sidenav{
position: fixed;

}

#mySidenav a {
  left: -130px;
  width: 180px;
  padding: 15px;
  position: absolute;
  transition: 0.3s;
  font-size: 12px;
  text-decoration: none;
  border-radius: 0px 5px 5px 0px;
  text-indent: 0.3rem;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}
#mySidenav a:hover {
  left:0;
  position: absolute;
  z-index: 9999999;
}

#upload {
  top: 17vh;
}
#visual {
  top: 27vh;
}
#help {
  top: 37vh;
}
#setting{
  top: 47vh;
}
#twitter-share-button {
  top: 57vh;
}
#facebook-share-button {
  top: 67vh;
}

.upload-icon {
  font-size: 12px;
}
.visual-icon {
  margin-left: 5.8rem;
  font-size: 18px;
}
.help-icon {
  margin-left: 9.5rem;
  font-size: 18px;
}
.setting-icon {
  font-size: 18px;
  margin-top: 2px;
  margin-left: 1.5rem;
}

.tweet-icon {
  margin-left: 9rem;
  font-size: 18px;
}

.facebook-icon {
  margin-left: 2.8rem;
  font-size: 18px;
}

.upload{
  top: -0.2rem;
  margin-left: 1.4rem;
}

.cog{
  margin-left: 2.6rem;
  top: 0.5rem;
}

.sidenav-active{
  background-color: #414141;
  color: white;
}
.sidenav-active a{
  color: white;
  background-color: #414141;
  text-decoration: none;
}

.twitter, .twitter a, .twitter a:hover{
  color: #00ACEE;
}

.facebook, .facebook a, .facebook a:hover{
  color: #2B5998;
}



.sidenav-active a:hover{
  color: white;
}

.sidenav-active i{
  color: white;
}

.sidenav-deactive{
  background-color: white;
  color: #414141;
}
.sidenav-deactive a{
  color: #414141;
  background-color: white;
  text-decoration: none;
}

.sidenav-deactive a:hover{
  color: #414141;
}

.sidenav-deactive a i{
  color: #414141;
}



/*drag & drop*/
.container {
  padding: 5px;
}
 
.box {
  position: relative;
  background: #ffffff;
  width: 100%;
}
 
.box-header {
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
  border-bottom: 1px solid #f4f4f4;
  margin-bottom: 10px;
}
 
.box-tools {
  position: absolute;
  right: 10px;
  top: 5px;
}
 
.dropzone-wrapper {
  border: 1px solid #707070;
  position: relative;
  height: 35vh;
  width: 80%;
  border-radius: 6px;
  margin: 1%;
}

.dropzone-text-tag{
  text-decoration: none !important;
  color:#707070;
  position: absolute;
  z-index: 9999;
}

.dropzone-text-tag:hover{
  text-decoration: none !important;
  color:#000000;
}

.drop-text{
  display: inline-block;
  margin:  auto;
  margin-right: 29%;
}

.dropzone-box{
  border:none;
  position: relative;
  height: 41vh;
  width: 80%;
  bottom: 0;
}

.dropzone-button{
 top: 0;
 margin-left: 34%;
}

.dropzone-desc {
  position: absolute;
  margin:  auto;
  left: 0;
  right: 0;
  text-align: center;
  width: 100%;
  top: 50px;
  font-size: 14px;
  color:#707070 ;
}
.dropzone-desc p{
  margin-top: 15px;
}
 
.dropzone,
.dropzone:focus {
  position: absolute;
  outline: none !important;
  width: 100%;
  height: 150px;
  cursor: pointer;
  opacity: 0;
}
 
.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
  background: #ecf0f5;
}
 
.preview-zone {
  text-align: center;
  width: 92%;
}
 
.preview-zone .box {
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 0;
}
 
.view-dataset-box{
  border: 1px solid #707070;
  position: relative;
  height: 25vh;
  width: 90%;
  margin: 4%;
  bottom: 0;
  border-radius: 6px;
  box-shadow: 0 3px 6px #00000029;
 
}

.gen-setting-box{
  border: 1px solid #707070;
  position: relative;
  height: 20vh;
  width: 100%;
  bottom: 0;
  border-radius: 6px;
  box-shadow: 0 3px 6px #00000029;
  align-content: center;
  vertical-align: middle;
  background-color: white;
}




.dataset-content{
  margin-top: 2%;
}

/* stepper */

.btn-circle-3 {
  width: 40px;
  height: 40px;
  border: none;
  background-color: white;
  color: #59698D;
  border-radius: 50%;
  padding: 18px 18px 15px 15px;
  margin-top: -22px;
  display: flex; /* or inline-flex */
  align-items: center; 
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07);
  float: right;
}

.btn-circle-3:hover {
  border: 1px solid #bababa;
  color: black !important;
  background-color: #bababa !important;
  text-decoration: none;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  
}
.btn-circle-3 a {
  font-size: 1.2rem;
  text-decoration: none;
}


.btn-circle{
  color: white !important;
  background-color: #310000 !important;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  padding: 18px 18px 15px 15px;
  margin-top: -22px;
  display: flex; /* or inline-flex */
  align-items: center; 
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07);
  font-size: 12px;
  float: right;
  position: relative;
  z-index: 1;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  
}

.btn-circle:after{
  font-family: FontAwesome;
  content: "\f00c" !important;
  transition: opacity 0.5s linear;
}

.btn-circle:hover {
  border: 1px solid #692020;
  color: white !important;
  background-color: #692020 !important;
  text-decoration: none;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  
}

.step-active{
  color: white !important;
  background-color: #310000 !important;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  
}

.step-active:hover{
  border: 1px solid #551414;
  color: white !important;
  background-color: #551414 !important;
  text-decoration: none;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  
}

li{
  list-style-type: none;
}

.fixed-element {
    position:fixed;
    top: 30vh;
}

.step-2,
.step-3{
  margin-top: 20vh;
}

/* #progressbar li.btn-circle:after{
  width: 2px;
  background: #310000;
}
 */
#progressbar li:after {
  content: "";
  width: 1px;
  height: 100%;
  background: #bababa;
  margin-left: 18px;
  position: absolute;
  z-index: -10;
}


.btn-all-line {
  bottom: 0px;
  content: "";
  width: 2px;
  height: 100%;
  background: #310000;
  position: absolute;
  margin-left: 18px;
  z-index: -9;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  
} 

.btn-line:before{
  content: "";
  width: 2px;
  height: 45%;
  background: #310000;
  position: absolute;
  z-index: -1;
  top: 3%;
  transition: color 1s ease-in-out, background-color 0.75s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  
}


.bullet-label{
  text-align: right;
  position: fixed;
  margin-top: 6vh;
  margin-right: 2%;
}

.label-2{
  margin-top: 32vh;
  text-align: right;
}

.label-3{
  margin-top: 58vh;
  text-align: right;
}
/* end of stepper */

.table-view td,
.table-view th{
  width: 107px;
}


.previewtable th:first-child {
  text-align: left;
}

.previewtable th {
  text-align: center;
}

.table-result,
.table-view{
  table-layout: fixed ;
  width: 100%;
}


.table-result td,
.table-result th{
  width: 107px;
}


table {
  border: 1px solid #eeeeee;
  font-size: 12px;
  height: 100px;
 /*  word-wrap: inherit; */
  overflow-x: scroll;
  overflow-y: scroll;
  
}

/* tr {
  width: 100%;
} */


td{
  border: solid 1px #c9c9c9;
}

tr:nth-of-type(odd) {
  background: #eeeeee;
}

.bullet {
  height: 20;
  width: 20px;
  border-radius: 100%;
  border: 1px solid #28a745;
  color: #28a745;
  display: inline-block;
  position: relative;
  transition: background-color 500ms;
  line-height: 20px;
}

.bullet.completed {
  color: white;
  background-color: #28a745;
}

.bullet.completed::after {
  content: '';
  position: absolute;
  height: 1px;
  width: 54px;
  background-color: #28a745;
  right: -60px;
  bottom: 10px;
}


/* webkit browsers */

* {
  scrollbar-width: thin;
  scrollbar-color: #8a8a8a white;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

*::-webkit-scrollbar-track {
  background: white;
}

*::-webkit-scrollbar-thumb {
  background-color: #8a8a8a;
  border-radius: 13px;
  border: 3px solid white;
}

.bg-main{
  position: relative;
  height: auto;
  margin: auto;
  width: 89%;
  border-radius: 6px;
  box-shadow: 0 3px 6px #00000029;
  vertical-align: middle;
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}

.bg-main .first-bg{
  min-height: 400px;
}

.bg-main .second-bg{
  min-height: 310px;
}

.bg-main .third-bg{
  min-height: 120px;
}

.card-2,
.card-3{
  margin-top: 60px;
}

/* preloader */

.pre-loader{

  width: 100%;
  top: 0;
  left: 0;
  margin-left: -5%;
  z-index: 99999;
  position: fixed;
  height:2000px;
  background: rgba(255, 255, 255, 0.59) no-repeat;
  }
  
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }

  .load{
    width: 100%;
    top: 0;
    left: 0;
    margin-left: -5%;
    z-index: 9999;
    position: fixed;
    height:2000px;
    background: rgba(255, 255, 255, 0.59) no-repeat;

}

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  margin-top: 30%;
  margin-left: 50%;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid rgb(141, 68, 68);
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}


  
  /* end of preloader */

  

 /*  @media (max-width: 640px),(max-width: 768px),(max-width:825px),(max-width:958px) */
@media (min-width:600px) {
  .navbar-text a{
    font-size: 18px;
   }
   .header-title{
    font-size: 14px;
  }
  .fixed-element {
   margin-left: -35px;
  }
  .btn-circle-3 {
    width: 20px;
    height: 20px;
  }
  #step-2,#step-3{
    margin-top: 20vh;
  }
 
  .btn-circle{
    width: 20px;
    height: 20px;
  }
  #progressbar li:after{
    margin-left: 15px;
  }
  .btn-all-line {
    margin-left: 14px;
    width: 2px;
  }
  .gen-setting-box{
    width: 430px;
    height: fit-content;
  }
  .steps-container{
    margin-left: -50px;
  }
  .dropzone-wrapper {
    width: 370px;
  }
  .label-gen{
    margin-left: 20px;
  }
  #selectTarget, #quantity{
    width: 370px;
    margin-left: 20px;
  }
  .button-customize{
    margin-left: 20px;
    margin-top: -20px;
  }
  .bg-main{
    margin-left: 25%;
    width: 460px;
  }
  .second-bg, .third-bg{
    margin-top: -45px;
  }
  .drop-text{
    text-align: center;
    margin-left: 25%;
  }
  .dropzone-text-tag{
    display: block;
    left: 20%;
  }
  .bullet-label{
    display:none;
  }
  .dropzone-button{
    margin-left: 44%;
    vertical-align: middle;
  }

  .input-upload {
    margin-top: 5%;
  }

  .label-text{
    margin-left: 6%;
  }
  .view-dataset-box{
    width: 400px;
    margin: 10px;
  }

  #selectfile{
    width: 350px;
    margin-left: 20px;
  }

  .btn-upload-sample{
    margin-left: 20px;
  }
  .load-text{
   top: 65%;
   left: 10%;
  }
  .load{
    top: 13%;
    width: 110%;
  }

  .logo-brand{
    margin-right: -70px;
  }

 

}


@media (min-width: 768px) {
  .navbar-text a{
    font-size: 18px;
   }
   .header-title{
    font-size: 14px;
  }
  .fixed-element {
   margin-left: -35px;
  }
  .btn-circle-3 {
    width: 20px;
    height: 20px;
  }
  #step-2,#step-3{
    margin-top: 20vh;
  }
  .btn-line:before{
    height: 48%;
    margin-top: -10%;
  }
  .btn-circle{
    width: 20px;
    height: 20px;
  }
  #progressbar li:after{
    margin-left: 15px;
    
  }
  .btn-all-line {
    margin-left: 14px;
    width: 2px;
  }
  .steps-container{
    margin-left: -50px;
  }
  .dropzone-wrapper {
    width: 370px;
  }
 
  .gen-setting-box{
    width: 430px;
    height: 250px;
   display: block;
  }

  .label-gen{
    margin-left: 20px;
    width: max-content;
  }
  .quantity-label{
    display: block;
    content: "\a";
  }
  #selectTarget, #quantity{
    width: 350px;
    margin-left: 20px;
    display: block;
    content: "\a";
  }
  .gen-item{
    margin-top: 80px;
    left: -42%;
  }
 
  .button-customize{
    margin-top: 135px;
    margin-left: -325px;
  }
  .bg-main{
    margin-left: 25%;
    width: 460px;
    margin-top: 10%;
  }
  .second-bg, .third-bg{
    margin-top: -20%;
  }

  .dropzone-desc{
    margin-top: 9%;
  }
  .drop-text{
    text-align: center;
    margin-left: 25%;
  }
  .dropzone-text-tag{
    display: block;
    left: 20%;
  }
  .bullet-label{
    display:none;
  }
  .dropzone-button{
    margin-left: 27%;
    vertical-align: middle;
    margin-top: 5%;
  }

  .input-upload {
    margin-top: 5%;
  }
  .sample-dataset-content{
    vertical-align: middle;
    margin-top: 15%;
    margin-left: -3%;
  }
  .view-dataset-box{
    width: 400px;
    margin-top: 5%;
  }

  .load-text{
   margin-top: 14%;
   left: 20%;
  }
  .load{
    left: -3%;
    top: -3%;
    width: 100%;
  }
 
  .lds-ripple {
    margin-left: 60%;
    top: 5%;
  }

  .logo-brand{
    margin-right: -35px;
  }

  .pre-loader{

    left: -5%;
    }
  
}


@media (min-width: 992px) {
  .dropzone-box{
    width: 80% !important;
  }
}

@media (min-width: 1200px){
  .dropzone-box{
    width: 83% !important;
  }
  .dropzone-wrapper {
    height: 35vh;
    width: 80%;
  }
  .dropzone-text-tag{
    display: inline;
    margin-left: 10%;
  }

  .fixed-element {
    position:fixed;
    top: 30vh;
}
.drop-text{
  margin-left: 1%;
}
.dropzone-text-tag{
  left: 43%;
}
.dropzone-button{
  margin-left: 34%;
  margin-top: 0;
}
.view-dataset-box{
  height: 25vh;
  width: 96%;
  margin-top: 2%;
}
.sample-dataset-content{
  vertical-align: middle;
  margin-left: -3%;
  margin-top: 2%;
}
.label-text{
  margin-left: 3%;
}

#selectfile{
  width: 500px;
  margin-left: 20px;
}

.btn-upload-sample{
  margin-left: 20px;
}
.gen-setting-box{
  width: 430px;
  height: fit-content;
}
.label-gen{
  margin-left: -10px;
}
#selectTarget{
  width: 250px;
  margin-left: -10px;
}
#quantity{
  width: 250px;
  margin-left: -30px;
}

.quantity-label{
  margin-left: -30px;
}
.gen-setting-box{
  height: 20vh;
  width: 100%;
  bottom: 0;
  align-content: center;
  vertical-align: middle;
}
.button-customize{
  margin-left: 0;
  margin-top: 4px;
}

.second-bg, .third-bg{
  margin-top: -80%;
}
  .bullet-label{
   display: initial;
  }
  .btn-circle-3{
    width: 40px;
    height: 40px;
  }
  .btn-circle{
    width: 40px;
    height: 40px;
  }

  #progressbar li:after {
    margin-left: 18px;
  }
  .btn-all-line {
    width: 2px;
    margin-left: 17px;
  }
  .steps-container{
    margin-left: 0;
  }
  .bg-main{
    height: auto;
    margin: auto;
    width: 89%;
  }
  
  .second-bg, .third-bg{
    margin-top: 0;
  }
  .dropzone-desc{
    margin-top: 0;
  }

  .load-text{
    margin-top: -5%;
    left: 0;
   }
   .load{
     top: -20%;
     left: 2%;
     width: 100%;
   }

   .lds-ripple {
     margin-left: 50%;
     top: -2%;
   }
   .gen-item{
    margin-top: 0;
    left: 0;
  }

  .input-upload {
    margin-top: 0;
  }
  .pre-loader{

    left: 5%;
    }

    
}

@media (min-width: 1500px) {
 /*  .dropzone-box{
    width: 83% !important;
  } */

  .bg-main{
    margin-top: 4%;
  }
  
  .dropzone-desc {
    top: 100px;
  }
  .sample-dataset-content{
    margin-top: 8%;
  }
  .bullet-label{
    margin-top: 15vh;
  }
  
  .label-2{
    margin-top: 39vh;
  }
  
  .label-3{
    margin-top: 62.5vh;
  }


  .gen-setting-box{
    height: 15vh;
  }

  .container-1500{
    margin-top: 7%;
  }

  .second-bg, .third-bg{
    margin-top: -20%;
  }

  .gen-item{
    margin-top: 0;
    left: 0;
  }

  .load-text{
    margin-left: 3%;
  }

   .load{
     top: -20%;
     left: 2%;
   }

   .lds-ripple {
     margin-left: 50%;
     top: -2%;
   }
   
   .logo-brand{
    margin-right: 0px;
  }
  
}

.fileupload {
  background-color: none;
  border: none;
  width: 100%;
  
  text-align: center;
  position: absolute;
  margin:  auto;
  left: 0;
  right: 0;
}

.step-disabled{
  pointer-events: none;
  cursor: default;
}