body {
    background-color: #fafafa;
}

/* AJUSTANDO ALGUNS DETALHES */
.nav-tabs-simple {
    background: #fafafa;
}

.macbook-border {
    position: absolute;
    left: 122px;
    top: 40px;
    right: none;
    bottom: 66px;
    height: auto;
    overflow-y: hidden;
}

    .macbook-border > img {
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

.macbook-tiny {
    width: 50%;
}

a:focus, a:hover, a:active {
    color: #48b0f7 !important;
}

/* mudando a cor do input quando desabilitado */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    color: rgba(51, 51, 51, 0.57);
}

/* mudando */
.card.colx {
    width: 100%;
}

#editorDescricao p img {
    width: 70%;
    margin-bottom: 20px;
}


/* MEU ACCORDION PARA POSTS */
.accordions {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

    .accordions.active, .accordions:hover {
        background-color: #ccc;
    }

    .accordions:after {
        content: '\02795'; /* Unicode character for "plus" sign (+) */
        font-size: 13px;
        color: #777;
        float: right;
        margin-left: 5px;
    }

    .accordions.active:after {
        content: "\2796"; /* Unicode character for "minus" sign (-) */
    }

.panel {
    padding: 0 18px;
    background-color: white;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

/* Plugins
--------------------------------------------------
Datepicker
https://github.com/eternicode/bootstrap-datepicker
*/
.datepicker {
    padding: 16px 25px;
    border-radius: 2px;
    font-size: 12px;
}

    .datepicker:after {
        border-bottom-color: #fafafa;
    }

    .datepicker thead tr .datepicker-switch {
        color: #6f7b8a;
        font-size: 13px;
    }

    .datepicker thead tr .next,
    .datepicker thead tr .prev {
        color: #6d5cae;
        content: '';
        font-size: 0px;
    }

        .datepicker thead tr .next:before,
        .datepicker thead tr .prev:before {
            color: #6d5cae;
            font-family: 'FontAwesome';
            font-size: 10px;
        }

        .datepicker thead tr .prev:before {
            content: "\f053";
        }

        .datepicker thead tr .next:before {
            content: "\f054";
        }

    .datepicker thead tr .dow {
        font-family: 'Montserrat';
        color: #6d5cae;
        text-transform: uppercase;
        font-size: 11px;
    }

    .datepicker thead tr th {
        width: 31px;
        height: 29px;
    }

    .datepicker tbody tr .odd {
        color: #d0d3d8;
    }

    .datepicker table tr td {
        width: 31px;
        height: 29px;
    }

        .datepicker table tr td.old,
        .datepicker table tr td.new {
            color: #e6e6e6;
        }

        .datepicker table tr td.day:hover {
            background: #f0f0f0;
        }

        .datepicker table tr td.active {
            background-color: #6d5cae !important;
        }

            .datepicker table tr td.active,
            .datepicker table tr td.active:hover,
            .datepicker table tr td.active.disabled,
            .datepicker table tr td.active.disabled:hover {
                background-image: none;
                text-shadow: none;
                font-weight: 600;
            }

        .datepicker table tr td.today,
        .datepicker table tr td.today:hover,
        .datepicker table tr td.today.disabled,
        .datepicker table tr td.today.disabled:hover {
            background-color: #f0f0f0;
            background-image: none;
            color: #ffffff;
        }

        .datepicker table tr td span {
            border-radius: 4px;
            width: 42px;
            height: 42px;
            line-height: 42px;
        }

            .datepicker table tr td span.active {
                background-color: #6d5cae !important;
            }

                .datepicker table tr td span.active,
                .datepicker table tr td span.active:hover,
                .datepicker table tr td span.active.disabled,
                .datepicker table tr td span.active.disabled:hover {
                    background-image: none;
                    border: none;
                    text-shadow: none;
                }

    .datepicker.dropdown-menu {
        border-color: #e6e6e6;
        color: #626262;
    }

    .datepicker.datepicker-dropdown.datepicker-orient-bottom:before {
        border-color: #e6e6e6;
    }

.datepicker-inline {
    width: auto;
}

.input-daterange .input-group-addon {
    text-shadow: none;
    border: 0;
}

/* USADO PARA AS LISTAS */
.split-view {
    height: 100%;
    position: relative;
}

    .split-view .split-list {
        background: #fff;
        border-left: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;
        height: 100%;
        margin-top: -2px;
        overflow-y: auto;
        position: relative;
        transition: all 0.5s ease;
        webkit-overflow-scrolling: touch;
        webkit-transition: all 0.5s ease;
        width: 100%;
    }

        .split-view .split-list.slideLeft {
            ms-transform: translate(-100%, 0);
            transform: translate(-100%, 0);
            webkit-transform: translate(-100%, 0);
        }

        .split-view .split-list .list-refresh {
            color: #626262;
            opacity: .34;
            position: absolute;
            right: 18px;
            top: 5px;
            z-index: 101;
        }

        .split-view .split-list .list-view-fake-header,
        .split-view .split-list .list-view-group-header {
            background: #f0f0f0;
            color: rgba(98, 98, 98, 0.7);
            font-family: 'Montserrat';
            font-size: 10.8px;
            height: 30px;
            letter-spacing: 0.04em;
            padding-left: 13px;
            padding-top: 6px;
            text-transform: uppercase;
            width: 100%;
        }

        .split-view .split-list .item {
            border-bottom: 1px solid rgba(230, 230, 230, 0.7);
            cursor: pointer;
            height: 117px;
            list-style: none;
            position: relative;
        }

            .split-view .split-list .item.board {
                height: 166px;
            }

            .split-view .split-list .item .inline {
                width: 85%;
            }

            .split-view .split-list .item .inline {
                width: 78%;
            }

                .split-view .split-list .item .inline > * {
                    font-family: arial;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

            .split-view .split-list .item .recipients {
                letter-spacing: 0.01em;
            }

            .split-view .split-list .item .boardsubject {
                letter-spacing: 0.01em;
                color: #3b4752;
                display: -webkit-box;
                font-family: 'Helvetica';
                font-size: 11.5px;
                webkit-box-orient: vertical;
                webkit-line-clamp: 2;
                white-space: normal;
                padding-right: 5px;
            }

            .split-view .split-list .item .boardid {
                color: #121212;
                font-family: arial;
                font-size: 10.1px;
                position: absolute;
                right: 20px;
                top: 15px;
            }

            .split-view .split-list .item .checkbox {
                clear: left;
                display: none;
                float: left;
            }

            .split-view .split-list .item .subject {
                color: #3b4752;
                display: -webkit-box;
                font-family: 'Helvetica';
                font-size: 11.5px;
                height: 36px;
                line-height: 18px;
                webkit-box-orient: vertical;
                webkit-line-clamp: 2;
                white-space: normal;
            }

            .split-view .split-list .item .body {
                font-size: 12.6px;
                word-wrap: break-word;
                opacity: .52;
            }

            .split-view .split-list .item .datetime {
                color: #121212;
                font-family: arial;
                font-size: 11.1px;
                position: absolute;
                right: 20px;
                top: 15px;
            }

    .split-view .split-details {
        height: 100%;
        overflow: auto;
        position: relative;
    }

        .split-view .split-details .no-result {
            bottom: 0;
            left: 0;
            margin-top: -34px;
            opacity: 0.5;
            position: absolute;
            right: 0;
            text-align: center;
            top: 50%;
        }

        .split-view .split-details .actions {
            float: left;
            height: 50px;
        }

            .split-view .split-details .actions li {
                list-style: none;
                position: relative;
            }

                .split-view .split-details .actions li:last-child:after {
                    display: none;
                }

                .split-view .split-details .actions li:after {
                    background: rgba(0, 0, 0, 0.07);
                    content: "";
                    height: 14px;
                    position: absolute;
                    right: -4px;
                    top: 18px;
                    width: 1px;
                }

                .split-view .split-details .actions li a {
                    color: #626262;
                    font-size: 13.1px;
                    font-weight: 600;
                    line-height: 50px;
                    padding: 0 13px;
                    white-space: nowrap;
                }

.inner-content {
    margin-left: 250px;
    margin-top: 0px;
    min-height: 100%;
    overflow: auto;
    padding: 0px;
}

.list-view ul {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    list-style: none;
    margin: 0;
    padding: 0;
}

.list-view li {
    cursor: pointer;
    display: table;
    padding-left: 15px;
    white-space: nowrap;
    width: 100%;
}

    .list-view li:hover {
        background-color: #daeffd;
    }

    .list-view li.active {
        background-color: #fef6dd;
    }

    .list-view li p {
        line-height: 19px;
        margin: 0;
    }

    .list-view li > a {
        display: table;
        margin-right: 15px;
        width: 100%;
    }

.list-view.boreded li > a {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.list-view.boreded li:last-child > a {
    border-bottom: 0;
}

.list-view.boreded li + li {
    border-top: 0;
}

[data-ios="true"] .list-view-group-header,
[data-ios="true"] .list-view-fake-header {
    width: 288px;
}

.list-group-item {
    border: 1px solid #f0f0f0;
}

    .list-group-item.active,
    .list-group-item.active:hover,
    .list-group-item.active:focus {
        background-color: #40d9ca;
        border-color: #40d9ca;
    }

    .list-group-item:first-child {
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
    }

    .list-group-item:last-child {
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
    }

/* FIM USADO PARA AS LISTAS */


/*
Animated buttons
--------------------------------------------------
*/
.btn-animated {
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

    .btn-animated > span {
        display: inline-block;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .btn-animated:before {
        position: absolute;
        height: 100%;
        width: 100%;
        font-size: 100%;
        line-height: 2.5;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

    .btn-animated:after {
        content: '';
        position: absolute;
        z-index: -1;
        -webkit-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

    .btn-animated.from-top:before {
        left: 0;
        top: -100%;
    }

    .btn-animated.from-top:hover:before,
    .btn-animated.from-top.show-icon:before {
        top: 0;
    }

    .btn-animated.from-top:hover > span,
    .btn-animated.from-top.show-icon > span {
        -webkit-transform: translateY(300%);
        -ms-transform: translateY(300%);
        transform: translateY(300%);
    }

    .btn-animated.from-left:before {
        left: -100%;
        top: 0;
    }

    .btn-animated.from-left:hover:before,
    .btn-animated.from-left.show-icon:before {
        left: 0;
    }

    .btn-animated.from-left:hover > span,
    .btn-animated.from-left.show-icon > span {
        -webkit-transform: translateX(200%);
        -ms-transform: translateX(200%);
        transform: translateX(200%);
    }

    .btn-animated.fa:before {
        font-family: FontAwesome;
    }

    .btn-animated.pg:before {
        font-family: "pages-icon";
    }

/* para o select dropdownlist */
.form-group-default .form-select {
    -webkit-appearance: none;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    text-align: left;
    background: #fff;
    width: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 0px;
    height: 35px;
    padding: 6px 33px 6px 0px;
    line-height: 23px;
    z-index: 1;
}

    .form-group-default .form-select:focus {
        background: none;
        -webkit-appearance: none;
    }


/* breadcrumb */

.breadcrumb {
    font-family: 'Montserrat';
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    box-shadow: none;
    background-color: transparent;
    padding: 15px 0;
    margin: 0;
    border: none;
    text-transform: uppercase;
    display: block;
}

    .breadcrumb a {
        margin-left: 5px;
        margin-right: 5px;
        font-family: 'Montserrat';
        font-size: 11px !important;
        font-weight: 400;
        color: #7b7d82;
    }

        .breadcrumb a.active {
            font-weight: 600;
            color: #0090d9;
        }

    .breadcrumb li {
        padding-left: 0px;
    }

    .breadcrumb > li + li:before {
        padding: 0 5px;
        color: #515050;
        font-family: FontAwesome;
        content: "\f105";
        font-weight: bold;
    }

    .breadcrumb a, .breadcrumb i, .breadcrumb span, .breadcrumb li {
        color: #7b7d82;
        font-weight: 300;
        text-shadow: none;
        font-size: 12px;
    }


.article-list h3 {
    padding: 0 0 12px;
    border-bottom: 1px solid #eee;
}

.article-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-list li {
    margin-bottom: 10px;
    font-size: 14px;
}

.article-list a {
    color: #19a8e5;
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
}

    .article-list a:hover {
        text-decoration: underline;
    }


.jumbotron {
    position: relative;
    overflow: hidden;
    display: block;
    padding: 0;
    background-color: #f0f0f0;
}

    .jumbotron .inner {
        position: relative;
        z-index: 2;
    }

    .jumbotron.lg {
        height: auto;
    }

    .jumbotron .cover-photo {
        width: 100%;
        height: inherit;
        overflow: hidden;
        -webkit-transition: opacity 0.3s ease;
        transition: opacity 0.3s ease;
        background-size: cover;
        background-color: #10cfbd;
    }

        .jumbotron .cover-photo img {
            display: none;
        }

    .jumbotron h1 {
        font-size: 44px;
    }

.post img {
    margin: 20px 0px;
}

.post_item {
    padding-bottom: 35px;
}

    .post_item p {
        color: #333;
        font-weight: 400;
    }

.post_item_date a {
    color: #999;
    font-weight: 100;
}

.post.reading {
    line-height: 2.16666667em;
    color: #4a90e2;
}

.post.image {
    margin-bottom: 1.85714286em;
    border-radius: 6px;
    width: 100%;
    max-height: 411px;
    max-width: 617px;
}

.post.title {
    font-weight: normal;
    line-height: 1.3em;
    margin-bottom: -10px;
}

    .post.title h3 {
        text-align: left;
    }

        .post.title h3 a {
            color: black;
        }

.report {
    font-family: 'Courier New';
    font-size: 14px;
    width: 100%;
    margin-top: 20px;
}

    .report thead {
        border-bottom: dotted 1px;
    }

        .report thead td {
            font-weight: bold;
        }

    .report td {
        padding: 10px;
    }

    .report tfoot td {
        font-weight: bold;
    }

#adsense {
    text-align: center;
}

.card {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 1px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    position: relative;
    margin-bottom: 20px;
    width: 100%;
    word-wrap: none
}

    .card .card-header {
        background: 0 0;
        border-radius: 0;
        border-bottom: 0;
        padding-top: 7px;
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 4px;
        position: relative;
        z-index: 3;
    }

        .card .card-header.separator:after {
            content: "";
            height: 1px;
            background: rgba(0, 0, 0, .08);
            left: 16px;
            right: 16px;
            position: absolute;
            bottom: 0
        }

        .card .card-header + .card-body {
            padding-top: 0
        }

        .card .card-header .card-title {
            font-family: montserrat;
            text-transform: uppercase;
            display: inline-block;
            letter-spacing: .06em;
            font-size: 10.5px;
            font-weight: 500;
            margin: 0;
            padding: 0;
            line-height: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-text-stroke: 0;
            filter: alpha(opacity=40);
            -webkit-transition: opacity .3s ease;
            transition: opacity .3s ease
        }

        .card .card-header .card-controls {
            float: right;
            margin-top: -3px
        }

            .card .card-header .card-controls ul {
                margin: 0;
                padding: 0
            }

                .card .card-header .card-controls ul li {
                    display: inline-block;
                    list-style: none;
                    line-height: 0
                }

            .card .card-header .card-controls:after {
                content: "";
                display: table;
                clear: both
            }

        .card .card-header.card-header-hover .card-title {
            opacity: .4
        }

        .card .card-header.card-header-hover:hover .card-title {
            opacity: 1
        }

    .card.card-default {
        border: 1px solid rgba(0, 0, 0, .07)
    }

        .card.card-default > .card-header {
            color: #333
        }

    .card.card-bordered {
        border: 1px solid rgba(230, 230, 230, .7)
    }

    .card.card-borderless {
        border: 0
    }

    .card.card-condensed .card-header {
        padding: 13px 13px 0;
        min-height: 30px
    }

        .card.card-condensed .card-header .card-title {
            opacity: .4
        }

    .card.card-condensed .card-body {
        padding: 13px
    }

    .card.card-hover .card-header .card-title {
        opacity: .4
    }

    .card.card-hover:hover .card-header .card-title {
        opacity: 1
    }

    .card.card-transparent {
        background: 0 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none
    }

        .card.card-transparent .card-body {
            background: 0 0
        }

    .card.full-height {
        height: calc(100%)
    }

        .card.full-height .card-body {
            height: auto;
            width: 100%;
            height: 100%
        }

    .card.card-featured {
        -webkit-box-shadow: -1px 1px 3px 0 rgba(121, 129, 135, .14);
        box-shadow: -1px 1px 3px 0 rgba(121, 129, 135, .14);
        width: calc(100% - 50px);
        float: right
    }

        .card.card-featured .card-title h4 {
            font-family: montserrat;
            font-size: 16px;
            text-transform: uppercase;
            color: #f0f0f0
        }

        .card.card-featured .card-body h3 {
            line-height: 34px;
            font-size: 26px
        }

        .card.card-featured .footer .username {
            line-height: 8px;
            padding-top: 10px;
            font-size: 16px
        }

        .card.card-featured .footer .buttons li {
            display: inline;
            list-style: none;
            font-weight: 700;
            margin-left: 20px
        }

            .card.card-featured .footer .buttons li:first-child {
                margin-left: 0
            }

        .card.card-featured .footer .buttons .heart {
            color: #f55753
        }

        .card.card-featured .footer .buttons .comment {
            color: #626262
        }

        .card.card-featured .ribbon {
            width: 38px;
            height: 38px;
            margin-left: -39px;
            float: left;
            -webkit-box-shadow: inset -3px 0 3px 0 rgba(0, 0, 0, .14);
            box-shadow: inset -3px 0 3px 0 rgba(0, 0, 0, .14)
        }

            .card.card-featured .ribbon.green {
                background: #48b0f7
            }

            .card.card-featured .ribbon.blue {
                background: #10cfbd
            }

    .card.hover-fill:hover {
        background: #f0f0f0
    }

    .card.hover-stroke:hover {
        border: 1px solid #e6e6e6
    }

    .card .card-body {
        padding: 20px
    }

        .card .card-body.no-padding .row {
            margin-left: 0;
            margin-right: 0
        }

        .card .card-body.no-bottom-padding {
            padding-bottom: 0
        }

        .card .card-body.no-top-padding {
            padding-top: 0
        }

        .card .card-body .title {
            margin-top: 0
        }

        .card .card-body.scrollable {
            margin-bottom: 20px
        }

.card-progress {
    background: rgba(255, 255, 255, .8);
    bottom: 0;
    left: 0;
    position: absolute !important;
    right: 0;
    top: 0;
    display: none;
    z-index: 2
}

    .card-progress > .progress, .card-progress > .progress.progress-small {
        height: 3px
    }

    .card-progress > .progress-circle-indeterminate, .card-progress > .card-bar-indeterminate {
        display: block;
        left: 50%;
        margin-left: -17px;
        margin-top: -17px;
        position: absolute;
        top: 50%
    }

    .card-progress > .progress-circle-indeterminate {
        width: 35px;
        height: 35px
    }

.card-maximized {
    position: fixed !important;
    left: 280px;
    top: 59px;
    bottom: 0;
    right: 0;
    z-index: 600;
    margin: 0;
    width: auto
}

.card .pgn-wrapper {
    position: absolute;
    z-index: 602;
    left: 0 !important;
    top: 0 !important
}

.card-header a:not(.btn) {
    color: #626262 !important;
    opacity: .4;
    padding-top: 10px;
    padding-bottom: 10px
}

    .card-header a:not(.btn).card-refresh {
        -webkit-transition: opacity .3s ease;
        transition: opacity .3s ease
    }

        .card-header a:not(.btn).card-refresh.refreshing {
            opacity: 1
        }

.card-header .dropdown-menu .dropdown-item {
    padding: 0 20px !important
}

    .card-header .dropdown-menu .dropdown-item:hover {
        opacity: 1;
        background-color: transparent
    }

.card-header a[data-toggle]:hover {
    opacity: 1
}

.card-icon {
    -moz-osx-font-smoothing: grayscale;
    font-family: pages-icon;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none
}

.card-icon-close:before {
    content: "\e60a"
}

.card-icon-maximize:before {
    content: "\e634"
}

.card-icon-refresh:before {
    content: "\e600"
}

.card-icon-collapse:before {
    content: "\e62c"
}

.card-icon-settings:before {
    content: "\e655"
}

.card-icon-refresh-lg-master, .card-icon-refresh-lg-white {
    width: 15px;
    height: 15px;
    display: block;
    background-size: cover;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

    .card-icon-refresh-lg-master.fade, .card-icon-refresh-lg-white.fade {
        opacity: .1
    }

.card-icon-refresh-lg-master {
    background-image: url(../img/progress/progress-circle-lg-master-static.svg)
}

.card-icon-refresh-lg-white {
    background-image: url(../img/progress/progress-circle-lg-white-static.svg)
}

.card-icon-refresh-lg-master-animated, .card-icon-refresh-lg-white-animated {
    width: 15px;
    height: 15px;
    display: block;
    background-size: cover;
    opacity: 0;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

    .card-icon-refresh-lg-master-animated.active, .card-icon-refresh-lg-white-animated.active {
        opacity: 1
    }

.card-icon-refresh-lg-master-animated {
    background-image: url(../img/progress/progress-circle-lg-master.svg)
}

.card-icon-refresh-lg-white-animated {
    background-image: url(../img/progress/progress-circle-lg-white.svg)
}

.card-scroll {
    height: 100px
}

.sortable .card-header {
    cursor: move
}

.ui-sortable-handle {
    transition: max-height .3s ease 0s
}

.sortable .grid .grid-title {
    cursor: move
}

.ui-sortable {
    min-height: 0 !important
}

.ui-sortable-placeholder {
    border: 1px dotted #000;
    visibility: visible !important;
    height: 100% !important
}

    .ui-sortable-placeholder * {
        visibility: hidden
    }

.sortable-box-placeholder {
    background-color: #f0f0f0;
    border: 1px dashed #e6e6e6;
    display: block;
    margin-top: 0 !important;
    margin-bottom: 24px !important
}

    .sortable-box-placeholder * {
        visibility: hidden
    }

.sortable .card {
    transition: none
}

.sortable-column {
    padding-bottom: 100px
}

.demo-card-scrollable {
    height: 158px
}

.card-body {
    padding: 15px
}


/************ SOCIAL CARD *************/

.social-wrapper, .social {
    height: 100%;
    width: 100%
}

    .social-wrapper .social .jumbotron {
        height: 60vh;
        padding-top: 0
    }

    .social-wrapper .social .cover-photo {
        position: relative;
        margin: 0 auto;
        overflow-x: hidden
    }

        .social-wrapper .social .cover-photo:before {
            background-image: url(../../img/linear_gradient.png);
            background-repeat: repeat-x;
            bottom: 0;
            content: " ";
            height: 270px;
            left: 0;
            position: absolute;
            right: 0;
            z-index: 1
        }

        .social-wrapper .social .cover-photo .pull-bottom {
            z-index: 2
        }

.cover-img-container {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

    .cover-img-container .cover-img {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        min-width: 100%;
        min-height: 100%
    }

.social-user-profile {
    width: 52px
}

    .social-user-profile > .thumbnail-wrapper {
        float: none
    }

.social-wrapper .social .feed {
    overflow-y: hidden;
    width: 100%
}

    .social-wrapper .social .feed > .day {
        white-space: normal;
        display: block;
        width: 100%;
        margin: 0 auto
    }

        .social-wrapper .social .feed > .day:after {
            feed: '';
            display: block;
            clear: both
        }

        .social-wrapper .social .feed > .day:hover > .timeline:after {
            background: #00e8ba
        }

.social-card {
    padding-bottom: 0;
    margin-bottom: 0;
    background: #fff;
    float: left;
    position: relative;
    border-radius: 4px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    margin-bottom: 20px;
    width: 300px;
    border: 1px solid #eaecee
}

    .social-card .circle {
        position: absolute;
        right: 20px;
        top: 20px;
        display: block;
        border-radius: 50%;
        border: 2px solid #f2f4f5;
        width: 9px;
        height: 9px;
        background: #6c757e;
        z-index: 1
    }

        .social-card .circle:hover {
            cursor: pointer
        }

    .social-card.full-width {
        width: 100% !important
    }

    .social-card.status {
        background: #ccfaf1;
        border-radius: 4px;
        padding: 15px 25px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid transparent
    }

        .social-card.status:hover, .social-card.status.hover {
            border-color: #dadcdf !important
        }

        .social-card.status h5 {
            font-size: 12px;
            margin: 0
        }

            .social-card.status h5 .time {
                color: #fff
            }

        .social-card.status h2 {
            color: #373e43;
            font-size: 25px;
            line-height: 32px;
            margin: 0;
            font-weight: 400
        }

        .social-card.status .reactions {
            color: #f2f4f5;
            opacity: .45;
            font-size: 12px;
            margin: 5px 0 0;
            padding: 0
        }

            .social-card.status .reactions li {
                display: inline-block;
                list-style: none;
                padding: 0
            }

        .social-card.status .circle {
            width: 9px;
            height: 9px;
            border: 0;
            background: #00e8ba
        }

    .social-card .card-header, .social-card .card-footer {
        background-color: #fff;
        -webkit-transition: background .2s ease;
        transition: background .2s ease
    }

    .social-card.share .card-header {
        padding: 15px 15px 12px;
        border-bottom: 1px solid #eaecee;
        border-top-right-radius: 2px;
        border-top-left-radius: 2px
    }

        .social-card.share .card-header:hover {
            background: #ccfaf1;
            border-color: #ccfaf1;
            cursor: pointer
        }

            .social-card.share .card-header:hover h6 {
                opacity: .6
            }

        .social-card.share .card-header.last {
            border-bottom: 0
        }

        .social-card.share .card-header .user-pic {
            float: left;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px
        }

            .social-card.share .card-header .user-pic > img {
                width: 30px;
                height: 30px
            }

        .social-card.share .card-header h5 {
            font-weight: 700;
            font-size: 14px;
            margin: 0;
            line-height: 22.7px;
            font-family: arial;
            letter-spacing: -.006em;
            margin-top: -3px
        }

        .social-card.share .card-header h6 {
            font-size: 12px;
            margin: 0;
            font-family: arial;
            opacity: .45
        }

    .social-card.share .card-description {
        padding: 12px 16px 11px;
        font-size: 14px;
        line-height: 21px;
        margin: 0
    }

        .social-card.share .card-description p {
            margin-bottom: 4px
        }

        .social-card.share .card-description .via {
            opacity: .45;
            display: block;
            font-size: 12px;
            font-family: arial
        }

    .social-card.share .card-content {
        position: relative
    }

        .social-card.share .card-content .buttons {
            left: 17px;
            padding: 0;
            position: absolute;
            top: 10px
        }

            .social-card.share .card-content .buttons li {
                display: inline-block;
                list-style: none;
                margin-right: 10px
            }

                .social-card.share .card-content .buttons li a {
                    color: #fff
                }

    .social-card.share .card-feed {
        overflow: hidden;
        position: relative;
        max-height: 400px
    }

        .social-card.share .card-feed:hover .buttons {
            opacity: 1
        }

        .social-card.share .card-feed .buttons {
            position: absolute;
            top: 5px;
            right: 0;
            opacity: 0
        }

            .social-card.share .card-feed .buttons li {
                display: inline-block;
                list-style: none
            }

                .social-card.share .card-feed .buttons li a {
                    color: #fff;
                    opacity: .8;
                    padding: 5px
                }

        .social-card.share .card-feed > * {
            max-width: 100%
        }

    .social-card.share .card-footer {
        padding: 14px 16px 11px;
        font-size: 12px !important
    }

        .social-card.share .card-footer:hover {
            background: #ccfaf1;
            cursor: pointer
        }

            .social-card.share .card-footer:hover .reactions, .social-card.share .card-footer:hover .time {
                opacity: .8
            }

        .social-card.share .card-footer .time {
            float: left;
            opacity: .45;
            font-family: arial;
            margin-top: 1px
        }

        .social-card.share .card-footer .reactions {
            float: right;
            margin: 0;
            padding: 0;
            opacity: .45
        }

            .social-card.share .card-footer .reactions li {
                display: inline-block;
                list-style: none
            }

                .social-card.share .card-footer .reactions li a {
                    color: inherit
                }

    .social-card.share .card-description, .social-card.share .card-feed,
    .social-card.share .card-footer {
        border-color: transparent;
        border-style: solid
    }

    .social-card.share .card-description {
        border-width: 1px
    }

    .social-card.share .card-feed {
        border-width: 0 1px;
        margin-top: -2px
    }

    .social-card.share .card-footer {
        border-width: 0 1px 1px
    }

    .social-card.share.share-other .card-description {
        padding-bottom: 0
    }

    .social-card.share.share-other .card-footer {
        padding-top: 0;
        border-radius: 0
    }

        .social-card.share.share-other .card-footer:hover {
            background: #fff
        }

    .social-card.share.share-other .card-header {
        border-top: 1px solid #ccfaf1
    }

    .social-card.share.share-other .circle {
        background: #fed76e
    }

    .social-card.col1 {
        width: 300px
    }

    .social-card.col2 {
        width: 620px
    }

    .social-card.col3 {
        width: 920px
    }

    .social-card img {
        width: 100%
    }


    .social-card.share.share-other .card-footer {
        border-top: 1px solid #daeffd;
    }




.card-group {
    margin-bottom: 18px
}

    .card-group.horizontal {
        display: block
    }

        .card-group.horizontal .card + .card {
            border-left: 1px solid rgba(0, 0, 0, .07)
        }

    .card-group .card-header {
        padding: 13px 18px 10px 22px
    }

        .card-group .card-header.collapsed {
            background-color: #fff
        }

        .card-group .card-header + .card-collapse .card-body {
            border: 0
        }

        .card-group .card-header .card-title {
            width: 100%
        }

            .card-group .card-header .card-title > a {
                color: #626262;
                font-size: 13px;
                font-weight: 400;
                display: block;
                opacity: 1
            }

                .card-group .card-header .card-title > a:hover {
                    color: #626262 !important
                }

                    .card-group .card-header .card-title > a:hover:after {
                        color: #626262 !important
                    }

                .card-group .card-header .card-title > a:after {
                    font-family: fontawesome;
                    content: "\f056";
                    position: absolute;
                    right: 13px;
                    top: 36%;
                    color: #626262
                }

                .card-group .card-header .card-title > a.collapsed {
                    color: rgba(98, 98, 98, .7);
                    opacity: 1
                }

                    .card-group .card-header .card-title > a.collapsed:after {
                        content: "\f055";
                        color: rgba(98, 98, 98, .7)
                    }

    .card-group .card {
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 0;
        -ms-flex: 1 0 0;
        flex: 1 0 0
    }

        .card-group .card + .card {
            margin-top: 2px
        }

        .card-group .card .card-body {
            height: auto
        }


.quickview-wrapper {
    position: fixed;
    right: -285px;
    top: 0;
    width: 285px;
    background: #fff;
    bottom: 0;
    z-index: 1000;
    box-shadow: 0 0 9px rgba(191, 191, 191, .36);
    border-left: 1px solid rgba(222, 227, 231, .56);
    -webkit-transition: -webkit-transform 400ms cubic-bezier(.05, .74, .27, .99);
    transition: transform 400ms cubic-bezier(.05, .74, .27, .99);
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

    .quickview-wrapper.open {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        -ms-transform: translate(-100%, 0)
    }

    .quickview-wrapper .quickview-toggle {
        position: absolute;
        right: 12px;
        top: 2px;
        color: #788195;
        padding: 6px;
        opacity: .4
    }

        .quickview-wrapper .quickview-toggle:hover {
            opacity: 1
        }

    .quickview-wrapper .nav-tabs {
        background-color: #2b303b;
        position: relative;
        padding: 0 43px
    }

        .quickview-wrapper .nav-tabs > li > a {
            padding: 11px;
            color: #788195;
            border: 0;
            text-align: center;
            font-size: 11px;
            font-weight: 700;
            min-width: 62px;
            line-height: 1.4
        }

            .quickview-wrapper .nav-tabs > li > a > span {
                opacity: .6
            }

            .quickview-wrapper .nav-tabs > li > a:hover > span {
                color: #788195;
                opacity: 1
            }

            .quickview-wrapper .nav-tabs > li > a.active:hover, .quickview-wrapper .nav-tabs > li > a.active:focus {
                background: 0 0;
                color: #cdd0d8;
                opacity: 1
            }

        .quickview-wrapper .nav-tabs > li.active > a, .quickview-wrapper .nav-tabs > li.active > a:hover,
        .quickview-wrapper .nav-tabs > li.active > a:focus {
            background-color: transparent;
            border: 0;
            color: #cdd0d8;
            opacity: 1
        }

        .quickview-wrapper .nav-tabs ~ .tab-content {
            position: absolute;
            padding: 0;
            left: 0;
            right: 0;
            top: 38px;
            bottom: 0;
            height: auto
        }

            .quickview-wrapper .nav-tabs ~ .tab-content > div {
                height: 100%
            }

            .quickview-wrapper .nav-tabs ~ .tab-content ul {
                margin: 0;
                padding: 0
            }

                .quickview-wrapper .nav-tabs ~ .tab-content ul li {
                    list-style: none
                }

            .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes {
                background: #fbf9e3
            }

                .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes a, .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes button {
                    color: #968974
                }

                .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list {
                    position: relative
                }

                    .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list .toolbar {
                        height: 50px;
                        padding: 0 25px
                    }

                        .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list .toolbar ul {
                            margin-top: 10px
                        }

                            .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list .toolbar ul > li {
                                display: inline-block;
                                height: auto
                            }

                                .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list .toolbar ul > li a {
                                    height: 22px;
                                    line-height: 22px;
                                    display: block;
                                    padding: 0 5px;
                                    font-size: 14px
                                }

                                    .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list .toolbar ul > li a:hover,
                                    .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list .toolbar ul > li a.selected {
                                        background: #968974;
                                        color: #fbf9e3
                                    }

                        .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list .toolbar .btn-remove-notes {
                            background: 0 0;
                            bottom: 8px;
                            display: block;
                            left: 50%;
                            margin-left: -40%;
                            position: absolute;
                            width: 83%;
                            border: 1px solid #968974
                        }

                    .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list > ul {
                        padding: 0
                    }

                        .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list > ul li {
                            cursor: pointer;
                            height: 42px;
                            padding: 0 25px;
                            display: block;
                            clear: both
                        }

                            .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list > ul li .left {
                                float: left;
                                width: 65%;
                                height: 100%;
                                padding-top: 9px
                            }

                                .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list > ul li .left .checkbox {
                                    display: none;
                                    float: left
                                }

                                    .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list > ul li .left .checkbox label {
                                        margin-right: 0;
                                        vertical-align: text-top
                                    }

                                .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list > ul li .left p {
                                    margin: 0;
                                    font-size: 13px;
                                    font-weight: 700;
                                    width: 100px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    vertical-align: middle;
                                    display: inline-block
                                }

                            .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list > ul li .right {
                                font-size: 10.5px;
                                text-align: right;
                                width: 35%;
                                line-height: 41px
                            }

                                .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list > ul li .right .date {
                                    margin-right: 10px
                                }

                            .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list > ul li:hover {
                                background: #f4ecd1
                            }

                .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note {
                    background-image: url(../img/notes_lines.png);
                    background-repeat: repeat-y;
                    background-position: 27px top
                }

                    .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note > div {
                        display: table;
                        height: 100%;
                        width: 100%
                    }

                    .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .toolbar {
                        background: #fcfcfa;
                        height: 35px;
                        width: 100%;
                        display: table-row;
                        box-shadow: 0 1px 1px -1px rgba(0, 0, 0, .33)
                    }

                        .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .toolbar > li {
                            display: inline-block;
                            border-right: 1px solid #edecec;
                            float: left;
                            line-height: 37px;
                            padding: 0;
                            text-align: center;
                            width: 40px;
                            height: auto
                        }

                            .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .toolbar > li > a {
                                color: #a5a5a5;
                                display: block;
                                font-size: 14px
                            }

                                .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .toolbar > li > a:hover {
                                    background: #fffaf6
                                }

                                .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .toolbar > li > a.active {
                                    color: #333;
                                    background: #f9f1ea
                                }

                        .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .toolbar:after {
                            position: absolute;
                            content: "";
                            width: 100%
                        }

                    .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .body {
                        display: table-row;
                        height: 100%
                    }

                        .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .body > div {
                            display: table;
                            height: 100%;
                            width: 100%;
                            padding: 0 20px 0 45px;
                            white-space: normal
                        }

                        .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .body .top {
                            height: 50px;
                            display: table-row;
                            clear: both;
                            line-height: 50px;
                            text-align: center
                        }

                            .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .body .top > a {
                                float: left;
                                color: #b0b0a8;
                                margin-left: 10px
                            }

                            .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .body .top > span {
                                font-style: italic;
                                color: #b0b0a8;
                                font-size: 11px
                            }

                        .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .body .content {
                            display: table-row;
                            height: 100%
                        }

                            .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .body .content form {
                                height: 100%
                            }

                            .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .body .content .quick-note-editor {
                                font-size: 12px
                            }

                                .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .body .content .quick-note-editor:focus {
                                    outline: none
                                }

                                .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .body .content .quick-note-editor::-moz-selection {
                                    background: #fef8ae
                                }

                                .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .body .content .quick-note-editor::selection {
                                    background: #fef8ae
                                }

.scroll {
    position: relative;
    overflow: auto
}

.scroll-wrapper > .scroll-element, .scroll-wrapper > .scroll-element div {
    background: 0 0;
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10
}

    .scroll-wrapper > .scroll-element div {
        display: block;
        height: 100%;
        left: 0;
        top: 0;
        width: 100%
    }

    .scroll-wrapper > .scroll-element.scroll-x {
        bottom: 2px;
        height: 7px;
        left: 0;
        min-width: 100%;
        width: 100%
    }

    .scroll-wrapper > .scroll-element.scroll-y {
        height: 100%;
        min-height: 100%;
        right: 2px;
        top: 0;
        width: 4px
    }

    .scroll-wrapper > .scroll-element .scroll-element_outer {
        opacity: .3
    }

    .scroll-wrapper > .scroll-element .scroll-element_size {
        background-color: rgba(0, 0, 0, .07);
        opacity: 0
    }

    .scroll-wrapper > .scroll-element .scroll-bar {
        background-color: #697686
    }

    .scroll-wrapper > .scroll-element.scroll-x .scroll-bar {
        bottom: 0;
        height: 4px;
        min-width: 24px;
        top: auto
    }

    .scroll-wrapper > .scroll-element.scroll-x .scroll-element_outer {
        bottom: 0;
        top: auto;
        left: 2px;
        -webkit-transition: height .2s;
        transition: height .2s
    }

    .scroll-wrapper > .scroll-element.scroll-x .scroll-element_size {
        left: -4px
    }

    .scroll-wrapper > .scroll-element.scroll-y .scroll-bar {
        left: auto;
        min-height: 24px;
        right: 0;
        width: 4px
    }

    .scroll-wrapper > .scroll-element.scroll-y .scroll-element_outer {
        left: auto;
        right: 0;
        top: 2px;
        -webkit-transition: all .2s;
        transition: all .2s
    }

    .scroll-wrapper > .scroll-element.scroll-y .scroll-element_size {
        top: -4px
    }

.scroll-wrapper > .scroll-content {
    box-sizing: inherit !important
}

.scroll-wrapper.auto-hide > .scroll-element .scroll-element_track {
    display: none
}

.scroll-wrapper > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
    left: -11px
}

.scroll-wrapper > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
    top: -11px
}

.scroll-wrapper > .scroll-element:hover .scroll-element_outer, .scroll-wrapper > .scroll-element.scroll-draggable .scroll-element_outer {
    overflow: hidden;
    -ms-filter: "alpha(opacity=70)";
    filter: alpha(opacity=70);
    opacity: .7
}

    .scroll-wrapper > .scroll-element:hover .scroll-element_outer .scroll-element_size,
    .scroll-wrapper > .scroll-element.scroll-draggable .scroll-element_outer .scroll-element_size {
        opacity: 1
    }

    .scroll-wrapper > .scroll-element:hover .scroll-element_outer .scroll-bar,
    .scroll-wrapper > .scroll-element.scroll-draggable .scroll-element_outer .scroll-bar {
        height: 100%;
        width: 100%
    }

.scroll-wrapper > .scroll-element.scroll-x:hover .scroll-element_outer,
.scroll-wrapper > .scroll-element.scroll-x.scroll-draggable .scroll-element_outer {
    height: 10px;
    min-height: 7px
}

.scroll-wrapper > .scroll-element.scroll-y:hover .scroll-element_outer,
.scroll-wrapper > .scroll-element.scroll-y.scroll-draggable .scroll-element_outer {
    min-width: 7px;
    width: 7px
}

img.imagewp {
    width: 230px;
}

.view-port {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    white-space: nowrap;
    word-spacing: 0;
    font-size: 0;
    overflow: hidden
}

    .view-port > * {
        font-size: initial
    }

    .view-port .navbar {
        border-radius: 0;
        padding-left: 0;
        margin-bottom: 0;
        border-left: 0;
        display: table;
        width: 100%;
        top: 0;
        border-top: 0;
        padding: 0;
        border-bottom: 1px solid #e7e7e7
    }

        .view-port .navbar .navbar-inner {
            display: table-cell;
            height: 50px;
            vertical-align: middle
        }

        .view-port .navbar .action {
            position: absolute;
            top: 0;
            line-height: 50px;
            z-index: 1
        }

            .view-port .navbar .action.pull-right {
                right: 0
            }

        .view-port .navbar .view-heading {
            font-size: 15px;
            text-align: center
        }

        .view-port .navbar > p {
            line-height: 12px;
            font-size: 12px;
            margin: 0
        }

        .view-port .navbar.navbar-sm {
            min-height: 35px
        }

            .view-port .navbar.navbar-sm .navbar-inner {
                height: 35px
            }

            .view-port .navbar.navbar-sm .action {
                line-height: 35px
            }

    .view-port .view {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        height: 100%;
        vertical-align: top;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        -webkit-transition: all .4s ease;
        transition: all .4s ease
    }

        .view-port .view:first-child:before {
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0;
            -webkit-transition: opacity .2s linear;
            transition: opacity .2s linear;
            z-index: -1
        }

        .view-port .view:only-child {
            margin: 0
        }

    .view-port.from-top > .view:last-child {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        -ms-transform: translate(-100%, 0)
    }

    .view-port.push > .view:first-child {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        -ms-transform: translate(-100%, 0)
    }

    .view-port.push > .view:last-child {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        -ms-transform: translate(-100%, 0)
    }

    .view-port.push-parrallax > .view:first-child {
        -webkit-transition: all 400ms cubic-bezier(.1, .7, .1, 1);
        transition: all 400ms cubic-bezier(.1, .7, .1, 1);
        -webkit-transform: translate3d(-25%, 0, 0);
        transform: translate3d(-25%, 0, 0);
        -ms-transform: translate(-25%, 0)
    }

        .view-port.push-parrallax > .view:first-child:before {
            opacity: 0;
            z-index: 100
        }

    .view-port.push-parrallax > .view:last-child {
        -webkit-transition: all 400ms cubic-bezier(.1, .7, .1, 1);
        transition: all 400ms cubic-bezier(.1, .7, .1, 1);
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        -ms-transform: translate(-100%, 0);
        box-shadow: 0 0 9px rgba(191, 191, 191, .36)
    }

.chat-view .chat-inner {
    padding: 15px;
    overflow-x: hidden;
    height: calc(100% - 103px)
}

.chat-view .message {
    margin-bottom: 10px;
    line-height: 30px;
    overflow-wrap: break-word;
}

.chat-view .profile-img-wrapper {
    height: 28px;
    width: 28px
}

.chat-view .chat-profile {
    margin: 5px 0 0 5px;
    color: #828282;
    margin-top: 5px;
    font-style: italic;
    font-weight: bolder;
    font-size: 12px;
}

.chat-view .profile-me {
    text-align: right;
}

.chat-view .profile-them {
    text-align: left;
}

.chat-view .chat-bubble {
    position: relative;
    border-radius: 7px;
    padding: 10px 20px;
    font-size: 14px;
    line-height: 16px;
    margin: 0px;
    max-width: 60%;
    white-space: normal
}

    .chat-view .chat-bubble > p {
        margin: 0
    }

    .chat-view .chat-bubble > img {
        max-width: 50%;
        max-height: 300px;
    }

    .chat-view .chat-bubble.from-me {
        background-color: #0a80ff;
        color: #fff;
        opacity: .8;
        float: right;
        border: 1px solid rgba(0, 0, 0, .07)
    }

    .chat-view .chat-bubble.from-them {
        color: #2c2c2c;
        background: #ebebeb;
        position: relative;
        opacity: .8;
        float: left;
        border: 1px solid #f0f5f8
    }



    .chat-view .chat-bubble.from-me > a {
        color: #fff;
    }

.chat-view .chat-input {
    border: 0;
    height: 45px
}

    .chat-view .chat-input:focus, .chat-view .chat-input:active {
        background-color: #fff
    }

.chat-view .user-controls {
    padding-top: 12px
}

.chat-user-list > a {
    height: 60px
}