.page--problem_main
.page--problem_category
  .col--checkbox
    width: rem(61px)

  .col--pid
    width: rem(81px)
  
  .col--status
    width: rem(140px)
    position: relative
    border-right: 1px solid $table-border-color

  .col--difficulty
    width: rem(70px)
    text-align: center
  
  &[lang="en"]
    .col--difficulty
      width: rem(95px)

  .col--ac-tried
    width: rem(100px)
    text-align: center
    border-left: 1px solid $table-border-color

  +mobile()
    .col--status,
    .col--tried,
    .col--difficulty
      display: none

    .col--ac
      border-left: 1px solid $table-border-color


.widget--category-filter
  &__category
    margin-bottom: rem(6px)

  &__drop
    position: relative
    font-size: rem($font-size-small)
    width: rem(230px)
    padding: rem(10px)
    margin-right: rem(10px)
    background: $menu-drop-bg-color
    box-shadow: $menu-drop-shadow

    &:before
      content: ''
      display: block
      position: absolute
      width: 0
      height: 0
      border: rem($menu-drop-triangle-size) solid transparent
      border-top-color: #FFF
      border-left-color: #FFF
      box-shadow: $menu-drop-triangle-shadow
      transform: rotate(135deg)
      transform-origin: 0 0
      pointer-events: none
      left: 100%
      top: 50%
      margin-left: rem(floor($menu-drop-triangle-size * 1.414))

  &__subcategory
    margin: rem(2px)
    display: inline-block
  
  &__tag
    display: inline-block
    padding: rem(5px 6px)

    &:hover
      color: #FFF
      background: $primary-color
      text-decoration: none

    &.selected
      color: #FFF
      background: $secondary-color

.drop-target-attached-right .widget--category-filter__drop
  margin-right: 0
  margin-left: rem(10px)

  &:before
    transform-origin: 100% 0
    transform: rotate(-45deg)
    left: auto
    right: 100%
    margin-left: 0
    margin-right: 0
    margin-top: rem(floor($menu-drop-triangle-size * -1.414))


.display-mode .display-mode-hide,
.edit-mode .edit-mode-hide,
.hide-problem-tag .notag--hide,
.tag--hide
  display: none

.hide-problem-tag .tag--hide
  display: block

.toggle-tag
  float: right

.data-table > tbody > tr
  height: 40.15px

.data-table > thead > tr
  height: 54.9px

.search-container
  padding-bottom: 0

  .title
    margin-bottom: rem(5px)

  .dialog-button
    font-size: rem($font-size-secondary)
    display: inline-block
    padding: rem(5px 6px)
    margin-bottom: rem(5px)

.search-tag__item
  display: inline-block
  padding: rem(5px 6px)
  font-size: rem($font-size-secondary)
  margin-bottom: rem(5px)

  &:hover    
    color: #555;
    background: #f4f4f4;
    text-decoration: none

  &.selected
    color: #FFF
    background: $primary-color !important

  &.hide 
    display: none
    opacity: 0    

.category-filter__header
  [data-category-container].list
    overflow-x: auto

  .list
    .list__item
      padding: 12px 12px
      cursor: pointer
      margin: 0px 10px
      background: #eeeff3
      min-width: 90px
      text-align: center
      position: relative

      &.selected
        background: $primary-color
        color: #FFF
        font-weight: bold

    .list__item::first
      margin-left: 0px

.category-filter__body
  margin: 12px 10px 0 10px
  background: #f7f7f7
  max-height: rem(400px)
  overflow-y: auto  

  .subcategory-container
    &.hide
      display: none
      opacity: 0

    & h2
      font-size: rem($font-size)
      font-weight: bold
      margin-bottom: 16px

    .divider
      border-bottom: 1px solid #e5e5e5
      margin: rem(16px) 0

    .search-tag__item
      background: #eaeaea;

.search
  width: 100%
  position: relative
  display: flex

.search > input
  width: 100%
  border: 1px solid #cccccc
  border-right: none
  padding: 5px
  height: 36px
  outline: none
  color: #000000

.search > button
  width: 40px
  height: 36px
  border: 1px solid #00B4CC
  background: #00B4CC
  text-align: center
  color: #fff
  cursor: pointer
  font-size: 20px

.search > div
  position: absolute
  right: 50px
  top: 8px
  font-size: rem(17px)