body {
  background-color: #222;
  margin: 0;
  padding: 0;
}

iFrame {
  margin: 0;
  padding: 0;
  border: 0;
}

#mainContent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#contentConfigPanel {
  width: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

#contentConfigPanel>a {
  position: fixed;
  bottom: 8px;
  left: 2px;
  width: 40px;
}

#contentConfigPanel>a>.linkBanner {
  border: 0;
  width: 40px;
  content: url("./banner.png");
}

#contentConfigPanel>div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.config {
  padding: 0;
  width: 40px;
  height: 40px;
  color: #DDDDDD;
  margin: 4px auto;
  border-radius: 4px;
  background-color: #222;
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
}

.config:hover {
  cursor: pointer;
  background-color: #555;
}

#frameCreator {
  left: 48px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
  color: #DDDDDD;
  position: absolute;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: rgba(34, 34, 34, 0.9);
  width: calc(100vw - 48px);
}

#frameCreator>.banner {
  width: 400px;
  height: 100px;
  margin: 40px auto 0 auto;
  background: url("./bannerRot.png");
}

#frameCreator .streamCreateInput {
  margin: 8px 0;
}

#frameCreator .streamCreateInput>input {
  font-size: 18px;
  height: 26px;
  width: 240px;
  border-radius: 4px;
  border: 1px #222 solid;
}

#frameCreator button {
  margin: 20px;
  width: 180px;
  height: 32px;
  font-size: 18px;
}

#frameFeedback {
  left: 48px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
  color: #DDDDDD;
  position: absolute;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: rgba(34, 34, 34, 0.8);
  width: calc(100vw - 48px);
}

#frameFeedback>.banner {
  width: 400px;
  height: 100px;
  margin: 40px auto 0 auto;
  background: url("./bannerRot.png");
}

#frameFeedback .streamCreateInput {
  margin: 8px 0;
}

#frameFeedback .streamCreateInput>input {
  font-size: 18px;
  height: 26px;
  width: 240px;
  border-radius: 4px;
  border: 1px #222 solid;
}

#frameFeedback button {
  margin: 20px;
  width: 180px;
  height: 32px;
  font-size: 18px;
}

.feedbackFrame {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  border-radius: 20px;
  background-color: #222222;
}

#frameContent {
  display: -ms-grid;
  display: grid;
  height: 100vh;
  overflow: hidden;
  width: calc(100vw - 40px);
}

.switchButton {
  background-image: url("./images/small/switch.png");
}

.editButton {
  background-image: url("./images/small/edit.png");
}

.feedbackButton {
  position: fixed;
  bottom: 200px;
  left: 4px;
  background-image: url("./images/small/feedback.png");
}

.i1s2ph {
  background-image: url("./images/small/1s2ph.png");
}

.i1s2pv {
  background-image: url("./images/small/1s2pv.png");
}

.i1s1p {
  background-image: url("./images/small/1s1p.png");
}

.i2p4v {
  background-image: url("./images/small/2p4v.png");
}

.i2p3 {
  background-image: url("./images/small/2p3.png");
}

.i2p4h {
  background-image: url("./images/small/2p4h.png");
}

.i3s4p {
  background-image: url("./images/small/3s4p.png");
}

.i3s4pcr {
  background-image: url("./images/small/3s4pcr.png");
}

.i3s4pnc {
  background-image: url("./images/small/3s4pnc.png");
}

.i4s4pcr {
  background-image: url("./images/small/4s4pcr.png");
}

.i4s4pnc {
  background-image: url("./images/small/4s4pnc.png");
}

.i4s4pcrv {
  background-image: url("./images/small/4s4pcrv.png");
}

.i4s4p {
  background-image: url("./images/small/4s4p.png");
}

.i5s5pcrv {
  background-image: url("./images/small/5s5pcrv.png");
}

.i5s5pnc {
  background-image: url("./images/small/5s5pnc.png");
}