:root {
  --primary-color: #00255b;
  --color-orange: rgb(202, 81, 0);
  --color-lightGreen: rgb(195, 249, 12);
  --color-black: #000;
  --color-white: #fff;
  --color-grey: rgba(95, 96, 98, 0.5);
  --fontFamily: "montserrat-regular";
}

.jsVideoControls {
  width: 100%;
  /* height: 32px; */
  position: absolute;
  z-index: 9999;
  /* top: -72px; */
  text-align: left;
  font-family: var(--fontFamily);
  height: 29px;
  bottom: 0px;
}

.jsPresetControl .btnPre {
  background-color: var(--primary-color);
  /* border-color: var(--primary-color); */
  color: var(--color-white);
  min-height: 0;
  padding: 4px;
  vertical-align: middle;
  margin-top: -1px;
  cursor: pointer;
  border: none;
}

.presetSelectCtrl > .btn > span.label {
  display: inline-block;
  max-width: 125px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.jsPresetControl .btn-control.has-menu::after {
  border: calc(11px / 2) solid transparent;
  border-bottom-color: currentColor;
  border-top-color: currentColor;
  border-top-width: 0;
  content: "";
  display: inline-block;
  height: 0;
  margin-left: 5px;
  margin-top: calc(5px / -2);
  overflow: hidden;
  white-space: nowrap;
  width: 0;
}

.jsPresetControl .filledLabel .label {
  background-color: var(--primary-color);
  border-radius: 3px;
  font-weight: normal;
  padding: 1px 5px;
  font-size: 11px;
}

.jsPresetControl .btn-control.has-menu.selected::after {
  border-bottom-width: 0;
  border-top-width: calc(11px / 2);
}

.jsPresetControl .vertical-menu {
  background-color: transparent;
  /* background-color: #fafafa; */
  /* border-bottom: 2px solid #050505; */
  /* border-top: 2px solid #050505; */
  font-size: 11px;
  position: absolute;
  transition: opacity 250ms;
  z-index: 300;
  bottom: 25px;
  text-align: left;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0px;
}

.vertical-menu ul,
ol {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0px;
}

.jsPresetControl div.list {
  background-color: transparent;
}

.jsPresetControl div.list li {
  background-color: var(--primary-color);
  border-color: #050505;
  color: #fff;
}

.vertical-menu div.list li div {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  /* position: relative; */
}

.vertical-menu div.list li span.cell {
  cursor: pointer;
  display: block;
  line-height: 16px;
  overflow: hidden;
  padding: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vertical-menu div.list li span.cell:last-of-type {
  padding-right: 32px;
}

.jsPresetControlol ul,
ol {
  list-style: none;
}

.jsPresetControl svg {
  max-height: 100%;
  min-width: 16px;
}

.presetSelectCtrl div.list.check li div span:first-child {
  min-width: 24px;
}

.presetSelectCtrl div.list li:hover > div {
  background-color: var(--color-white);
  color: #000;
}

.presetSelectCtrl div.list li:hover {
  color: #000;
}

.vertical-menu div.list li {
  border-bottom: 1px solid #050505;

  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.presetSelectCtrl div.list li.active:hover > div {
  background-color: var(--color-white);
  color: #000;
}

.hidden {
  display: none;
}

.jsPresetControl div.list li > div:hover svg {
  fill: currentColor;
}

.presetSelectCtrl div.list li.active > div > span:first-child {
  background: url(../images/check-yellow.png) no-repeat center center;
}

.presetSelectCtrl div.list li.active:hover > div > span:first-child {
  background: url(../images/check-black.png) no-repeat center center;
}

.jsFr {
  float: right;
  /* background: #00255b; */
  margin-top: -1px;
  padding: 2px;
}

.settingsCtrlsDiv {
  width: 215px;
  margin-left: -193px;
  margin-top: -64px;
}

.jsSettingsCtrlsList ul li {
  padding: 10px;
}

.streamStatiSticsCtrl .flipswitch-inner:before,
.streamStatiSticsCtrl .flipswitch-inner:after {
  font-size: 11px;
  background: var(--color-orange) !important;
}

.streamStatiSticsCtrl {
  display: inline-block;
  float: right;
  margin-top: -3px;
}

.flex-container {
  display: flex;
  flex-direction: column;
  background-color: var(--primary-color);
}

.flex-container > div {
  margin: 13px;
  text-align: left;
  color: #fff;
}

#settingsCtrlAction {
  cursor: pointer;
}

#JsVideoFullScreen {
  cursor: pointer;
}
.iconsSettings {
  width: 16px;
  padding-top: 5px;
  cursor: pointer;
}

.browserStreamStatistics {
  background-color: var(--color-black);
  position: absolute;
  top: 10px;
  opacity: 0.7;
  padding: 10px;
  width: 230px;
  left: 10px;
  font-family: var(--fontFamily);
}

.browserStreamContainer {
  display: flex;
}

.browserStreamContainer > div {
  color: var(--color-white);
  width: 100%;
  padding: 2px 2px 2px 11px;
  font-size: 12px;
  text-align: left;
}

.browserStreamContainerTitle {
  font-weight: bold;
  margin-bottom: 7px;
}

.jsVideoControlsZoomSlider {
  background: var(--color-black);
  padding: 9px;
  position: relative;
  bottom: 70px;
  opacity: 0.7;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fontFamily);
}

.jsPlayerZoomSlider {
  width: 100%;
  background: var(--color-lightGreen);
  height: 1px;
}

.jsPlayerZoomSlider.ui-corner-all,
.jsPlayerZoomSlider .ui-corner-all {
  border-radius: 0;
}

.jsPlayerZoomSlider.ui-slider {
  border: 0;
  background: rgb(195, 249, 12);
  border-radius: 7px;
}

.jsPlayerZoomSlider.ui-slider-horizontal {
  height: 2px;
}

.jsPlayerZoomSlider.ui-slider-vertical {
  height: 90%;
  max-width: 4px;
  min-width: 3px;
}

.jsPlayerZoomSlider .ui-slider-handle {
  width: 15px;
  height: 15px;
  background: var(--color-white);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.jsPlayerZoomSlider.ui-slider-horizontal .ui-slider-handle {
  top: 50%;
  margin-top: -8px;
}

.jsPlayerZoomSlider.ui-slider-vertical .ui-slider-handle {
  left: 50%;
  margin-left: -7px;
}

.jsPlayerZoomSlider .ui-slider-handle:hover {
  opacity: 0.8;
}

.jsPlayerZoomSlider .ui-slider-range {
  border: 0;
  border-radius: 7;
  background: var(--color-lightGreen);
}

.jsPlayerZoomSlider.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 6px;
}

.jsPlayerZoomSlider.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 6px;
}

.zoomCtrlAction {
  color: var(--color-white);
  margin-right: 15px;
  font-size: 11px;
  cursor: pointer;
}
.zoomCtrlAction::after {
  border: calc(11px / 2) solid transparent;
  border-bottom-color: currentColor;
  border-top-color: currentColor;
  border-top-width: 0;
  content: "";
  display: inline-block;
  height: 0;
  margin-left: 5px;
  margin-top: calc(15px / -1);
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  color: #fff;
  vertical-align: middle;
  margin-top: -5px;
}

.zoomCtrlAction.selected::after {
  border-bottom-width: 0;
  border-top-width: calc(11px / 2);
  margin-top: -5px;
}

.expandA {
  margin-left: 8px;
}
.jsToolbar {
  display: flex;
  flex: 1;
}
.jsToolbarContainer {
  flex: 1;
}

.fullscreen {
  float: right;
  margin-left: 15px;
}

.jsZoomBar {
  position: absolute;
  background: var(--color-black);
  float: right;
  /* bottom: 37px; */
  bottom: 29px;
  right: 0px;
  height: 94%;
  opacity: 0.5;
  display: flex;
  align-items: center;
  z-index: 9999;
  padding: 1% 1.5% 0% 1.5%;
}

#jsplayer_zoom_slider span.ui-slider-tip {
  opacity: 1;
  font-weight: bold;
  font-size: 12px;
  width: 50px;
}

.jsVideoToolbar {
  background: var(--color-black);
  /* padding: 18px; */
  opacity: 0.5;
  /* position: relative; */
  /* top: -34px; */
  /* top: -41px; */

  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 29px;
}

.jsVideoTopBar {
  visibility: visible;
  background: var(--color-black);
  /* padding: 10px; */
  padding-left: 10px;
  padding-right: 10px;
  opacity: 0.5;
  position: absolute;
  top: 0px;
  width: 98.5%;
  /* height: 1.8%; */
  float: right;
  bottom: 37px;
  right: 0px;
  display: flex;
  align-items: center;
  z-index: 9999;
}

.jsZoomBarSide {
  position: absolute;
  background: var(--color-black);
  float: right;
  bottom: 29px;
  /* bottom: 37px; */
  right: 0px;
  height: calc(100% - 59px - 20px);
  opacity: 0.3;
  display: flex;
  align-items: center;
  z-index: 9999;
  /* padding: 1% 6.23% 0% 6.23%; */
  /* padding: 1% 1.5% 0% 1.5%;
  padding-left: 6.23%;
  padding-right: 6.23%; */
}