.colspanel {
  /*border-radius: 3px;*/
  width:350px;
  border:1px solid #D3D3D3;
  background: white;
  color: black;
  overflow: hidden;
}

.colspanel-header {
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.colspanel-header-content {
  padding: 10px;
  overflow: hidden;
  position: relative;
  z-index: 9;
}

.colspanel-header-content-label {
  color: #ccc;
}

.colspanel-header-content-title {
  margin-top: 10px;
  color:#666666;
}

.colspanel-content {
  padding: 10px;
  position: relative;
  overflow: hidden;
}

.colspanel-content-text {
  color: #ccc;
}

/* colspanel open effect */

details summary {
  cursor: pointer;
  transition: all 225ms ease-out;
  position: relative;
}

details[open] summary {
  margin-bottom: 100px;
  overflow: hidden;
  position: relative;
  background: #ccc;
}

details[open] .colspanel-content {
  padding: 10px;
  margin-top: -100px;
}

details[open] .colspanel-header-content-label {
  color: black;
}

/* remove marker */

details > summary {
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

/* custom marker */

summary::after {
  content: '+';
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 26px;
}

details[open] summary::after {
  content: '-';
  font-size: 36px;
}