body {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "width" 100;
  font-size: 18px !important; 
  background: linear-gradient(to bottom right, #dddddd, #aaaaaa);
  background-attachment: fixed; 
}

@media (min-width: 768px) {
  html {
    xfont-size: 16px;
    font-size: 16px;
  }
}

.bp-bgimage {
    background-attachment: fixed; 
    background-position:  center;
    background-size: cover;
}

.bpcomp-listitem {
  scale: 1;
  opacity: 0.75;
}

.bpcomp-listitem:hover {
  scale: 1.05;
  opacity: 1;
  color: #eeeeee;
}

.bp-component {
  border: solid 2px red;
  cursor: pointer;
  padding-top: 1rem;
}

.bp-component:hover {
  border: solid 2px #aaaa00;
}

.wireframe {
  padding: 1rem;
  border: dashed 2px #ff0000;
}

.bp-menuitem {
  font-size: 75%;
  text-transform: uppercase;
}

.component-anchor {
  position: absolute;
  z-index: 500;
  top: 1rem;
  left: 1rem;
  background-color: rgba(255, 255, 255, 0.5);
}

.component-body {
  border: dotted 1px yellow;
}

.component-icon {
  background-color: rgba(21, 21, 21, 0.25);
}

.debug {
  color: red;
}

.bp-tree-item {
  background: linear-gradient(#111111, #000000);
}

.bp-designer-icon {
  width: 12rem;
  height: 7rem;
  overflow : hidden;
  background-color : #000067;
  color : #ffffff;
  display: inline-block;
  border-radius : 0.5rem;
  padding : 1rem;
  margin : 1rem;
  text-align:center;
}

.bp-designer-block {
  min-height: 10rem;
}

.writing-paper {
  background-color: #fffdf5;
  /* slightly off-white like paper */
  background-image:
    linear-gradient(to bottom, #cce5ff 1px, transparent 1px),
    /* horizontal blue lines */
    linear-gradient(to right, #ccccff 1px, transparent 1px);
  /* red margin line */
  background-size: 100% 24px, 40px 100%;
  /* line spacing and margin spacing */
  background-repeat: repeat;
  border: solid 1px #ccccff;
}

.accordion-button:not(.collapsed) {
  /*background-color: #e9f5ff; */
  background-color: #dddddd;
  color: #111111;
  border: none;
}

/* Font size */
.fs-bigger {
  font-size: 125%;
}

.bp-td {
  max-width:350px;
}

.bp-mw-edit {
  max-width: 650px;
}

.text-shadow {
  text-shadow: 1px 1px 1px #111111;
}

/* Standard bands */
.bg-container1 {
  background-color :#dfdfdf;
}

.bg-container2 {
  background-color :#ffffff;
}


.bg-container3 {
  background-color :#f3f3f3;
}

.btn-primary 
{
  background-color: #3333dd;
  text-transform:uppercase;
}