:root {
    --media-input-green: #7bd886;
    --media-input-dark_blue: #424b6a;
    --media-input-red: #c30a0a;
}

.media_input {
    position: relative;
}
.media_input.image{
    display: flex;
    height: 198px;
    width: 198px;
}

.media_input.multiple {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 0;
    min-height: 133px;
}

.media_input.multiple.selected {
    min-height: auto;
    height: auto;
}

/* ITEMS */
.media_input .item {
    position: relative;
    background: #fff;
    padding: 10px 14px 10px 35px;
    border-radius: 4px;
    border: 1px dashed var(--media-input-dark_blue);
}
.media_input.image .item {
    padding: 0;
}
.media_input svg.icon {
    left: 11px;
    position: absolute;
    height: 1.2em;
    fill: var(--dark_blue);
}
.media_input:not(.selected) .add {
    display: none;
}

.media_input .add {
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 66px;
}

.media_input .add:hover {
    color: var(--media-input-green);
}

.media_input .add svg {
    height: 22px;
    width: 100%;
}

.media_input .item img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.media_input .add,
.media_input.multiple .item {
    display: flex;
    flex-basis: 33.333%;
}

.media_input.multiple .item img {
    cursor: grab;
}

.media_input .item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    line-height: 190px;
    text-align: center;
    width: 100%;
    height: 100%;
    background: rgba(198, 198, 198, 0.6901960784);
    cursor: pointer;
}
.media_input:not(.image) .item .overlay{
    font-size: 0;
}

.media_input .item .remove {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: var(--media-input-red);
    background-image: url('data:image/svg+xml,<svg fill="%23fff" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>');
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
    cursor: pointer;
}

.media_input .item .remove:hover {
    background-color: #a80808;
}

.media_input.multiple .item .overlay,
.media_input .item:not(:hover) .overlay,
.media_input .item:not(:hover) .remove {
    display: none;
}

/* OVERLAY WITH ICON */
.media_input .placeholder {
    display: grid;
    position: absolute;
    border: 2px dashed var(--media-input-dark_blue);
    background: #d7dde1;
    text-align: center;
    height: 100%;
    width: 100%;
    align-items: center;
    grid-auto-rows: 1fr;
    cursor: pointer;
}

.media_input.selected .placeholder {
    display: none;
}

.media_input:hover .placeholder svg,
.media_input div:hover > svg {
    fill: var(--media-input-green);
}

.media_input .placeholder span {
    max-width: 150px;
}

.media_input .placeholder svg {
    fill: var(--media-input-dark_blue);
    width: 100%;
    height: 30px;
    margin-bottom: 5px;
}
.media_input:not(.image) .placeholder svg{
    display: none;
}

/* FIXES */
.media-modal .screen-reader-text{
    display: none;
}