.clips_color_text {
  
  border: 1px #B0BEC5 solid;
  border-radius: 100%;
  display: inline-block;
  width: 28px;
  height: 28px;
  margin: 2px;
  
}

.clips_form_button_text {
  
  height: 30px;
  min-width: 150px;
  background-color: #38CD8E;
  border: none;
  outline: none;
  border-radius: 5px;
  position: absolute;
  top: 230px;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  z-index: 11;
  
}
                                 
.clips_form_button_text-o {
  
  padding: 8px 1em;
  background-color: #71A9C3;
  border: none;
  outline: none;
  border-radius: 5px;
  display: inline-block;
  position: absolute;
  top: 270px;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  z-index: 11;
  
}

.clips_form_textarea {

  width: 95%;
  box-sizing: border-box;
  position: absolute;
  left: 10px;
  right: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  background: none;
  border: none;
  outline: none;
  padding: 10px;
  top: 10px;
  resize: none;
  z-index: 10;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
  
}

.clips_form_textarea::-webkit-scrollbar { height: 0px; width: 0px; }
.clips_form_textarea::-webkit-scrollbar-button {  display: none; }
.clips_form_textarea::-webkit-scrollbar-track {  background-color: #909DA7; }
.clips_form_textarea::-webkit-scrollbar-track-piece { background-color: #ffffff; }
.clips_form_textarea::-webkit-scrollbar-thumb { height: 0px; background-color: #909DA7; border-radius: 4px; }
.clips_form_textarea::-webkit-scrollbar-corner { background-color: #909DA7; }
.clips_form_textarea::-webkit-resizer { background-color: #909DA7; }
.clips_form_textarea::scrollbar { height: 0px; width: 0px; }
.clips_form_textarea::scrollbar-button {  display: none; }
.clips_form_textarea::scrollbar-track {  background-color: #909DA7; }
.clips_form_textarea::scrollbar-track-piece { background-color: #ffffff; }
.clips_form_textarea::scrollbar-thumb { height: 0px; background-color: #909DA7; border-radius: 4px; }
.clips_form_textarea::scrollbar-corner { background-color: #909DA7; }
.clips_form_textarea::resizer { background-color: #909DA7; }

.clips_form_textarea::placeholder {

  color: #E7EAF0;
  
}

.cl_mini {
  
  height: 122px;
  margin: 2px;
  position: relative;
  top: 4px;
  overflow: hidden;
  width: 80px;
  background-color: #323742;
  display: inline-block;
  border-radius: 8px;
  
}

.cl_mini video{
  
  max-width: 215px;
  background: none;
  border: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  
}

.cl_mini_menu {

  position: absolute;
  top: 3px;
  right: -8px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  display: inline-block;
  color: white;
  z-index: 2;
  cursor: pointer;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
  
}

.cl_mini_name {

  position: absolute;
  bottom: 3px;
  padding: 3px;
  box-sizing: border-box;
  left: 0;
  width: 80px;
  height: 17px;
  display: inline-block;
  color: white;
  z-index: 2;
  overflow: hidden;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
  font-size: 10px;
  text-overflow: ellipsis;
  
}

.cl_progress {
  
  display: inline-block; 
  z-index: 10000000000000000000000000; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  background: linear-gradient(to top left, #6E8FF6, #9F41D4); 
  height: 5px;
  
}

.cl_info_t {
  
  width: 32%;
  vertical-align: top;
  height: 70px;
  display: inline-block;
  position: relative;
  color: #3A474C;

}

.cl_info_t span{
  
  font-size: 10px;
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-50%, -75%);

}

.cl_info_t b{
  
  font-size: 18px;
  position: absolute;
  left: 50%;
  top: 33%;
  transform: translate(-50%, -33%);

}

.clv-click {
  
  cursor: pointer;
  
}

.clv-proccess {
  
  color: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  transform: translate(-50%, -50%);
  
}

.cl-button-add {
  
  cursor: pointer;
  display: inline-block;
  background: linear-gradient(to top left, #6E8FF6, #9F41D4);
  width: 48%;
  margin: 2px;
  box-sizing: border-box;
  padding: 9px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 13px;
  color: white;
  
}

.cl-video {

  box-sizing: border-box;
  background-color: #E2E9FF;
  text-align: center;
  margin-top: 10px;
  position: relative;
  
}
                              
.cl-video video{
  
  width: 300px; 
  max-height: 400px; 
  margin-bottom: -4px;
  
}
                              
.cl-video-duration {

  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 13px;
  border-radius: 10px;
  padding: 4px 1.3em;
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  min-width: 170px;
  z-index: 1;
  
}
                              
.cl-video-name {

  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 6px;
  padding: 5px 1em;
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  min-width: 200px;
  z-index: 1;
  
} 
                              
.cl-video-dur-set {
  
  display: inline-block; 
  width: 40%; 
  vertical-align: top;
  margin-left: 3px;
  margin-right: 3px;
  
}
                              
.cl-video-sec {
                              
  font-size: 28px;                        
                              
}
                              
.cl-video-sec i{
                              
  position: relative;
  top: -2px;                            
                              
} 
                              
.cl-save-o {
  
  background-color: #E5DAFF;
  color: #3B4150;
  margin-left: 2px;
  margin-right: 2px;
  padding: 0px 1.2em;
  height: 35px;
  line-height: 35px;
  font-size: 13px;
  
}
                              
.cl-save {                              
  
  background: linear-gradient(to top left, #6E8FF6, #9F41D4);
  margin-left: 2px;
  margin-right: 2px; 
  height: 35px;
  padding: 0px 1.2em;                            
  line-height: 35px; 
  font-size: 13px;                            
                              
}
                              
.cl-video-effects {
  
  border: 2px #75FF7B dashed;
  height: 310px;
  width: 95%;
  position: absolute;
  z-index: 10000000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
}
                              
.cl-video-visual {

  overflow: hidden;
  background-color: #0D0E0F;
  position: fixed;
  z-index: 1000000;
  text-align: center;
  border: none;

}
                              
.cl-video-visual-show {
  
  max-width: 400px;
  max-height: 620px;    
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  z-index: 1000000;

}
    
.cl-video-visual-show video {
  
  max-width: 420px;
  border: none;
  background: none;

}
                              
.cl-video-visual-phone {
  
  background: rgba(0,0,0,0.8);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;

}
    
.cl-video-visual-info {
  
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 7px;
  box-sizing: border-box;
  font-size: 13px;
  z-index: 10000000;
  position: relative;
      
}
    
.cl-video-visual-button {
  
  background: linear-gradient(to top left, #6E8FF6, #9F41D4);
  z-index: 10000000;
  position: absolute;
  border-radius: 100%;
  display: inline-block;
  text-align: center;
  width: 38px;
  height: 38px;
  line-height: 38px;
  cursor: pointer;
  bottom: 10px;
  color: white;                            
      
}
                              
.cl-video-visual-button {
  
  background: linear-gradient(to top left, #6E8FF6, #9F41D4);
  z-index: 10000000;
  position: absolute;
  border-radius: 100%;
  display: inline-block;
  text-align: center;
  width: 38px;
  height: 38px;
  line-height: 38px;
  cursor: pointer;
  bottom: 10px;
  color: white;                            
      
} 
                              
.cl-video-visual-button-check {
  
  position: absolute; 
  color: #53FFB9; 
  bottom: 35px; 
  z-index: 10000001;
  
}

.video_play_button {
      
  cursor: pointer;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  color: white;
  border-radius: 100%;
  display: inline-block;
  background: linear-gradient(to top left, #6E8FF6, #9F41D4);
  z-index: 10000000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);                          

}
                                  
.video_play_button i{
  
  position: relative;
  left: 2px;

}                              

.video_pause_button {
  
  cursor: pointer;
  text-align: center;
  color: white;
  display: inline-block;
  z-index: 10000000;
  position: absolute;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

}

.cl_web_back {
  
  width: 35px;
  height: 35px;
  line-height: 35px;
  display: inline-block;
  border-radius: 100%;
  text-align: center;
  background-color: black;
  color: white;
  position: fixed;
  left: 50px;
  top: 35px;
  cursor: pointer;
  z-index: 9999999999999999999999999999999999999;
      
}

.cl_web_for {
      
  text-align: center;
  width: 35px;
  height: 35px;
  line-height: 35px;
  display: inline-block;
  border-radius: 100%;
  background-color: black;
  color: white;
  position: fixed;
  left: 50px;
  top: 75px;
  cursor: pointer;
  z-index: 999999999999999999999999999999999999;
      
}

.cl_close {
  
  position: absolute;
  left: 8px;
  top: 8px;
  color: white;
  display: inline-block;
  cursor: pointer;
  z-index: 99999999999999999999999999999999999999;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
  
}

.cl_menu {
  
  position: absolute;
  right: 8px;
  top: 10px;
  color: white;
  display: inline-block;
  cursor: pointer;
  z-index: 99999999999999999999999999999999999999;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
  
}

.cl_vss_cont {
  
  display: inline-block;
  position: absolute;
  z-index: 10000000000000000000000;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  text-align: left;

}

.cl_vss_cont_info {
      
  margin: 10px;
  font-size: 13px;
  color: white;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
      
}
    
.cl_vss_cont_info_login {
      
  position: relative;
  top: -12px;
  left: 6px;
  color: white;
      
}
    
.cl_vss_cont_info_button {
      
  position: relative;
  top: -12px;
  left: 15px;
  font-size: 12px;
  color: white;
  padding: 5px 1em;
  background: linear-gradient(to top left, #6E8FF6, #9F41D4);
  cursor: pointer; 
  display: inline-block;
  border-radius: 7px;                            
      
}
                                  
.cl_vss_cont_info_music {
      
  position: relative;
  top: -18px;
  right: 2px;
  cursor: pointer; 
  display: inline-block;
  border-radius: 7px;
  float: right;
  width: 39px;
  height: 39px;
  overflow: hidden;
      
}

.cl_vss_right { 
  
  display: inline-block;
  width: 60px;
  height: 50px;
  position: absolute;
  z-index: 10000000;
  text-align: center;
  color: white;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
  right: 4px;
  bottom: 90px;
  cursor: pointer;

}

.cl_vss_right_active { 
  
  color: #D57EFF;

}

.cl_vss_right b{ 
  
  font-size: 8px;

}

.cl_prez_video {
  
  background-color: #1C1F22;
  text-align: center;
  overflow: hidden;
  position: relative;
  
}

.cl_prez_video_duration {
  
  background: rgba(0,0,0,0.8);
  text-align: center;
  position: absolute;
  color: white;
  font-size: 11px;
  padding: 2px 1em;
  bottom: 10px;
  right: 10px;
  border-radius: 7px;
  z-index: 1;
  display: inline-block;
  
}

.cl_prez_video video{
  
  max-width: 250px;
  margin-bottom: -5px;
  background-color: gray;
  border: none;
  
}

.cl_prez_video_avatar {
  
  position: relative;
  top: 8px;
  display: inline-block;
  width: 50px;
  vertical-align: top;
  
}

.cl_prez_video_name {
  
  position: relative;
  top: 12px;
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  width: 65%;
  vertical-align: top;
  
}

.cl_prez_video_info {
  
  position: relative;
  font-size: 10px;
  color: #697781;
  font-weight: normal;
  margin-top: 10px;
  margin-bottom: 10px;
  
}

.cl_prez_video_menu {
  
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  
}

.cl_prez_video_rating {
  
  background: rgba(0,0,0,0.8);
  text-align: center;
  position: absolute;
  color: white;
  font-size: 13px;
  padding: 2px 1em;
  top: 20px;
  left: 20px;
  border-radius: 7px;
  z-index: 1;
  display: inline-block;
  
}

.shl2 {
    
  display: block;
  padding: 9px;
  margin: 4px;
  background-color: #DAEFFF;
  color: #688093;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
    
}