/* Bootstrap 4 ++ */
@import "/css/actor-page-7dd5ea6da6e4ba1b0e90fe5fb74cdc7e.css";
@import "/css/tour-6ecfd710f91859a915a4aaa4f46e32c9.css";

.table {
    border-bottom: 1px solid #e9ecef;
}

.btn, .nav-link {
    cursor: pointer;
}

.btn, .breadcrumb, .input-group-text, .card-footer:last-child, .alert, .form-control,
.card-img-top, .list-group-item:first-child, .btn-group-sm > .btn, .btn-sm, .progress,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .form-control,
.input-group-sm > .input-group-append > .btn,
.card-header:first-child,
.custom-checkbox .custom-control-label::before,
.custom-select,
.list-group-item:last-child,
.card,
.badge,
.input-group-sm > .custom-select, .input-group-sm > .form-control, .input-group-sm > .input-group-append > .btn, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-prepend > .input-group-text,
.modal-content {
    /*border-radius: 0;*/
}

/* fix, 'cause angular.min.js can be later */
[ng-cloak], .ng-cloak {
    display: none;
}

.navbar {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.navbar.app-test {
    /* bg-success */
    border-bottom: 2px solid #28a745;
}

.navbar.app-dev {
    /* bg-warning */
    border-bottom: 2px solid #ffc107;
}

.navbar .app-title-dev {
    color: #ffc107;
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase
}

.navbar .app-title-test {
    color: #28a745;
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
}

.video-overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 10px;
    padding: 5px 5px;
    font-size: 16px;
    color: #FFF;
    /*background-color: rgba(50, 50, 50, 0.3);*/
}

.video-overlay-alert {
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 5px 5px;
    font-size: 20px;
    background-color: gray;
}

.video-overlay-alert-bottom {
    position: absolute;
    right: 0px;
    bottom: 0px;
    padding: 5px 5px;
    font-size: 16px;
    color: #333;
    background-color: #ffdf7e;
}

.video-timing {
    position: absolute;
    right: 0px;
    bottom: 0px;
    margin: 10px;
    padding: 5px 5px;
    font-size: 16px;
    color: #333;
    background-color: #FFF;
}

div#preview div#local-media video {
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 10px;
    max-width: 100%;
    max-height: 100px;
    border: 1px solid white;
}

label {
    cursor: pointer;
}

.blink_me {
    animation: blinker 3s linear infinite;
}

.blink_me_fast {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.alerts-border {
    border: 1px #ff0000 solid;
    animation: blink 1s;
    animation-iteration-count: 3;
}

@keyframes blink {
    50% {
        border-color: #fff;
    }
}

.videoElement {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg); /* Safari and Chrome */
    -moz-transform: rotateY(180deg); /* Firefox */
}

.product-logo {
    max-width: 100px;
    max-height: 100px;
    text-align: center;
    border: 1px solid lightgrey;
}

.product-overlay {
    text-align: center;
    border: 1px solid lightgrey;
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.product-overlay-list {
    max-width: 240px;
    max-height: 135px;
    text-align: center;
    border: 1px solid lightgrey;
}

.overlay-star {
    text-align: center;
    border: 1px solid lightgrey;
    object-fit: contain;
    width: 100%;
    height: 100%;
    max-width: 75px;
    max-height: 75px;
}

.shadow-bottom {
    box-shadow: 0 4px 2px -2px lightgray;
}

.popover {
    box-shadow: 0.5rem 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.5);
    font-size: 1rem;
}

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
ul[dnd-list] {
    min-height: 15px;
    padding-left: 0px;
}

/**
 * The dndDraggingSource class will be applied to
 * the source element of a drag operation. It makes
 * sense to hide it to give the user the feeling
 * that he's actually moving it.
 */
ul[dnd-list] .dndDraggingSource {
    display: none;
}

/**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
ul[dnd-list] .dndPlaceholder {
    background-color: #b8daff;
    display: block;
    min-height: 25px;
    min-width: 100%;
}

ul[dnd-list] li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    display: block;
    padding: 2px 3px;
    margin-bottom: -1px;
}

/**
 * Show selected elements in green
 */
ul[dnd-list] li.selected {
    background-color: #dff0d8;
    color: #3c763d;
}

/* --- VIDEO --- */
#featured-video {
    transition: width .2s ease-in-out, height .2s ease-in-out, transform .38s ease-in-out;
}

/** Use .sticky */
#featured-video.is-sticky {
    position: fixed;
    top: auto;
    left: auto;
    z-index: 100;
    width: 400px;
    height: 300px;
}

.font-10 {
    font-size: 10px;
}

.btn_assign {
    border-bottom-color: #007bff;
    border-bottom-style: solid;
    border-bottom-width: 5px;
}

.btn_un-assign {
    border-bottom-color: #dc3545;
    border-bottom-style: solid;
    border-bottom-width: 5px;
}

.btn_completed {
    border-bottom-color: #dc3545;
    border-bottom-style: solid;
    border-bottom-width: 5px;
}

.btn_parked {
    border-bottom-color: #ffc107;
    border-bottom-style: solid;
    border-bottom-width: 5px;
}

.btn_ready_for_review {
    border-bottom-color: #007bff;
    border-bottom-style: solid;
    border-bottom-width: 5px;
}

.btn_publish {
    border-bottom-color: #28a745;
    border-bottom-style: solid;
    border-bottom-width: 5px;
}

.yt_text {
    font-family: "Arial Narrow";
    font-weight: bold;
    letter-spacing: -0.5px;
    color: black;
}

.yt_logo {
    color: red;
}

.btn-outline-success:hover:not([disabled]) .yt_logo,
.btn-outline-success:hover:not([disabled]) .yt_text,
.btn-outline-primary:hover:not([disabled]) .yt_logo,
.btn-outline-primary:hover:not([disabled]) .yt_text {
    color: white;
}

.iti {
    display: block;
    width: 100%;
}

.input-group > .iti {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    margin-bottom: 0;

}

.custom-popover-class {
    background: yellow;
}

.video-overlay-text {
    test-shadow: 1px 1px #008;
}

.act-prop-text {
    color: black;
    text-shadow: 1px 1px white;
}

.w-limit {
    max-width: 1800px;
}


.drop-area {
    border: 2px dashed #ccc;
    border-radius: 5px;
    padding: 10px;
}

.drop-area.hover {
    background: lightgreen;
}

/*#video-controls {
    opacity: 0;
    transition: opacity 0.5s;
}
#video-container:hover > #video-controls {
    opacity: 1;
}*/

.is-sticky #video-controls .btn {
    font-size: 1rem;
}

.is-sticky #chart-wrapper{
    margin-top: 40px;
}

.border-special-instruction {
    border: 2px solid #5bc0de;
    border-radius: 5px;
}

.guidance-area-style {
    border: 2px solid #5bc0de;
    border-radius: 5px;
}

.background-special-instruction {
    background-color: #5bc0de;
}

.flipped {
    transform: rotateY(180deg);
}

.line-through {
    text-decoration: line-through;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.pointer {
    cursor: crosshair;
}

.line-space {
    line-height: 1.1;
    background-color: lightgrey;
}

.exposure-point {
    width: 50px;
    height: 50px;
    position: absolute;
    background: url("/img/exposure-point-b53eccb21418106d8fdc4c09f5e66ba8.png");
    background-size: cover;
}

.exposure-point::before {
    content: "exposure";
    position: absolute;
    top: -13px;
    left: 3px;
    color: yellow;
    font-size: 10px;
}

.focus-point {
    width: 50px;
    height: 50px;
    position: absolute;
    background: url("/img/exposure-point-b53eccb21418106d8fdc4c09f5e66ba8.png");
    background-size: cover;
}

.focus-point::before {
    content: "focus";
    position: absolute;
    top: -13px;
    left: 12px;
    color: yellow;
    font-size: 10px;
}

.custom-range-style {
    writing-mode: bt-lr;
    transform: rotate(270deg);
    height: 100%;
    width: 100%;
}

.exposure-compensation-min {
    position: absolute;
    right: 75px;
    top: 60px;
    font-weight: bold;
    color: red;
}

.exposure-compensation-current {
    position: absolute;
    right: 75px;
    top: 2px;
    font-weight: bold;
    color: red;
}

.exposure-compensation-max {
    position: absolute;
    right: 75px;
    top: -55px;
    font-weight: bold;
    color: red;
}

/* set thumb width */
/* set thumb width */
#manage_camera input[type=range], input[type=range] + datalist {
    --thumb-width: 8px;
}

/* style range */
#manage_camera input[type=range] {
    -webkit-appearance: none; /* hide track and thumb */
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

/* style datalist */
#manage_camera input[type=range] + datalist {
    display: flex;
    margin-top: -4px;
}

#manage_camera input[type=range] + datalist option {
    display: inline-block;
    width: calc((100% - var(--thumb-width)) / (var(--list-length) - 1));
    text-align: center;
}

#manage_camera input[type=range] + datalist option:first-child {
    width: calc((100% - var(--thumb-width)) / ((var(--list-length) - 1) * 2) + var(--thumb-width) / 2);
    text-align: left;
}

#manage_camera input[type=range] + datalist option:last-child {
    width: calc((100% - var(--thumb-width)) / ((var(--list-length) - 1) * 2) + var(--thumb-width) / 2);
    text-align: right;
}

/* style Firefox range and thumb */
#manage_camera input[type=range]::-moz-range-track {
    background: #eee;
    cursor: pointer;

    height: 2px;
    border: 1px solid #888;
    border-radius: 1px;
}

#manage_camera input[type=range]::-moz-range-thumb {
    background: #eee;

    box-sizing: border-box;
    width: 20px;
    height: 20px;

    cursor: pointer;

    border: 1px solid #888;
    border-radius: 3px;
}

/* style Chrome range and thumb */
#manage_camera input[type=range]::-webkit-slider-runnable-track {
    background: #eee;
    cursor: pointer;

    height: 5px;
    border: 1px solid cornflowerblue;
    border-radius: 3px;
}

#manage_camera input[type=range]::-webkit-slider-thumb {
    background: #eee;

    box-sizing: border-box;
    width: 20px;
    height: 20px;
    cursor: pointer;

    border: 1px solid cornflowerblue;
    margin-top: -8px;
}

.link-style {
    color: blue;
    text-decoration: underline;
}

.link-style:hover {
    color: darkblue;
    cursor: pointer;
}

.noborder {
    border: 0 !important;
}

.shoot-name::first-letter {
    margin-right: 3px;
    color: red;
}

.custom-border {
    position: relative;
    border: 2px solid dodgerblue;
    border-radius: 5px;
    padding: 3px;
}

.custom-border::before {
    content: "Actual";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    color: dodgerblue;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: bold;
}

.reshoot-preview-container {
    border: 1px solid lightgrey;
    border-radius: 5px;
    padding: 5px 5px 0 5px;
}

.custom-textarea {
    border: 1px solid #007bff;
}

.director-video-container {
    object-fit: contain;
    width: 100%;
    height: 100%;
    max-height: 480px;
    max-width: 480px;
}

.issue-chat-settings {
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: auto;
}

@media (max-width: 576px) {
    .director-video-container {
        width: 320px;
        max-height: 320px;
    }
}

.link_item {
    cursor: pointer;
    color: #007bff;
}

.link_item:hover {
    text-decoration: underline;
}

.shoot-log-filter-width {
    width: 250px;
}

.outside-assignee-circle {
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.outside-assignee-circle-selected {
    outline: 2px solid deepskyblue !important;
    outline-offset: -2px;
    border-radius: 50%;
}

.assignee-circle {
    width: 40px;
    height: 40px;
    border: 2px solid white;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}

.assignee-img {
    object-fit: contain;
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.line-position {
    margin-top: 12px;
    border-top: 1px solid lightgrey;
}

.size-chat-time {
    font-size: 11px;
}

.pin-45-pointer {
    transform: rotate(45deg);
    cursor: pointer;
}

.pin-45 {
    color: red;
    transform: rotate(45deg);
}

.pinned-message {
    padding: 3px;
    background-color: lightblue;
    border: 1px solid grey;
    border-radius: 3px;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.w-25 {
    width: 25% !important;
}

.caption-text-size {
    font-size: 14px;
    font-weight: bold;
}

.nav-text-size {
    font-size: 16px;
    font-weight: bold;
}

#personal-data, #scheduled-date, #upload-video, #edit-caption {
    scroll-margin-top: 40px;
}

.circle-button {
    width: 35px;
    height: 35px;
    border: 1px solid lightgrey;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    cursor: pointer;
    transition: background-color 0.3s;
}

.circle-button:hover {
    background-color: #e0e0e0;
}

.w-25-custom {
    width: 25px;
}

.cursor-default {
    cursor: default;
}

.cursor-pointer {
    cursor: pointer;
}

.modal-md {
    max-width: 40%;
}

@media (max-width: 600px) {
    #featured-video.is-sticky {
        width: 160px;
        height: 100px;
        position: fixed;
        top: 5px;
        left: 5px;
    }

    #featured-video #video-controls .btn {
        font-size: 0.8rem;
    }

    #featured-video.is-sticky #video-controls .btn {
        display: none;
    }

    .mobile-content .btn {
        font-size: 12px;
        padding: 2px 2px 2px 2px;
    }

    .mobile-content span {
        font-size: 14px;
    }

    .mobile-content label {
        font-size: 14px;
    }

    .mobile-content-btn-width {
        width: 100px !important;
    }

    .mobile-content-col-width {
        width: 70px !important;
    }

    .mobile-content-label {
        width: 100px !important;
    }

    .mobile-text span {
        font-size: 12px;
    }

    .mobile-hand-pointer {
        width: 35px !important;
    }

    .mobile-content table tr td span {
        font-size: 12px;
    }

    .mobile-content table tr td .btn {
        font-size: 12px;
        padding: 2px 2px 2px 2px;
    }

    .rec-btn {
        padding: 2px;
        font-size: 12px;
    }

    .responsive-flex {
        display: flex;
        flex-direction: column;
    }

}

@media (min-width: 601px) {
    .responsive-flex {
        display: flex;
        flex-direction: row;
    }
}

@media (max-width: 768px) {
    .caption-text-size {
        font-size: 10px;
    }

    .nav-text-size {
        font-size: 12px;
        padding-left: 0;
        margin-left: 0;
        padding-right: 3px;
        margin-right: 3px;
    }
}

.background-lightgrey {
    background-color: rgba(211, 211, 211, 0.5);
}

.tag-box {
    display: inline-block;
    border: 1px solid lightgrey;
    border-radius: 5px;
    padding: 0 2px 0 2px;
    font-size: 12px;
    background: rgba(211, 211, 211, 0.5);
}

.attachment-count-circle {
    position: relative;
    bottom: 3px;
    right: 2px;
    font-size: 10px;
    color: white;
    background-color: rgb(143, 143, 143);
    border: 1px solid rgb(143, 143, 143);
    font-weight: bold;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.w-10 {
    width: 10%;
}

.release-task-input-width {
    max-width: 100px;
}

.custom-background {
    background-color: rgba(0, 255, 0, 0.4);
    border: 1px solid rgba(0, 255, 0, 0.4);
    border-radius: 4px;
}

.custom-line-height {
    line-height: 1;
}

.custom-primary-border {
    border: 3px solid #3B71CA;
    border-radius: 3px;
}

.close-chart-button-background {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(77, 77, 77, 0.8);
    border: none;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    cursor: pointer;
    margin-top: 3px;
}

.participants-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(77, 77, 77, 0.2);
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    margin-right: 15px;
}

.participant-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(77, 77, 77, 0.2);
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    margin-right: 5px;
}

.join-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid rgba(77, 77, 77);
    border-radius: 10px;
    width: 195px;
    font-size: 16px;
    margin-left: 5px;
}

.join-btn:hover{
    background-color: rgba(77, 77, 77, 0.5);
}