/***      filter     ***/

/* radio */
input.radio {
  display: none;
}

label.radio {
  margin-bottom: 1.5rem;
}

span.radio {
  margin-top: -0.1rem;
  padding-left: 2rem;
  white-space: nowrap;
}

input.radio + label {
  border: 2px solid #9a9a9a;
  width: 1.4rem;
  height: 1.4rem;
  cursor: pointer;
  text-align: right;
  display: block;
  user-select: none;
}

label {
  font-weight: 400;
}

/* hover */
input.theme.radio + label:hover,
input.platform.radio + label:hover,
input.difficulty.radio + label:hover,
input.time.radio + label:hover,
input.workbook.radio + label:hover {
  font-weight: bold;
  border-color: black;
}

/* color radio */
input.theme.radio + label:active,
input.theme.radio:checked + label {
  background: #a763ff;
}

input.platform.radio + label:active,
input.platform.radio:checked + label {
  background: #40d040;
}

input.difficulty.radio + label:active,
input.difficulty.radio:checked + label {
  background: #ffab40;
}

input.time.radio + label:active,
input.time.radio:checked + label {
  background: #d64545;
}

input.workbook.radio + label:active,
input.workbook.radio:checked + label {
  background: #00b0ff;
}


/* checkmark */

label:active .checkmark,
.radio:checked + label .checkmark{
  content: "";
  display: block;
  position: relative;
  width: 0.8rem;
  height: 1.6rem;
  border: solid black;
  border-width: 0 4px 4px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  bottom: 2.2rem;
  left: 0.5rem;
}

/* FilterReset */
a.buttonReset {
  color: black;
  background-color: #f8f8f8;
  border: 0.1rem solid #9a9a9a;
  display: inline-block;
  padding: 0.5rem 1.6rem;
  border-radius: 0.3rem;
  box-sizing: border-box;
  text-decoration: none;
  font-weight: 400;
  cursor: pointer;
  user-select: none;
}

a.buttonReset:hover {
  border-left: 0.5rem solid #999999;
  border-right: 0.5rem solid #999999;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

a.buttonReset:active {
  box-shadow: inset 0 0.6rem 2rem -0.3rem rgba(0, 0, 0, 0.2),
    inset 0 0 0rem 0.05rem rgba(255, 255, 255, 0.12);
}

#filter {
  margin-bottom: 2rem;
}

/* Overflow */
#theme,
#platform,
#difficulty,
#time,
#workbook {
  padding-top: 0.5rem;
  padding-left: 0.5rem;
  margin-left: 0.8rem;
  margin-top: 1rem;
  height: 11.3rem;
  width: 10.5rem;
  border: 1px #a9a9a9 solid;
  background-color: #f8f8f8;
  overflow: hidden;
}

#filter .withScrollbar {
  width: 14rem;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

/* Scrollbar design */
#filter .withScrollbar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

#filter .withScrollbar::-webkit-scrollbar {
  width: 1rem;
  background-color: #f5f5f5;
}
#filter .withScrollbar::-webkit-scrollbar-thumb {
  background-color: #9e9e9e;
}