.InputField.SessionUpload .FieldElements {

    flex-direction: column;
    align-items: flex-start;
}

.InputField.SessionUpload .Details {


}

.InputField.SessionUpload .Details .Limits {
    white-space: nowrap;
}

.InputField.SessionUpload .Details .Limits  {
    display: inline-block;
    font-size: 80%;
}

.InputField.SessionUpload .Details .Limits .label:after {
    content: ": ";
}

.InputField.SessionUpload .Details .Limits [field='max_post_size'] {
    display: none;
}

.InputField.SessionUpload .Details .Limits [field='memory_limit'] {
    display: none;
}

.InputField.SessionUpload .Details .Limits [field='accept_mimes'] {
    display: none;
}


.InputField.SessionUpload .Controls {

    position: relative;

}

.InputField.SessionUpload .Controls [type='button'] {
    cursor:pointer;
}

.InputField.SessionUpload .Controls [action='browse'] {
    position:relative;
    box-sizing:border-box;
    overflow:clip;
}


.InputField.SessionUpload .Controls INPUT[type="file"] {
    display:none;
}

.InputField.SessionUpload .Controls .Progress {
    display: none;

    box-sizing: border-box;
    align-items:center;
    justify-content: center;

    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

.InputField.SessionUpload .Controls[working] [action='browse'] {
    background-color: transparent;
    color:transparent;
    box-shadow: none;

    pointer-events:none;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
}

.InputField.SessionUpload .Controls[working] .Progress {
    display: inline-flex;

}

.InputField.SessionUpload .Controls .Progress .bar {
    background-color: #b4f5b4;
    width: 0;
    height: 100%;

    position: absolute;
    left: 0;
    top: 0;
}

.InputField.SessionUpload .Controls .Progress .percent {

    font-size: 70%;
    z-index: 1;
    color:black;

}


.InputField.SessionUpload .ArrayContents {
    display:inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-items: flex-start;
 }

.InputField.SessionUpload .ArrayContents .Element {

    position: relative;
    margin-left: 1em;
    margin-top: 1em;
    display:inline-flex;
    flex-direction: row;
}

.InputField.SessionUpload .ArrayContents .Element .thumbnail {


}
.InputField.SessionUpload .ArrayContents .Element .info {
    display: flex;
    flex-direction: column;
    gap:0.5em;
}

.InputField.SessionUpload .ArrayContents .Element .info .item {
    display:flex;
    flex-direction: row;
    gap:0.5em;
}
.InputField.SessionUpload .ArrayContents .Element .info .item .label:after {
    content: ": ";
}
.InputField.SessionUpload .ArrayContents .Element .info .item .label {
    display: none;
}

/*.InputField.SessionUpload .ArrayContents .Element .info .item.filename {*/
/*    display: none;*/
/*}*/

.InputField.SessionUpload .ArrayContents .Element .remove_button {

    display: block;
    width: 25px;
    height: 25px;
    border-radius: 25px;

    position: absolute;
    left: 0;
    top: 0;
    margin-left: -0.5em;
    margin-top: -0.5em;

    background-color: white;
    background-image:url("../images/delete.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    cursor: pointer;
}

/* file upload control */

.InputField.SessionUpload.SessionFile .ArrayContents {

}

.InputField.SessionUpload.SessionFile .ArrayContents .Element {

    display: block !important;

}


.InputField.SessionUpload.SessionFile .ArrayContents .Element .thumbnail {
    margin-right: 0;

}

.InputField.SessionUpload.SessionFile .ArrayContents .Element .details {
    display: inline-block;
}

.InputField.SessionUpload.SessionFile .ArrayContents .Element .filename {
    display: block;
}

.InputField.SessionUpload.SessionFile .ArrayContents .Element .filesize {
    display: block;
    font-size: 70%;
}