html,
body {
    background-color: #0C0D0F !important;
    background: #0C0D0F !important;

}

div {
    color: #fff;
}

.nav-img {
    border: 1px solid #309234;
}


.main-div {
    margin-top: 30px;
}

.r-panel,
.m-panel,
.l-panel {
    padding: 15px !important;
    height: fit-content;
    min-height: 200px;
}


.tooltip-panel.shown {
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 0 2px #ccc;
    outline: none;
    margin: -10px;
    padding: 10px;
}

/* Tooltip text */
.tooltiptext {
    visibility: visible;
    width: 120px;
    background-color: #2d2e32;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

.tooltiptext.hide {
    visibility: hidden;
}

/* Show the tooltip text when you mouse over the tooltip container */
/* .tooltip-panel .tooltiptext {
  visibility: visible;
} */

.navbar-collapse {
	max-inline-size: fit-content;
    margin-inline-start: auto;
    float: right;
}

.displaynone {
    display: none;
}

.tooltip-panel1 .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%;
    /* To the left of the tooltip */
    margin-top: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent #2d2e32 transparent transparent;
}

.tooltip-panel2 .tooltiptext::after,
.tooltip-panel3 .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%;
    /* To the right of the tooltip */
    margin-top: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent #2d2e32;

}


.tooltip-panel.tooltip-panel1 .tooltiptext {
    top: 50%;
    left: 105%;
}

.tooltip-panel.tooltip-panel2 .tooltiptext {
    top: 25%;
    right: 105%;
}

.tooltip-panel.tooltip-panel3 .tooltiptext {
    top: 50%;
    right: 105%;
}

.tooltip-close {
    float: right;
    margin: 0;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    line-height: 1;
    transform: translate(40%, -50%);
    background-color: #2d2e32;
    border-radius: 50%;
}

.tooltip-content {
    float: left;
    margin: 0 10px;
    line-height: 1.2;
    font-size: 1rem;
}


.panel-section {
    padding: 20px 0;
}

.panel-section.first {
    padding: 0px 0px 20px 0;
}

.panel-section.wb {
    border-top: 2px solid #1D1E22;
}

.panel-section.wb.addtorenderbtn-panel {
    border-top: none;
    padding-top: 0px;
}

.panel-section.wb.previewbtn-panel {
    border-top: none;
    padding-top: 0px;
}

.panel-section.wb.vidtitle-panel {
    border-top: none;
    padding-top: 0px;
    /* padding-bottom: 0px; */
}

.panel-section.wb.mainsub-panel {
    border-top: none;
    padding-top: 0px;
}

.grey-panel {
    background-color: #191A1E;
}

.pw-protect-div {
    height: 600px;
    display: block;
    max-width: 400px;
    margin: auto;
}

.pw-protect-input-group {
    top: 50%;
}



.btn.btn-darkdefault {
    color: #309234;
    border: 2px solid #309234;
    border-radius: 0px;
    font-size: 14px;
    padding: 10px 30px;
    /* margin: 0 5px; */
	background-color: #000;
}

.btn.btn-darkdefault.nav-btn {
    margin-left: 10px;
}

.pw-submit {
    background-color: #000;
    border: 1px solid #309234;
    border-radius: 0px;
    color: #309234;
    font-size: 25px;
}


.pw-submit:hover {
    background-color: #309234;
    border: 1px solid #000;
    color: #fff;
}

.btn.btn-darkdefault:hover {
    color: #fff;
    background: #00D200;
}

.btn.btn-darkdefault.addtorenderbtn,
.btn.btn-darkdefault.previewbtn {
    width: 100%;
    margin: 0;
}

.iframecontainer1 {
    padding: 15px 30px
}

.iframediv1 {
    width: 100%;
    height: 900px;
}

.btn.btn-darkdefault.addnewvid {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 50px;

    font-size: 46px;
    font-weight: bold;
    line-height: 0px;
}

/* .btn.btn-darkdefault.addnewvid i {
    font-size: 46px;
    font-weight: bold;
    line-height: 0px;
} */

.btn.btn-darkdefault.action-btn {
    margin-bottom: 20px;
    width: 100%;
    margin: 0 0 20px 0;
    padding: 12px 20px;
    height: 50px;

    /* padding-top: 10px; */
}

.btn.btn-darkdefault.action-btn i {
    float: left;
    font-size: 20px;
    position: relative;
    top: -5px;
    left: 20px;
}

.btn.btn-darkdefault.action-btn span {
    float: left;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    top: 0px;
    left: 50px;
}


.r-panel-items {
    padding-left: 2px;
    margin: 20px 0px;
}

.r-panel-items span {
    font-size: 24px;
    top: -5px;
    position: relative;
    top: -15px;
}


.play-btn::before {
    top: -10px;
    left: -2px;
    position: relative;

}

.play-btn {
    color: #25262B;
    background: #757776;
    border-radius: 1000px;
    display: inline-block;
    margin-right: 10px;
    font-size: 35px;
    height: 30px;
    width: 30px;
	display: inline-block;
}

.play-btn.active {
    background: #00D002;
}

.elements-anchor {
    color: #717171;
	white-space: nowrap;
}

.elements-anchor.active {
    color: #a2a2a2;
}

.elements-anchor:hover {
    text-decoration: none;
    color: #a2a2a2;
}
.elements-anchor .active+span {
	background-image: url(/assets/img/btn_elements_active.png);
    background-repeat: no-repeat;
    background-size: 70% 30px;
    background-position: right 25% bottom;
    display: inline-block;
    width: 100%;
    background-position-x: left;
    padding-left: 10px;
}
.tab-div {
    display: none;
}

.tab-div.active {
    display: block;
}

.m-panel-title {
    color: #a2a2a2;
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
}


h4 {
    font-size: 24px;
}

#project-name-title {
    color: #309234;
    font-size: 26px;
}

.hasError {
    border: 2px solid #dc3545 !important;
}

.md-lyft-select,
.md-lyft-select:focus {
    padding-top: 3px;
    color: #a2a2a2;
    background: #25262B;
    border: #25262B;

    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari and Chrome */
    appearance: none;
    background-image: url('../img/caret.svg');
    background-repeat: no-repeat;
    background-size: 4%;
    background-position-x: 97%;
    background-position-y: 12px;
}



.md-lyft-select option,
.md-lyft-select option:focus {
    color: #a2a2a2;
    background-color: #25262B;
    border: #25262B;
}

.row-pad20 {
    margin-bottom: 20px;
}

.col-label {
    color: #a2a2a2;
    font-size: 16px;
    margin-bottom: 8px;
    text-align: center;
}

.md-lyft-select {
    margin-bottom: 8px;
}

.timesets {
    color: #a2a2a2;
    background: #25262B;
    border: #25262B;
    height: 38px;
    /* width: 15.2%; */
    border-radius: 5px;
    text-align: center;
}

.timeset-vidtext {
    color: #a2a2a2;
    background: #25262B;
    border: #25262B;
    height: 38px;
    /* width: 15.2%; */
    border-radius: 5px;
    /* text-align: center; */
    margin-bottom: 15px;
}


.timesets:focus {
    color: #000;
    background: #fff;
}

input.timesets::-webkit-outer-spin-button,
input.timesets::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.row-timesets {
    padding: 0px 10px;
}

.row-timesets .col-lg-2,
.row-timesets .col-lg-3,
.row-timesets .col-lg-10 {
    padding: 0 5px;
}

.timesets-col {
    text-align: center;
}

.timesets-label, {
    font-size: 14px;
    color: #a2a2a2;
    line-height: 18px;
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
}

.md_checkbox_label {
    font-size: 14px;
    color: #a2a2a2;
    line-height: 18px;
}
.video-item {
    background: #191A1E;
    border-radius: 5px;
    padding: 15px;
    font-size: 18px;
    padding: 5px 15px;
    color: #fff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
    margin-top: 10px;

    cursor: pointer;
    text-decoration: none;
}

/*
.video-item {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;
  text-align: center;
}

.video-item .bi.bi-list {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
} */


.video-item:hover {
    background: #094013;
    color: #000;
}


.video-item.active {
    background: #00D200;
    color: #000;

	background-image: url(/assets/img/bgbtn_gray.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right 25% bottom;
}

.video-item .vi-title .vi-title-name {
    font-size: 14px;
    display: block;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    max-width: 150px;
}

.video-item .vi-title .vi-title-type {
    font-size: 12px;
    display: block;
    color: #a2a2a2;
    white-space: nowrap;
    overflow: hidden;
}

.video-item.active .vi-title .vi-title-name {
    color: #fff;
}

.video-item.active .vi-time-subtotal,
.video-item.active .vi-title .vi-title-type {
    color: #fff;
}

.white-color {
    color: white;
}

.video-item .vi-title {
    white-space: nowrap;
    overflow: hidden;
    min-width: fit-content;
    margin-left: 20px;
}

.video-item .vi-actions {
    margin-left: auto;
    color: #a2a2a2;
    white-space: nowrap;
    overflow: hidden;
    min-width: fit-content;

    display: flex;
}


.video-item.active .vi-actions {
    margin-left: auto;
    color: #000;
}

.video-item-anchor,
.video-item-anchor:hover {
    text-decoration: none;
}


.loader {
    border: 4px solid #a2a2a2;
    border-top: 4px solid #191A1E;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;

    position: absolute;
    top: 50%;
    left: 50%;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.rendered-vids-panel {
    padding: 0;
    /* height: 300px; */
	min-height: 40px;
    overflow-y: auto;
    margin-bottom: 0px;
}


/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #ddd;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #777;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #777;
}

.swal2-input:focus {
    color: #000;
    background: #fff;
}

.project-list-table th {
    border: 0;
}

.project-list-table th:nth-child(1),
.project-list-table td:nth-child(1) {
    padding-left: 30px;
}

.project-list-table th:nth-child(2),
.project-list-table td:nth-child(2) {
    padding-right: 30px;
}

.modal-header {
    border: 0;
}

.project-list-table tr.project-item:hover {
    cursor: pointer;
    background-color: #094013 !important;
}

.project-list-table tr.project-item.active {
    background-color: #309234;
}

.project-item-filter-input {
    width: 100%;
}
.project-item-filter-tr td {
    padding-right: 30px;
    padding-left: 30px;
}

.modal-body {
    min-height: 150px;
}

.modal-content {
    background: #000;
}

#project-table-div, #generated-video-list-div {
    width: 100%;
}

#swal2-title {
    color: #fff;
}

.swal2-container {
  /* z-index: 1051; */
}

.project-actions {
    margin-left: 5px;
    cursor: pointer;
}

.project-actions:hover {
    color: #309234;
}

.modal-preview {
    max-width: 100%;
    margin: 0;
    height: 100%;
}

#preview-video-modal .modal-content {
    height: 100%;
}

#preview-video-modal .modal-header {
    padding: 0 15px;
}

#preview-video-modal {
    padding: 0;
}

.preview-video-header {
    margin-bottom: 15px;
    padding: 0 10px;
    text-align: left;
}

.preview-video-name {
    font-size: 25px;
}

.preview-video-timer {
    font-size: 30px;
    float: right;

    font-weight: bolder;
}

.preview-video-timer.work {
    color: green;
}

.preview-video-timer.rest {

    color: red;
}

#preview-video-modal .modal-body .row {
    margin-bottom: 20px;
}

#preview-video-modal .modal-body {
    text-align: center;
    max-width: 1500px;
    margin: auto;
}

.col-flex {
    display: flex;
}

.preview-wrapper {

    max-width: 1300px;
    margin: 0 auto;

}

.prev-video {
    width: 100%;
    height: auto;
    max-height: 750px;
    margin: auto;
}

.prev-video-div-half {
    padding: 0 10px;
    max-width: 50%;
}

.vidbody-div {
    margin-bottom: 15px;
}

.prev-video-div-blank {
    padding: 0 10px;
    margin: 0 10px;
    width: 100%;
    background-clip: content-box;
    background: url(/public/assets/img/navbaricon.png);
    background-position: center;
    background-repeat: no-repeat;
    background-color: #191A1E;
    background-size: 25%;
}

.prev4-text {
    text-align: center;
    margin: 10px 0px 20px 0px;
    font-size: 20px;
}


.prev-video-sub {
    position: absolute;
    border: 3px solid #000;
    max-width: fit-content;
    height: 30% !important;
}

.prev-video-sub-q1 {
    top: 10px;
    left: 40px;
}

.prev-video-sub-q2 {
    top: 10px;
    right: 40px;
}

.prev-video-sub-q3 {
    bottom: 15px;
    left: 40px;
}


.prev-video-sub-q4 {
    bottom: 15px;
    right: 40px;
}

/* #swal2-title {
    color: #fff;
}
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel
{
    color: #309234 !important;
    border: 2px solid #309234 !important;
} */

/* #preview-video-modal  */



/* #00b507 */
/* #f45e61 */

#preview-video-modal .modal-body {
	 background: none;
	 border: 0;
	 box-sizing: border-box;
	 /* margin: 1em;
	 padding: 1em 2em; */
	 box-shadow: inset 0 0 0 10px #000;
	 color: #000;
	 font-size: inherit;
	 font-weight: 700;
	 position: relative;
	 vertical-align: middle;
}
#preview-video-modal .modal-body::before, .modal-body::after {
	 box-sizing: inherit;
	 content: '';
	 position: absolute;
	 width: 100%;
	 height: 100%;
}
#preview-video-modal .draw {
	 transition: color 0.25s;
}
#preview-video-modal .draw::before, .draw::after {
	 border: 10px solid transparent;


	 width: 0;
	 height: 0;
}
#preview-video-modal .draw::before {
    border-bottom: none;
}
#preview-video-modal .draw::after {
    border-top: none;
}
#preview-video-modal .draw::before {
	 top: 0;
	 left: 0;
}
#preview-video-modal .draw::after {
	 bottom: 0;
	 right: 0;
}
#preview-video-modal .draw.run {
	 color: #00b507;
}
#preview-video-modal .draw.run::before, #preview-video-modal .draw.run::after {
	 width: 100%;
	 height: 100%;
}
#preview-video-modal .draw.run::before {
	 border-top-color: #00b507;
	 border-right-color: #00b507;
	 /* transition: width 1s ease-out, height 1s ease-out 1s; */
     /* durationofupper, durationofright waittimeofright */
}
#preview-video-modal .draw.run::after {
	 border-bottom-color: #00b507;
	 border-left-color: #00b507;
     /* transition: border-color 0s ease-out 2s, width 2s ease-out 2s, height 1s ease-out 4s; */
     /*  bordercolortransition durationofupper+durationofright,
     waittimeofbottom durationofbottom,
     durationofleft waittimeofleft(durationofbottom+waittimeofbottom)*/
}
.resort-btns {
    /* position: absolute;
    right: 75px; */
    display: block;
    /* top: 10px; */
    margin-right: 5px;
}
.sort-elem {
    font-size: 18px;
    /* height: 20px; */
}

/*** added by pgry 31-05-2022 ***/

.timesets-col.disabled{ display:none; }

.modal-dialog > div {
  height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.btn.export-project[disabled]:hover {
    color: #efefef42;
    background-color: unset;
}

.btn.save-project.disabled,
.btn.export-project[disabled] {
    color: #efefef42;
    border: 2px solid #efefef42;
}

.total-time.disabled { display: none; }

.total-time,
.vi-time-subtotal {
    font-size: 10px;
    display: block;
    color: #a2a2a2;
    white-space: nowrap;
    overflow: hidden;
}

/*general*/

/** end of added **/

@media (min-width: 576px) {

    /* .r-panel,
    .m-panel,
    .l-panel {
        padding: 15px !important;
    } */

    .main-container {
        max-width: 540px;
    }

    .r-panel-items span {
        font-size: 16px;
    }

    .play-btn {
        margin-right: 10px;
        font-size: 25px;
        height: 20px;
        width: 20px;
    }




    .md-lyft-select,
    .md-lyft-select:focus {
        background-size: 6%;
        background-position-x: 95%;
        background-position-y: 14px;
    }


    .md-lyft-select.for-4 {
        background-size: 6%;
        background-position-x: 95%;
        background-position-y: 14px;
    }

    .md-lyft-select.for-6 {
        background-size: 6%;
        background-position-x: 95%;
        background-position-y: 14px;
    }

    .video-item .vi-actions {
        margin-left: 0;
    }

    .video-item.active .vi-actions {
        margin-left: 0;
    }


    .video-item .vi-title .vi-title-name {
        max-width: 83px;
    }

    .btn.btn-darkdefault.action-btn i {}

    .btn.btn-darkdefault.action-btn span {
        /* display: none; */
    }

    .resort-btns {
        display: none;
    }
}

@media (min-width: 768px) {

    .btn.btn-darkdefault.action-btn i {
        font-size: 18px;
        top: -2px;
        left: -5px;
    }

    .btn.btn-darkdefault.action-btn span {
        font-size: 12px;
    }

    .r-panel-items span {
        font-size: 16px;
    }

    .play-btn {
        margin-right: 10px;
        font-size: 25px;
        height: 20px;
        width: 20px;
    }


    .md-lyft-select,
    .md-lyft-select:focus {
        background-size: 5%;
        background-position-x: 95%;
        background-position-y: 12px;
    }


    .md-lyft-select.for-4 {
        background-size: 5%;
        background-position-x: 95%;
        background-position-y: 12px;
    }

    .md-lyft-select.for-6 {
        background-size: 5%;
        background-position-x: 95%;
        background-position-y: 12px;
    }



    .video-item .vi-title .vi-title-name {
        max-width: 120px;
    }

    .btn.btn-darkdefault.action-btn span {
        display: contents;
    }

}

@media (min-width: 992px) {

    .btn.btn-darkdefault.action-btn i {
        font-size: 20px;
        top: -5px;
        left: 5px;
    }

    .btn.btn-darkdefault.action-btn span {
        float: left;
        font-size: 14px;
        font-weight: bold;
        position: relative;
        top: 0px;
        left: 50px;
    }

    .r-panel-items span {
        font-size: 18px;
    }

    .play-btn {
        margin-right: 10px;
        font-size: 30px;
        height: 25px;
        width: 25px;
    }


    .md-lyft-select,
    .md-lyft-select:focus {
        background-size: 10%;
        background-position-x: 90%;
        background-position-y: 14px;
    }


    .md-lyft-select.for-4 {
        background-size: 10%;
        background-position-x: 90%;
        background-position-y: 12px;
    }

    .md-lyft-select.for-6 {
        background-size: 6%;
        background-position-x: 95%;
        background-position-y: 12px;
    }

    .md-lyft-select.for-12 {
        background-size: 4%;
        background-position-x: 97%;
        background-position-y: 12px;
    }

    .video-item .vi-actions {
        margin-left: auto;
    }

    .video-item.active .vi-actions {
        margin-left: auto;
    }



    .video-item .vi-title .vi-title-name {
        max-width: 100px;
    }
}

@media (min-width: 1200px) {

    .btn.btn-darkdefault.action-btn i {
        left: 20px;
    }

    .r-panel-items span {
        font-size: 20px;
    }

    .play-btn {
        margin-right: 10px;
        font-size: 35px;
        height: 30px;
        width: 30px;
    }

    .md-lyft-select.for-12 {
        background-size: 3%;
        background-position-x: 97%;
        background-position-y: 12px;
    }

    .video-item .vi-title .vi-title-name {
        max-width: 150px;
    }
}


/* MD RC MEDIA QUERY CSS */
@media only screen and (max-width: 767px) and (min-width: 576px) {
    .md .container {
        max-width: 680px;
        width: 90%;
    }

    .md .tooltip-content {
        font-size: .8rem;
    }
    .md .main-div > .row {
        flex-flow: column;
        position: relative;
    }
    .md .main-div .m-panel {
        align-self: flex-start;
        flex: 0 0 65%;
        max-width: 65%;
        order: 3;
        position: absolute;
        right: 0;
        top: 0;
    }
    .md .main-div .l-panel {
        flex: 0 0 35%;
        max-width: 35%;
        order: 1;
    }
    .md .main-div .r-panel {
        flex: 0 0 35%;
        max-width: 35%;
        order: 2
    }
    .md .tooltip-panel.tooltip-panel2 .tooltiptext {
        left: 105%;
    }
    .md .tooltip-panel.tooltip-panel3 .tooltiptext {
        top: 60%;
        left: 105%;
    }
    .md .tooltip-panel2 .tooltiptext::after,
    .md .tooltip-panel3 .tooltiptext::after {
        left: -20px;
        border-color: transparent #2d2e32 transparent transparent;
    }
    .md .btn.btn-darkdefault.action-btn i {
        top: 50%;
        position: absolute;
        transform: translateY(-50%);
        line-height: 1;
    }
    .md .btn.btn-darkdefault.action-btn span {
        display: block;
        font-size: .75rem;
        left: 0;
        width: 100%;
        padding-left: 30px;
    }
    .md .btn.btn-darkdefault.action-btn {
        position: relative;
    }
}

@media only screen and (max-width: 575px) {
    .md .tooltip-panel.shown .tooltiptext {
        left: 50%;
        transform: translateX(-50%)
    }
    .md .tooltip-panel.tooltip-panel1 .tooltiptext {
        top: 23%;
    }
    .md .tooltip-panel.tooltip-panel3 .tooltiptext {
        top: 59%;
    }
    .md .tooltip-panel.tooltip-panel2 .tooltiptext {
        top: 16%;
    }
    .md .tooltip-panel1 .tooltiptext::after,
    .md .tooltip-panel2 .tooltiptext::after,
    .md .tooltip-panel3 .tooltiptext::after {
        border-color: transparent transparent #2d2e32 transparent;
        top: -10px;
        left: 50%;
        transform: translateX(-50%)
    }
}
/* END MD RC MEDIA QUERY CSS */