html {
  font-family: roboto;
}

th {
  font-weight: bold;
  background-color: #222222;
  color: #fbfbfb;
  padding-top: 5px;
  padding-bottom: 5px;
  border: 1px solid #222222;
  border-right: 1px solid #444;
}

th,
tr {
  margin-right: 5px;
}

body {
  display: flex;
  margin: 0px;
}

.input-disabled {
  background-color: #ddd;
  color: #333;
}

input,
select {
  padding: 3px;
  color: #000;
  background-color: #fff;
  border: 1px solid #000;
}

input {
  height: 15px;
}

select {
  height: 23px;
}

.logo-holder img {
  max-width: 100%;
  max-height: 100%;
}

.settings {
  /* display: flex; */
  height: inherit;
  align-items: baseline;
}

#delete-all-button {
  background-color: red;
  color: white;
  display: none;
  padding: 5px;
}

#submit-button {
  padding: 5px;
  margin: 10px;
}

#filters {
  /* display: flex; */
  display: none;
  height: inherit;
  margin-bottom: 5px;
  align-items: baseline;
}

.log_stat_control {
  float: left;
  margin-bottom: 18px;
}

#log_stat {
  float: left;
  margin-left: 5%;
  min-height: 150px;
  min-width: 360px;
  white-space: pre-wrap;
  border: 1px solid black;
}

.header-item {
  clear: both;
}

span.setting-item {
  margin: 10px;
  display: inline-block;
  min-width: 70px;
}

.paginator_item {
  text-decoration: underline;
  cursor: pointer;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

.paginator_item:hover {
  color: #676767;
}

.paginator_item:active {
  background-color: #dcdcdc;
}

.current_page {
  background-color: #dcdcdc;
}

.sidebar {
  position: fixed;
  height: 100vh;
  background-color: #f3fca3;
  min-width: 80px;
  width: 10vw;
  display: flex;
  flex-direction: column;
  margin-top: 0px;
  margin-right: 10px;
  align-content: center;
}

.login-logo {
  position: fixed;
  bottom: 0;
  right: 0;
}

.login-main input[type="submit"] {
  width: 60px;
  height: 15px;
  height: 24px;
  background-color: #487aff;
  color: #efefef;
}

.navlink {
  font-size: 13px;
  width: 90px;
  line-height: 20px;
  background-color: #487aff;
  border: 1px solid #000000;
  text-align: center;
  text-decoration: none;
  margin: 1px;
  cursor: pointer;
}

.navicon {
  font-size: 13px;
  width: 90px;
  line-height: 20px;
  background-color: transparent;
  border: none;
  text-align: center;
  text-decoration: none;
  margin: 1px;
  cursor: pointer;
}

.sidebar .navlink {
  width: 100%;
  max-width: none;
  border: 0px;
  padding-top: 3px;
  padding-bottom: 3px;
  border-bottom: 1px solid #6d6d6d;
}

.navlink:hover {
  background-color: #2551e6;
}

.selected,
.navlink:active {
  background-color: #284cc6;
  color: #fff;
}

.navlink-red {
  background-color: #d63535;
}

.navlink-red:hover {
  background-color: #d32020;
}

.navlink-red:active {
  background-color: #e81b1b;
  color: #fff;
}

.navlink-yellow {
  background-color: #e0cb65;
  color: #394149;
  font-weight: bold;
}

.navlink-yellow:hover,
.selected-yellow {
  background-color: #ebc530;
}

.navlink-yellow:active {
  background-color: #ecbf13;
  color: #7d7d7d;
}

.button-label {
  display: none;
}

.bootstrap-icon {
  width: 16px;
  height: 16px;
  float: left;
  margin: 2px;
  display: block;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
}

.bootstrap-icon-add {
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-file-plus-fill' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M12 1H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zM8.5 6a.5.5 0 0 0-1 0v1.5H6a.5.5 0 0 0 0 1h1.5V10a.5.5 0 0 0 1 0V8.5H10a.5.5 0 0 0 0-1H8.5V6z'/%3E%3C/svg%3E");
}

.bootstrap-icon-edit {
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-pencil-square' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z'/%3E%3Cpath fill-rule='evenodd' d='M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z'/%3E%3C/svg%3E");
}

.bootstrap-icon-view {
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-eye-fill' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z'/%3E%3Cpath fill-rule='evenodd' d='M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z'/%3E%3C/svg%3E");
}

.bootstrap-icon-stream {
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-play-fill' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'/%3E%3C/svg%3E");
}

.bootstrap-icon-delete {
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-trash-fill' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0v-7z'/%3E%3C/svg%3E");
}

.bootstrap-icon-restart {
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-arrow-clockwise' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1zM8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z'/%3E%3C/svg%3E");
}

.bootstrap-icon-input {
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-play' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z'/%3E%3C/svg%3E");
}

.bootstrap-icon-ad {
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-play-fill' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'/%3E%3C/svg%3E");
}

.bootstrap-icon-advanced {
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-diagram-3' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M0 11.5A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zM6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6h-1A1.5 1.5 0 0 1 6 4.5v-1zM7.5 3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z'/%3E%3Cpath fill-rule='evenodd' d='M8 5a.5.5 0 0 1 .5.5V7H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V5.5A.5.5 0 0 1 8 5z'/%3E%3C/svg%3E");
}

.bootstrap-icon-prewarm {
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-collection-play' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M14.5 13.5h-13A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5zm-13 1A1.5 1.5 0 0 1 0 13V6a1.5 1.5 0 0 1 1.5-1.5h13A1.5 1.5 0 0 1 16 6v7a1.5 1.5 0 0 1-1.5 1.5h-13zM2 3a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 0-1h-11A.5.5 0 0 0 2 3zm2-2a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7A.5.5 0 0 0 4 1z'/%3E%3Cpath fill-rule='evenodd' d='M6.258 6.563a.5.5 0 0 1 .507.013l4 2.5a.5.5 0 0 1 0 .848l-4 2.5A.5.5 0 0 1 6 12V7a.5.5 0 0 1 .258-.437z'/%3E%3C/svg%3E");
}

.bootstrap-icon-flush {
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-file-earmark-minus-fill' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M2 2a2 2 0 0 1 2-2h5.293A1 1 0 0 1 10 .293L13.707 4a1 1 0 0 1 .293.707V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm7.5 1.5v-2l3 3h-2a1 1 0 0 1-1-1zM6 8.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1H6z'/%3E%3C/svg%3E");
}

button svg {
  height: 24px;
  margin: auto;
  display: block;
}

button:hover .button-label {
  display: inline-block;
}

#user-name {
  font-weight: bold;
}

.main {
  margin-top: 10px;
  margin-left: -webkit-calc(10vw + 5px);
  margin-left: -moz-calc(10vw + 5px);
  margin-left: calc(10vw + 5px);
}

.main-data thead {
  font-size: 12px;
}

.main-data {
  border-collapse: collapse;
}

.main-data tbody tr td {
  font-size: 12px;
  border: 1px solid #000;
  padding: 3px;
  max-width: 9vw;
  overflow: hidden;
  text-align: center;
  word-break: break-all;
  text-overflow: ellipsis;
  height: 35px;
}

.main-data tbody tr td.table-ads-actions {
  max-width: 10vw;
  min-width: 61px;
}
.main-data tbody tr td.table-config-actions {
  max-width: 13vw;
  min-width: 155px;
}
.main-data tbody tr td.table-td-actions {
  max-width: 15vw;
  min-width: 217px;
}

.main-data tbody tr td.long-text-1 {
  height: 35px;
  max-width: 10vw;
}
.main-data tbody tr td.long-text-2 {
  height: 49px;
  max-width: 10vw;
}
.main-data tbody tr td.long-text-3 {
  height: 49px;
  max-width: 12.5vw;
}
.main-data tbody tr td.long-text-4 {
  white-space: nowrap;
  height: 49px;
  max-width: 12.5vw;
}

.main-data tbody tr td:hover {
  white-space: normal;
}

.sortable {
  user-select: none;
  text-decoration: underline;
}

.sortable:hover {
  color: #c7c7c7;
  cursor: pointer;
}

.sortdesc::after {
  content: "▼";
}

.sortasc::after {
  content: "▲";
}

.table-item-view,
.table-item-actions {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
}

.table-item-view button,
.table-item-actions button {
  width: auto;
  height: auto;
  min-width: 28px;
  margin-right: 2px;
  margin-bottom: 2px;
  margin-top: 2px;
  padding: 0;
}

.table-item-actions .stream_quality_btn {
  line-height: 20px;
}
.table-item-actions .native_quality_btn {
  width: 90px;
  height: 22px;
  line-height: 22px;
}
.table-item-actions .log_btn {
  height: 20px;
}

.popup {
  position: fixed;
  display: grid;

  grid-template-areas:
    "t c"
    "i x"
    "z b";

  grid-template-columns: auto 100px;
  grid-template-rows: 50px auto 50px;

  text-align: center;
  left: 50%;
  top: 30%;
  width: 40vw;
  transform: translate(-50%, -30%);
  background-color: #222222;
  color: #fbfbfb;
}

#loading_popup {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  display: none;
}

#stream_selector_popup {
  width: 60vw;
}

.popup .popup-title {
  margin: auto;
  grid-area: t;
}

.popup .popup-title-native {
  position: absolute;
  bottom: 35px;
  margin: auto;
  left: 0;
  right: 0;
  grid-area: z;
}

.popup-native {
  position: absolute;
  bottom: 10px;
  margin: auto;
  left: 0;
  right: 0;
  grid-area: z;
}

.popup-close {
  grid-area: c;
  margin-top: 15%;
  width: 50%;
  justify-self: center;
}

.popup-main {
  grid-area: i;
  flex-direction: column;
  justify-content: flex-start;
  max-height: calc(90vh - 77px);
  overflow-x: auto;
  overflow-y: auto;
}

.popup-bottom {
  grid-area: b;
}

.popup-bottom button {
  width: 90px;
  align-self: center;
  margin-top: 10px;
}

.popup-closed {
  display: none;
}

.popup-input-item {
  margin-left: 15px;
  display: flex;
  margin-bottom: 5px;
  align-items: baseline;
  justify-content: space-between;
}

.popup-input-sub-item {
  padding-left: 20px;
}

.popup-input-option-item {
  padding-left: 54px;
  font-size: 15px;
}

.popup-input-item input {
  width: 150px;
}

.popup-input-item select {
  width: 158px;
}

.popup-input-item textarea {
  width: 152px;
  display: block;
  overflow: hidden;
  resize: none;
  min-height: 33px;
}

.popup-stream {
  grid-area: i;
  justify-self: center;
  align-self: center;
}

.popup-label {
  margin-right: 10px;
}

.popup-main-str {
  text-align: left;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-left: 10px;
  line-height: 24px;
}

.settings_system {
  margin-left: 15px;
  margin-bottom: 30px;
}
.header-item {
  display: block;
  height: 25px;
  margin-bottom: 5px;
  align-items: baseline;
}

#name_ascdesc_toggle:hover {
  cursor: pointer;
  color: #404040;
}
#name_ascdesc_indicator {
  text-decoration: none;
}

#view_popup {
  width: 50vw;
}

#stream_popup,
#vid_popup {
  grid-template-areas:
    "t c"
    "i i"
    "i i";
  width: 50vw;
  padding-bottom: 10px;
}

#stream_popup p {
  margin: 2px 5px 2px 5px;
}

#stream_popup .popup-title {
  margin: auto;
}

#popup-stream-baseURL {
  word-break: break-all;
  margin-left: 5px;
  margin-right: 5px;
}

#main-stream {
  margin: auto;
}

#session_log {
  margin-left: 10px;
  float: left;
}

#session_indicator {
  margin-left: 40px;
}

#log_data {
  width: -webkit-calc(90vw - 30px);
  width: -moz-calc(90vw - 30px);
  width: calc(90vw - 30px);
  overflow-x: scroll;
  overflow-y: scroll;
}

#copy_session_log {
  display: block;
}

#log_session {
  box-sizing: border-box;
  height: 320px;
  font-size: 12px;
  line-height: 20px;
  border: 1px solid #777;
  padding: 10px;
  color: #333;
}

#table_list_sessions {
  float: left;
}

/* Toggle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.main-stream-dimensions {
  width: 512px;
  height: 288px;
}

/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none; /*hide original SELECT element:*/
}

.select-selected {
  background-color: #10b5e8;
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/*style the items (options), including the selected item:*/
.select-items div,
.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover,
.same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

#popup_message {
  position: fixed;
  display: none;
  bottom: 50px;
  width: 20%;
  padding: 15px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #842029;
  background-color: #f8d7da;
  border-width: 3px;
  border-color: #f5c2c7;
  border-style: solid;
  border-radius: 10px;
  z-index: 9999;
}

.health_circle {
  display: block;
  height: 15px;
  width: 15px;
  margin: 0 auto;
  border-radius: 50%;
}

.main table tbody tr .table_padding {
  padding: 5px 20px;
}

#confirmation-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 3px solid red;
  border-radius: 5px;
  text-align: center;
  z-index: 1;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23);
}

#confirmation-box input {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#confirmation-box button {
  color: white;
  padding: 7px 20px;
  margin-top: 15px;
  border-radius: 6px;
  cursor: pointer;
}

#confirm-delete-button {
  background-color: #f44336 !important;
}

#confirm-delete-button:disabled {
  background-color: grey !important;
  color: black !important;
  cursor: not-allowed !important;
}

#cancel-delete-button {
  background-color: #4CAF50;
}