@font-face {
    font-family: 'Glyphicons Halflings';
    src: url(../fonts/glyphicons-halflings-regular.eot);
    src: url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'), url(../fonts/glyphicons-halflings-regular.woff) format('woff'), url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'), url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
}

.required label:after {
    content: "*";
    color: red;
    margin-left: 4px;
}

.footer {
    margin-top: 50px;
}

.addButton {
    position: relative;
    bottom: 80px;
    right: 20px;
    width: 45px;
    height: 45px;
    float: right;
    margin-top: 80px;
}

.topRightButton {
    position: relative;
    top: 0px;
    right: 0px;
    width: 45px;
    height: 45px;
    float: right;
    margin-left: 20px;
    margin-right: 20px;
}

.logo img {
    max-height: 46px;
}

#clipCurrentDate {
    font-size: 24px;
    color: #026c9a;
}

#clipCurrentTime {
    color: #00b1ff;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}

.clip-event-thumb {
    width: 320px;
    height: 180px;
}

.clip-event-etat {
    float: right;
}

.clip-filter-btn, .clip-filter-date {
    margin-bottom: 6px;
    background-color: #fff;
    font-size: 14px;
    line-height: 12px;
}

.clip-filter-btn.active {
    background-color: #4154f1;
    color: #fff;
}

.card.description-card {
    margin-top: 12px;
    border-radius: 15px;
}

.card.description-card .card-body .card-title {
    font-size: medium;
    font-weight: 100;
}

#waveform {
    border: 1px solid #333333;
    width: 100%;
    height: 122px;
    overflow: hidden;
    vertical-align: middle;
    margin-top: 12px;
    border-radius: 15px;
    background-color: #222222;
    position: relative;
}

#waveform::after {
    content: ' ';
    display: block;
    width: 0px;
    height: 95%;
    border-left: solid 1px red;
    position: absolute;
    overflow: hidden;
    left: 50%;
    top: 2%;
}

#waveform > #waveform-container {
    position: absolute;
    left: 50%;
    height: 100%;
    background-color: #44582d;
    background-size: 60px 23px;
    background-image: linear-gradient(to right, #4c672c 1px, #44582d 1px), linear-gradient(to bottom, #4c672c 1px, #44582d 1px);
}

#waveform > #waveform-container > .waveform-selector {
    position: relative;
    background-color: #00baff4d;
    border-left: solid 1px #00baff77;
    border-right: solid 1px #00baff77;
    height: 100%;
    display: none;
}

#waveform.show-waveform-selector > #waveform-container > .waveform-selector {
    display: block;
}

/*
div#waveform-container > img {
    float: left;
    height: 100%;
}*/

div#waveform-container > img {
    width: auto;
    height: 120px;
    max-width: none;
    min-width: 0;
    display: block;
}

.transcript-texte {
    font-size: medium;
    height: 600px;
    max-height: 600px;
    width: 100%;
    overflow-y: scroll;
    overflow-wrap: break-word;
    scrollbar-width: thin;
}

.keyword {
    background-color: rgb(233, 242, 254);
    font-weight: 500;
    margin-bottom: 0.3em;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.transcript-timestamp-box {
    border: solid #ccc 1px;
    font-size: medium;
    height: 600px;
    max-height: 600px;
    width: 100%;
    overflow-y: scroll;
    overflow-wrap: break-word;
    scrollbar-width: thin;
}

.transcript-block {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.transcript-block.active {
    background-color: #f8ff58;
    padding-top: 5px;
    padding-bottom: 5px;
}

.transcript-timestamp {
    user-select: none;
    padding-left: 15px;
}

.transcript-part {
    padding: 15px;
}

.list-group-hover .list-group-item:hover {
    background-color: #f5f5f5;
}

#bordered-sequence {
    max-height: 600px;
    overflow-y: scroll;
    scrollbar-width: thin;
}

#bordered-sequence-new {
    max-height: 600px;
    overflow-y: scroll;
    scrollbar-width: thin;
}

.clip-sequence {
    color: #3d3d3d;
    cursor: pointer;
}

.clip-sequence-new {
    color: #3d3d3d;
    cursor: pointer;
}


.clip-sequence.autre {
    font-weight: bold;
}

.clip-sequence-file, .clip-sequence-extract, .clip-sequence-transcript {
    float: right;
    cursor: pointer;
}

.clip-show-summary {
    cursor: pointer;
}

.tooltip {
    max-width: 500px;
    max-height: 300px;
}

/* pour l'affichage de la transcription d'une s�quence */
div:where(.swal2-container) .swal2-html-container {
    max-height: 500px;
    white-space: pre-wrap;
    text-align: left !important;
}

.vjs-svg-icon {
    fill: #fff;
    filter: drop-shadow(1px 1px 1px #000);
    background-position: 50%;
    background-repeat: no-repeat;
    width: 1.8em;
    height: 1.8em;
    margin: 0 auto;
    display: flex;
}

.video-js .vjs-text-track-display > div > div > div {
    font-size: 25px !important;
    line-height: 33px !important;
    padding: 5px !important;
    background: rgba(0, 0, 0, .5) !important;
    border-radius: 12px;
    text-shadow: 0 0 5px #000000 !important;
    display: inline-block !important;
}

@media only screen and (min-width: 320px ) and (max-width: 739px) {

    .video-js .vjs-text-track-display > div > div > div {
        font-size: 15px !important;
        line-height: 23px !important;
    }
}

@media only screen and (min-width: 740px ) and (max-width: 1023px) {

    .video-js .vjs-text-track-display > div > div > div {
        font-size: 18px !important;
        line-height: 23px !important;
    }
}

/* Button Upload Image */
.button_outer {
    background: #fff;
    border-radius: 12px;
    border: dashed;
    text-align: center;
    height: 105px;
    width: 165px;
    display: inline-block;
    transition: .2s;
    position: relative;
    overflow: hidden;
    padding-top: 10px;
    margin-top: 20px;
}


.upload_file_input, .select_file_modal {
    max-width: 300px;
    background: #fff;
    margin: 20px auto;
    text-align: center;
    position: relative;
    border: 4px dashed #212729;
    border-radius: 12px;
    padding: 7px;
}

.btn_upload {
    text-align: center;
    position: relative;
    display: inline-block;
    overflow: hidden;
    z-index: 3;
    white-space: nowrap;
    font-size: 16px;
    width: 100%;
    aspect-ratio: 16/9;
}

.btn_upload input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

#selected_view .btn_upload {
    cursor: pointer;
}

.file_uploading {
    width: 100%;
    height: 10px;
    margin-top: 20px;
    background: #ccc;
}

.file_uploading .btn_upload {
    display: none;
}

.processing_bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    border-radius: 30px;
    background: #83ccd3;
    transition: 3s;
}

.file_uploading .processing_bar {
    width: 100%;
}

.success_box {
    display: none;
    width: 50px;
    height: 50px;
    position: relative;
}

.success_box:before {
    content: '';
    display: block;
    width: 9px;
    height: 18px;
    border-bottom: 6px solid #fff;
    border-right: 6px solid #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    left: 17px;
    top: 10px;
}

.file_uploaded .success_box {
    display: inline-block;
}

.file_uploaded {
    margin-top: 0;
    width: 50px;
    background: #83ccd3;
    height: 50px;
    display: none;
}

.uploaded_file_view {
    max-width: 300px;
    margin: 20px auto;
    text-align: center;
    position: relative;
    transition: .2s;
    opacity: 0;
    border: 2px solid #ddd;
    padding: 15px;
    border-radius: 12px;
}

.uploaded_file_view > img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}


.file_remove {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: block;
    position: absolute;
    background: #aaa;
    line-height: 30px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    right: -15px;
    top: -15px;
}

.file_remove:hover {
    background: #222;
    transition: .2s;
}

.uploaded_file_view {
    display: none;
}

.uploaded_file_view img {
    max-width: 100%;
}

.uploaded_file_view.show {
    opacity: 1;
    display: block;
}

.uploaded_file_view.selected {
    border: solid 2px #0d6efd;
}

.error_msg {
    text-align: center;
    color: #f00
}

.section-head {
    margin-bottom: 1rem;
}

.selectview-imageselector {
    cursor: pointer;
}

/** Ora Upload Image*/
.oraUploadImage {
}

.oraUploadImage-selector {
    border: 3px solid var(--bs-gray);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16/9;
    cursor: pointer;
}

.oraUploadImage-selector.selected {
    border-color: var(--bs-blue);
}

.oraUploadImage-selector.editable {
    border: 3px dashed var(--bs-dark);
}

.oraUploadImage-selector > img {
    max-width: 100%;
    width: 100%;
}

.oraUploadImage-selector input[type=file] {
    display: none;
}

.oraUploadImage-selector.editable input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
    opacity: 0;
}

.oraUploadImage-selectorEdit.editable::before {
    content: "\f226";
    font-family: bootstrap-icons !important;
    display: block;
    text-align: center;
    font-size: 42px;
    line-height: 42px;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.oraUploadImage-selectorEdit.editable::after {
    content: " ";
    display: block;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    padding-top: 42px;
}

.oraUploadImage-selectorEdit.oraUploadImage-upload.editable::after {
    content: 'Televerser'
}

.oraUploadImage-selectorEdit.oraUploadImage-selectUploaded.editable::after {
    content: 'Selectionner'
}

.oraUploadImage-selector-close {
    display: none;
}

.oraUploadImage-current.empty {
    display: none;
}

.oraUploadImage-selector:not(.editable) .oraUploadImage-selector-close {
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    top: 0;
    right: 0;
    background-color: #FFFFFFBB;
    cursor: pointer;
}


/** Card Clip */
.clip-tiles {
    border-top: solid 1px #cddfff;
}

.clip-tiles > h1 {
    font-size: 1.5rem;
    line-height: 2rem;
    padding: 15px 0;
    font-weight: 500;
    margin-bottom: 15px;
}

.clip-card {
    overflow: hidden;
    border-radius: 12px;
}

.clip-card .card-title {
    color: #00112F;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    padding: 12px 10px 0 10px;
}

.clip-card .card-body {
    font-size: 14px;
    padding: 0 10px;
}

.clip-card .card-footer {
    font-size: 14px;
    padding: 10px;
}

.card-title pre {
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: #899bbd;
    overflow: unset;
}

.clip-card-thumbnail {
    position: relative;
}

.clip-corner-right {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 30px 0;
    border-color: transparent #ffc100 transparent transparent;
    right: 0;
    top: 0;
    position: absolute;
}

.clip-card-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.clip-card-collection {
    position: absolute;
    left: 7px;
    bottom: 7px;
}

.clip-card-duration {
    position: absolute;
    right: 7px;
    bottom: 7px;
}

.clip-card-live {
    position: absolute;
    right: 7px;
    top: 7px;
}

.clip-card-progress {
    height: 4px;
    position: absolute;
    bottom: 0;
    width: 100%;
    border-radius: 0;
}

.clip-card-live-animation {
    width: 32px;
    background-color: rgba(#fff, 255);
    border: solid 1px #000;
    border-radius: 5px;
}


.card.clip-card.clip-card-tile {
    min-height: 320px;
}

.card.clip-card.clip-card-band {
    min-height: 120px;
}

.clip-card .card-footer.card-footer-clip-theme {
    text-align: right;
}

.clip-card-band .clip-card-collection {
    left: 19px;
}

.clip-card-band .clip-card-duration {
    right: 19px;
}

.clip-card-band .clip-card-live {
    right: 19px;
}

.clip-card-tile .clip-card-image {
    border-bottom: solid 1px #ebeef4;
}

.clip-card-band .clip-card-image {
    border-right: solid 1px #ebeef4;
}

.clip-card-band .clip-card-description {
    position: relative;
    padding-bottom: 42px;
}

.clip-card-band .clip-card-description .card-footer-clip-theme {
    position: absolute;
    width: 100%;
    padding: 10px;
    bottom: 0;
    right: 12px;
}

.clip-card-band .clip-card-description:has(.card-footer-clip-theme) {
    padding-bottom: 42px;
}

.clip-card-collection .badge {
    overflow: hidden;
    vertical-align: bottom;
    max-width: 200px;
    text-overflow: ellipsis;
}

.clip-card .card-body.audio {
    background: url(../images/clip_audio_bg.png);
    background-size: 72px;
    background-position: right;
    max-height: 120px;
    background-repeat: no-repeat;
}

.clip-card .card-body.video {
    background: url(../images/clip_video_bg.png);
    background-size: 72px;
    background-position: right;
    max-height: 120px;
    background-repeat: no-repeat;
}

.card-footer-date-event {
    float: left;
    color: rgba(var(--bs-primary-rgb)) !important;
}

.card-footer-date-ago {
    float: right
}

.highlightSearch {
    font-weight: bold;
    background-color: #494949;
    border-radius: 3px;
    padding: 0 5px 2px 5px;
}

.small-thumbnail {
    width: 20%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.list-group-item.audio {
    background: url(../images/clip_audio_bg.png);
    background-size: 60px;
    background-position: right;
    background-repeat: no-repeat;
}

.list-group-item.video {
    background: url(../images/clip_video_bg.png);
    background-size: 60px;
    background-position: right;
    background-repeat: no-repeat;
}

.list-group-item.active-clip {
    border-left: solid 5px #257dff;
}

/* Footable */
td.footable-editing {
    width: 90px !important;
    max-width: 90px !important;
}

/* Video JS */
.vjs-poster img {
    object-fit: cover;
}

@media (max-width: 575px) {
    .vjs-logo img {
        width: 100%;
    }

    .vjs-logo {
        width: 15%;
        top: 5px !important;
        right: 5px !important;
    }
}

/* Select2 */
/*.select2-selection--multiple .select2-search__field {
display: none;
}*/
.select2 .select2-selection:not(.select2-selection--multiple) {
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
    height: 38px;
}

.select2 .select2-selection:not(.select2-selection--multiple) .select2-selection__rendered, .select2 .select2-selection:not(.select2-selection--multiple) .select2-selection__arrow {
    /*    line-height: 38px;
height: 38px;*/
}

#actionBox .btn {
    width: 100%;
}

#actionBox .bi {
    font-size: x-large;
}

#searchTimeBtn {
    cursor: pointer;
}

#playlistBox {
    border-radius: 15px;
}

.remove-clip {
    position: absolute;
    right: 7px;
    bottom: 3px;
}

/* Sidebar */
.sidebar-nav .nav-item.selected, .sidebar-nav .nav-item.selected * {
    color: #4154f1;
    background-color: #f6f9ff;
}

/* Admin */
div:has(>#table-collectionpermissions), div:has(>#table-collectionenregistreurs) {
    max-height: 400px;
    overflow-y: auto;
}

#table-collectionpermissions td.footable-last-visible, #table-collectionenregistreurs td.footable-last-visible {
    text-align: center;
    width: 65px;
}

#table-collectionpermissions td:not(.footable-first-visible,.footable-last-visible), #table-collectionenregistreurs td:not(.footable-first-visible, :nth-child(4),.footable-last-visible) {
    text-align: center;
    width: 90px
}

.ratio-16-9 {
    aspect-ratio: 16/9;
    object-fit: cover;
}

.ellipsis {
    max-width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}

.big-icon {
    font-size: 36px;
}

.bg-orange {
    background-color: orangered;
}

.personne-nom{
    color: blue;
    font-weight: bold;
    user-select: none;
}