body {
    background-color: #ccc;
}

header.navbar {
    padding-top: 8pt;
    padding-bottom: 8pt;
}

.search-container {
    display: grid;
    place-content: center;
}

.timeline-container {
    max-width: 600pt;
}

.timeline-video-image {
    cursor: pointer;
}

.timeline-video-image > img {
    width: 100%;
}

.timeline-brand-bg {
    border-color: rgb(186, 27, 234)
}

.timeline-brand-border {
    border-color: rgb(186, 27, 234)
}

.timeline-brand-text {
    border-color: rgb(186, 27, 234)
}

.facial-recognition-icon {
    margin-right: 4pt !important;
}

#keywords {
    font-family: bootstrap-icons;
    line-height: normal;
}

.main-container {
    display: grid;
    place-content: center;
}

.search-filters {
    padding: 4pt;
    border-width: .2rem;
    border: solid #f7f7f9;
    max-width: 600pt;
}

.search-filter {
    border: solid #f7f7f9;
    border-radius: .25rem;
    margin: 2pt 3pt 2pt 3pt;
    padding: 2pt;
    color: white;
}

.search-filter-tag {
    background-color: rgb(108, 117, 125);
}

.search-filter-brand {
    background-color: rgb(186, 27, 234);
}

.search-filter-category {
    background-color: rgb(25, 135, 84);
}

.search-filter-actor {
    background-color: rgb(13, 202, 240);
}

.search-filter-director {
    background-color: rgb(108, 117, 125);
}

.serch-filter-close {
    cursor: pointer;
    margin-left: 5pt;
}

.btn-filters-clear {
    display: inline;
    float: right;
    cursor: pointer;
}

.alert-image-search,
.alert-no-match-with-keywords {
    margin-top: 10pt;
    max-width: 600pt;
}

.card.card-video {
    max-width: 600pt;
    margin-top: 10pt;
    margin-bottom: 10pt;
}

.file-download,
.magnet-get,
.bi-star,
.bi-star-fill {
    cursor: pointer;
}

.spinner-file-download,
.spinner-magnet-link {
    margin-right: 5pt;
}

.card-actor {
    min-width: 260pt;
    max-width: 260pt;
    max-height: 200pt;
    margin-top: 5pt;
    margin-bottom: 10pt;
}

span.actor-videos,
span.actor-bwh,
span.actor-debut,
span.actor-dob,
.actor-similatiry {
    display: block;
}

.actor-similatiry {
    font-weight: bold;
}

img.img-actor {
    margin-left: 5pt;
    margin-top: 5pt;
    cursor: pointer;
}

.btn-actor-search,
.btn-actor-favorite,
.btn-actor-update {
    margin-left: 5pt;
    margin-top: 5pt;
    margin-bottom: 5pt;
}

.card.card-brand {
    min-width: 160pt;
    max-width: 160pt;
    margin-top: 10pt;
    margin-bottom: 10pt;
}

.card.card-tag {
    min-width: 160pt;
    max-width: 160pt;
    margin-top: 10pt;
    margin-bottom: 10pt;
}

.card.card-category {
    min-width: 160pt;
    max-width: 160pt;
    margin-top: 10pt;
    margin-bottom: 10pt;
}

.card>.card-img-top {
    cursor: pointer;
}

.user-favorite {
    cursor: pointer;
}

.search-result-container {
    max-width: 600pt;
    margin-top: 20pt;
}

.search-image-result {
    margin-top: 20pt;
}

.alert-actor-recognition {
    max-width: 600pt;
}

.icon-small {
    width: 16pt;
}

.input-group-search {
    width: auto;
}

.tags,
.user-tags {
    display: block;
}

.tags>span {
    margin-right: 5pt;
    cursor: pointer;
}

.tags>.search-tags {
    margin-left: 5pt;
    margin-right: 10pt;
}

.categories {
    display: block;
}

.categories>span {
    margin-right: 5pt;
    cursor: pointer;
}

.categories>.search-categories {
    margin-left: 5pt;
    margin-right: 10pt;
}

.actors {
    display: block;
}

.actors>span {
    margin-right: 5pt;
    cursor: pointer;
}

.actors>.search-actors {
    margin-left: 5pt;
    margin-right: 10pt;
}

.video-details {
    margin-top: 5pt;
    display: block;
}

.video-details>span {
    margin-right: 5pt;
}

.video-brand-key,
.video-brand-name,
.video-director,
.video-publish-date {
    display: inline;
}

.video-director-value,
.video-brand-name-value,
.video-brand-key-value {
    margin-left: 5pt;
    cursor: pointer;
}

.video-publish-date-value {
    margin-left: 5pt;
}

.video-details>.search-brand {
    margin-left: 5pt;
    margin-right: 10pt;
}

.video-details>.search-director {
    margin-left: 5pt;
    margin-right: 10pt;
}

i.bi {
    margin-right: 10pt;
}

.bi-rotate {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

.card-footer>i.bi>small.text-body-secondary {
    margin-left: 5pt;
}

.card-footer>span>small.text-body-secondary {
    margin-right: 5pt;
}

.tutd-overlay {
    position: absolute;
    background: gray;
    opacity: 0.75;
    width: 100%;
    height: 100%;
}

.tutd-overlay-commands {
    position: absolute;
    top: 40%;
    text-align: center;
    width: 100%;
}

.tutd-overlay-span {
    margin-top: 30pt;
}

.btn-edit {
    padding: .5em;
    line-height: 1;
    color: var(--bs-body-color);
    background-color: var(--bd-pre-bg);
    border: 0;
    border-radius: .25rem;
}

.btn-edit>i {
    width: 30px;
}

#tag-list {
    min-height: 100pt;
    height: calc((100vh - 580pt) / 2);
    overflow-y: scroll;
}

#category-list {
    min-height: 100pt;
    height: calc((100vh - 580pt) / 2);
    overflow-y: scroll;
}

.filter-section {
    margin-top: 10pt;
    font-weight: bold;
}

.language-icon {
    width: 18px;
    margin-right: 4pt;
}

.theme-icon-active {
    margin-right: 4pt !important;
}

#drop-area {
    max-width: 600pt;
    width: 100%;
    height: 200pt;
    margin-top: 10pt;
    text-align: center;
    border: 2px dashed gray;
    cursor: pointer;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}

#drop-area.drag-over {
    background-color: #eee;
}

.drop-area-hint {
    line-height: 200pt;
    display: inline;
}

.spinner-container {
    text-align: center;
}

.preview-image {
    object-fit: contain;
    width: 100%;
    height: 96%;
    margin-top: 1%;
    margin-bottom: 1%;
}