#modal_global_attachments div.progress_container{
    background-color:rgba(238, 238, 238, 0);
    border:1px solid #b6b6b6;
    display: flex;
    justify-content: flex-end;
    border-radius: 5px;
    flex-direction: column;
}
#modal_global_attachments  div.progress{
    width:100%;
    padding:1px;
    overflow: visible;
}
#modal_global_attachments  div.progress_inner{
    text-align:center;
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    overflow:visible;
    height:100%;
    background-color:#696969;
    color:White;
    text-shadow: 0px 0px 2px  rgba(51, 51, 51, 0.75);
    border:1px solid #fff;
    box-shadow: 0px 0px 3px rgba(98, 98, 98, 0.6);
    border-radius: 5px;
}
#modal_global_attachments  div.progress_inner:hover{
    filter: brightness(0.9);
}
#modal_global_attachments  div.progress.free_space{
    overflow: visible;
    z-index: 100;
}
#modal_global_attachments  div.progress_inner.free_space{
  background-color:#rgba(255, 255, 255, 1);
  background: linear-gradient(to top, #11c383, #13d586) !important;
  text-shadow: 0px 0px 2px rgba(51, 51, 51, 0.5);
  color:#333;
  line-height: 10px
}
#modal_global_attachments  div.progress_inner.free_space::before{
  content:"Free space";
  content:"💾";
  background-color:#fff;
  width:24px;
  height:24px;
  line-height: 23px;
  color:#333;
  text-align: center;
  vertical-align: middle;
  border:0px solid #ddd;
  border-radius:12.5px;
  border-radius: 5px;
  box-shadow: 0px 0px 4px rgba(51, 51, 51, 0.7);
}

/* #modal_global_attachments  div.progress:not(.free_spac1e)::before{
  content:"Free space";
  content:".";
  color:transparent; */
  /* display:block; */
  /* position: absolute;
  z-index: 500;
  background-color:#16d18e;
  width:6px;
  height:6px;
  line-height: 23px; */
  /* color:#333; */
  /* text-align: center;
  vertical-align: middle;
  border:0px solid #ddd;
  border-radius:12.5px;
  border-radius: 3px;
  left:-4px;
  top:calc(100% - 50% + 3px)
  border:1px solid #696969; */
  /* box-shadow: 0px 0px 4px rgba(51, 51, 51, 0.7); */
/* } */

/* #modal_global_attachments  div.progress{ */
  /* position: relative; */
/* } */
/* #modal_global_attachments  div.progress:not(.free_spac1e):nth-child(odd)::before{ */
  /* right:0px; */
/* } */
#modal_global_attachments  div.progress:not(.free_space)::after{
  /* content:"test";
  width:100%;
  display:block; */
}
/* #modal_global_attachments  div.progress_inner:not(.free_space)::before{
  content:"Free space";
  content:"";
  background-color:#fff;
  width:12px;
  height:12px;
  line-height: 23px;
  color:#333;
  text-align: center;
  vertical-align: middle;
  border:0px solid #ddd;
  border-radius:12.5px;
  border-radius: 4px;
  box-shadow: 0px 0px 4px rgba(51, 51, 51, 0.7);
  z-index: 500;
    border:1px solid #fff;
} */
  /* content:".";
  color:transparent;
  display:inline !important;
  float:left !important;
  text-align: left !important;
  width:2px;
  height:10px;
  background-color:#16d18e; */
  /* border-radius:5px; */
  /* border:2px solid #454952 ; */
  /* z-index: 500; */
  /* content:"."; */
  /* position: relative;
  /* left: -14px; */ */
  /* display:"inline-block";


  line-height: 23px;
  color:#333;
  color:transparent;
  text-align: left;
  vertical-align: middle;
  border:2px solid white;
  border-radius:12.5px;
  border-radius: 5px;
  box-shadow: 0px 0px 4px rgba(51, 51, 51, 0.7); */
