html, body {
            margin: 0;
            width: 100%;
            height: 100%;
            font-family: 'Montserrat',sans-serif;
          }
          body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #dadada;
            touch-action: pan-x pan-y;
          }
          
           @media (max-width:950px) {
            body {justify-content: initial;}
            }
          
          /*video, */
          #output-video, .hide {display:none;}
          #output-video.show, .show {display:block;width:100%;background-color: #ccc;}
          #runtrim, #uploadlink, #cleaning button, #trim {background: #9c27b0; border: 1px solid #d3ded0;padding: 5px 10px;  border-radius: 10px;color: #fff;cursor:pointer;}
          .block {margin:20px 0;padding: 10px; background: #f4f4f4;border-radius: 10px;    display: flex;   justify-content: space-between;align-items:center;} 
          #input-video {width:100%;background:#000;}
          #trim {margin-top:30px; padding: 10px 19px;text-transform: uppercase;}
       
        .custom-video-area {
          position: relative;
          /*overflow: hidden;*/
          width: 100%;
          max-width: 72em;
          height: 0;
          margin: auto;
          padding-bottom: 56.25%;
          /*padding-bottom: 65%;*/
          text-align: left;
        }
          
        .custom-video-area .video {
            position: absolute;
            top: 0;
            right: -50%;
            bottom: 0;
            left: -50%;
            min-width: 100%;
            width: 100%;
            min-height: 100%;
            margin: auto;
        }
        .video-controls {
          position: absolute;
          z-index: 10;
          right: 0;
          bottom: 0 !important;
          left: 0;
          width: 100%;
          margin: auto;
          padding: 0 0 15px 0;
          transition: all 0.4s ease-in-out;
          background: #673ab7;
        }
         .video-controls.playing .play-button:before {
            background:url('/pause.svg') no-repeat center;
          }
          .top-wrapper {
            display: block;
          }
          .bottom-wrapper {
            padding: 0 20px 0 20px;
            /*display: block;*/
            display: flex;
            align-items: center;
            justify-content: center;
          }
        .progress-bar {
            position: relative;
            /*overflow: hidden;*/
            width: 100%;
            height: 10px;
            margin-bottom: 9px;
            cursor: pointer;
            background: blue;}
            
        .progress-bar span {
              position: absolute;
              top: 0;
              left: 0;
              display: block;
              width: 0;
              height: 100%;
              width: 64.6451%;
              /*border-right: 5px solid #fff;*/
        }
        .progress-bar span.time-bar:after {
            content:'';
            width: 24px;
            height: 50px;
            background: url('/three-dots.svg') no-repeat center #fff;
            background-size:20px;
            position: absolute;
            right: -12px;
            top: 0;
            border-top-left-radius: 0;
            border-top-right-radius: 60%;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            box-shadow: 0 2px 5px #333;
        }
        .time-bar {
              z-index: 10;
              background: green;
        }
        /* test */
        
        .progress-bar-left {
            position: absolute;
            top:0;
            width: 100%;
            height: 10px;
            margin-bottom: 9px;
            cursor: pointer;
            background: blue;}
            
        .progress-bar-left span {
              position: absolute;
              top: 0;
              left: 0;
              display: block;
              width: 0;
              height: 100%;
              width: 64.6451%;
              /*border-right: 5px solid #fff;*/
        }
        .progress-bar-left span.time-bar-left:after {
            content:'';
            width: 24px;
            height: 50px;
            background: url('/three-dots.svg') no-repeat center #fff;
            background-size:20px;
            position: absolute;
            right: -12px;
            top: 0;
            border-top-left-radius: 60%;
            border-top-right-radius: 0;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            box-shadow: 0 2px 5px #333;
        }
        .time-bar-left {
              z-index: 10;
              background: #274f11;
        }
        
        /* test */
        
        .buffer-bar {
              z-index: 5;
              background: #274f11;
            
          }
          .play-button {
            display: inline-block;
            width: 24px;
            cursor: pointer;
            vertical-align: middle;
          }
          .play-button:before {
              display: block;
              content: '';
              width:20px;
              height:20px;
              background:url('/play.svg') no-repeat center;
            
          }
          .time {
            font-size: 16px;
            font-weight: 600;
            line-height: 12px;
            display: flex;
            /*width: 80px;*/
            vertical-align: middle;
            color: #fff;
            align-items: center;
          }
          
          .custom_time {display: inline-block;width: 20px;height: 20px;margin-left: 20px; border: 2px solid;  text-align: center;    border-radius: 50%; cursor:pointer; background-color:#fff;color:#274f11;}
          .custom_time.opened {background-color:#274f11;color:#fff;}
          
          .btnFS {
            position: relative;
            top: 3px;
            display: inline-block;
            float: right;
            cursor: pointer;
            vertical-align: middle;
            }
        .btnFS:before {
              font-size: 14px;
              content: '+';
              color: black
        }
        
        /* spinner */
        
        .sk-chase {
          width: 40px;
          height: 40px;
          position: relative;
          animation: sk-chase 2.5s infinite linear both;
          margin: 39px auto 0px auto;
        }
        
        .sk-chase-dot {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0; 
          animation: sk-chase-dot 2.0s infinite ease-in-out both; 
        }
        
        .sk-chase-dot:before {
          content: '';
          display: block;
          width: 25%;
          height: 25%;
          background-color: #9c27b0;
          border-radius: 100%;
          animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
        }
        
        .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
        .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
        .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
        .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
        .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
        .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
        .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
        .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
        .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
        .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
        .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
        .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
        
        @keyframes sk-chase {
          100% { transform: rotate(360deg); } 
        }
        
        @keyframes sk-chase-dot {
          80%, 100% { transform: rotate(360deg); } 
        }
        
        @keyframes sk-chase-dot-before {
          50% {
            transform: scale(0.4); 
          } 100%, 0% {
            transform: scale(1.0); 
          } 
        }
        
        /* test */
        .all { max-width: 950px;margin:0 auto;}
        .start {
            display: grid;
            grid-template-columns: 1fr 1fr;
            /*align-items: center;*/
            justify-content: center;
            background: #dadada;
            gap: 30px;
            justify-items: center;
            
        }
       
        .sidebar {display:none;}
        .start .sidebar {
            display: flex;
            flex-direction: column;
            /*height: 100%;*/
            justify-content: space-around;
            color:#fff;
            
        }
        .start .sidebar > div {
            background: #9e9e9e;
            border-radius: 20px;
            padding: 15px 24px;
        }
        
        /* ножницы фон */
        .background {
            background:  #fff;
            border: 1px solid #ccc;
            border-radius: 20px;
            padding: 30px;
            text-align: center;
        }
        .start .background {background: url(/fon.jpg) no-repeat top center #fff;background-size: contain;padding-top: 65px;height:fit-content;}
        .notice {
            text-align: center;
            background-color: #000;
            font-size: 12px;
            padding: 10px 30px;
            width: 100%;
            box-sizing:border-box;
            /* position: absolute; */
            top: 0;
            /* display: none; */
            color: #ccc;
            margin-top:20px;
        }
        .boxlabel {
            color:#999;
        }
        
        @media (max-width:950px) {
            /*body {justify-content: flex-start;}*/
            .start {grid-template-columns: 1fr;
                width: 100%;
                max-width: 100%;
            }
            .start .sidebar {order:2;color: #6f6e6e;}
            .start .sidebar > div {
                background: inherit;
                padding: 0px 24px;
            }
            .start .background { 
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                width: 100%;
                box-sizing: border-box;
                padding:30px;
            }
            .background {
                padding: 50px 15px 30px 15px;
                
            }
            #weblink {
                padding: 10px;
                font-size: 15px;
                border: 1px solid #9c27b0;
                border-radius: 5px;
                width: 100%;
                box-sizing: border-box;
            }
            .block {
                flex-direction: column;
                margin-top:5px;
            }
            #uploadlink {
                font-size: 18px;
                padding: 15px 25px;
                margin-top: 20px;
            }
            h3.title {
                font-size: 25px;
            }
            .notice {}
            .link-title-box {
                background: #f5f5f5;
                border-radius: 10px;
            }
            .link-title-box .boxlabel {
                padding-top:10px;
                color:#000;
            }
            #trim {font-size:18px;}
            .custom-video-area {padding-bottom: 73.25%;}
            .time_choose.modal {z-index:999;}
            .setTime {
                text-align: center;
                display: flex;
                flex-direction: column;
                gap: 10px;
               
            }
            .setTime input {
                font-size: 20px;
            }
            .setTime button {
                font-size: 20px;
                margin-top:10px;
            }
            .loading {
                background:transparent !important;
            }
            .loading .background {
                height: 100vh;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                background:transparent !important;
                border:none;
            }
        }
        
        .modal.hide {display:none;}
        .modal {position:absolute;left:0;top:0;width:100%;height:100%;background:#ccc;display: flex; align-items: center; justify-content: center;opacity: 0.95;}
        
        .selectQuality {width:250px;height:220px;display:grid;gap:15px;background:#fff;padding:30px;border-radius:20px;text-align: center;}
        .selectQuality span {padding:10px 15px;font-size:18px;color:#fff;background:#b741d6;border-radius:5px;display: flex; justify-content: center;align-items: center;}
        .selectQuality span:hover {background:#9334a4;cursor:pointer;}
        .selectQuality span:before {display:block;content:"";width:25px;height:25px;background:url(/film.svg) no-repeat center;background-size:contain;margin-right: 20px;}