/*Declaration of Variables*/
:root{
    --primary-color: #eb5e59;
    --secondary-color: #e73d37;
    --background-color: #ebedee;
    --background-secondary-color: #919191;
    --text-color-dark:#333333;
    --text-color-light:#ffffff;
    }  

/*
 * Dashboard skeleton
 */

.main-container{
  display: flex;
  height: 100vh;
}

/*Sidebar*/

.sidebar {
width: 16%;
overflow-x: hidden;
overflow-y: auto;
padding-top: 48px;
background: var(--background-color);
}

.sidebar .nav-link {
  color: var(--text-color-dark);
}

.sidebar .nav-link.active {
  color: var(--primary-color);
} 
  
/*Content*/
  
[role="main"] {
  flex: 1;
  overflow: auto;
  padding-top: 48px;  /* Space for fixed navbar */
  padding-left:15px;
  padding-right:15px;
}

/* Alert */
.alert-position{
  position:fixed; 
  bottom: 20px; 
  right: 20px;
  /*Center position
  left: 50%;
  transform: translateX(-50%);*/
  z-index:9999;
}

/*
 * Pre-processing
 */

.time-point{
  display:flex; 
  height:200px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.time-point-date{
  width: calc(14% - 10px);
  margin-top:5px;
  margin-left:5px;
  cursor: pointer;
}

/*Customize dropzone library*/

.dropzone .dz-preview .dz-progress .dz-upload {
  background: var(--primary-color);
}

.dropzone {
  border: 2px dashed var(--primary-color);
  border-radius: 5px;
  background: white;
  padding:0px;
  margin-left: 5px;
  margin-right: 5px; 
  flex-grow:1;
  flex-basis:0; 
  display: flex;
  justify-content: center ;
  align-items: center;
  align-self: stretch; 
}

/*Other states of uploaded files*/

.file-uploaded {
  border: 2px dashed var(--primary-color);
  border-radius: 5px;
  background:var(--background-color);
  padding:0px;
  margin-left: 5px;
  margin-right: 5px; 
  flex-grow:1;
  flex-basis:0; 
  display: flex;
  justify-content: center ;
  align-items: center;
  align-self: stretch; 
  flex-direction: column;
}

.file-uploaded span{
  text-align: center;
}

.process-in-progress{
  border: 0px;
  color: var(--text-color-light);
}

.process-done{
  border: 0px;
  color: var(--text-color-light);
}