.avatar {
    display: inline-block;
    margin-bottom: 0;
    height: 2.7rem;
    width: 2.7rem;
    border-radius: 50%;
}

.logo-chat img {
	max-width:40px;
}

    .avatar .avatar-title {
        color: hsla(0, 0%, 100%, 0.8);
        background: #f2f2f2;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        font-size: 18px;
    }

    .avatar > a {
        width: 100%;
        height: 100%;
        display: block;
        transition: color 0.3s;
        color: #ff5252;
    }

        .avatar > a > img,
        .avatar > img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            display: inherit;
        }

    .avatar.avatar-sm {
        height: 1.7rem;
        width: 1.7rem;
    }

        .avatar.avatar-sm .avatar-title {
            font-size: 14px;
        }

        .avatar.avatar-sm.avatar-state-danger:before,
        .avatar.avatar-sm.avatar-state-dark:before,
        .avatar.avatar-sm.avatar-state-info:before,
        .avatar.avatar-sm.avatar-state-light:before,
        .avatar.avatar-sm.avatar-state-primary:before,
        .avatar.avatar-sm.avatar-state-secondary:before,
        .avatar.avatar-sm.avatar-state-success:before,
        .avatar.avatar-sm.avatar-state-warning:before {
            width: 0.9rem;
            height: 0.9rem;
        }

    .avatar.avatar-lg {
        height: 4.2rem;
        width: 4.2rem;
    }

        .avatar.avatar-lg .avatar-title {
            font-size: 29px;
        }

        .avatar.avatar-lg.avatar-state-danger:before,
        .avatar.avatar-lg.avatar-state-dark:before,
        .avatar.avatar-lg.avatar-state-info:before,
        .avatar.avatar-lg.avatar-state-light:before,
        .avatar.avatar-lg.avatar-state-primary:before,
        .avatar.avatar-lg.avatar-state-secondary:before,
        .avatar.avatar-lg.avatar-state-success:before,
        .avatar.avatar-lg.avatar-state-warning:before {
            width: 1.2rem;
            height: 1.2rem;
            right: -1px;
        }

    .avatar.avatar-xl {
        height: 6.5rem;
        width: 6.5rem;
    }

        .avatar.avatar-xl .avatar-title {
            font-size: 39px;
        }

        .avatar.avatar-xl.avatar-state-danger:before,
        .avatar.avatar-xl.avatar-state-dark:before,
        .avatar.avatar-xl.avatar-state-info:before,
        .avatar.avatar-xl.avatar-state-light:before,
        .avatar.avatar-xl.avatar-state-primary:before,
        .avatar.avatar-xl.avatar-state-secondary:before,
        .avatar.avatar-xl.avatar-state-success:before,
        .avatar.avatar-xl.avatar-state-warning:before {
            width: 1.2rem;
            height: 1.2rem;
            top: 2px;
            right: 7px;
        }

    .avatar.avatar-state-danger,
    .avatar.avatar-state-dark,
    .avatar.avatar-state-info,
    .avatar.avatar-state-light,
    .avatar.avatar-state-primary,
    .avatar.avatar-state-secondary,
    .avatar.avatar-state-success,
    .avatar.avatar-state-warning {
        position: relative;
    }

        .avatar.avatar-state-danger:before,
        .avatar.avatar-state-dark:before,
        .avatar.avatar-state-info:before,
        .avatar.avatar-state-light:before,
        .avatar.avatar-state-primary:before,
        .avatar.avatar-state-secondary:before,
        .avatar.avatar-state-success:before,
        .avatar.avatar-state-warning:before {
            content: "";
            position: absolute;
            display: block;
            width: 0.9rem;
            height: 0.9rem;
            border-radius: 50%;
            top: -2px;
            right: -2px;
            border: 3px solid #fff;
        }

        .avatar.avatar-state-primary:before {
            background: #ff5252;
        }

        .avatar.avatar-state-success:before {
            background: #7cd420;
        }

        .avatar.avatar-state-danger:before {
            background: #f33333;
        }

        .avatar.avatar-state-warning:before {
            background: #fecb00;
        }

        .avatar.avatar-state-info:before {
            background: #11a5ed;
        }

        .avatar.avatar-state-secondary:before {
            background: #a6c;
        }

        .avatar.avatar-state-light:before {
            background: #e6e6e6;
        }

        .avatar.avatar-state-dark:before {
            background: #3a3f51;
        }

.avatar-border-danger,
.avatar-border-info,
.avatar-border-primary,
.avatar-border-secondary,
.avatar-border-success,
.avatar-border-warning {
    position: relative;
}

    .avatar-border-danger:after,
    .avatar-border-info:after,
    .avatar-border-primary:after,
    .avatar-border-secondary:after,
    .avatar-border-success:after,
    .avatar-border-warning:after {
        content: "";
        display: block;
        pointer-events: none;
        position: absolute;
        top: -4px;
        right: -4px;
        bottom: -4px;
        left: -4px;
        border-radius: 50%;
        border: 2px solid #ff5252;
    }

    .avatar-border-primary:after {
        border: 2px solid #ff5252;
    }

    .avatar-border-secondary:after {
        border: 2px solid #a6c;
    }

    .avatar-border-success:after {
        border: 2px solid #7cd420;
    }

    .avatar-border-info:after {
        border: 2px solid #11a5ed;
    }

    .avatar-border-danger:after {
        border: 2px solid #f33333;
    }

    .avatar-border-warning:after {
        border: 2px solid #fecb00;
    }

.avatar-group {
    display: inline-flex;
    margin-right: 2.2rem;
}

    .avatar-group .avatar {
        border: 2px solid #fff;
        margin-right: -1rem !important;
    }

        .avatar-group .avatar:last-child {
            margin-right: 0;
        }

        .avatar-group .avatar:hover {
            position: relative;
            z-index: 1;
        }

.badge {
    padding: 5px 10px;
    font-size: 11px;
}

    .badge.badge-success {
        background: #7cd420;
    }

    .badge.badge-danger {
        background: #f33333;
    }

    .badge.badge-secondary {
        background: #a6c;
    }

    .badge.badge-info {
        background: #11a5ed;
    }

    .badge.badge-warning {
        background: #fecb00;
    }

    .badge.badge-dark {
        background: #3a3f51;
    }

    .badge.badge-primary {
        background: #ff5252;
    }

    .badge.badge-light {
        background: #e6e6e6;
    }

.btn:not(.btn-floating) {
    border-radius: 0.75rem;
}

a {
    text-decoration: none;
    transition: color 0.2s;
}

    a svg {
        width: 18px;
        height: 18px;
    }

    a.link-1 {
        color: #000;
    }

        a.link-1:focus,
        a.link-1:hover {
            color: #333;
        }

    a.link-2 {
        color: #000;
    }

        a.link-2:focus,
        a.link-2:hover {
            color: #ff5252;
        }

        a:hover { text-decoration:none}

.layout a:hover {
    text-decoration: none;
}

.layout a:not(.active.list-group-item),
.layout a:not(.btn):active,
.layout a:not(.btn):focus,
.layout a:not(.btn):hover {
    text-decoration: none !important;
    color: #000;
    outline: none;
}

.layout a.btn:active,
.layout a.btn:focus,
.layout a.btn:hover {
    text-decoration: none !important;
}

.page-link {
    color: #ff5252;
}

    .page-link:not(:disabled):not(.disabled):focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 82, 82, 0.3);
    }

.btn {
    font-size: 14px;
    width: auto;
    display: inline-flex;
    padding: 9px 14px;
    line-height: 14px;
}

    .btn svg {
        width: 18px;
        height: 18px;
    }

    .btn[data-toggle="dropdown"] {
        align-items: center;
    }

    .btn.btn-sm {
        padding: 5px 10px;
        font-size: 13px;
    }

        .btn.btn-sm i {
            font-size: 14px;
        }

    .btn.btn-lg {
        padding: 15px 20px;
        font-size: 17px;
    }

        .btn.btn-lg i {
            font-size: 25px;
        }

    .btn.btn-block {
        width: 100%;
        justify-content: center;
    }

    .btn.btn-square {
        border-radius: 0;
    }

    .btn.btn-rounded {
        border-radius: 50px;
        padding: 10px 20px;
    }

        .btn.btn-rounded.btn-sm {
            padding: 5px 15px;
            font-size: 13px;
        }

        .btn.btn-rounded.btn-lg {
            padding: 20px 30px;
            font-size: 17px;
        }

    .btn.btn-floating {
        height: 40px;
        width: 40px;
        align-items: center;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
        font-size: 20px;
    }

        .btn.btn-floating.btn-sm {
            height: 30px;
            width: 30px;
        }

        .btn.btn-floating.btn-lg {
            height: 50px;
            width: 50px;
        }

    .btn.btn-uppercase {
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 1px;
        align-items: center;
        font-weight: 600;
    }

        .btn.btn-uppercase.btn-sm {
            font-size: 11px;
        }

        .btn.btn-uppercase.btn-lg {
            font-size: 14px;
        }

    .btn.btn-shadow {
        box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.3);
    }

        .btn.btn-shadow:active,
        .btn.btn-shadow:focus {
            box-shadow: 0 4px 6px 1px rgba(0, 0, 0, 0.3) !important;
        }

    .btn.btn-primary,
    a.btn[href="#next"],
    a.btn[href="#previous"] {
        background: #ff5252;
        border-color: #ff5252;
    }

        .btn.btn-primary:not(:disabled):not(.disabled):active,
        .btn.btn-primary:not(:disabled):not(.disabled):focus,
        .btn.btn-primary:not(:disabled):not(.disabled):hover,
        a.btn:not(:disabled):not(.disabled):active[href="#next"],
        a.btn:not(:disabled):not(.disabled):active[href="#previous"],
        a.btn:not(:disabled):not(.disabled):focus[href="#next"],
        a.btn:not(:disabled):not(.disabled):focus[href="#previous"],
        a.btn:not(:disabled):not(.disabled):hover[href="#next"],
        a.btn:not(:disabled):not(.disabled):hover[href="#previous"] {
            background: #ff3939;
            border-color: #ff3939;
        }

        .btn.btn-primary:not(:disabled):not(.disabled):focus,
        a.btn:not(:disabled):not(.disabled):focus[href="#next"],
        a.btn:not(:disabled):not(.disabled):focus[href="#previous"] {
            box-shadow: 0 0 0 0.2rem rgba(255, 82, 82, 0.4) !important;
        }

        .btn.btn-primary.btn-pulse:not(:disabled):not(.disabled),
        a.btn.btn-pulse:not(:disabled):not(.disabled)[href="#next"],
        a.btn.btn-pulse:not(:disabled):not(.disabled)[href="#previous"] {
            box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-primary:hover,
        a.btn:hover[href="#next"],
        a.btn:hover[href="#previous"] {
            -webkit-animation: none;
        }

    .btn.btn-gradient-primary {
        background: linear-gradient(20deg, #ff6c6c, #ff4343);
        border-color: transparent;
        color: #fff;
    }

        .btn.btn-gradient-primary:not(:disabled):not(.disabled):active,
        .btn.btn-gradient-primary:not(:disabled):not(.disabled):focus,
        .btn.btn-gradient-primary:not(:disabled):not(.disabled):hover {
            background: linear-gradient(20deg, #ff5252, #ff4343);
            border-color: transparent;
        }

        .btn.btn-gradient-primary:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 82, 82, 0.5);
        }

        .btn.btn-gradient-primary.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-gradient-primary:hover {
            -webkit-animation: none;
        }

    .btn.btn-light-primary {
        background: rgba(255, 82, 82, 0.3);
        border-color: transparent;
        color: #ff0606;
    }

        .btn.btn-light-primary:not(:disabled):not(.disabled):active,
        .btn.btn-light-primary:not(:disabled):not(.disabled):focus,
        .btn.btn-light-primary:not(:disabled):not(.disabled):hover {
            background: rgba(255, 82, 82, 0.5);
            border-color: transparent;
        }

        .btn.btn-light-primary:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 82, 82, 0.2);
        }

        .btn.btn-light-primary.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-light-primary:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-primary {
        background: none;
        border-color: #ff5252;
        color: #ff4848;
        border-width: 1px;
    }

        .btn.btn-outline-primary:not(:disabled):not(.disabled):hover {
            background: #ff5252;
            border-color: #ff5252;
            color: #fff;
        }

        .btn.btn-outline-primary:not(:disabled):not(.disabled):active,
        .btn.btn-outline-primary:not(:disabled):not(.disabled):focus {
            background: #ff1f1f;
            border-color: #ff1f1f;
            color: #fff;
        }

        .btn.btn-outline-primary:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 82, 82, 0.4);
        }

        .btn.btn-outline-primary.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-primary:hover {
            -webkit-animation: none;
        }

    .btn.btn-secondary {
        background: #a6c;
        border-color: #a6c;
    }

        .btn.btn-secondary:not(:disabled):not(.disabled):active,
        .btn.btn-secondary:not(:disabled):not(.disabled):focus,
        .btn.btn-secondary:not(:disabled):not(.disabled):hover {
            background: #9f53c6;
            border-color: #9f53c6;
        }

        .btn.btn-secondary:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(170, 102, 204, 0.4) !important;
        }

        .btn.btn-secondary.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(170, 102, 204, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-secondary:hover {
            -webkit-animation: none;
        }

    .btn.btn-gradient-secondary {
        background: linear-gradient(20deg, #b579d2, #a45bc8);
        border-color: transparent;
        color: #fff;
    }

        .btn.btn-gradient-secondary:not(:disabled):not(.disabled):active,
        .btn.btn-gradient-secondary:not(:disabled):not(.disabled):focus,
        .btn.btn-gradient-secondary:not(:disabled):not(.disabled):hover {
            background: linear-gradient(20deg, #a6c, #a45bc8);
            border-color: transparent;
        }

        .btn.btn-gradient-secondary:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(170, 102, 204, 0.5);
        }

        .btn.btn-gradient-secondary.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(170, 102, 204, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-gradient-secondary:hover {
            -webkit-animation: none;
        }

    .btn.btn-light-secondary {
        background: rgba(170, 102, 204, 0.3);
        border-color: transparent;
        color: #8639ac;
    }

        .btn.btn-light-secondary:not(:disabled):not(.disabled):active,
        .btn.btn-light-secondary:not(:disabled):not(.disabled):focus,
        .btn.btn-light-secondary:not(:disabled):not(.disabled):hover {
            background: rgba(170, 102, 204, 0.5);
            border-color: transparent;
        }

        .btn.btn-light-secondary:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(170, 102, 204, 0.2);
        }

        .btn.btn-light-secondary.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(170, 102, 204, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-light-secondary:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-secondary {
        background: none;
        border-color: #a6c;
        color: #a65ec9;
        border-width: 1px;
    }

        .btn.btn-outline-secondary:not(:disabled):not(.disabled):hover {
            background: #a6c;
            border-color: #a6c;
            color: #fff;
        }

        .btn.btn-outline-secondary:not(:disabled):not(.disabled):active,
        .btn.btn-outline-secondary:not(:disabled):not(.disabled):focus {
            background: #9540bf;
            border-color: #9540bf;
            color: #fff;
        }

        .btn.btn-outline-secondary:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(170, 102, 204, 0.4);
        }

        .btn.btn-outline-secondary.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(170, 102, 204, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-secondary:hover {
            -webkit-animation: none;
        }

    .btn.btn-success {
        background: #7cd420;
        border-color: #7cd420;
    }

        .btn.btn-success:not(:disabled):not(.disabled):active,
        .btn.btn-success:not(:disabled):not(.disabled):focus,
        .btn.btn-success:not(:disabled):not(.disabled):hover {
            background: #6fbe1d;
            border-color: #6fbe1d;
        }

        .btn.btn-success:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(124, 212, 32, 0.4) !important;
        }

        .btn.btn-success.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(124, 212, 32, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-success:hover {
            -webkit-animation: none;
        }

    .btn.btn-gradient-success {
        background: linear-gradient(20deg, #89df2e, #74c71e);
        border-color: transparent;
        color: #fff;
    }

        .btn.btn-gradient-success:not(:disabled):not(.disabled):active,
        .btn.btn-gradient-success:not(:disabled):not(.disabled):focus,
        .btn.btn-gradient-success:not(:disabled):not(.disabled):hover {
            background: linear-gradient(20deg, #7cd420, #74c71e);
            border-color: transparent;
        }

        .btn.btn-gradient-success:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(124, 212, 32, 0.5);
        }

        .btn.btn-gradient-success.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(124, 212, 32, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-gradient-success:hover {
            -webkit-animation: none;
        }

    .btn.btn-light-success {
        background: rgba(124, 212, 32, 0.3);
        border-color: transparent;
        color: #559216;
    }

        .btn.btn-light-success:not(:disabled):not(.disabled):active,
        .btn.btn-light-success:not(:disabled):not(.disabled):focus,
        .btn.btn-light-success:not(:disabled):not(.disabled):hover {
            background: rgba(124, 212, 32, 0.5);
            border-color: transparent;
        }

        .btn.btn-light-success:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(124, 212, 32, 0.2);
        }

        .btn.btn-light-success.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(124, 212, 32, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-light-success:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-success {
        background: none;
        border-color: #7cd420;
        color: #77cb1f;
        border-width: 1px;
    }

        .btn.btn-outline-success:not(:disabled):not(.disabled):hover {
            background: #7cd420;
            border-color: #7cd420;
            color: #fff;
        }

        .btn.btn-outline-success:not(:disabled):not(.disabled):active,
        .btn.btn-outline-success:not(:disabled):not(.disabled):focus {
            background: #62a819;
            border-color: #62a819;
            color: #fff;
        }

        .btn.btn-outline-success:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(124, 212, 32, 0.4);
        }

        .btn.btn-outline-success.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(124, 212, 32, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-success:hover {
            -webkit-animation: none;
        }

    .btn.btn-danger {
        background: #f33333;
        border-color: #f33333;
    }

        .btn.btn-danger:not(:disabled):not(.disabled):active,
        .btn.btn-danger:not(:disabled):not(.disabled):focus,
        .btn.btn-danger:not(:disabled):not(.disabled):hover {
            background: #f21b1b;
            border-color: #f21b1b;
        }

        .btn.btn-danger:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(243, 51, 51, 0.4) !important;
        }

        .btn.btn-danger.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(243, 51, 51, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-danger:hover {
            -webkit-animation: none;
        }

    .btn.btn-gradient-danger {
        background: linear-gradient(20deg, #f44b4b, #f22525);
        border-color: transparent;
        color: #fff;
    }

        .btn.btn-gradient-danger:not(:disabled):not(.disabled):active,
        .btn.btn-gradient-danger:not(:disabled):not(.disabled):focus,
        .btn.btn-gradient-danger:not(:disabled):not(.disabled):hover {
            background: linear-gradient(20deg, #f33333, #f22525);
            border-color: transparent;
        }

        .btn.btn-gradient-danger:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(243, 51, 51, 0.5);
        }

        .btn.btn-gradient-danger.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(243, 51, 51, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-gradient-danger:hover {
            -webkit-animation: none;
        }

    .btn.btn-light-danger {
        background: rgba(243, 51, 51, 0.3);
        border-color: transparent;
        color: #cd0c0c;
    }

        .btn.btn-light-danger:not(:disabled):not(.disabled):active,
        .btn.btn-light-danger:not(:disabled):not(.disabled):focus,
        .btn.btn-light-danger:not(:disabled):not(.disabled):hover {
            background: rgba(243, 51, 51, 0.5);
            border-color: transparent;
        }

        .btn.btn-light-danger:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(243, 51, 51, 0.2);
        }

        .btn.btn-light-danger.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(243, 51, 51, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-light-danger:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-danger {
        background: none;
        border-color: #f33333;
        color: #f22929;
        border-width: 1px;
    }

        .btn.btn-outline-danger:not(:disabled):not(.disabled):hover {
            background: #f33333;
            border-color: #f33333;
            color: #fff;
        }

        .btn.btn-outline-danger:not(:disabled):not(.disabled):active,
        .btn.btn-outline-danger:not(:disabled):not(.disabled):focus {
            background: #e60e0e;
            border-color: #e60e0e;
            color: #fff;
        }

        .btn.btn-outline-danger:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(243, 51, 51, 0.4);
        }

        .btn.btn-outline-danger.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(243, 51, 51, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-danger:hover {
            -webkit-animation: none;
        }

    .btn.btn-warning {
        background: #fecb00;
        border-color: #fecb00;
    }

        .btn.btn-warning:not(:disabled):not(.disabled):active,
        .btn.btn-warning:not(:disabled):not(.disabled):focus,
        .btn.btn-warning:not(:disabled):not(.disabled):hover {
            background: #e5b700;
            border-color: #e5b700;
        }

        .btn.btn-warning:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(254, 203, 0, 0.4) !important;
        }

        .btn.btn-warning.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(254, 203, 0, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-warning:hover {
            -webkit-animation: none;
        }

    .btn.btn-gradient-warning {
        background: linear-gradient(20deg, #ffd119, #efbf00);
        border-color: transparent;
        color: #fff;
        color: #212529;
    }

        .btn.btn-gradient-warning:not(:disabled):not(.disabled):active,
        .btn.btn-gradient-warning:not(:disabled):not(.disabled):focus,
        .btn.btn-gradient-warning:not(:disabled):not(.disabled):hover {
            background: linear-gradient(20deg, #fecb00, #efbf00);
            border-color: transparent;
        }

        .btn.btn-gradient-warning:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(254, 203, 0, 0.5);
        }

        .btn.btn-gradient-warning.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(254, 203, 0, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-gradient-warning:hover {
            -webkit-animation: none;
        }

    .btn.btn-light-warning {
        background: rgba(254, 203, 0, 0.3);
        border-color: transparent;
        color: #b28e00;
    }

        .btn.btn-light-warning:not(:disabled):not(.disabled):active,
        .btn.btn-light-warning:not(:disabled):not(.disabled):focus,
        .btn.btn-light-warning:not(:disabled):not(.disabled):hover {
            background: rgba(254, 203, 0, 0.5);
            border-color: transparent;
        }

        .btn.btn-light-warning:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(254, 203, 0, 0.2);
        }

        .btn.btn-light-warning.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(254, 203, 0, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-light-warning:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-warning {
        background: none;
        border-color: #fecb00;
        color: #f4c300;
        border-width: 1px;
    }

        .btn.btn-outline-warning:not(:disabled):not(.disabled):hover {
            background: #fecb00;
            border-color: #fecb00;
            color: #fff;
        }

        .btn.btn-outline-warning:not(:disabled):not(.disabled):active,
        .btn.btn-outline-warning:not(:disabled):not(.disabled):focus {
            background: #cba200;
            border-color: #cba200;
            color: #fff;
        }

        .btn.btn-outline-warning:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(254, 203, 0, 0.4);
        }

        .btn.btn-outline-warning.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(254, 203, 0, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-warning:hover {
            -webkit-animation: none;
        }

        .btn.btn-outline-warning:not(:disabled):not(.disabled):active,
        .btn.btn-outline-warning:not(:disabled):not(.disabled):focus,
        .btn.btn-outline-warning:not(:disabled):not(.disabled):hover {
            color: #212529;
        }

    .btn.btn-info {
        background: #11a5ed;
        border-color: #11a5ed;
    }

        .btn.btn-info:not(:disabled):not(.disabled):active,
        .btn.btn-info:not(:disabled):not(.disabled):focus,
        .btn.btn-info:not(:disabled):not(.disabled):hover {
            background: #0f94d5;
            border-color: #0f94d5;
        }

        .btn.btn-info:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(17, 165, 237, 0.4) !important;
        }

        .btn.btn-info.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(17, 165, 237, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-info:hover {
            -webkit-animation: none;
        }

    .btn.btn-gradient-info {
        background: linear-gradient(20deg, #28aef0, #109bdf);
        border-color: transparent;
        color: #fff;
    }

        .btn.btn-gradient-info:not(:disabled):not(.disabled):active,
        .btn.btn-gradient-info:not(:disabled):not(.disabled):focus,
        .btn.btn-gradient-info:not(:disabled):not(.disabled):hover {
            background: linear-gradient(20deg, #11a5ed, #109bdf);
            border-color: transparent;
        }

        .btn.btn-gradient-info:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(17, 165, 237, 0.5);
        }

        .btn.btn-gradient-info.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(17, 165, 237, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-gradient-info:hover {
            -webkit-animation: none;
        }

    .btn.btn-light-info {
        background: rgba(17, 165, 237, 0.3);
        border-color: transparent;
        color: #0c73a6;
    }

        .btn.btn-light-info:not(:disabled):not(.disabled):active,
        .btn.btn-light-info:not(:disabled):not(.disabled):focus,
        .btn.btn-light-info:not(:disabled):not(.disabled):hover {
            background: rgba(17, 165, 237, 0.5);
            border-color: transparent;
        }

        .btn.btn-light-info:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(17, 165, 237, 0.2);
        }

        .btn.btn-light-info.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(17, 165, 237, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-light-info:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-info {
        background: none;
        border-color: #11a5ed;
        color: #109ee3;
        border-width: 1px;
    }

        .btn.btn-outline-info:not(:disabled):not(.disabled):hover {
            background: #11a5ed;
            border-color: #11a5ed;
            color: #fff;
        }

        .btn.btn-outline-info:not(:disabled):not(.disabled):active,
        .btn.btn-outline-info:not(:disabled):not(.disabled):focus {
            background: #0e84bd;
            border-color: #0e84bd;
            color: #fff;
        }

        .btn.btn-outline-info:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(17, 165, 237, 0.4);
        }

        .btn.btn-outline-info.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(17, 165, 237, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-info:hover {
            -webkit-animation: none;
        }

    .btn.btn-light {
        background: #e6e6e6;
        border-color: #e6e6e6;
    }

        .btn.btn-light:not(:disabled):not(.disabled):active,
        .btn.btn-light:not(:disabled):not(.disabled):focus,
        .btn.btn-light:not(:disabled):not(.disabled):hover {
            background: #d9d9d9;
            border-color: #d9d9d9;
        }

        .btn.btn-light:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem hsla(0, 0%, 90.2%, 0.4) !important;
        }

        .btn.btn-light.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 hsla(0, 0%, 90.2%, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-light:hover {
            -webkit-animation: none;
        }

    .btn.btn-gradient-light {
        background: linear-gradient(20deg, #f2f2f2, #dedede);
        border-color: transparent;
        color: #fff;
        color: inherit;
    }

        .btn.btn-gradient-light:not(:disabled):not(.disabled):active,
        .btn.btn-gradient-light:not(:disabled):not(.disabled):focus,
        .btn.btn-gradient-light:not(:disabled):not(.disabled):hover {
            background: linear-gradient(20deg, #e6e6e6, #dedede);
            border-color: transparent;
        }

        .btn.btn-gradient-light:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem hsla(0, 0%, 90.2%, 0.5);
        }

        .btn.btn-gradient-light.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 hsla(0, 0%, 90.2%, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-gradient-light:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-light {
        background: none;
        border-color: #e6e6e6;
        color: #e0e0e0;
        border-width: 1px;
        color: #212529;
    }

        .btn.btn-outline-light:not(:disabled):not(.disabled):hover {
            background: #e6e6e6;
            border-color: #e6e6e6;
            color: #fff;
        }

        .btn.btn-outline-light:not(:disabled):not(.disabled):active,
        .btn.btn-outline-light:not(:disabled):not(.disabled):focus {
            background: #ccc;
            border-color: #ccc;
            color: #fff;
        }

        .btn.btn-outline-light:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem hsla(0, 0%, 90.2%, 0.4);
        }

        .btn.btn-outline-light.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 hsla(0, 0%, 90.2%, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-light:hover {
            -webkit-animation: none;
        }

        .btn.btn-outline-light:not(:disabled):not(.disabled):active,
        .btn.btn-outline-light:not(:disabled):not(.disabled):focus,
        .btn.btn-outline-light:not(:disabled):not(.disabled):hover {
            color: #212529;
        }

    .btn.btn-dark {
        background: #3a3f51;
        border-color: #3a3f51;
    }

        .btn.btn-dark:not(:disabled):not(.disabled):active,
        .btn.btn-dark:not(:disabled):not(.disabled):focus,
        .btn.btn-dark:not(:disabled):not(.disabled):hover {
            background: #2f3342;
            border-color: #2f3342;
        }

        .btn.btn-dark:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(58, 63, 81, 0.4) !important;
        }

        .btn.btn-dark.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(58, 63, 81, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-dark:hover {
            -webkit-animation: none;
        }

    .btn.btn-gradient-dark {
        background: linear-gradient(20deg, #454b60, #343848);
        border-color: transparent;
        color: #fff;
    }

        .btn.btn-gradient-dark:not(:disabled):not(.disabled):active,
        .btn.btn-gradient-dark:not(:disabled):not(.disabled):focus,
        .btn.btn-gradient-dark:not(:disabled):not(.disabled):hover {
            background: linear-gradient(20deg, #3a3f51, #343848);
            border-color: transparent;
        }

        .btn.btn-gradient-dark:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(58, 63, 81, 0.5);
        }

        .btn.btn-gradient-dark.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(58, 63, 81, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-gradient-dark:hover {
            -webkit-animation: none;
        }

    .btn.btn-light-dark {
        background: rgba(58, 63, 81, 0.3);
        border-color: transparent;
        color: #1a1c24;
    }

        .btn.btn-light-dark:not(:disabled):not(.disabled):active,
        .btn.btn-light-dark:not(:disabled):not(.disabled):focus,
        .btn.btn-light-dark:not(:disabled):not(.disabled):hover {
            background: rgba(58, 63, 81, 0.5);
            border-color: transparent;
        }

        .btn.btn-light-dark:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(58, 63, 81, 0.2);
        }

        .btn.btn-light-dark.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(58, 63, 81, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-light-dark:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-dark {
        background: none;
        border-color: #3a3f51;
        color: #363a4b;
        border-width: 1px;
    }

        .btn.btn-outline-dark:not(:disabled):not(.disabled):hover {
            background: #3a3f51;
            border-color: #3a3f51;
            color: #fff;
        }

        .btn.btn-outline-dark:not(:disabled):not(.disabled):active,
        .btn.btn-outline-dark:not(:disabled):not(.disabled):focus {
            background: #252833;
            border-color: #252833;
            color: #fff;
        }

        .btn.btn-outline-dark:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(58, 63, 81, 0.4);
        }

        .btn.btn-outline-dark.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(58, 63, 81, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-dark:hover {
            -webkit-animation: none;
        }

    .btn.btn-facebook {
        background: #3b5998;
        border-color: #3b5998;
        color: #fff;
    }

        .btn.btn-facebook:not(:disabled):not(.disabled):active,
        .btn.btn-facebook:not(:disabled):not(.disabled):focus,
        .btn.btn-facebook:not(:disabled):not(.disabled):hover {
            background: #344e86;
            border-color: #344e86;
        }

        .btn.btn-facebook:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(59, 89, 152, 0.4) !important;
        }

        .btn.btn-facebook.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(59, 89, 152, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-facebook:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-facebook {
        background: none;
        border-color: #3b5998;
        color: #385591;
        border-width: 1px;
    }

        .btn.btn-outline-facebook:not(:disabled):not(.disabled):hover {
            background: #3b5998;
            border-color: #3b5998;
            color: #fff;
        }

        .btn.btn-outline-facebook:not(:disabled):not(.disabled):active,
        .btn.btn-outline-facebook:not(:disabled):not(.disabled):focus {
            background: #2d4373;
            border-color: #2d4373;
            color: #fff;
        }

        .btn.btn-outline-facebook:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(59, 89, 152, 0.4);
        }

        .btn.btn-outline-facebook.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(59, 89, 152, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-facebook:hover {
            -webkit-animation: none;
        }

    .btn.btn-google {
        background: #db4437;
        border-color: #db4437;
        color: #fff;
    }

        .btn.btn-google:not(:disabled):not(.disabled):active,
        .btn.btn-google:not(:disabled):not(.disabled):focus,
        .btn.btn-google:not(:disabled):not(.disabled):hover {
            background: #d33426;
            border-color: #d33426;
        }

        .btn.btn-google:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(219, 68, 55, 0.4) !important;
        }

        .btn.btn-google.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(219, 68, 55, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-google:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-google {
        background: none;
        border-color: #db4437;
        color: #d93c2e;
        border-width: 1px;
    }

        .btn.btn-outline-google:not(:disabled):not(.disabled):hover {
            background: #db4437;
            border-color: #db4437;
            color: #fff;
        }

        .btn.btn-outline-google:not(:disabled):not(.disabled):active,
        .btn.btn-outline-google:not(:disabled):not(.disabled):focus {
            background: #bd2e22;
            border-color: #bd2e22;
            color: #fff;
        }

        .btn.btn-outline-google:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(219, 68, 55, 0.4);
        }

        .btn.btn-outline-google.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(219, 68, 55, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-google:hover {
            -webkit-animation: none;
        }

    .btn.btn-twitter {
        background: #55acee;
        border-color: #55acee;
        color: #fff;
    }

        .btn.btn-twitter:not(:disabled):not(.disabled):active,
        .btn.btn-twitter:not(:disabled):not(.disabled):focus,
        .btn.btn-twitter:not(:disabled):not(.disabled):hover {
            background: #3ea1ec;
            border-color: #3ea1ec;
        }

        .btn.btn-twitter:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(85, 172, 238, 0.4) !important;
        }

        .btn.btn-twitter.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(85, 172, 238, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-twitter:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-twitter {
        background: none;
        border-color: #55acee;
        color: #4ca7ed;
        border-width: 1px;
    }

        .btn.btn-outline-twitter:not(:disabled):not(.disabled):hover {
            background: #55acee;
            border-color: #55acee;
            color: #fff;
        }

        .btn.btn-outline-twitter:not(:disabled):not(.disabled):active,
        .btn.btn-outline-twitter:not(:disabled):not(.disabled):focus {
            background: #2795e9;
            border-color: #2795e9;
            color: #fff;
        }

        .btn.btn-outline-twitter:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(85, 172, 238, 0.4);
        }

        .btn.btn-outline-twitter.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(85, 172, 238, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-twitter:hover {
            -webkit-animation: none;
        }

    .btn.btn-linkedin {
        background: #0077b5;
        border-color: #0077b5;
        color: #fff;
    }

        .btn.btn-linkedin:not(:disabled):not(.disabled):active,
        .btn.btn-linkedin:not(:disabled):not(.disabled):focus,
        .btn.btn-linkedin:not(:disabled):not(.disabled):hover {
            background: #00669c;
            border-color: #00669c;
        }

        .btn.btn-linkedin:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 119, 181, 0.4) !important;
        }

        .btn.btn-linkedin.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(0, 119, 181, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-linkedin:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-linkedin {
        background: none;
        border-color: #0077b5;
        color: #0070ab;
        border-width: 1px;
    }

        .btn.btn-outline-linkedin:not(:disabled):not(.disabled):hover {
            background: #0077b5;
            border-color: #0077b5;
            color: #fff;
        }

        .btn.btn-outline-linkedin:not(:disabled):not(.disabled):active,
        .btn.btn-outline-linkedin:not(:disabled):not(.disabled):focus {
            background: #005582;
            border-color: #005582;
            color: #fff;
        }

        .btn.btn-outline-linkedin:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 119, 181, 0.4);
        }

        .btn.btn-outline-linkedin.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(0, 119, 181, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-linkedin:hover {
            -webkit-animation: none;
        }

    .btn.btn-whatsapp {
        background: #43d854;
        border-color: #43d854;
        color: #fff;
    }

        .btn.btn-whatsapp:not(:disabled):not(.disabled):active,
        .btn.btn-whatsapp:not(:disabled):not(.disabled):focus,
        .btn.btn-whatsapp:not(:disabled):not(.disabled):hover {
            background: #2ed441;
            border-color: #2ed441;
        }

        .btn.btn-whatsapp:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(67, 216, 84, 0.4) !important;
        }

        .btn.btn-whatsapp.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(67, 216, 84, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-whatsapp:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-whatsapp {
        background: none;
        border-color: #43d854;
        color: #3bd64c;
        border-width: 1px;
    }

        .btn.btn-outline-whatsapp:not(:disabled):not(.disabled):hover {
            background: #43d854;
            border-color: #43d854;
            color: #fff;
        }

        .btn.btn-outline-whatsapp:not(:disabled):not(.disabled):active,
        .btn.btn-outline-whatsapp:not(:disabled):not(.disabled):focus {
            background: #28c039;
            border-color: #28c039;
            color: #fff;
        }

        .btn.btn-outline-whatsapp:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(67, 216, 84, 0.4);
        }

        .btn.btn-outline-whatsapp.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(67, 216, 84, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-whatsapp:hover {
            -webkit-animation: none;
        }

    .btn.btn-instagram {
        background: #3f729b;
        border-color: #3f729b;
        color: #fff;
    }

        .btn.btn-instagram:not(:disabled):not(.disabled):active,
        .btn.btn-instagram:not(:disabled):not(.disabled):focus,
        .btn.btn-instagram:not(:disabled):not(.disabled):hover {
            background: #386589;
            border-color: #386589;
        }

        .btn.btn-instagram:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(63, 114, 155, 0.4) !important;
        }

        .btn.btn-instagram.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(63, 114, 155, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-instagram:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-instagram {
        background: none;
        border-color: #3f729b;
        color: #3c6d94;
        border-width: 1px;
    }

        .btn.btn-outline-instagram:not(:disabled):not(.disabled):hover {
            background: #3f729b;
            border-color: #3f729b;
            color: #fff;
        }

        .btn.btn-outline-instagram:not(:disabled):not(.disabled):active,
        .btn.btn-outline-instagram:not(:disabled):not(.disabled):focus {
            background: #305777;
            border-color: #305777;
            color: #fff;
        }

        .btn.btn-outline-instagram:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(63, 114, 155, 0.4);
        }

        .btn.btn-outline-instagram.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(63, 114, 155, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-instagram:hover {
            -webkit-animation: none;
        }

    .btn.btn-dribbble {
        background: #ea4c89;
        border-color: #ea4c89;
        color: #fff;
    }

        .btn.btn-dribbble:not(:disabled):not(.disabled):active,
        .btn.btn-dribbble:not(:disabled):not(.disabled):focus,
        .btn.btn-dribbble:not(:disabled):not(.disabled):hover {
            background: #e7357a;
            border-color: #e7357a;
        }

        .btn.btn-dribbble:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(234, 76, 137, 0.4) !important;
        }

        .btn.btn-dribbble.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(234, 76, 137, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-dribbble:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-dribbble {
        background: none;
        border-color: #ea4c89;
        color: #e94383;
        border-width: 1px;
    }

        .btn.btn-outline-dribbble:not(:disabled):not(.disabled):hover {
            background: #ea4c89;
            border-color: #ea4c89;
            color: #fff;
        }

        .btn.btn-outline-dribbble:not(:disabled):not(.disabled):active,
        .btn.btn-outline-dribbble:not(:disabled):not(.disabled):focus {
            background: #e51e6b;
            border-color: #e51e6b;
            color: #fff;
        }

        .btn.btn-outline-dribbble:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(234, 76, 137, 0.4);
        }

        .btn.btn-outline-dribbble.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(234, 76, 137, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-dribbble:hover {
            -webkit-animation: none;
        }

    .btn.btn-youtube {
        background: #cd201f;
        border-color: #cd201f;
        color: #fff;
    }

        .btn.btn-youtube:not(:disabled):not(.disabled):active,
        .btn.btn-youtube:not(:disabled):not(.disabled):focus,
        .btn.btn-youtube:not(:disabled):not(.disabled):hover {
            background: #b71d1c;
            border-color: #b71d1c;
        }

        .btn.btn-youtube:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.4) !important;
        }

        .btn.btn-youtube.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(205, 32, 31, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-youtube:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-youtube {
        background: none;
        border-color: #cd201f;
        color: #c41f1e;
        border-width: 1px;
    }

        .btn.btn-outline-youtube:not(:disabled):not(.disabled):hover {
            background: #cd201f;
            border-color: #cd201f;
            color: #fff;
        }

        .btn.btn-outline-youtube:not(:disabled):not(.disabled):active,
        .btn.btn-outline-youtube:not(:disabled):not(.disabled):focus {
            background: #a11918;
            border-color: #a11918;
            color: #fff;
        }

        .btn.btn-outline-youtube:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.4);
        }

        .btn.btn-outline-youtube.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(205, 32, 31, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-youtube:hover {
            -webkit-animation: none;
        }

    .btn.btn-github {
        background: #00405d;
        border-color: #00405d;
        color: #fff;
    }

        .btn.btn-github:not(:disabled):not(.disabled):active,
        .btn.btn-github:not(:disabled):not(.disabled):focus,
        .btn.btn-github:not(:disabled):not(.disabled):hover {
            background: #002e44;
            border-color: #002e44;
        }

        .btn.btn-github:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 64, 93, 0.4) !important;
        }

        .btn.btn-github.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(0, 64, 93, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-github:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-github {
        background: none;
        border-color: #00405d;
        color: #003953;
        border-width: 1px;
    }

        .btn.btn-outline-github:not(:disabled):not(.disabled):hover {
            background: #00405d;
            border-color: #00405d;
            color: #fff;
        }

        .btn.btn-outline-github:not(:disabled):not(.disabled):active,
        .btn.btn-outline-github:not(:disabled):not(.disabled):focus {
            background: #001d2a;
            border-color: #001d2a;
            color: #fff;
        }

        .btn.btn-outline-github:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 64, 93, 0.4);
        }

        .btn.btn-outline-github.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(0, 64, 93, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-github:hover {
            -webkit-animation: none;
        }

    .btn.btn-behance {
        background: #1769ff;
        border-color: #1769ff;
        color: #fff;
    }

        .btn.btn-behance:not(:disabled):not(.disabled):active,
        .btn.btn-behance:not(:disabled):not(.disabled):focus,
        .btn.btn-behance:not(:disabled):not(.disabled):hover {
            background: #0059fd;
            border-color: #0059fd;
        }

        .btn.btn-behance:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(23, 105, 255, 0.4) !important;
        }

        .btn.btn-behance.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(23, 105, 255, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-behance:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-behance {
        background: none;
        border-color: #1769ff;
        color: #0d62ff;
        border-width: 1px;
    }

        .btn.btn-outline-behance:not(:disabled):not(.disabled):hover {
            background: #1769ff;
            border-color: #1769ff;
            color: #fff;
        }

        .btn.btn-outline-behance:not(:disabled):not(.disabled):active,
        .btn.btn-outline-behance:not(:disabled):not(.disabled):focus {
            background: #0050e3;
            border-color: #0050e3;
            color: #fff;
        }

        .btn.btn-outline-behance:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(23, 105, 255, 0.4);
        }

        .btn.btn-outline-behance.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(23, 105, 255, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-behance:hover {
            -webkit-animation: none;
        }

    .btn.btn-skype {
        background: #00aff0;
        border-color: #00aff0;
        color: #fff;
    }

        .btn.btn-skype:not(:disabled):not(.disabled):active,
        .btn.btn-skype:not(:disabled):not(.disabled):focus,
        .btn.btn-skype:not(:disabled):not(.disabled):hover {
            background: #009cd7;
            border-color: #009cd7;
        }

        .btn.btn-skype:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 175, 240, 0.4) !important;
        }

        .btn.btn-skype.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(0, 175, 240, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-skype:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-skype {
        background: none;
        border-color: #00aff0;
        color: #00a8e6;
        border-width: 1px;
    }

        .btn.btn-outline-skype:not(:disabled):not(.disabled):hover {
            background: #00aff0;
            border-color: #00aff0;
            color: #fff;
        }

        .btn.btn-outline-skype:not(:disabled):not(.disabled):active,
        .btn.btn-outline-skype:not(:disabled):not(.disabled):focus {
            background: #008abd;
            border-color: #008abd;
            color: #fff;
        }

        .btn.btn-outline-skype:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 175, 240, 0.4);
        }

        .btn.btn-outline-skype.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(0, 175, 240, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-skype:hover {
            -webkit-animation: none;
        }

    .btn.btn-yahoo {
        background: #410093;
        border-color: #410093;
        color: #fff;
    }

        .btn.btn-yahoo:not(:disabled):not(.disabled):active,
        .btn.btn-yahoo:not(:disabled):not(.disabled):focus,
        .btn.btn-yahoo:not(:disabled):not(.disabled):hover {
            background: #36007a;
            border-color: #36007a;
        }

        .btn.btn-yahoo:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(65, 0, 147, 0.4) !important;
        }

        .btn.btn-yahoo.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(65, 0, 147, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-yahoo:hover {
            -webkit-animation: none;
        }

    .btn.btn-outline-yahoo {
        background: none;
        border-color: #410093;
        color: #3c0089;
        border-width: 1px;
    }

        .btn.btn-outline-yahoo:not(:disabled):not(.disabled):hover {
            background: #410093;
            border-color: #410093;
            color: #fff;
        }

        .btn.btn-outline-yahoo:not(:disabled):not(.disabled):active,
        .btn.btn-outline-yahoo:not(:disabled):not(.disabled):focus {
            background: #2a0060;
            border-color: #2a0060;
            color: #fff;
        }

        .btn.btn-outline-yahoo:not(:disabled):not(.disabled):focus {
            box-shadow: 0 0 0 0.2rem rgba(65, 0, 147, 0.4);
        }

        .btn.btn-outline-yahoo.btn-pulse:not(:disabled):not(.disabled) {
            box-shadow: 0 0 0 0 rgba(65, 0, 147, 0.9);
            -webkit-animation: pulse 1.2s infinite;
            animation: pulse 1.2s infinite;
        }

        .btn.btn-outline-yahoo:hover {
            -webkit-animation: none;
        }

    .btn.btn-apple,
    .btn.btn-google-play {
        border-radius: 7px;
    }

        .btn.btn-apple img,
        .btn.btn-google-play img {
            width: 35px;
            margin-right: 10px;
        }

        .btn.btn-apple i,
        .btn.btn-google-play i {
            font-size: 40px;
            margin-right: 10px;
        }

        .btn.btn-apple > span,
        .btn.btn-google-play > span {
            display: flex;
            flex-direction: column;
            text-align: left;
        }

            .btn.btn-apple > span span:nth-child(2),
            .btn.btn-google-play > span span:nth-child(2) {
                font-size: 20px;
                font-weight: 600;
                margin-top: 5px;
            }

        .btn.btn-apple:active,
        .btn.btn-apple:focus,
        .btn.btn-apple:hover,
        .btn.btn-google-play:active,
        .btn.btn-google-play:focus,
        .btn.btn-google-play:hover {
            background: #040507;
            color: #fff;
        }

    .btn.btn-apple {
        border: 1px solid #040507;
        color: #040507;
    }

    .btn.btn-google-play {
        background: #040507;
        color: #fff;
    }

        .btn.btn-google-play > span span:first-child {
            text-transform: uppercase;
            font-size: 12px;
        }

.btn {
    position: relative;
    border-color: transparent;
}

    .btn.btn-link {
        color: #ff5252;
    }

    .btn .badge {
        padding: 2px 6px;
        right: 7px;
        top: -7px;
        position: absolute;
    }

.layout a {
    color: #ff5252;
}

.layout a:focus,
.layout a:hover {
    text-decoration: none;
    outline: none;
    color: #ff1f1f;
}

.btn-icon {
    margin-right: 0.5rem;
}

@-webkit-keyframes pulse {
    0% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);
    }

    to {
        transform: scale(0.9);
        box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);
    }

    to {
        transform: scale(0.9);
        box-shadow: 0 0 0 20px rgba(232, 76, 61, 0);
    }
}

.chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 30px;
}

    .chat .chat-header {
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
    }

        .chat .chat-header .chat-header-user {
            display: flex;
            align-items: center;
        }

            .chat .chat-header .chat-header-user .avatar {
                margin-right: 1rem;
            }

                .chat .chat-header .chat-header-user .avatar.avatar-state-danger:before,
                .chat .chat-header .chat-header-user .avatar.avatar-state-dark:before,
                .chat .chat-header .chat-header-user .avatar.avatar-state-info:before,
                .chat .chat-header .chat-header-user .avatar.avatar-state-light:before,
                .chat .chat-header .chat-header-user .avatar.avatar-state-primary:before,
                .chat .chat-header .chat-header-user .avatar.avatar-state-secondary:before,
                .chat .chat-header .chat-header-user .avatar.avatar-state-success:before,
                .chat .chat-header .chat-header-user .avatar.avatar-state-warning:before {
                    border-color: #e1e3eb;
                }

            .chat .chat-header .chat-header-user h5 {
                font-size: 16px;
                font-weight: 600;
                margin-bottom: 0;
                line-height: 1;
            }

        .chat .chat-header .chat-header-action ul li {
            margin-bottom: 0;
        }

    .chat .chat-body {
        flex: 1;
        padding: 30px;
        border-top-left-radius: 0.75rem;
        border-top-right-radius: 0.75rem;
        background-color: #fff;
    }

        .chat .chat-body .messages {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

            .chat .chat-body .messages .message-item {
                max-width: 75%;
                margin-bottom: 3rem;
            }

                .chat .chat-body .messages .message-item.in + .in,
                .chat .chat-body .messages .message-item.out + .out {
                    margin-top: -2rem;
                }

                .chat .chat-body .messages .message-item:last-child {
                    margin-bottom: 0;
                }

                .chat .chat-body .messages .message-item .message-avatar {
                    display: flex;
                    margin-bottom: 0.7rem;
                }

                    .chat .chat-body .messages .message-item .message-avatar .avatar {
                        margin-right: 1rem;
                    }

                    .chat .chat-body .messages .message-item .message-avatar h5 {
                        font-size: 15px;
                        margin-bottom: 0;
                    }

                    .chat .chat-body .messages .message-item .message-avatar .time {
                        color: #828282;
                        margin-top: 2px;
                        font-style: italic;
                        font-size: 12px;
                    }

                .chat .chat-body .messages .message-item .message-content {
                    display: flex;
                    align-items: center;
                }

                    .chat .chat-body .messages .message-item .message-content audio::-webkit-media-controls-panel {
                        background: #ebebeb;
                    }

                    .chat .chat-body .messages .message-item .message-content > .message-text {
                        background-color: #ebebeb;
                        border-radius: 0.75rem;
                        padding: 10px 20px;
                    }

                        .chat .chat-body .messages .message-item .message-content > .message-text .writing-animation {
                            margin-top: -9px;
                            padding-bottom: 9px;
                        }

                            .chat .chat-body .messages .message-item .message-content > .message-text .writing-animation .writing-animation-line {
                                display: inline-block;
                                width: 5px;
                                height: 5px;
                                margin: 0 1px;
                                border-radius: 15px;
                                background-color: #999;
                            }

                                .chat .chat-body .messages .message-item .message-content > .message-text .writing-animation .writing-animation-line:last-child {
                                    -webkit-animation: writingAnimation 0.6s linear 0.1s infinite;
                                    animation: writingAnimation 0.6s linear 0.1s infinite;
                                }

                                .chat .chat-body .messages .message-item .message-content > .message-text .writing-animation .writing-animation-line:nth-last-child(2) {
                                    -webkit-animation: writingAnimation 0.6s linear 0.2s infinite;
                                    animation: writingAnimation 0.6s linear 0.2s infinite;
                                }

                                .chat .chat-body .messages .message-item .message-content > .message-text .writing-animation .writing-animation-line:nth-last-child(3) {
                                    -webkit-animation: writingAnimation 0.6s linear 0.3s infinite;
                                    animation: writingAnimation 0.6s linear 0.3s infinite;
                                }

                .chat .chat-body .messages .message-item .message-content-images {
                    display: flex;
                    overflow: hidden;
                    border-radius: 0.75rem;
                }

                    .chat .chat-body .messages .message-item .message-content-images a {
                        display: inline-block;
                        margin-right: 5px;
                    }

                        .chat .chat-body .messages .message-item .message-content-images a img {
                            height: 100px;
                            width: 100px;
                            -o-object-fit: cover;
                            object-fit: cover;
                        }

                        .chat .chat-body .messages .message-item .message-content-images a:last-child {
                            margin-right: 0;
                        }

                .chat .chat-body .messages .message-item .message-content > .dropdown {
                    margin-left: 15px;
                }

                    .chat .chat-body .messages .message-item .message-content > .dropdown > a {
                        color: #bfbfbf;
                    }

                        .chat .chat-body .messages .message-item .message-content > .dropdown > a:focus,
                        .chat .chat-body .messages .message-item .message-content > .dropdown > a:hover {
                            color: #000;
                        }

                .chat .chat-body .messages .message-item .message-content.message-file {
                    display: flex;
                    word-break: break-word;
                }

                    .chat .chat-body .messages .message-item .message-content.message-file .file-icon {
                        font-size: 24px;
                        margin-right: 1rem;
                        color: #4d4d4d;
                    }

                    .chat .chat-body .messages .message-item .message-content.message-file ul {
                        margin-top: 3px;
                        margin-bottom: 0;
                    }

                        .chat .chat-body .messages .message-item .message-content.message-file ul li.list-inline-item {
                            margin-left: 0;
                            margin-right: 0.5rem;
                        }

                .chat .chat-body .messages .message-item.out {
                    margin-left: auto;
                }

                    .chat .chat-body .messages .message-item.out .message-avatar {
                        justify-content: flex-end;
                    }

                    .chat .chat-body .messages .message-item.out .message-content {
                        flex-direction: row-reverse;
                    }

                        .chat .chat-body .messages .message-item.out .message-content .message-text {
                            border: none;
                            background-color: #ffe1e1;
                        }

                        .chat .chat-body .messages .message-item.out .message-content > .dropdown {
                            border-color: #ff5252;
                            margin-left: 0;
                            margin-right: 15px;
                        }

            .chat .chat-body .messages .messages-divider {
                width: 100%;
                max-width: 100%;
                position: relative;
            }

                .chat .chat-body .messages .messages-divider:before {
                    content: attr(data-label);
                    display: block;
                    position: absolute;
                    top: -8px;
                    letter-spacing: 0.5px;
                    font-size: 11px;
                    padding: 2px 8px;
                    border-radius: 3px;
                    background-color: #e6e6e6;
                    left: 50%;
                    transform: translateX(-50%);
                }

    .chat .chat-footer {
        background-color: #fff;
        border-top: 1px solid #e6e6e6;
        padding: 20px 30px;
        display: flex;
        align-items: center;
    }

        .chat .chat-footer form {
            flex: 1;
        }

        .chat .chat-footer .form-control.form-control-main {
            font-size: 18px;
            background: none;
            border: none;
            padding: 7px 5px;
        }

            .chat .chat-footer .form-control.form-control-main:focus {
                box-shadow: none;
            }

                .chat .chat-footer .form-control.form-control-main:focus::-moz-placeholder {
                    color: #b3b3b3;
                }

                .chat .chat-footer .form-control.form-control-main:focus:-ms-input-placeholder {
                    color: #b3b3b3;
                }

                .chat .chat-footer .form-control.form-control-main:focus::placeholder {
                    color: #b3b3b3;
                }

    .chat .chat-preloader {
        display: flex;
    }

    .chat .chat-preloader,
    .chat .no-message-container {
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;
    }

    .chat .no-message-container {
        display: none;
    }

        .chat .no-message-container svg {
            width: 50px;
            height: 50px;
            stroke: #ff5252;
            fill: #e6e6e6;
        }

        .chat .no-message-container p {
            font-size: 16px;
            color: #4d4d4d;
        }

    .chat.no-message {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        .chat.no-message .no-message-container {
            display: flex;
        }

        .chat.no-message .chat-body,
        .chat.no-message .chat-footer,
        .chat.no-message .chat-header {
            display: none;
        }

.video-block a {
    width: 130px;
    height: 100px;
    display: flex;
    border-radius: 0.75rem;
    align-items: center;
    justify-content: center;
    background: #ebebeb;
    font-size: 35px;
    color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
}

    .video-block a:hover {
        background: #e0e0e0;
        color: #000;
    }

@-webkit-keyframes writingAnimation {
    0% {
        transform: translate(0);
    }

    50% {
        transform: translateY(10px);
    }

    to {
        transform: translate(0);
    }
}

.bg-primary {
    background: #ff5252 !important;
    color: #fff !important;
}

.bg-primary-bright {
    background: #c0c5e4 !important;
}

.bg-primary-gradient {
    background: linear-gradient(230deg, #ff5252, #ff9f9f) !important;
    color: #fff !important;
}

.bg-info {
    background: #11a5ed !important;
    color: #fff !important;
}

.bg-info-bright {
    background: #e1efff !important;
}

.bg-info-gradient {
    background: linear-gradient(230deg, #11a5ed, #58c0f3) !important;
    color: #fff !important;
}

.bg-secondary {
    background: #a6c !important;
    color: #fff !important;
}

.bg-secondary-bright {
    background: #ededed !important;
}

.bg-secondary-gradient {
    background: linear-gradient(230deg, #a6c, #ca9fdf) !important;
    color: #fff !important;
}

.bg-success {
    background: #7cd420 !important;
    color: #fff !important;
}

.bg-success-bright {
    background: #cef5ea !important;
}

.bg-success-gradient {
    background: linear-gradient(230deg, #7cd420, #a2e65a) !important;
    color: #fff !important;
}

.bg-danger {
    background: #f33333 !important;
    color: #fff !important;
}

.bg-danger-bright {
    background: #fcd0df !important;
}

.bg-danger-gradient {
    background: linear-gradient(230deg, #f33333, #f77b7b) !important;
    color: #fff !important;
}

.bg-danger-light {
    background: #fef4f4 !important;
}

.bg-warning {
    background: #fecb00 !important;
    color: #fff !important;
}

.bg-warning-bright {
    background: #ffe6cc !important;
}

.bg-warning-gradient {
    background: linear-gradient(230deg, #fecb00, #ffdb4c) !important;
    color: #fff !important;
}

.bg-light {
    background: #e6e6e6 !important;
}

.bg-dark {
    background: #3a3f51 !important;
    color: #fff !important;
}

.bg-dark-bright {
    background: #d4d5d8 !important;
}

.bg-dark-gradient {
    background: linear-gradient(230deg, #3a3f51, #5a627e) !important;
    color: #fff !important;
}

.bg-facebook {
    background: #3b5998 !important;
    color: #fff !important;
}

.bg-twitter {
    background: #55acee !important;
    color: #fff !important;
}

.bg-linkedin {
    background: #0077b5 !important;
    color: #fff !important;
}

.bg-whatsapp {
    background: #43d854 !important;
    color: #fff !important;
}

.bg-instagram {
    background: #3f729b !important;
    color: #fff !important;
}

.bg-dribbble {
    background: #ea4c89 !important;
    color: #fff !important;
}

.bg-google {
    background: #db4437 !important;
    color: #fff !important;
}

.bg-youtube {
    background: #cd201f !important;
    color: #fff !important;
}

.text-primary {
    color: #ff5252 !important;
}

.text-info {
    color: #11a5ed !important;
}

.text-success {
    color: #7cd420 !important;
}

.text-danger {
    color: #f33333 !important;
}

.text-warning {
    color: #fecb00 !important;
}

.text-light {
    color: #e6e6e6 !important;
}

.text-facebook {
    color: #3b5998 !important;
}

.text-twitter {
    color: #55acee !important;
}

.text-google {
    color: #db4437 !important;
}

.text-linkedin {
    color: #0077b5 !important;
}

.text-instagram {
    color: #3f729b !important;
}

.text-whatsapp {
    color: #43d854 !important;
}

.text-dribbble {
    color: #ea4c89 !important;
}

body.dark {
    background-color: #202124;
    color: hsla(0, 0%, 100%, 0.75);
}

    body.dark .text-muted {
        color: hsla(0, 0%, 100%, 0.4) !important;
    }

    body.dark .preloader {
        background-color: #202124;
    }

    body.dark .story-block .story-items .story-item .avatar .avatar-title,
    body.dark .story-block .story-items .story-item .avatar img {
        border-color: #202124;
    }

    body.dark .btn.btn-light {
        background-color: #202124;
        border-color: #383a3f;
        color: hsla(0, 0%, 100%, 0.75);
    }

        body.dark .btn.btn-light:focus,
        body.dark .btn.btn-light:hover {
            background-color: #383a3f !important;
            border-color: #50535a !important;
            color: hsla(0, 0%, 100%, 0.75) !important;
        }

    body.dark .btn.btn-outline-light {
        border-color: #383a3f;
        color: hsla(0, 0%, 100%, 0.75);
    }

        body.dark .btn.btn-outline-light:focus,
        body.dark .btn.btn-outline-light:hover {
            background-color: #383a3f !important;
            border-color: #50535a !important;
            color: hsla(0, 0%, 100%, 0.75) !important;
        }

    body.dark .btn.btn-link {
        color: #ff5252;
    }

    body.dark .btn.btn-light-danger,
    body.dark .btn.btn-light-info,
    body.dark .btn.btn-light-primary,
    body.dark .btn.btn-light-secondary,
    body.dark .btn.btn-light-success,
    body.dark .btn.btn-light-warning {
        color: hsla(0, 0%, 100%, 0.8);
    }

    body.dark nav.navigation ul li > a {
        color: hsla(0, 0%, 100%, 0.7);
    }

        body.dark nav.navigation ul li > a.active {
            color: #ff5252;
            background-color: #383a3f;
        }

    body.dark .nav.nav-tabs .nav-item .nav-link {
        color: hsla(0, 0%, 100%, 0.75);
    }

    body.dark .layout .video-block a {
        background-color: #50535a;
        color: hsla(0, 0%, 100%, 0.5);
    }

        body.dark .layout .video-block a:hover {
            background-color: #575a62;
        }

    body.dark .voice-call .modal-body:before {
        background: rgba(0, 0, 0, 0.8);
    }

    body.dark .right-sidebar {
        background-color: #44464d;
    }

    body.dark .right-sidebar-header {
        border-color: #55585f;
    }

    body.dark .right-sidebar-close {
        background-color: #4b4e55;
        border-color: #55585f;
        color: hsla(0, 0%, 100%, 0.8);
    }

        body.dark .right-sidebar-close:hover {
            background-color: #50535a;
        }

    body.dark .right-sidebar .list-group-item {
        border-color: #55585f;
    }

    body.dark .right-sidebar .dropdown-menu {
        background-color: #4b4e55;
    }

    body.dark .right-sidebar .avatar.avatar-state-danger:before,
    body.dark .right-sidebar .avatar.avatar-state-dark:before,
    body.dark .right-sidebar .avatar.avatar-state-info:before,
    body.dark .right-sidebar .avatar.avatar-state-light:before,
    body.dark .right-sidebar .avatar.avatar-state-primary:before,
    body.dark .right-sidebar .avatar.avatar-state-secondary:before,
    body.dark .right-sidebar .avatar.avatar-state-success:before,
    body.dark .right-sidebar .avatar.avatar-state-warning:before {
        border-color: #44464d !important;
    }

    body.dark .left-sidebar-header form .input-group .btn {
        background: #383a3f;
        color: hsla(0, 0%, 100%, 0.6);
    }

    body.dark .left-sidebar-header form .form-control {
        background: #383a3f;
    }

    body.dark .left-sidebar-content .avatar.avatar-state-danger:before,
    body.dark .left-sidebar-content .avatar.avatar-state-dark:before,
    body.dark .left-sidebar-content .avatar.avatar-state-info:before,
    body.dark .left-sidebar-content .avatar.avatar-state-light:before,
    body.dark .left-sidebar-content .avatar.avatar-state-primary:before,
    body.dark .left-sidebar-content .avatar.avatar-state-secondary:before,
    body.dark .left-sidebar-content .avatar.avatar-state-success:before,
    body.dark .left-sidebar-content .avatar.avatar-state-warning:before {
        border-color: #383a3f !important;
    }

    body.dark .left-sidebar-content .list-group-item.active .avatar.avatar-state-danger:before,
    body.dark .left-sidebar-content .list-group-item.active .avatar.avatar-state-dark:before,
    body.dark .left-sidebar-content .list-group-item.active .avatar.avatar-state-info:before,
    body.dark .left-sidebar-content .list-group-item.active .avatar.avatar-state-light:before,
    body.dark .left-sidebar-content .list-group-item.active .avatar.avatar-state-primary:before,
    body.dark .left-sidebar-content .list-group-item.active .avatar.avatar-state-secondary:before,
    body.dark .left-sidebar-content .list-group-item.active .avatar.avatar-state-success:before,
    body.dark .left-sidebar-content .list-group-item.active .avatar.avatar-state-warning:before {
        border-color: #ff5252 !important;
    }

    body.dark .left-sidebar-content .list-group-item:not(.active) {
        background-color: #383a3f;
    }

    body.dark .left-sidebar-content .list-group-item .new-message-count {
        border-color: #202124 !important;
    }

    body.dark .left-sidebar-content .list-group-item .users-list-body p {
        color: hsla(0, 0%, 100%, 0.5);
    }

    body.dark .story-block .story-items .story-item .avatar {
        color: hsla(0, 0%, 100%, 0.75);
    }

        body.dark .story-block .story-items .story-item .avatar:hover {
            color: #fff;
        }

    body.dark .swal2-popup {
        background: #383a3f;
    }

    body.dark .swal2-title {
        color: hsla(0, 0%, 100%, 0.75);
    }

    body.dark .swal2-styled.swal2-cancel {
        background-color: #50535a;
    }

    body.dark .chat .chat-body {
        background-color: #383a3f;
    }

        body.dark .chat .chat-body .messages .message-item .message-content.message-file .file-icon {
            color: hsla(0, 0%, 100%, 0.75);
        }

        body.dark .chat .chat-body .messages .message-item .message-content audio::-webkit-media-controls-enclosure {
            background: none;
        }

        body.dark .chat .chat-body .messages .message-item .message-content audio::-webkit-media-controls-panel {
            background: #50535a;
        }

        body.dark .chat .chat-body .messages .message-item .message-content > .dropdown > a:focus,
        body.dark .chat .chat-body .messages .message-item .message-content > .dropdown > a:hover {
            color: #fff;
        }

        body.dark .chat .chat-body .messages .message-item:not(.out) .message-content .message-text {
            background-color: #50535a;
        }

        body.dark .chat .chat-body .messages .message-item:not(.in) .message-content .message-text {
            background: rgba(255, 82, 82, 0.2);
        }

        body.dark .chat .chat-body .messages .message-item.messages-divider:before {
            background-color: #50535a;
        }

    body.dark .chat .chat-footer {
        background-color: #383a3f;
        border-top-color: #44464d;
    }

        body.dark .chat .chat-footer form .form-control {
            background-color: #44464d;
        }

    body.dark .introjs-tooltip {
        background-color: #383a3f;
    }

    body.dark .introjs-arrow.left {
        border-right-color: #383a3f;
    }

    body.dark .introjs-arrow.right {
        border-left-color: #383a3f;
    }

    body.dark .introjs-arrow.top {
        border-bottom-color: #383a3f;
    }

    body.dark .introjs-arrow.bottom {
        border-top-color: #383a3f;
    }

    body.dark .introjs-button:hover {
        box-shadow: none;
    }

    body.dark .modal-content {
        background-color: #383a3f;
    }

        body.dark .modal-content .list-group-item,
        body.dark .modal-content hr {
            border-color: #575a62;
        }

        body.dark .modal-content .btn.btn-light {
            background-color: #494b52;
        }

            body.dark .modal-content .btn.btn-light:active,
            body.dark .modal-content .btn.btn-light:focus,
            body.dark .modal-content .btn.btn-light:hover {
                background-color: #50535a !important;
            }

        body.dark .modal-content .custom-file-label,
        body.dark .modal-content .custom-file-label:focus,
        body.dark .modal-content .form-control,
        body.dark .modal-content .form-control:focus {
            background-color: #494b52;
        }

        body.dark .modal-content .custom-control-label:before {
            background-color: #27292c;
            border-color: #44464d;
        }

    body.dark .modal-backdrop.show {
        opacity: 0.5;
    }

    body.dark .dropdown-menu {
        background-color: #42444a;
        border-color: transparent;
        color: hsla(0, 0%, 100%, 0.75);
    }

        body.dark .dropdown-menu .dropdown-divider {
            border-color: #4e5057;
        }

        body.dark .dropdown-menu .dropdown-item {
            color: hsla(0, 0%, 100%, 0.7);
        }

            body.dark .dropdown-menu .dropdown-item:active,
            body.dark .dropdown-menu .dropdown-item:focus,
            body.dark .dropdown-menu .dropdown-item:hover {
                background-color: rgba(255, 82, 82, 0.2);
                color: #fff;
            }

        body.dark .dropdown-menu .dropdown-menu-search .form-control {
            background-color: #42444a;
            border-bottom-color: #575a62;
        }

            body.dark .dropdown-menu .dropdown-menu-search .form-control:focus {
                border-bottom-color: #ff5252;
            }

    body.dark .tooltip .tooltip-inner {
        background-color: hsla(0, 0%, 100%, 0.3);
    }

    body.dark .form-control {
        color: hsla(0, 0%, 100%, 0.7);
        background-color: #383a3f;
    }

        body.dark .form-control:focus {
            background-color: #3d3f44;
            color: hsla(0, 0%, 100%, 0.7);
        }

        body.dark .form-control::-moz-placeholder {
            color: hsla(0, 0%, 100%, 0.5);
        }

        body.dark .form-control:-ms-input-placeholder {
            color: hsla(0, 0%, 100%, 0.5);
        }

        body.dark .form-control::placeholder {
            color: hsla(0, 0%, 100%, 0.5);
        }

    body.dark .custom-control-label:before {
        background-color: #383a3f;
        border-color: #44464d;
    }

    body.dark .input-group-text {
        background-color: #202124;
        color: hsla(0, 0%, 100%, 0.7);
        border-color: #44464d;
    }

    body.dark .nav-tabs .nav-link:focus,
    body.dark .nav-tabs .nav-link:hover {
        border-color: #383a3f #383a3f #50535a;
    }

    body.dark .custom-file-label {
        background-color: #383a3f;
        border-color: #44464d;
        color: hsla(0, 0%, 100%, 0.7);
    }

        body.dark .custom-file-label:after {
            background-color: #202124;
            color: hsla(0, 0%, 100%, 0.7);
        }

    body.dark .avatar.avatar-state-danger:before,
    body.dark .avatar.avatar-state-dark:before,
    body.dark .avatar.avatar-state-info:before,
    body.dark .avatar.avatar-state-light:before,
    body.dark .avatar.avatar-state-primary:before,
    body.dark .avatar.avatar-state-secondary:before,
    body.dark .avatar.avatar-state-success:before,
    body.dark .avatar.avatar-state-warning:before {
        border-color: #202124 !important;
    }

    body.dark .avatar-group .avatar,
    body.dark .modal-content .avatar-group .avatar {
        border-color: #383a3f;
    }

    body.dark .modal-content .modal-title + button {
        color: hsla(0, 0%, 100%, 0.7);
    }

        body.dark .modal-content .modal-title + button:hover {
            color: #fff;
        }

@media (max-width: 768px) {
    body.dark .chat-header {
        background: #383a3f;
        border-bottom-color: #494b52 !important;
    }

    body.dark nav.navigation {
        background: #383a3f !important;
    }

        body.dark nav.navigation ul li > a.active {
            background: #50535a !important;
        }
}

.dropdown-menu {
    border-color: #e6e6e6;
    box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.45);
    border-radius: 0.75rem;
    padding: 5px;
}

    .dropdown-menu.dropdown-menu-big {
        width: 300px;
    }

    .dropdown-menu .dropdown-menu-search .form-control {
        background: none;
        border-bottom: 1px solid #e6e6e6;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        padding: 10px 20px;
    }

        .dropdown-menu .dropdown-menu-search .form-control:focus {
            box-shadow: none;
            border-bottom-color: #ff5252;
        }

    .dropdown-menu .dropdown-item {
        font-size: 14px;
        padding: 5px 15px;
    }

        .dropdown-menu .dropdown-item.active {
            background: none;
            color: inherit;
        }

        .dropdown-menu .dropdown-item:active,
        .dropdown-menu .dropdown-item:focus,
        .dropdown-menu .dropdown-item:hover {
            background-color: #ffe1e1;
            color: #000;
            border-radius: 0.75rem;
        }

.custom-control-label {
    line-height: 25px;
}

.custom-control-input:checked ~ .custom-control-label:before {
    background-color: #ff5252;
    border-color: #ff5252;
}

.input-group svg {
    width: 16px;
    height: 16px;
}

.input-group .input-group-text {
    font-size: 14px;
}

.form-control {
    border: none;
    background: #ebebeb;
    border-radius: 0.75rem !important;
    height: auto;
    padding: 0.375rem 1rem;
    font-size: 15px;
    transition: all 0.3s;
}

    .form-control:focus {
        background: #d2d5e1;
        box-shadow: 0 0 0 2px #ff5252;
        color: #000;
    }

.input-group > .custom-select:not(:last-child),
.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .custom-select:not(:first-child),
.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group > .input-group-append:last-child > .btn {
    border-top-right-radius: 0.75rem !important;
    border-bottom-right-radius: 0.75rem !important;
}

.input-group-text {
    border-radius: 0.75rem;
    background: #dedede;
    border-color: transparent;
}

.custom-file-label {
    border: none;
    background: #ebebeb;
    border-radius: 0.75rem;
    height: auto;
}

    .custom-file-label:after {
        background: #dedede;
        border-radius: 0 0.75rem 0.75rem 0;
    }

.modal-content {
    border-radius: 0.75rem;
    border: none;
    overflow: hidden;
    box-shadow: none;
}

    .modal-content .modal-header {
        align-items: center;
        padding: 20px 30px;
        border-bottom: none;
    }

        .modal-content .modal-header .modal-title {
            display: flex;
            align-items: center;
        }

            .modal-content .modal-header .modal-title .avatar,
            .modal-content .modal-header .modal-title i {
                margin-right: 1rem;
            }

            .modal-content .modal-header .modal-title svg {
                width: 20px;
                height: 20px;
            }

            .modal-content .modal-header .modal-title + button {
                display: flex;
                align-items: center;
                justify-content: center;
                text-shadow: none;
                font-size: 18px;
                margin: 0;
                background: none;
                border-radius: 50%;
                padding: 0;
                width: 30px;
                height: 30px;
                color: #000;
                opacity: 1;
            }

    .modal-content .modal-body {
        padding: 30px;
    }

    .modal-content .modal-footer {
        border-top: none;
        padding: 0 30px 30px;
    }

    .modal-content .form-control {
        background-color: #e6e6e6;
    }

    .modal-content .list-group-item,
    .modal-content hr {
        border-color: #e6e6e6;
    }

.modal-backdrop.show {
    opacity: 0.2;
}

body.swal2-shown .layout {
    -ms-filter: blur(1.5px);
    filter: blur(1.5px);
}

body:not(.no-blur-effect).modal-open .layout {
    -moz-filter: blur(1.5px);
    -o-filter: blur(1.5px);
    -ms-filter: blur(1.5px);
    filter: blur(1.5px);
}

body:not(.no-blur-effect) .modal.fade .modal-dialog.modal-dialog-zoom {
    transform: translate(0) scale(0);
}

body:not(.no-blur-effect) .modal.show .modal-dialog.modal-dialog-zoom {
    transform: translate(0) scale(1);
}

.call-request {
    text-align: center !important;
    padding: 30px 0;
}

    .call-request .call-action-button .btn {
        width: 65px;
        height: 65px;
        margin: 0 10px;
    }

        .call-request .call-action-button .btn:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-secondary):not(.btn-warning):not(.btn-danger) {
            background: #fff;
        }

        .call-request .call-action-button .btn svg {
            width: 30px;
            height: 30px;
        }

.voice-call .modal-body {
    padding: 50px 0;
    text-align: center;
    background-size: cover !important;
    background-position: 50% !important;
}

    .voice-call .modal-body:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: hsla(0, 0%, 100%, 0.85);
    }

    .voice-call .modal-body > * {
        position: relative;
        z-index: 1;
    }

.voice-call .call-action-button .btn {
    width: 65px;
    height: 65px;
    margin: 0 10px;
}

    .voice-call .call-action-button .btn:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-secondary):not(.btn-warning):not(.btn-danger) {
        background: #fff;
    }

    .voice-call .call-action-button .btn svg {
        width: 30px;
        height: 30px;
    }

.call {
    text-align: center;
}

    .call .modal-content .modal-body {
        padding: 50px 0;
        background-size: cover !important;
        background-position: 50% !important;
        min-height: 80vh;
        position: relative;
    }

    .call .call-action {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 30px;
    }

    .call .call-time {
        position: absolute;
        top: 30px;
        left: 30px;
        color: #fff;
        font-size: 20px;
    }

    .call .call-users {
        display: flex;
        flex-direction: column;
    }

        .call .call-users figure {
            margin-top: 15px;
        }

    .call .call-action-button {
        display: flex;
        flex-direction: column;
    }

        .call .call-action-button .btn {
            width: 50px;
            height: 50px;
            margin-top: 15px;
        }

            .call .call-action-button .btn:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-secondary):not(.btn-warning):not(.btn-danger) {
                background: #fff;
            }

            .call .call-action-button .btn svg {
                width: 25px;
                height: 25px;
            }

nav.navigation .nav-group {
    width: 80px;
}

nav.navigation ul {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

    nav.navigation ul li {
        list-style: none;
    }

        nav.navigation ul li:not(.logo-chat) {
            margin-bottom: 10px;
        }

            nav.navigation ul li:not(.logo-chat) > a {
                border-top-right-radius: 0.75rem;
                border-bottom-right-radius: 0.75rem;
            }

        nav.navigation ul li.navigation-action-button > a {
            position: relative;
            color: #fff;
            margin-bottom: 10px;
        }

            nav.navigation ul li.navigation-action-button > a:focus,
            nav.navigation ul li.navigation-action-button > a:hover {
                color: #fff !important;
            }

            nav.navigation ul li.navigation-action-button > a > * {
                position: relative;
                z-index: 1;
            }

            nav.navigation ul li.navigation-action-button > a:before {
                content: "";
                display: block;
                height: 40px;
                width: 40px;
                position: absolute;
                background-color: #ff5252;
                border-radius: 50%;
                box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.5);
                -webkit-animation: navigation-action-button-pulse 2s infinite;
                pointer-events: none;
            }

@-webkit-keyframes navigation-action-button-pulse {
    to {
        box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
    }
}

@keyframes navigation-action-button-pulse {
    to {
        box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);
    }
}

nav.navigation ul li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    color: #4d4d4d;
    position: relative;
    transition: all 0.3s;
}

    nav.navigation ul li > a svg {
        width: 25px;
        height: 25px;
    }

    nav.navigation ul li > a .badge {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        padding: 0;
        border-radius: 50%;
        position: absolute;
        top: 7px;
        right: 7px;
    }

    nav.navigation ul li > a:focus,
    nav.navigation ul li > a:hover {
        color: #ff5252 !important;
    }

    nav.navigation ul li > a.active {
        background-color: #fff;
        color: #ff5252;
    }

    nav.navigation ul li > a i {
        font-size: 19px;
    }

nav.navigation ul li.logo-chat a {
    margin-bottom: 1rem;
    height: 80px;
}

    nav.navigation ul li.logo-chat a svg {
        width: 40px !important;
        height: 40px !important;
    }

nav.navigation ul li.brackets {
    flex: 1;
}

.ti-double-check:after,
.ti-double-check:before {
    content: "\e64c";
    font-family: themify;
}

.ti-double-check:after {
    margin-left: -4px;
}

.introjs-tooltip {
    box-shadow: none;
    border-radius: 0.75rem;
    padding: 15px 20px;
}

.introjs-bullets,
.introjs-tooltipbuttons {
    text-align: left;
}

.introjs-overlay {
    background-image: none;
    background-color: rgba(0, 0, 0, 0.7);
}

.introjs-helperLayer {
    border-radius: 0.75rem;
}

.introjs-helperNumberLayer {
    text-shadow: none;
    left: 50%;
    margin-left: -10px;
    background: #fff;
    color: #000;
    border: none;
}

.introjs-button {
    border: none;
    background-color: #ff5252;
    background-image: none;
    text-shadow: none;
    color: #fff;
}

    .introjs-button.introjs-disabled {
        background-color: #ff9f9f;
    }

    .introjs-button:not(.introjs-disabled):focus,
    .introjs-button:not(.introjs-disabled):hover {
        background-color: #ff1f1f;
        background-image: none;
        color: #fff;
    }

.introjs-prevbutton {
    border-radius: 0.75rem 0 0 0.75rem;
}

    .introjs-prevbutton:hover {
        color: #fff;
    }

.introjs-nextbutton {
    border-radius: 0 0.75rem 0.75rem 0;
}

    .introjs-nextbutton:hover {
        color: #fff;
    }

.introjs-skipbutton {
    border-radius: 0.75rem;
}

.alert {
    border: none;
}

.slick-slide:focus {
    outline: none;
}

.story-block .story-items {
    text-align: center;
    display: flex;
}

    .story-block .story-items a {
        color: #666;
    }

        .story-block .story-items a:hover {
            color: #000;
        }

    .story-block .story-items .slick-list {
        margin: 0 -10px;
    }

    .story-block .story-items .story-item {
        padding: 5px;
    }

        .story-block .story-items .story-item .avatar {
            width: 60px;
            height: 60px;
        }

            .story-block .story-items .story-item .avatar .avatar-title {
                font-size: 28px;
            }

        .story-block .story-items .story-item:last-child {
            margin-right: 0;
        }

        .story-block .story-items .story-item .story-content {
            display: block;
            padding-top: 10px;
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
    background: rgba(0, 0, 0, 0.5) !important;
}

.swal2-popup {
    padding: 30px !important;
}

.swal2-popup,
.swal2-styled {
    border-radius: 0.75rem !important;
}

.swal2-styled {
    padding: 9px 14px !important;
    font-size: 14px !important;
}

    .swal2-styled.swal2-confirm {
        background-color: #ff5252 !important;
    }

.swal2-title {
    font-size: 20px !important;
}

@-webkit-keyframes load {
    0% {
        left: -150px;
    }

    to {
        left: 100%;
    }
}

@keyframes load {
    0% {
        left: -150px;
    }

    to {
        left: 100%;
    }
}

.emojis {
    padding: 6px;
}

    .emojis ul {
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
    }

        .emojis ul li {
            padding: 5px 10px;
            font-size: 20px;
            display: inline-block;
            cursor: pointer;
            transition: transform 0.3s;
        }

            .emojis ul li:hover {
                transform: scale(1.4);
            }

.tooltip .arrow {
    display: none;
}

.tooltip .tooltip-inner {
    background-color: rgba(0, 0, 0, 0.5);
}

.list-group-unlined li.list-group-item {
    border: none;
}

.tab-content {
    padding-top: 30px;
}

    .tab-content .form-item {
        margin-bottom: 0.8rem;
    }

.layout {
    height: 95vh;
    display: flex;
}

    .layout .content {
        display: flex;
        flex: 1;
    }

        .layout .content .right-sidebar {
            background-color: #fff;
            position: fixed;
            right: -150%;
            top: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            transition: all 0.5s;
            width: 350px;
            z-index: 999;
            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
        }

            .layout .content .right-sidebar .list-group-item {
                border-color: #e6e6e6;
            }

            .layout .content .right-sidebar .tab-content {
                padding-top: 0;
            }

            .layout .content .right-sidebar.open {
                right: 0;
            }

        .layout .content .right-sidebar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            height: 60px;
            border-bottom: 1px solid #e6e6e6;
        }

            .layout .content .right-sidebar-header.with-tab-menu {
                padding: 0;
                height: auto;
                border: none;
            }

                .layout .content .right-sidebar-header.with-tab-menu .nav-tabs {
                    flex: 1;
                    display: flex;
                }

                    .layout .content .right-sidebar-header.with-tab-menu .nav-tabs .nav-item {
                        flex: 1;
                    }

                        .layout .content .right-sidebar-header.with-tab-menu .nav-tabs .nav-item .nav-link {
                            padding: 15px 5px;
                            text-align: center;
                        }

        .layout .content .right-sidebar-close {
            position: absolute;
            background-color: #fff;
            color: #000;
            top: 30px;
            left: -50px;
            margin-top: -20px;
            width: 40px;
            height: 40px;
            border-radius: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
        }

        .layout .content .right-sidebar-title {
            font-size: 17px;
        }

        .layout .content .right-sidebar-content {
            overflow: auto;
            flex: 1;
            padding: 30px;
        }

        .layout .content .left-sidebar {
            width: 400px;
            display: none;
            flex-direction: column;
        }

            .layout .content .left-sidebar .input-group {
                position: relative;
            }

                .layout .content .left-sidebar .input-group .btn {
                    z-index: 4;
                    position: absolute;
                    background-color: #dedede;
                }

                .layout .content .left-sidebar .input-group .form-control {
                    border-radius: 0.75rem !important;
                    background-color: #dedede;
                    padding-left: 45px;
                }

            .layout .content .left-sidebar.open {
                display: flex;
            }

        .layout .content .left-sidebar-header {
            padding: 30px 30px 0;
        }

        .layout .content .left-sidebar-content {
            overflow: auto;
            flex: 1;
            padding: 30px 30px 0;
        }

            .layout .content .left-sidebar-content .list-group-item {
                padding: 20px;
                display: flex;
                cursor: pointer;
                background-color: #fff;
                border-radius: 0.75rem;
                margin-bottom: 20px;
                border: 1px solid transparent;
                transition: background-color 0.3s;
            }

                .layout .content .left-sidebar-content .list-group-item:hover {
                    background-color: #f5f5f5;
                }

                .layout .content .left-sidebar-content .list-group-item.active {
                    background-color: #ff5252;
                    color: hsla(0, 0%, 100%, 0.8);
                }

                    .layout .content .left-sidebar-content .list-group-item.active .avatar:before {
                        border-color: #ff5252;
                    }

                    .layout .content .left-sidebar-content .list-group-item.active .text-muted {
                        color: hsla(0, 0%, 100%, 0.7) !important;
                    }

                    .layout .content .left-sidebar-content .list-group-item.active a:not(.dropdown-item) {
                        color: hsla(0, 0%, 100%, 0.8);
                    }

                    .layout .content .left-sidebar-content .list-group-item.active .users-list-body h5 {
                        color: #fff;
                    }

                    .layout .content .left-sidebar-content .list-group-item.active .users-list-body p {
                        color: hsla(0, 0%, 100%, 0.7);
                    }

                .layout .content .left-sidebar-content .list-group-item .users-list-body {
                    display: flex;
                    flex: 1;
                    position: relative;
                    min-width: 0;
                }

                    .layout .content .left-sidebar-content .list-group-item .users-list-body > div:first-child {
                        min-width: 0;
                        display: flex;
                        flex-direction: column;
                        flex: 1;
                    }

                    .layout .content .left-sidebar-content .list-group-item .users-list-body h5 {
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        font-size: 16px;
                        font-weight: 500;
                        margin-bottom: 0.2rem;
                    }

                    .layout .content .left-sidebar-content .list-group-item .users-list-body p {
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        margin-bottom: 0;
                        color: #4d4d4d;
                    }

                    .layout .content .left-sidebar-content .list-group-item .users-list-body .users-list-action {
                        padding-left: 15px;
                    }

                        .layout .content .left-sidebar-content .list-group-item .users-list-body .users-list-action [data-toggle="dropdown"] i {
                            font-size: 18px;
                        }

                        .layout .content .left-sidebar-content .list-group-item .users-list-body .users-list-action .new-message-count {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 35px;
                            height: 35px;
                            position: absolute;
                            font-size: 12px;
                            background-color: #e6e6e6;
                            color: #000;
                            border: 4px solid #e6e6e6;
                            border-radius: 50%;
                            right: -30px;
                            top: -30px;
                        }

                        .layout .content .left-sidebar-content .list-group-item .users-list-body .users-list-action .action-toggle {
                            opacity: 0;
                            text-align: right;
                        }

                .layout .content .left-sidebar-content .list-group-item.unread-chat {
                    color: #7cd420;
                    font-weight: 700;
                }

                    .layout .content .left-sidebar-content .list-group-item.unread-chat .new-message-count {
                        background-color: #7cd420 !important;
                        color: #fff !important;
                    }

                .layout .content .left-sidebar-content .list-group-item:hover .users-list-action .action-toggle {
                    opacity: 1;
                }

    .layout .chat {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-right: 30px;
        padding-left:10px
    }

        .layout .chat .chat-header {
            display: flex;
            justify-content: space-between;
            padding: 20px 0;
        }

            .layout .chat .chat-header .chat-header-user {
                display: flex;
                align-items: center;
            }

                .layout .chat .chat-header .chat-header-user .avatar {
                    margin-right: 1rem;
                }

                    .layout .chat .chat-header .chat-header-user .avatar.avatar-state-danger:before,
                    .layout .chat .chat-header .chat-header-user .avatar.avatar-state-dark:before,
                    .layout .chat .chat-header .chat-header-user .avatar.avatar-state-info:before,
                    .layout .chat .chat-header .chat-header-user .avatar.avatar-state-light:before,
                    .layout .chat .chat-header .chat-header-user .avatar.avatar-state-primary:before,
                    .layout .chat .chat-header .chat-header-user .avatar.avatar-state-secondary:before,
                    .layout .chat .chat-header .chat-header-user .avatar.avatar-state-success:before,
                    .layout .chat .chat-header .chat-header-user .avatar.avatar-state-warning:before {
                        border-color: #e1e3eb;
                    }

                .layout .chat .chat-header .chat-header-user h5 {
                    font-size: 16px;
                    font-weight: 600;
                    margin-bottom: 0;
                    line-height: 1;
                }

            .layout .chat .chat-header .chat-header-action ul li {
                margin-bottom: 0;
            }

        .layout .chat .chat-body {
            flex: 1;
            padding: 30px;
            border-top-left-radius: 0.75rem;
            border-top-right-radius: 0.75rem;
            background-color: #fff;
        }

            .layout .chat .chat-body .messages {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }

                .layout .chat .chat-body .messages .message-item {
                    max-width: 75%;
                    margin-bottom: 3rem;
                }

                    .layout .chat .chat-body .messages .message-item.in + .in,
                    .layout .chat .chat-body .messages .message-item.out + .out {
                        margin-top: -2rem;
                    }

                    .layout .chat .chat-body .messages .message-item:last-child {
                        margin-bottom: 0;
                    }

                    .layout .chat .chat-body .messages .message-item .message-avatar {
                        display: flex;
                        margin-bottom: 0.7rem;
                    }

                        .layout .chat .chat-body .messages .message-item .message-avatar .avatar {
                            margin-right: 1rem;
                        }

                        .layout .chat .chat-body .messages .message-item .message-avatar h5 {
                            font-size: 15px;
                            margin-bottom: 0;
                        }

                        .layout .chat .chat-body .messages .message-item .message-avatar .time {
                            color: #828282;
                            margin-top: 2px;
                            font-style: italic;
                            font-size: 12px;
                        }

                    .layout .chat .chat-body .messages .message-item .message-content {
                        display: flex;
                        align-items: center;
                    }

                        .layout .chat .chat-body .messages .message-item .message-content audio::-webkit-media-controls-panel {
                            background: #ebebeb;
                        }

                        .layout .chat .chat-body .messages .message-item .message-content > .message-text {
                            background-color: #ebebeb;
                            border-radius: 0.75rem;
                            padding: 10px 20px;
                        }

                            .layout .chat .chat-body .messages .message-item .message-content > .message-text .writing-animation {
                                margin-top: -9px;
                                padding-bottom: 9px;
                            }

                                .layout .chat .chat-body .messages .message-item .message-content > .message-text .writing-animation .writing-animation-line {
                                    display: inline-block;
                                    width: 5px;
                                    height: 5px;
                                    margin: 0 1px;
                                    border-radius: 15px;
                                    background-color: #999;
                                }

                                    .layout .chat .chat-body .messages .message-item .message-content > .message-text .writing-animation .writing-animation-line:last-child {
                                        -webkit-animation: writingAnimation 0.6s linear 0.1s infinite;
                                        animation: writingAnimation 0.6s linear 0.1s infinite;
                                    }

                                    .layout .chat .chat-body .messages .message-item .message-content > .message-text .writing-animation .writing-animation-line:nth-last-child(2) {
                                        -webkit-animation: writingAnimation 0.6s linear 0.2s infinite;
                                        animation: writingAnimation 0.6s linear 0.2s infinite;
                                    }

                                    .layout .chat .chat-body .messages .message-item .message-content > .message-text .writing-animation .writing-animation-line:nth-last-child(3) {
                                        -webkit-animation: writingAnimation 0.6s linear 0.3s infinite;
                                        animation: writingAnimation 0.6s linear 0.3s infinite;
                                    }

                    .layout .chat .chat-body .messages .message-item .message-content-images {
                        display: flex;
                        overflow: hidden;
                        border-radius: 0.75rem;
                    }

                        .layout .chat .chat-body .messages .message-item .message-content-images a {
                            display: inline-block;
                            margin-right: 5px;
                        }

                            .layout .chat .chat-body .messages .message-item .message-content-images a img {
                                height: 100px;
                                width: 100px;
                                -o-object-fit: cover;
                                object-fit: cover;
                            }

                            .layout .chat .chat-body .messages .message-item .message-content-images a:last-child {
                                margin-right: 0;
                            }

                    .layout .chat .chat-body .messages .message-item .message-content > .dropdown {
                        margin-left: 15px;
                    }

                        .layout .chat .chat-body .messages .message-item .message-content > .dropdown > a {
                            color: #bfbfbf;
                        }

                            .layout .chat .chat-body .messages .message-item .message-content > .dropdown > a:focus,
                            .layout .chat .chat-body .messages .message-item .message-content > .dropdown > a:hover {
                                color: #000;
                            }

                    .layout .chat .chat-body .messages .message-item .message-content.message-file {
                        display: flex;
                        word-break: break-word;
                    }

                        .layout .chat .chat-body .messages .message-item .message-content.message-file .file-icon {
                            font-size: 24px;
                            margin-right: 1rem;
                            color: #4d4d4d;
                        }

                        .layout .chat .chat-body .messages .message-item .message-content.message-file ul {
                            margin-top: 3px;
                            margin-bottom: 0;
                        }

                            .layout .chat .chat-body .messages .message-item .message-content.message-file ul li.list-inline-item {
                                margin-left: 0;
                                margin-right: 0.5rem;
                            }

                    .layout .chat .chat-body .messages .message-item.out {
                        margin-left: auto;
                    }

                        .layout .chat .chat-body .messages .message-item.out .message-avatar {
                            justify-content: flex-end;
                        }

                        .layout .chat .chat-body .messages .message-item.out .message-content {
                            flex-direction: row-reverse;
                        }

                            .layout .chat .chat-body .messages .message-item.out .message-content .message-text {
                                border: none;
                                background-color: #ffe1e1;
                            }

                            .layout .chat .chat-body .messages .message-item.out .message-content > .dropdown {
                                border-color: #ff5252;
                                margin-left: 0;
                                margin-right: 15px;
                            }

                .layout .chat .chat-body .messages .messages-divider {
                    width: 100%;
                    max-width: 100%;
                    position: relative;
                }

                    .layout .chat .chat-body .messages .messages-divider:before {
                        content: attr(data-label);
                        display: block;
                        position: absolute;
                        top: -8px;
                        letter-spacing: 0.5px;
                        font-size: 11px;
                        padding: 2px 8px;
                        border-radius: 3px;
                        background-color: #e6e6e6;
                        left: 50%;
                        transform: translateX(-50%);
                    }

        .layout .chat .chat-footer {
            background-color: #fff;
            border-top: 1px solid #e6e6e6;
            padding: 20px 30px;
            display: flex;
            align-items: center;
        }

            .layout .chat .chat-footer form {
                flex: 1;
            }

            .layout .chat .chat-footer .form-control.form-control-main {
                font-size: 18px;
                background: none;
                border: none;
                padding: 7px 5px;
            }

                .layout .chat .chat-footer .form-control.form-control-main:focus {
                    box-shadow: none;
                }

                    .layout .chat .chat-footer .form-control.form-control-main:focus::-moz-placeholder {
                        color: #b3b3b3;
                    }

                    .layout .chat .chat-footer .form-control.form-control-main:focus:-ms-input-placeholder {
                        color: #b3b3b3;
                    }

                    .layout .chat .chat-footer .form-control.form-control-main:focus::placeholder {
                        color: #b3b3b3;
                    }

        .layout .chat .chat-preloader {
            display: flex;
        }

        .layout .chat .chat-preloader,
        .layout .chat .no-message-container {
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: 100%;
        }

        .layout .chat .no-message-container {
            display: none;
        }

            .layout .chat .no-message-container svg {
                width: 50px;
                height: 50px;
                stroke: #ff5252;
                fill: #e6e6e6;
            }

            .layout .chat .no-message-container p {
                font-size: 16px;
                color: #4d4d4d;
            }

        .layout .chat.no-message {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

            .layout .chat.no-message .no-message-container {
                display: flex;
            }

            .layout .chat.no-message .chat-body,
            .layout .chat.no-message .chat-footer,
            .layout .chat.no-message .chat-header {
                display: none;
            }

    .layout .video-block a {
        width: 130px;
        height: 100px;
        display: flex;
        border-radius: 0.75rem;
        align-items: center;
        justify-content: center;
        background: #ebebeb;
        font-size: 35px;
        color: rgba(0, 0, 0, 0.5);
        transition: all 0.3s;
    }

        .layout .video-block a:hover {
            background: #e0e0e0;
            color: #000;
        }

@keyframes writingAnimation {
    0% {
        transform: translate(0);
    }

    50% {
        transform: translateY(10px);
    }

    to {
        transform: translate(0);
    }
}

.preloader {
    position: fixed;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .preloader .spinner-border {
        width: 2rem !important;
        height: 2rem !important;
        border: 5px solid #b3b3b3;
        border-right-color: transparent;
    }

@media (max-width: 992px) {
    .chat {
        display: none !important;
    }

    .left-sidebar {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .left-sidebar-content .list-group-item .users-list-body .users-list-action .action-toggle {
        opacity: 1 !important;
    }

    .right-sidebar {
        width: 83% !important;
    }

    .layout {
        flex-direction: column;
    }

        .layout .left-sidebar {
            min-height: 0;
            width: auto;
        }

    nav.navigation {
        background: #fff;
    }

        nav.navigation .logo-chat {
            display: none;
        }

        nav.navigation .nav-group {
            width: auto;
            padding: 15px 20px;
        }

            nav.navigation .nav-group > ul {
                height: auto;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
		        width:80%
            }

                nav.navigation .nav-group > ul > li {
                    margin-bottom: 0;
                    margin-right: 10px;
                }

                    nav.navigation .nav-group > ul > li.navigation-action-button {
                        position: fixed;
                        bottom: 20px;
                        right: 20px;
                        z-index: 998 !important;
                        margin-right: 0 !important;
                    }

                        nav.navigation .nav-group > ul > li.navigation-action-button > a svg {
                            width: 30px;
                            height: 30px;
                        }

                        nav.navigation .nav-group > ul > li.navigation-action-button > a:before {
                            width: 50px;
                            height: 50px;
                        }

                    nav.navigation .nav-group > ul > li.brackets {
                        flex: inherit;
                    }

                    nav.navigation .nav-group > ul > li:last-child {
                        margin-right: 0;
                    }

                    nav.navigation .nav-group > ul > li > a {
                        display: flex;
                        padding: 12px 15px;
                        border-radius: 0.75rem !important;
                    }

                        nav.navigation .nav-group > ul > li > a .badge {
                            top: 0;
                            right: 0;
                        }

                        nav.navigation .nav-group > ul > li > a svg {
                            width: 20px;
                            height: 20px;
                        }

                        nav.navigation .nav-group > ul > li > a.active {
                            background-color: #e6e6e6;
                        }

    .left-sidebar-content,
    .left-sidebar-header {
        padding: 20px 20px 0 !important;
    }

        .left-sidebar-content .list-group-item {
            padding: 15px !important;
        }

    .chat {
        position: fixed;
        background-color: #fff;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 0 !important;
        z-index: 999;
    }

        .chat.open {
            display: flex !important;
        }

    .chat-header {
        padding: 20px !important;
        display: block !important;
        border-bottom: 1px solid #e6e6e6;
    }

    .chat-header-action ul {
        margin-top: 20px;
        margin-left: -5px;
    }

        .chat-header-action ul li {
            margin-bottom: 0 !important;
        }

    .chat-body {
        border-radius: 0 !important;
        overflow: auto;
    }

        .chat-body .messages .message-item {
            max-width: 100% !important;
        }

            .chat-body .messages .message-item .message-content-images a img {
                width: 100% !important;
            }

    .chat-footer {
        padding: 20px !important;
    }
}

body.rtl {
    direction: rtl;
}

    body.rtl .mr-2 {
        margin-right: 0 !important;
        margin-left: 0.5rem !important;
    }

    body.rtl .mr-3 {
        margin-right: 0 !important;
        margin-left: 1rem !important;
    }

    body.rtl .mr-4 {
        margin-right: 0 !important;
        margin-left: 1.5rem !important;
    }

    body.rtl .ml-2 {
        margin-right: 0.5rem !important;
        margin-left: 0 !important;
    }

    body.rtl .ml-auto {
        margin-left: 0 !important;
        margin-right: auto !important;
    }

    body.rtl .btn-icon {
        margin-right: 0 !important;
        margin-left: 0.5rem;
    }

    body.rtl .mr-3.item-rtl {
        margin-right: 0 !important;
        margin-left: 1rem;
    }

    body.rtl .offset-3 {
        margin-left: 0;
        margin-right: 25%;
    }

    body.rtl .offset-4 {
        margin-left: 0;
        margin-right: 33.333333%;
    }

    body.rtl ul.nav.nav-tabs {
        padding-right: 0;
    }

    body.rtl .modal .modal-content {
        text-align: right;
    }

        body.rtl .modal .modal-content .modal-header .modal-title i {
            margin-right: 0;
            margin-left: 0.7rem;
        }

    body.rtl .modal .modal-footer {
        justify-content: end;
    }

    body.rtl .input-group .input-group-append .btn,
    body.rtl .input-group .input-group-append .input-group-text {
        border-radius: 0.75rem !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    body.rtl .input-group .form-control {
        border-radius: 0.75rem !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    body.rtl .custom-file-label:after {
        right: auto;
        left: 0;
        border-radius: 0;
        border-top-left-radius: 0.75rem;
        border-bottom-left-radius: 0.75rem;
    }

    body.rtl .custom-control {
        display: flex;
    }

    body.rtl nav.navigation ul li a.active {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 0.75rem;
        border-bottom-left-radius: 0.75rem;
    }

    body.rtl nav.navigation ul li a .badge {
        right: auto;
        left: 7px;
    }

    body.rtl nav.navigation ul li a.notifiy_badge:before {
        left: 10px;
        right: auto !important;
    }

    body.rtl .sidebar-group .sidebar {
        margin-left: 30px;
        margin-right: 0 !important;
        text-align: right;
    }

        body.rtl .sidebar-group .sidebar > header ul.list-inline li.list-inline-item {
            margin-left: 0 !important;
            margin-right: 0.5rem !important;
        }

        body.rtl .sidebar-group .sidebar .list-group-item.active:before {
            left: auto;
            right: 0;
        }

        body.rtl .sidebar-group .sidebar .list-group-item figure {
            margin-right: 0 !important;
            margin-left: 1rem;
        }

        body.rtl .sidebar-group .sidebar .list-group-item .avatar-group figure.avatar {
            margin-right: -2rem !important;
        }

        body.rtl .sidebar-group .sidebar .list-group-item .users-list-body {
            text-align: right;
        }

            body.rtl .sidebar-group .sidebar .list-group-item .users-list-body .users-list-action {
                padding-left: 0 !important;
            }

                body.rtl .sidebar-group .sidebar .list-group-item .users-list-body .users-list-action .action-toggle {
                    text-align: left !important;
                }

                body.rtl .sidebar-group .sidebar .list-group-item .users-list-body .users-list-action .new-message-count {
                    margin-left: 0 !important;
                    margin-right: auto !important;
                }

    body.rtl .list-group {
        padding-right: 0;
    }

    body.rtl .dropdown-menu .dropdown-item,
    body.rtl .left-sidebar {
        text-align: right;
    }

    body.rtl .left-sidebar-content .new-message-count {
        right: auto !important;
        left: -30px;
    }

    body.rtl .left-sidebar-content .list-group-item .users-list-body .users-list-action {
        padding-left: 0;
        padding-right: 15px;
    }

        body.rtl .left-sidebar-content .list-group-item .users-list-body .users-list-action .action-toggle {
            text-align: left;
        }

    body.rtl .left-sidebar .input-group .form-control {
        padding-right: 45px;
        padding-left: 0;
        border-radius: 0.75rem !important;
    }

    body.rtl .left-sidebar .input-group-prepend .btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-top-right-radius: 0.75rem;
        border-bottom-right-radius: 0.75rem;
    }

    body.rtl .list-inline {
        padding-left: auto;
        padding-right: 0;
    }

        body.rtl .list-inline.social-links .list-inline-item {
            margin-right: 0;
            margin-left: 0.5rem;
        }

    body.rtl .introjs-bullets,
    body.rtl .introjs-tooltip,
    body.rtl .introjs-tooltipbuttons {
        text-align: right;
    }

    body.rtl .introjs-prevbutton {
        border-radius: 0 0.75rem 0.75rem 0;
    }

    body.rtl .introjs-nextbutton {
        border-radius: 0.75rem 0 0 0.75rem;
    }

    body.rtl .introjs-skipbutton {
        margin-right: 0;
        margin-left: 5px;
    }

    body.rtl .right-sidebar {
        text-align: right;
        right: auto;
        left: -110%;
    }

        body.rtl .right-sidebar.open {
            left: 0;
        }

    body.rtl .right-sidebar-close {
        left: auto;
        right: -50px;
    }

    body.rtl .chat {
        padding-right: 0;
        padding-left: 30px;
    }

        body.rtl .chat .chat-header .chat-header-user {
            text-align: right;
        }

            body.rtl .chat .chat-header .chat-header-user figure {
                margin-right: 0 !important;
                margin-left: 1rem;
            }

        body.rtl .chat .chat-header .chat-header-action .list-inline-item {
            margin-right: 0.5rem !important;
            margin-left: 0 !important;
        }

        body.rtl .chat .chat-body .messages .message-item {
            text-align: right;
        }

            body.rtl .chat .chat-body .messages .message-item.out {
                margin-left: 0;
                margin-right: auto;
            }

                body.rtl .chat .chat-body .messages .message-item.out .message-content > .dropdown {
                    margin-left: 15px;
                    margin-right: 0;
                }

            body.rtl .chat .chat-body .messages .message-item.in .message-content > .dropdown {
                margin-right: 15px;
                margin-left: 0;
            }

            body.rtl .chat .chat-body .messages .message-item ul {
                padding-right: 0 !important;
            }

            body.rtl .chat .chat-body .messages .message-item .message-content.message-file .file-icon {
                margin-right: 0 !important;
                margin-left: 1rem;
            }

            body.rtl .chat .chat-body .messages .message-item.outgoing-message {
                margin-left: 0 !important;
                margin-right: auto;
            }

        body.rtl .chat .chat-body .messages .message-avatar .avatar {
            margin-right: 0 !important;
            margin-left: 1rem !important;
        }

        body.rtl .chat .chat-footer .form-buttons .btn {
            margin-left: 0 !important;
            margin-right: 1rem;
        }

        body.rtl .chat + .sidebar-group .sidebar {
            margin-left: 0 !important;
            margin-right: 30px !important;
        }

.right-sidebar {
    background-color: #fff;
    position: fixed;
    right: -150%;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    transition: all 0.5s;
    width: 350px;
    z-index: 999;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
}

    .right-sidebar .list-group-item {
        border-color: #e6e6e6;
    }

    .right-sidebar .tab-content {
        padding-top: 0;
    }

    .right-sidebar.open {
        right: 0;
    }

.right-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    height: 60px;
    border-bottom: 1px solid #e6e6e6;
}

    .right-sidebar-header.with-tab-menu {
        padding: 0;
        height: auto;
        border: none;
    }

        .right-sidebar-header.with-tab-menu .nav-tabs {
            flex: 1;
            display: flex;
        }

            .right-sidebar-header.with-tab-menu .nav-tabs .nav-item {
                flex: 1;
            }

                .right-sidebar-header.with-tab-menu .nav-tabs .nav-item .nav-link {
                    padding: 15px 5px;
                    text-align: center;
                }

.right-sidebar-close {
    position: absolute;
    background-color: #fff;
    color: #000;
    top: 30px;
    left: -50px;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
}

.right-sidebar-title {
    font-size: 17px;
}

.right-sidebar-content {
    overflow: auto;
    flex: 1;
    padding: 30px;
}

.left-sidebar {
    width: 400px;
    display: none;
    flex-direction: column;
}

    .left-sidebar .input-group {
        position: relative;
    }

        .left-sidebar .input-group .btn {
            z-index: 4;
            position: absolute;
            background-color: #dedede;
        }

        .left-sidebar .input-group .form-control {
            border-radius: 0.75rem !important;
            background-color: #dedede;
            padding-left: 45px;
        }

    .left-sidebar.open {
        display: flex;
    }

.left-sidebar-header {
    padding: 30px 30px 0;
}

.left-sidebar-content {
    overflow: auto;
    flex: 1;
    padding: 30px 30px 0;
}

    .left-sidebar-content .list-group-item {
        padding: 20px;
        display: flex;
        cursor: pointer;
        background-color: #fff;
        border-radius: 0.75rem;
        margin-bottom: 20px;
        border: 1px solid transparent;
        transition: background-color 0.3s;
    }

        .left-sidebar-content .list-group-item:hover {
            background-color: #f5f5f5;
        }

        .left-sidebar-content .list-group-item.active {
            background-color: #ff5252;
            color: hsla(0, 0%, 100%, 0.8);
        }

            .left-sidebar-content .list-group-item.active .avatar:before {
                border-color: #ff5252;
            }

            .left-sidebar-content .list-group-item.active .text-muted {
                color: hsla(0, 0%, 100%, 0.7) !important;
            }

            .left-sidebar-content .list-group-item.active a:not(.dropdown-item) {
                color: hsla(0, 0%, 100%, 0.8);
            }

            .left-sidebar-content .list-group-item.active .users-list-body h5 {
                color: #fff;
            }

            .left-sidebar-content .list-group-item.active .users-list-body p {
                color: hsla(0, 0%, 100%, 0.7);
            }

        .left-sidebar-content .list-group-item .users-list-body {
            display: flex;
            flex: 1;
            position: relative;
            min-width: 0;
        }

            .left-sidebar-content .list-group-item .users-list-body > div:first-child {
                min-width: 0;
                display: flex;
                flex-direction: column;
                flex: 1;
            }

            .left-sidebar-content .list-group-item .users-list-body h5 {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 0.2rem;
            }

            .left-sidebar-content .list-group-item .users-list-body p {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                margin-bottom: 0;
                color: #4d4d4d;
            }

            .left-sidebar-content .list-group-item .users-list-body .users-list-action {
                padding-left: 15px;
            }

                .left-sidebar-content .list-group-item .users-list-body .users-list-action [data-toggle="dropdown"] i {
                    font-size: 18px;
                }

                .left-sidebar-content .list-group-item .users-list-body .users-list-action .new-message-count {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 35px;
                    height: 35px;
                    position: absolute;
                    font-size: 12px;
                    background-color: #e6e6e6;
                    color: #000;
                    border: 4px solid #e6e6e6;
                    border-radius: 50%;
                    right: -30px;
                    top: -30px;
                }

                .left-sidebar-content .list-group-item .users-list-body .users-list-action .action-toggle {
                    opacity: 0;
                    text-align: right;
                }

        .left-sidebar-content .list-group-item.unread-chat {
            color: #7cd420;
            font-weight: 700;
        }

            .left-sidebar-content .list-group-item.unread-chat .new-message-count {
                background-color: #7cd420 !important;
                color: #fff !important;
            }

        .left-sidebar-content .list-group-item:hover .users-list-action .action-toggle {
            opacity: 1;
        }

.nav.nav-tabs {
    border: none;
}

    .nav.nav-tabs .nav-item {
        margin: 0;
    }

        .nav.nav-tabs .nav-item:first-child {
            margin-left: 0;
        }

        .nav.nav-tabs .nav-item:last-child {
            margin-right: 0;
        }

        .nav.nav-tabs .nav-item .nav-link {
            color: #000;
            border: none;
            border-bottom: 1px solid transparent;
            padding: 0 15px 10px;
            transition: all 0.3s;
        }

            .nav.nav-tabs .nav-item .nav-link:hover {
                color: #4d4d4d;
            }

            .nav.nav-tabs .nav-item .nav-link.active {
                color: #ff5252;
                border-bottom-color: #ff5252;
                background: none;
            }

body {
    background-color: #e6e6e6;
    font-family: Nunito, sans-serif;
}

.layout {
    overflow: hidden;
}

.list-group-item {
    background-color: inherit;
    border-color: #fafafa;
}

ul.list-inline .list-inline-item {
    margin-bottom: 0.5rem;
}

    ul.list-inline .list-inline-item:not(:last-child) {
        margin-right: 0;
    }

ul.list-inline:not(.social-links) .list-inline-item {
    margin-left: 0.5rem;
}

ul.list-inline.social-links .list-inline-item {
    margin-right: 0.5rem;
    margin-bottom: 0.6rem;
}

.files ul.list-inline {
    display: flex;
    overflow-x: auto;
}

    .files ul.list-inline .list-inline-item {
        margin-left: 0;
        margin-right: 0.5rem;
    }

.connection-error svg {
    margin: 30px 0;
    height: 100px;
    width: 100%;
}

    .connection-error svg circle,
    .connection-error svg path,
    .connection-error svg polygon {
        fill: #f33333;
    }

.sticky-top {
    position: -webkit-sticky !important;
    position: sticky !important;
}