/* MEGAMENU */
/*======================================*/
@if $megamenu == true
    .mega-dropdown
        position: static !important
        .navbar-top-links > & > .dropdown-menu.mega-dropdown-menu
            left: 5px
            right: 5px

        .dropdown-header
            font-size: 1em
            padding: 10px 4px

    .dropdown-menu.mega-dropdown-menu
        padding: 15px
        &:after
            content: ''
            display: table
            clear: both



        .list-unstyled
            li
                a
                    display: block
                    padding: 4px
                    background-color: transparent
                    &:not(.disabled-link):hover
                        background-color: rgba(0,0,0,0.065)







/* FAQ */
/*======================================*/
.faq-accordion
    .accordion
        &:not(:last-child)
            padding-bottom: 70px

        .panel-title
            font-weight: 400







/* COMMENTS */
/*======================================*/
@if $comments == true
    .comments
        .media-left
            padding: 0

        .media-body
            padding-left: 10px
            padding-bottom: 15px

        .comment-header small
            margin-left: 5px

        .comment-body
            padding-top: 15px

        .comment-content
            margin-bottom: 10px

        .comment-photos img
            border-radius: 5px

    .comments + .comments
        padding-top: 15px
        border-top: 1px solid $border-color-base







/* TASKLIST */
/*======================================*/
@if $tasklist == true
    .tasklist
        background-color: rgba(0, 0, 0, 0.03)
        border-radius: 3px
        padding: 10px
        li
            cursor: -webkit-grab
            cursor: grab
            background-color: #fff
            border-radius: 3px
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07)
            border-width: 1px 1px 1px 3px
            border-style: solid
            border-color: transparent transparent transparent #b4b4b4
            padding: 10px 15px 10px 15px
            margin-bottom: $grid-gutter-width
            &.ui-sortable-helper
                cursor: -webkit-grabbing !important
                cursor: grabbing


        .task-img
            margin-left: -15px
            margin-right: -16px
            margin-bottom: 15px
            &:first-child
                margin-top: -10px



        .task-info
            border-left-color: $info-bg


        .task-success
            border-left-color: $success-bg


        .task-warning
            border-left-color: $warning-bg


        .task-danger
            border-left-color: $danger-bg


        .task-footer
            display: block
            text-align: justify
            font-size: 0
            &:after
                content: ''
                display: inline-block
                width: 100%

            >span
                font-size: $font-size-base


        .task-placeholder
            border: 1px dashed rgba(124, 124, 124, 0.5) !important
            background-color: rgba(235, 235, 0, 0.35) !important
            padding: 20px







/* FILE MANAGER */
/*======================================*/
@if $file-manager == true
    .file-sidebar .list-group-items
        padding: 10px 10px



    .file-list
        list-style: none
        padding: 20px 0
        >li
            position: relative
            padding: 12px
            border-radius: 1px
            &:after
                content: ''
                display: table
                clear: both

            &:nth-child(odd)
                background-color: rgba(0, 0, 0, 0.025)

            &:hover
                background-color: rgba(0, 0, 0, 0.05)

            &.selected
                background-color: #f2f0c2


        .file-control
            float: left
            width: 50px
            line-height: 3em

        .media
            overflow: hidden
            margin: 0 20px 0 0

        .media-block
            > .media-left
                font-size: 2.5em
                line-height: 1.2em

            .media-body
                vertical-align: middle


        .file-details
            display: block
            overflow: hidden
            margin-right: 50px

        .file-name
            color: #4d627b
            margin-bottom: 0
            font-weight: 700
            display: block
            white-space: nowrap
            overflow: hidden
            text-overflow: ellipsis
            &.single-line
                line-height: 2.5em


        .file-settings
            float: right
            font-size: 85%
            text-align: right
            a, button
                padding: 10px 5px
                display: inline-block



    .file-panel
        border-top: 1px solid $border-color-base
        margin-top: 20px

    .file-toolbar
        padding: 5px 0
        text-align: center
        >.btn-file-toolbar
            padding: 0
            display: inline-block
            float: none !important
            .btn
                padding: 6px



    @media (min-width:768px)
        .file-panel
            border-top: 0
            margin-top: 0

        .file-manager .file-sidebar
            padding-right: 15px
            border-right: 1px solid $border-color-base

        .file-toolbar
            padding: 5px 0
            text-align: left
            > .btn-file-toolbar
                padding: 0 10px
                display: inline-block
                &.pull-right
                    float: right !important

                &:not(:first-child)
                    border-left: 1px solid $border-color-base

                &:first-child
                    padding-left: 0








/* INVOICE */
/*======================================*/
@if $invoice == true
    #container
        .invoice-masthead
            text-align: center
            padding-bottom: 20px
            margin-bottom: 50px
            &:after
                content: ''
                display: table
                clear: both

            > .invoice-text
                margin-bottom: 30px
                padding-bottom: 20px
                border-bottom: 1px solid $border-color-base

            > .invoice-brand
                display: inline-block


        .invoice-logo
            > .media-left, > .media-body
                display: table-cell
                float: none
                vertical-align: middle


        .invoice-details
            min-width: 200px
            margin: 0 auto
            td
                padding: 2px 0


        .invoice-summary
            thead > tr > th
                font-weight: 700
                padding-top: 25px
                padding-bottom: 15px

            tbody > tr > td
                vertical-align: middle
                > strong
                    display: block
                    font-weight: 600
                    color: $body-main-color


            .min-col
                width: 10%
                min-width: 100px


        .invoice-total
            max-width: 320px
            float: right
            > tbody > tr
                td
                    border: 0 !important
                    text-align: right
                    &:first-child
                        color: $body-main-color

                    &:last-child
                        width: 200px





    @media (min-width: 768px)
        #container
            .invoice-masthead
                text-align: left
                border-bottom: 1px solid $border-color-base
                > .invoice-text
                    margin-bottom: 0
                    padding-bottom: 0
                    border-bottom: 0
                    float: right

                > .invoice-brand
                    display: block

                &:after
                    content: ''
                    clear: both


            .invoice-logo
                > .media-left, > .media-body
                    display: table-cell
                    float: none
                    vertical-align: middle


            .invoice-details
                float: right



    @media print
        #container
            .invoice-masthead
                text-align: left
                border-bottom: 1px solid $border-color-base
                > .invoice-text
                    margin-bottom: 0
                    padding-bottom: 0
                    border-bottom: 0
                    float: right

                > .invoice-brand
                    display: block

                &:after
                    content: ''
                    clear: both


            .invoice-bill
                &:after
                    content: ''
                    clear: both

                > div
                    text-align: left
                    float: left

                div:last-child
                    float: right


            .invoice-total
                width: auto

            .invoice-details
                float: right







/* RIBBON */
/* ======================================================================== */
.ribbon
    &-container
        position: relative

    position: absolute
    right: -5px
    top: -5px
    z-index: 1
    overflow: hidden
    width: 75px
    height: 75px
    text-align: right
    span
        font-size: 10px
        font-weight: bold
        color: #FFF
        text-transform: uppercase
        text-align: center
        line-height: 20px
        transform: rotate(45deg)
        -webkit-transform: rotate(45deg)
        width: 100px
        display: block
        background: #E53F50
        box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1)
        position: absolute
        top: 19px
        right: -21px
        &:before
            content: ""
            position: absolute
            left: 0px
            top: 100%
            z-index: -1
            border-left: 3px solid #e53f50
            border-right: 3px solid transparent
            border-bottom: 3px solid transparent
            border-top: 3px solid #e53f50

        &:after
            content: ""
            position: absolute
            right: 0px
            top: 100%
            z-index: -1
            border-left: 3px solid transparent
            border-right: 3px solid #e53f50
            border-bottom: 3px solid transparent
            border-top: 3px solid #e53f50







/* PRICING TABLES */
/* ======================================================================== */
@if $pricing-tables == true
    .pricing
        text-align: center
        padding: 30px 0
        .panel
            position: relative
            > .panel-body
                padding: 20px



        .pricing-title
            font-size: 1.3em
            font-weight: 700
            text-transform: uppercase
            color: $body-main-color

        .pricing-desc
            font-size: .9em
            color: $text-muted

        .pricing-price
            margin: 25px 0
            span
                &:not(:first-child)
                    font-size: 1.2em
                    font-weight: 700

                &:first-child
                    font-size: 4.5em
                    vertical-align: -.5em


            p
                margin-bottom: 0


        .pricing-list
            list-style: none
            padding: 0
            margin: 25px 0
            li
                padding: 5px 0
                color: $body-main-color

            strong
                color: $body-main-color




    @media (min-width: 768px)
        .pricing.pricing-no-gutter-sm
            margin-left: 0
            margin-right: 0
            > [class^="col-sm"], >[class*=" col-sm"]
                padding-left: 0
                padding-right: 0
                &:not(.pricing-featured):not(:first-child)
                    box-shadow: -1px 0 0 $border-color-base


            .pricing-featured > .panel
                position: relative
                margin-top: -25px
                box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.07) !important
                z-index: 2
                > .panel-body
                    > *:not(.btn)
                        padding-top: 10px

                    > .btn
                        margin-top: 35px






    @media (min-width: 992px)
        .pricing.pricing-no-gutter
            margin-left: 0
            margin-right: 0
            > [class^="col-"], >[class*=" col-"]
                padding-left: 0
                padding-right: 0
                &:not(.pricing-featured):not(:first-child) .panel-body
                    box-shadow: -1px 0 0 $border-color-base



        .pricing-featured > .panel
            position: relative
            margin-top: -25px
            box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.07) !important
            z-index: 2
            > .panel-body
                > *:not(.btn)
                    padding-top: 10px

                > .btn
                    margin-top: 35px







/* WIDGET */
/*======================================*/
.widget-header
    padding: 15px 15px 50px 15px
    min-height: 125px
    position: relative
    overflow: hidden

.widget-control
    position: absolute
    padding: 10px
    top: 0
    right: 0

.widget-bg
    position: absolute
    top: 0
    left: 0
    min-width: 100%
    min-height: 100%


.widget-title
    position: relative


.widget-body
    padding: 50px 15px 15px
    position: relative

.widget-img
    position: absolute
    width: 64px
    height: 64px
    left: 50%
    margin-left: -32px
    top: -32px







/* CHAT */
/*======================================*/
@if $chat == true

    .chat-user-list
        > a
            display: block
            padding: 15px 12px

        .media-left
            display: block
            float: left
            position: relative

        .media-body
            display: block
            overflow: hidden
            width: auto


        .chat-info
            float: right
            margin-left: 3px
            text-align: right
            > span:first-child
                display: block

            > span
                margin: .55em 0 0

            > .text-xs
                font-size: .75em


        .chat-text > p
            display: block
            margin-bottom: 5px
            overflow: hidden
            text-overflow: ellipsis
            white-space: nowrap

        .chat-unread .chat-username
            font-weight: 700
            color: $body-main-color





    .chat-body
        background-color: $chat-bg
        > div
            padding-bottom: 20px

        .chat-me
            .media-left
                float: right
                padding: 0 0 0 10px

            .media-body
                text-align: right


        .media-body > div
            > span, > p
                display: inline-block
                padding: 7px 12px
                margin-bottom: 2px
                border-radius: $border-radius-base
                background-color: $chat-primary-speech-bg
                color: $chat-primary-speech-color
                vertical-align: top
                small
                    display: block
                    font-size: .8em
                    margin-top: 5px
                    opacity: .8


            img
                max-width: 256px


        .chat-user .media-body > div
            > span, > p
                background-color: $chat-secondary-speech-bg
                color: $chat-secondary-speech-color


        .chat-meta-day
            display: flex
            margin: 40px 0
            text-align: center
            -webkit-box-pack: justify
            justify-content: space-between
            -webkit-box-align: center
            align-items: center
            &:before, &:after
                content: ''
                -webkit-box-flex: 1
                flex: 1 1 0%
                border-top: 1px solid $border-color-base

            .badge
                background-color: #fff
                color: inherit !important







/* BLOGS */
/*======================================*/
@if $blog == true
    .blog
        .panel
            padding: 15px
            > .blog-header
                margin: -15px -15px 0

            &[class*=" bg-"] h2
                color: #fff


        h2
            font-size: 17px
            margin-top: 5px

        .blog-body
            margin-bottom: 10px


        .blog-img-sm
            padding: 55px 10px

        .blog-header
            margin: -15px -15px 0

        .blog-content
            padding: 10px 0 5px
            &:first-child
                padding-top: 0


        .blog-footer
            border-top: 1px solid rgba(0,0,0,.07)
            padding-top: 10px
            white-space: nowrap
            vertical-align: middle


    .blog-list
        .blog-header
            margin: 0 0 10px !important
            float: left
            width: 60%
            padding-right: 10px
            max-height: 300px
            overflow: hidden

        .blog-header + .blog-content
            float: left
            width: 40%
            padding-left: 0

        .blog-content
            padding-top: 0

        .blog-footer
            content: ''
            clear: both


    .blog-list-full
        .blog-header
            max-height: 300px
            overflow: hidden

        .blog-header img
            transform: translateY(-25%)


    .blog-details
        h1
            font-size: 25px
            margin-top: 0

        .blog-header
            position: relative
            max-height: 50vh
            overflow: hidden
            margin: 0 !important

            small
                position: absolute
                left: 0
                right: 0
                bottom: 0
                padding-top: 3px
                background-color: #fff
                display: block

        .blog-content
            margin-top: 25px

        .blog-body
            font-size: 15px
            line-height: 1.8em
            p
                margin-bottom: 15px


    @media (min-width: 1024px)
        .blog-header .img-responsive
            width: 100%






/* TIMELINE */
/*======================================*/
@if $timeline == true
    .timeline
        position: relative
        padding-bottom: 40px
        background-color: $body-bg
        color: $timeline-color
        &:before, &:after
            background-color: $timeline-border-color
            bottom: 20px
            content: ""
            display: block
            position: absolute

        &:before
            left: 49px
            top: 20px
            width: 1px

        &:after
            left: 46px
            width: 7px
            height: 7px
            border-radius: 50%
            border: 1px solid $timeline-border-color
            background-color: $body-bg



    .timeline-header
        border-radius: $border-radius-base
        clear: both
        margin-bottom: 50px
        margin-top: 50px
        position: relative
        .timeline-header-title
            display: inline-block
            text-align: center
            padding: 7px 15px
            min-width: 100px

        .timeline &:first-child
            margin-bottom: 30px
            margin-top: 15px



    .timeline-stat
        width: 100px
        float: left
        text-align: center
        padding-bottom: 15px

    .timeline-entry
        margin-bottom: 25px
        margin-top: 5px
        position: relative
        clear: both

    .timeline-entry-inner
        position: relative

    .timeline-time
        display: inline-block
        padding: 2px 3px
        background-color: $body-bg
        color: $timeline-color
        font-size: .85em
        max-width: 70px

    .timeline-icon
        border-radius: 50%
        display: block
        margin: 0 auto
        height: 40px
        line-height: 40px
        text-align: center
        width: 40px
        margin-top: 5px
        background-color: $body-bg
        > i
            line-height: 40px
            vertical-align: 0.1em

        & img
            width: 40px
            height: 40px
            border-radius: 50%
            vertical-align: top

        &:empty
            height: 12px
            width: 12px
            margin-top: 20px
            border: 2px solid darken($timeline-border-color, 10%)


    .timeline-label
        background-color: lighten($timeline-bg, 10%)
        border-radius: $border-radius-base
        margin-left: 85px
        padding: 15px
        position: relative
        min-height: 50px
        &:after
            content: ""
            display: block
            position: absolute
            width: 0
            height: 0
            left: 0
            top: 0
            border-top: 9px solid transparent
            border-bottom: 9px solid transparent
            border-right: 9px solid lighten($timeline-bg, 10%)
            margin: 15px 0 0 -9px




    .panel
        .timeline,
        .timeline:after,
        .timeline-time,
        .timeline-label,
        .timeline-icon:not([class^="bg-"]):not([class*=" bg-"])
            background-color: #fff

        .timeline-label
            box-shadow: none
            border: 0
            background-color: lighten($timeline-bg, 2%)
            margin-left: 100px
            &:after
                border-right-color: lighten($timeline-bg, 2%)




    @media (min-width: 768px)
        .two-column.timeline
            text-align: center
            &:before
                left: 50%

            &:after
                left: 50%
                margin-left: -2px

            .timeline-entry
                width: 50%
                text-align: left

            .timeline-stat
                margin-left: -50px

            .timeline-entry:nth-child(odd)
                float: right
                .timeline-label
                    margin-left: 40px


            .timeline-header
                text-align: center

            .timeline-entry:nth-child(even)
                float: left
                .timeline-stat
                    left: 100%
                    position: relative
                    margin-left: -50px

                .timeline-label
                    left: -90px
                    margin-right: -40px
                    &:after
                        left: auto
                        right: 0
                        border-right: 0 solid transparent
                        border-top: 9px solid transparent
                        border-bottom: 9px solid transparent
                        border-left: 9px solid lighten($timeline-bg, 10%)
                        margin: 15px -8px 0 0







/* TAGS */
/*======================================*/
.tag:not(.label)
    background-color: #fff
    font-size: .9em
    padding: 5px 10px
    border-radius: $border-radius-base
    border: 1px solid darken($light-bg, 7%)
    line-height: 1.42857
    vertical-align: middle
    -webkit-transition: all .15s
    transition: all .15s
    margin-bottom: 4px
    & i
        vertical-align: middle

.tag.tag-lg, .btn-group-lg > .tag
    padding: 10px 16px

.tag.tag-sm, .btn-group-sm > .tag
    padding: 4px 7px

.tag.tag-xs, .btn-group-xs > .tag
    padding: 1px 5px







/* EMAIL */
/*======================================*/
@if $email == true
    .mail-nav > li
        > a
            border-radius: 0
            &:hover, &:focus
                background-color: transparent


        &.active > a
            &, &:hover, &:focus
                background-color: rgba(0,0,0,0.07)
                color: inherit
                font-weight: $font-semibold



    .mail-list
        list-style: none
        padding: 0
        > li
            position: relative
            padding: 12px
            border-radius: 1px
            &:after
                content: ''
                display: table
                clear: both

        .mail-list-unread a
            font-weight: 700
            color: $body-main-color

    .mail-nav-unread
        font-weight: 700
        color: $body-main-color !important

    .mail-control
        float: left
        width: 40px

    .mail-star
        position: absolute
        top: 47px
        margin-left: 1px

    .mail-from
        float: left
        width: 105px

    .mail-subject
        margin: 2.3em 0 0 40px
        .label
            margin-right: .5em
            vertical-align: middle
            line-height: 2

    .mail-list
        .mail-from a, .mail-subject a
            display: block
            white-space: nowrap
            overflow: hidden
            text-overflow: ellipsis

    .mail-attach-icon
        width: 35px
        float: right
        text-align: center
        min-height: 1.5em

    .mail-time
        float: right
        color: $text-muted
        font-size: 85%
        text-align: right

    .mail-toggle.navbar-toggle
        display: block

    .mail-message
        padding: 15px 0
        border-width: 1px 0
        border-style: solid
        border-color: $border-color-base
        strong, b
            color: $body-main-color


    @media (min-width: 992px)
        .mail-nav
            width: $aside-width

        .mail-menu
            display: block !important

        .mail-control, .mail-star
            float: left
            width: 50px

        .mail-from
            width: 125px

        .mail-attach-icon
            width: 35px
            float: right
            text-align: right
            min-height: 1.5em

        .mail-time
            width: 75px

        .mail-subject
            overflow: hidden
            margin: 0 20px 0 0



    @media (min-width: 470px)
        .mail-star
            position: static
            float: left
            width: 35px

        .mail-from
            width: 125px
            margin-right: 20px

        .mail-subject
            display: block




    /* MAIL ICON */
    /*======================================*/

    /* COLORS */
    /*======================================*/
    .mail-list
        > li
            &:nth-child(odd)
                background-color: $email-list-odd

            &:hover
                background-color: $email-list-hover

            &.highlight
                background-color: $email-highlight


        a
            &, &:focus
                color: $body-color



    .mail-star
        i
            font-size: 1.2em
            line-height: 1.2

        > a, > a:focus
            color: $email-unstared-color !important

        .mail-starred &
            > a
                color: $email-stared-color !important


        .mail-list & > a:hover
            color: $email-stared-hover !important


    .mail-attach-list
        list-style: none
        padding: 0
        > li
            display: inline-block
            width: 190px
            .mail-file-img, .mail-file-icon
                height: 120px
                overflow: hidden
                text-align: center
                background-color: lighten($gray-bg, 5%)

            i
                font-size: 75px
                line-height: 120px
                opacity: .4

            img
                max-width: 210px
                height: auto


    .mail-attach-label
        min-width: 5em

    .mail-attach-file
        overflow: hidden

    .mail-attach-btn
        float: right

    @media (min-width: 1200px)
        .mail-attach-label
            float: left


    .mail-message-reply
        min-height: 150px
        border: 1px solid $border-color-base
        border-radius: $border-radius-base
        padding: 10px 15px
        cursor: pointer






/* FORM WIZARD */
/*======================================*/
@if $form-wizard == true
    .wz-nav-off > li a
        -webkit-touch-callout: none
        -webkit-user-select: none
        -moz-user-select: none
        -ms-user-select: none
        cursor: default !important


    .wz-icon-inline li > a .icon-wrap
        display: inline-block
        line-height: 1
        text-align: center
        white-space: nowrap
        vertical-align: middle
        color: inherit




    // Black & white icons
    .wz-icon-bw li
        > a .icon-wrap, > a p
            @include transition(all .5s)

        &.active ~ li > a .icon-wrap
            color: $body-color
            background-color: rgba(0,0,0,.17)
            @include transition(all .5s)

        &:not(.active) > a p
            color: $body-color !important
            @include transition(all .5s)




    /* FORM WIZARD : Classic */
    /*======================================*/
    @if $include-form-wizard-classic == true
        .wz-classic
            margin: 0
            padding: 0
            list-style: none
            display: block
            position: relative
            li
                @include transition(all .5s)
                > a
                    color: inherit
                    display: block
                    text-align: center
                    padding: 20px 0
                    .icon-wrap
                        display: inline-block
                        line-height: 1
                        text-align: center
                        white-space: nowrap
                        vertical-align: middle
                        color: inherit



            &:after
                content: ''
                display: table
                clear: both

            .active ~ li
                color: inherit
                background-color : inherit
                a
                    opacity: .5






    @if $include-form-wizard-steps == true

        /* FORM WIZARD : Steps */
        /*======================================*/
        .wz-heading
            position: relative
            .progress
                position: absolute
                left: 0
                right: 0
                top: 50%
                background-color: transparent

            &.wz-w-label .progress
                margin-top: -.5em



        .wz-steps
            margin: 0
            padding: 10px 0
            list-style: none
            display: block
            position: relative
            &:after
                content: ''
                display: table
                clear: both

            li
                @include transition(all, .5s)
                > a
                    color: inherit
                    display: block
                    text-align: center
                    padding: 0
                    .icon-wrap
                        display: inline-block
                        line-height: 1
                        text-align: center
                        white-space: nowrap
                        vertical-align: middle


                .wz-desc
                    opacity: 0
                    @include transition(opacity .5s)

                &:not(.active) .wz-icon
                    display: none




        .wz-steps .active
            ~ li
                color: inherit
                a
                    opacity: .5

                .wz-icon
                    display: inline-block


            .wz-icon-done, ~ li .wz-icon-done
                display: none

            .wz-desc
                opacity: 1
                @include transition(opacity .5s)








/* SCROLL TO TOP BUTTON */
/*======================================*/
@if $nifty-scrollTop == true
    .scroll-top
        display: none
        &.in
            display: block
            background-color: $state-active-bg
            color: $state-active-color
            cursor: pointer
            position: fixed
            bottom: 45px
            right: 15px
            z-index: 999999
            opacity: 1
            padding: 10px
            font-size: 1.5em
            border-radius: 100%
            box-shadow: none
            +transition(all .15s)
            &:hover
                opacity: 1
                box-shadow: 0 0 5px rgba(0,0,0, .2)
                transform: scale(1.1)
                +transition(all .15s)

            &:active
                box-shadow: 0 0 10px rgba(0,0,0, .2) !important
                transform: scale(1.05)
                +transition(all .15s)

            > i
                display: block
                width: 1em
                height: 1em
                line-height: 1.1em







/* NIFTY OVERLAY */
/*======================================*/
@if $nifty-overlay == true
    .panel-overlay-wrap
        position: relative

    .panel-overlay
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        background-color: rgba(255,255,255,0.75)
        text-align: center
        z-index: 795
        &:before
            content: ""
            display: inline-block
            height: 100%
            width: 1px
            vertical-align: middle
            margin-left: -5px


    .panel-overlay-title
        margin: 10px 0 5px

    .panel-overlay-icon
        display: inline-block
        vertical-align: middle

    .panel-overlay-content
        display: inline-block
        vertical-align: middle







/* NIFTY LANGUAGE SELECTOR */
/*======================================*/
@if $nifty-language-selector == true
    .lang-flag
        display: inline-block
        padding: 3px 5px 3px 0

    .lang-selected > .lang-flag
        padding: 0

    .lang-id, .lang-selector .lang-id
        display: none

    .lang-name
        vertical-align: middle

    .lang-selector .lang-id
        display: inline-block

    .lang-selector + .dropdown-menu .lang-name
        display: inline-block

    .lang-selector + .dropdown-menu a
        padding: 10px !important

    .lang-selector + .dropdown-menu .active
        display: none

    @media (min-width: 992px)
        .lang-id, .lang-selector .lang-id
            display: none







/* NIFTY NOTIFICATION */
/*======================================*/
@mixin alert-variant-icon($bg, $color)
    .alert-icon
        color: $color


@if $nifty-noty == true
    .alert-wrap
        margin: 0
        max-height: 0
        overflow: hidden
        padding: 0
        @include transition(max-height .7s linear)
        > .alert
            margin: 0
            box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.35)
            border-radius: 0
            text-align: left
            > .media
                margin: 0
                padding-right: 15px
                > .media-body
                    min-width: 150px
                    width: auto
                    vertical-align: middle


            #page-alert > &
                box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, .04)


        &.in
            max-height: 500px
            @include transition(max-height 1s linear)





    .floating-container .animated.alert-wrap
        overflow: visible

    .floating-container .animated.alert-wrap > .alert
        border-radius: $border-radius-base




    .alert-message
        margin-bottom: 1px
        padding-right: 2ex

    .alert-title
        font-size: 1.12em
        @extend .alert-message
        &:empty
            display: none






    .alert-primary
        +alert-variant-icon($primary-bg, $primary-color)
    .alert-info
        +alert-variant-icon($info-bg, $info-color)
    .alert-success
        +alert-variant-icon($success-bg, $success-color)
    .alert-warning
        +alert-variant-icon($warning-bg, $warning-color)
    .alert-danger
        +alert-variant-icon($danger-bg, $danger-color)
    @if $enable-mint == true
        .alert-mint
            +alert-variant-icon($mint-bg, $mint-color)

    @if $enable-purple == true
        .alert-purple
            +alert-variant-icon($purple-bg, $purple-color)

    @if $enable-pink == true
        .alert-pink
            +alert-variant-icon($pink-bg, $pink-color)

    @if $enable-dark == true
        .alert-dark
            +alert-variant-icon($dark-bg, $dark-color)




    /* Floating */
    /*======================================*/
    .floating-container
        position: fixed
        right: 7px
        left: 7px
        z-index: 99999
        .alert-wrap
            margin-bottom: 5px
            position: relative
            z-index: 990
            &:hover
                opacity: 1

            .alert
                display: inline-block



    #floating-top-container
        top: 7px

    #floating-center-container
        top: 50%
        -ms-transform: translateY(-50%)
        -webkit-transform: translateY(-50%)
        transform: translateY(-50%)

    #floating-bottom-container
        bottom: 7px

    @media (min-width: 768px)
        #floating-top-right,
        #floating-center-right,
        #floating-bottom-right
            right: 7px
            position: fixed
            max-width: 727px
            .alert-wrap
                text-align: right


        #floating-top-center,
        #floating-center-center,
        #floating-bottom-center
            left: 50%
            transform: translateX(-50%)
            position: fixed
            max-width: 727px
            .alert-wrap
                text-align: center


        #floating-top-left,
        #floating-center-left,
        #floating-bottom-left
            position: fixed
            max-width: 727px
            .alert-wrap
                text-align: left


        #floating-center-right,
        #floating-center-left
            -ms-transform: translateY(-50%)
            -webkit-transform: translateY(-50%)
            transform: translateY(-50%)

        #floating-center-center
            -ms-transform: translate(-50%, -50%)
            -webkit-transform: translate(-50%, -50%)
            transform: translate(-50%, -50%)

        #floating-bottom-right,
        #floating-bottom-center,
        #floating-bottom-left
            bottom: 7px






    /*!	Animate.css - http://daneden.me/animate - Licensed under the MIT license - http://opensource.org/licenses/MIT -	Copyright (c) 2014 Daniel Eden	*/

    @-webkit-keyframes fadeOut
        0%
            opacity: 1
        100%
            opacity: 0


    @keyframes fadeOut
        0%
            opacity: 1

        100%
            opacity: 0


    .animated
        -webkit-animation-duration: 1s
        animation-duration: 1s
        -webkit-animation-fill-mode: both
        animation-fill-mode: both


    .fadeOut
        -webkit-animation-name: fadeOut
        animation-name: fadeOut




    .jellyIn
        -webkit-animation: jellyIn .7s linear both
        animation: jellyIn .7s linear both



    /*! Generated with Bounce.js. Edit at http://goo.gl/whUyiv */

    @-webkit-keyframes jellyIn
        0%
            -webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        4.761905%
            -webkit-transform: matrix3d(0.82739, 0, 0, 0, 0, 0.86975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.82739, 0, 0, 0, 0, 0.86975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        9.52381%
            -webkit-transform: matrix3d(0.94685, 0, 0, 0, 0, 1.03237, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.94685, 0, 0, 0, 0, 1.03237, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        14.285714%
            -webkit-transform: matrix3d(1.02254, 0, 0, 0, 0, 1.09127, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.02254, 0, 0, 0, 0, 1.09127, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        19.047619%
            -webkit-transform: matrix3d(1.05171, 0, 0, 0, 0, 1.06355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.05171, 0, 0, 0, 0, 1.06355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        23.809524%
            -webkit-transform: matrix3d(1.04857, 0, 0, 0, 0, 1.01093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.04857, 0, 0, 0, 0, 1.01093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        28.571429%
            -webkit-transform: matrix3d(1.03082, 0, 0, 0, 0, 0.97867, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.03082, 0, 0, 0, 0, 0.97867, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        33.333333%
            -webkit-transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        38.095238%
            -webkit-transform: matrix3d(0.99876, 0, 0, 0, 0, 0.98966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.99876, 0, 0, 0, 0, 0.98966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        42.857143%
            -webkit-transform: matrix3d(0.9928, 0, 0, 0, 0, 1.00257, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.9928, 0, 0, 0, 0, 1.00257, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        47.619048%
            -webkit-transform: matrix3d(0.99231, 0, 0, 0, 0, 1.00725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.99231, 0, 0, 0, 0, 1.00725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        52.380952%
            -webkit-transform: matrix3d(0.99465, 0, 0, 0, 0, 1.00505, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.99465, 0, 0, 0, 0, 1.00505, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        57.142857%
            -webkit-transform: matrix3d(0.99757, 0, 0, 0, 0, 1.00087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.99757, 0, 0, 0, 0, 1.00087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        61.904762%
            -webkit-transform: matrix3d(0.9998, 0, 0, 0, 0, 0.99831, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.9998, 0, 0, 0, 0, 0.99831, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        66.666667%
            -webkit-transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        71.428571%
            -webkit-transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99918, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99918, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        76.190476%
            -webkit-transform: matrix3d(1.00091, 0, 0, 0, 0, 1.0002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.00091, 0, 0, 0, 0, 1.0002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        80.952381%
            -webkit-transform: matrix3d(1.00047, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.00047, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        85.714286%
            -webkit-transform: matrix3d(1.0001, 0, 0, 0, 0, 1.0004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.0001, 0, 0, 0, 0, 1.0004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        90.47619%
            -webkit-transform: matrix3d(0.99989, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.99989, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        95.238095%
            -webkit-transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99987, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99987, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        100%
            -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)


    @keyframes jellyIn
        0%
            -webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        4.761905%
            -webkit-transform: matrix3d(0.82739, 0, 0, 0, 0, 0.86975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.82739, 0, 0, 0, 0, 0.86975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        9.52381%
            -webkit-transform: matrix3d(0.94685, 0, 0, 0, 0, 1.03237, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.94685, 0, 0, 0, 0, 1.03237, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        14.285714%
            -webkit-transform: matrix3d(1.02254, 0, 0, 0, 0, 1.09127, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.02254, 0, 0, 0, 0, 1.09127, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        19.047619%
            -webkit-transform: matrix3d(1.05171, 0, 0, 0, 0, 1.06355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.05171, 0, 0, 0, 0, 1.06355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        23.809524%
            -webkit-transform: matrix3d(1.04857, 0, 0, 0, 0, 1.01093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.04857, 0, 0, 0, 0, 1.01093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        28.571429%
            -webkit-transform: matrix3d(1.03082, 0, 0, 0, 0, 0.97867, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.03082, 0, 0, 0, 0, 0.97867, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        33.333333%
            -webkit-transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        38.095238%
            -webkit-transform: matrix3d(0.99876, 0, 0, 0, 0, 0.98966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.99876, 0, 0, 0, 0, 0.98966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        42.857143%
            -webkit-transform: matrix3d(0.9928, 0, 0, 0, 0, 1.00257, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.9928, 0, 0, 0, 0, 1.00257, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        47.619048%
            -webkit-transform: matrix3d(0.99231, 0, 0, 0, 0, 1.00725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.99231, 0, 0, 0, 0, 1.00725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        52.380952%
            -webkit-transform: matrix3d(0.99465, 0, 0, 0, 0, 1.00505, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.99465, 0, 0, 0, 0, 1.00505, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        57.142857%
            -webkit-transform: matrix3d(0.99757, 0, 0, 0, 0, 1.00087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.99757, 0, 0, 0, 0, 1.00087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        61.904762%
            -webkit-transform: matrix3d(0.9998, 0, 0, 0, 0, 0.99831, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.9998, 0, 0, 0, 0, 0.99831, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        66.666667%
            -webkit-transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        71.428571%
            -webkit-transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99918, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99918, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        76.190476%
            -webkit-transform: matrix3d(1.00091, 0, 0, 0, 0, 1.0002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.00091, 0, 0, 0, 0, 1.0002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        80.952381%
            -webkit-transform: matrix3d(1.00047, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.00047, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        85.714286%
            -webkit-transform: matrix3d(1.0001, 0, 0, 0, 0, 1.0004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1.0001, 0, 0, 0, 0, 1.0004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        90.47619%
            -webkit-transform: matrix3d(0.99989, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.99989, 0, 0, 0, 0, 1.00007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        95.238095%
            -webkit-transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99987, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99987, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        100%
            -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)




.fa-spin, .spin-anim
    display: block !important
    animation: fa-spin 2s infinite linear

@-webkit-keyframes fa-spin
    0%
        -webkit-transform: rotate(0deg)
        transform: rotate(0deg)

    100%
        -webkit-transform: rotate(359deg)
        transform: rotate(359deg)


@keyframes fa-spin
    0%
        -webkit-transform: rotate(0deg)
        transform: rotate(0deg)

    100%
        -webkit-transform: rotate(359deg)
        transform: rotate(359deg)





/* MAGIC FORM CHECKBOXES & RADIOS */
/*======================================*/
/*! Magic Check - v1.0.3 */
/*! https://github.com/forsigner/magic-check  */
/*! Under MIT License */
/*! ====================================*/
/*! IMPROVEMENT BY THEMEON */

@if $magic-check == true
    input[type=radio].magic-radio,
    input[type=checkbox].magic-checkbox
        position: fixed
        z-index: -50
        top: -2000px


    .magic-radio[disabled],
    .magic-checkbox[disabled]
        cursor: not-allowed


    .input-group-addon
        >.magic-radio+label,
        >.magic-checkbox+label
            vertical-align: text-top
            &:before
                left: 0




    .magic-radio+label,
    .magic-checkbox+label
        cursor: pointer
        display: inline-block
        margin: 0
        min-width: 1.34em
        padding: 0
        position: relative
        vertical-align: middle
        &:hover
            &:before
                border-color: $magic-main-color
                +transition(all .3s)


        &:before
            border: 1px solid $magic-border-color
            box-shadow: 0 0 0 0 rgba(0, 0, 0, .07)
            content: ''
            display: block
            height: $magic-checkbox-size
            left: 0
            position: absolute
            top: 0
            width: $magic-checkbox-size
            +transition(all .3s)

        &:after
            content: ''
            display: none
            position: absolute





    .magic-radio+label,
    .magic-checkbox+label
        &:not(:empty)
            margin: 0 5px 0 0
            text-indent: 25px



    .magic-checkbox+label
        min-height: $magic-checkbox-size
        min-width: $magic-checkbox-size


    .btn-group
        .magic-radio+label,
        .magic-checkbox+label
            min-height: 1em
            vertical-align: baseline



    .magic-radio[disabled]+label,
    .magic-checkbox[disabled]+label
        cursor: not-allowed
        opacity: .5
        &:hover,
        &:before,
        &:after
            cursor: not-allowed

        &:hover
            &:before
                animation-name: none




    .magic-radio:checked+label,
    .magic-checkbox:checked+label
        &:before
            animation-name: none

        &:after
            display: block




    @if $magic-material-style
        .magic-radio:focus+label,
        .magic-checkbox:focus+label
            &:before
                box-shadow: 0 0 0 10px rgba(0, 0, 0, .1), inset 0 0 0 10px rgba(0, 0, 0, .1)
                transition: box-shadow .1s


        .magic-radio:checked:focus+label,
        .magic-checkbox:checked:focus+label
            &:before
                box-shadow: 0 0 0 10px rgba($state-active-bg, 0.17), inset 0 0 0 10px rgba(22, 119, 179, 0.17)




    /* Checkboxes */
    /*------------------------------------*/
    .magic-checkbox+label
        &:before
            border-radius: 2px

        &:after
            border-color: #fff
            border-style: solid
            border-width: 0 2px 2px 0
            box-sizing: border-box
            height: 13px
            left: 6px
            top: 0
            transform: rotate(48deg)
            width: 6px

    .magic-checkbox:focus + label:before
        +transition(all .3s)


    .magic-checkbox:checked+label
        &:before
            background: $magic-main-color
            border-color: $magic-main-color



    /* Radio Button */
    /*------------------------------------*/
    .magic-radio+label
        &:before
            border-radius: 50%

        &:after
            background: $magic-main-color
            border-radius: 50%
            height: $magic-dot-size
            left: 4px
            top: 4px
            width: $magic-dot-size



    .magic-radio:checked+label
        &:before
            border: 2px solid $magic-main-color







/* NIFTY FORM CHECKBOXES & RADIOS */
/*======================================*/
@if $nifty-check == true
    $check-size : 19px
    .form-checkbox:not(.btn), .form-radio:not(.btn)
        display: inline-block
        background-color: transparent
        border: 0
        position: relative
        padding: 3px
        line-height: 1em
        min-width: $check-size
        margin: 0

    .input-group-addon > .form-checkbox,
    .input-group-addon > .form-radio
        margin-bottom: 5px

    .form-text
        &.form-checkbox:not(.btn), &.form-radio:not(.btn)
            padding-left: $check-size + ($font-size-base / 2)


    .form-checkbox > input[type="checkbox"],
    .form-radio > input[type="radio"]
        margin-left: -50px
        opacity: 0
        position: absolute !important
        z-index: -1


    #container.show-form .form-checkbox > input[type="checkbox"],
    #container.show-form .form-radio > input[type="radio"]
        margin-top: -.1em
        opacity: 1
        visibility: visible
        z-index: 1

    .form-checkbox:hover, .form-radio:hover
        cursor: pointer

    fieldset[disabled] .form-checkbox:hover,
    fieldset[disabled] .form-radio:hover
        cursor: no-drop

    fieldset[disabled] .form-checkbox,
    fieldset[disabled] .form-radio,
    .form-checkbox.disabled, .form-radio.disabled
        opacity: .5
        cursor: default
        -webkit-touch-callout: none
        -webkit-user-select: none
        -moz-user-select: none
        -ms-user-select: none


    .form-checkbox.disabled::selection,
    .form-radio.disabled::selection
        background: transparent

    .form-checkbox.disabled::-moz-selection,
    .form-radio.disabled::-moz-selection
        background: transparent

    .form-checkbox.form-normal:before,
    .form-radio.form-normal:before
        content: ''
        display: block
        position: absolute
        width: $check-size - 3
        height: $check-size - 3
        background-color: $nifty-check-bg
        border: 1px solid darken($gray-bg, 10%)
        border-radius: $nifty-check-border-radius
        left: 0
        top: 50%
        margin-top: -9px

    .form-radio.form-normal:before
        background-color: transparent

    .has-success .form-checkbox
        color: #24692F

    .has-success .form-checkbox.form-normal:before,
    .has-success .form-checkbox.form-normal:not(.disabled):hover:before,
    .has-success .form-radio.form-normal:before,
    .has-success .form-radio.form-normal:not(.disabled):hover:before
        background-color: $nifty-check-bg
        border-color: $state-success

    #container .has-success .form-radio.form-normal.active:before
        background-color: $state-success
        border-color: $state-success

    .has-warning .form-checkbox
        color: $state-warning

    .has-warning .form-checkbox.form-normal:before,
    .has-warning .form-checkbox.form-normal:not(.disabled):hover:before,
    .has-warning .form-radio.form-normal:before,
    .has-warning .form-radio.form-normal:not(.disabled):hover:before
        background-color: $nifty-check-bg
        border-color: $state-warning


    #container .has-warning .form-radio.form-normal:before
        background-color: $state-warning
        border-color: $state-warning

    .has-error .form-checkbox
        color: $state-danger

    .has-error .form-checkbox.form-normal:before,
    .has-error .form-checkbox.form-normal:not(.disabled):hover:before,
    .has-error .form-radio.form-normal:before,
    .has-error .form-radio.form-normal:not(.disabled):hover:before
        background-color: $nifty-check-bg
        border-color: $state-danger


    #container .has-error .form-radio.form-normal.active:before
        background-color: $state-danger
        border-color: $state-danger

    .form-radio.form-normal:before
        border-radius: 50%


    /* Check Symbol */
    fieldset:not([disabled]) .form-checkbox.form-normal:not(.disabled):hover:after,
    fieldset:not([disabled]) .form-checkbox.form-normal.active:after,
    .form-checkbox.form-normal:not(.disabled):hover:after,
    .form-checkbox.form-normal.active:after
        content: ''
        position: absolute
        height: 6px
        width: 11px
        left: 3px
        top: 50%
        margin-top: -5px
        -webkit-transform: rotate(-45deg)
        -ms-transform: rotate(-45deg)
        transform: rotate(-45deg)

        border-bottom: 2.5px solid $nifty-check-color
        border-left: 2.5px solid $nifty-check-color

    fieldset:not([disabled]) .has-success .form-checkbox.form-normal:not(.disabled):hover:after,
    fieldset:not([disabled]) .has-success .form-checkbox.form-normal.active:after,
    .has-success .form-checkbox.form-normal:not(.disabled):hover:after,
    .has-success .form-checkbox.form-normal.active:after
        border-color: #24692F

    fieldset:not([disabled]) .has-warning .form-checkbox.form-normal:not(.disabled):hover:after,
    fieldset:not([disabled]) .has-warning .form-checkbox.form-normal.active:after,
    .has-warning .form-checkbox.form-normal:not(.disabled):hover:after,
    .has-warning .form-checkbox.form-normal.active:after
        border-color: #f0a238

    fieldset:not([disabled]) .has-error .form-checkbox.form-normal:not(.disabled):hover:after,
    fieldset:not([disabled]) .has-error .form-checkbox.form-normal.active:after,
    .has-error .form-checkbox.form-normal:not(.disabled):hover:after,
    .has-error .form-checkbox.form-normal.active:after
        border-color: #e33a4b


    /* Circle Symbol */
    fieldset:not([disabled]) .form-radio.form-normal:not(.disabled):hover:after,
    fieldset:not([disabled]) .form-radio.form-normal.active:after,
    .form-radio.form-normal:not(.disabled):hover:after,
    .form-radio.form-normal.active:after
        content: ''
        display: block
        position: absolute
        width: 8px
        height: 8px
        background-color: $nifty-check-color
        border-radius: 50%
        left: 4px
        bottom: 50%
        margin-bottom: -3px

    fieldset:not([disabled]) .has-success .form-radio.form-normal:not(.disabled):not(.active):hover:after,
    fieldset:not([disabled]) .has-success .form-radio.form-normal.active:after,
    .has-success .form-radio.form-normal:not(.disabled):not(.active):hover:after,
    .has-success .form-radio.form-normal.active:after
        background-color: $state-success

    fieldset:not([disabled]) .has-warning .form-radio.form-normal:not(.disabled):not(.active):hover:after,
    fieldset:not([disabled]) .has-warning .form-radio.form-normal.active:after,
    .has-warning .form-radio.form-normal:not(.disabled):not(.active):hover:after,
    .has-warning .form-radio.form-normal.active:after
        background-color: $state-warning

    fieldset:not([disabled]) .has-error .form-radio.form-normal:not(.disabled):not(.active):hover:after,
    fieldset:not([disabled]) .has-error .form-radio.form-normal.active:after,
    .has-error .form-radio.form-normal:not(.disabled):not(.active):hover:after,
    .has-error .form-radio.form-normal.active:after
        background-color: $state-danger

    .form-checkbox.form-normal:not(.active):hover:after,
    .form-radio.form-normal:not(.active):hover:after
        opacity: .3


    .form-checkbox.form-normal.form-primary.active:after,
    .form-checkbox.form-normal.form-info.active:after,
    .form-checkbox.form-normal.form-success.active:after,
    .form-checkbox.form-normal.form-warning.active:after,
    .form-checkbox.form-normal.form-danger.active:after,
    .form-checkbox.form-normal.form-mint.active:after,
    .form-checkbox.form-normal.form-purple.active:after,
    .form-checkbox.form-normal.form-pink.active:after,
    .form-checkbox.form-normal.form-dark.active:after
        border-color: #fff


    /* Checkbox & Radio default */
    /*==================================================*/
    .form-checkbox.form-normal:not(.disabled):hover:before,
    .form-radio.form-normal:not(.disabled):hover:before
        border-color: $state-active-bg



    .form-checkbox.form-normal.active:after
        border-color: #404449



    /* Checkbox & Radio primary */
    /*==================================================*/
    .form-checkbox.form-normal.form-primary:hover:before,
    .form-radio.form-normal.form-primary.active:before,
    .form-checkbox.form-normal.form-primary:not(.active):hover:after
        border-color: #489eed


    .form-checkbox.form-normal.form-primary.active:before,
    .form-radio.form-normal.form-primary.active:after
        background-color: $primary-bg
        border-color: $primary-bg



    /* Checkbox & Radio info
    /*==================================================*/
    .form-checkbox.form-normal.form-info:hover:before,
    .form-radio.form-normal.form-info.active:before,
    .form-checkbox.form-normal.form-info:not(.active):hover:after
        border-color: $info-bg

    .form-checkbox.form-normal.form-info.active:before,
    .form-radio.form-normal.form-info.active:after
        background-color: $info-bg
        border-color: $info-bg




    /* Checkbox & Radio success
    /*==================================================*/
    .form-checkbox.form-normal.form-success:hover:before,
    .form-radio.form-normal.form-success.active:before,
    .form-checkbox.form-normal.form-success:not(.active):hover:after
        border-color: $success-bg

    .form-checkbox.form-normal.form-success.active:before,
    .form-radio.form-normal.form-success.active:after
        background-color: $success-bg
        border-color: $success-bg




    /* Checkbox & Radio warning
    /*==================================================*/
    .form-checkbox.form-normal.form-warning:hover:before,
    .form-radio.form-normal.form-warning.active:before,
    .form-checkbox.form-normal.form-warning:not(.active):hover:after
        border-color: $warning-bg


    .form-checkbox.form-normal.form-warning.active:before,
    .form-radio.form-normal.form-warning.active:after
        background-color: $warning-bg
        border-color: $warning-bg




    /* Checkbox & Radio danger
    /*==================================================*/
    .form-checkbox.form-normal.form-danger:hover:before,
    .form-radio.form-normal.form-danger.active:before,
    .form-checkbox.form-normal.form-danger:not(.active):hover:after
        border-color: $danger-bg


    .form-checkbox.form-normal.form-danger.active:before,
    .form-radio.form-normal.form-danger.active:after
        background-color: $danger-bg
        border-color: $danger-bg




    /* Checkbox & Radio mint
    /*==================================================*/
    @if $enable-mint == true
        .form-checkbox.form-normal.form-mint:hover:before,
        .form-radio.form-normal.form-mint.active:before,
        .form-checkbox.form-normal.form-mint:not(.active):hover:after
            border-color: $mint-bg


        .form-checkbox.form-normal.form-mint.active:before,
        .form-radio.form-normal.form-mint.active:after
            background-color: $mint-bg
            border-color: $mint-bg




    /* Checkbox & Radio purple
    /*==================================================*/
    @if $enable-purple == true
        .form-checkbox.form-normal.form-purple:hover:before,
        .form-radio.form-normal.form-purple.active:before,
        .form-checkbox.form-normal.form-purple:not(.active):hover:after
            border-color: $purple-bg

        .form-checkbox.form-normal.form-purple.active:before,
        .form-radio.form-normal.form-purple.active:after
            background-color: $purple-bg
            border-color: $purple-bg



    /* Checkbox & Radio pink
    /*==================================================*/
    @if $enable-pink == true
        .form-checkbox.form-normal.form-pink:hover:before,
        .form-radio.form-normal.form-pink.active:before,
        .form-checkbox.form-normal.form-pink:not(.active):hover:after
            border-color: $pink-bg

        .form-checkbox.form-normal.form-pink.active:before,
        .form-radio.form-normal.form-pink.active:after
            background-color: $pink-bg
            border-color: $pink-bg




    /* Checkbox & Radio dark
    /*==================================================*/
    @if $enable-dark == true
        .form-checkbox.form-normal.form-dark:hover:before,
        .form-radio.form-normal.form-dark.active:before,
        .form-checkbox.form-normal.form-dark:not(.active):hover:after
            border-color: $dark-bg

        .form-checkbox.form-normal.form-dark.active:before,
        .form-radio.form-normal.form-dark.active:after
            background-color: $dark-bg
            border-color: $dark-bg



    .form-inline .form-checkbox,
    .form-inline .form-radio
        padding-right: 15px






    /* CHECKBOXES AND RADIO USE THE FONTAWESOME ICONS */
    /*======================================*/
    .form-checkbox.form-icon:after,
    .form-radio.form-icon:after
        content: "\f096"
        color: inherit
        font-size: $check-size
        display: inline-block
        font-family: FontAwesome
        font-style: normal
        font-weight: normal
        line-height: 1
        position: absolute
        left: 0.1em
        top: 50%
        margin-top: -.44em
        -webkit-font-smoothing: antialiased
        -moz-osx-font-smoothing: grayscale

    .input-group .form-checkbox:after,
    .input-group .form-radio:after
        left: 1px


    .input-group .form-checkbox,
    .input-group .form-radio
        padding: 0


    .form-checkbox.active.form-icon:after
        content: "\f046"



    .form-radio.form-icon:after
        content: "\f10c"


    .form-radio.form-icon.active:after
        content: "\f192"



    .form-checkbox.form-icon.form-primary:after,
    .form-radio.form-icon.form-primary:after
        color: $primary-bg


    .form-checkbox.form-icon.form-info:after,
    .form-radio.form-icon.form-info:after
        color: $info-bg


    .form-checkbox.form-icon.form-success:after,
    .form-radio.form-icon.form-success:after
        color: $success-bg


    .form-checkbox.form-icon.form-warning:after,
    .form-radio.form-icon.form-warning:after
        color: $warning-bg


    .form-checkbox.form-icon.form-danger:after,
    .form-radio.form-icon.form-danger:after
        color: $danger-bg

    @if $enable-mint == true
        .form-checkbox.form-icon.form-mint:after,
        .form-radio.form-icon.form-mint:after
            color: $mint-bg


    @if $enable-purple == true
        .form-checkbox.form-icon.form-purple:after,
        .form-radio.form-icon.form-purple:after
            color: $purple-bg


    @if $enable-pink == true
        .form-checkbox.form-icon.form-pink:after,
        .form-radio.form-icon.form-pink:after
            color: $pink-bg



    @if $enable-dark == true
        .form-checkbox.form-icon.form-dark:after,
        .form-radio.form-icon.form-dark:after
            color: $dark-bg





    /* CHECKBOXES AND RADIO WITH BUTTON STYLE */
    /*======================================*/
    .form-checkbox.form-icon.btn, .form-radio.form-icon.btn
        position: relative
        padding-left: 2.7em
        margin-bottom: 12px


    .form-checkbox.form-icon.btn:active, .form-radio.form-icon.btn:active
        margin-bottom: 12px


    .form-checkbox.form-icon.btn.form-no-label,
    .form-radio.form-icon.btn.form-no-label
        padding-left: 0
        padding-right: 0
        min-height: 2.5em
        min-width: 2.85em



    .form-checkbox.form-icon.btn:after,
    .form-radio.form-icon.btn:after
        margin-top: -0.46em
        left: .45em


    .form-icon.btn.btn-primary:after, .form-icon.btn.btn-info:after,
    .form-icon.btn.btn-success:after, .form-icon.btn.btn-warning:after,
    .form-icon.btn.btn-danger:after, .form-icon.btn.btn-mint:after,
    .form-icon.btn.btn-purple:after, .form-icon.btn.btn-pink:after,
    .form-icon.btn.btn-dark:after
        color: #fff



    .form-checkbox.form-icon.btn.btn-labeled,
    .form-radio.form-icon.btn.btn-labeled
        padding-left: 3em



    .form-checkbox.form-icon.btn.btn-labeled:before,
    .form-radio.form-icon.btn.btn-labeled:before
        content: ''
        position: absolute
        display: inline-block
        margin-left: 0
        width: 2.7em
        height: 100%
        top: 0
        left: 0
        background-color: rgba(0,0,0,.15)



    /* CHECKBOXES AND RADIO BLOCK LEVEL */
    /*======================================*/
    .checkbox.form-block
        padding-top: 4px

    .form-radio.form-block, .form-radio.form-block:active,
    .form-checkbox.form-block, .form-checkbox.form-block:active,
    .form-block > .form-radio, .form-block > .form-radio:active,
    .form-block > .form-checkbox, .form-block .form-checkbox:active
        width: 100%
        margin: 5px 0







/*! ========================================================================*/
/*! Toggle Switch - v1.0 */
/*! A trowel component to display a switch */
/*! https://github.com/Trowel/switch/*!  */
/*! designed by Clément Menant (https://www.behance.net/clementmenant) and Loïc Goyet (https://twitter.com/earvinpepper) for AppVentus (http://appventus.com/) */
/*! Under MIT License */
/*! ========================================================================*/

/*! IMPROVEMENT BY THEMEON.NET */
.toggle-switch
    display: none

    + label
        display: inline-block
        position: relative
        height: $toggle-switch-container-height
        max-height: 1em
        cursor: pointer
        -webkit-touch-callout: none
        margin-right: $toggle-switch-label-margin-right
        margin-bottom: 0
        padding-left: $toggle-switch-container-width + $toggle-switch-label-margin-left
        line-height: $toggle-switch-container-height

        &:empty
            padding-left: $toggle-switch-container-width


        // container
        &:before
            position: absolute
            display: inline-block
            left: 0
            content: ''
            border-style: solid
            width: $toggle-switch-container-width
            height: $toggle-switch-container-height
            border-width: $toggle-switch-container-border-width
            border-color: $toggle-switch-container-border-color
            background-color: $toggle-switch-container-bg
            box-shadow: $toggle-switch-container-box-shadow
            border-radius: $toggle-switch-container-height / 2
            transition: all $toggle-switch-container-transition-duration


        // button
        &:after
            position: absolute
            content: ''
            width: $toggle-switch-container-height - ($toggle-switch-button-margin * 2)
            height: $toggle-switch-container-height - ($toggle-switch-button-margin * 2)
            top: $toggle-switch-button-margin
            left: $toggle-switch-button-margin
            background-color: $toggle-switch-button-bg
            box-shadow: $toggle-switch-button-box-shadow
            border-radius: $toggle-switch-container-height
            transition: left $toggle-switch-button-transition-duration, right $toggle-switch-button-transition-duration



    &:checked
        + label
            // container
            &:before
                background-color: $toggle-switch-container-bg-checked
                transition: all $toggle-switch-container-transition-duration


            // button
            &:after
                left: $toggle-switch-container-width - ($toggle-switch-container-height - ($toggle-switch-button-margin * 2)) - $toggle-switch-button-margin
                transition: left $toggle-switch-button-transition-duration, right $toggle-switch-button-transition-duration




    &:disabled
        + label
            cursor: no-drop

            // container
            &:before
                opacity: $toggle-switch-opacity-disabled





.preload
    .toggle-switch
        + *
            &,
            &:before,
            &:after
                transition: 0 !important

.form-group
    .toggle-switch
        + *
            &,
            &:before,
            &:after
                margin-top: 5px !important







/* NIFTY PURE CSS SELECT COMPONENT */
/*======================================*/
.select
    &.form-group
        display: block
        select
            width: 100%
            height: 33px
            display: block


    position: relative
    display: inline-block
    &:before
        content: ''
        border-style: solid
        border-width: 6px 4px 0 4px
        border-left-color: transparent
        border-right-color: transparent
        border-bottom-color: transparent
        border-top-color: $text-muted
        display: inline-block
        height: 0
        margin: -3px 3px 0
        vertical-align: middle
        width: 0
        position: absolute
        right: .7em
        top: 50%
        z-index: 1

    select
        padding: 6px 2.5em 6px 10px
        border: 1px solid $border-color-base
        border-radius: $border-radius-base
        display: inline-block
        -webkit-appearance: none
        -moz-appearance: none
        appearance: none
        cursor: pointer
        outline: none
        background-color: #fff
        color: inherit
        font-size: $font-size-base
        line-height: 1.42857
        vertical-align: middle
        +transition(border-color .5s)
        &:disabled
            cursor: not-allowed
            opacity: .65

        &:focus
            border-color: $state-active-bg
            +transition(border-color .5s)

        &:-moz-focusring
            color: transparent
            text-shadow: 0 0 0 #444

        &::-ms-expand
            display: none
    &.select-xs > select
        min-width: 100px

    &.select-sm > select
        min-width: 200px

    &.select-md > select
        min-width: 300px

    &.select-lg > select
        min-width: 400px

    &.select-xl > select
        min-width: 100%



.pci-hor-dots, .pci-ver-dots
    height: 1.1em
    width: .55em
    display: block
    position: relative
    &:before
        content: ''
        height: .255em
        width: .255em
        background-color: $body-color
        display: block
        position: absolute
        top: 0
        left: .25em
        box-shadow: 0 .45em 0 $body-color, 0 .9em 0 $body-color


.pci-hor-dots
    transform: rotate(90deg)

.pci-cross:after,
.pci-cross:before
    content: ''
    box-shadow: inset 0 0 0 1px
    position: absolute
    left: 50%
    top: 50%
    -webkit-transform: translate(-50%, -50%)
    transform: translate(-50%, -50%)

.pci-cross:after
    height: .8em
    width: 2px

.pci-cross:before
    width: .78em
    height: 2px


.pci-cross
    display: block
    width: 1.3em
    height: 1.3em
    -webkit-transform: rotate(45deg)
    transform: rotate(45deg)


.pci-circle
    border: 1px solid
    border-radius: 50%




.pci-chevron
    &:before
        border-style: solid
        border-width: 2px 2px 0 0
        content: ''
        display: inline-block
        height: 0.555em
        position: relative
        top: -0.05em
        left: 0
        vertical-align: middle
        width: 0.555em

    &.chevron-up:before
        transform: rotate(-45deg)

    &.chevron-right:before
        transform: rotate(45deg)

    &.chevron-down:before
        top: -0.2em
        transform: rotate(135deg)

    &.chevron-left:before
        transform: rotate(-135deg)


.pci-caret-down, .pci-caret-up,
.pci-caret-left, .pci-caret-right
    display: inline-block
    width: 0
    height: 0
    border-top: .8em solid
    border-right: .5em solid transparent
    border-left: .5em solid transparent

.pci-caret-up
    border-top-width: 0
    border-bottom: .8em solid

.pci-caret-left
    border-bottom: .5em solid transparent
    border-top: .5em solid transparent
    border-right: .8em solid
    border-left-width: 0

.pci-caret-right
    border-bottom: .5em solid transparent
    border-top: .5em solid transparent
    border-left: .8em solid
    border-right-width: 0






/* MIX CLASSES */
/* ======================================================================== */
.list-todo
    .form-checkbox
        input:checked ~ span
            text-decoration: line-through
            opacity: .7

    input:checked ~ label > span
        text-decoration: line-through
        opacity: .7






/* PLUGINS STYLESHEET */
/* ======================================================================== */
.bootstrap-select
    margin-bottom: 15px

.fullscreen
    z-index: 999999 !important

.jqstooltip
    background-color: #fff !important
    border-radius: 3px !important
    border: 0 !important
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3) !important
    color: $body-main-color !important
    padding: 7px 15px !important
    font-size: 13px !important
    font-weight: 700 !important
    -webkit-box-sizing: content-box
    -moz-box-sizing: content-box
    box-sizing: content-box
    transform: translate(-50%, -50%) !important

.jqsfield
    color: $body-color !important
    font-size: 11px !important

.jqsfield > *
    border-radius: 50%
    font-size: 30px
    vertical-align: baseline
    box-shadow: inset 0 0 0 50px, 0 0 1px rgba(0, 0, 0, .3)
    width: .5ex
    height: .5ex
    display: inline-block
    overflow: hidden

.sparklines-bar > canvas
    width: 100% !important

.sparklines-full-content
    margin-left: -10px
    transform: translateX(5px) translateY(5px)

.panel-body > .sparklines-full-content
    margin-left: -45px
    transform: translateX(22px) translateY(29px)

.panel-body > .sparklines-bar.sparklines-full-content
    margin-left: -40px
    transform: translateX(20px) translateY(26px)

.pie-title-center
    display: inline-block
    position: relative
    text-align: center

.pie-value
    display: block
    color: inherit
    position: absolute
    font-size: 14px
    height: 40px
    top: 50%
    left: 0
    right: 0
    margin-top: -20px
    line-height: 40px


.range-vertical
    height: 135px




/* FLOT CHARTS */
/* ======================================================================== */
.flot-full-content
    min-height: 120px
    margin: -28px
    bottom: -8px

.flot-tick-label.tickLabel
    color: $body-color

.flotTip
    background-color: #fff !important
    border-radius: 3px !important
    border: 0 !important
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3) !important
    padding: 7px 15px !important
    font-size: 13px !important

.legend > div
    background-color: transparent !important

.legend > table
    color: inherit !important

.legendInline .legend > div
    background-color: transparent !important
    color: inherit !important
    top: auto !important
    left: auto !important
    z-index: 1

.legendInline .legend table
    position: relative !important
    top: 0 !important
    left: 0 !important
    z-index: 2

.legendInline .legend
    float: right
    position: relative

.legendInline .legend tr
    display: inline-block !important
    margin-left: 10px

.legendColorBox > div
    border: 0 !important
    padding: 3px 5px 4px 0 !important

.legendColorBox > div > div
    border-radius: 50%

legendLabel
    color: $body-color !important

.pieLabelBackground
    border-radius: 3px




// 3RD PARTY PLUGINS
//============================================
body
    @if $chosen == true
        .chosen-container-multi .chosen-choices li.search-choice,
        .chosen-container .chosen-results li.highlighted
            background-color: $state-active-bg
            color: $state-active-color


    @if $select2 == true
        .select2-container--default .select2-results__option[aria-selected="true"]:hover,
        .select2-container--default .select2-selection--multiple .select2-selection__choice,
        .select2-container--default .select2-results__option--highlighted[aria-selected]
            background-color: $state-active-bg
            color: $state-active-color

        .select2-container--default .select2-selection--multiple .select2-selection__choice
            border-color: $state-active-bg



    @if $datepicker == true
        .datepicker table thead
            color: $body-main-color

        .datepicker-switch
            color: $state-active-bg

        .datepicker table tr td span.active.active,
        .datepicker table tr td span.active.disabled.active,
        .datepicker table tr td span.active.disabled:active,
        .datepicker table tr td span.active.disabled.active:hover,
        .datepicker table tr td span.active.disabled:hover:active,
        .datepicker table tr td span.active:active,
        .datepicker table tr td span.active.active:hover,
        .datepicker table tr td span.active:hover:active,
        .datepicker table tr td.active.active,
        .datepicker table tr td.active.highlighted.active,
        .datepicker table tr td.active.highlighted:active,
        .datepicker table tr td.active:active,
        .datepicker table tr td.selected,
        .datepicker table tr td.selected.highlighted
            background-color: $state-active-bg
            border-color: $state-active-bg
            color: $state-active-color

        .datepicker table tr td.active.active:hover
            background-color: darken($state-active-bg, 10%)

        .datepicker table tr td.range
            background-color: lighten($state-active-bg, 30%)


    @if $bootstrap-timepicker == true
        .bootstrap-timepicker-widget table td a
            color: $body-main-color


    @if $noui-slider == true
        .noUi-connect
            background: $state-active-bg


        .noUi-handle
            background: $state-active-bg

        .noUi-marker-large,
        .noUi-marker
            background: rgba(255,255,255, .2)


    @if $datatable == true
        .fixed-table-container tbody .selected td,
        #container .table.dataTable tbody tr.selected
            background-color: $state-active-bg
            color: $state-active-color
            & .text-muted, & .btn-link
                color: $state-active-color



    @if $jstree == true
        .jstree-default .jstree-clicked
            background-color: $state-active-bg !important
            color: $state-active-color


    @if $nestable-list == true
        .dd-dragel
            color: $body-main-color
            .dd-handle-btn:before
                background-color: $state-active-color
                color: $state-active-color


        .dd-dragel .dd-content,
        .dd-dragel > .dd-item .dd-handle
            background-color: $state-active-bg
            color: $state-active-color
            box-shadow: none

        .dd-outline:hover,
        .dd-dashed:hover
            border-color: $state-active-bg

        @keyframes dd-update
            1%
                color: $state-active-color
                background-color: $state-active-bg

            100%
                background-color: #fff



        @keyframes dd-dragging
            1%
                background-color: #fff
                box-shadow: none

            100%
                background-color: $state-active-bg
                color: $state-active-color
                box-shadow: 0 5px 5px rgba(0, 0, 0, .15)


    @if $summernote == true
        .full-content + .note-editor .note-editable.panel-body
            border-width: 1px 0 0 0

        .note-toolbar.panel-heading
            border: 0

        .note-editable.panel-body
            border: 1px solid $border-color-base
