.progress.hidden, .alert-dismissible.hidden {
    display: none;
}

.progress {
    position: relative;
    background: #eee;
    height: 20px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    --progress-width: 0%;
    --progress-value: "\f013"; /* fa-cog */
    --progress-color: #53a6ee;
}

.progress > div {
    display: block;
    position: absolute;
    width: var(--progress-width);
    background-color: #53a6ee;
    border-radius: 10px;
    transition: width 750ms;
}

.progress > div::before {
    content: var(--progress-value);
    font-family: FontAwesome;
    display: block;
    text-align: center;
    color: var(--progress-color);
}

.frmReqSellToUs[disabled],
.flag-container:hover:has(+ .frmReqSellToUs[disabled]),
.flag-container:hover:has(+ .frmReqSellToUs[disabled]) .selected-flag {
    cursor: not-allowed;
    background-color: #eee !important;
}

div:not(.dropFile) > .dropFilesHere {
    display: none;
}

.dropFilesHere {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 20px;
}

.dropFilesHere i.fa {
    font-size: 3rem;
}

.dropFile > form {
    opacity: .5;
    outline: 2px dashed blue;
    border-radius: 10px;
}

#txtSellFilesList[readonly] {
    background-color: white;
}

#uploadedPictures {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    margin: 15px;
}

#uploadedPictures:not(:has(img,video)) {
    display: none;
}

#uploadedPictures figure {
    position: relative;
    outline: 1px solid black;
    border-radius: 10px;
    max-width: 150px;
    text-align: center;
}

#uploadedPictures figure figcaption {
    padding: 0 5px;
    text-align: left;
    background-color: black;
    color: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    user-select: none;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#uploadedPictures figure img,
#uploadedPictures figure video {
    max-width: 150px;
    min-width: 75px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#uploadedPictures figure video {
    margin-bottom: -5px;
}

#uploadedPictures figure span.videoPlay,
#uploadedPictures figure span.deleteFile {
    position: absolute;
    top: -13px;
}

#uploadedPictures figure span.videoPlay {
    left: -13px;
}

#uploadedPictures figure span.deleteFile {
    right: -13px;
}

#uploadedPictures figure span.deleteFile i.fa-circle {
    color: white;
}

#uploadedPictures figure span.deleteFile i:not(.fa-circle) {
    color: red;
}

#uploadedPictures figure span.videoPlay i.fa-circle {
    color: green;
}

#uploadedPictures figure span.videoPlay i:not(.fa-circle) {
    color: white;
}

#uploadedPictures figure span i {
    cursor: pointer;
}

#uploadedPictures figure:has(video[poster]) span.videoPlay,
#uploadedPictures figure:not(:hover) span,
#uploadedPictures figure:has(img.imgLoading) span,
#filSellPics[disabled] + div + #uploadedPictures figure:hover span {
    display: none;
}

img.imgLoading {
    /* Borrowed from bootstrap's placeholder-wave */
    cursor: wait;
    mask-image: linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);
    mask-size: 200% 100%;
    animation: placeholder-wave 2s linear infinite;
}

@keyframes placeholder-wave {
    100% {
        mask-position: -200% 0;
    }
}

.alert-dismissible {
    position: relative;
    scroll-margin-block-start: 200px;
}

.alert-dismissible .close {
    position: absolute;
    top: auto;
    right: 10px;
    background: none;
    border: none;
}