.main-menu {
  ul li {
    border-radius: 135px;
    padding: 1px;
    background: var(--nav-link-background);
  }

  a {
    border-radius: 135px;

    &:before {
      content: '';
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 135px;
      margin-left: -8px;
      z-index: -1;
    }
  }

  .circle-background {
    padding: 13px;
  }
}

.study-sets-list {
  .study-set-link {
    padding: 17px 24px;
  }

  .folder-icon {
    width: 23px;
    height: 22px;
    fill: var(--folder-icon-fill);
  }

  .study-set-form-wrapper {
    padding: 18px 24px;
  }

  .svg-icon {
    width: 23px;
    height: 22px;
  }
}

.filter-form input {

  &::-webkit-search-cancel-button {
    cursor: pointer;
  }

  &::-ms-clear {
    cursor: pointer;
  }

  &::-moz-clear {
    cursor: pointer;
  }
}

.dropdown-content {
  border-radius: 6px;
  padding: 16px;
  position: absolute;
  width: 160px;
  top: 45px;
  right: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  &:before {
    content: '';
    position: absolute;
    inset: 0;
    width: 160px;
    height: 100%;
    padding: 1px;
    border-radius: 6px;
    background: linear-gradient(105.02deg, #E33AFF 21.15%, rgba(136, 35, 153, 0) 103.71%);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
  }

  .radio-input {
    background: transparent;
    border: none;

    &:checked {
      background-color: #E33AFF;
    }

    &:checked + label {
      color: #E33AFF;
    }

    &:focus {
      outline: none;
      box-shadow: none;
    }
  }
}

.settings-card {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
}

.arrow-circle {
  padding: 10px 14px 10px 12px;
}

.top-show-part-gradient {
  position: absolute;
  left: 100%;
  top: -7%;
  width: 85%;
  height: 29%;
  background: rgba(48, 34, 93, 1);
  background: radial-gradient(circle, rgba(48, 34, 93, 0.4) 0%, rgba(48, 34, 93, 0.3) 30%, rgba(48, 34, 93, 0.05) 60%, rgba(48, 34, 93, 0) 100%);
  z-index: 0;
  background-repeat: no-repeat;
}

.right-circle-gradient {
  position: absolute;
  bottom: -22%;
  right: -24%;
  width: 80%;
  height: 74%;
  background: rgba(193,30,89, 0.2);
  background: radial-gradient(ellipse, rgba(193,30,89,0.2) 0%, rgba(193,30,89,0.1) 30%, rgba(193,30,89,0.01) 60%, rgba(193,30,89, 0) 100%);
}

.pink-circle-gradient {
  bottom: 59px;
  left: 22px;
  background: rgba(249, 85, 235, 0.2);
  background: radial-gradient(circle, rgba(249, 85, 235, 0.2) 0%, rgba(249, 85, 235,0.1) 30%, rgba(249, 85, 235,0.05) 60%, rgba(249, 85, 235, 0) 100%);
}

.red-circle-gradient {
  bottom: 23px;
  left: 35px;
  background: rgba(193, 30, 89, 0.2);
  background: radial-gradient(circle, rgba(193, 30, 89, 0.2) 0%, rgba(193, 30, 89,0.1) 30%, rgba(193, 30, 89,0.05) 60%, rgba(193, 30, 89, 0) 100%);
}

.blue-circle-gradient {
  bottom: 23px;
  left: -8px;
  background: rgba(54, 178, 197, 0.2);
  background: radial-gradient(circle, rgba(54, 178, 197, 0.2) 0%, rgba(54, 178, 197,0.1) 30%, rgba(54, 178, 197,0.05) 60%, rgba(54, 178, 197, 0) 100%);
}

@media screen and (min-width: 768px) {
  .main-menu a {
    border-radius: 135px;
  }

  .main-menu {
    .circle-background {
      padding: 5px;
    }
  }

  h3 {
    font-size: 19px;
  }

  .pink-circle-gradient {
    width: 78px;
    height: 64px;
    bottom: 59px;
    left: 13px;
  }

  .red-circle-gradient {
    width: 60px;
    height: 59px;
    bottom: 18px;
    left: 43px;
  }

  .blue-circle-gradient {
    width: 64px;
    height: 64px;
    bottom: 21px;
    left: 0;
  }

  /*.top-sidebar-gradient {*/
  /*  position: fixed;*/
  /*  left: -4%;*/
  /*  top: 0;*/
  /*  width: 30%;*/
  /*  height: 30%;*/
  /*  background: rgba(48, 34, 93, 1);*/
  /*  background: radial-gradient(circle, rgba(48, 34, 93,0.2) 0%, rgba(48, 34, 93,0.15) 30%, rgba(48, 34, 93,0.01) 60%, rgba(48, 34, 93, 0) 100%);*/
  /*  z-index: 0;*/
  /*}*/

  /*.top-left-sidebar-gradient {*/
  /*  position: fixed;*/
  /*  left: -29%;*/
  /*  top: 10%;*/
  /*  width: 50%;*/
  /*  height: 50%;*/
  /*  background: rgba(155, 54, 255, 0.2);*/
  /*  background: radial-gradient(ellipse, rgba(155, 54, 255,0.2) 0%, rgba(155, 54, 255,0.15) 30%, rgba(155, 54, 255,0.01) 60%, rgba(155, 54, 255, 0) 100%);*/
  /*  z-index: 0;*/
  /*}*/

  /*.bottom-right-sidebar-gradient {*/
  /*  position: fixed;*/
  /*  left: 11%;*/
  /*  top: 60%;*/
  /*  width: 40%;*/
  /*  height: 40%;*/
  /*  background: rgba(227, 58, 255, 0.2);*/
  /*  background: radial-gradient(ellipse, rgba(227, 58, 255, 0.2) 0%, rgba(227, 58, 255, 0.15) 30%, rgba(227, 58, 255, 0.01) 60%, rgba(227, 58, 255, 0) 100%);*/
  /*  z-index: 0;*/
  /*}*/

  /*.big-ellipse-sidebar-gradient {*/
  /*  position: fixed;*/
  /*  right: 8%;*/
  /*  top: 17%;*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*  background: rgba(193, 30, 89, 0.2);*/
  /*  background: radial-gradient(ellipse, rgba(193, 30, 89, 0.2) 0%, rgba(193, 30, 89, 0.10) 30%, rgba(193, 30, 89, 0.01) 60%, rgba(193, 30, 89, 0) 100%);*/
  /*  transform: rotate(10deg);*/
  /*  z-index: 0;*/
  /*}*/
}