.articles {
  display: block;
}

.articles .item {
  --margin-left: 30px;
  --border-size: 2px;
  --padding: 5px;
  --border-color: gray;
  display: inline-block;
  margin-left: var(--margin-left);
  position: relative;
  top: 0px;
  left: 0px;
  text-align: left;
  margin-top: 10px;
  border: var(--border-size) solid var(--border-color);
  padding: var(--padding);
  cursor: pointer;
  width: calc(100% - var(--margin-left) - var(--border-size) * 2 - var(--padding) * 2);
  transition: all 0.25s linear;
}

.articles .item.lastClicked {
  outline: 5px solid black;
}

.articles a.item {
  color: black;
}

.articles a:link.item, .articles a:visited.item {
  color: black;
  text-decoration: none;
}

.articles .item.red, .item.redgreen, .item.redgray {
  --border-color: red;
}

.articles .item.green, .item.greenred, .item.greengray {
  --border-color: mediumseagreen;
}

.articles .item.redgreen::before{
  background-image: linear-gradient(-45deg, mediumseagreen 50%, red 50%);
}
.articles .item.greenred::before {
  background-image: linear-gradient(-45deg, red 50%, mediumseagreen 50%);
}
.articles .item.greengray::before{
  background-image: linear-gradient(-45deg, gray 50%, mediumseagreen 50%);
}
.articles .item.redgray::before{
  background-image: linear-gradient(-45deg, gray 50%, red 50%);
}
.articles .item.yellow {
  --border-color: yellow;
}

.articles .item.blue {
  --border-color: blue;
}

.articles .item.orange {
  --border-color: orange;
}

.articles .item.purple {
  --border-color: purple;
}

.articles:not(.dontmove) .item:hover {
    left: 10px;
}

.articles .item::before {
    background-color: var(--border-color);
}
.articles .item::before {
    position: absolute;
    top: -2px;
    left: -30px;
    width: 20px;
    content: '';
    border: 2px solid var(--border-color);
    height: 100%;
}

.articles .item.lastClicked::before {
  outline: 5px solid black;
}

.articles .item .title {
  display: block;
  font-family: 'Acme';
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-overflow: " [..]";
}

.articles .item .description {
  display: block;
}

.articles .item .description  .signature {
  /*font-family: 'Balthazar';*/
  font: 16px serif;  
  display: block;
}

.articles .item .save,
.articles .item .pin,
.articles .item .edit,
.articles .item .delete {
  display: inline-block;
  font-size:20px;
}

.articles .item .pin.checkbox {
  --outline-color: black;
  display: inline-block;
  width: 28px;
  height: 29px;
  border: 3px solid var(--outline-color);
  position: relative;
  margin-top: 10px;
  background: white;
}

.articles .item .save:before,
.articles .item .pin:not(.checkbox):before,
.articles .item .edit:before,
.articles .item .delete:before {
  content: '\1F4BE';
  display: inline-block;
  cursor: pointer;
  position: relative;
  left: 0px;
  top:0px;
  font-size:20px;
  width: 28px;
  vertical-align: super;
  transition: all 0.25s linear;
}

.articles .item .save:before {
  display: none;
}

.articles .item .save:focus,
.articles .item .pin:focus,
.articles .item .edit:focus,
.articles .item .delete:focus {
  outline: 1px dotted black;
}

.articles .item .save:hover:before,
.articles .item .pin:not(.checkbox):hover:before,
.articles .item .edit:hover:before,
.articles .item .delete:hover:before {
  left: 3px;
  top:3px;
}

.articles .item .pin.checkbox:hover {
  --outline-color: #3344DD;
}

.articles .item .pin.checkbox:active {
  background: #EEEEEE;
}

.articles .item.saved .save:before {
  content: '\2714';
  color: mediumseagreen;
}

.articles .item .pin:not(.checkbox):before {
/*  content: '\1F4CC';
  content: '\2B50'; */
  content: '';
  width: 23px;
  height: 22px;
  background-image: url("../img/star_unselected.png");
}

.articles .item.pinned .pin:not(.checkbox):before {
/*  content: '\1F4CD';
  content: '\1F31F';
  content: '\2728';
  content: '\2714';*/
  content: '';
  background-image: url("../img/star.png");
}

.articles .item.pinned .pin.checkbox:before,
.articles .item.pinned .pin.checkbox:after {
  content : '';
  position: absolute;
  display: block;
  width: 8px;
  left: 5px;
  top: 8px;
  height: 75%;
  background: #334477;
  background: mediumseagreen;
  transform: rotate(-35deg);
  border-radius: 25px;
}

.articles .item.pinned .pin.checkbox:after {
  left: 15px;
  top: 0px;
  height: 100%;
  transform: rotate(25deg);
}

.articles .item .delete:before {
  content: '\274C';
}

.articles .item .edit:before {
  content: '\1F4DD';
}

.articles .attention {
  --type: double;
  display: inline-block;
  border-bottom: 3px var(--type) var(--attention-color);
}

.articles .attention.dotted {
  --type: dotted;
}

.articles .attention.red {
  --attention-color: red;
}

.articles .attention.green {
  --attention-color: mediumseagreen;
}

.articles .attention.yellow {
  --attention-color: yellow;
}

.articles .attention.orange {
  --attention-color: orange;
}

.bundle {
  display: inline-block;
  position: relative;
  margin-left: 35px;
  margin-bottom:12px;
  min-height: 120px;
  border-bottom: 3px dashed gray;
  width: calc(100% - 35px);
}

.bundle .onderwerpen,
.bundle .stemmingen {
  display: inline-block;
}

.bundle .stemmingen {
  margin-bottom: 15px;
  margin-right: 5px;
  width: 100%;
}

.bundle .onderwerpen {
  width: calc(100% - 35px);
}

.bundle .onderwerp:before {
  content: '\279E';
}

.bundle .onderwerp {
  display: inline-block;
  font-family: 'Kameron';
  font-weight: 400;
  font-size: 20px;
  margin: 5px;
  width: 100%;
}

.bundle a.onderwerp:link, .bundle a.onderwerp:visited {
  color: black;
}

.bundle .onderwerp.lastClicked {
  outline: 5px solid black;
}

.bundle .onderwerp:hover,
.bundle .onderwerp:active {
  outline: 1px solid black;
}

.bundle .date {
  writing-mode: vertical-lr;
  width: 25px;
  border: 1px solid black;
  height: 100%;
  position: absolute;
  text-align: center;
  left: -35px;
  margin-top: 9px;
}