* {
    outline: none;
}

html, body {
    margin: 0;
    height: 100%;
    font-family: Roboto, sans-serif;
    background-color: #383d41;
}

.h1 {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.42;
    color: #ffffff;
}

.h2 {
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
}

.white-text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: #ffffff;
}

.white-035-text {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.35);
}

.white-045-text {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.45);
}

.white-07-text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    color: rgba(255, 255, 255, 0.7);
}

.white-08-text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.green-text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    color: #5be663;
}

.red-text {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    color: #ff0000;
    color: #ff5757;
}

.fw-300 {
    font-weight: 300;
}

.fw-normal {
    font-weight: normal;
}

.fw-500 {
    font-weight: 500;
}

.fc-white {
    color: #ffffff;
}

.fc-white-035 {
    color: rgba(255, 255, 255, 0.35);
}

.fc-white-07 {
    color: rgba(255, 255, 255, 0.7);
}

.fc-green {
    color: #5be663;
}

.fc-red {
    color: #ff0000;
}

.gray-title {
    color: #aaa;
    font-size: 8pt;
}

.warning-area {
    position: relative;
    margin-bottom: -71px;
    top: -200px;

    display: block;
    width: 100%;
    background: #ffd53a;
    min-height: 70px;
    padding: 11px 18px;
    box-sizing: border-box;
    transition: margin-bottom 0.6s, top 0.6s;
}
.warning-area.show {
    margin-bottom: 0;
    top: 0;

    transition: margin-bottom 0.6s, top 0.6s;
}

.warning-area__svg {
    fill: #980000;
    width: 40px;
    height: auto;
    vertical-align: middle;
}

.warning-area a {
    display: inline-block;
    color: #484848;
    cursor: default;
    vertical-align: middle;
    padding: 15px 22px;
}
.warning-area__buttons-panel {
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px 11px;
}

.warning-area__buttons-panel button {
    height: 34px;
    padding: 0 16px;
    background-color: #484848;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #ffffff;
    border: none;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    margin: 4px;
}
.warning-area__buttons-panel button:hover {
    background: #5d5d5d;
}
.warning-area__buttons-panel__ignore-button {
    /* position: absolute;
    margin-left: 10px; */
}
button.warning-area__buttons-panel__ignore-button:hover {
    background: #b90505;
}

.sb-root {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 1280px;
    /* overflow: hidden; */
}

.sb-left-column {
    width: 100%;
    padding: 24px 8px 0 8px;
    box-sizing: border-box;
    background-color: #383d41;
    /* overflow: hidden; */
}

.sb-right-column {
    width: 100%;
    padding: 24px 8px;
    box-sizing: border-box;
    background-color: #2b3137;
}

.sb-right-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    /*margin: 0 16px;*/
}

.sb-live-hq {
    display: flex;
    flex-direction: row;
    margin-top: -9px;
}

.sb-fader-loader {
    width: 65px;
    height: auto;
    vertical-align: middle;
    margin-right: 5px;
    position: absolute;
    top: calc(50% - 65px / 2);
    left: calc(50% - 65px / 2);
}

#monitor-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.monitor-w {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background: #F00; */
    opacity: 1;
    background-image: url(/static/images/monitor.jpg);
}

#monitor {
    width: 100%;
    height: 100%;
    height: 215px;
}

.sb-monitor-source {
    margin: 5px 0;
    text-align: center;
    cursor: default;
}

.sb-monitor-source .sb-monitor-source-button {
    width: 35%;
    height: 26px;
    font-size: 10px;
    text-transform: initial;
    padding: 0px 18px;
}

.sb-monitor-source a {
    color: #FFF;
    vertical-align: top;
}

.sb-monitor-source .sb-switch {
    background: #AAA !important;
}



.sb-buffer-block, .sb-live, .sb-hq, .sb-abr {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* width: 38px; */
    padding: 0 6px;
    height: 19px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #ffffff;
    cursor: default;
}

.sb-buffer-block {
    margin-right: 2px;
}

.sb-buffer-block a {
    margin-left: 5px;
}

.sb-live {
    background-color: #8d8d8d;
}

.sb-gd {
    background-color: #8d8d8d;
    cursor: pointer;
}

.sb-gd.gd {
    background-color: #5eb763;
}

.sb-live.live {
    background-color: #5eb763;
}

.sb-live.buffering {
    background-color: #ff1c1c;
}

.sb-hq {
    background-color: #ffa93e;
    cursor: pointer;
}

.sb-start-from {
    background-color: #ffa93e;
}

.sb-hq.hq {
    background-color: #7f90ff;
}

.sb-abr {
    background-color: #5eb763;
    cursor: pointer;
}

.sb-hr {
    margin: 0;
    border-color: rgba(255, 255, 255, 0.1);
}

.sb-dot-divider {
    display: inline-block;
    vertical-align: middle;
    width: 2px;
    height: 2px;
    border-radius: 1px;
    background-color: gray;
    margin: 0 5px 0 6px;
}

.sb-dot-divider.green {
    background-color: #5be663;
}

.sb-dot-divider.red {
    background-color: #ff1c1c;
}

.sb-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 0 24px;
}

.sb-back-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    transition: border-radius 150ms;
}

.sb-back-btn:hover {
    border-radius: 0;
}

.sb-title {
    margin: 0 16px 0 24px;
    font-size: 24px;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #ffffff;
    cursor: default;
}

.sb-status {
    margin-bottom: 5px;
    min-width: 51px;
    height: 19px;
    text-align: center;
    font-size: 14px;
    line-height: 19px;
    color: #ffffff;
    cursor: default;
}

.sb-status.online {
    background-color: #5eb763;
}

.sb-status.offline {
    background-color: #ff0000;
}

.sb-status.service {
    background-color: #eee;
    color: #333;
}

.sb-settings {
    position: relative;
    margin-left: auto;
}

.sb-settings-icon {
    opacity: 0.45;
    padding: 4px;
}

.sb-notification {
    position: absolute;
    top: 0;
    right: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #ff1c1c;
}

.sb-left-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 16px 16px;
    box-sizing: border-box;
}

.sb-left-row-left {
    display: flex;
    flex-direction: row;
    align-items: center;
}



.sb-input-bad {
    position: absolute;
    padding: 5px;
    width: 25px;
    height: auto;
    right: 20px;
    top: 12px;
    fill: #F22;
}


.sb-output-owner-label {
    position: absolute;
    top: -15px;
    width: 300px;
    font-size: 11px;
}

.sb-output-owner-label-owner-owner {
    color: rgba(255,255,255,0.5);
}

.sb-output-owner-label-owner-alien {
    color: #F99;
}

.rtmp-repeater-input-url span {
    display: inline-block;
    width: 130px;
    font-size: 14px;
    color: #FFF;
}

.sb-output-rtmp-pull-url-input {
    width: 20vw;
    max-width: 400px;
    padding: 5px 0;

    border: none;
    outline: none;
    background: transparent;

    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    font-family: Roboto, sans-serif;
}
.sb-output-rtmp-pull-url-input:focus {
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
}

@media screen and (max-width: 576px) {
    .sb-output-rtmp-pull-url-input {
        width: 100%;
    }
}


.sb-server,
.sb-input,
.sb-rtmp_server,
.sb-resolution {
    position: relative;
    cursor: pointer;
}

.sb-server.active .sb-server-selection {
    display: block;
}

.sb-input.active .sb-input-selection {
    display: block;
}

.sb-resolution.active .sb-resolution-selection {
    display: block;
}

.sb-resolution .sb-resolution-selection {
    max-height: initial;
}

.sb-left-dropdown-btn {
    opacity: 0.35;
}

.sb-selector {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 220px;
    max-width: 100%;
    height: 42px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 8px 0 16px;
    background-color: #2b3137;
    border: solid 1px #61686d;
    cursor: pointer;
}

.sb-selector:hover {
    cursor: pointer;
    border-color: #888888;
  }

.sb-selector-arrow {
    display: flex;
    flex-direction: row;
    opacity: 0.35;
}

.sb-selector.active .sb-selector-arrow {
    opacity: 1;
}

.sb-selector.active + .sb-selector-selection {
    display: block;
}

.sb-selector-selection {
    width: 320px;
    max-width: 100%;
    background-color: #494f55;
    border: solid 1px #5a6066;
    max-height: 230px;
    overflow: auto;
}

.sb-selector-selection-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sb-server:hover .sb-left-dropdown-btn,
.sb-input:hover .sb-left-dropdown-btn,
.sb-rtmp_server:hover .sb-left-dropdown-btn,
.sb-resolution:hover .sb-left-dropdown-btn {
    opacity: 1;
}

.sb-selector-selection,
.sb-server-selection,
.sb-input-selection {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
    background-color: #494f55;
    border: solid 1px #5a6066;
    box-sizing: border-box;
    z-index: 10;
}

.sb-selector-selection-item,
.sb-server-selection-server,
.sb-input-selection-input {
    display: flex;
    flex-direction: row;
    cursor: pointer;
}

.sb-selector-selection-item:hover,
.sb-server-selection-server:hover,
.sb-input-selection-input:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sb-selector-selection-checkmark,
.sb-server-selection-checkmark,
.sb-input-selection-checkmark {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: center;
    width: 56px;
    padding: 16px;
    box-sizing: border-box;
}

.sb-selector-selection-item-data,
.sb-server-selection-server-data,
.sb-input-selection-input-data {
    padding: 16px 24px 16px 0;
}

.sb-list-divider {
    height: 1px;
    opacity: 0.6;
    background-color: rgba(255, 255, 255, 0.1);
}

.sb-list-divider-selector,
.sb-list-divider-servers,
.sb-list-divider-inputs {
    margin-left: 16px;
}

.sb-selector-seleciton-settings.white-045-text,
.sb-server-selection-settings.white-045-text,
.sb-input-selection-settings.white-045-text {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 12px 0;
    text-transform: uppercase;
    cursor: pointer;
}

.sb-input-samplerate-warn {
    margin: 0;
    color: #ffa900;
}

.sb-monitor {
    width: 100%;
    margin-top: 10px;
}

.sb-record {
    position: relative;
    margin-left: 0;
}

.sb-record .sb-left-row-left {
    justify-content: space-between;
    width: 100%;
}

.sb-record-switch-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.sb-record-switch {
    display: flex;
    flex-direction: row;
    margin-right: 16px;
}

.sb-left-icon {
    margin-right: 20px;
}

.sb-left-text {
    font-size: 15px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.8);
}

.sb-record-text {
    color: #ffffff;
}

.sb-left-status {
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.43;
    letter-spacing: normal;
}

.sb-left-status.green {
    color: #5be663;
}

.sb-left-status.red {
    color: #ff1c1c;
}


.sb-rtmp-server-type-label {
    color: rgba(255,255,255,0.6);
    font-size: 14px;
}

.sb-switch {
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 18px;
    width: 30px;
    position: relative;
    border-radius: 16px;
    cursor: pointer;
    outline: 0;
    z-index: 0;
    margin: 0;
    padding: 0;
    border: none;
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-transition-duration: 600ms;
    -moz-transition-duration: 600ms;
    -o-transition-duration: 600ms;
    transition-duration: 600ms;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

.sb-icon-streaming {
    color: #46ee62!important;
}

.sb-switch-streaming {
    background-image: -webkit-linear-gradient(-180deg, #4cd964 0%, #4dd865 100%);
    background-image: -moz-linear-gradient(-180deg, #4cd964 0%, #4dd865 100%);
    background-image: -o-linear-gradient(-180deg, #4cd964 0%, #4dd865 100%);
    background-image: linear-gradient(-180deg, #4cd964 0%, #4dd865 100%);
}

.sb-switch:checked {
    background-image: -webkit-linear-gradient(-180deg, #4cd964 0%, #4dd865 100%);
    background-image: -moz-linear-gradient(-180deg, #4cd964 0%, #4dd865 100%);
    background-image: -o-linear-gradient(-180deg, #4cd964 0%, #4dd865 100%);
    background-image: linear-gradient(-180deg, #4cd964 0%, #4dd865 100%);
}

.sb-switch-stream:checked {
    background-image: -webkit-linear-gradient(-180deg, #b64cd9 0%, #b64cd9 100%);
    background-image: -moz-linear-gradient(-180deg, #b64cd9 0%, #b64cd9 100%);
    background-image: -o-linear-gradient(-180deg, #b64cd9 0%, #b64cd9 100%);
    background-image: linear-gradient(-180deg, #b64cd9 0%, #b64cd9 100%);
}

/* .sb-stream.streaming .sb-switch:checked {
    background-image: -webkit-linear-gradient(-180deg, #4cd964 0%, #4dd865 100%) !important;
    background-image: -moz-linear-gradient(-180deg, #4cd964 0%, #4dd865 100%) !important;
    background-image: -o-linear-gradient(-180deg, #4cd964 0%, #4dd865 100%) !important;
    background-image: linear-gradient(-180deg, #4cd964 0%, #4dd865 100%) !important;
} */

.sb-switch::after {
    box-sizing: border-box;
    height: 14px;
    width: 14px;
    content: ' ';
    position: absolute;
    border-radius: 50%;
    background: white;
    z-index: 2;
    top: 2px;
    left: 2px;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25), 0px 4px 11px 0px rgba(0, 0, 0, 0.08), -1px 3px 3px 0px rgba(0, 0, 0, 0.14);
    -webkit-transition: -webkit-transform 300ms, width 280ms;
    -moz-transition: -moz-transform 300ms, width 280ms;
    -o-transition: -o-transform 300ms, width 280ms;
    transition: transform 300ms, width 280ms;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2);
    -moz-transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2);
    -o-transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2);
    transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2);
}

.sb-switch:checked::after {
    -webkit-transform: translate3d(16px, 0, 0);
    -moz-transform: translate3d(16px, 0, 0);
    -ms-transform: translate3d(16px, 0, 0);
    -o-transform: translate3d(16px, 0, 0);
    transform: translate3d(16px, 0, 0);
    right: 18px;
    left: inherit;
}

.sb-record-right {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.sb-record-status {
    width: 10px;
    height: 10px;
    margin-right: 12px;
    border-radius: 50%;
    background-color: #ff0000;
}

.sb-record-time {
    font-size: 14px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.8);
}

.sb-buffer {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 0;
    flex-wrap: wrap;

    overflow: hidden;
}

.sb-buffer-title {
    width: 130px;
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    cursor: default;
}

.sb-buffer-container {
    position: relative;
    width: 100%;
    margin: 0;
    order: 1;
}

.sb-buffer-background {
    height: 5px;
    border-radius: 2.5px;
    background-color: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.sb-buffer-buffer-overlay {
    background-color: #5eda87;
    position: relative;
    height: 100%;
    transform: translate(-100%, 0);
    width: 20%;
    left: 100%;
}

.sb-buffer-live-overlay {
    background-color: #fbce4c;
    position: relative;
    height: 100%;
    transform: translate(-100%, -100%);
    width: 10%;
    left: 100%;
}

.sb-buffer-marks, .sb-buffer-times {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.sb-buffer-marks {
    z-index: 2;
}

.sb-buffer-mark {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    transform: translate(-50%, 0);
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
}

.sb-buffer-mark::after {
    position: absolute;
    width: 1px;
    height: 26px;
    content: "";
    left: 50%;
}

.sb-buffer-mark.live {
    left: 90%;
    top: -42px;
    width: 31px;
    height: 16px;
    background-color: #ff0000;
}

.sb-buffer-mark.live::after {
    background-color: #ff0000;
    top: 100%;
}

.sb-buffer-mark.buffer, .sb-buffer-mark.max-buffer {
    top: 31px;
    height: 16px;
    background-color: #4e5256;
}

.sb-buffer-mark.buffer::after, .sb-buffer-mark.max-buffer::after {
    bottom: 100%;
    background-color: #4e5256;
}

.sb-buffer-mark.buffer {
    left: 80%;
    width: 44px;
}

.sb-buffer-mark.max-buffer {
    left: 15%;
    width: 74px;
}

.sb-buffer-times {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    top: -27px;
    height: 15px;
    font-size: 13px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.35);
}

.sb-buffer-right-times {
    position: absolute;
    display: flex;
    flex-direction: row;
    left: 0;
    right: 0;
    top: 0;
}

.sb-buffer-right-time {
    position: absolute;
    top: 0;
}

.sb-buffer-right-time.time-1 {
    right: 60%;
}

.sb-buffer-right-time.time-2 {
    right: 50%;
}

.sb-buffer-right-time.time-3 {
    right: 40%;
}

.sb-buffer-right-time.time-4 {
    right: 30%;
}

.sb-buffer-right-time.time-5 {
    right: 20%;
}

.sb-buffer-right-time.time-6 {
    right: 10%;
}

.sb-buffer-right-time.time-7 {
    right: 0;
}

.sb-buffer-right-time.time-2, .sb-buffer-right-time.time-4, .sb-buffer-right-time.time-6 {
    display: none;
}

.sb-buffer-settings {
    margin-left: auto;
    opacity: 0.35;
}
.sb-buffer-settings:hover {
    opacity: 1;
}

.sb-buffer-total {
    text-align: right;
    padding-right: 10px;
    margin: 0px -24px 0px 0px;
    width: 86px;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.8);
}

.sb-network {

}

.sb-network-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.sb-network-title {
    width: 130px;
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    cursor: default;
}

.sb-network-total-speed, .sb-network-interface-speed {
    font-size: 15px;
    font-weight: normal;
    color: rgba(255, 255, 255, 1);
}

.sb-network-interface-speed {
    position: absolute;
    bottom: 7px;
}

.sb-network-interface-title {
    font-size: 16px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 2px;
    text-transform: uppercase;
    font-weight: 300;
}

.sb-network-interface.withCarrier .sb-network-interface-title {
    font-size: 12px;
    font-weight: normal;
}

.sb-network-interface-carrier {
    font-weight: normal;
    color: rgba(255, 255, 255, 0.60);
    margin-bottom: 20px;

    font-size: 8pt;
    max-height: 26px;
    overflow: hidden;
    word-break: keep-all;
}

.sb-network-total-speed {
    text-align: right;
    padding-right: 10px;
    margin: 0px -24px 0px 0px;
    flex-shrink: 0;
    width: 86px;
}

.sb-network-total-background, .sb-network-total-overlay {
    height: 6px;
}

.sb-network-total-background {
    position: relative;
    width: 100%;
    margin: 16px 0 8px 0;
    border-radius: 21px;
    background-color: rgba(255, 255, 255, 0.2);
    /* overflow: hidden; */
    order: 1;
}

.sb-network-settings {
    margin-left: auto;
    opacity: 0.35;
}
.sb-network-settings:hover {
    opacity: 1;
}

.sb-network-total-overlay {
    position: relative;
    width: 0%; /* dynamic width based on speed */
    max-width: 100%;
    height: 100%;
    background-color: #7f90ff;
    border-radius: 21px;
    transition: width ease 2s;
}

.sb-network-total-overlay-bandwidth {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; /* dynamic width based on bandwidth */
    max-width: 100%;
    height: 100%;
    background-color: rgba(213, 219, 255, 0.25);
    border-radius: 21px;
    transition: width ease 2s;
}

.sb-network-bandwidth-value {
    margin: 0 -11px 0 0;
    color: #aaa;
    font-size: 12px;
    text-align: right;
}

.sb-network-master {
    margin: 0px 4px 0 -2px;
    border-radius: 50%;
    background-color: #7f90ff;
    color: #eee;
    font-size: 7pt;
    width: 13px;
    float: left;
    height: 12px;
    text-align: center;
    padding: 1px 0 0 0px;
}

.sb-network-interfaces {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.sb-network-interface {
    position: relative;
    flex-shrink: 0;
    min-width: 92px;
    min-height: 64px;
    box-sizing: border-box;
    width: 102px;
    margin: 14px 0;
    padding: 7px 10px;
    border: 1px solid #383d41;
}

.sb-network-interface:hover {
    background: #383d41;
    cursor: pointer;
}

.sb-network-interface.up {
    border-color: #7f90ff;
}
.sb-network-interface.lan {
    border-color: #948331;
}
.sb-network-interface.carrier {
    border-color: rgba(255,255,255,0.5);
}

.sb-interface-bad {
    position: absolute;
    padding: 5px;
    width: 15px;
    height: auto;
    right: 5px;
    top: 0px;
    fill: #F77;
}

.sb-interface-bad path {
    fill: #F77;
}

.sb-interface-bad.yellowFill path {
    fill: #ffd077;
}

a.tooltip {
    position: absolute;
    width: 200px;
    padding: 2px 4px;
    
    text-transform: none;
    text-align: left;
    font-size: 13px;
    color: #FFF;
    background: #2b3137;
    border: 1px solid #555;
    border-radius: 5px;
    z-index: 99999;
}

.sb-streams-left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.sb-streams-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin: 34px 0 22px 0;
}

.sb-streams-header .sb-dot-divider {
    margin: 0 16px;
}

.sb-streams-title {
    transform: translate(0, -2px);
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    cursor: default;
}

.sb-stream-audio-channel span {
    font-weight: bold;
    color: yellow;
    font-size: 8pt;
}

.sb-start-all-btn, .sb-stop-all-btn, .sb-add-output, .sb-add-rtmp-output {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-align: right;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
}

.sb-start-all-btn:hover, .sb-stop-all-btn:hover, .sb-add-output:hover, .sb-add-rtmp-output:hover {
    color: #FFF;
    cursor: pointer
}

.sb-add-output:hover .sb-add-output-icon {
    opacity: 1.0;
}

.sb-add-rtmp-output:hover .sb-add-output-icon {
    opacity: 1.0;
}

.sb-add-output, .sb-add-rtmp-output {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.sb-add-output-icon {
    margin-right: 10px;
    transform: translate(0, 2px);
    opacity: 0.45;
}

.sb-add-output-text {

}

.sb-stream {
    position: relative;

    background-color: #383d41;
    margin: 1px 0;

    padding: 10px 15px;
}

.sb-stream:hover {
    background: #4a5055;
}

.sb-stream.starting {
    background: repeating-linear-gradient(-60deg, #383d41, #383d41 20px, rgba(255, 255, 255, 0.075) 20px, rgba(255, 255, 255, 0.075) 35px);

    animation-name: startinganimation;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.sb-stream.streaming {
    background: repeating-linear-gradient(-60deg, #333c43, #34436a 20px, rgba(255, 255, 255, 0.075) 20px, rgba(255, 255, 255, 0.075) 35px);
    animation-name: startinganimation;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.sb-stream.streaming:hover {
    /* background: repeating-linear-gradient(-60deg, #333c43, #34436a 20px, #3e4144 20px, #3e4144 35px) */
    box-shadow: 0px 0px 190px -30px #000 inset;
}

@keyframes startinganimation {
    from {
        background-position-x: 0px;
    }
    to {
        background-position-x: 1000px;
    }
}

.sb-stream-left {
    position: relative;
    display: flex;
    flex-direction: row;
}

.sb-stream-format-label {
  position: absolute;
  left: 0;
  top: 45px;
  width: 58px;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  cursor: default;
}

.sb-stream-state {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 8px;
    font-size: 13px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.65);
}

.sb-stream-rtmp-server-automode {
    margin-right: 2px;
}

.sb-stream-rtmp-server-automode span,
.sb-stream-rtmp-server span {
    font-weight: 500;
    border: 1px solid;
    border-radius: 2px;
    padding: 2px;
    color: #FFF;
}

.sb-stream-state .sb-dot-divider {
    margin: 0 10px;
}

.sb-stream-icon {
    position: relative;
    width: 88px;
    height: 88px;
    color: rgba(255, 255, 255, 0.75);
    
    width: 58px;
    height: 68px;
    padding: 0 15px 0px 0px;
}

.sb-stream-icon img {
    widtH: 100%;
    height: 100%;
}

.sb-stream-icon i {
    /*color: rgba(255, 255, 255, 0.75);*/
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    padding: 30% 0;
    box-sizing: border-box;
}

i.sb-stream-cloud {
    position: absolute;
    box-sizing: border-box;
    padding: 2px;
    height: auto;
    width: auto;
    bottom: 10px;
    right: 15px;

    color: rgba(255, 255, 255, 0.5490196078431373);
    
    /* background: #383d41;
    border-radius: 100%;
    box-shadow: 0px 0px 2px 2px #383d41; */
}
.sb-stream:hover i.sb-stream-cloud {
    /* background: #4a5055;
    box-shadow: 0px 0px 2px 2px #4a5055; */
}

.sb-header-account a {
    cursor: pointer;
}

.sb-stream-data {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sb-stream-title {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.33;
    color: #ffffff;
    cursor: default;
    
    max-width: 475px;
    /* max-height: 35px; */
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
}

.sb-stream-title-copy:hover {
    text-decoration: underline;
    cursor: pointer;
}


.sb-stream-output-id {
    display: inline-block;
    margin-right: 7px;
    position: relative;
    font-size: 11px;
    color: rgba(255, 255, 255, 1);

    opacity: 0.6;
}

.sb-stream-owner {
    display: inline-block;
    position: relative;
    font-size: 11px;
    color: rgba(255, 255, 255, 1);
    cursor: pointer;

    opacity: 0.6;
}
.sb-stream-owner-false {
    color: #ff5757;
    opacity: 0.8;
}

.sb-stream-owner:hover {
    opacity: 1;
    text-decoration: underline;
}

.sb-stream-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 88px;
    padding-bottom: 16px;
    justify-content: space-between;
}

.sb-stream-restreamer-server-selecter {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.7);
}

.sb-stream-status {
    min-width: 64px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.43;
    color: rgba(255, 255, 255, 0.35);
    cursor: default;
}

.sb-stream-status.streaming {
    color: #5be663;
}

.sb-stream-status.error {
    color: #ff1c1c;
}

.sb-stream-status.yellow {
    color: #fff01c;
}

.sb-stream-status.starting {
    color: rgba(255, 255, 255, 0.8);
}

.sb-stream-status-switch {
    height: 26px;
    margin: 0 20px 0 22px;
}

.sb-stream-status-switch .sb-switch {
    width: 44px;
    height: 26px;
    border-radius: 15px;
}

.sb-stream-status-switch .sb-switch::after {
    width: 20px;
    height: 20px;
    top: 3px;
}

.sb-stream-switch-large.sb-switch {
    width: 44px;
    height: 26px;
    border-radius: 15px;
}

.sb-stream-switch-large.sb-switch::after {
    width: 20px;
    height: 20px;
    top: 3px;
}

.sb-stream-settings {
    opacity: 0.35;
}
.sb-stream-settings:hover {
    opacity: 1;
}

[src="/static/images/tune.svg"]:hover {
    cursor: pointer;
    opacity: 1.0;
    background-color: #383d41;
}

.noUi-horizontal {
    height: 6px !important;
}

.noUi-target {
    background: #888888 !important;
    border-radius: 40px !important;
    border: none !important;
    box-shadow: none !important;
}

.noUi-horizontal .noUi-handle {
    border-radius: 50% !important;
    background-color: #ffffff !important;
    box-shadow: none !important;

    transform: translateX(-7px);

    width: 20px !important;
    height: 20px !important;
    top: -8px !important;
}

.noUi-horizontal .noUi-handle:before,
.noUi-horizontal .noUi-handle:after {
    display: none !important;
}

.noUi-marker-horizontal.noUi-marker {
    height: 0px !important;
}

.noUi-marker-horizontal.noUi-marker-large {
    height: 9px !important;
}

.noUi-value {
    margin-top: 0px !important;
}

.noUi-pips-horizontal {
    padding: 0 !important;
}

.sb-buffer-container .video-buffer {
    padding: 4px 0;
}

.video-stats {
    position: relative;
    width: 100%;
    padding: 0 0px 24px 0;
    box-sizing: border-box;
}

.stats-wrap {
    padding: 56px 0 29px;
    width: 100%;
    box-sizing: border-box;
}

.stats {
    position: relative;
    height: 0px;
    box-sizing: border-box;
    padding: 3px 0;
    /* border: 1px solid slategray; */
    border-radius: 21px;
    background: #555a5f;
}

.data, .no-data {
    position: absolute;
    top: 0;
    bottom: 0;
    transition: width ease 2s;
}

.data {
    width: 40px;
    background: #5eda87;
    border-right: 2px solid #5eda87;
}

.no-data {
    width: 60px;
    background: #fbce4c;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
}

.no-data.danger {
    background: red;
}

.data-indicator, .live-slider, .prebuffer-slider, .buffer-slider {
    position: absolute;
    top: -27px;
    bottom: 7px;
    width: 0;
    border: 0.5px solid;
    transition: left ease 2s, right ease 2s;
}

.data-indicator.live-slider.ui-draggable-dragging, .live-slider.live-slider.ui-draggable-dragging, .prebuffer-slider.live-slider.ui-draggable-dragging, .buffer-slider.live-slider.ui-draggable-dragging {
    transition: none;
}

.now {
    position: absolute;
    top: -8px;
    right: -1px;
    bottom: -16px;
    width: 2px;
    /* background: black; */
}

.live-slider::after,
.data-indicator::after,
.buffer-slider::after,
.prebuffer-slider::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 4px 0 4px;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.live-slider::after {
    border-color: red transparent transparent transparent;
}

.data-indicator::after {
    border-color: yellowgreen transparent transparent transparent;
}

.buffer-slider::after {
    border-color: blue transparent transparent transparent;
}

.prebuffer-slider::after {
    border-color: green transparent transparent transparent;
}

.live-slider:hover::after,
.data-indicator:hover::after,
.prebuffer-slider:hover::after,
.buffer-slider:hover::after,
.live-slider.ui-draggable-dragging::after,
.data-indicator.ui-draggable-dragging::after,
.prebuffer-slider.ui-draggable-dragging::after,
.buffer-slider.ui-draggable-dragging::after {
    opacity: 1;
}

.data-indicator {
    border-color: yellowgreen;
}

.live-slider {
    border-color: red;
}

.buffer-slider {
    border-style: dashed;
    border-color: blue;
}

.prebuffer-slider {
    border-color: green;
    top: 7px;
    bottom: -20px;
}

.data-text, .live-text, .prebuffer-text, .buffer-text {
    position: absolute;
    left: 0;
    top: 0px;
    transform: translate(-50%, -100%);
    user-select: none;
    opacity: 0;
}

.live-text {
cursor: move;
}

.data-indicator:hover .data-text,
.prebuffer-slider:hover .prebuffer-text,
.buffer-slider:hover .buffer-text,
.data-indicator.ui-draggable-dragging .data-text,
.prebuffer-slider.ui-draggable-dragging .prebuffer-text,
.buffer-slider.ui-draggable-dragging .buffer-text {
    opacity: 1;
}

.live-text {
    opacity: 1;
    color: #FFF;
    background: #F00;
    padding: 2px 6px;
    font-size: 12px;
}

.data-text {
    color: yellowgreen;
    color: #FFF;
    opacity: 1;
    padding: 2px 6px;
    width: 45px;
    font-size: 12px;
    background-color: #4e5256;
}

.prebuffer-text {
    top: 35px;
    color: #FFF;
    opacity: 1;
    padding: 2px 6px;
    font-size: 12px;
    background-color: #4e5256;
}

.buffer-text {
    color: blue;
}

.draggable-area {
    position: absolute;
    top: -8px;
    left: 0;
    bottom: -8px;
    width: 16px;
    transform: translate(-50%, 0);
    background: transparent;
}

.time-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 4px;
    background: white;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
}

.data-indicator:hover .time-overlay,
.live-slider:hover .time-overlay,
.buffer-slider:hover .time-overlay,
.prebuffer-slider:hover .time-overlay,
.live-slider.ui-draggable-dragging .time-overlay,
.buffer-slider.ui-draggable-dragging .time-overlay,
.prebuffer-slider.ui-draggable-dragging .time-overlay {
    opacity: 1;
}

.data-indicator .time-overlay {
    color: yellowgreen;
}

.live-slider .time-overlay {
    color: red;
}

.buffer-slider .time-overlay {
    color: blue;
}

.prebuffer-slider .time-overlay {
    color: green;
}

.absolute-timeline, .delta-timeline {
    position: relative;
}

.absolute-timeline {

}

.delta-timeline {
    top: 35px;
}

.absolute-timeline .tick, .delta-timeline .tick {
    position: absolute;
    top: 0;
    transform: translate(50%, 0);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
}

.absolute-timeline .tick {
    font-size: 8px;
    background: #FFF;
    color: #333;
    border-radius: 2px;
    padding: 1px;
}

.absolute-timeline .tick::before, .delta-timeline .tick::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    width: 1px;
    height: 10px;
    /* background: gray; */
}

.absolute-timeline .tick::before {
    top: 12px;
    height: 20px;
    background: gray;
}

.absolute-timeline .tick:first-child::before,
.delta-timeline .tick:first-child::before {
    display: none;
}

.dvr-controls[data-dvr-controls] {
    display: flex !important;
    align-items: center;
    height: 100%;
}

.media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {
    margin-left: 12px !important;
}

@media screen and (min-width: 568px) {

    .sb-buffer {
        flex-wrap: initial;
    }

    .sb-buffer-container {
        margin: 0 18px 0 25px;
        order: initial;
    }

    .sb-buffer-settings {
        margin-left: initial;
    }

    .absolute-timeline .tick {
        font-size: 10px;
    }

    .delta-timeline .tick {
        font-size: 12px;
    }

    .sb-network-header {
        flex-wrap: initial;
    }

    .sb-network-total-background {
        margin: 0 16px 0 26px;
        order: initial;
    }

    .sb-network-settings {
        margin-left: initial;
    }

}

.network-graph {
    position: relative;
    font: 10px Roboto, sans-serif;
    /* background: #fff; */
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

/*.bar {*/
/*fill: lightskyblue;*/
/*}*/

.bar rect:hover {
    fill: orangered;
}

.x.axis path, .x.axis line {
    display: none;
}

@media screen and (min-width: 576px) {
    .sb-buffer-right-time.time-2, .sb-buffer-right-time.time-4, .sb-buffer-right-time.time-6 {
        display: block;
    }

    .sb-network-total-background {
        /* max-width: 210px; */
    }

    .sb-streams-header {
        flex-direction: row;
        justify-content: space-between;
    }

    .sb-stream {
        max-width: 768px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .sb-stream-right {
        margin-left: 0;
        margin-right: 5px;
        padding-bottom: 0;
    }
}

@media screen and (min-width: 1024px) {

    html {
        background: none;
    }

    body {
        background: linear-gradient(to right, #383d41 50%, #2b3137 50%);
    }

    .sb-root {
        flex-direction: row;
        min-height: 100%;
    }

    .sb-left-column {
        flex-basis: 448px;
        min-width: 448px;
        padding: 24px 24px 0 40px;
    }

    .sb-right-column {
        padding: 24px 40px 0 24px;
    }

    .sb-input-selection {
        width: 408px;
    }
}

.sb-input-status-backup,
.sb-rtmp_server .sb-input-status {
    color: rgba(255,255,255, 0.8);
}

[hidden] {
    display: none !important;
}
.sb-monitor {
    position: relative;
  }

  .monitor_hevc_warning {
    color: rgba(255,255,255,.3);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    cursor: default;
  }

  .monitor-loader {
    position: absolute;
    width: 100px;
    top: 0;
    left: calc(50% - 115px / 2);
  }
  
.notifications-area {
    position: fixed;
    display: block;
    width: 310px;

    top: 25px;
    left: calc(50% - 310px / 2);

    box-sizing: border-box;
    z-index: 9999999999;
}

.notifications-area .notification-block {
    position: relative;

    margin: 0;
    margin-bottom: 10px;
    padding: 0;

    box-shadow: 0px 0px 60px -15px #000;
    background: #383d41;
    border: 1px solid #b1b1b1;
}

.notifications-area .notification-block p {
    margin: 0;
    padding: 10px 30px 10px 15px;

    color: #FFF;
}
.notifications-area .notification-block a:link,
.notifications-area .notification-block a:visited {
    color: #FFF;
}

.notifications-area .notification-block.action:hover {
    background: #4a5055;
    cursor: pointer;
}

.notification-block .notification-close {
    position: absolute;
    right: 5px;
    top: 6px;
    opacity: 0.5;
    z-index: 100;
}

.notification-block .notification-close:hover {
    opacity: 1.0;
    cursor: pointer;
}

.sb-input-type {
    margin: 0;
}

.sb-input-status,
.sb-input-status-backup {
    margin-top: 3px;
    margin-bottom: -8px;
    font-size: 13px;
    max-width: 100%;
    word-break: break-all;
}
/* .sb-input-status-backup {
    margin-top: 0px;
} */

.sb-input-status-red {
    color: #f22;
}

.sb-input-status.primary.sb-input-status-red,
.sb-input-status-backup.sb-input-status-red {
    color: #ff6262;
}

.sb-output-type {
    margin: 0;
}

.sb-output-status {
    margin-top: 3px;
    margin-bottom: -8px;
    font-size: 13px;
}
.sb-stream-bitrate {
    min-width: 80px;
    text-align: center;
}


.sb-input-input-url,
.sb-input-backup-input-url,
.sb-input-sharedkey,
.sb-input-main-url,
.sb-input-backup-url {
    height: 32px;
    padding: 0 5px;
    box-sizing: border-box;
    background-color: #2b3137;
    border: solid 1px #61686d;
    text-align: left;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.6;
    color: #ffffff;
    width: calc(100% - 135px);
    color: #999;
}

.sb-input-sharedkey:hover {
    /* border-color: #888888; */
}

.rtmp-repeater-input-url,
.rtmp-repeater-backup-input-url {
    margin: 5px 0;
    padding-left: 0px;
}


.rtmp-repeater-backup-input-url span {
    display: inline-block;
    width: 130px;
    font-size: 14px;
    color: #FFF;
}



.s-monitor > .fullscreen {
    position: fixed;
}


.sb-output-audio-label {
    border: 1px solid;
    border-radius: 2px;
    font-size: 10px;
    padding: 1px 4px;
    opacity: 0.5;
    margin: 0px 0px 0px 10px;
    display: inline-block;
}

.sb-stream.streaming .sb-output-audio-label {
    opacity: 1;
}


 /* hide monitor seek bar  */
 .sb-left-column .sb-monitor .bar-container[data-seekbar] {
    display: none !important;
}


.sb-left-column .sb-hr {
    margin: 0 -8px 0 0;
}
@media screen and (min-width: 1024px) {
    .sb-left-column .sb-hr {
      margin: 0 -24px 0 0;
    }
}



.rtmp-repeater-vlc-input-data p {
    display: flex;
}

button.s-size {
  padding: 1px 6px;
  height: auto;
  font-size: 14px;
}

#start_vlc_main,
#start_vlc_backup {
    margin-left: auto;
}

.sb-input-main-url,
.sb-input-backup-url {
    width: 315px;
    margin-left: auto;
}

.rtmp-repeater-vlc-server-title {
    font-size: 17px;
    color: #FFF;
}

.rtmp-repeater-vlc-input-data {
    padding-top: 15px;
}