
#file_uploader {
  position: relative;
  pointer-events: none;
}
#file_uploader.isDropInput {
  width: 100%;
  height: 100px;
}
#file_uploader.isButtonInput {
  width: 100%;
  height: 50px;
}
#file_uploader.overlay_canvas {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
}
#file_uploader.hidden {
  /*visibility: hidden;*/ /* cannot see but occupy */
  display: none; /* take no place */
}

#popup_dialog_warp {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  background-color: rgba(0, 0, 0,0.8);
}
#popup_dialog {
  position:relative;
  background:#ffffff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 10px;
  top:50%;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, -50%);
  width: 50%;
  text-align: center;
}


#file_uploader_file_list.hidden {
  /*visibility: hidden;*/ /* cannot see but occupy */
  display: none; /* take no place */
}

#file_drop_area {
  pointer-events: auto;
  border: 2px dashed #bbb;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  text-align: center;
  font: 20pt bold 'Vollkorn';
  color: #bbb;
  back-ground-color: rgb(192,192,0);
  
  position: absolute;
  width: 100%;
  height: 98px;
  line-height: 100px;
  background-color: rgba(255, 255, 255,0.5);
}
#file_drop_area.overlay {
  top: 100%;
  left: 0%;
  -webkit-transform: translate(0%, -100%);
  transform: translate(0%, -100%);
  width: 100%;
  height: 98px;
}
#file_drop_area.onDragOver {
  border: 2px dashed rgb(192,192,0);
  color: rgb(192,192,0);
}
#file_drop_area.disable {
  pointer-events: none;
  opacity: 0.6;
}

#file_input_button {
  pointer-events: auto;
  overflow: hidden;
  text-align: center;
  color: white;  
  background-color: #f00;
  border-radius: 8px;
  box-shadow:2px 2px 2px #555;
  transition: background-color 0.2s;
  
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 350px;
  height: 50px;
  line-height: 50px;
  cursor:pointer;
}
#file_input_button.overlay {
  top: 0%;
  left: 0%;
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
}
#file_input_button:hover {
  color: white;  
  background-color: #a00;
  transition: background-color 0.5s;
}
#file_input_button.disable {
  pointer-events: none;
  opacity: 0.6;
}

#file_input_description {
  padding: 0px 10px;
}
#popup_dialog_file_input_button_warp {
  height: 80px;
}
#popup_dialog_file_input_button {
  overflow: hidden;
  text-align: center;
  color: white;  
  background-color: #f00;
  border-radius: 8px;
  box-shadow:2px 2px 2px #555;
  transition: background-color 0.2s;
  
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 300px;
  height: 50px;
  line-height: 50px;
  cursor:pointer;
}
#popup_dialog_file_file_input_button:hover {
  color: white;  
  background-color: #a00;
  transition: background-color 0.5s;
}
