.btn-icon {
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    margin-right: 0.25rem;
    background-position: 50% 50%;
}

.green-hover:hover {
  transition: .5s all;
    background-color: #b3f3e0 !important;
    color: #2b302e;
}

.icon-d-file-content {
    max-height: 60px;
    overflow: auto;
}
.btn-icon-file {
    background-image: url(../images/file.svg);
}

.btn-icon-file-w {
    background-image: url(../images/file-w.svg);
}

.icon-dropfile {
    width: 36px;
    height: 36px;
    margin-right: .5rem;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    vertical-align: middle;
    background-image: url(../images/drop-file-g.svg);
}

.icon-dropfile-g {
    width: 54px;
    height: 54px;
    margin-right: .5rem;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    vertical-align: middle;
    background-image: url(../images/drop-file.svg);
}

.icon-d-file {
    width: 200px;
    border: 1px solid #e6e6e6;
    border-radius: 0.25rem;
    padding: 0.5rem;
    line-height: 1.2;
    margin-right: .5rem;
    margin-bottom: .25rem;
}

.icon-d-file-t p {
    width: calc(200px - 6.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.si {
    width: 36px;
    height: 36px;
    display: inline-block;
    content: "";
    background-repeat: no-repeat;
    background-position: 50% 50%;
    vertical-align: middle;
    background-size: contain;
    margin-right: 0.5rem;
}

.file-catalogy-01 {
    background-image: url(../images/filecatalogy_01.svg);
}

.file-catalogy-02 {
    background-image: url(../images/filecatalogy_02.svg);
}

.file-catalogy-03 {
    background-image: url(../images/filecatalogy_03.svg);
}

.file-catalogy-04 {
    background-image: url(../images/filecatalogy_04.svg);
}

.file-catalogy-05 {
    background-image: url(../images/filecatalogy_05.svg);
}

.file-catalogy-06 {
    background-image: url(../images/filecatalogy_06.svg);
}

.file-catalogy-07 {
    background-image: url(../images/filecatalogy_07.svg);
}

.file-catalogy-08 {
    background-image: url(../images/filecatalogy_08.svg);
}

.file-catalogy-09 {
    background-image: url(../images/filecatalogy_09.svg);
}

.file-catalogy-10 {
    background-image: url(../images/filecatalogy_10.svg);
}

.file-catalogy-11 {
    background-image: url(../images/filecatalogy_11.svg);
}

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    background: transparent url(../images/close.svg) center/1.2em auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: .5;
    vertical-align: middle;
}

.btn-close-rounded {
    vertical-align: middle;
    padding: 0.5rem;
    transition: .25s all;
}

.drop-file-box {
    background-color: #f0f5f4;
    border-radius: .5rem;
    padding: .5rem;
    cursor: pointer;
    transition: 1s all;
    border: 2px solid #f0f5f4;
}

.drop-file-box:hover {
    background-color: #d8f0e9;
    border: 2px solid #399c75;
}

.green-btn {
    background-color: #61C6A1 !important;
    color: #ffffff !important;
    transition: .6s all;
}

.green-btn:hover {
    background-color: #43b88d;
    color: #ffffff;
}


/*drop file*/

.js-file-list{
margin: 0;
padding: 0;
}

.file-upload-error {
display: none;
margin: 0 25px 30px;
color: #ed655e;
font-size: 14px;
}

.file-list {
margin: .25rem;
}

.file-input {
display: none;
}

.file-details__container {
width: 98%;
text-align: left;
margin-left: 2%;
}

.file-output__list-item {
display: flex;
align-items: center;
width: calc(50% - 1rem);
list-style: none;
background-color: #ffffff;
border-radius: .25rem;
padding: .25rem;
margin-bottom: .5rem;
border: 1px solid #d2d2d2;
}

.file-output__list-item-image {
display: inline;
width: 30px;
height: 38px;
}

.file-output__list-item-name {
text-align: left;
font-size: .9rem;
}

.file-output__list-item--is-complete {
display: flex;
align-self: center;
width: 10px;
height: 10px;
}

/*-progress-*/

.file-output__progress-bar {
width: 100%;
}

.file-output__progress-bar[value] {
-webkit-appearance: none;
 -moz-appearance: none;
appearance: none;
height: 2px;
-moz-column-span: 1/3;
column-span: 1/3;
}

.file-output__progress-bar[value]::-webkit-progress-bar {
background-color: rgba(237, 101, 94, 0.2);
}

.progress-bar--in-progress[value]::-webkit-progress-value {
background-color: #ed655e;
}

.progress-bar--is-finished[value]::-webkit-progress-value {
-webkit-transition: all 0.25s;
transition: all 0.25s;
background-color: #61C6A1;
}


.upload-progress {
background-color: transparent;
width: 310px;
margin: 0.25rem 0;
padding: 0.5rem;
border-radius: 0.25rem;
}
.progress {
display: flex;
height: 1rem;
overflow: hidden;
font-size: .75rem;
background-color: #e9ecef;
border-radius: 0.25rem;
}
.progress-bar-animated {
-webkit-animation: 1s linear infinite progress-bar-stripes;
animation: 1s linear infinite progress-bar-stripes;
}
.progress-bar-striped {
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
}
.progress-bar {
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: #fff;
text-align: center;
white-space: nowrap;
background-color: #61C6A1;
transition: width .6s ease;
}


  
  /* Start Style*/

  .wrapper .items-border {
    width: 400px;
    height: 100px;
    background: linear-gradient(to left, #acb1d9, #c4d3f0);
    margin: 20px auto;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wrapper .items-border .items-upload {
    width: 380px;
    height: 80px;
    border-radius: 15px;
    background: #fff;
    display: flex;
    justify-content: space-around;
    position: relative;
  }
  .wrapper .items-border .items-upload .items {
    align-self: center;
    color: #7d8ace;
    cursor: pointer;
    width: 41px;
    height: 48px;
    position: relative;
  }
  .wrapper .content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    height: 680px;
    width: 100%;
  }
  .wrapper .upload-border,
  .wrapper .files-border {
    width: 340px;
    height: 340px;
    background: linear-gradient(to left, #acb1d9, #c4d3f0);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    overflow: hidden;
  }
  .wrapper .upload-border .upload,
  .wrapper .files-border .upload {
    width: 310px;
    height: 310px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .wrapper .upload-border .upload h3,
  .wrapper .files-border .upload h3 {
    margin-bottom: 30px;
    color: #616161;
    font: 100 22px "Poppins", sans-serif;
  }
  .wrapper .upload-border .upload .plus,
  .wrapper .files-border .upload .plus {
    font-size: 40px;
    padding: 45px;
    border: 8px dashed #7d8ace;
    margin-bottom: 30px;
    color: #7d8ace;
    cursor: pointer;
  }
  .wrapper .upload-border .upload .plus.bg-gray,
  .wrapper .files-border .upload .plus.bg-gray {
    background: #ddd;
  }
  .wrapper .upload-border .upload span,
  .wrapper .files-border .upload span {
    color: #757575;
    font: 100 14px "Poppins", sans-serif;
  }
  .wrapper .files {
    width: 310px;
    height: 310px;
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .wrapper .files__row {
    margin-bottom: 30px;
    position: relative;
    transition: all 0.5s ease;
  }
  .wrapper .files__row.hidden {
    display: none;
  }
  .wrapper .files__row.hold {
    border: none;
  }
  .wrapper .files__row.invisible {
    display: none;
  }
  .wrapper .files__row-content {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    margin-bottom: 15px;
    grid-gap: 10px;
  }
  .wrapper .files__row-content .picture {
    grid-row: 1/3;
  }
  .wrapper .files__row-content .picture .image {
    color: #7d8ace;
  }
  .wrapper .files__row-content .text {
    grid-column: 2/-1;
    display: grid;
    grid-template-rows: repeat(2, 25px);
    grid-gap: 15px;
  }
  .wrapper .files__row-content .text .status {
    display: flex;
    justify-content: space-between;
  }
  .wrapper .files__row-content .text .status p {
    color: #717171;
    font: 100 14px "Poppins", sans-serif;
  }
  .wrapper .files__row-content .text .status .check,
  .wrapper .files__row-content .text .status .false {
    position: relative;
  }
  .wrapper .files__row-content .text .status .check {
    color: #bdf351;
    border-color: #bdf351;
  }
  .wrapper .files__row-content .text .status .false {
    color: #a0a09e;
    cursor: pointer;
  }
  .wrapper .files__row-content .text .progressbar {
    width: 95%;
    height: 5px;
    background: #ddd;
    border-radius: 15px;
    position: relative;
  }
  .wrapper .files__row-content .text .progressbar .progressOrange,
  .wrapper .files__row-content .text .progressbar .progressGreen {
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    border-radius: 15px;
  }
  .wrapper .files__row-content .text .progressGreen {
    background: #bdf351;
    width: 100%;
  }
  .wrapper .files__row-content .text .progressOrange {
    background: #f18000;
    width: 5%;
  }
  .wrapper .files__row-content .text .last-progress {
    background: #f18000;
    width: 1%;
  }

  
  @keyframes upwidth {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }