html,
 body {
     scroll-behavior: smooth !important;
 }

 #fullPageDiv:fullscreen {
     width: 100vw;
     height: 100vh;
 }

 .nav-link {

     font-size: 1rem !important;
 }

 #searchText {
     width: 4.3rem;

 }

 .iconInside {
     padding-left: 28px;
     background: url("https://projektika.net/template/default/img/LUPA3.png") no-repeat left;
     background-size: 20px;
     background-position: 5px;
 }


 #video_Area {
     float: left;
     padding: 10px;
     border: 1px solid #cccccc;
     background-color: #eeeeee;
     position: relative;
 }

 #video {
     width: 100%;
     position: relative;
     height: auto;
     max-height: 750px;
     /*display: block;*/
 }

 kbd {
     background-color: #171717;
     color: #cccccc;
 }

 #vttArea {
     overflow: hidden;
 }

 .tabLink {
     font-size: 0.7rem;
 }


 button {
     margin-right: 5px;
 }

 #list div {
     margin: 5px;
 }

 #list span {
     font-size: small;
 }

 input[type="file"] {
     display: none;
 }

 input[type="file"].visible {
     display: block;
 }

 .custom-file-upload {
     display: inline-block;
 }

 .fakeimg {
     height: 200px;
     background: #aaa;
 }

 /* progresbar */
 .hidden {
     display: none;
 }

 .ukryty {
     visibility: hidden;
 }

 .note {
     width: 500px;
     margin: 50px auto;
     font-size: 1.1em;
     color: #333;
     text-align: justify;
 }

 #drop-area {
     border: 1px dashed #ccc;
     border-radius: 10px;
 }

 #drop-area.highlight {
     border-color: rgb(243, 125, 78);
     border: 2px dotted;
     background-color: #676740;
 }

 .my-form {
     margin-bottom: 10px;
 }

 #fileElem {
     display: none;
 }

 .text-uwaga {
     color: rgb(255, 105, 232);
 }

 .text-blad {
     color: rgb(251, 110, 110);
 }

 .pointer {
     cursor: pointer;
 }

 .bg-tabError {
     background-color: #74992e;
 }

 .hideElems {
     display: none;
 }

 video::cue {
     background-color: rgba(0, 0, 0, 0);
     color: #fff;
     /*font-size: 20px;*/
     text-shadow:
         -2px -2px 0 #000,
         0 -2px 0 #000,
         2px -2px 0 #000,
         2px 0 0 #000,
         2px 2px 0 #000,
         0 2px 0 #000,
         -2px 2px 0 #000,
         -2px 0 0 #000;
 }


 #canvas-element {
     display: none;
 }

 .imgThumb {
     padding: 2px;
     width: 10%;
     /*height: 10%;*/
 }

 .pasekProgres {
     position: absolute;
     bottom: 0%;
     left: 0%;
     z-index: 20;
     width: 100%;
 }

 .over {
     position: absolute;
     top: 2%;
     left: 2%;
     transform: translate(-2%, -2%);
     z-index: 20;
 }

 .overMeter {
     position: absolute;
     top: -2px;
     left: 0%;
     transform: translate(-0%, -0%);
     z-index: 20;
 }

 .videocontainer {
     position: relative;
     text-align: center;
     z-index: 10;
 }

 .infocuerelative {
     position: relative;
 }

 .infoCue {
     position: absolute;
     top: 2%;
     right: 0%;
     transform: translate(-1%, 0%);
 }

 #zoomRadio {
     bottom: 0px;
 }

 #waveform {
     height: 100px;
     background-color: #232529;

     /* #212529
     background-image: url('//projektika.net/template/default/img/waveform.jpg');
     background-position: 55% 35%; 
     background-size:auto;
    */
 }


 #progress-bar {
     position: absolute;
     z-index: 11;
     top: 50%;
     margin-top: -10px;
     left: 5%;
     width: 90%;
     font-size: 8px !important;
 }

 #slider {
     width: 100%;
 }

 .wavesurfer-region.wavesurfer-region:before {
     content: attr(data-region-label);
     position: absolute;
     top: 10px;
     left: 6px;
     font-size: 11px !important;
     color: whitesmoke;
     z-Index: 10;
     /*overflow: hidden;
    max-width: 15ch;
    white-space: nowrap;
    text-overflow: ellipsis;*/
 }

 .start {
     font-size: 0.65rem !important;
 }

 .end {
     font-size: 0.75rem !important;
 }

 /*
.wavesurfer-handle-end {
    right: 0px;
    cursor: e-resize;
    position: absolute;
    top: 0px;
    width: 13px !important;
    height: 100% !important;
    background-color: rgb(137, 155, 18) !important;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

.wavesurfer-handle-start {
    left: 0px;
    cursor: w-resize;
    position: absolute;
    top: 0px;
    width: 13px !important;
    height: 100% !important;
    background-color: rgb(186, 195, 18) !important;
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

#wave-timeline {
    background-color: #333;
}
*/

 #waveformBottom ::part(region-content) {
     padding-left: 0.5rem;

 }

 #waveform ::part(region) {
     /* background: rgba(121, 121, 121, 0.268) !important;*/
     background: rgba(255, 255, 255, 0.107) !important;
     /*background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.01) 100%) !important;*/
     font-size: 10px;
     color: white;
 }

 #waveform ::part(region-handle-right) {
     right: 0px;
     cursor: e-resize;
     position: absolute;
     top: 0px;
     width: 5px !important;
     height: 100% !important;
     /*background-color: rgba(255, 255, 255, 0.344) !important;*/
     background-color: rgba(255, 255, 255, 0.4) !important;
     border-top-right-radius: 4px !important;
     border-bottom-right-radius: 4px !important;
     color: #395331;
 }

 #waveform ::part(region-handle-left) {
     left: 0px;
     cursor: w-resize;
     position: absolute;
     top: 0px;
     width: 5px !important;
     height: 1000% !important;
     background-color: rgba(255, 255, 255, 0.4) !important;
     border-top-left-radius: 4px !important;
     border-bottom-left-radius: 4px !important;
     border-left: 0px !important;
     color: #d4ff00
 }





 #wave-timeline {
     background-color: #333;
 }

 #waveform cursor {
     height: 100px;
     top: 28px;
     border-radius: 4px;
     border: 1px solid #fff;
 }


 #waveformBottom ::part(marker):after {
     content: '▼';
     font-size: 1.5em;
     position: absolute;
     left: 0;
     top: -10px;
     border: 1px;
     transform: translateX(-70%);
     z-index: 11;
     color: yellow;
 }

 #waveformBottom ::part(cursor):after {
     content: '▼';
     font-size: 1.3em;
     position: absolute;
     left: 0;
     top: -10px;
     border: 1px;
     transform: translateX(-40%);
     z-index: 11;
     color: red;
 }


 #waveformBottom ::part(marker) {
     text-indent: 5px;
     text-decoration: underline;
     padding: 1px;
 }

 #waveformBottom ::part(wrapper) {
     --box-size: 30px;
     background-image:
         linear-gradient(transparent calc(var(--box-size) - 1px), rgb(47, 101, 45) var(--box-size), transparent var(--box-size)),
         linear-gradient(90deg, transparent calc(var(--box-size) - 1px), rgb(47, 101, 45) var(--box-size), transparent var(--box-size));
     background-size: 100% var(--box-size), var(--box-size) 100%;
 }

 .ellipsis {
     display: block;
     text-overflow: ellipsis;

     /* Required for text-overflow to do anything */
     white-space: nowrap;
     overflow: hidden;
 }

 .stop-scrolling {
     height: 100%;
     overflow: hidden;
 }

 .first-letter::first-letter {
     text-decoration: underline;
     /* color: #1af030bb;
    font-weight: bold; */
 }

 .dropdown-menu-projektika {
     max-height: 360px;
     overflow: scroll;
 }

 /* indicator draw wave */

 .loading:after {
     content: ' ..';
     animation: dots 1s steps(10, end) infinite;
 }

 @keyframes dots {

     0%,
     20% {
         color: rgba(0, 0, 0, 0);
         text-shadow:
             .25em 0 0 rgba(0, 0, 0, 0),
             .5em 0 0 rgba(0, 0, 0, 0);
     }

     40% {
         color: white;
         text-shadow:
             .25em 0 0 rgba(0, 0, 0, 0),
             .5em 0 0 rgba(0, 0, 0, 0);
     }

     60% {
         text-shadow:
             .25em 0 0 white,
             .5em 0 0 rgba(0, 0, 0, 0);
     }

     80%,
     100% {
         text-shadow:
             .25em 0 0 white,
             .5em 0 0 white;
     }
 }

 .preformated {
     font-family: monospace;
     white-space: pre;
 }

 @media (max-width: 1290px) {
     .d-xs_none {
         display: none;
     }
 }

 .range-cust::-webkit-slider-thumb {
     background: rgb(100, 100, 100);
 }

 .range-cust::-moz-range-thumb {
     background: rgb(100, 100, 100);
 }

 .range-cust::-ms-thumb {
     background: rgb(100, 100, 100);
 }

 #fullPageDiv.fullscreen {
     z-index: 9999;
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     background-color: #212529;
     padding: 1ch;
     margin-top: 1.5ch;
 }

 .ww {
     z-index: 20;
 }


 #showResultTable {
     padding: 0.3rem;
     position: relative;
 }

 #showResultTable a {
     cursor: pointer;
 }

 .absolut {
     position: absolute;
     left: 0rem;
     top: 0rem;

 }

 .modal-backdrop {
     display: none;
     opacity: 0 !important;
     z-index: -100000000;
 }

 .searchResult {
     display: none;
     width: auto;
     max-width: 500px;
     min-width: 200px;
     position: absolute;
     z-index: 20;
     overflow-y: scroll;
 }

 /*
 .modal-dialog {
    transform: translate(-20%, -20%)!important;
  }
*/

 .modalSearch {
     max-height: 500px;
     transform: translate(2%, 15%) !important;
     z-index: 20;
 }

 .resultCloseButton {
     cursor: pointer;
 }

 .bg-darker {
     background-color: #192226;
     /*#212529*/
 }

 .btn-edit-dark {
     background-color: #1a1c20;
 }

.btn-edit-green {
    background-color: #134e21 !important;
}

.btn-edit-green:hover {
    background-color: #1b712f !important;
}

 /* HTML: <div class="loader"></div> */
 .dotLoader {
     width: 50px;
     aspect-ratio: 1;
     --g: conic-gradient(from -90deg at 10px 10px, #fff 90deg, #0000 0);
     background: var(--g), var(--g), var(--g);
     background-size: 50% 50%;
     animation: l19 1s infinite;
 }

 @keyframes l19 {
     0% {
         background-position: 0 0, 10px 10px, 20px 20px
     }

     33% {
         background-position: 10px 10px
     }

     66% {
         background-position: 0 20px, 10px 10px, 20px 0
     }

     100% {
         background-position: 0 0, 10px 10px, 20px 20px
     }
 }

 .textareaFoc {
     width: 100%;
 }

 /* tabs */
 #exTab1 .nav-pills>li>a {
     border-radius: 0;
 }

 #exTab1 .tab-content {
     color: white;
     background-color: #428bca;
     padding: 5px 15px;
 }


 /* HTML: <div class="loader"></div> */
 .dotLoader {
     width: 12px;
     aspect-ratio: 1;
     border-radius: 50%;
     background: #000000;
     clip-path: inset(-220%);
     animation: l28 2s infinite linear;
 }


 @keyframes l28 {
     0% {
         box-shadow: 0 0 0 0, 40px 0, -40px 0, 0 40px, 0 -40px
     }

     10% {
         box-shadow: 0 0 0 0, 12px 0, -40px 0, 0 40px, 0 -40px
     }

     20% {
         box-shadow: 0 0 0 4px, 0px 0, -40px 0, 0 40px, 0 -40px
     }

     30% {
         box-shadow: 0 0 0 4px, 0px 0, -12px 0, 0 40px, 0 -40px
     }

     40% {
         box-shadow: 0 0 0 8px, 0px 0, 0px 0, 0 40px, 0 -40px
     }

     50% {
         box-shadow: 0 0 0 8px, 0px 0, 0px 0, 0 12px, 0 -40px
     }

     60% {
         box-shadow: 0 0 0 12px, 0px 0, 0px 0, 0 0px, 0 -40px
     }

     70% {
         box-shadow: 0 0 0 12px, 0px 0, 0px 0, 0 0px, 0 -12px
     }

     80% {
         box-shadow: 0 0 0 16px, 0px 0, 0px 0, 0 0px, 0 0px
     }

     90%,
     100% {
         box-shadow: 0 0 0 0, 40px 0, -40px 0, 0 40px, 0 -40px
     }
 }



 .blinktext {
     -webkit-animation: blink-text 900ms linear infinite;
     -moz-animation: blink-text 900ms linear infinite;
     -ms-animation: blink-text 900ms linear infinite;
     -o-animation: blink-text 900ms linear infinite;
     animation: blink-text 900ms linear infinite;
 }

 @-webkit-keyframes blink-text {
     0% {
         opacity: 1;
     }

     50% {
         opacity: 1;
     }

     50.01% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     }
 }

 @-moz-keyframes blink-text {
     0% {
         opacity: 1;
     }

     50% {
         opacity: 1;
     }

     50.01% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     }
 }

 @-ms-keyframes blink-text {
     0% {
         opacity: 1;
     }

     50% {
         opacity: 1;
     }

     50.01% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     }
 }

 @-o-keyframes blink-text {
     0% {
         opacity: 1;
     }

     50% {
         opacity: 1;
     }

     50.01% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     }
 }

 @keyframes blink-text {
     0% {
         opacity: 1;
     }

     50% {
         opacity: 1;
     }

     50.01% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     }
 }