@import "{design}/app"

#studyAssociationTable
  .header
    text-align: center

  .center
    text-align: center

  table
    tbody
      tr
        td
          position: relative
          
          &.timepointOptions
            input
              margin: 0 3px
              
              &[type="radio"]
                border: 0
                clip: rect(0 0 0 0)
                height: 1px
                margin: -1px
                overflow: hidden
                padding: 0
                position: absolute
                width: 1px
                
              & + span
                display: block
                position: absolute
                border: 2px solid #c8c8c8
                border-radius: 100%
                height: 15px
                width: 15px
                top: 2px
                left: 0
                padding: 3px
                z-index: 5
                transition: border .25s linear
                -webkit-transition: border .25s linear
                
              & + span:before
                display: block
                content: ''
                border-radius: 100%
                height: 100%
                width: 100%
                transition: background 0.25s linear
                -webkit-transition: background 0.25s linear

              &:checked + span
                theme('border-color', '$activeColor')
                
                &:before
                  theme('background-color', '$activeColor')

            label
              padding: 0 5px
              padding-left: 20px
              display: inline-block
              position: relative

          &.disabled
            opacity: 0.2
            
          &.checkboxWrapper
            input
              margin: 0 3px
              
              &[type="checkbox"]
                border: 0
                clip: rect(0 0 0 0)
                height: 1px
                margin: -1px
                overflow: hidden
                padding: 0
                position: absolute
                width: 1px
                
              & + span
                display: block
                position: absolute
                border: 1px solid #b6b6b6
                background-color: white
                border-radius: 2px
                height: 16px
                width: 16px
                top: 10px
                left: calc((100% - 16px)/2)
                z-index: 5
                transition: border .25s linear
                -webkit-transition: border .25s linear
                
              & + span:before
                display: block
                position: absolute
                content: ''
                font-size: 9px
                left: 3px
                top: 1px
                color: white
                background-color: transparent
                transition: background 0.25s linear
                -webkit-transition: background 0.25s linear

              &:checked + span
                theme('background-color', '$activeColor')
                
                &:before
                  content: '\2713'