@import "vars"
@import "fonts"
@import "libs"
@import "style-formUI"

::placeholder
  color: #666

::selection
  background-color: $accent
  color: #fff

html, body
  display: flex
  visibility: hidden

ul
  list-style: none
  list-style-type: none
  list-style-image: none
  padding: 0
  margin: 0

pre
  margin: 0
  padding: 0

a:hover
  text-decoration: none

button
  border: none

button:focus
  outline: none

a
  &:hover
    color: white
  &:focus
    outline: none

input::-ms-clear
  display: none


body
  font-size: 16px
  min-width: 320px
  font-family: $default-font
  overflow-x: hidden
  min-height: 100vh
  display: flex
  width: 100%
  flex-direction: column
  input, textarea
    outline: none
    -webkit-appearance: none
    border-radius: 0
    &:focus:required:invalid
      border-color: red
    &:required:valid
      border-color: green


main
  flex-grow: 1
  height: 100%


// ALERT STYLE OPEN
body
  .iziModal
    .iziModal-header
      .iziModal-header-title, .iziModal-header-subtitle
        white-space: normal
        text-outline: none
// ALERT STYLE CLOSE

.mm-page
  position: static

.link-beta
  color: #525252 !important
  cursor: default !important

.img-responsive
  display: block
  max-width: 100%
  height: auto

.text-center
  text-align: center

.wrap-button-center
  text-align: center

.hidden
  display: none

.style-error-message
  color: #e74c3c


.default-link
  color: $blue-hue
  transition: .25s ease
  &:hover
    color: lighten($blue-hue, 10%)
  &:active
    color: darken($blue-hue, 10%)
.link-message-alert
  color: $color-white
  transition: .25s ease
  &:hover
    color: #c4c4c4
  &:active
    color: darken($color-white, 10%)

.link-blank-profile-content
  color: #6b6b6b
  transition: .25s ease
  font-family: $light-font
  position: relative
  padding-left: 20px
  &:hover
    color: $blue-hue
    display: inline-block
  .svg-inline--fa
    position: absolute
    top: 50%
    left: 0
    transform: translateY(-50%)

//MENU USER PROFILE
.menu-profile-user
  position: relative
  cursor: pointer
  transition: all 0.3s
  display: inline-block
  width: 180px
  .main-user-info
    .img-menu-user
      position: relative
      display: inline-block
      background-size: cover
      background-repeat: no-repeat
      background-position: center center
      width: 40px
      height: 40px
      float: left
      margin-right: 10px
      .svg-inline--fa
        &.unknown-user
          font-size: 35px
          position: absolute
          left: 0
          top: 50%
          transform: translateY(-50%)
          margin: 0
    .wrap-user-info
      @include clearfix
      display: inline-block
      margin-top: -5px
      p
        font-size: 15px
        margin-bottom: 0
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
        width: 110px
        &:last-child
          font-family: $light-font
    .svg-inline--fa
      margin-top: 11px
      float: right

  .extend-user-info
    position: absolute
    z-index: 500
    max-height: 0
    width: 100%
    opacity: 0
    overflow: hidden
    transition: all 0.3s
    background: white
    box-shadow: inset 0 0px #098bd1, 0 2px 8px rgba(0,84,186,0.4)
    padding: 10px
    li
      margin-bottom: 7px
      a
        color: $blue-hue
        font-size: 13px
        transition: .25s ease
      &:last-child
        text-align: center
      &:hover a
        color: $color-orange
      a.filled-button
        color: $color-white
    &.open
      opacity: 1
      max-height: 430px
      margin-top: 0px

.filled-button
  display: inline-block
  background-color: $color-orange
  color: $color-white
  padding: 5px 20px 3px 20px
  cursor: pointer
  transition: .25s ease
  box-shadow: darken($color-orange, 10%) 0 3px 0 0
  border: 3px solid $color-orange
  &:hover
    background-color: darken($color-orange, 10%)
    border: 3px solid darken($color-orange, 10%)
    box-shadow: darken($color-orange, 0%) 0 3px 0 0
  &:active
    background-color: darken($color-orange, 15%)
    border: 3px solid darken($color-orange, 15%)


.unfilled-button
  display: inline-block
  background-color: transparent
  color: $color-white
  padding: 5px 20px 3px 20px
  cursor: pointer
  transition: .25s ease
  border: 3px solid $color-orange
  &:hover
    background-color: $color-orange
  &:active
    background-color: darken($color-orange, 15%)
    border: 3px solid darken($color-orange, 15%)

.inaccessible-button
  display: inline-block
  background-color: #e1e1e1
  color: #525252
  padding: 3px 20px
  cursor: pointer
  transition: .25s ease
  box-shadow: darken($color-orange, 10%) 0 3px 0 0
  border: 3px solid $color-orange
  pointer-events: none
  &:hover
    color: #525252
    cursor: default!important

.style-mini-remove-btn
  background-color: #e74c3c
  color: $color-white
  transition: .25s ease
  cursor: pointer
  &:hover
    background-color: lighten(#e74c3c, 10%)
  &:active
    background-color: darken(#e74c3c, 20%)



.select-style
  border: 2px solid $color-orange
  outline: none
  border-radius: 3px
  padding: 0 5px

.label-date-input
  .call-popup
    position: relative
    display: block
    .style-datepicker
      &:focus ~ .svg-inline--fa
        color: $color-orange
    .svg-inline--fa
      position: absolute
      transition: .25s ease
      color: #525252
      font-size: 16px
      top: 50%
      right: 3%
      transform: translateY(-50%)
      color: $color-orange


.style-field-required
  border: 2px solid #e74c3c !important
  box-shadow: none !important

.input-style-default
  padding: 5px 10px
  width: 100%
  border: none
  transition: .25s ease
  box-shadow: 0px 0px 2px $blue-hue
  font-family: $light-font
  &:hover
    box-shadow: 0px 0px 2px $color-orange
  &:focus
    box-shadow: 0px 0px 2px $color-orange

.textarea-default
  border: none
  padding: 5px 10px
  transition: .25s ease
  box-shadow: 0px 0px 2px $blue-hue
  font-family: $light-font
  width: 100%
  &:hover
    box-shadow: 0px 0px 2px $color-orange
  &:focus
    box-shadow: 0px 0px 2px $color-orange

.input-with-icon
  position: relative
  .svg-inline--fa
    position: absolute
    top: 50%
    right: 3%
    font-size: 16px
    color: $color-orange
    transform: translateY(-50%)

#popup-datepicker
  .datepicker
    position: static
    width: 100%
    border-radius: 0
    border: none
    font-family: $default-font
    .datepicker--pointer
      display: none
.combobox
  visibility: hidden

.wrap-button-language-switch
  position: relative
  display: inline-block
  height: 0
  width: 35px
  .button-language-switch
    position: absolute
    z-index: 500
    top: -23px
    display: inline-flex
    flex-direction: column
    text-transform: uppercase
    height: 35px
    cursor: pointer
    overflow: hidden
    &.open
      height: auto
    li
      background: $color-orange
      order: 2
      padding: 5px 10px 5px 10px
      min-height: 40px
      &:hover
        cursor: pointer
        background: #eea634
      &.active
        order: 1
        pointer-events: none

.required-character
  color: red
  font-family: $bold-font

// STYLE TABS SWITCH OPEN

.switch-type-reg-and-enter
  display: block
  margin-top: 25px
  text-align: center
  ul
    display: flex
    li
      cursor: pointer
      display: block
      width: 100%
      padding: 10px 15px
      background-color: darken($color-white, 10%)
      border-right: 1px solid darken($color-white, 20%)
      border-bottom: 1px solid transparent
      text-align: center
      color: #525252
      font-size: 16px
      transition: .25s ease
      .svg-inline--fa
        font-size: 16px
    li:not(.active)
      border-bottom: 1px solid darken($color-white, 20%)
      &:hover
        background-color: darken($color-white, 5%)
      &:active
        background-color: darken($color-white, 25%)
    li:last-child
      border-right: none
    li.active
      background-color: $color-white
      color: $blue-hue
  .content-switch
    margin-top: 10px
    .content-tab
      label
        display: block
        position: relative
        .svg-inline--fa:not(.fa-check)
          position: absolute
          top: 3px
          right: 8px
          border-left: 1px solid lighten(#525252, 20%)
          padding-left: 5px
          font-size: 25px
          height: 30px
          color: lighten(#525252, 20%)
          transition: .25s ease
        .eyePass
          .svg-inline--fa
            opacity: 0
            transition: .25s ease
            color: #858585
            right: 12%
            border: none
            font-size: 15px
            padding: 0
            cursor: pointer
        .input-style-default
          margin-bottom: 20px
          &:focus ~ .svg-inline--fa
            color: $color-orange
      .wrap-checkbox-tab
        text-align: left
        line-height: 0
        span
          font-size: 13px
          font-family: $light-font
          vertical-align: middle
      .filled-button
        margin-top: 20px
      .wrap-block-tab
        display: block
        margin-top: 10px
        .link-entered-acc
          font-size: 13px
          font-family: $light-font
          transition: .25s ease
          &:hover
            color: $color-orange
        span
          font-size: 13px
          font-family: $light-font
    .login-tab
      .filled-button
        margin-top: 0

// STYLE TABS SWITCH CLOSE



// MAIN PAGE OPEN

// HEADER-MENU OPEN



#mobile-menu
  z-index: 5000
  background-color: $color-white
  .mm-navbars_bottom
    bottom: 2%
    .mobile-soc-top-menu
      display: flex
      justify-content: center
      font-size: 30px
      height: 50px
      li
        margin-right: 20px
        &:last-child
          margin-right: 0
        .svg-inline--fa
          color: $blue-hue

.main-head
  flex-shrink: 0
  .nav-top
    background-color: $blue-hue
    color: $color-white
    padding: 10px 0
    .auth-organizer-bth-menu
      float: left
      margin-right: 10px
    &-logo
      width: auto
      display: block
      a
        display: inline-block
        width: 40px
        margin-right: 10px
        &:last-child
          margin-right: 0
        img
          width: 40px

    &-menu
      display: flex
      li
        margin-right: 20px
        &:last-child
          margin-right: 0
        a
          color: $color-white
          &::after
            content: ''
            display: block
            width: 100%
            height: 3px
            background-color: $color-orange
            transform: translateY(19px) scale(0)
            transition: all 0.2s
          &:hover
            &::after
              transform: translateY(19px) scale(1)
    &-soc
      display: flex
      li
        display: flex
        justify-content: center
        align-items: center
        margin-right: 10px
        background-color: $color-white
        border-radius: 100px
        width: 30px
        height: 30px
        transition: .25s ease
        &:last-child
          margin-right: 0
        &:hover
          background-color: darken($color-white, 20%)
        &:active
          background-color: darken($color-white, 30%)
        a
          line-height: 16px
          .svg-inline--fa
            color: $blue-hue
            font-size: 20px
    .button-menu-container
      position: relative
      a
        margin-right: 10px
        &:last-child
          margin-right: 0
    .hamburger
      padding: 0
      color: $color-white

// HEADER-MENU CLOSE

// MAIN OPEN

main
  .about-service
    background-size: 600px 600px
    background-position: 90% 15%
    background-repeat: no-repeat
    height: 70vh
    position: relative
    .row
      height: 70vh
    .about-service-content
      .wrap-count-event
        box-shadow: 0 1px 4px rgba(0,84,186,.2)
        display: inline-block
        color: $color-white
        margin-bottom: 20px
        h1
          display: block
          font-size: 30px
          text-transform: uppercase
          background-color: $color-orange
          font-family: $bold-font
          margin: 0
          padding: 20px
        .count-block
          color: #000000
          padding: 20px
          .wrap-list-event
            font-family: $light-font
            position: relative
            @include clearfix
            .count-event
              display: inline-block
              float: right
              position: absolute
              right: 0
              top: 50%
              transform: translateY(-50%)
              .count-numeral
                display: inline-block
                font-size: 30px
                background-color: $blue-hue
                color: $color-white
                font-family: $light-font
                border-radius: 5px
                padding: 5px
                line-height: 30px
                box-shadow: 0 1px 4px rgba(0,84,186,.2)
                margin-right: 5px
      .static-count-text
        font-size: 30px
        margin-bottom: 10px
        display: inline-block
        float: left

      .decr-service-one
        font-size: 30px
        color: $color-white
        color: black
      .decr-service-two
        font-size: 25px
        color: $color-white
        font-family: $light-font
        color: black
      .mobile-button-about-service
        .filled-button, .unfilled-button
          display: block
          margin: 0 auto
          width: 250px
          &:last-child
            margin-top: 20px
            margin-bottom: 20px

  .wrap-filter-hackathon
    padding: 50px 0 100px 0
    background-color: rgba(2,136,209,.15)
    .favorites-banner-hackathon
      position: relative
      display: inline-block
      margin-bottom: 40px
      background-size: cover
      background-position: center center
      background-repeat: no-repeat
      height: 200px
      display: block
      &:before
        content: ''
        top: 0
        left: 0
        width: 100%
        height: 100%
        position: absolute
        background-color: $deep-blue
        opacity: 0
        transition: .25s ease
      &:hover
        &:before
          opacity: 0.5
          transition: .25s ease
        .svg-inline--fa
          opacity: 1
      .svg-inline--fa
        transition: .25s ease
        position: absolute
        top: 50%
        left: 50%
        margin-left: -10px
        margin-top: -10px
        font-size: 30px
        opacity: 0
        color: $color-white
    .filter-hackathon
      text-align: center
      h2
        font-size: 42px
        color: $blue-hue
      p
        font-size: 22px
        font-family: $light-font
      .filter-search-hackathon
        padding: 30px
        background-color: $blue-hue

      .filter-search-hackathon
        .custom-combobox
          display: block
          position: relative
          .input-combobox
            width: 100%
            padding: 5px 10px
            &:focus + .btn-show-select-combobox .svg-inline--fa
              color: $color-orange
          .btn-show-select-combobox
            position: absolute
            right: 3%
            top: 50%
            transform: translateY(-50%)
            .svg-inline--fa
              transition: .25s ease
              font-size: 16px
              color: $color-orange
        label
          display: block
          margin-bottom: 20px
          p
            margin-bottom: 5px
            color: $color-white
        .filled-button
          font-size: 25px

  .banner-delimiter
    height: 150px
    background-size: contain
    background-position: center center

  .list-of-hackathon, .wrap-list-of-all-events
    padding: 50px 0 20px 0
    .wrap-button-more-info
      margin-bottom: 20px
      color: $color-white
      text-align: right
      padding: 7px 10px
      background: $blue-hue
      ul
        li
          display: inline-block
          a
            text-transform: uppercase
            &:first-of-type
              margin-right: 10px
              color: $color-white
      span
        float: left
        font-size: 23px

    .list-card-hackathon
      margin-bottom: 25px
      background-color: $color-white
      box-shadow: 0 1px 4px rgba(0,84,186,.2)
      position: relative
      &:hover
        box-shadow: 0 8px 22px rgba(0,84,184,0.2)
      .tag-hack
        position: absolute
        z-index: 5
        font-size: 15px
        text-transform: uppercase
        color: white
        background-color: #098bd1
        line-height: 24px
        padding: 0 9px
        top: 0
        right: 10%
        transform-origin: 100% 0
        transform: rotate(-90deg)
        -webkit-transform-origin: 100% 0
        -webkit-transform: rotate(-90deg)
        border-radius: 3px 0 0 3px
        &:before
          content: " "
          position: absolute
          left: -8px
          border-right: 9px solid #098bd1
          border-top: 12px solid transparent
          border-bottom: 12px solid transparent
          top: 0
        &:after
          content: " "
          position: absolute
          right: -2px
          border-right: 1px solid #58b4e5
          background-color: #098bd1
          height: 24px
          width: 3px
          border-radius: 0 1px 0 0
          box-shadow: 0 -3px 1px -1px #0056b8

      .wrap-hack-img
        display: block
        border-top: 4px solid $blue-hue
        position: relative
        padding-bottom: 65%
        transition: all 0.3s
        margin: 0
        opacity: 1
        .img-hack
          position: absolute
          width: 100%
          height: 100%
          z-index: 0
          transition-property: padding-bottom
          background-size: auto auto
          background-position: center center
          background-repeat: no-repeat
          opacity: 1
          transition: all 0.3s

      .wrap-info-hackathon
        padding: 0 20px 20px 20px
        color: #525252
        display: block
        > div:not(.list-desc-hackatho, .list-name-hackathon)
          position: relative
          font-size: 14px
          margin-bottom: 10px
          border-bottom: 1px solid #d3d3d3
          padding-bottom: 10px
          &:first-child
            border-bottom: none
            padding-bottom: 0
          &:last-child
            border-bottom: none
          .svg-inline--fa
            position: absolute
            font-size: 20px
            color: #525252
            left: 0
            top: 0
          .wrap-text-info-hack
            margin-left: 25px
        .list-name-hackathon
          border: none
          font-size: 25px
          text-transform: uppercase
          color: $blue-hue
          font-family: $bold-font
          margin: 20px 0 10px 0
          display: inline-block
          position: relative
        .wrap-list-domain-hackathon
          border-bottom: none
          ul
            li
              margin-bottom: 5px
              display: inline-block
              color: $color-white
              text-transform: uppercase
              background-color: #525252
              padding: 1px 10px
              font-size: 12px
        .list-desc-hackathon
          display: block
          overflow: hidden
          opacity: 0
          margin: 0
          line-height: 24px
          transition: all 0.3s
          position: relative
          z-index: 1
          .wrap-position-desc
            display: block
            position: relative
            padding-bottom: 0
            transition: all 0.3s
            .desc-event
              display: block
              position: absolute
              transition: all 0.3s
              left: 0
              width: 100%
              top: 0
              color: #525252
              font-family: $default-font
              font-size: 16px
              height: 100px
              overflow: hidden

      .wrap-list-hack-button
        position: absolute
        width: 100%
        bottom: 0
        height: 0
        transition: all 0.3s
        overflow: hidden
        color: $color-white
        a
          float: right
          width: 50%
          text-align: center
          border: 1px solid rgba($blue-hue, 0.3)
          border-bottom: none
        .unfilled-button
          &:first-of-type
            color: $blue-hue
            border-right: none
            &:hover
              background-color: lighten($blue-hue, 10%)
              color: $color-white
            &:active
              background-color: darken($blue-hue, 10%)
          &:last-of-type
            color: $color-orange
            border-left: none
            border-right: none
            &:hover
              color: white
        &.archive-btn
          .unfilled-button
            width: 100%
      &:hover .wrap-info-hackathon .list-desc-hackathon
        opacity: 1
        > .wrap-position-desc
          opacity: 1
          padding-bottom: 40%

      &:hover .wrap-hack-img
        padding-bottom: 0
        margin: 0
        .img-hack
          opacity: 0
      &:hover .wrap-list-hack-button
        height: 34px
        margin-top: 7px
        transition: all 0.3s

  .wrap-banner-rocket
    background-attachment: fixed
    background-repeat: no-repeat
    background-position: center center
    background-size: cover
    position: relative
    padding: 120px 0
    &:before
      content: ''
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      background: linear-gradient(to top, rgba(255,133,0,0.0), rgba(2,136,209,0.20))
    .row
      .banner-rocket-text
        text-align: center
        color: $color-white
        p
          color: $color-white
          margin-bottom: 30px
          font-family: $light-font
          font-size: 30px
        a
          padding: 15px 55px
          margin-right: 20px
          &:last-of-type
            margin-right: 0
            background-color: $blue-hue
            border: 3px solid $blue-hue
            box-shadow: darken($blue-hue, 10%) 0 3px 0 0
            &:hover
              background-color: darken($blue-hue, 10%)
              border: 3px solid darken($blue-hue, 10%)
              box-shadow: darken($blue-hue, 0%) 0 3px 0 0
            &:active
              background-color: darken($blue-hue, 15%)
              border: 3px solid darken($blue-hue, 15%)
  .our-partners
    position: relative
    padding: 80px 0
    h2
      text-align: center
      color: $blue-hue
      font-size: 42px
      margin-bottom: 20px
    .wrap-partners-logo
      img
        width: 100%

  .wrap-subscribe-to-news
    position: relative
    background-repeat: no-repeat
    background-size: cover
    background-position: center
    .row
      &:first-child
        height: 550px
      .subscribe-to-news
        text-align: center
        h2
          text-transform: uppercase
          color: $color-white
          font-size: 48px
        p
          color: $color-white
          font-size: 24px
          font-family: $light-font
        input[type='text']
          padding: 0 20px
          height: 56px
          width: 460px
          border: none
          margin-bottom: 20px
      .filled-button
        height: 55px
        padding: 0 40px
        margin-left: 20px
      label.form_input_error
        background-color: $blue-hue
        padding: 0 5px
        width: 100%
        font-size: 15px
        bottom: -4px
        color: $color-white
        border-bottom: 2px solid #c21111
    &:before
      content: ''
      position: absolute
      width: 100%
      height: 100%
      top: 0
      left: 0
      background-image: linear-gradient(to top, rgba(0,0,0,0.20), rgba(20,20,20,0.20))

// MAIN CLOSE

// FOOTER OPEN

footer
  background-color: $deep-blue
  padding: 50px 0
  flex-shrink: 0
  .wrap-footer-links
    .title-links-footer
      text-transform: uppercase
      color: #525252
      font-family: $bold-font
      margin-bottom: 10px
      display: inline-block
    .footer-links
      font-family: $light-font
      li
        margin-bottom: 10px
        &:last-child
          margin-bottom: 0
        &:hover a
          color: #ff8500
        a
          color: $color-white
          transition: .25s ease
          &.footer-sub-links
            font-family: $default-font
            text-decoration: underline
      &.list-info-footer
        li
          color: $color-white
      &.copyright-link
        text-align: center
        margin-top: 40px
        li
          display: inline-block
          color: $color-white
          a
            font-family: $bold-font

  .footer-subscribe
    .title-subscribe-footer
      text-transform: uppercase
      color: #525252
      font-family: $bold-font
      margin-bottom: 10px
      display: inline-block
    .footer-subscribe-form
      input[type="search"]
        padding: 8px 20px
      button
        background-color: #0044ff
        color: $color-white
        height: 42px
        width: 50px
        margin-left: 5px
        transition: .25s ease
        cursor: pointer
        .svg-inline--fa
          font-size: 22px
        &:hover
          background-color: #366bff
        &:active
          background-color: #0035c8
    .footer-soc-button
      display: flex
      margin-top: 20px
      li
        margin-right: 15px
        &:last-child
          margin-right: 0
        a
          color: #525252
          &:hover .svg-inline--fa
            color: #8a8a8a
          &:active .svg-inline--fa
            color: #383838
          .svg-inline--fa
            font-size: 20px
            transition: .25s ease

// FOOTER CLOSE

// MAIN PAGE CLOSE


// HACKATHON PAGE OPEN

main
  flex-grow: 1
  .wrap-banner-current-hackathon
    background-color: #1c2747
    position: relative
    padding-top: 30px
    &:before
      content: ''
      background-color: #fff
      position: absolute
      left: 0
      bottom: 0
      width: 100%
      height: 140px
    .wrap-banner-event
      position: relative
      height: 500px
      color: #fff
      box-shadow: 0 1px 4px rgba(0,86,184,0.2)
      > .row
        height: 100%
      .wrap-banner-event-left
        min-height: 100%
        position: relative
        background-size: cover
        background-repeat: no-repeat
        &:before
          content: ''
          position: absolute
          width: 100%
          height: 100%
          top: 0
          left: 0
          background-color: rgba(0, 0, 0, 0.19)
        .main-title-banner-left
          position: relative
          padding: 20px
          .title-current-event
            text-transform: uppercase
          .banner-hack-teg-tech
            li
              display: inline-block
              color: $color-white
              text-transform: uppercase
              background-color: $blue-hue
              padding: 1px 10px
              font-size: 20px
              margin: 20px 10px 0 0
        .wrap-bottom-info-event
          position: absolute
          bottom: 0
          width: 100%
          color: black
          .row
            .col-md-4
              &:last-child .item-info-banner-event
                border-right: none
          .item-info-banner-event
            background-color: rgba(255, 255, 255, 0.85)
            border-right: 1px solid rgba(0, 0, 0, 0.25)
            min-height: 140px
            .wrap-icon-title
              padding: 10px
              .title-info
                display: inline-block
                text-transform: uppercase
                font-family: $light-font
                font-size: 12px
                margin-bottom: 10px
              .info
                font-size: 15px
              p
                margin: 0
      .wrap-info-event-right
        position: relative
        background-color: #fff
        height: 100%
        color: $color-white
        text-align: center
        .tag-event
          position: absolute
          font-size: 15px
          text-transform: uppercase
          color: $color-white
          background-color: $blue-hue
          line-height: 24px
          padding: 0 9px
          z-index: 432423423
          top: 0
          right: 10%
          transform-origin: 100% 0
          transform: rotate(-90deg)
          border-radius: 3px 0 0 3px
          &:before
            content: " "
            position: absolute
            left: -8px
            border-right: 9px solid #098bd1
            border-top: 12px solid transparent
            border-bottom: 12px solid transparent
            top: 0
          &:after
            content: " "
            position: absolute
            right: -2px
            border-right: 1px solid #58b4e5
            background-color: #098bd1
            height: 24px
            width: 3px
            border-radius: 0 1px 0 0
            box-shadow: 0 -3px 1px -1px #0056b8
        .img-banner-hack
          display: block
          width: 100%
          height: 200px
          background-size: cover
          background-position: center
          background-repeat: no-repeat
        .title-banner-hack-timer
          color: black
          text-align: center
          text-transform: uppercase
          margin: 15px 0
          font-size: 13px
        .timer-is-over-message
          background-color: rgba(2,136,209,.15)
          padding: 20px 0
          position: relative
          text-transform: uppercase
          text-align: center
          color: #000
          .svg-inline--fa
            font-size: 30px
            margin-left: 10px
            color: $color-orange
            position: absolute
            left: 0
            top: 50%
            transform: translateY(-50%)
          &.hidden-message
            display: none
          &.show-message
            display: block

        .flip-clock-wrapper
          margin: 0
          font-family: $default-font
          width: auto
          text-align: center
          display: inline-block
          .flip
            width: 30px
            height: 70px
            li
              line-height: 67px
              a
                perspective: none
                > div
                  height: 49.4%
                .inn
                  font-size: 30px
        .flip-clock-divider
          .flip-clock-dot
            &.top
              top: 20px
            &.bottom
              bottom: 43px
          .flip-clock-label
            right: -55px
            top: 7.5em
            text-transform: uppercase
        .flip-clock-divider.days
          .flip-clock-label
            right: -52px !important
        .filled-button
          text-transform: uppercase
          margin-top: 20px
        .contact-to-organizer-link
          margin-top: 10px
          display: inline-block


  .full-description-hack-tab
    padding-top: 60px
    padding-bottom: 20px
    .wrap-tab-switch-info-hack
      display: none
      .tab-switch-info-hack
        .icon-info-points
          width: 25px
    .soc-info-current-hack
      .soc-link-current-hack
        p
          text-transform: uppercase
        .list-of-soc-current-hack
          li
            display: inline-block
            line-height: 0
            a
              color: $blue-hue
              transition: .25s ease
              &:hover
                color: lighten($blue-hue, 10%)
              &:active
                color: darken($blue-hue, 10%)
              .svg-inline--fa
                font-size: 25px
                margin-right: 10px
    .add-calendar-current-hack
      p
        text-transform: uppercase
        margin-top: 40px
      .list-of-type-add-calendar
        li
          margin-bottom: 10px
          a
            background-color: #efefef
            display: inline-block
            padding: 10px 20px
            height: 50px
            width: 180px
            img
              width: 100%
    .organizer-current-hack-link
      p
        text-transform: uppercase
        margin-top: 40px
      .link-organizer
        display: inline-block
        width: 250px
        height: 100px
        background-size: contain
        background-position: center
        background-repeat: no-repeat
        border: 1px solid black

    .link-off-site-current-hack
      p
        text-transform: uppercase
        margin-top: 40px
      a
        color: $blue-hue
        transition: .25s ease
        &:hover
          color: $color-orange
    .action-current-hack
      margin-top: 40px
      color: $color-white

// HACKATHON PAGE CLOSE

// PROFILE-USER PAGE OPEN

main
  .wrap-user-profile
    padding-top: 20px
    background-color: rgba(9,167,253,.15)
    .row
      &.wrap-fixed
        position: relative
    .wrap-menu-profile-user
      background-color: #fff
      box-shadow: 0 1px 4px rgba(0,84,186,.2)
      padding: 20px 0 20px 20px
      .list-of-menu-user-profile
        li
          margin-bottom: 10px
          position: relative
          transition: .25s ease
          cursor: pointer
          padding: 5px 0 5px 0
          &:hover
            background-color: lighten($color-orange, 40%)
          &:active
            & a
              color: darken($color-orange, 10%)
          a
            font-size: 16px
            color: $color-orange
            display: block
            padding-left: 30px
            .svg-inline--fa
              position: absolute
              left: 5px
              top: 50%
              transform: translateY(-50%)



    .wrap-right-user-cabinet-content
      .wrap-static-profile-user
        background-color: #fff
        box-shadow: 0 1px 4px rgba(0,84,186,.2)
        padding: 20px
        .wrap-avatar-user
          box-shadow: 0 1px 4px rgba(0,84,186,.2)
          .form-avatar-user-cabinet
            .wrap-label-avatar
              position: relative
              height: 250px
              .input-avatar-user
                display: none
              .svg-inline--fa
                position: absolute
                bottom: 5%
                left: 5%
                color: $color-white
                font-size: 25px
                &.unknown-user
                  color: $blue-hue
                  font-size: 150px
                  position: absolute
                  top: 50%
                  transform: translateY(-50%)
                  left: 50%
                  margin-left: -75px
              .btn-select-avatar
                display: block
                z-index: 0
                position: absolute
                width: 100%
                height: 100%
                top: 0
                left: 0
                cursor: pointer
                background-size: cover
                background-position: center center
                background-repeat: no-repeat
                &:before
                  content: ''
                  top: 0
                  left: 0
                  width: 100%
                  height: 100%
                  position: absolute
                  background-color: $deep-blue
                  opacity: 0
                  transition: .25s ease
                  z-index: 5000
                &:hover
                  &:before
                    opacity: 0.5
                    transition: .25s ease
                  .svg-inline--fa.fa-upload
                    opacity: 1
                    z-index: 55555
                .svg-inline--fa.fa-upload
                  transition: .25s ease
                  position: absolute
                  top: 50%
                  left: 50%
                  margin-left: -10px
                  margin-top: -10px
                  font-size: 30px
                  opacity: 0
                  color: $color-white

            .wrap-button
              text-align: center
              padding: 10px
              background-color: #f5f5f5
              .filled-button
                display: block
                width: 100%
                margin: 10px 0
                &:last-child
                  background-color: $blue-hue
                  border: 3px solid $blue-hue
                  box-shadow: darken($blue-hue, 10%) 0 3px 0 0
                  &:hover
                    background-color: darken($blue-hue, 10%)
                    border: 3px solid darken($blue-hue, 10%)
                    box-shadow: darken($blue-hue, 0%) 0 3px 0 0
                  &:active
                    background-color: darken($blue-hue, 15%)
                    border: 3px solid darken($blue-hue, 15%)
                &.upload-avatar-btn

        .wrap-base-info-user
          .mobile-menu-profile
            display: none
            .wrap-mobile-menu-user-title
              display: block
              background-color: $color-orange
              padding: 5px
              text-align: center
              color: $color-white
              font-family: $bold-font
              margin-bottom: 20px
              .svg-inline--fa
                font-size: 20px
            .mobile-menu-user-profile
              box-shadow: 0 1px 4px rgba(0,84,186,.2)
              padding: 10px
              margin-bottom: 20px
              &.close
                display: none
              li
                margin-bottom: 10px
                position: relative
                transition: .25s ease
                cursor: pointer
                padding: 5px 0 5px 0
                &:hover
                  background-color: lighten($color-orange, 40%)
                &:active
                  & a
                    color: darken($color-orange, 10%)
                a
                  font-size: 16px
                  color: $color-orange
                  display: block
                  padding-left: 30px
                  .svg-inline--fa
                    position: absolute
                    left: 5px
                    top: 50%
                    transform: translateY(-50%)


          .list-of-base-info
            display: inline-block
            .name-user
              font-family: $bold-font
              color: $blue-hue
              font-size: 20px
            .status-user
              font-family: $light-font
            .id-user
              margin: 20px 0
            .info-menu-user
              display: flex
              align-items: center
              margin-bottom: 20px
              .unicorn-logo
                width: 50px
                margin-right: 10px
              .count-unicorn
                font-family: $bold-font
                color: $blue-hue
                font-size: 20px
                margin-right: 10px
              label
                margin: 0
            .status-profile
              .count-percent-profile
                span
                  font-family: $bold-font
                  color: $color-orange
              .link-status-profile-progressbar
                display: inline-block
                #status-profile-progressbar
                  width: 200px
                  background-color: #ededed
                  .ui-progressbar-value
                    margin: 0
                    background-color: $blue-hue
              .default-link.more-info
                display: block
                font-size: 14px
                margin-bottom: 20px
              .noty-profile
                font-family: $light-font
                color: #7e7e7e
                font-size: 16px
          .wrap-about-user-block
            .open-info-about-user
              width: 100%
              cursor: pointer
              background-color: rgba(2, 136, 209, 0.15)
              font-family: $light-font
              transition: .25s ease
              margin-bottom: 20px
              &:hover
                background-color: lighten(rgba(2, 136, 209, 0.15), 10%)
              &:active
                background-color: darken(rgba(2, 136, 209, 0.15), 10%)
            .list-of-basic-info-about-user
              &.close
                display: none
              .item-info
                @include clearfix
                background-color: rgba(2, 136, 209, 0.15)
                margin-bottom: 5px
                padding: 0px 10px
                .left-title-basic-info
                  float: left
                .right-basic-info
                  float: right
                  width: 50%
                  font-family: $light-font
                  .list-of-item-self-user
                    li
                      padding: 5px
                      background-color: darken(rgba(2, 136, 209, 0.15), 10%)
                      margin: 5px
                    &.soc-list
                      a
                        display: inline-block
                        margin-right: 5px
                        border-radius: 100px
                        background-color: $color-white
                        width: 30px
                        height: 30px
                        text-align: center
                        transition: .25s ease
                        &:hover
                          background-color: #ebebeb
                        &:active
                          background-color: darken(#dcdcdc, 5%)
                        .svg-inline--fa
                          vertical-align: middle
                          color: #0288d1
                .link-blank-profile
                  color: #6b6b6b
                  transition: .25s ease
                  &:hover
                    color: $blue-hue
                  .svg-inline--fa
                    margin-right: 10px

      .wrap-user-cabinet-content
        margin-bottom: 20px
        .case-panel-user-right
          background-color: #fff
          box-shadow: 0 1px 4px rgba(0,84,186,.2)
          padding: 20px
          margin-top: 20px
          .title-panel-user-right
            font-size: 20px
            color: $blue-hue
          .wrap-our-event
            display: block
            box-shadow: 0 1px 4px rgba(0,84,186,.2)
            transition: .25s ease
            margin-bottom: 20px
            &:hover
              box-shadow: 0 8px 24px rgba(0,84,184,0.2)
            .banner-event
              display: block
              width: 100%
              height: 200px
              background-size: cover
              background-repeat: no-repeat
              background-position: center center
            .wrap-about-event
              padding: 20px
              .name-event
                font-size: 16px
                color: $color-orange
                font-family: $bold-font
              .date-event
                color: #525252
                font-family: $light-font
          .item-user-skill
            display: block
            line-height: 16px
            color: #fff
            padding: 10px 20px
            background-color: $blue-hue
            border-radius: 3px
            transition: .25s ease
            margin-bottom: 20px
          .add-new-skills
            color: red
            display: inline-block
            .item-user-skill
              transition: .25s ease
              &:hover
                background-color: darken($blue-hue, 10%)
              &:active
                background-color: lighten($blue-hue, 10%)
          .tableAccrualHistory
            thead
              background-color: $color-orange
              color: $color-white
              font-family: $bold-font
              border: 1px solid #dcdcdc
              .footable-header
                th
                  padding: 5px
            tbody
              font-family: $light-font
              border: 1px solid #dcdcdc
              .footable-detail-row
              tr
                &:nth-child(2n)
                  background-color: #e3e3e3
                td
                  padding: 5px
              .footable-detail-row
                background-color: #ffeacb!important
                tbody
                  border: none
                  tr
                    background-color: #ffeacb
            tfoot
              .footable-paging
                .pagination
                  color: $blue-hue
                  .footable-page
                    &.active
                      .footable-page-link
                        background-color: $blue-hue
          .wrap-button-history-accurual
            margin-top: 20px

          &.wrap-history-participation-cabinet
            .list-of-completed-event
              margin-top: 50px
              .wrap-completed-event
                display: block
                box-shadow: 0 1px 4px rgba(0,84,186,.2)
                transition: .25s ease
                margin-bottom: 20px
                &:hover
                  box-shadow: 0 8px 24px rgba(0,84,184,0.2)
                .banner-event
                  display: block
                  width: 100%
                  height: 150px
                  -webkit-background-size: cover
                  background-size: cover
                  background-repeat: no-repeat
                  background-position: center center
                .wrap-about-event
                  padding: 10px
                  .name-event
                    color: #ff8500
                    font-family: $bold-font
                  .date-event
                    color: #525252
                    font-family: $light-font
                  .current-poins
                    background-color: $blue-hue
                    color: $color-white
                    margin: 0
                    padding: 5px 10px
                    span
                      text-align: center
                      display: block
                      &.type-points
                      &.quantity-points
                        font-family: $light-font
          &.wrap-accrualHistory
            .send-request-for-poins
              margin-bottom: 20px
              #uploads-files
                display: none
          &.wrap-messages-user-cabinet
            .wrap-tab-messages-user
              margin-top: 20px
              display: none
              .tableMessagesUser
                th
                  margin: 0
                  padding: 0
                tbody
                  tr
                    border: 1px solid  #dcdcdc
                    transition: .25s ease
                    &:hover
                      background-color: #e6e6e6
                      cursor: pointer
                    td
                      padding: 5px
                      border-right: 1px solid #dcdcdc
                      &:first-child
                        width: 80%
              .info-message
                background-color: rgba(2,136,209,.15)
                padding: 20px
                text-align: center
          &.wrap-notice-user
            .list-of-notice-user
              width: 100%
              .item-notice
                background-color: rgba(2,136,209,.15)
                padding: 10px
                margin-bottom: 20px
                &:last-child
                  margin-bottom: 0
                span
                  display: block
                  margin-bottom: 5px
                  &.user-id
                    color: $color-orange
                  &.date-notice
                    font-family: $light-font
                    font-size: 14px
                p
                  margin: 0
            .wrap-notice-manager
              .select-menu-manager
                display: flex
                justify-content: space-between
                align-items: center
                background-color: #f6f6f6
                padding: 5px 10px
                margin-bottom: 20px
                border: 1px solid #dcdcdc
              .form-select-type-notice
                .wrap-label-field
                  .title-field
                    display: inline-block
                    margin-bottom: 10px



// PROFILE-USER PAGE CLOSE


// SETTINGS USER PAGE OPEN

main
  .wrap-settings-user
    padding: 20px
    .wrap-menu-settings-user
      background-color: #fff
      box-shadow: 0 1px 4px rgba(0,84,186,.2)
      padding: 20px 0 20px 20px
      .list-of-user-settings
        li
          margin-bottom: 10px
          position: relative
          transition: .25s ease
          cursor: pointer
          padding: 5px 0 5px 0
          &:hover
            background-color: lighten($color-orange, 40%)
          &:active
            & a
              color: darken($color-orange, 10%)
          &.current-item-menu
            background-color: lighten($color-orange, 40%)
            align-self:
              color: darken($color-orange, 10%)
          a
            font-size: 16px
            color: $color-orange
            display: block
            padding-left: 30px
            .svg-inline--fa
              position: absolute
              left: 5px
              top: 50%
              transform: translateY(-50%)
    .wrap-current-edit-user
      background-color: #fff
      box-shadow: 0 1px 4px rgba(0,84,186,.2)
      padding: 20px
      .wrap-title-settings-user
        p
          color: $blue-hue
          font-family: $bold-font
          border-bottom: 1px solid #c9c9c9
          padding-bottom: 5px
      .form-settings-user
        .list-of-settings-form
          width: 300px
          display: flex
          flex-direction: column
          .form-item
            margin-bottom: 20px
            &:last-child
              margin-bottom: 0
              .btn-add-new-inputs
                background-color: $blue-hue
                transition: .25s ease
                color: $color-white
                padding: 5px 7px
                box-shadow: darken($blue-hue, 10%) 0 3px 0 0
                cursor: pointer
                &:hover
                  background-color: darken($blue-hue, 5%)
                &:active
                  background-color: lighten($blue-hue, 5%)
                &.disabled
                  background-color: #93a3ab
                  box-shadow: rgb(119, 129, 134) 0px 3px 0px 0px
            label
              display: block
              .title-input
                display: block
                margin-bottom: 5px
                color: #000
                font-family: $light-font
            .sub-title-settings
              margin-bottom: 10px
              display: block
              color: $color-orange
              font-family: $bold-font
        input.filled-button
          margin-top: 20px
      .wrap-contact-settings-user
        .list-of-soc-settings-user
          .item-input-soc
            margin-bottom: 20px
            .title-input
              padding-left: 25px
              position: relative
              .svg-inline--fa
                position: absolute
                top: 50%
                left: 0
                transform: translateY(-50%)
                color: $blue-hue
              &.kaggle-icon
                img
                  width: 16px
                  position: absolute
                  top: 50%
                  left: 0
                  transform: translateY(-50%)
      .wrap-education-settings-user
        .form-item
          &.item-btn-add-new-inputs
            .wrap-new-education
              padding: 5px 10px
              background-color: rgba(2,136,209,.15)
              margin-top: 10px
              .title-new-education
                color: $color-orange
                margin-top: 20px
                display: block
                margin-bottom: 10px
                border-bottom: 1px solid #c9c9c9
                padding-bottom: 5px
              .list-of-input-new-education
                .item-input-education
                  margin-bottom: 10px
              .title-input
                display: block
                margin-bottom: 5px
                color: #000
                font-family: $light-font
      .wrap-interests-settings-user
        .form-settings-user
          .wrap-select-checkbox-user
            .wrap-skills-user
              .ui-checkboxradio-label
                width: 100%


      .wrap-competitions-settings-user
        .form-settings-user
          .wrap-select-checkbox-user
            .wrap-skills-user
              .ui-checkboxradio-label
                width: 100%

      .form-dynamic-settings-user
        .list-of-dynamic-inputs
          margin-top: 20px
          .item-inputs
            position: relative
            background-color: rgba(9,167,253,.15)
            padding: 20px
            margin-bottom: 10px
            .wrap-input-dynamic
              margin-bottom: 10px
              .simply-custom-select+.ui-selectmenu-button
                width: 100%
              .title-input
                font-family: $light-font
                margin-bottom: 10px
                display: block
          .btn-remove-row-inputs
            color: $color-white
            position: absolute
            background-color: transparent
            padding: 10px 10px 0  0
            top: 0%
            right: 0%
            cursor: pointer
            .svg-inline--fa
              color: #696969
              font-size: 20px
              transition: .25s ease
            &:hover .svg-inline--fa
              color: #ff4545
            &:active .svg-inline--fa
              color: darken(#ff4545, 20%)

// SETTINGS USER PAGE CLOSE

// ALL EVENTS PAGE OPEN

.wrap-full-search-events
  display: flex
  flex-flow: row
  background-color: rgba(9,167,253,.15)
  padding: 20px 0
  align-items: flex-start
  .wrap-float-filter
    flex: 0 0 25%
    position: relative
    .wrap-filter-search-events
      background-color: $color-white
      box-shadow: 0 1px 4px rgba(0,84,186,.2)
      margin-left: 20px
      padding: 20px
      .form-filter-search-events
        .list-of-search-fields
          .wrap-filter-field
            margin-bottom: 10px
            &:last-child
              margin-bottom: 0
            &.menu-search-events
              margin-bottom: 20px
              .item-menu
                margin-right: 20px
                font-size: 16px
                font-family: $bold-font
                &:last-child
                  margin-right: 0
                &.active
                  color: $color-orange
                  border-bottom: 2px solid $color-orange
            .wrap-label-field
              width: 100%
              .title-field
                display: inline-block
                font-size: 18px
                margin-bottom: 10px
    .filled-button
      display: block
      width: 100%
      margin-top: 10px
  .wrap-result-search-events
    flex: 1 1 auto
    .header-result-search
      position: relative
      box-shadow: 0 1px 4px rgba(0,84,186,.2)
      padding: 15px 10px
      background-color: #fff
      .title-result-search-events
        font-size: 20px
        font-family: $bold-font
        color: $color-orange
      .filled-button
        position: absolute
        top: 50%
        right: 2%
        transform: translateY(-50%)
        color: $color-white
    .wrap-list-of-all-events
      padding: 20px 0 20px 0



// ALL EVENTS PAGE CLOSE


// CURRENT COURSE PAGE OPEN
main
  .wrap-current_curse
    background-color: rgba(9,167,253,.15)
    display: flex
    flex-flow: row
    align-items: flex-start
    padding: 15px
    .menu-list-module-left
      flex: 0 0 300px
      background-color: $color-white
      height: auto
      box-shadow: 0 1px 4px rgba(0,84,186,.2)
      .course-title
        background-color: $color-orange
        color: $color-white
        .title-module
          position: relative
          display: block
          a
            display: block
            color: $color-white
            padding: 5px 10px
          .svg-inline--fa
            position: absolute
            top: 50%
            right: 3%
            transform: translateY(-50%)

      .list-of-lessons
        padding: 0
        background-color: $color-white
        li
          margin: 0
          border-bottom: 1px solid #ccc
          transition: .25s ease
          position: relative
          &:hover
            background-color: rgba(9,167,253,.15)
          &:active
            background-color: darken(rgba(9,167,253,.15), 10%)
          a
            padding: 10px
            display: block
          .svg-inline--fa
            position: absolute
            top: 50%
            right: 3%
            transform: translateY(-50%)
            &.fa-check-circle
              color: #9c9c9c
            &.fa-check-circle.completed
              color: #2ecc71
    .content-lesson-wrap
      margin-left: 15px
      flex: 1 1 auto
      background-color: $color-white
      box-shadow: 0 1px 4px rgba(0,84,186,.2)
      padding: 20px 150px 20px 150px
      .title-lesson
        font-family: $bold-font
        font-size: 23px
        color: $color-white
        background-color: $blue-hue
        border-bottom: 3px solid #35475e
        padding: 5px 10px
        display: block
        margin-bottom: 20px
      .sub-title-lesson
        font-family: $bold-font
        font-size: 18px
        color: $blue-hue
        border-bottom: 1px solid #c9c9c9
        display: block
        padding-bottom: 5px
        margin-bottom: 20px
      .video-content
        width: 100%
        height: 650px
        margin: 50px auto
        border: 10px solid $blue-hue
        border-top: 20px solid $blue-hue
        display: inline-block
      .desc-lesson
        font-family: $default-font
        font-size: 16px
        margin-bottom: 20px
      .list-of-files
        margin-bottom: 20px
        border-bottom: 1px solid #c9c9c9
        padding-bottom: 20px
        .link-file
          margin-right: 10px
          font-family: $light-font
          background-color: $color-white
          padding: 5px
          text-align: center
          display: inline-block
          transition: .25s ease
          &:hover
            background-color: #ececec
            color: $blue-hue
          .svg-inline--fa
            color: #e74c3c
            font-size: 50px
            display: inline-block
          .name-file
            display: block
      .wrap-tasks-course
        .wrap-task-line
          position: relative
          margin: 20px 0
          &::after
            content: ''
            position: absolute
            width: 6px
            background-color: #eaeaea
            top: 6px
            bottom: 6px
            left: 10px
            margin-left: -3px
          .container-timeline
            padding: 10px 40px
            position: relative
            .number-question
              position: absolute
              left: -3px
              top: 20px
              text-align: center
              width: 25px
              height: 25px
              display: inline-block
              background-color: $color-white
              border: 2px solid $blue-hue
              border-radius: 50%
              z-index: 1
            &.wrap-right-content
              &::before
                content: " "
                height: 0
                position: absolute
                top: 22px
                width: 0
                z-index: 1
                left: 30px
                border: medium solid white
                border-width: 10px 10px 10px 0
                border-color: transparent #eaeaea transparent transparent
              .content
                padding: 20px 30px
                background-color: #eaeaea
                position: relative
                border-radius: 6px
                .name-question
                  font-family: $bold-font
                  font-size: 18px
                  margin: 0
                  padding: 0
                .clarification-task
                  font-size: 16px
                  font-family: $light-font
                .wrap-filed-task
                  margin-top: 20px
                  .wrap-checkbox
                    .text-checkbox


// CURRENT COURSE PAGE CLOSE


// ADMIN PANEL ORGANIZER OPEN

main
  .wrap-cabinet-organizer
    position: relative
    min-height: 100vh
    .logo
      height: 44px
      padding: 10px
    .header
      position: absolute
      width: 100%
      z-index: 3
      height: 45px
      background-color: #1c2747
      border-bottom: 3px solid #2d3d51
      .logo
        height: 45px
        padding: 10px
        float: left
        display: flex
        justify-content: center
        align-items: center
        z-index: 1
        color: #fff
        .svg-inline--fa
          font-size: 26px
          margin-right: 5px
      .nav-trigger
        position: relative
        float: right
        width: 20px
        height: 45px
        right: 30px
        display: block
        span
          top: 50%
          width: 20px
          height: 2px
          background-color: #fff
          position: absolute
          &:before
            content: ''
            width: 20px
            height: 2px
            background-color: #fff
            position: absolute
            top: -6px
          &:after
            content: ''
            width: 20px
            height: 2px
            background-color: #fff
            position: absolute
            top: 6px

    .side-nav
      position: absolute
      width: 100%
      background-color: #35475e
      height: 100%
      z-index: 1
      display: none
      &.visible
        display: block
      .logo
        background-color: #1c2747
        color: #fff
        display: flex
        justify-content: center
        align-items: center
        span
          display: inline-block
          margin-left: 5px

      nav
        ul
          padding: 0
          margin: 0
          li
            padding: 16px 16px
            border-bottom: 1px solid #3c506a
            position: relative
            &.active
              &:before
                content: ''
                position: absolute
                width: 4px
                height: 100%
                top: 0
                left: 0
                background-color: #fff
            a
              color: #fff
              min-width: 20px
              display: block
              text-align: left

              .svg-inline--fa
                color: #fff
                min-width: 20px
                text-align: center
              span
                &:nth-child(2)
                  margin-left: 10px
                  font-size: 14px
        &.multilevel-menu
          .wrap-multilevel-menu
            font-size: 14px
            .parent-elem-menu
              position: relative
              margin: 0
              background-color: #35475e
              outline: none
              padding: 16px 16px 16px 45px
              color: $color-white
              border: none
              border-bottom: 1px solid #3c506a
              text-align: left
              transition: .25s ease
              &:hover
                background-color: lighten(#35475e, 30%)
              &:active
                background-color: darken(#35475e, 10%)
              .text-element
                display: inline-block
              .svg-inline--fa
                font-size: 16px
                position: absolute
                left: 7%
                top: 50%
                transform: translateY(-50%)
              .ui-icon
                position: absolute
                right: 0
                top: 50%
                transform: translateY(-50%)
                text-indent: unset
                margin: 0
          .list-menu
            border: none
            li
              background-color: lighten(#35475e, 10%)
              padding: 0
              transition: .25s ease
              &:hover
                background-color: lighten(#35475e, 30%)
              &:active
                background-color: darken(#35475e, 10%)
              .svg-inline--fa
                font-size: 16px
                color: $color-white
                position: absolute
                left: 7%
                top: 50%
                transform: translateY(-50%)
              a
                padding: 16px 16px 16px 45px
        .single-element-menu
          font-size: 14px
          padding: 0
          a
            padding: 16px 16px 16px 45px
            transition: .25s ease
            &:hover
              background-color: lighten(#35475e, 30%)
            &:active
              background-color: darken(#35475e, 10%)
            .svg-inline--fa
              font-size: 16px
              color: $color-white
              position: absolute
              left: 7%
              top: 50%
              transform: translateY(-50%)
      .logo
        background-color: #1c2747
        color: #fff
    .main-content
      padding-top: 45px
      .main
        min-height: 100vh
        padding: 20px 10px
        background-color: rgba(9,167,253,.15)
        .wrap-title-admin-page
          width: 100%
          margin-bottom: 20px
          background-color: $color-white
          box-shadow: 0 1px 4px rgba(0,84,186,.2)
          padding: 10px 20px
          .title-admin-page
            font-family: $bold-font
            font-size: 24px
          &.title-and-btn
            display: flex
            justify-content: space-between
        .wrap-admin-content-block
          background-color: $color-white
          box-shadow: 0 1px 4px rgba(0,84,186,.2)
          padding: 20px



// ADMIN PANEL ORGANIZER CLOSE


// ADMIN PANEL MAIN PAGE OPEN

main
  .wrap-cabinet-organizer
    .main-content
      .wrap-admin-main-page
        .wrap-btn

// ADMIN PANEL MAIN PAGE CLOSE


// ADMIN PANEL CREATE EVENT OPEN
main
  .wrap-cabinet-organizer
    &.create-event
      .main-content
        &.create-event-content
          .main
            padding: 20px 10px
            background-color: rgba(9,167,253,.15)
            .wrap-title-admin-page
              width: 100%
              margin-bottom: 20px
              background-color: $color-white
              box-shadow: 0 1px 4px rgba(0,84,186,.2)
              padding: 10px 20px
              .title-admin-page
                font-family: $bold-font
                font-size: 24px
            .wrap-admin-content-block
              background-color: $color-white
              box-shadow: 0 1px 4px rgba(0,84,186,.2)
              padding: 20px
              .wrap-inputs-admin
                width: 500px
                .input-group-admin
                  width: 100%
                  margin: 0 0 30px 0
                  &:last-child
                    margin-bottom: 0
                  .title-field
                    display: block
                  .subtitle-field
                    display: block
                    font-family: $light-font
                    font-size: 14px
                    margin-bottom: 10px
                .wrap-admin-address-input
                  margin-bottom: 30px
                  .input-group-admin
                    margin-bottom: 15px
          .wrap-btn
            text-align: center
            box-shadow: 0 1px 4px rgba(0,84,186,.2)
            margin-top: 10px
            padding: 10px
            background-color: $color-white


// ADMIN PANEL CREATE EVENT CLOSE


// ADMIN PANEL CREATE EVENT 'MAIN' OPEN

main
  .wrap-cabinet-organizer
    &.create-event
      .main-content
        &.create-event-content
          .main
            .wrap-create-event-main-page
              .wrap-admin-content-block
                .wrap-inputs-admin
                  .input-group-admin
                    &.wrap-add-new-input
                      .btn-add-new-something
                        padding: 5px 5px 0px 5px
                        margin-top: 10px
                        font-size: 14px
                      .wrap-input-added
                        position: relative
                        margin-bottom: 20px
                        &:last-of-type
                          margin-bottom: 0
                        .btn-remove-new-input
                          position: absolute
                          top: 50%
                          right: -40px
                          transform: translateY(-50%)


// ADMIN PANEL CREATE EVENT 'MAIN' CLOSE


// PAGE ORGANIZERS OPEN

main
  .wrap-organizers
    .wrap-part-organizers
      padding-bottom: 10px
      .organizers-part
        margin-bottom: 20px
        .title-organizers
          font-family: $bold-font
          font-size: 30px
          display: block
          color: $blue-hue
          border-bottom: 1px solid #c9c9c9
          padding-bottom: 10px
          margin-bottom: 10px
      .about-school
        .title-organizers
          font-family: $bold-font
          font-size: 30px
          display: block
          color: $blue-hue
          border-bottom: 1px solid #c9c9c9
          padding-bottom: 10px
          margin-bottom: 10px

#form-become-organizer
  .form-group
    width: 100%
    margin-bottom: 0
    .field-answer
      width: 100%
      margin-bottom: 20px
  .wrap-checkbox
    width: 100%
    margin-top: 15px
    label
      width: 100%
      padding: 4px 4px 4px 40px
      font-size: 13px
      span
        font-size: 13px
  .wrap-btn
    text-align: center
    .filled-button
      margin-top: 10px

#form-begin-school
  .form-group
    width: 100%
    margin-bottom: 0
    .field-answer
      width: 100%
      margin-bottom: 20px
  .wrap-checkbox
    width: 100%
    margin-top: 15px
    label
      width: 100%
      padding: 4px 4px 4px 40px
      font-size: 13px
      span
        font-size: 13px
  .wrap-btn
    text-align: center
    .filled-button
      margin-top: 10px

#form-accept-notice
  text-align: center
  .wrap-btn
    display: inline-block
    .filled-button.cancel
      margin-left: 10px
      background-color: #e74c3c
      border: 3px solid #e74c3c
      box-shadow: darken(#e74c3c, 10%) 0 3px 0 0
      &:hover
        background-color: darken(#e74c3c, 10%)
        border: 3px solid darken(#e74c3c, 10%)
        box-shadow: darken(#e74c3c, 0%) 0 3px 0 0
      &:active
        background-color: darken(#e74c3c, 15%)
        border: 3px solid darken(#e74c3c, 15%)
    input.filled-button
      background-color: #2ecc71
      border: 3px solid #2ecc71
      box-shadow: darken(#2ecc71, 10%) 0 3px 0 0
      &:hover
        background-color: darken(#2ecc71, 10%)
        border: 3px solid darken(#2ecc71, 10%)
        box-shadow: darken(#2ecc71, 0%) 0 3px 0 0
      &:active
        background-color: darken(#2ecc71, 15%)
        border: 3px solid darken(#2ecc71, 15%)


.default-form-style-pop-up
  .title-field
    display: block
    margin-bottom: 5px
  .input-style-default
    margin-bottom: 20px
  .form-group
    width: 100%
    margin-bottom: 10px
    .field-answer
      width: 100%
      margin-bottom: 20px
  .wrap-checkbox
    width: 100%
    margin-top: 15px
    label
      width: 100%
      padding: 4px 4px 4px 40px
      font-size: 13px
      span
        font-size: 13px
  .wrap-btn
    text-align: center
    .filled-button
      margin-top: 10px


// PAGE ORGANIZERS OPEN


// USER ACTIVATION PAGE OPEN

main
  .wrap-activation-user
    margin: 50px 0
    .wrap-message-activate
      text-align: center
      padding: 20px
      &.success
        background-color: rgba(2,136,209,.15)
      &.error
        background-color: rgba(255, 0, 0, 0.15)
      .svg-inline--fa
        font-size: 100px
        color: $color-orange
      .message
        font-family: $default-font
        font-size: 25px
        padding: 0
        margin: 20px 0 0 0
        a
          color: $blue-hue
          transition: .25s ease
          &:hover
            color: lighten($blue-hue, 10%)
          &:active
            color: darken($blue-hue, 10%)

// USER ACTIVATION PAGE CLOSE

// PAGE IN DEVELOPMENT OPEN

main
  .page-in-development
    margin: 50px 0
    .wrap-message-in-development
      text-align: center
      padding: 20px
      background-color: rgba(2,136,209,.15)
      .svg-inline--fa
        font-size: 100px
        color: $color-orange
      .message
        font-family: $default-font
        font-size: 25px
        padding: 0
        margin: 20px 0 0 0
        a
          color: $blue-hue
          transition: .25s ease
          &:hover
            color: lighten($blue-hue, 10%)
          &:active
            color: darken($blue-hue, 10%)

// USER IN DEVELOPMENT CLOSE

// IF NOTHING FOUND OPEN

.wrap-list-of-all-events
  .wrap-nothing-found
    text-align: center
    padding: 20px
    background-color: rgba(2,136,209,.15)
    .svg-inline--fa
      font-size: 100px
      color: $color-orange
    .message
      font-family: $default-font
      font-size: 25px
      padding: 0
      margin: 20px 0 0 0
      a
        color: $blue-hue
        transition: .25s ease
        &:hover
          color: lighten($blue-hue, 10%)
        &:active
          color: darken($blue-hue, 10%)

// IF NOTHING FOUND CLOSE

// ALERT BLOCK OPEN


.alert-block-message
  background-color: #FF6347
  color: #FFFFFF
  width: 100%
  z-index: 5555555
  .alert-message

    text-align: center
    padding: 5px
    p
      padding: 0
      margin: 0
      .svg-inline--fa
        color: $deep-blue
      a
        color: $deep-blue
        transition: .25s ease
        &:hover
          color: #000000
        &:active
          color: darken($color-orange, 10%)

// ALERT BLOCK CLOSE

// DEFAULT STYLE TABLE OPEN

.default-style-table
  width: 100%
  thead
    background-color: #f6f6f6
    border: 1px solid #dcdcdc
    tr
      th
        padding: 5px
        border: 1px solid #dcdcdc
        &:last-child
          border-right: none
  tbody
    tr
      font-family: $light-font
      border: 1px solid #dcdcdc
      background-color: $color-white
      transition: .25s ease
      &:hover
        background-color: #f6f6f6
      &:first-child
        border-top: none
      td
        border-right: 1px solid #dcdcdc
        padding: 5px
        &:last-child
          border-right: none
        &.action-td
          text-align: center
          font-size: 25px
          .action-group
            position: relative
            display: inline-block
            .btn-open-actions
              .svg-inline--fa
                color: $blue-hue
                transition: .25s ease
                &:hover
                  color: lighten($blue-hue, 10%)
                &:active
                  color: darken($blue-hue, 10%)
            .menu-action
              position: absolute
              right: 0px
              min-width: 160px
              text-align: left
              font-size: 13px
              font-family: $default-font
              color: $blue-hue
              background-color: $color-white
              border: 1px solid #9e9e9e
              z-index: 5000
              &.close
                display: none
              &.open
                display: block
              ul
                li
                  a
                    width: 100%
                    padding: 3px 3px 3px 15px
                    display: inline-block
                    color: black
                    transition: .25s ease
                    &:hover
                      background-color: #4c5566
                      color: $color-white
                    &:active
                      background-color: darken(#4c5566, 10%)
                    .svg-inline--fa
                      margin-right: 5px
                  &.accept-request
                    a
                      .svg-inline--fa
                        color: #4CAF50
                  &.decline-request
                    a
                      .svg-inline--fa
                        color: #e74c3c
                  &:last-child
                    a
                      border-bottom: none




// DEFAULT STYLE TABLE CLOSE

// STYLE UPLOAD FORM OPEN

#upload
  width: 100%
  margin: 40px 0
  ul
    li
      height: 80px

// STYLE UPLOAD FORM CLOSE


// INPUT VALIDATE STYLE

.form-group
  position: relative
  label.form_input_error
    position: absolute !important
    transition: .25s ease
    bottom: 0
    left: 0
    margin: 0
    text-align: left
    font-size: 13px
    font-family: $light-font
    color: red
  input.form_input_error
    box-shadow: 0 0 2px red

.form_checkbox_error
  border: 2px solid red !important

.wrap-checkbox-tab
  position: relative
  .ui-checkboxradio-icon.form_input_error
    border: 2px solid red
  label.form_input_error
    position: absolute !important


// BETA PAGE EVENT
.beta-page-banner-wrap
  .beta-page-banner
    .title-beta-page
      text-align: center
      font-family: $bold-font
      font-size: 50px
      color: $color-orange
      margin-bottom: 30px
    .wrap-img-beta
      img
        width: 100%


// PRESENTATION STYLE

.presentation-wrap
  clear: both
  border: 1px solid #c9c9c9
  z-index: 1000
  width: 100%
  height: 300px
  margin-bottom: 50px
  background: #fff
  .wrap-slides
    z-index: 1
    overflow: hidden
    position: relative
    width: 100%
    height: 100%
    text-align: center
    .slide-wrap
      position: absolute
      width: 100%
      height: 100%
      z-index: 0
      .current-slide
        width: 100%
        height: 100%
        background-size: contain
        background-repeat: no-repeat
        background-position: center center
        display: block
      &.hidden-slide
        display: none
  &.full-screen-pres
    position: fixed
    top: 50%
    bottom: 0
    left: 0
    right: 0
    padding-bottom: 45px
    width: 100%
    height: 100vh
    transform: translateY(-50%)
  &.original-pres
    position: static
    padding: 0
    width: 100%
    top: 0
    transform: translateY(0%)
    height: 600px
  .presentation-controls
    clear: both
    overflow: auto
    background-color: #0288d1
    text-align: center
    padding: 10px
    button
      float: left
      margin-left: 10px
      background: transparent
      color: $color-orange
      &:hover
        cursor: pointer
        color: $white
      &#full-screen
        float: right



@import "media" // Always at the end