#content {
  position: absolute;
  background-color: #f5f5f7;
  width: 100%;
  /* left: 0; */
  /* width: 100svw; */
  /* min-width: 22rem !important; */

}

#content.big-screen{
  left: 22rem !important;
  width: calc(100svw - 23.15rem);
}

#content.right-side{
  /* width: 1rem !important; */
}

.article-wrapper {
  /* margin-top: 4rem; */
  background-color: #f5f5f7;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.article-wrapper-big-screen {
  /* width: calc(100vw - 27rem); */
  width: 100%;
  position: relative;
}


.fadeout {
  transition: all 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  background: linear-gradient(to right, black 0%, #666 5%, white 100%);
  background: -webkit-linear-gradient(to right, black 0%, #666 5%, white 100%);
  background: -moz-linear-gradient(to right, black 0%, #666 5%, white 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.main-content-block,
.content-block {
  /*     width: 100%; */
  /* max-width: 74svw; */
  /* max-width: calc(100vw - 4rem); */
  background-color: white;
  padding: 1rem;
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
  box-sizing: border-box;
  overflow: hidden;
}

.main-content-block p:has(strong):not(.desc), .content-block p:has(strong):not(.desc) {
  padding-top: 1rem;
}

div.content-block-big-screen {
  /* width: 100%; */
  /* width: calc(100vw - 30rem); */

}



div.main-content-block{
  padding-left: 1rem !important;
}

div.content-block{
  padding-left: 1rem !important;
  border: rgba(88, 121, 156, 0) solid 1px;
}

#content .content-heading h1 {
  margin-left: 1rem;
}


#content .content-body {
  font-size: .9rem;
}

/* .content-body :first-child p{
  padding-top: 1rem;
} */

#content ul {
  list-style-type: "→";
}

#content ul li {
  margin-bottom: 0.3rem;
  padding-left: 0.2rem;
  font-size: .9rem;
}

#content ul li::marker {
  color: #58799c;
  font-weight: bold;
}

#content strong {
  font-weight: bolder;
}

#content a {
  color: #58799c;
}

#content a:hover {
  color: #e0b125;
}

#content h1 {
  font-size: 1.5rem;
  font-weight: normal;
}

.content-block h1,
.main-content-heading-title {
  color: black;
  font-size: 1.34rem;
  text-transform: uppercase;
  min-height: 2rem;
}

#content h2 {
  font-size: 1.3rem;
  color: #58799c;
  font-weight: normal;
}

#content h3 {
  color: black;
  font-size: 1.2rem;
  font-weight: bold;
}

#content p {
  color: black;
  font-size: .9rem;
}

.main-content .heading-title {
  margin-left: 1rem;
}

.main-content-block {
  margin-top: 1.5rem;
}

/* .device-info-popup {
  display: none;
  z-index: 1;
  left: 0;
  top: 0;
  width: 80%;
  overflow: auto;
  background-color: #313c4b;
  border-radius: 0.5rem;
  padding: 0.7rem;
} */

/* .device-info-popup p {
  color: #e0b125 !important;
  font-size: 0.8rem !important;
} */




.device-info-icon {
  cursor: pointer;
  flex: 1;
  float: right;
  width: 1.5rem;
  height: 1.5rem;
}

.conditional-block, .page-device-info {

  transition-duration: 200ms;
  outline: rgba(88, 121, 156, 0) solid 1px;
  outline-offset: .5rem;
  /* padding: 1rem; */
  /* border-radius: .5rem; */
  outline-width: rgba(88, 121, 156, 0);
  transition: all 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);

}

.conditional-block, .default-block {
  margin-top: - .5rem;
}

.conditional-block.debug {
  background-color: rgb(199, 223, 240);
}

.default-block.debug {
  background-color:  rgb(204, 238, 188);
}

.conditional-block.debug > .block-device-info p{
  	opacity: 1;
}

.block-device-info.error > p{
  color: red;
  font-weight : bold;
}


#content .page-device-info > p {
  color: rgba(88, 121, 156, 0);
  /* transform: translateY(-2.5rem); */
  transform: translate(0, -2rem);
  margin-bottom: -2rem;
  margin-left: 0;
}

#content .page-device-info p.active {
  color: rgba(88, 121, 156, 1);
  transition: all 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

 .conditional-block.active, .content-block.active {
  transition: all 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  border-color: rgba(88, 121, 156, 1);
  outline-color: rgba(88, 121, 156, 1);
}

.block-device-info {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.block-device-info p{
  flex: 999;
  font-size: .7rem;
  /* transform: translate(0, -1rem); */
  color: rgba(88, 121, 156, 1);
  margin: 0;
  margin-bottom: -.5rem;
  padding:0;
  font-style: italic;
  opacity: 0;
  transition: all 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.block-device-info p.active{
  opacity: 1;
  transition: all 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* #content {
  width: calc(100% - 22rem);
} */