/****************************************************************/
/* css.css
/****************************************************************/
#cssTbl {
  & dl {
    border: ridge;
    white-space: nowrap;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  & dt {
    font-weight: bold;
  }
  & dt,
  & dd {
    border: inset;
    white-space: nowrap;
    line-height: calc(3em - calc(3px * 2) - calc(4px * 2));
    height: 3em;
    margin: auto;
    padding: 4px;
  }
  & #cssAddBtn,
  & .cssDelBtn {
    display: block;
    height: 100%;
    width: 100%;
    margin: auto;
  }
  & .cssMediaLine {
    border: double;
    border-width: 3px;
    background-color: #F0E68C;
    width: calc(100% - 6px);
  }
  & .cssMediaLine input[type="checkbox"] {
    border-radius: 4px;
    margin: auto;
  }
  @media screen and (max-width:480px) {
    & .cssMediaLine input[type="checkbox"] {
      height: 20px;
      width: 20px;
    }
  }
  & .mediaPull,
  & .logicalPull {
    border-radius: 8px;
    margin: auto;
  }
  & .tagInMediaAddBtn {
    border: outset;
    border-radius: 15px;
    height: 30px;
    width: 30px;
    margin: auto;
  }
  & .tagInMediaDelBtn {
    border: outset;
    border-radius: 15px;
    background-color: red;
    height: 30px;
    width: 30px;
    margin: auto;
  }
  & .mediaLine {
    display: flex;
    margin: auto;
    gap: 8px;
  }
  & .cssTagBox {
    display: grid;
    grid-template-rows: repeat(3, auto);
    background-color: #F0E68C;
  }
  & .cssTag {
    display: grid;
    grid-template-columns: 36px 1fr 8px 50px;
    column-gap: 4px;
  }
  & .cssTagDelBtn {
    grid-column: 1;
    border: outset;
    border-radius: 15px;
    background-color: red;
    height: 30px;
    width: 30px;
    margin: auto;
  }
  & .cssTagName {
    grid-column: 2;
    text-align: center;
    margin: auto;
    padding: 4px;
  }
  & .propertyAddBtn {
    grid-column: 4;
    border: outset;
    height: 30px;
    width: 30px;
    margin: auto;
  }
  & .properties {
    grid-row: 2;
    background-color: transparent;
    height: auto;
    width: calc(100% - 16px);
    padding: 8px;
  }
  & .property {
    display: grid;
    grid-template-columns: 40% 16px 40% 16px auto;
    column-gap: 4px;
    height: auto;
    width: calc(100% - 8px);
    margin: 0;
    padding: 4px;
    overflow: hidden;
  }
  & .propertyName {
    grid-column: 1;
    box-shadow: 1px 1px 2px black;
    margin: auto;
  }
  & .propertyData {
    grid-column: 3;
    box-shadow: 1px 1px 2px black;
    margin: auto;
  }
  & .propertyDelBtn {
    grid-column: 5;
    border: outset;
    border-radius: 15px;
    box-shadow: 1px 1px 2px black;
    background-color: red;
    height: 30px;
    width: 30px;
    margin: auto;
  }
  & .checkableArea {
    display: inline-block;
    height: 100%;
    width: 100%;
  }
  & .mediaif {
    display: inline-block;
    background-color: dimgray;
    width: auto;
    padding: 4px;
  }
}