/* ================ BASIC STUFF */
#img2base64 h4 {
  font-size:20px;
}
#img2base64 .danger {
  border:1px solid red;
  border-radius:5px;
  background-color:rgba(255,0,0,.2);
  color:red;
  padding:5px;
}

/* ================ TABLE STUFF */
#img2base64 table {
  margin-top:30px;
  width:100%;
}
#img2base64 tr {
  border-top:1px solid rgba(0,0,0,.1);
}
#img2base64 td {
  padding:15px 0px 15px 0px;
}

/* ================ DROPZONE2 */
#img2base64 #dropzone2 {
  border:3px dashed grey;
  border-radius:10px;
  padding:20px;
  color:blue;
  min-height:150px;
  font-family:Arial;
}
#img2base64 #dropzone2 .material-icons {
  font-size:2em;
}
#img2base64 #dropzone2 .texts {
  width:100%;
}
#img2base64 #dropzone2 .texts div {
  display:inline-block;
  text-align:center;
}
#img2base64 #dropzone2 .texts .drop-text {
  float:left;
  top:0px;
  border-right:2px dashed grey;
  width:33%;
  height:100px;
  font-size:1.5em;
  position:relative;
}
#img2base64 #dropzone2 .texts .drop-text:last-child {
  border:none;
}
#img2base64 #dropzone2 .texts .drop-or-1,
#img2base64 #dropzone2 .texts .drop-or-2 {
  position:absolute;
  top:50%;
  margin-top:10px;
  margin-left:-15px;
  background:white;
}
#img2base64 #dropzone2 .texts .drop-or-1 {
  left:calc(33% + 20px);
}
#img2base64 #dropzone2 .texts .drop-or-2 {
  left:calc(66% - 10px);
}




/* ================ DROPZONE */
#img2base64 #dropzone {
  width:100%;
  height:100%;
  position:absolute;
}



/* ================ MAIN ZONE */
#img2base64 #main-zone {
  border:2px dashed black;
  background-color:lightgrey;
  display:flex;
  flex-wrap:wrap;
}
  #img2base64  .insert-box {
    height:200px;
    font-size:2em;
    text-align:center;
    vertical-align:middle;
    width:33%;
  }
  #img2base64 .insert-box-inner {
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    justify-items:center;
    text-align:center;
  }

  #img2base64 #drag-and-drop {
    display:block;
    position:relative;
  }
  #img2base64 #drag-and-drop label {
    width:100%;
    width:100%;
    height:100%;
    z-index:100;
    padding:40px;
    font-size:25px;
    line-height:2;
  }
  #img2base64 #drag-and-drop div {
    position:absolute;
    height:100%;
    width:100%;
    padding:40px;
    top:0;
    z-index:50;
  }
  #img2base64 #drag-and-drop input{
    display:none;
  }
  #img2base64 #select-file-div1 {
    display:block;
    position:relative;
    top:30px;
  }
  #img2base64 #select-file,
  #img2base64 #url2 {
    border-left:2px dashed black;
  }
  #img2base64 .or {
    background-color:lightgrey;
    position:absolute;
    float:left;
    top:35%;
    margin-left:-25px;
  }
  #img2base64 #url2 {
    display:flex;
    flex-direction: column;
    justify-items:stretch;
    align-items:stretch;
    align-content:stretch;
  }
  #img2base64 #url2div1 {
    position:relative;
  }
  #img2base64 #url2div2 {
    height:100%;
    padding-left:20px;
    margin:20px;
    font-size:15px;
  }
  #img2base64 #url2 textarea {
    width:100%;
    height:100%;
  }

  #img2base64 #copy-pasta {
    text-align:center;
    width:100%;
    padding:20px;
    font-size:2em;
  }



/* ================ MAGIC BUTTON */
#img2base64 #do-the-magic {
  width:100%;
  background-color:#0d6efd;
  border:none;
  border-radius:5px;
  color:white;
  vertical-align:middle;
  text-align:middle;
  padding:.375rem .75rem;
}


/* ================ OUTPUT STUFF */
#img2base64 output {
  margin-top:20px;
  min-width:64px;
  min-height:64px;
  max-width:100%;
  max-height:100%;
  border:1px solid black;
  box-shadow:0px 0px 20px grey;
}
#img2base64 #b64-output-td {
  width:100%;
}
#img2base64 #b64-output {
  width:100%;
  min-height:150px;
}

#img2base64 .img-div {
  width:100%;
  height:100%;
}
#img2base64 .thumb {
  width:100%;
}