OwlCyberSecurity - MANAGER

Edit File: _pro.sass

// Pro Tab

.mdp-menu-tab-pro
  display: none

.mdp-relative
  position: relative

.mdp-activation-faq
  h3
    font-size: 16px !important

.mdp-selection-full-badge
  position: absolute
  top: 32px
  right: 0
  background: #f8c010
  padding: 4px 6px
  border-radius: 4px
  font-size: 11px
  font-weight: 500
  z-index: 999
  color: #0a2138
  text-decoration: none
  border: 1px solid #f8c010

&:hover
    text-decoration: none
    background: #FAD55E
    color: #000
    box-shadow: 0 1px 4px 0 #f8c010

.mdp-relative

.mdp-selection-full-badge
    top: -3px

.mdp-tab-name-post_types

>div
      mix-blend-mode: luminosity
      opacity: .65

&:hover
        mix-blend-mode: normal
        opacity: 1

.mdp-selection-full-badge
    top: 44px
    right: 16px

.mdp-selection-full-text
  font-size: 13px !important
  padding: 16px
  color: #0a2138
  font-family: 'Roboto', sans-serif

.mdc-activation-status.activated

i
    color: #f8a510
    position: relative

&:before
      content: ''
      width: 24px
      height: 24px
      background: linear-gradient( to top, #f8a510, #FAD55E )
      position: absolute
      top: 0
      left: 0
      mix-blend-mode: lighten
      border-radius: 8px

.mdp-go-pro-box
  margin-bottom: 40px
  font-family: 'Roboto', sans-serif

> h3
    font-size: 1.4em !important

p
    font-size: 14px
    color: rgba(10,33,56,.75)

&.mdp-button-pro
      background: lighten( #f8c010, 10% )
      padding: 10px 12px
      border-radius: 4px
      font-size: 13px
      font-weight: 500
      color: #0a2138
      text-decoration: none
      border: 1px solid #f8c010
      margin-right: 20px

&:hover
        text-decoration: none
        background: #FAD55E
        color: #000
        box-shadow: 0 1px 4px 0 #f8c010

&.mdp-button-compare
      background: rgba(2, 116, 230, 0.07)
      padding: 10px 12px
      border-radius: 4px
      font-size: 13px
      color: rgba(2, 116, 230, 1)
      text-decoration: none
      border: 1px solid rgba(2, 116, 230, 0.05)
      margin-right: 20px

&:hover
        text-decoration: none
        background: rgba(2, 116, 230, 0.1)
        color: rgba(2, 116, 230, 1)
        box-shadow: 0 2px 4px -1px rgba(0,0,0,.05), 0 4px 5px 0 rgba(0,0,0,.03), 0 1px 10px 0 rgba(0,0,0,.03)

.mdp-pro-features
    display: flex
    flex-direction: row

ul
      display: block
      font-size: 14px
      font-weight: 500
      width: 50%

li
        line-height: 2em
        display: flex
        align-items: center

i
        color: #f8a510
        position: relative
        font-size: 18px
        margin-right: 10px

&:before
          content: ''
          width: 18px
          height: 18px
          background: linear-gradient( to top, #f8a510, #FAD55E )
          position: absolute
          top: 0
          left: 0
          mix-blend-mode: lighten
          border-radius: 8px

span
        display: inline-block
        font-size: 15px

.mdp-pro-buttons
    display: flex

/* Responsiveness */
@media screen and (max-width: 1080px)

.mdp-go-pro-box

.mdp-pro-features
      flex-direction: column

ul
        width: 100%

&:first-of-type
          margin-bottom: 0

&:last-of-type
          margin-top: 0