.colourful {
    background:
        -webkit-linear-gradient(45deg, hsla(332, 18%, 55%, 1) 0%, hsla(332, 18%, 55%, 0) 70%),
        -webkit-linear-gradient(315deg, hsla(290, 22%, 50%, 1) 10%, hsla(290, 22%, 50%, 0) 80%),
        -webkit-linear-gradient(225deg, hsla(342, 27%, 50%, 1) 10%, hsla(342, 27%, 50%, 0) 80%),
        -webkit-linear-gradient(135deg, hsla(169, 0%, 100%, 1) 100%, hsla(169, 0%, 100%, 0) 70%);
    background:
        linear-gradient(45deg, hsla(332, 18%, 55%, 1) 0%, hsla(332, 18%, 55%, 0) 70%),
        linear-gradient(135deg, hsla(290, 22%, 50%, 1) 10%, hsla(290, 22%, 50%, 0) 80%),
        linear-gradient(225deg, hsla(342, 27%, 50%, 1) 10%, hsla(342, 27%, 50%, 0) 80%),
        linear-gradient(315deg, hsla(169, 0%, 100%, 1) 100%, hsla(169, 0%, 100%, 0) 70%);
}

section.background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

section.container {
    width: 100%;
    margin: auto;
    display: table-cell;
    vertical-align: middle;

}

section.droplet {
    border-radius: 5px;
    margin: 0 auto;
    position: relative;
    text-align: left;
    width: 100%;
}

section.droplet.imageuploader:before {
    content:"Drag Image/Photos Here.";
    position:absolute;
    color:#999999;
    font-weight: normal;
    font-size: 15px;
    width:100%;
    height:100%;
    border:1px dashed #bbbbbb;
    border-radius:7px;
    text-align:center;
    align-content:center;
    vertical-align:middle;    
    padding:7%;
}

section.droplet.videouploader:before {
    content:"Drag Image/Video Files Hear.";
    position:absolute;
    color:#999999;
    font-weight: normal;
    font-size: 15px;
    width:100%;
    height:100%;
    border:1px dashed #bbbbbb;
    border-radius:7px;
    text-align:center;
    align-content:center;
    vertical-align:middle;    
    padding:7%;
}

h1 a {
    font-family: Lato, Arial, Tahoma, Helvetica, sans-serif;
    color: white;
    text-decoration: none;
    font-weight: normal;
    font-size: 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
}

ul.statistics {
    list-style-type: none;
    overflow: hidden;
}

ul.statistics li {
    float: left;
    overflow: hidden;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .15);
    margin: 10px 5px 10px 0;
    color: white;
    font-family: Times New Roman, Times, serif;
    font-size: 11px;
    font-style: italic;
    padding: 1px;
    display: inline-block;
    border-radius: 2px;
}

ul.statistics li label {
    color: rgba(255, 255, 255, .5);
}

droplet {
    display: inline-block;
    z-index: 2;
    position: relative;
    border-radius: 2px;
    width: 100%;
    min-height:100px;
    background-color: rgba(255, 255, 255, .1);
    margin-top: -5px;
    padding-top: 5px;
    transition: box-shadow 0.35s;
}

droplet1 {
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px dashed #dddddd;
    border-radius: 5px;
    display: inline-block;
    height: auto;
    position: relative;
    transition: box-shadow 0.35s ease 0s;
    width: 100%;
    z-index: 2;
    margin-bottom:10px;
}

.StatusDroplet {
    display: inline-block;
    z-index: 2;
    position: relative;
    width: 100%;
    min-height:10px;
    background-color: rgba(255, 255, 255, .1);
    margin-top: -5px;
    padding-top: 5px;
}

droplet div.loading {
    display: block;
    margin: 1px;
    margin-top: 6px;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all .35s;
}

droplet1 div.loading {
    display: block;
    margin: 1px;
    margin-top: 6px;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all .35s;
}


droplet div.loading.visible {
    opacity: 1;
}
droplet1 div.loading.visible {
    opacity: 1;
}

droplet.event-dragover {
    box-shadow: inset 0 0 100px rgba(255, 255, 255, .25), inset 0 0 5px rgba(255, 255, 255, .25);
}

droplet1.event-dragover {
    box-shadow: inset 0 0 100px rgba(255, 255, 255, .25), inset 0 0 5px rgba(255, 255, 255, .25);
}

droplet ul.files {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    padding: 5px 5px 5px 9px;
    list-style-type: none;
    transition: all .5s;
}

droplet1 ul.files {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    padding: 5px 5px 5px 9px;
    list-style-type: none;
    transition: all .5s;
}

section.container section.droplet.uploading droplet ul.files {
    opacity: .25;
    filter: blur(2px);
    -o-filter: blur(2px);
    -moz-filter: blur(2px);
    -webkit-filter: blur(2px);
    pointer-events: none;
}

section.container section.droplet.uploading droplet1 ul.files {
    opacity: .25;
    filter: blur(2px);
    -o-filter: blur(2px);
    -moz-filter: blur(2px);
    -webkit-filter: blur(2px);
    pointer-events: none;
}

droplet ul.files li {
    width: 100px;
    height: 100px;
    padding: 1px;
    float: left;
    position: relative;
    margin: 2px 5px 2px 0;
      border: 1px solid;
}

droplet1 ul.files li {
    width: 100px;
    height: 100px;
    padding: 1px;
    float: left;
    position: relative;
    margin: 2px 5px 2px 0;
      border: 1px solid;
}
    droplet1 ul.files li.firstlayout {
        /*border: none;
     float:none;
     height:auto;
   
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 100px;
    padding:initial;*/
        position: relative;
        text-align: center;
        cursor: pointer;
        padding-top:25px;
    }
    droplet1 ul.files li.firstlayout i {
        font-size: 30px;
    }
    droplet ul.files li img {
        margin:0px !important;
    }
    droplet1 ul.files li img {
        margin:0px !important;
    }
droplet ul.files li img.droplet-preview {
    max-width: 96px;
    background-size: cover;
    background-repeat: no-repeat;
    height: 96px;
    width: 96px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, .25);
    border: 1px solid white;
    display: block;
}

droplet1 ul.files li img.droplet-preview {
    max-width: 96px;
    background-size: cover;
    background-repeat: no-repeat;
    height: 96px;
    width: 96px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, .25);
    border: 1px solid white;
    display: block;
}

droplet ul.files li div.delete {
    background-color: rgba(0, 0, 0, .25);
    width: 25px;
    height:25px;
    font-family: Lato, Arial, Tahoma, Helvetica, sans-serif;
    color: white;
    font-size: 25px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
    text-align: center;
    cursor: pointer;
    line-height: 22px;
    position: absolute;
    border-radius: 50%;
    z-index: 101;
    top: 5px;
    left: 4px;
    opacity: 0;
    transition: all .30s;
    transform: scale(0.5);
}


droplet1 ul.files li div.delete {
    background-color: rgba(0, 0, 0, .25);
    width: 25px;
    height:25px;
    font-family: Lato, Arial, Tahoma, Helvetica, sans-serif;
    color: white;
    font-size: 25px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
    text-align: center;
    cursor: pointer;
    line-height: 22px;
    position: absolute;
    border-radius: 50%;
    z-index: 101;
    top: 5px;
    left: 4px;
    opacity: 1;
    transition: all .30s;
    transform: scale(1);
}

droplet1 ul.files li div.Edit {
    background-color: rgba(0, 0, 0, .25);
    width: 25px;
    height:25px;
    font-family: Lato, Arial, Tahoma, Helvetica, sans-serif;
    color: white;
    font-size: 25px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
    text-align: center;
    cursor: pointer;
  line-height: 18px;
    position: absolute;
    border-radius: 50%;
    z-index: 101;
    top: 5px;
    right:4px;
    opacity: 1;
    transition: all .30s;
    transform: scale(1);
}

droplet ul.files li div.Edit {
    background-color: rgba(0, 0, 0, .25);
    width: 25px;
    height:25px;
    font-family: Lato, Arial, Tahoma, Helvetica, sans-serif;
    color: white;
    font-size: 25px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
    text-align: center;
    cursor: pointer;
  line-height: 18px;
    position: absolute;
    border-radius: 50%;
    z-index: 101;
    top: 5px;
    right:4px;
    opacity: 1;
    transition: all .30s;
    transform: scale(1);
}
droplet ul.files li div.size {
    background-color: rgba(255, 255, 255, .5);
    position: absolute;
    bottom: 5px;
    right: 5px;
    pointer-events: none;
    font-size: 9px;
    font-family: Lato, Arial, Tahoma, Helvetica, sans-serif;
    padding: 1px 4px;
}

droplet1 ul.files li div.size {
    background-color: rgba(255, 255, 255, .5);
    position: absolute;
    bottom: 5px;
    right: 5px;
    pointer-events: none;
    font-size: 9px;
    font-family: Lato, Arial, Tahoma, Helvetica, sans-serif;
    padding: 1px 4px;
}


section.message {
    position: relative;
    background-color: deepskyblue;
    z-index: 2001;
    width: 100%;
    color: white;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .15);
    font-family: Lato, Arial, Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
    transition: all .55s;
    padding: 0 12px 0 12px;
    top: 0px;
    cursor: pointer;
    visibility:hidden;
    display:none;
}

section.message.visible {
    padding: 15px 12px 10px 12px;
    top: 10px;
    visibility:visible;
    display:block;
}

section.message.success {
    background:rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(112, 176, 224, 1) 0%, rgba(136, 191, 232, 1) 100%) repeat scroll 0 0;
}

section.message.error {
    background:rgba(0, 0, 0, 0) linear-gradient(to bottom, #ce6784 0%, #cc768d 100%) repeat scroll 0 0;
}

section.toolbar {
    margin-top: 5px;
    position: relative; 
    z-index: 3;
    height: 0px;
}

section.toolbar .button {
    display: inline-block;
    background-color: transparent;
    float: left;
    overflow: hidden;
    min-width: 100px;
    height: 100%;
    border: 0;
    cursor: pointer;
    transition: all 0.25s;
    border : 0px solid #fff;
    font-size: 14px; color: #3656b9; font-weight: 900; text-transform: uppercase;
}

button.button.add-files {
    display: inline-block;
    background-color: transparent;
    float: left;
    overflow: hidden;
    min-width: 100px;
    height: 100%;
    cursor: pointer;
    transition: all 0.25s;
    border : 0px solid #fff;
    font-size: 12px;
     color: #000;
     text-transform: uppercase;
    line-height:26px;
    padding:5px;
     width: 130px;
    }

button.button.add-files:hover {
    background-color:#f5f5f5;
    color: #444440;
}


button.button.add-files.activeupload {
    background-color: #ebebeb;
    color: #444440; 
}

button.button.add-files.anonymous {
    background-color: #ebebeb; !important;
   color: #444440; 
}

section.toolbar div.add-files {
    float: left;
    height: 100%;
    overflow: hidden;
    position: relative;
}

section.toolbar div.add-files input.droplet-multiple {
    position: absolute;
    top: -10px;
    font-size: 28px;
    left: -90px;
    z-index: 1001;
    opacity: 0.0001;
    cursor: pointer;
    height:0px; 
    width:0px;
}

section.toolbar div.add-files:hover input.add-files {
    background-color: rgba(0, 0, 0, .1);
}

section.toolbar input.upload-files {
    transition: background-color 0.25s;
    outline: none;
    pointer-events: none;
    color: rgba(0, 0, 0, .15);
}

section.toolbar input.upload-files.clickable {
    pointer-events: all;
    color: #3656b9; 
}
.noclickable {
    pointer-events: none;
    visibility:hidden;
}

.clickable {
    pointer-events: all;
    visibility:visible;
    cursor:pointer;
}
section.toolbar comment.progress {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    float: right;
    overflow: hidden;
    font-family: Lato, Arial, Tahoma, Helvetica, sans-serif;
    font-weight: 400;
    color: rgba(0, 0, 0, .35);
    font-size: 11px;
    padding: 0 8px;
    opacity: 0;
    transition: all 0.55s;
}

section.toolbar comment.progress.visible {
    margin-right: 0;
    opacity: 1;
}

input.droplet-multiple {
    color: white;
    margin-top: 5px;
    display:none;
}