@font-face {
  font-family: 'Montserrat';
  src: url('../TemplateData/fonts/Montserrat-Regular.otf') format('opentype');
  font-weight: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../TemplateData/fonts/Montserrat-Bold.ttf') format('opentype');
  font-weight: bold;
}

#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;
  right: 0;
  bottom: 0;
  z-index: 2147483647;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

#popup_dialog {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 300px;
  text-align: center;
  font-family: Montserrat;
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#popup_dialog_title {
  margin-top: 0;
  font-weight: bold;
  font-size: 1.1rem;
  text-align: left;
  color: #474747;
}

#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;
  background-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;
}

#upload_icon {
  width: 15px;
  height: 15px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAYxQTFRFAAAArKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysuchjUQAAAIR0Uk5TAAyZhAQKi/v1dYz8//Z26v3p/nebibCfDVcYtBFaHI2OeAdJ9OgzhfrzbgVtAh2qbwYJCxRhZ2lCAUxoWzLwpb7hH++kveDx7u1UFzEwL6/H3iTl1hkq59MT0WqDuwirRJFx5OLEvMbm2h6mQS0Dk3nIOt3NKdw3wzaW+diKLGvy1GIiLhoSzQAAA3BJREFUeJzt20tIVFEYwPHz4b2XmexBGaWFBROtIrHMmIJEkMDoQQmWPYxo1SIK2rRq09aNUAgR0YNq0YNCUCgiAosQpKgIISoaCgqqhYuMHKdJHc9933vO+Y53hPjO6szhev+/YbwPLjPAtAZMjHG9PWj9tTkJyGsJtADmBIDBuJZABzDVZ5oCDcB0X1OAB9h9PQEa4OprCbAAT19HgAT4+hoCHCDQxwtQgJA+WoABhPaxAgQgoo8UqAMi+ziBMiCmjxKoAmL7GIEiQNBHCNQAwr66QAkg0VcWqACk+pO3aaMKAgWAr180CnxqAIy592mNyAvkAf73n4LftiVVMerZqYJAGuDvV8JIBZ8baYARpEAWEOibX6r+2IB5n1cUkAJJgLnsh7/PPACGFcgBzOXfA30fACuQAoT2/QCkQAYQ3g8AcAIJQEQ/CEAJxICofggAIxACIvthAIRABIjuhwLUBQJATD8coCyIB1SnovsRgIBgMXzEA1bBt8h+FMAvqIF3eICZAVfS248EeAW1AG/xAJbJrbajvn40wC2orYA3sQXRUeAI/P0YgCMQ9sXnAS4I9OMAXCDuS5wJS4JgPxZQEkj0Za4FmZxhhvTjAZOC6pS4L3U1zOQWpoJ9AYDVARTEfbn7gXXwImRVAGANr2bqfiBiiABygwAEIAABCEAAAhCAAAQgAAEIQAACEGAKsMH5Qg7A80QBxkbIl2YmPCtywBbnEUzDWLKA9fOH+LQRHtsAa5CvZn8lDKiy9795nAAEIMD/A7AqZwVQv9Q5gffPBmC7fSGDlyFP85MHoAYBCEAAAhCAAAQgAAEIQIBwwK78AF9t6dP7+aBoVGcf8enWD685oA0e8NVWuJ0oYC/08emO90McsB96+Wpx941EAYfu29M9cI0DjIN37eXGlVcS7NfU2x82a7/MOIAdveVss+/mtnudidQfNlk/nX5+0VcHsPNp3tnOapP6IYX6ALjuetUJPQ5gTfPVRJJx42/pNxHT7/X48GDMtkmMjvQ5N+AEXCpv3zrczdwAVtdysayABfzruva/2ym4UMb+MehiPgA7sqSnfP1e+8vOrgPuNJwvT95KH+iyX7iP+PYnY4Xg5jM+OubecT3T8pxyNjXDcL+ZaP0kAJx1L/jOeWtb53yqNbqTuSQXs00DTXDGu/gPxL9Mn3n2d9wAAAAASUVORK5CYII=');
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 15%;
}

#file_input_description {
  color: #cacaca;
  padding: 10px 20px;
}

#popup_dialog_file_input_button_warp {
  position: relative;
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;
  background-color: #f9f9f9;
  cursor: pointer;
  height: 100px;
}

#popup_dialog_file_input_button {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8rem;
  color: #cacaca;
  cursor: pointer;
}

#file_input {
  display: none;
}

#popup_dialog_cancel_button {
  font-family: Montserrat;
  font-weight: bold;
  color: #cacaca;
  background-color: white;
  border: 1px solid #cacaca;
  border-radius: 20px;
  padding: 10px 20px;
  cursor: pointer;
}

#popup_dialog_cancel_button:hover {
  background-color: #f0f0f0;
}