* { box-sizing:border-box; -webkit-box-sizing:border-box;}

@font-face {
  font-family: 'quicksand-regular';
  src: url('https://envoi-common-resources.imgix.net/screening/fonts/Quicksand-reg/QuicksandRegular.eot');
  src: url('https://envoi-common-resources.imgix.net/screening/fonts/Quicksand-reg/QuicksandRegular.eot?#iefix') format('embedded-opentype'),
      url('https://envoi-common-resources.imgix.net/screening/fonts/Quicksand-reg/QuicksandRegular.woff2') format('woff2'),
      url('https://envoi-common-resources.imgix.net/screening/fonts/Quicksand-reg/QuicksandRegular.woff') format('woff'),
      url('https://envoi-common-resources.imgix.net/screening/fonts/Avenir-regular/Avenir-regular.ttf') format('truetype');
}

@font-face {
  font-family: 'quicksand-bold';
  src: url('https://envoi-common-resources.imgix.net/screening/fonts/Quicksand-bold/QuicksandBold.eot');
  src: url('https://envoi-common-resources.imgix.net/screening/fonts/Quicksand-bold/QuicksandBold.eot?#iefix') format('embedded-opentype'),
      url('https://envoi-common-resources.imgix.net/screening/fonts/Quicksand-bold/QuicksandBold.woff2') format('woff2'),
      url('https://envoi-common-resources.imgix.net/screening/fonts/Quicksand-bold/QuicksandBold.woff') format('woff'),
      url('https://envoi-common-resources.imgix.net/screening/fonts/Quicksand-bold/QuicksandBold.ttf') format('truetype');
}

@font-face {
  font-family: 'quicksand-light';
  src: url('https://envoi-common-resources.imgix.net/screening/fonts/Quicksand-light/QuicksandLight.eot');
  src: url('https://envoi-common-resources.imgix.net/screening/fonts/Quicksand-light/QuicksandLight.eot?#iefix') format('embedded-opentype'),
      url('https://envoi-common-resources.imgix.net/screening/fonts/Quicksand-light/QuicksandLight.woff2') format('woff2'),
      url('https://envoi-common-resources.imgix.net/screening/fonts/fonts/Quicksand-light/QuicksandLight.woff') format('woff'),
      url('https://envoi-common-resources.imgix.net/screening/fonts/fonts/Quicksand-light/QuicksandLight.ttf') format('truetype');
}

@font-face {
  font-family: 'raleway';
  src: url('https://envoi-common-resources.imgix.net/screening/fonts/raleway/Raleway.eot');
  src: url('https://envoi-common-resources.imgix.net/screening/fonts/raleway/Raleway.eot?#iefix') format('embedded-opentype'), url('https://envoi-common-resources.imgix.net/screening/fonts/raleway/Raleway.woff') format('woff'), url('https://envoi-common-resources.imgix.net/screening/fonts/raleway/Raleway.ttf') format('truetype'), url('https://envoi-common-resources.imgix.net/screening/fonts/raleway/Raleway.svg#open_sansregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'raleway_med';
  src: url('https://envoi-common-resources.imgix.net/screening/fonts/raleway_medium/Raleway_medium.eot');
  src: url('https://envoi-common-resources.imgix.net/screening/fonts/raleway_medium/Raleway_medium.eot?#iefix') format('embedded-opentype'), url('https://envoi-common-resources.imgix.net/screening/fonts/raleway_medium/Raleway_medium.woff') format('woff'), url('https://envoi-common-resources.imgix.net/screening/fonts/raleway_medium/Raleway_medium.ttf') format('truetype'), url('https://envoi-common-resources.imgix.net/screening/fonts/raleway_medium/Raleway_medium.svg#open_sansregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

:root {
  --bgColor: #15171B;
  --secbgColor:#1E222B;
  --borderColor:#798AAC;
  --highlight:#2AD8FF !important;
  --boldfont:'raleway', sans-serif;
  --bodyfont:'raleway_med', sans-serif;
  --btnbg:#1E222A;
  --sectxtColor:#C9D8F4;
  --quicksandboldfont:'quicksand-bold', sans-serif;
  --quicksandregularfont:'quicksand-regular', sans-serif;
}


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 16
}



body{ margin:0; padding:0; font-family:var(--bodyfont)!important; background-color: var(--bgColor) !important; height: 100%; color:#c9c9c9 !important; }


/*COMMON*/
h1, h2, h3, h4, h5, h6{ font-family:var(--boldfont)!important; font-weight:bold; line-height: 1;}
p{ font-family:var(--bodyfont)!important; font-weight:normal; line-height: 1;}




.signup_btns a, .signup_btns button { font-family:var(--bodyfont)!important; }
.create_section { background-color: #181818; font-family:var(--bodyfont)!important; }
.create_section .bc_header { padding: 15px 0; position: fixed;  z-index: 999999;   top: 0px;  background-color: #000;}
.create_section .header_det {float: left; width: 100%; padding: 15px 0 !important; position: fixed; z-index: 999999; top: 0px; background-color: #000;}
.create_section .wrapper { width: 95%; margin: 0 auto; position: relative; max-width: 1600px;}
.create_section .header_det .logo {float: left; width: auto !important;}
.create_section .header_det .logo img { height: auto !important; max-height: 35px; max-width: 175px;}
.create_section .header_det .cls { width: 26px; height: 26px; background-color: transparent !important; background-image: url(https://envoi-common-resources.imgix.net/screening/images/dark/close_ico.png?auto=compress,enhance,format&w=34) !important;
  background-size: 26px; position: absolute; right: 0px !important; top: 5px !important; background-position: center;
  background-repeat: no-repeat; cursor: pointer;}
.create_section .bc_contant { margin-top: 120px; width: 100%; display: inline-block;}
.create_section h2 { margin-bottom: 30px; font-family: 'Raleway', sans-serif !important; font-weight: bold; font-size: 28px; color: #fff; text-align: center; text-transform: uppercase;}
.create_section .form_box { background-color: #393939; padding: 30px; border: solid 1px #555555; border-radius: 5px; margin-bottom: 25px;}
.create_section h3 { font-size: 22px; margin-bottom: 35px !important; font-weight: 500; font-family: 'Raleway', sans-serif !important; text-align: center; color: #fff;}
.create_section input { width: 100%; background-color: #262626; border: solid 1px #7d7d7d; border-radius: 2px; height: 48px !important; color: #fff;}
.create_section .bc_form_wrp select { width: 100%; height: 48px; background-color: #262626; border: solid 1px #7d7d7d;  -webkit-appearance: inherit !important;
  -moz-appearance: inherit !important;  text-indent:  inherit !important; color: #fff;}
.create_section .btn { display: inline-block; background-color: #febf00 !important; height: 48px !important; border: solid 1px #febf00 !important; width: 40%; color: #000 !important; font-size: 14px; font-weight: bold; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px;}
.create_section .btn:hover {  background-color: #e9af00 !important; }
.create_section .terms {margin: 0px 0 20px 0;font-size: 14px; line-height: 16px; text-align: right;}
.create_section .terms a { color: #febf00; font-size: 13px; font-weight: normal;  font-family:var(--bodyfont)!important;}
.create_section .terms a:hover { color: #febf00;}
.create_section .btn {  font-family:var(--bodyfont)!important;}
.create_section input::-webkit-input-placeholder {   color:#939393; font-weight: 500;  }
.create_section input:-ms-input-placeholder { color: #939393; font-weight: 500;  }
.create_section input::placeholder {    color: #939393; font-weight: 500;  }
.create_section .destination { background-color: #262626; padding: 15px; border: solid 1px #777777; border-radius: 13px; margin-bottom: 6px;}
.create_section .destination_head { width: 100%; display: flex; justify-content: space-between; align-items: center;}
.create_section .icon { display: flex; color: #939393; font-size: 14px; font-weight: 600;}
.create_section .icon .fa { color: #a7a7a7; font-size: 20px; display: block; margin-right: 15px;}
.create_section .radio .switch {position: relative; display: block;width: 45px;height: 20px; margin-bottom: 0px;}
.create_section .radio .switch input { opacity: 0;width: 0; height: 0; }
.create_section .radio .slider { position: absolute;cursor: pointer; top: 0; left: 0;right: 0;bottom: 0; background-color: #393939; -webkit-transition: .4s;
    transition: .4s; }
.create_section .radio .slider:before {position: absolute;  content: ""; height: 20px; width: 20px; left: 0px; bottom: 0px; background-color: white; -webkit-transition: .4s;  transition: .4s; }
.create_section .radio input:checked + .slider {background-color: #febf00;}
.create_section .radio input:focus + .slider { box-shadow: 0 0 1px #febf00; }
.create_section .radio input:checked + .slider:before { -webkit-transform: translateX(26px);  -ms-transform: translateX(26px); transform: translateX(26px); }
.create_section .radio .slider.round { border-radius: 34px;  }
.create_section .radio .slider.round:before {border-radius: 50%; }
.create_section .destination_con { padding: 15px 10px 0 20px;}
.create_section .destination_con .form-control { color: #fff; padding: 5px 10px; height: 38px !important; border-radius: 5px; background-color: #0a0a0a; border: none;}
.destination_block { font-family:var(--bodyfont)!important;}
.align-center { text-align: center;}
.mt-30 { margin-top: 30px;}
.mb-30 { margin-bottom: 30px !important;}
.streaming_block { width: 100%; font-family:var(--bodyfont)!important;}
.streaming_block .streaming_buttons { position: absolute; bottom: 25px; width: 100%; padding: 0 25px; display: flex; justify-content: space-between; align-items: center;}
.streaming_block .streaming_error { position: absolute;top: 10%;}
.streaming_block .live_streaming { position: relative; overflow: hidden;  width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: rgb(27, 27, 27);}
.streaming_block .live_streaming #preview { width: 100%; margin-bottom: 0px; background: rgb(0, 0, 0);}
.streaming_block .streaming_buttons .start_button { margin: 0px 10px; width: 75px; height: 75px; display: flex; justify-content: center; align-items: center; border: solid 4px #fff; padding: 3px; background: none; border-radius: 100%;}
.streaming_block .streaming_buttons .start_button .material-icons {     font-size: 80px; color: #ea3727; line-height: 59px; width: 80px;  height: 58px;}
.streaming_block .streaming_buttons .start_button .material-icons:hover {  color: #b92214;}
.streaming_block .streaming_buttons .stop_button {  margin: 0px 10px; width: 75px; height: 75px;  display: flex; justify-content: center; align-items: center; border: solid 4px #fff; padding: 3px; background: none; border-radius: 100%;}
.streaming_block .streaming_buttons .stop_button .material-icons { font-size: 55px; color: #ea3727; line-height: 59px;width: 55px; height: 60px;}
.streaming_block .streaming_buttons .sub_button { width: 50px; height: 50px; border: solid 2px #90908fbd; background-color: #07070675; border-radius: 100%; display: flex; justify-content: center; align-items: center; margin: 0 10px;}
.streaming_block .streaming_buttons .sub_button:hover {  background-color: #070706a6; border: solid 2px #90908fee;}
.streaming_block .streaming_buttons .sub_button .material-icons:hover { color: #ffffffc7;}
.streaming_block .streaming_buttons .sub_button .material-icons { font-size: 24px;color: #919190; line-height: 30px; width: 40px; height: 30px;}
.streaming_block .streaming_close {width: 30px; height: 30px; position: absolute; right: 20px; top: 15px; background: none; border: none;}
.streaming_block .streaming_close .material-icons {font-size: 32px; color: #ffffff78;  line-height: 32px;}
.streaming_block .streaming_close .material-icons:hover {  color: #ffffffd5;}
.streaming_block .stream_options {  display: flex; justify-content: space-between; align-items: center;}
.streaming_block .stream_duration { color: #dddddd; font-size: 16px;  font-family:var(--quicksandregularfont)!important;}
.streaming_block .stream_settings { display: flex;}
.streaming_block .stream_settings .icon { width: 20px; height: 20px; margin: 0 5px;  color: #8d8d89;}
.streaming_block .stream_settings .icon:hover { color: rgb(230, 230, 230);}
.streaming_block .stream_settings .icon .material-icons {font-size: 24px;  line-height: 32px;}
.streaming_block .came_off { background-color: #ea3727 !important; border: solid 2px #ffffff !important;}
.streaming_block .came_off .material-icons {  color: #fff !important;}
.streaming_block .mic_off { background-color: #ea3727 !important; border: solid 2px #ffffff !important;}
.streaming_block .mic_off .material-icons {  color: #fff !important;}
.streaming_block .top_options { position: absolute; top: 25px; left: 25px; display: flex;}
.streaming_block .top_options .live {display: flex; font-size: 16px; color: #fff; align-items: center;  font-family:var(--quicksandboldfont)!important;}
.streaming_block .top_options .live .dot { width: 8px; height: 8px; border-radius: 100%; margin-right: 10px; background-color: #e94034;}
.streaming_block .top_options .views { color: #efefef;  font-family:var(--quicksandregularfont)!important; display: flex; align-items: center; margin-left: 30px;}
.streaming_block .top_options .views .material-icons  { font-size: 20px; margin-right: 10px;  color: #efefef;}
.chat_block { width: 650px; height: 100vh; background-color: #313131;}
.broadcast_play { width: 30px; height: 30px; position: absolute; right: 10px; top: 10px;  background-color: #2a2a2acc; display: flex; justify-content: center;
  align-items: center; border-radius: 3px; color: #fff;}
  .broadcast_play:hover {  color: rgb(209, 209, 209); text-decoration: none;}
  .broadcast_play .material-icons {  font-size: 22px; }
  .asset_play { width: 30px; height: 30px; position: absolute; right: 10px; top: 10px; background-color: #2a2a2acc; display: flex; justify-content: center;
    align-items: center; border-radius: 3px; color: #fff;}
  .asset_play:hover {  color: rgb(209, 209, 209);  text-decoration: none;}
  .asset_play .material-icons {  font-size: 22px; }
.mobile-controls { display: none;}

.broadcast .navbar-brand { margin-top: 0px !important;}
.broadcast .dropdown {margin-right: 0px !important;}
.actions-dd .dropdown-menu li a {  font-family:var(--bodyfont)!important;}
.dropdown-menu a {  font-family:var(--bodyfont)!important;}


@media (min-width: 1000px) {
    .create_section .bc_form_wrp {width:700px !important; margin: 0 auto !important; }
}

@media (max-width: 900px) {
  .create_section .bc_form_wrp {width:95% !important; margin: 0 auto !important; }
  .create_section .form_box { padding: 20px;}
  .create_section h3 {  margin-bottom: 20px !important; font-size: 20px;}
  .create_section .destination_con {  padding: 15px 0px 0 0px;}
  .create_section h2 { font-size: 26px;}
  .profile-btn { width: 35px !important;  height: 35px !important;}
  .navbar-toggler {  top: 5px !important;}
  .live-header .navbar { padding-right: 0px !important;}
  .streaming_block .live_streaming #preview { width: auto !important;    height: calc(100vh - 50px);}
  .streaming_block .streaming_buttons .sub_button .material-icons {font-size: 20px; line-height: 28px; width: 22px;height: 28px;}
  .streaming_block .streaming_buttons .sub_button { width: 45px; height: 45px;}
  .streaming_buttons .stream_settings { display: none;}
  .streaming_buttons .stream_duration { display: none;}
  .streaming_block .stream_options { width: 365px;}
  .mobile-controls { display: block; height: 50px; padding: 13px 10px; background-color: #000;}
  .top_options { display: none !important;}
  .mobile-controls .top_options  { display: flex !important;justify-content: space-between; width: 100%; position: static; align-items: center;}
  .top_options .stream_settings { display: flex;}
  .mobile-controls .top_options .views { margin-left: 0 !important;}
  .mobile-controls .icon .material-icons {  line-height: 24px !important;}
  .streaming_close { display: none;}
  .mobile-controls .streaming_close { display: block; position: static; width: 25px;  height: 25px;}
  .mobile-controls .streaming_close .material-icons { font-size: 28px;color: #ffffff78;line-height: 28px; }
  .mobile-controls .stream_settings .icon {  height: 24px;     margin: 0 8px !important;}
 .mobile-controls .top_options .views .material-icons { margin-right: 7px; }
 .streaming_block .live_streaming { height: calc(100vh - 50px);}
 .streaming_block .streaming_buttons {  justify-content: center;}


}
@media(min-width:300px) and (max-width:380px){ 
  .streaming_block .streaming_buttons {  padding: 0 10px; }
  .streaming_block .stream_options {  width: 300px;}
  .streaming_block .streaming_buttons .start_button {  width: 60px;   height: 60px;}
  .streaming_block .streaming_buttons .start_button .material-icons {  font-size: 63px;   width: 63px;}
  .streaming_block .streaming_buttons .sub_button {  width: 40px;height: 40px;margin: 0 5px;}
}
@media screen and (min-device-width: 300px) and (max-device-width: 1000px) and (orientation : portrait){
  .streaming_block .streaming_buttons { bottom: 105px !important;}
}
@media screen and (min-device-width: 300px) and (max-device-width: 1000px) and (orientation : landscape){
  .streaming_block .live_streaming #preview { width: auto !important;       height: auto !important;}
}
.mob-display{ display: none;}
.desk-display{ display: block;}
.no-max-width{ max-width: inherit !important;}
.envlive-container{ max-width: 1600px; width: 100%; padding:0 15px; margin: 0 auto;}
.minbody-ht{ min-height: calc(100vh - 100px);}

.grad-btn{ appearance: none; -webkit-appearance: none; padding: 7px 15px; border-radius: 100px; color: #fff; font-size: 14px; background-color: var(--btnbg); line-height: 1; display: flex; align-items: center; border:none; position: relative; }
.grad-btn:after{content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; right: -1px; background: linear-gradient(#2AD8FF, #FF2AAC); content: ''; z-index: -1; border-radius: 100px;}
.grad-btn span{ border-radius: 100%; background-color: var(--bgColor); margin-right: 10px; margin-left: -10px;}

.roundbtns{ width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius:100%; border: 1px solid var(--borderColor); background-color:#1E222Ab8; text-decoration: none; cursor: pointer;}
.roundbtns span{ color:var(--sectxtColor); font-size: 16px;}

.publish-btn{ display: inline-flex; align-items: center; text-decoration: none; color:#fff; font-size: 12px; border-radius: 50px; border:1px solid var(--borderColor); background-color: var(--btnbg); padding:5px 15px; cursor: pointer; position: relative;}
.publish-btn span.material-symbols-outlined{ margin-right: 5px; font-size: 22px; color: var(--borderColor);  }

.publish-btn:hover{ color:#fff; cursor: pointer;}

.publish-btn.selected{ color:#fff; background-color: var(--bgColor);border:none;  font-family: var(--quicksandregularfont) !important;}
.publish-btn.selected:after{ content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; right: -1px; background: linear-gradient(45deg, #2AD8FF, #FF2AAC); content: ''; z-index: -1; border-radius: 50px; box-shadow: 0px 0px 4px #2ad8ff}
.publish-btn.selected span{ color: var(--highlight);}

.publish-btn .pubtxt::after{ content: "Publish "; font-size: 14px; color: var(--borderColor);}
.publish-btn.selected .pubtxt::after{ content: "Published "; font-size: 14px; color:white}

.publish-btn::before{ content: attr(publish);}

.actions-dd .dropdown-menu{   left: inherit !important; padding:0px!important; border-radius: 3px; }

.actions-dd .dropdown-menu:after{content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; right: -1px; 
  background: linear-gradient(131deg,#2AD8FF 2%, #2AD8FF00 30%); content: ''; z-index: -1; border-radius: 3px; transition: all 0.5s ease-out; }
  .actions-dd .dropdown-menu:hover{ transition: all 0.5s ease-out;}
  .actions-dd .dropdown-menu:hover:after{content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; right: -1px; 
    background: linear-gradient(80deg,#2AD8FF 2%, #2AD8FF00 30%); content: ''; z-index: -1; border-radius: 3px; }


.actions-dd .dropdown-menu{ background-color: var(--secbgColor); background: var(--secbgColor);}
.actions-dd .dropdown-menu li{ background-color: var(--secbgColor); border-top: 1px solid var(--bgColor);}
.actions-dd .dropdown-menu li:first-child{ border-radius: 3px 3px 0 0;}
.actions-dd .dropdown-menu li:last-child{ border-radius: 0 0 3px 3px ;}
.actions-dd .dropdown-menu li a{ color:#fff; display: flex; align-items: center; font-size: 13px; padding: 0.5rem 1rem!important;}
.actions-dd .dropdown-menu li a span{ margin-right: 10px; color: var(--highlight)!important; font-size: 20px!important;}
.actions-dd .dropdown-menu li a:hover{ color:#fff ; background-color: var(--bgColor);}


/*HEADER*/
.live-header{ background-color: var(--secbgColor); display: flex; align-items: center; justify-content: space-between;}
.header-wrapper{ display: flex; align-items: center; justify-content: space-between;}
.live-brand{ display: flex; align-items: center;}
.live-brand button{ padding:5px 15px 5px 0!important;}
.live-brand button span{ font-size: 32px; color: #fff;}
.navbar-toggler:focus { text-decoration: none; outline: 0; box-shadow: none!important; }
.live-header .navbar{ padding-top: 0.8rem; padding-bottom: 0.8rem;} 


/*NAV*/
.live-navlist li a{ color:#7c8cae; font-family: var(--quicksandboldfont) !important; position: relative;}
.live-navlist li a:after{ width: 0px; content: ''; position: absolute; width: 0; height: 3px; bottom: -3px; left: 50%; transform: translate(-50%, -3px); border-radius: 3px; background-color: var(--highlight); transition: all 0.2s ease-out; }
.live-navlist li a:hover, .live-navlist li a:focus{ color:#fff;  }
.live-navlist li a:hover:after{  width: 40px;}
.live-navlist li a.active:after{  width: 40px;  }
.live-navlist li a.active{font-family: var(--quicksandboldfont)!important; color:#fff;}

.profile-btn{ width: 48px; height: 48px; border-radius: 100%; position: relative; }

.profile-btn::before{content: ""; position: absolute; top: -4px; bottom: -4px; left: -4px; right: -4px; background: linear-gradient(#2AD8FF, #FF2AAC); content: ''; z-index: -1; border-radius: 100%; }

.profile-dd .dropdown-menu{ right:0; left: inherit !important; padding:0px!important; border-radius: 3px; }

.profile-dd .dropdown-menu:after{content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; right: -1px; 
  background: linear-gradient(131deg,#2AD8FF 2%, #2AD8FF00 30%); content: ''; z-index: -1; border-radius: 3px; transition: all 0.5s ease-out; }
  .profile-dd .dropdown-menu:hover{ transition: all 0.5s ease-out;}
  .profile-dd .dropdown-menu:hover:after{content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; right: -1px; 
    background: linear-gradient(80deg,#2AD8FF 2%, #2AD8FF00 30%); content: ''; z-index: -1; border-radius: 3px; }

.profile-btn img{ position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); max-width: 48px;border-radius: 100px; }
.profile-dd .dropdown-menu{ background-color: var(--secbgColor); background: var(--secbgColor);}
.profile-dd .dropdown-menu li{ background-color: var(--secbgColor);}
.profile-dd .dropdown-menu li:first-child{ border-radius: 3px 3px 0 0;}
.profile-dd .dropdown-menu li:last-child{ border-radius: 0 0 3px 3px ;}
.profile-dd .dropdown-menu li a{ color:#fff; display: flex; align-items: center; font-size: 13px; padding: 0.5rem 1rem!important;}
.profile-dd .dropdown-menu li a span{ margin-right: 10px; color: var(--highlight)!important; font-size: 20px!important;}
.profile-dd .dropdown-menu li a:hover{ color:#fff ; background-color: var(--bgColor);}
.profile-dd .dropdown-menu li:last-child{ border-top: 1px solid var(--bgColor);}


/*CARD*/
.channel-card{ width: 100%; transform: scale(1); margin-bottom: 30px;}
.channel-card .channel-thumb{ height: 200px; display: flex; align-items: center; justify-content: center; background-color: #000; position: relative; border-radius: 5px; border: 1px solid var(--borderColor); box-shadow: 2px 3px 3px 0px rgb(0 0 0 / 50%); }
.channel-card .channel-thumb img{ width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 5px;}
.channel-card .channel-footer h5{ color: var(--sectxtColor); font-size: 16px;}
.channel-footer{ padding-top: 10px;}
.thumb-footer{ position: absolute; left: 0; right: 0; bottom:0; padding:10px; display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; z-index: 1;}


/*BODY*/
.envlive_wrapper{ margin-top: 56px; width: 100%; font-family: var(--quicksandregularfont) !important; background-color: #15171b; }
.envlive_wrapper p {font-family: var(--quicksandregularfont) !important; }
.envlive_wrapper h1, .envlive_wrapper h2, .envlive_wrapper h3, .envlive_wrapper h4, .envlive_wrapper h5 { font-family: var(--quicksandboldfont) !important;}
.block-group{ display: flex; align-items: center;}

.page-heading{ display: flex; align-items: center; margin-bottom: 15px;}
.page-heading h2{ margin-bottom: 0; font-family: var(--quicksandboldfont) !important; font-size: 20px; margin-right: 15px;}
.navbar-brand img{ max-width: 135px; max-height: 35px;}
.me-3 {  margin-right: 1rem!important;}

/*footer*/
.footer{ padding: 15px; border-top:1px solid #3a3a3a; background-color: #111215;}
.footer p { font-family: var(--quicksandregularfont) !important; }
.footer-para{ margin-bottom: 0; text-align: center; color: #64666a; font-size: 13px;}
.preloader {     position: absolute; left: 48%;  top: 45%;}
.mt-20 { margin-top: 20px;}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 16
}

@media(min-width:300px) and (max-width:480px){
  .profile-block{  position: absolute; right:0px; top:0.8rem;}
  .live-menu{position: absolute; top: 80px; left: 0; right: 0; background-color: #1E222B;}

  .auth0-lock .auth0-lock-center .auth0-lock-widget{overflow-y: scroll; max-height: 480px;}
}

@media (min-height:730px) {
  .auth0-lock .auth0-lock-center .auth0-lock-widget{overflow-y: unset; max-height: unset;}
  
}

  .auth0-lock .auth0-lock-center {padding: 0px !important;}
  .auth0-lock .auth0-lock-widget-container {width: 100%;}
  .auth0-lock .auth0-lock-widget-container .auth0-lock-cred-pane{height: inherit !important;min-height: inherit !important; margin: 0 auto !important; padding-bottom: 30px !important; padding-top: 0px !important;
    margin-bottom: 45px !important; margin-top: 4% !important;}
  .auth0-lock .auth0-lock-widget-container .auth0-lock-cred-pane .auth0-lock-header{height: 50px !important;}
  .auth0-lock .auth0-lock-widget-container .auth0-lock-cred-pane .auth0-lock-header .auth0-lock-name{line-height: 20px !important; font-family: var(--quicksandregularfont) !important;}
  .auth0-lock .auth0-lock-widget-container .auth0-lock-cred-pane .auth0-lock-social-button .auth0-lock-social-button-text{font-family: var(--quicksandregularfont) !important;}
  .auth0-lock .auth0-lock-widget-container .auth0-lock-cred-pane .auth0-lock-input{font-family: var(--quicksandregularfont) !important;}
  .auth0-lock .auth0-lock-widget-container .auth0-lock-cred-pane .auth0-lock-form p{font-family: var(--quicksandboldfont) !important;}
  .auth0-lock .auth0-lock-widget-container .auth0-lock-cred-pane .auth0-lock-form .auth0-lock-alternative .auth0-lock-alternative-link{font-family: var(--quicksandregularfont) !important;}
  .auth0-lock .auth0-lock-widget-container .auth0-lock-cred-pane .auth0-label-submit{font-family: var(--quicksandregularfont) !important;}
  .auth0-lock .auth0-lock-widget-container .auth0-lock-cred-pane .auth0-lock-form .auth0-lock-icon-box{display: none;}
  .auth0-lock .auth0-lock-widget-container .auth0-lock-cred-pane .auth0-lock-form {padding: 20px !important;}
  @media (min-width: 320px) and (max-width: 1080px) {
    .live-header .navbar {  display: flex;  }
    .auth0-lock.auth0-lock .auth0-lock-widget { height: 100vh !important;}
  }  

/* Edit Channel */
.sec-header{ display: flex; align-items: center; justify-content: space-between; padding: 12px 0;}
.sec-header h3 { font-weight: 700;}
.inputgroup{ display: block; border: 1px solid #39404e; border-radius: 3px; padding: 10px; box-sizing: border-box; margin-bottom: 10px; }
.inputgroup .label{ font-size: 10px; color:#6f7685; margin-bottom: 5px; line-height: 1; font-family: var(--litefont);}
.inputgroup input{height: inherit!important;}
.inputgroup input, .inputgroup textarea{ appearance: none; -webkit-appearance: none; background-color: transparent; outline: transparent; border:none; border:transparent; width: 100%; padding: 0; color:#c2d0ec}
.inputgroup input:focus, .inputgroup textarea:focus{ border:transparent;}

input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1);}

.social-block{ padding: 10px; border-radius: 3px; border:1px solid #39404e;}
.social-block .social-group{ width: 100%; height: 38px; position: relative; border:1px solid #39404e; background-color: #121417; margin-bottom: 10px;}
.social-block .social-group input{ position:relative; width:100%; appearance: none; -webkit-appearance: none; background-color: transparent; height: 100%; padding:0 30px; border-radius: 3px;}
.social-block .social-group input:focus{ border:transparent;}
.social-block .social-group img{ width:24px; position: absolute; left:3px; top:50%; transform: translate(3px, -50%);}
.social-block .social-group .paste-btn{ position: absolute; right: 3px; width: 30px; top: 3px; height: 30px; align-items: center; justify-content: center; display: flex; border-radius: 100%; background-color: #1d2025; line-height: 1;}
.social-block .social-group .paste-btn span{ font-size: 16px!important; color: #6f7685;}

.playlist-block{ border-radius: 3px; border:1px solid #39404e; }
.playlist-block .playlist-header{ padding: 10px;}
.add-btn{ width: 100%; padding: 4px 10px; display: block; background-color: #1e222a; border:1px solid #39404e; display: flex; align-items: center; justify-content: space-between; border-radius: 3px;}
.add-btn p{ margin-bottom: 0; line-height: 1; font-size: 12px;}

.playlist-block .playlist-body ul{ padding: 0; margin: 0 0 15px 0; }
.playlist-block .playlist-body ul li{ list-style: none; padding:5px 10px; border-bottom: 1px solid #39404e;}
.playlist-block .playlist-body ul li:first-child{  border-top: 1px solid #39404e;}

.playlist-block .playlist-body ul li .play-list{ display: flex; align-items: center;}

.playlist-body ul li .play-list .play-list-thumb{ width: 80px; padding-top: 11%; position: relative; border:1px solid #39404e;}
.playlist-body ul li .play-list .play-list-thumb img{ position: absolute; top:0; left:0; right: 0; bottom: 0; z-index: 1; }
.playlist-body ul li .play-list .play-list-thumb .overlay{position: absolute; top:0; left:0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.3); z-index: 2;}
.playlist-body ul li .play-list .play-list-description{ display: flex; align-items: center; justify-content: space-between; padding: 10px; width: calc(100% - 80px);}

.play-list .play-list-thumb span{ position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);}
 .play-list-title p{ font-size: 14px; margin-bottom: 7px; color: #6f7685;}
 .play-list-title p.duration{ font-size: 10px; font-style: italic;}
 .play-list-actions a span{ font-size: 20px;}
.uploadPics { display: flex; justify-content: space-between; width: 100%;}
.uploadPics .upload { width: 40%;}
.uploadPics .upload.portrait { width: 20%; padding: 0 5px;}
.uploadPics input[type="file"] { display: none;}
.uploadPics .custom-file-upload { background-color: #383e4b;  width: 100%; display: flex;  align-items: center;  justify-content: center; cursor: pointer; height: 120px;}
.uploadPics .size { color: #6f7685; font-size: 12px; font-weight: 600; line-height: 16px;}
.edit-channel .form_footer { width: 100%; display: flex; justify-content: space-between; align-items: center; background-color: #0f1114; padding: 10px 20px;}
.edit-channel .form_footer .form_buttons { display: flex; justify-content: end;}
.btn {  text-transform: uppercase; background: none !important; text-decoration: none;  font-family: var(--quicksandregularfont) !important; padding:5px 20px !important; font-size: 14px !important; font-weight: bold; color: #c2d0ec !important;}
.btn.btn-primary { background-color: #1e222a !important; border: solid 1px #39404e; margin-left: 10px;}
.btn.btn-primary:hover { background-color: #181b22 !important;  border: solid 1px #39404e;}
.btn.btn-link:hover { background-color: #181b2275 !important; text-decoration: none;}

/* Edit Channel end */

/* Landing Page start */
.jp_landing{ position: absolute; top:0; left:0; right:0; bottom:0; background-size: cover; background-position: 50% 50%; z-index: 99; overflow: hidden;}
.jp_landing .overlay{ position: absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.8); z-index: 9;}
.jp_signinWrapper{width: 90%; max-width: 400px; }
.logo_white{ width: auto; height: auto; max-height: 130px; max-width: 370px; display: block; text-align: center; margin: 0 auto;}
.jp_descBlock { border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin-top: 15px; margin-bottom: 15px; padding-top: 10px; padding-bottom: 10px; }
.store-icons { padding: 0; margin: 10px 0; display: flex; align-items: center; justify-content: center; }
.poa_btns { display: flex; align-items: center; justify-content: center; margin: 10px 0; }
.poa_btns a { background-color: transparent; padding: 10px 15px; color: #fff; border: 1px solid #cecece; border-radius: 2px; margin: 3px; }
.filled { background-color: #ffffffc4!important; color: #000!important; }
.jp_signinWrapper .store-icons img { height: 40px; margin-left: 5px; margin-right: 5px; border-radius: 2px; border: 1px solid #c4c4c4; overflow: hidden; }
.join_row{ width: 100%; display: flex; align-items: center; max-width: 1200px; padding:0 15px; position: relative; flex-direction: row; z-index: 999999;}
.float_center{ position: absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.signup_btns{display: flex; align-items: center; justify-content: center; margin: 10px 0;}
.signup_btns a, .signup_btns button{height: initial; background: transparent; line-height:1; padding:10px 20px; font-weight: bold; font-size:16px; color:#fefefe; appearance:none ; -webkit-appearance:none; border-radius:2px; margin:2px;} 
.signup_btns a:hover { text-decoration: none; color: #fff; background-color: rgb(50, 170, 154)!important;}
.green_filled {border:1px solid #46B9AA; background-color: #46B9AA!important;  border:1px solid #46B9AA;}
.stroke{ border:1px solid #FDFDFD; }
.stroke:hover{ color:#fff;}
.jp_descBlock .land_title{ font-size:24px; font-weight: bold; margin-top:15px; margin-bottom:15px; color: #fff;}
.jp_descBlock .land_subtitle{font-size:16px;   margin-top:15px; margin-bottom:15px; text-align: center; color: #fff; }
.jp_signinWrapper .store-icons img{ border:1px solid #888888;}
.wp_logo{ max-width: 300px; max-height: 50px; display: block; text-align: center; margin:0 auto;}
.cols{ width:50%;}
.retina_img{  max-width: 550px;}
.jp_descBlock h1, .jp_descBlock p{ text-align: center;}
.auth0-lock.auth0-lock .auth0-lock-widget {  background-color:rgba(0, 0, 0, 0.904); z-index: 999999;}
.jp_landing .closebtn {  cursor: pointer;   position: absolute;font-size: 20px; color: rgb(209, 209, 209); right: 0;  top: 0;}
.jp_landing .closebtn:hover { color: rgb(235, 235, 235);  }
.jp_landing .closebtn .material-icons { font-size: 32px;}
.jp_landing .u-logo-img {     position: absolute; z-index: 99999999;}

@media(min-width:280px) and (max-width:420px){ 
  .asset_thumbnail{ display: none;}
  .asset_blurbg{filter: blur(9px)!important; background-position: 50% 35%!important;}
  .join_row{ flex-direction: column; flex-direction: column-reverse;}
  .cols{ width:100%;}
  .retina_img{  width: 80%; margin:0 auto 10px auto;}
  .jp_signinWrapper{ margin:20px auto;}
  .jp_descBlock{ margin-top: 10px; margin-bottom: 10px;}
  .jp_descBlock .land_title{ font-size: 20px; margin-top: 10px; margin-bottom: 10px;}
  .jp_descBlock .land_subtitle{font-size: 14px; margin-top: 10px; margin-bottom: 10px;}
  .jp_signinWrapper .store-icons img{height: 30px; }
  .wp_logo{max-height: 40px;}
  .auth0-lock.auth0-lock {  z-index: 9999999!important;}
}
@media(min-width:421px) and (max-width:800px){
  .asset_thumbnail{ display: none;}
  .join_row{ flex-direction: column; flex-direction: column-reverse;}
  .cols{ width:100%;}
  .retina_img{  width: 80%; margin:0 auto 10px auto;}
  .jp_signinWrapper{ margin:20px auto;}
  .jp_descBlock{ margin-top: 10px; margin-bottom: 10px;}
  .jp_descBlock .land_title{ font-size: 20px; margin-top: 10px; margin-bottom: 10px;}
  .jp_descBlock .land_subtitle{font-size: 14px; margin-top: 10px; margin-bottom: 10px;}
  .jp_signinWrapper .store-icons img{height: 30px; }
  .wp_logo{max-height: 40px;}
}

@media(min-width:721px) and (max-width:1000px){
  .asset_thumbnail{ display: none;}
  .jp_landing .auth0-lock.auth0-lock .auth0-lock-cred-pane {    margin: 150px auto 0 auto!important; height: inherit !important;}
  .jp_landing .auth0-lock.auth0-lock .auth0-lock-header {    height: 50px !important;}
}
@media (min-width: 300px) and (max-width: 650px) {
  .jp_landing .auth0-lock.auth0-lock .auth0-lock-cred-pane { margin-top: 80px !important}
  .jp_landing .auth0-lock.auth0-lock .auth0-lock-content-body-wrapper {    margin-top: 0px !important;}
  #signupcontainer { display: none;}
  .jp_landing #authlogindiv .auth0-lock-content {    margin-top: 0px !important;}
}
/* Landing Page end */