input[type="radio"] {

  display: none;
  max-height: 0;

}

:root {

  --black: #1a1a1a;

  --white: #fff;

  --blue: #2a7ffe;

  --gray: #d9d9d9;

}

.филтери {
    text-align: center;
    justify-content: center;
    margin-bottom: -2rem;
    font-size: 16px;
    position: sticky;
    top: 77px;
    z-index: 1;
    background: rgba(197, 97, 34, 0.2);
    backdrop-filter: blur(18px);
    border: solid rgba(121, 74, 36, .2) 1px;
    border-radius: 12px;
}
.филтери * {
    display: inline-block;
}
.филтери label {
    padding: 0.33rem 1rem;
    margin-bottom: 0.25rem;
    border-radius: 2rem;
    min-width: 90px;
    line-height: normal;
    font-weight: normal;
    curser: pointer;
    transition: all 0.1s;
    background: var(--gray);
    color: var(--black);
}
.филтери label:hover{
    background: var(--blue);
    color: var(--white);
    cursor: pointer;
}

.курсеви {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    list-style-type:none;
}
.курс {
  flex: 1 1 300px;
  max-width: 300px;
  z-index: 0;
  list-style-type:none;
}
.kursevi-body ol {
  margin-left: 1px;
  
}


@media (max-width:700px) {
  .филтери {
    position: relative;
    z-index: 0;
  }
  .kursevi-body ol {
    margin-top: -60px;    
  }
  .курсеви {
    padding-top: 132px;
  }
  .курс {
    max-width: 100%;
  }
}


[value="Сите"]:checked ~ .курсеви [data-category] {
  display: block;
}
[value="развој"]:checked ~ .курсеви .курс:not([data-category~="развој"]),
[value="творештво"]:checked ~ .курсеви .курс:not([data-category~="творештво"]),
[value="исхрана"]:checked ~ .курсеви .курс:not([data-category~="исхрана"]),
[value="астрологија"]:checked ~ .курсеви .курс:not([data-category~="астрологија"]),
[value="линукс"]:checked ~ .курсеви .курс:not([data-category~="линукс"]) {
    display: none;
}

[value="Сите"]:checked ~ .филтери [for="Сите"],
[value="развој"]:checked ~ .филтери [for="развој"],
[value="творештво"]:checked ~ .филтери [for="творештво"],
[value="исхрана"]:checked ~ .филтери [for="исхрана"],
[value="астрологија"]:checked ~ .филтери [for="астрологија"],
[value="линукс"]:checked ~ .филтери [for="линукс"] {
    background: var(--blue);
    color: var(--white);
}


.филтери li {
    cursor: pointer;
    color: black;
}

.филтери .toggle:hover {
    background: var(--blue);
    color: var(--white);
    border-radius: 16px;
}


.филтери ol {
    font-weight: bold;
}

.филтери.collapsed li:not(:first-child) {
    display: none;
}

.филтери .toggle {
    font-weight: normal;
    font-size: 20px;
    background-color: #ddd;
    border-radius: 16px;
    padding: 2px;
    text-align: center;
}

.филтери span.toolbar-btn {
  cursor: pointer;
  font-size: 24px;
}

.филтери .toolbar-btn:hover {
}
 
.toolbar-btn {
    text-align: center;
    cursor: pointer;
}