body {
    padding-top: 5em;
}

#searchInput {
    margin-block: 1rem;
}

.table-img {
    cursor: pointer;
    position: relative;

}

.table-img[data-alt_description=''] .img-thumbnail, .table-img[data-title=''] .img-thumbnail, .table-img[data-alt_description_en=''] .img-thumbnail, .table-img[data-title_en=''] .img-thumbnail  {
    border: 1px solid red;
}

.modal-dialog {
    max-width: unset;
    width: 60%;
}

#modalBackgroundImg {
    width: 16vw;
    height: 40vh;
    display: block;
    position: absolute;
    left: 3vw;
    top: 3vh;
}

#modalBackgroundImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#imageModalForm input[type='text'], #imageModalForm textarea  {
    width: 20vw
}


/* radio btn modifications based on type */
.radio-btn.disabled {
    color: red;
}



/* Fontawesome icons based on type */

.img-type-icon {
    display: block;
    width: 100%;
    position: absolute;
    z-index: 10;
    right: 1em;
    bottom: 0.5em;

    padding: 0.5em;
    width: fit-content;
    height: fit-content;
    background-color: #979797;
    border-radius: 7px;
    color: white;
}

.img-type-icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font: var(--fa-font-solid);
}

.img-type-icon.primary::before {
    content: "\f005";
}

.img-type-icon.alt::before {
    content: "\f0c6";
}

.img-type-icon.candy::before {
    content: "\f5bb";
}

.img-type-icon.misc::before {
    content: "\e790";
}

.img-type-icon.disabled {
    background-color: red;
}

.img-type-icon.disabled::before {
    content: "\f05e";   
}

/* header */
#header-container {
    padding: 2em 3em;
    margin-bottom: 2em;
}

#uploader-label {
    margin-top: 2rem;
    margin-bottom: 1rem;
    width: 80%;
}

#uploader {
    border: 1px solid black;
    border-radius: 10px;
    padding: 5rem;
    cursor: pointer;

    width:100%;
    max-height: 12em;
    background-color: #979797;
    color: white;
}

#submitter {
    display: block;
    padding: 0.5rem 2rem;
}

/* Instructions */

.instructions {
    display: block;
    border-left: 1px solid black;
}

/* Examples */
.instructions .example {
    color: black;
    display: block;
    margin-block: 0.5em;
}

.instructions .good-example::before, .instructions .bad-example::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    margin-right: 1em;
}

.instructions .good-example::before {
    content: "\f14a";
    color: green;
}

.instructions .bad-example::before {
    content: "\f2d3";
    color: red;
}


/* table */
.table-container {
    margin:auto;
    border: 1px solid black;
    min-width:95%;
}


/* Banner top */
#top-banner {
    display: flex;
    position: fixed;
    padding: 1em 2em;
    width: 100vw;
    z-index: 100;

    top: 0;

    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 1em;

    background-color: darkslategray;
}

#top-banner span {
    color: white;
}

#top-banner form {
    all: unset;
}

#top-banner button {
    all: unset;
    padding: 3px 5px;
    background-color: grey;
    border: 1px solid grey;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

#top-banner button:active {
    background-color: rgb(160, 160, 160);
    border: 1px solid white;
}