body {
    font-family: "Open Sans", sans-serif;
    color: #526484;
    font-size: 12px;
}

img {
    max-width: 100%;
    height: auto;
}

p {
    margin-bottom: 0;
}

.navbar-dark .navbar-brand {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 0;
}

.sb-topnav.navbar-dark #sidebarToggle .fa-bars {
    font-size: 20px;
}

.bg-blue {
    background-color: #1c3faa;
}

label {
    font-weight: 600;
}

.sb-topnav.navbar-dark #sidebarToggle {
    margin: 0 10px;
}

.sb-sidenav {
    background: #182948;
    color: #fff;
}

.sb-topnav .navbar-brand {
    background: #3fcc81;
    height: 50px;
    padding: 0;
}

.sb-topnav .navbar-brand img {
    margin: 17px 10px;
}

.sb-sidenav .sb-sidenav-menu .nav a {
    color: #fff;
    position: relative;
}

.sb-sidenav .sb-sidenav-menu .nav-link:hover,
.sb-sidenav .sb-sidenav-menu .nav-link.active {
    color: #41b883;
    background: none;
}

.sb-sidenav .sb-sidenav-menu .nav-link:hover a,
.sb-sidenav .sb-sidenav-menu .nav-link.active a {
    color: #41b883;
}

.sb-sidenav .sb-sidenav-menu .nav-link:hover a {
    color: #41b883;
}

.profile-img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.profile-icon .dropdown-toggle::after {
    content: none;
}

.main-body {
    padding: 10px;
}

.create-project-dashed {
    border: 2px dashed #ddd;
}

.floating-anchor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.create-project {
    padding: 60px 30px;
    margin: 0 30px 0 0;
    border-radius: 20px;
    color: #6c757d;
    font-weight: 600;
    position: relative;
    transition: 0.3s all linear;
    display: inline-block;
    text-align: center;
    width: 190px;
    height: 190px;
    text-transform: capitalize;
}

.create-project svg {
    font-size: 30px;
    margin-bottom: 10px;
}

.create-project-dashed:hover {
    background-color: #fff;
    transition: 0.3s all linear;
}

.create-project:hover svg {
    color: #3fcc81;
}

.inner-wrap {
    padding: 15px 0;
}

.bg-main {
    background-color: #eeeff5;
}

.btn.focus,
.btn:focus {
    outline: 0;
    box-shadow: none;
}

.login-box {
    margin: 15px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.login-box .card {
    padding: 15px;
}

.form-wrap {}

.form-title h1 {
    font-size: 24px;
    font-weight: bold;
    text-transform: capitalize;
}

.form-wrap label {
    color: #333;
    text-transform: capitalize;
    font-weight: 600;
    margin: 0px 0px 10px;
    vertical-align: 3px;
}

.form-wrap .form-control,
.form-elements .form-control {
    height: 60px;
    font-size: 12px;
}

.multiselect-tag {
    font-size: 11px;
}

.form-group .multiselect-tag {
    padding: 1px 0 2px 8px;

    font-weight: 400;
}

.multiselect-option {
    font-size: 12px !important;
}

.form-group .multiselect-option {
    font-size: 12px;
}

.form-wrap .form-group {
    margin-bottom: 15px;
}

textarea {
    resize: none;
}

.form-wrap ::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ccc;
    opacity: 1;
    /* Firefox */
    font-weight: 500;
}

.form-wrap .form-control {
    font-weight: 600;
}

.default-btn,
.red-btn {
    display: inline-block;
    background-color: #3fcc81;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    text-align: center;
    position: relative;
    transition: 0.3s all linear;
    -webkit-transition: 0.3s all linear;
    -moz-transition: 0.3s all linear;
    -ms-transition: 0.3s all linear;
    -o-transition: 0.3s all linear;
}

.default-btn:hover {
    background-color: #3ca36c;
    color: #fff;
    transition: 0.3s all linear;
}

.default-btn.primary-btn {
    background-color: #1c3faa;
}

.default-btn.primary-btn:hover {
    background-color: #1d316e;
    color: #fff;
}

.secondary-btn {
    background: #dc4c64;
    padding: 8px 20px;
    font-size: 14px;
    color: #fff !important;
}

.secondary-btn:hover {
    background-color: #c2374e;
}

.btn-wrap {
    padding-top: 15px;
}

.red-btn {
    background-color: #e93b53 !important;
    color: #fff !important;
}

.red-btn:hover {
    color: #fff;
    background-color: #c51d33 !important;
}

.back-btn {
    position: absolute;
    top: 30px;
    left: 30px;
}

.back-btn svg {
    width: 2em;
    height: 2em;
    color: #6c757d;
}

.default-btn.outline {
    background-color: #fff;
    border: 1px solid #3fcc81;
    color: #3fcc81;
    transition: 0.3s all linear;
}

.default-btn.outline:hover {
    background-color: #e9fff3;
    color: #3fcc81;
    transition: 0.3s all linear;
}

.default-btn.outline.danger {
    border: 1px solid #f44336;
    color: #f44336;
    transition: 0.3s all linear;
}

.default-btn.outline.danger:hover {
    background-color: #ffe6e4;
    color: #f44336;
    transition: 0.3s all linear;
}

.default-btn.outline.secondary {
    border: 1px solid #007bff;
    color: #007bff;
    transition: 0.3s all linear;
}

.default-btn.outline.secondary:hover {
    background-color: #e0efff;
    color: #007bff;
    transition: 0.3s all linear;
}

.default-btn.outline.orange {
    border: 1px solid #d39e00;
    color: #d39e00;
    transition: 0.3s all linear;
}

.default-btn.outline.orange:hover {
    background-color: #fbf0cd;
    color: #d39e00;
    transition: 0.3s all linear;
}

.card {
    background-color: #fff;
    border-radius: 4px;
    border: none;
    padding: 10px 15px;
    margin-bottom: 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.card-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0 0 8px;
}

.card:hover .project-header .card-title {
    color: #1c3faa;
}

.card-head .default-btn {
    padding: 10px;
    display: inline-block;
    font-size: 12px;
}

span.time {
    line-height: 15px;
    font-size: 10px;
    color: #8497B9;
}

span.time .fa-clock {
    color: #000;
}

h1.card-title {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 700;
}

.seemore-block {
    text-align: right;
}

.page-link {
    color: #888;
}

a {
    color: #1c3faa;
    transition: 0.3s all linear;
}

a:hover {
    text-decoration: none;
    transition: 0.3s all linear;
}

.activity-list {
    position: relative;
    padding-left: 50px;
    margin: 10px 0;
    min-height: 50px;
}

.activity-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.activity-img img {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.activity-list p {
    margin: 0;
    line-height: 1.6;
    font-size: 12px;
    color: #536482;
}

.project-detail .card .inner-wrap {
    padding: 15px 0;
}

.activity-list strong {
    font-weight: 600;
}

.activity-list .time {
    color: #aaa;
}

.channel-card {
    position: relative;
    padding: 15px;
    margin: 0 0 14px;
}

.channel-card img {
    /* position: absolute;
    left: 10px; */
    border-radius: 50%;
    width: 30px;
}

.channel-icon {
    margin-bottom: 15px;
}

.channel-icon img {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.channel-information.channel-member-addition .inline-list a {
    background: none;
    padding: 0;
}

@keyframes slide1 {

    0%,
    100% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
    }

    50% {
        transform: translate(5px, 0);
        -webkit-transform: translate(5px, 0);
        -moz-transform: translate(5px, 0);
        -ms-transform: translate(5px, 0);
        -o-transform: translate(5px, 0);
    }
}

.channel-card h5 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 5px 0;
    text-transform: capitalize;
}

.channel-card h5 a {
    color: #3fcc81;
    transition: 0.3s all linear;
}

.channel-card h5 a:hover {
    color: #3ca36c;
}

.animating-arrow {
    display: inline-block;
}

.channel-card h5 a:hover .animating-arrow,
.project-header .card-title a:hover .animating-arrow {
    animation: slide1 1s ease-in-out infinite;
}

.channel-card p {
    color: #555;
    margin: 0 0 10px 0;
    line-height: 24px;
}

.channel-card:hover {
    background-color: #fafafa;
}

.notification-count-wrap {
    display: inline-block;
    background: #DC4C64;
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    margin-left: 13px;
    padding: 1px 7px;
    border-radius: 26px;
    font-weight: 400;
    vertical-align: middle;
}

.active-status {
    margin-left: 10px;
    background: #e4fff0;
    padding: 2px 10px;
    font-size: 12px;
    color: #3fcc81;
    font-weight: 600;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
}

.close-status {
    margin-left: 10px;
    background: #fcd3d1;
    padding: 2px 10px;
    font-size: 12px;
    color: #d8140b;
    font-weight: 600;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
}

.channel-inforamtion p {
    color: #aaa;
}

svg {
    vertical-align: -2px;
}

#close-sidebar {
    font-size: 20px;
}

.latest-forms.member-list {}

.member-list {
    position: relative;
    min-height: 45px;
    padding-left: 55px;
    margin-bottom: 30px;
}

.member-list:last-child {
    margin-bottom: 0;
}

.member-list.template-list a {
    position: absolute;
    right: 0;
    top: 0;
}

.member-fig,
.round-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.member-fig img,
.round-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.member-fig img {
    cursor: pointer;
}

.member-fig .status-icon {
    right: 0;
}

.member-list h5,
.form-list h5 {
    font-size: 12px;
    line-height: 18px;
    margin: 0;
    font-weight: 600;
    text-transform: capitalize;
}

.role-type {
    margin: 0;
    text-transform: capitalize;
    color: #3fcc81;
    font-weight: 700;
}

.member-list .remove-btn {
    margin-top: 10px;
}

.member-list .remove-btn a,
.remove-btn a {
    color: #f44336;
    background: #ffe8e8;
    border: 1px solid #ffe8e8;
    padding: 4px 8px;
    font-size: 12px;
    display: inline-block;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.member-list .remove-btn a:hover,
.remove-btn a:hover {
    border: 1px solid #f44336;
}

.card .form-control {
    font-size: 12px;
}

.member-list a {}

.modal-wrap .modal-title {
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
}

.modal-wrap .default-btn {
    padding: 8px 10px;
}

.modal-header p {
    margin: 0;
}

.modal-wrap .modal-header,
.modal-wrap .modal-body {
    padding: 15px;
}

.channel-card:hover h5 {
    color: #34a368;
    transition: 0.3s all linear;
}

.modal-header .close:focus {
    outline: none;
}

.green-line {
    height: 4px;
    width: 35px;
    background: #3fcc81;
    border-radius: 61px;
    margin: 0 0 10px 0;
}

.location {
    position: relative;
    padding-left: 16px;
    color: #AAAAAA;
}

.location svg {
    position: absolute;
    left: 0;
    top: 4px;

}

.project-header .card-title a {
    margin-bottom: 5px;
}

.location p {
    color: #aaa;
}

.project-body p {
    color: #555555;
}

.project-body h5 {
    color: #526484;
    font-weight: 600;
    font-size: 12px;
}

.text-green {
    color: #3FCC81 !important;
}

ul {
    padding: 0;
}

.inline-list a {
    color: #333;
}

.project-body .inline-list li a:hover {
    color: #1c3faa;
}

.alert {
    line-height: 20px;
}

.modal-wrap .modal-body p {
    line-height: 18px;
}

.members-list {
    position: relative;
    padding-top: 15px;
}

.members-list a {
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0 -8px 0 0;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.members-list a:last-child {
    margin-right: 0;
}

.members-list a:hover {
    z-index: 9;
}

.members-list a {
    border: #fff 1px solid;
    border-radius: 50%;
    display: inline-block;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.members-list a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.members-list .more-member {
    width: 39px;
    height: 39px;
    background: #3fcc81;
    display: inline-block;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    color: #fff;
    transition: 0.3s all linear;
}

.channel-information.channel-member-addition .inline-list {
    position: relative;
}

.channel-information.channel-member-addition .inline-list ul li {
    line-height: 18px;
    margin: 5px 0 0 0;
    padding-left: 0;
}

.channel-information.channel-member-addition .inline-list ul {
    margin-top: 10px;
}

.channel-information.channel-member-addition .inline-list ul li:first-child {
    margin-right: 15px;
}

.channel-information.channel-member-addition .members-list .more-member {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.members-list .more-member:hover {
    background-color: #3ca36c;
    transition: 0.3s all linear;
}

.action-button-block {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 0 0 30px 0;
}

.action-button-block .default-btn {
    padding: 8px 16px;
}

.project-header a {
    color: #333;
}

.project-header a:hover {
    color: #1c3faa;
}

.badge-pill {
    padding: 5px 12px;
}

.chat-header {
    padding: 3px 15px;
}

.chat-header .members-list a {
    width: 25px;
    height: 25px;

}

.more-detail svg {
    font-size: 20px;
}

.chat-header h3 {
    font-size: 14px;
    text-transform: capitalize;
    font-weight: bold;
    margin: 0;
}

.chat-screen {
    background-color: #fff;
    border-radius: 4px;
    position: relative;
    overflow-x: hidden;
}

.msg-block {
    padding: 0 15px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #fff;
}

.chat-block {
    padding: 10px;
}

.chat-block-unread {
    background-color: #d2fafa;
}

.chat-block-unread .chat-block:hover {
    background-color: #d2fafa;
}
 

.chat-body {
    padding: 15px 0;
    overflow-y: auto;
    background: #ffffff;
    position: relative;
    height: calc(100vh - 295px);
}

.chat-body .empty-channel {
    margin: 50px 0;
}

.chat-box {
    position: relative;
    padding-left: 40px;
    word-break: break-all;
}

.chat-box img.msg-user,
.msg-user {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    border: rgb(0 0 0 / 16%) 1px solid;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    cursor: pointer;
}

.msg-user img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.messages>li {
    margin: 0 0 5px;
}

.chat-box h1 {
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
}

.chat-box h2 {
    font-size: 16px;
    line-height: 28px;
    font-weight: 600;
}

.chat-box h5 {
    font-size: 13px;
    font-weight: 700;
}

.chat-box h5 span {
    font-weight: 400;
    color: #aaa;
    margin-left: 5px;
    font-size: 10px;
}

.chat-box p {
    margin: 0;
    font-size: 12px;
}

.msg-block input {
    padding: 0 15px;
    position: relative;
}

.msg-input {
    position: relative;
    border-radius: 0;
    line-height: 1.5;
    box-sizing: border-box;
    background: #ebeaff;
    font-size: 12px;
}

.text-input-wrap {
    padding: 15px 0 0;
}

.text-input-wrap .textarea {
    width: 100%;
    border: none;
    outline: none;
    padding: 12px;
    line-height: 1.5;
    box-sizing: border-box;
    background: #ebeaff;
    font-size: 12px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.msg-action-btn {
    padding: 11px 12px;
}

.msg-action-btn .upload-icons {
    font-size: 14px;
    color: #5c678f;
}

.msg-action-btn .upload-icons:hover,
.btn-file:hover,
.upload-icons:hover {
    color: #4b4d58;
}

.modal-wrap .modal-dialog {
    margin: 0 15px;
}

.chat-screen .chat-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    background: #ffffff;
    bottom: 0;
    width: 290px;
    margin-right: -310px;
    overflow: hidden;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-box-shadow: -2px 0px 4px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: -2px 0px 4px 0px rgba(0, 0, 0, 0.15);
    box-shadow: -2px 0px 4px 0px rgba(0, 0, 0, 0.15);
}

.chat-screen.toggled .chat-sidebar {
    margin-right: 0;
    opacity: 1;
    visibility: visible;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.chat-sidebar .chat-header {
    height: auto;
    padding: 10px 5px;
}

.chat-sidebar .chat-header h3 {
    font-size: 14px;
}


/* .chat-sidebar-body {
  padding: 15px;
} */

.chat-sidebar h5 {
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
}

.chat-sidebar-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 20px;
}

.chat-sidebar .member-list h5 {
    margin-bottom: 3px;
}

.chat-sidebar .member-list p {
    font-size: 11px;
    font-weight: 400;
    color: #aaa;
}

#menu-toggle {
    vertical-align: -5px;
}

.chat-sidebar .chat-header a {
    color: #aaa;
}

.chat-sidebar-header a {
    color: #3fcc81;
}

.chat-sidebar .member-list {
    padding-left: 60px;
    padding-top: 0;
    padding-right: 70px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.chat-sidebar .member-list .remove-btn a {
    background: #ffe8e8;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #ffe8e8;
}

.chat-sidebar .member-list .remove-btn a:hover {
    border: 1px solid #f44336;
}

.chat-sidebar .member-list:last-child {
    margin-bottom: 0;
}

.chat-sidebar-body.actions .default-btn {
    display: block;
    padding: 6px 12px;
}

.danger {
    background-color: #f44336;
}

.danger:hover {
    background-color: #db3e33;
}

.chat-sidebar .chat-header a:hover {
    color: #333;
}

#app {
    text-align: left !important;
}

.btn-file {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 15px;
    /* overflow: hidden; */
}

.btn-file input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    text-align: right;
    opacity: 0;
    outline: none;
    background: #fff;
    cursor: pointer;
    display: block;
}

.preview {
    width: 50px;
    height: 38px;
    position: absolute;
    left: 12px;
    top: 11px;
    right: auto;
    bottom: auto;
    display: -ms-flexbox;
    display: flex;
}

.preview img {
    width: 45px;
    margin-right: 10px;
    border-radius: 4px;
    height: 100%;
    object-fit: cover;
}

.preview-img {
    position: relative;
}

.remove-icon {
    position: absolute;
    top: -5px;
    right: 6px;
    color: #ff0019;
    font-size: 16px;
}

.error-single {
    background: #ff4b4b;
    color: #fff;
    padding: 10px 40px;
    border-radius: 4px;
    position: relative;
    margin: 15px 0;
}

.error-single p {
    margin: 0;
}

.error-single svg {
    position: absolute;
    left: 15px;
    top: 13px;
}

.error-list {
    background-color: #ffc5c5;
    /* margin: 15px 0; */
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 4px;
}

.error-list h5 {
    font-weight: bold;
    font-size: 16px;
}

.error-list p {
    margin-bottom: 5px;
    font-weight: 600;
}

.error-list .block-list {
    padding-left: 20px;
}

.error-list .block-list ul li {
    line-height: 1.8;
    list-style-type: disc;
}

.error-list .block-list ul {
    margin: 0;
}

.empty-channel {}

.logo-wrapper {
    width: 90px;
    margin-right: 30px;
}

.icon-wrapper {
    background: #e4f3eb;
    width: 70px;
    height: 70px;
    line-height: 85px;
    border-radius: 50%;
    color: #3fcc81;
    margin: 0px auto 10px auto;
    text-align: center;
}

.icon-wrapper svg {
    font-size: 30px;
}

.empty-channel h5 {
    font-weight: bold;
    font-size: 14px;
    margin: 0 0 5px 0;
}

.empty-channel p {
    color: #aaa;
    margin: 0;
}

.empty-channel .default-btn {
    padding: 8px 20px;
}

.button-header .default-btn {
    display: block;
}

.project-info {
    margin: 0 0 30px 0;
}

.project-info h5 {
    color: #aaa;
    text-transform: capitalize;
    font-size: 12px;
    margin-bottom: 15px;
}

.project-info p {
    position: relative;
    padding-left: 15px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    margin: 0;
}

.project-info p::before {
    content: "";
    height: 100%;
    width: 4px;
    background-color: #1c3faa;
    position: absolute;
    left: 0;
}

.project-info p.orange::before {
    background-color: #ddc01c;
}

.project-info p.yellow::before {
    background-color: #20cf3d;
}

.project-info p.blue::before {
    background-color: #dd1c86;
}

.mid-section {
    padding: 20px 0;
}

.dashboard-aside .activity-block {
    padding: 30px 0;
}

.title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 0px;
}

.chat-title p {
    color: #006aff;
    font-size: 14px;
    margin: 0 0 0;
}

.chat-title h3 span {
    color: #777;
    margin-left: 15px;
    font-size: 13px;
    font-weight: 400;
}

.chat-header .members-list .more-member {
    position: relative;
    top: 2px;
    margin-right: 30px;
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.chat-header .members-list img {
    width: 25px;
    height: 25px;
}


/* .member-list-item {
  height: 255px;
  overflow-y: auto;
} */


/* width */

::-webkit-scrollbar {
    width: 8px;
}


/* Track */

::-webkit-scrollbar-track {
    background: #f1f1f1;
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: #aaa;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: rgb(107, 107, 107);
}

.inner-small-wrap {
    padding: 15px 0;
}

.member-list .change-role {
    text-transform: initial;
    font-weight: 500;
}

.msg-header {
    display: table;
    width: 100%;
    height: 135px;
    background: #3fcc81;
    color: #fff;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.msg-header .icon {
    display: table-cell;
    vertical-align: middle;
    font-size: 45px;
}

.msg-body {
    padding: 30px;
}

.msg-body h3 {
    font-weight: bold;
    color: #3fcc81;
    font-size: 16px;
}

.msg-body p {
    color: #777;
    margin: 0;
}

.msg-footer .default-btn {
    margin: 5px 10px 0 10px;
}

.msg-footer {
    padding: 15px;
    border-top: 1px solid rgb(240, 240, 240);
}

.side-card-head img {
    width: 20px;
}

.msg-header button {
    position: absolute;
    right: 10px;
    padding: 0;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    color: #fff;
    top: 10px;
    opacity: 1;
    font-weight: 100;
    font-size: 36px;
}

.msg-header button:hover {
    opacity: 1 !important;
    color: #000;
}


/* .modal:nth-of-type(odd) {
  z-index: 1052 !important;
}
.modal:nth-of-type(even) {
  z-index: 1054 !important;
}
.modal-backdrop.show:nth-of-type(even) {
  z-index: 1053 !important;
} */

.dim-text a {
    color: #bbbbbb;
}


/* .appointment-modal .modal-content {} */


/* modal-scroll removed */


/* .appointment-modal .modal-body {
    max-height: 50vh;
    flex: 1 1 auto;
    overflow-y: auto;
} */

.appointment-modal .modal-body::-webkit-scrollbar {
    width: 7px;
}


/* .appointment-modal .modal-content::-webkit-scrollbar-track {
    background: #fff !important;
    opacity: 1;
}

.appointment-modal .modal-content::-webkit-scrollbar-thumb {
    background: rgb(131, 130, 130) !important;
} */

.add-appointment {
    margin: 15px auto 25px;
}

.add-appointment a {
    padding: 10px 15px;
    font-size: 16px;
    background: #1d316e;
    color: #fff;
    font-weight: 600;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.add-appointment a:hover {
    border: 1px solid #1d316e;
    color: #1d316e;
    background: #fff;
    font-weight: 600;
}

.user-profile-modal .modal-content {
    padding: 30px 20px;
    width: 400px;
}

.user-header {
    position: relative;
    padding-left: 90px;
    min-height: 80px;
    margin-bottom: 15px;
}

.user-header img {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
}

.user-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.user-body .form-wrap {
    padding: 0 0 30px 0;
}

.text-muted {
    color: #526484 !important;
}

.user-header p {
    position: relative;
    padding-left: 20px;
}

.user-header svg {
    position: absolute;
    left: 0;
    top: 4px;
    color: #3fcc81;
}

.user-header h4 {
    font-weight: 700;
    font-size: 18px;
}

.user-body p {
    font-weight: 600;
}

.image-in-chat {
    margin-top: 10px;
}

.image-in-chat .image-box {
    position: relative;
    width: 100%;
}

.image-in-chat .image-box:hover .remove-image {
    display: block;
}

.image-in-chat .remove-image {
    display: none;
    position: absolute;
    right: 5px;
    top: 5px;
    background: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 19px;
    text-align: center;
    color: #333;
    z-index: 1;
    cursor: pointer;
    box-shadow: 0 0 5px 0px #636363;
}

.image-in-chat .remove-image:hover {
    background: #fcccc8;
    color: #e85347;
}

.image-in-chat ul li {
    display: block;
    margin: 5px 0;
    vertical-align: text-top;
}

.image-in-chat ul li img {
    border-radius: 4px;
    object-fit: cover;
}

.email-tag {
    position: relative;
    background: #e9ecef;
    padding: 6px 12px;
    border-radius: 20px;
    margin: 5px 5px 5px 0;
    display: inline-block;
    color: #6b6b6b;
}

.email-tag a {
    margin-left: 5px;
    color: #f44336;
}

.email-tag a:hover {
    /* position: absolute;
  right: -5px;
  top: -7px;
  left: auto; */
    color: #d11609;
}

.chat-title a {
    color: #006aff;
}

.chat-title a:hover {
    color: #333;
}


/* .modal:nth-of-type(even) {
  z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
  z-index: 1051 !important;
} */

.input-btn {
    position: relative;
}

.input-btn button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #ced4da;
    color: #333;
    width: 45px;
}

button:focus {
    outline: none;
}

.preview-image-list li {
    position: relative;
}

.remove-btnn {
    position: absolute;
    right: 5px;
    top: 5px;
    background: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #e85347;
    z-index: 1;
}

.remove-btnn * {
    position: relative;
}

.remove-btnn:before {
    position: absolute;
    height: 20px;
    width: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    content: '';
    background-color: #fcccc8;
    border-radius: 50%;
    opacity: 0;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.remove-btnn:hover * {
    color: #e85347;
}

.remove-btnn svg {
    font-size: 14px;
}

.remove-btnn:hover:before {
    opacity: 1;
    height: 25px;
    width: 25px;
}

.preview-image-list li img {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.footer {}

.footer a {}

.file-name p {
    font-size: 11px;
    color: #aaa;
    margin: 0;
}

.social-login-btn {
    display: block;
}

.g-signin2 {
    margin-bottom: 15px;
}

tr._51mx {
    height: 45px !important;
}

.forget-pwd {
    text-align: right;
}

.forget-pwd a {
    color: #6c6c6c;
}

.forget-pwd a:hover {
    color: #333;
}

.user-profile-modal .close {
    position: absolute;
    top: 10px;
    right: 15px;
}

.user-name {
    margin: 0;
    color: #fff;
    line-height: 35px;
    padding-left: 10px;
    font-weight: 600;
}

.spinner-border {
    width: 18px;
    height: 18px;
    border: 3px solid currentColor;
    border-right-color: transparent;
}

.sb-nav-fixed .navbar-nav .nav-item.dropdown {
    position: static;
}

.sb-nav-fixed .navbar-nav .nav-link {
    position: relative;
    padding: 18px 7px;
}

.sb-nav-fixed .dropdown-menu {
    margin: 0;
    left: 10px;
    right: 10px;
    border: none;
    background: #fff;
    -webkit-box-shadow: 0 5px 25px rgba(34, 41, 47, 0.2);
    box-shadow: 0 5px 25px rgba(34, 41, 47, 0.2);
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
    border: rgba(0, 0, 0, 0.15) 1px solid;
}

.navbar-expand .navbar-nav .dropdown-menu {

    background: #e4f7f1;

}

.sb-topnav {
    padding: 0 0 0 10px;
    height: auto;
    background: #182948;
}

.sb-topnav .profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.navbar-dark .navbar-nav svg {
    font-size: 14px;
}

.navbar-dark .navbar-nav .fa-sign-out-alt {
    margin-left: 6px;
}

.nav-item {
    border-left: rgba(255, 255, 255, 0.2) 1px solid;
}

.sb-nav-fixed .dropdown-item {
    padding: 10px 15px;
    font-size: 12px;
    font-weight: 500;
    color: #526484;
    white-space: break-spaces;
    line-height: 20px;
}

.dropdown-item.active,
.dropdown-item:active {
    color: #16181b;
    background-color: #F3F6F8;
}

.account-info {
    position: relative;
    padding: 10px 15px 15px 65px;
    min-height: 70px;
    border-bottom: 1px solid #e9ecef;
}

.account-info-img {
    position: absolute;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    top: 10px;
    left: 15px;
    margin: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.account-info-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.account-name h5 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.account-name p {
    color: #555;
    margin: 0;
    font-size: 12px;
}

.member-list p.time {
    color: #aaa;
    font-weight: 400;
    line-height: 24px;
}

.info-icon {
    margin-left: 5px;
    padding: 0 5px;
}

.info-icon svg {
    color: #A2B3D1;
    vertical-align: -3px;
}

.info-icon:hover svg {
    color: #3fcc81;
    cursor: pointer;
}

.owner {
    position: relative;
    padding-left: 50px;
}

.owner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    border-radius: 50%;
}

.owner h5 {
    font-weight: 500;
    font-size: 13px;
    margin: 0;
    color: #aaa;
}

.button-header .default-btn {
    margin-bottom: 5px;
}

.button-header {
    margin-top: 20px;
}

.owner p {
    margin: 0;
    font-weight: 600;
    color: #333;
}

.right-actions-block {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.chat-block:hover .right-actions-block {
    display: block;
}

.round-icon {
    display: inline-block;
    cursor: pointer;
    position: relative;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #5c678f;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #e6ebf1;
    box-shadow: 0px 2px 3px rgba(4, 4, 7, 0.10);
    -webkit-box-shadow: 0px 2px 3px rgba(4, 4, 7, 0.10);
    -moz-box-shadow: 0px 2px 3px rgba(4, 4, 7, 0.10);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.chat-block:hover {
    background-color: #f7f7f7;
}

div.image-in-chat:empty {
    display: none;
}

ul:empty {
    display: none;
}

.edit-block svg {
    color: #a9a9a9;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
}

.edit-block:hover svg {
    color: #555;
}

.edit-block:hover {
    cursor: pointer;
}

.member-heading {
    margin: 0 0 15px 0;
}

.edit-message .form-wrap .form-control {
    height: 100px;
}

a.add-members {
    color: #1c3faa;
    margin: 0 0 15px 0;
    font-weight: 600;
}

a.add-members:hover {
    color: #000;
}

.pending-member-modal .member-list {}

.pending-member-modal .member-list {
    padding-right: 0;
}

.pending-member-modal .member-list p {
    font-weight: 600;
}

.pending-member-modal .member-list .remove-btn a {
    padding: 8px 20px;
    background: transparent;
    border: 1px solid #f44336;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
}

.pending-member-modal .member-list .remove-btn a:hover {
    background-color: #ffeaec;
    color: #dc3545;
}

.pending-member-modal .member-list .remove-btn {
    top: 12px;
}

.chat-sidebar .member-list .remove-btn {
    top: 15px;
    right: 5px;
}

.image-wrapper img {
    border-radius: 4px;
}

.image-wrapper {
    position: relative;
    width: 120px;
    height: 100px;
    margin: 0 10px;
    display: inline-block;
}

.image-wrapper:hover .remove-button {
    bottom: 0px;
    transition: 0.3s all ease-in;
    display: block;
}

.remove-button {
    display: none;
    position: absolute;
    transition: 0.3s all ease-in;
    bottom: 0px;
    top: auto;
    left: 0;
    right: -10px;
    background: rgb(0 0 0 / 43%);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align: center;
    color: #fff;
    padding: 8px 0;
}

.remove-button:hover {
    cursor: pointer;
    background-color: rgb(0 0 0 / 70%);
}

.uploaded-image-list {
    margin: 0 -10px 15px;
}

.info-block {
    background: #e6ecff;
    padding: 5px 15px;
    color: #1c3faa;
    border-radius: 4px;
    font-weight: 600;
}

.channel-information p svg {
    color: #3fcc81;
}

.remove-user-modal ul {
    margin-left: 15px;
}

.table-wrap th,
.table-wrap td {
    text-transform: capitalize;
    font-weight: 500;
}

.table-button .default-btn,
.modal-wrap .table-button .default-btn {
    margin-right: 15px;
    padding: 5px 10px;
    font-size: 12px;
}

.block-list ul li {
    list-style-type: none;
    line-height: 24px;
    font-size: 12px;
}

.form-element-wrapper.block-list ul li {
    background: none;
    margin: 0 0 15px 0;
    padding: 15px;
    border-radius: 4px;
    text-transform: capitalize;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: #777;
    transition: 0.3s all linear;
    background-color: #fff;
}

.create-template-block .block-list ul li a {
    color: #777;
}

.create-template-block .block-list ul li:hover a {
    color: #fff;
}

.form-element-wrapper.block-list ul li:hover {
    cursor: pointer;
    background-color: #3fcc81;
    color: #fff;
    transition: 0.3s all linear;
}

.drag-wrapper .error-list .block-list ul li {
    list-style-type: disc;
}

.drag-wrapper {
    min-height: 65vh;
    border: 2px dashed #ddd;
    position: relative;
    padding: 0;
}

.empty-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #777;
}

.msg-action-btn svg:hover {
    cursor: pointer;
}

.msg-action-btn .btn-file:hover {
    color: #aaa;
    cursor: pointer;
}


/* .btn-file input[type="file"]:hover {
  cursor: pointer;
} */

.search-wrap {
    position: relative;
}

.search-wrap svg {
    position: absolute;
    top: 50%;
    right: 15px;
    color: #16ae5d;
    transform: translateY(-50%);
}

.modal-template-list li {
    position: relative;
    padding-left: 20px;
    font-size: 16px;
    margin-bottom: 15px;
    margin-right: 15px;
    display: inline-block;
}

.modal-template-list li svg {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #3fcc81;
}

.modal-template-list li a {
    color: #333;
}


/*.send-to .modal {
  z-index: 1051 !important;
}
.edit-template .modal {
  z-index: 1052 !important;
}
.mention-user .modal {
  z-index: 1055 !important;
}
 .modal-backdrop.show:nth-of-type(even) {
  z-index: 1050 !important;
} 
.modal-backdrop.show:nth-of-type(3n + 1) {
  z-index: 1051 !important;
}*/

.modal-template-list li.active {
    background-color: #3fcc81;
}

.modal-template-list .custom-control-label {
    line-height: 24px;
    font-weight: 500;
}

.msg-action-btn .default-btn {
    padding: 6px 8px;
    -webkit-box-shadow: 0px 2px 4px 0px rgb(60 163 108 / 57%);
    -moz-box-shadow: 0px 2px 4px 0px rgba(60, 163, 108, 0.57);
    box-shadow: 0px 2px 4px 0px rgb(60 163 108 / 57%);
}

.msg-action-btn .default-btn.disabled,
.btn-primary.disabled {
    background: #cacaca;
    color: #f6f6f6;
    border: none;
    border-radius: 4px;
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.57);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.57);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.57);
}

.select-template .tab-pane {
    border: 1px solid #ddd;
    padding: 15px;
    margin-top: -1px;
}

.modal-template-list ul {
    margin-bottom: 0;
}

.modal-template-list li:last-child {
    margin-bottom: 0;
}

.form-wrap .custom-control-label {
    font-weight: 500;
    line-height: 18px;
}

.select-template .nav-link {
    padding: 15px;
}

.select-template .nav-item {
    font-weight: 600;
}

.modal-template-list {
    margin-bottom: 20px;
}

.modal-template-list img {
    width: 100%;
    border-radius: 4px;
    height: 150px;
    object-fit: cover;
}

.template-thumbnail {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding-left: 45px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 0 4px;
}

.template-thumbnail h5 {
    font-size: 13px;
    margin-bottom: 0;
    font-weight: 600;
}

.template-thumbnail p {
    margin: 0;
    color: #888;
}

.template-thumbnail svg {
    position: absolute;
    bottom: auto;
    right: auto;
    left: 10px;
    top: 13px;
    font-size: 30px;
    color: #3fcc81;
}

.template-name p {
    margin: 0;
}

.template-thumbnail .floating-anchor {
    z-index: 1111;
}

.template-thumbnail:hover {
    border: 1px solid #3fcc81;
    border-radius: 4px;
    cursor: pointer;
}

.select-template .form-wrap label {
    color: #888;
}

.category-type-card {
    border: 1px solid #ddd;
    border-radius: 35px;
    padding: 10px 15px;
    background: #fff;
    font-weight: 600;
    position: relative;
    transition: 0.3s all linear;
}

.category-type-card p {
    color: #333;
    transition: 0.3s all linear;
}

.category-type-card:hover {
    border: 1px solid #3fcc81;
    transition: 0.3s all linear;
}

.category-type-card:hover p {
    color: #3fcc81;
}

.form-block:hover {
    background-color: #f2f8ff;
}

.form-block:hover .action-button {
    display: block;
}

.form-block {
    padding: 15px;
    position: relative;
}

.action-button {
    display: none;
    position: absolute;
    top: 12px;
    right: 15px;
}

.action-button a {
    margin-left: 10px;
    padding: 5px 8px;
    color: #888;
    border-radius: 4px;
}

.action-button a:hover {
    background-color: #3fcc81;
    color: #fff;
    border-radius: 4px;
}

.drag-wrapper label {
    display: block;
}

.form-title {
    padding: 20px 0 15px 15px;
}

.form-button {
    padding: 15px;
}

.form-element-wrapper {
    width: 250px;
    position: fixed;
}

.form-button .btn {
    text-transform: capitalize;
    padding: 10px 24px;
    margin-right: 15px;
}

.form-edit .form-wrap .form-control {
    height: 40px;
}

.option-btn {
    height: 100%;
    border-radius: 4px;
    width: 45px;
    border: none;
    color: #555;
}

.modal-wrap.form-edit .default-btn.outline.secondary {
    padding: 5px 10px;
}

.option-btn:hover {
    background-color: #ffe4e4;
    color: #dc3545;
}

.see-all {
    border-top: 1px solid #eee;
    padding-top: 15px;
    text-align: right;
}

.see-all a {
    text-transform: capitalize;
    color: #16ae5d;
}

.see-all a:hover {
    color: #1c3faa;
}

.form-icon-wrap {
    position: absolute;
    left: 0;
    font-size: 35px;
    top: 3px;
    font-size: 24px;
    color: #3fcc81;
}

.send-option {}

.send-option a {
    padding: 5px 15px;
}

.latest-forms.member-list p {
    font-weight: 600;
    font-size: 11px;
    color: #aaa;
    text-transform: initial;
}

.accordion-header .btn {
    padding: 0;
    width: 100%;
    text-align: left;
    font-weight: 600;
    box-shadow: none;
}

.accordion-header a {
    font-size: 12px;
}

.flex-box {
    display: -ms-flexbox;
    display: flex;
}

.accordion-header {
    position: relative;
    padding-right: 15px;
}

.accordion-header .flex-content {
    flex: 1;
}

.accordion-card .card-body {
    padding: 10px 0;
}

.accordion-card {
    border-bottom: 1px solid #ddd;
    padding: 10px 10px;
}

.accordion-header button::before {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 5px;
    right: 5px;
    font-weight: 600;
    font-size: 10px;
    color: #888;
}

.accordion-header button.collapsed::before {
    content: "\f054";
}

.shared-form-list {
    position: relative;
    padding-left: 45px;
    border-radius: 4px;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 1px solid #e5e5e5;
    margin-bottom: 15px;
}

.shared-form-list:hover h5 {
    color: #1c3faa;
}

.shared-form-list svg {
    font-size: 24px;
    top: 15px;
    position: absolute;
    left: 15px;
}

.shared-form-list p {
    font-size: 12px;
    color: #999;
    margin: 0;
}

.shared-form-list h5 {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 0;
    text-transform: capitalize;
}

.accordion-card .default-btn {
    padding: 8px 5px;
    display: block;
    font-size: 10px;
}

.accordion-card .modal-wrap .default-btn {
    padding: 3px 8px;
    font-size: 12px;
}

.form-title h5 {
    font-size: 13px;
    margin: 5px 0 0;
    color: #aaa;
}

.category-type {
    margin-bottom: 20px;
}

.form-msg {
    position: relative;
    padding-left: 45px;
    min-height: 57px;
    display: inline-block;
    padding-top: 15px;
    padding-right: 10px;
    border-radius: 4px;
    background-color: #e9f4ff;
    border: 1px solid #d7e4f1;
    margin-top: 15px;
}

.form-msg:hover {
    cursor: pointer;
    border: 1px solid #007bff;
}

.form-msg svg {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 36px;
    color: #1c3faa;
}

.form-msg p {
    font-weight: 500;
}

.form-msg span {
    color: #333;
    background: #edf7ff;
    font-weight: 600;
}

.member-list.form-response img {
    width: 35px;
}

.member-list.form-response {
    padding-top: 8px;
    margin-bottom: 0;
}

.add-templete-btn {
    background: none;
    border: none;
    padding: 0;
    outline: none;
}

.active-wrap {
    background: #f4f4f4;
}

.tab-content>.tab-pane {
    -webkit-box-shadow: 0px 2px 4px rgba(31, 30, 47, 0.03);
    box-shadow: 0px 2px 4px rgba(31, 30, 47, 0.03);
    margin-bottom: 24px;
    background-color: #fff;
    border: 1px solid #eceff5;
}

.nav-tabs {
    border-bottom: none;
}

.vertical-nav-wrap {}

.vertical-nav-wrap ul {
    margin: 0;
    padding: 0;
}

.vertical-nav-wrap ul li {
    list-style-type: none;
    display: block;
    border-bottom: rgba(0, 0, 0, 0.2) 1px solid;
    margin: 0 0;
    padding: 0;
    position: relative;
    cursor: pointer;
    transition: 0.2s all linear;
    -webkit-transition: 0.2s all linear;
    -moz-transition: 0.2s all linear;
    -ms-transition: 0.2s all linear;
    -o-transition: 0.2s all linear;
}
.vertical-nav-wrap ul li:last-child{
    border: none;
}
.vertical-nav-wrap ul li a {
    display: block;
    color: #000;
    padding: 10px 15px;
}

.vertical-nav-wrap ul li.active a,
.vertical-nav-wrap ul li a:hover {
    background-color: #3fcc81;
    color: #fff;
}

.equal-height-div>[class*="col-"] {
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column !
}

.light-blue-bg {
    background: #d4f8f8;
}

.empty-holder {}

.dashed-box {
    border: rgba(0, 0, 0, 0.15) 2px dashed;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.custom-scroll-box {}

.custom-scroll::-webkit-scrollbar {
    width: 5px;
}


/* Track */

.custom-scroll::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}


/* Handle */

.custom-scroll::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}


/* Handle on hover */

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #ccc;
}

.card-body.custom-scroll {
    padding: 10px 5px;
    max-height: 315px;
    overflow-y: scroll;
    overflow-x: hidden;
    margin: 15px 0 0;
}

.empty-holder {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.create-new-form {}

.modal-wrap .create-new-form .default-btn {
    padding: 8px 12px;
}

.edit-action {
    text-align: right;
    position: absolute;
    right: 15px;
}

.edit-action a {
    margin-left: 15px;
    color: #888;
}

.edit-action a:hover {
    color: #3fcc81;
}

.edit-action a.trash:hover {
    color: #dc0000;
}

.edit-form {
    padding: 15px;
}

.modal-back-btn svg {
    margin-right: 30px;
    margin-top: 8px;
    font-size: 18px;
    color: #888;
}

.modal-back-btn svg:hover {
    color: #333;
    cursor: pointer;
}

.modal-wrap .modal-header .close {
    margin-top: -12px;
    color: #dc4c64;
    opacity: 1;
    font-size: 30px;
    margin: 0;
    padding: 0;
}

.form-heading-block h5 {
    font-size: 18px;
    margin: 6px 0 0 0;
}

.form-main-heading {
    min-width: 190px;
}

.form-info h5 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
}

.form-info a {
    color: #333;
}

.block-list.email-list ul {
    margin-bottom: 0;
}

.block-list.email-list ul li.active {
    color: #3ca36c;
}

.block-list.email-list ul li {
    line-height: 1.8;
}

.form-info p {
    color: #888;
    text-transform: initial;
    margin: 0;
}

.col-name {
    width: 40%;
}

.col-user {
    width: 25%;
}

.col-action {
    width: 35%;
}

.email-text {}

.modal-footer .form-wrap .form-control {
    height: 42px;
}

.col-button {
    text-align: right;
    margin: 15px 0 0;
}

.col-button button {
    margin-left: 10px;
}

.share-form-block svg {
    color: #888;
}

.view-form .form-block:hover {
    background-color: transparent;
}

.view-form .nav-tabs .nav-link.active {
    border-top: 3px solid #20cf3d;
    color: #333;
}

.view-form .nav-tabs .nav-link {
    color: #888;
}

.tooltip-msg {
    display: none;
}

.tooltip-block {
    position: relative;
}

.tooltip-block svg {
    color: #3fcc81;
}

.tooltip-block:hover {
    cursor: pointer;
}

.tooltip-block:hover .tooltip-msg {
    font-size: 12px;
    display: block;
    position: absolute;
    bottom: 0px;
    left: 30px;
    right: 0;
    width: 280px;
    background: #caf3dd;
    z-index: 11;
    padding: 10px;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.34);
    -moz-box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.34);
    box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.34);
}

.tooltip-msg h5 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
}

.tooltip-msg h5::first-letter {
    text-transform: capitalize;
}

.tooltip-msg p {}

.confirmation-modal .modal-content {
    min-height: auto;
    z-index: 1051;
}

.confirmation-modal .modal.show::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: 0.8;
}

.breadcrumb-block {
    margin-bottom: 30px;
}

.breadcrumb-block .breadcrumb {
    background-color: transparent;
    padding: 0;
}

.form-sender svg {
    color: #888;
}

.form-sender span {
    font-weight: 600;
}

.create-form-wrapper {
    max-width: 850px;
    margin: 0 auto;
}

.heading {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.create-form-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
}

.create-form-header .default-btn {}

.dim-heading {
    font-weight: 600;
    margin: 0 0 20px 0;
    color: #888;
}

.form-element-action {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: center;
    align-items: center;
}

.form-element-action svg {
    font-size: 18px;
}

.form-element-action .btn {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    color: #888;
}

.form-element-action .btn:hover {
    background-color: #eee;
    border-radius: 50%;
    color: #333;
}

.form-element-action .add-element-btn {
    background: transparent;
    color: #3fcc81;
    border: none;
    margin-left: 10px;
    border: 1px solid #3fcc81;
    height: 39px;
    width: 39px;
}

.form-element-action .add-element-btn:hover {
    background-color: #3fcc81;
    color: #fff;
}

.tooltiptxt {
    display: none;
    position: absolute;
}

.action-wrapper {
    position: relative;
}

.action-wrapper:hover .tooltiptxt {
    display: block;
    position: absolute;
    background: rgb(105, 105, 105);
    padding: 0 5px;
    border-radius: 2px;
    font-size: 11px;
    color: #fff;
    min-width: 75px;
    top: 115%;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}

.form-element-action .custom-switch label {
    line-height: 24px;
}

.create-form-wrapper input[type="checkbox"],
.create-form-wrapper input[type="radio"] {
    width: 20px;
    /*Desired width*/
    height: 20px;
    /*Desired height*/
}

.list-items-row {
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
}

.form-wrap .list-items-row {
    margin: 5px 0 0;
}

.list-items label {
    margin-left: 10px;
    margin-bottom: 0;
}

.select-design .block-list ul li {
    list-style-type: decimal;
    margin-bottom: 20px;
    padding-left: 10px;
}

.select-design .block-list ul {
    padding-left: 15px;
}

.active-card {
    -webkit-box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #34a368;
}

.default-modal .modal-content {
    min-height: auto;
}

.create-form-wrapper .form-elements .card:hover {
    cursor: pointer;
}

.form-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    padding: 15px;
    z-index: 11;
    color: #333;
}

.form-header select {
    max-width: 220px;
    height: 40px;
    font-weight: 600;
}

.readonly-title {
    margin-bottom: 8px;
}

.checkbox {
    margin-bottom: 30px;
}

.checkbox .option-btn {
    height: 50px;
}

.send-option-list-item {
    border-radius: 4px;
    padding: 15px 15px 15px 50px;
    margin-bottom: 20px;
    position: relative;
    border: 1px solid #eee;
}

.send-option-list-item:last-of-type {
    margin-bottom: 0;
}

.send-option-list-item h5 {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 2px;
    color: #3fcc81;
}

.send-option-list-item p {
    margin: 0;
    color: #888;
}

.send-option-icon {
    position: absolute;
    left: 15px;
    top: 18px;
}

.send-option-icon svg {
    font-size: 20px;
    color: #3fcc81;
}

.send-option-list-item:hover {
    cursor: pointer;
    background: #ddffed;
}

.send-option-list-item .next {
    position: absolute;
    right: 15px;
    top: 50%;
    color: #bbb;
    transform: translateY(-50%);
}

.error-info {
    color: #dc3545;
    margin-top: 2px;
}

.error-field {
    border-color: #dc3545;
    border-width: 1px;
}

.form-elements .default-btn.outline.secondary {
    padding: 6px 18px;
}

.explore-templates {
    /* margin-bottom: 30px; */
    padding: 10px;
    border-top: 1px solid #eee;
    /* border-left: 3px solid #3fcc81; */
    /* border-radius: 4px; */
    line-height: 20px;
}

.explore-templates a {
    color: #777;
}

.explore-templates a:hover {
    color: #3fcc81;
}

.explore-templates svg {
    font-size: 11px;
}

.explore-templates .bi.bi-exclamation-circle {
    color: #3fcc81;
    font-size: 13px;
}

.input-btn .form-control {
    padding-right: 85px;
}

.input-btn .btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 6px 15px;
    border-radius: 0 4px 4px 0px;
    -webkit-border-radius: 0 4px 4px 0px;
    -moz-border-radius: 0 4px 4px 0px;
    -ms-border-radius: 0 4px 4px 0px;
    -o-border-radius: 0 4px 4px 0px;
}

.form-wrap .input-btn .form-control {
    padding-right: 85px;
}

.form-wrap .input-btn .btn {
    padding: 4px 15px;
}

.tags {
    padding: 1px 10px;
    color: #888;
    font-size: 10px;
    margin: 3px 5px;
    border: 1px solid #ddd;
    display: inline-block;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.tag-wrapper {
    margin: 15px 0;
}

.tag-wrapper p {
    color: #888;
    text-transform: capitalize;
    margin: 0;
}

.tags:hover,
.selected-tag {
    cursor: pointer;
    color: #3fcc81;
    border: 1px solid #3fcc81;
}

.form-action {
    border-top: 1px solid #ddd;
    padding-top: 15px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.form-action .default-btn {
    min-width: 170px;
}

.form-name h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: capitalize;
}

.form-name {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 30px;
}

.recently-used-forms {
    /* border-top: 1px solid #eee; */
}

.recently-used-forms p {
    color: #888;
    text-transform: capitalize;
    margin-bottom: 20px;
}

.form-name p {
    color: #555;
    text-transform: initial;
    margin-bottom: 10px;
}

.form-info svg {
    color: #3fcc81;
    margin-right: 5px;
}

.form-info {
    display: -ms-flexbox;
    display: flex;
}

.form-info p {
    margin-right: 15px;
    color: #888;
}


/* .create-form-wrapper .card {
  padding-bottom: 60px;
  z-index: 0;
  position: relative;
} */


/* .create-form-wrapper .card:hover .form-element-action {
  display: flex;
} */

.login-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.login-header h1 {
    font-size: 20px;
    font-weight: 700;
    color: rgb(63, 204, 129);
    margin: 0;
}

.login-header a span {
    color: #333;
}

.login-header a {
    font-weight: 600;
    color: #3fcc81;
}

.login-header a:hover {
    color: #03b356;
}

.login-box .form-control {
    height: 45px;
}

.send-form .form-info {
    display: table-cell;
}

.table-wrap th {}


.preview-title h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}

.preview-title h5 {
    font-size: 14px;
    margin: 0;
}

.preview-title label {
    color: #aaa;
}

.preview-title h3::first-letter,
.preview-title h5::first-letter {
    text-transform: capitalize;
}

.preview-form .form-block {
    padding: 0;
}

.preview-form .form-block:hover {
    background-color: transparent;
}

.preview-form .form-wrap label {
    text-transform: initial;
}

.preview-form .form-wrap label::first-letter {
    text-transform: uppercase;
}

.preview-title {
    background: #e5fff1;
    padding: 15px;
    border-radius: 4px;
    border-left: 4px solid #3fcc81;
}

.pdf-in-chat {
    position: relative;
    padding: 10px 40px 10px 50px;
    border: 1px solid #eee;
    display: inline-block;
    border-radius: 4px;
    background-color: #fff;
}

.pdf-in-chat:hover a {
    display: block;
}

.pdf-in-chat img {
    position: absolute;
    left: 5px;
    width: 35px !important;
    height: auto !important;
}

.pdf-in-chat h5 {
    font-weight: 600;
    font-size: 14px;
}

.pdf-in-chat p.size {
    margin-bottom: 0;
    color: #aaa;
    font-size: 11px;
    font-weight: 500;
}

.pdf-in-chat:hover {
    cursor: pointer;
    border: 1px solid #3fcc81;
}

.pdf-in-chat:hover h5 {
    color: #3fcc81;
}

.edit-text input {
    border-radius: 4px;
    width: 100%;
    border: 1px solid #c5c5c5;
    min-height: 50px;
    padding: 0 10px;
    margin-bottom: 15px;
}

.edit-text .btn {
    padding: 8px 18px;
    font-weight: 600;
}

.activechange {
    /* position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; */
}

.head-wrapper {
    padding: 0;
    background-color: #fff;
    border-radius: 4px;
    margin-bottom: 30px;
    position: -webkit-sticky;
    position: sticky;
    top: 55px;
    z-index: 11;
    box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
}

.image-in-chat ul {
    display: block;
}

.pdf-in-chat {
    padding: 10px 40px 10px 50px;
    transition: all linear .2s;
    -webkit-transition: all linear .2s;
    -moz-transition: all linear .2s;
    -ms-transition: all linear .2s;
    -o-transition: all linear .2s;
}

.deleteimage-wrapper {
    position: relative;
    width: 200px;
}

.delete-content {
    padding: 5px 0;
    color: #aaa;
    font-size: 11px;
    word-break: break-word;
}

.delete-content strong {
    font-weight: 600;
    color: #000;
}

.delete-content p {}

.login-box.sign-up {
    max-width: 650px;
}

.success-modal .modal-header {
    border-bottom: transparent;
}

.success-body img {
    width: 85px;
    margin-bottom: 30px;
}

.success-body p {
    color: #777;
    margin: 0;
}

.success-modal .modal-footer {
    border-top: transparent;
    padding-top: 0;
}

.success-body h5 {
    font-weight: 800;
    color: #3fcc81;
}

.success-modal .modal-content {
    width: 485px;
    margin: 0 auto;
}

.pac-container {
    z-index: 1111;
}

#address {
    display: none;
}

.password-field {
    position: relative;
}

.password-field .field-icon {
    position: absolute;
    content: "\f06e";
    font-family: "Font Awesome 5 Free";
    right: 0;
    right: 10px;
    top: 50%;
    background: none;
    border: none;
    outline: none;
    padding: 0;
    transform: translateY(-50%);
    font-size: 13px;
    cursor: pointer;
    color: #aaa;
    z-index: 111;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.password-field .field-icon:hover {
    color: #333;
}

.success-msg {
    background: #e6fff2;
    padding: 10px;
    border-radius: 4px;
    color: #3fcc81;
    margin-bottom: 15px;
}

.add-btn {
    height: 50px;
    border: 1px solid #0062cc;
    width: 45px;
    border-radius: 4px;
    background: transparent;
    color: #0062cc;
    margin-left: 15px;
}

.add-btn:hover {
    background-color: #0062cc;
    color: #fff;
}

.doc-wrap {
    position: relative;
}

.doc-wrap img {
    width: 100%;
}

.hover-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
    opacity: 0;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.hover-items {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.doc-wrap:hover .hover-wrap {
    opacity: 1;
}

.loader-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.lds-ellipsis {
    display: inline-block;
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
    -webkit-animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
    -webkit-animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
    -webkit-animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
    -webkit-animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }

    100% {
        transform: scale(0);
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
        -webkit-transform: translate(24px, 0);
        -moz-transform: translate(24px, 0);
        -ms-transform: translate(24px, 0);
        -o-transform: translate(24px, 0);
    }
}

.loader-text-wrap {
    position: relative;
    margin: 0 0 15px;
}

.lds-ellipsis-black {
    display: inline-block;
    width: 80px;
    position: relative;
    vertical-align: text-top;
}

.lds-ellipsis-black span {
    position: absolute;
    top: 8px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #000;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.lds-ellipsis-black span:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
    -webkit-animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis-black span:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
    -webkit-animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis-black span:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
    -webkit-animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis-black span:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
    -webkit-animation: lds-ellipsis3 0.6s infinite;
}

.pdf-wrap {
    text-align: center;
}

.pdf-wrap svg {
    font-size: 186px;
    color: #d1e4f8;
}

.canvas-wrap canvas {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    -webkit-border-radius: .25rem;
    -moz-border-radius: .25rem;
    -ms-border-radius: .25rem;
    -o-border-radius: .25rem;
}

.required {
    color: #f10000;
}

.canvas-wrap canvas.error-field {
    border-color: #dc3545;
}

.form-wrap label.error-field-text,
.error-field-text {
    color: #dc3545;
}

.nav-logo {}


/* .nav-logo img {
    max-height: 20px;
} */

.user-img-wrap {
    display: inline-block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 5px;
    border: rgba(0, 0, 0, 0.20) 1px solid;
    padding: 2px;
    border-radius: 50%;
}

.user-img-wrap img {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.table-wrap {}

.table-wrap p {
    margin: 0;
    line-height: 20px;
}

.badge {
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

.badge-alert {
    padding: 5px 10px;
    background-color: #f6a70a;
    color: #ffffff;
}

.badge-primary-active {
    background-color: #0eb108;
    color: #ffffff;
    padding: 5px 10px;
}

.btn {
    padding: 8px 8px;
    font-weight: 500;
    font-size: 12px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px;
}

.square-icon {
    display: inline-block;
    padding: 6px 8px;
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
    margin-left: 10px;
    box-shadow: 0px 2px 5px 0px rgba(15, 0, 255, 0.09);
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.square-icon:hover {
    box-shadow: 0px 2px 5px 0px rgba(15, 0, 255, 0.3);
}

.url-wrap {
    background: #ecebfb;
    padding: 10px 10px;
    position: relative;
    line-height: 20px;
    min-height: 40px;
    max-width: 380px;
    display: -ms-flexbox;
    display: flex;
}

.edit-on-click {
    cursor: pointer;
}

.edit-on-click:focus,
.edit-on-click:hover,
.edit-mode {
    border-color: #3fcc81;
}

.table-wrap p a:hover {
    color: #3fcc81;
}

.table-shadowed {}

.table-shadowed.table td,
.table-shadowed.table th {
    border-top: none;
}

.table-shadowed.table thead th {
    border-bottom: none;
}

.table-shadowed tr {
    box-shadow: 0px 2px 5px 0px rgba(15, 0, 255, 0.09);
}

.Pagination .Page {
    font-size: 12px;
    border-radius: 3px;
    width: auto;
    height: auto;
    padding: 5px 10px;
    line-height: 17px;
    -webkit-box-shadow: 0px 0px 5px 0px rgb(52, 48, 255, 0.25);
    -moz-box-shadow: 0px 0px 5px 0px rgba(52, 48, 255, 0.25);
    box-shadow: 0px 0px 5px 0px rgb(52, 48, 255, 0.25);
    border: none;
    transition: .2s all linear;
}

.Pagination .Page:hover,
.Pagination .Page.Page-active {
    border: none;
    background: #3fcc81 !important;
    color: #fff !important;
}

.upload-btn-wrap {}

.upload-btn-wrap a {
    position: relative;
}

.upload-btn-wrap .custom-file-input {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
}

.mh-auto {
    min-height: auto !important;
}

.chat-title {}

.project-title-wrap {
    position: relative;
    padding-left: 30px;
    border-bottom: #dce8f6 1px solid;
    background: #f1f7ff;
    padding: 4px 35px;
    margin: 0 0 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    cursor: pointer;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.project-title-wrap:hover {
    background: #deeafa;
}

.absolute-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
}

.title-icon-wrap {
    position: absolute;
    top: 6px;
    left: 7px;
    color: #006aff;
    border: #006aff 1px solid;
    padding: 3px 5px;
    line-height: 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    box-shadow: 0px 2px 2px 0px rgba(163, 138, 252, 0.89);
}

.inline-items>ul {
    margin: 0;
    padding: 0;
}

.inline-items>ul>li {
    list-style-type: none;
    display: inline-block;
    margin: 0 5px 5px 0;
    vertical-align: top;

}

.inline-items.align-middle>ul>li {
    vertical-align: middle !important;
}

.chat-header h3 svg {
    font-size: 12px;
    margin-right: 5px;
}

.shadowed-card {
    border-radius: 3px;
    box-shadow: rgba(23, 43, 77, 0.20) 0px 1px 1px, rgba(23, 43, 77, 0.20) 0px 0px 1px;
    padding: 10px;
    margin: 0 0 10px;
    position: relative;
}

.hovered-div {
    position: relative;
    z-index: 9;
    transition: .2s all linear;
}

.hovered-div:hover {
    background-color: rgb(221 232 255);
    color: rgb(23, 43, 77);
}

.inline-list {}

.inline-list ul {
    padding: 0;
    margin: 0;
}

.inline-list ul li {
    display: inline-block;
    position: relative;
    margin: 5px 0 0;
    list-style-type: none;
}

.inline-list a {
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #3fcc81;
    color: #3fcc81;
    padding: 5px 10px;
    font-size: 12px;
    display: inline-block;
    position: relative;
    padding-right: 30px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.project-body .inline-list li a:hover {
    color: #fff;
    background-color: #3fcc81;
}

.link-icon {
    position: absolute;
    top: 3px;
    right: 10px;
    color: #3fcc81;
    font-size: 12px;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.preview-image-list h5 {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: #364a63;
    margin: 0 0 5px;
    text-align: left;
}

.preview-image-list h5 a {
    color: #364a63;
}

.preview-image-list h5 a:hover {
    color: #16ae5d;
}

.avatar-col {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-order: 1;
    flex: 1;
    -ms-flex-wrap: nowrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
}

.avatar-img {
    position: relative;
    overflow: hidden;
    width: 56px;
    height: 56px;
    margin-right: 18px;
    border: 1px solid rgb(0 0 0 / 10%);
    padding: 2px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.avatar-img img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.av-desc {
    color: #303e67;
    font-size: 12px;
}

.av-desc h5 {
    font-size: 14px;
    font-weight: 400;
    color: #303e67;
    margin: 5px 0;
}

.av-desc p {
    margin: 0;
}

.profile-detail-list {}

.profile-detail-list ul {
    margin: 0;
    padding: 0;
}

.profile-detail-list ul li {
    display: block;
    line-height: 24px;
    position: relative;
    padding-left: 25px;
    color: #303e67;
    font-size: 12px;
}

.prof-ico {
    position: absolute;
    left: 0;
    top: 0;
    color: #9ba7ca;
}

.profile-detail-list ul li p {
    margin: 0;
}

.edit-prof-block {}

.edit-prof-block h5 {
    letter-spacing: 0.5px;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    color: #2c3652;
}

.edit-prof-block h5 {
    letter-spacing: 0.5px;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: #1c3faa;
}

.edit-prof-block h6 {
    letter-spacing: 0.5px;
    font-size: 12px;
    font-weight: 500;
    margin: 0;
    color: #2c3652;
}

.form-wrap .custom-file-label,
.form-wrap .custom-file,
.form-wrap .custom-file-input {
    height: 50px;
    line-height: 32px;
}

.form-wrap .custom-file-label::after {
    height: 48px;
    line-height: 36px;
}

.chat-wrapper {
    background: #fff;
    position: relative;
    -webkit-box-shadow: 0 0.25rem 0.75rem rgba(46, 56, 70, 0.08);
    box-shadow: 0 0.25rem 0.75rem rgba(46, 56, 70, 0.08);
}

.left-chat-block {
    border-right: transparent 1px solid;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.chat-wrapper.active .left-chat-block {
    border-color: rgba(0, 0, 0, 0.1);
    width: 65%;
    float: left;
}

.right-chat-block {
    display: none;
    position: relative;
    width: 35%;
    float: left;
    background-color: #fff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.chat-wrapper.active .right-chat-block {
    display: block;
    z-index: 999;
}

.chat-box h5 span.date,
span.date {
    font-size: 10px;
}

.thread-header {
    position: relative;
    padding: 10px 15px;
    border-bottom: rgba(0, 0, 0, 0.1) 1px solid;
}

.thread-close-btn {
    position: absolute;
    right: 10px;
    width: 30px;
    height: 30px;
    line-height: 34px;
    top: 50%;
    text-align: center;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.thread-close-btn a {
    display: block;
}

.thread-close-btn:hover {
    background: #f8f8f8;
}

.thread-close-btn svg {
    font-size: 18px;
    color: #000;
}

.thread-title {}

.thread-title h6 {
    font-weight: 700;
    font-size: 14px;
    margin: 0;
}

.thread-title p {
    margin: 0 0;
    font-size: 12px;
}

.no-of-replies {
    position: relative;
}

.no-of-replies:before {
    position: absolute;
    content: '';
    top: 50%;
    height: 1px;
    width: 100%;
    border-top: rgba(0, 0, 0, 0.1) 1px solid;
}

.no-of-replies span {
    font-size: 12px;
    display: inline-block;
    padding: 5px 10px;
    background: #fff;
    position: relative;
    color: rgba(0, 0, 0, 0.3);
}

.thread-box {
    cursor: pointer;
    padding: 4px 4px;
    position: relative;
    min-height: 30px;
    background: #fff;
    border: rgba(0, 0, 0, 0.1) 1px solid;
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    -ms-border-radius: 35px;
    -o-border-radius: 35px;
}

.stacked-img {
    width: 30px;
    height: 30px;
    background: #fff;
    display: inline-block;
    padding: 2px;
    border: rgba(0, 0, 0, 0.1) 1px solid;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: relative;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.stacked-img img {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.stacked-img+.stacked-img {
    margin: 0 0px 0 -6px;
}

.stacked-img:hover {
    z-index: 99;
}

.fixed-ht-div {}

.thread-chat-body-content .chat-block {
    padding: 6px 10px;
    padding-left: 60px;
    margin: 10px 0;
}

.thread-chat-body-content .msg-user {
    left: 10px;
    top: 6px;
    width: 38px;
}

input[type=checkbox]~label {
    margin-bottom: 0;
    margin-left: 5px;
    font-weight: 500;
    line-height: 20px;
}

.table-button {
    white-space: nowrap;
}

.table-button .default-btn.outline {
    margin: 5px;
}

.profile-icon {}

.profile-icon li:not(:last-child) {
    margin-right: 5px;
    /* margin-top: 10px; */
}

.thread-box .inline-items ul li {
    margin: 3px 10px;
}

.list-items {
    margin: 0 0 15px;
}

.user-avatar-wrap {
    position: relative;
}

.logo-wrap {
    max-width: 250px;
    margin: 5px auto;
    background: rgb(255, 255, 255);
}

.button-gradient {
    min-width: 75px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    line-height: 18px;
    background-size: 200%;
    background-image: linear-gradient(to right, rgb(255, 114, 13) 0%, rgb(253, 166, 103) 51%, rgb(253, 166, 103) 100%);
    box-shadow: rgba(251, 91, 33, 0.4) 0px 10px 20px 0px;
    padding: 15px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    transition: all 0.5s ease-in-out 0s;
    border-radius: 4px;
}

.button-gradient:hover,
.button-gradient:focus {
    color: rgb(255, 255, 255);
    background-position: right center;
}

.block-items {}

.block-items ul {
    margin: 0;
    padding: 0;
}

.block-items ul li {
    list-style-type: none;
    display: block;
    line-height: 24px;
    position: relative;
    padding-left: 20px;
    margin: 0 0 5px;
}

.block-items ul li:before {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f0da';
    top: 0;
    left: 0;
}

.img-wrap {
    max-width: 75px;
    margin: 15px 0 0;
    border: #ededee 1px solid;
    padding: 2px;
    border-radius: 4px;
}

.profile-dropdown .dropdown-toggle {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: #fff 2px solid;
    width: 25px;
    height: 25px;
    margin: 15px 5px 0;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.notification-no {
    position: absolute;
    top: 13px;
    left: 15px;
    color: #ffffff;
    padding: 1px 2px;
    background: #F35369;
    line-height: 10px;
    font-size: 10px;
    display: inline-block;
    border-radius: 2px;
}

.type-holder {
    display: inline-block;
    background: #3b6bfe;
    color: #ffffff;
    font-size: 10px;
    line-height: 14px;
    font-weight: 600;
    margin-bottom: 5px;
    padding: 2px 4px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.block-element {
    margin: 0;
    padding: 0;
}

.block-element li {
    list-style-type: none;
    display: block;
    margin: 0;
    line-height: 24px;
}

.table-wrap thead th {
    width: 70px;
}

.form-wrap .multiselect-input {
    border: 1px solid #ced4da;
    background: #fff;
    height: auto;
}

.msg-block .btn-file input[type="file"] {
    width: 20px;
    left: 0;
    height: auto;
}

.msg-action-btn ul {
    margin: 0;
    padding: 0;
}

.msg-action-btn ul li {
    padding: 0;
    display: inline-block;
    position: relative;
    list-style-type: none;
    vertical-align: middle;
    margin: 3px 26px 0 0;
}

.msg-action-btn label {
    margin: 0;
}

.msg-action-btn ul li:last-child {
    margin-right: 0;
}

.remove-image.edit-icon {
    right: 35px;
}

.remove-image.edit-icon svg {
    font-size: 10px;
    vertical-align: 1px;
}

.iconed-block-list {}

.iconed-block-list>ul {
    margin: 0;
    padding: 0;
}

.iconed-block-list>ul>li {
    min-height: 30px;
    padding-left: 40px;
    list-style-type: none;
    display: block;
    margin: 0 0;
    line-height: 24px;
    position: relative;
    padding-top: 3px;
}

.icon-wrap {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 24px;
    color: #797979;
}

.icon-wrap .fa-folder {
    color: rgb(146, 206, 255);
}

.iconed-block-list h5 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: #364a63;
    word-break: break-all;
}

.iconed-block-list p {
    margin: 0;
    font-size: 12px;
    line-height: 20px;
    color: #364a63;
}

.iconed-block-list p a,
.iconed-block-list h5 a {
    color: #364a63;
}

.iconed-block-list p a:hover,
.iconed-block-list h5 a:hover {
    color: #3fcc81;
}

.btn.btn-sm {
    padding: 3px 8px !important;
}

.note-desc {
    max-width: 200px;
}

.doted-list {}

.doted-list ul {
    padding: 0;
    margin: 0;
}

.doted-list ul li {
    list-style-type: none;
    display: inline-block;
    margin: 0 0;
    padding: 0 18px 0 0;
    position: relative;
    color: #8094ae;
    font-size: 12px;
}

.doted-list ul li:before {
    content: "\f111";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    font-size: 5px;
    line-height: 10px;
    right: 4px;
    transform: translate(-50%, -50%);
    opacity: .8;
}

.doted-list ul li:last-child:before {
    display: none;
}

.doted-list ul li:last-child {
    padding-right: 0;
}

.doc-card {
    height: 100%;
    position: relative;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.file-actions {
    position: absolute;
    right: 5px;
    top: 7px;
}

.file-actions .dropdown-toggle {
    font-size: 14px;
    display: inline-block;
    color: #526484;
    z-index: 1;
    text-align: center;
    background-color: #EEEFF5;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    margin-right: 0px !important;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.file-actions .dropdown-toggle::after {
    display: none;
}

.sb-nav-fixed .file-actions .dropdown-menu,
.dropdown-menu {
    min-width: 180px;
    border: 1px solid #e5e9f2;
    box-shadow: 0 3px 12px 1px rgba(44, 55, 130, 0.15);
    border-radius: 4px;
    margin: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    z-index: 1021;
}

.sb-nav-fixed .file-actions .dropdown-item,
.dropdown-item {
    padding: 10px 15px;
    font-size: 12px;
    color: #526484;
}

.sb-nav-fixed .file-actions .dropdown-item.active,
.sb-nav-fixed .file-actions .dropdown-item:active,
.dropdown-item.active,
.dropdown-item:active {
    text-decoration: none;
    color: #007bff;
    background: #f5f6fa;
}

h5 {
    color: #526484;
    font-size: 12px;
    font-weight: 700;
    line-height: 23px;
}

.ck-file-share-group {
    position: relative;
    padding: 15px 10px 0;
}

.ck-file-share-input-group {
    width: 100%;
}

.ck-file-share-input-group .label {
    margin: .3rem .5rem .3rem 0;
    width: 2.25rem;
    color: #8094ae;
}

.tagify {
    width: 100%;
    border: none;
    font-size: 12px;
}

.ck-file-share-nav {
    margin: 0;
    padding: 0;
}

.ck-file-share-nav li {
    list-style-type: none;
    display: inline-block;
}

.ck-file-share-field {
    padding: 0 10px;
}

.form-control.ex-large {
    min-height: 225px;
    border: none;
    padding: 0;
    font-size: 12px;
}

.modal-body .form-control {
    font-size: 12px;
}

.ck-file-details {
    font-size: 12px;
    color: #526484;
}

.user-avatar.xs {
    display: inline-block;
    height: 26px;
    width: 26px;
    margin: 0 -6px 0 0;
    color: #fff;
    border: 2px solid #fff;
    position: relative;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.user-avatar.xs img {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.icon-wrap .fa-file-excel {
    color: #36c684;
}

.icon-wrap .fa-file-pdf {
    color: #f25168;
}

.icon-wrap .fa-file-csv {
    color: #d8db00;
}

.icon-wrap .fa-file-image {
    color: #599def;
}

.icon-wrap .fa-file-alt {
    color: #2962ff;
}

.icon-wrap .fa-file-signature {
    color: #7e95c4;
}

.icon-wrap .fa-file-archive {
    color: #f4d368;
}

.icon-wrap .fa-file-video {
    color: #f74141;
}

.ck-file-icon {
    text-align: center;
}

.ck-file-icon .icon-wrap {
    position: relative;
    font-size: 50px;
}

.ck-file-icon p,
.fig-wrapp p {
    font-weight: 600;
    color: #364a63;
    margin: 10px 0;
}

.image-wrap {}

.fig-wrapp {
    position: relative;
    text-align: center;
}

.absolute-url {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.media-wrap {
    position: relative;
    width: 190px;
}

.loader-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background: rgba(255, 255, 255, 0.6);
    z-index: 1;
}

.big-spinner.spinner-border {
    width: 40px;
    height: 40px;
    border: 5px solid #000;
    border-right-color: transparent;
}

.centered-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.breadcrumb-wrap {}

.breadcrumb-wrap .breadcrumb {
    background: none;
    padding: 0;
}

.breadcrumb-wrap .breadcrumb-item {
    font-size: 12px;
    color: #AAAAAA;
    font-weight: 600;
}

.breadcrumb-wrap .breadcrumb-item a {
    color: #3fcc81;
}

.breadcrumb-wrap .breadcrumb-item.active,
.breadcrumb-wrap .breadcrumb-item a:hover {
    color: #AAAAAA;
}

.file-info {
    padding-right: 40px;
    word-break: break-all;
}

.imaged-col {
    padding-left: 60px;
    position: relative;
    padding-right: 35px;
    word-break: break-all;
    min-height: 48px;
}

.fxd-ht-img-200 {}

.fxd-ht-img-150 img {
    max-height: 150px;
}

.sticky-col {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 60px;
    z-index: 2;
    padding: 5px 10px;
    margin: 0 0 12px;
}

.small-img-wrap {
    width: 45px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}

.hovered-check-wrap {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.hovered-check-wrap input[type="checkbox"],
.check-wrap input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

.doc-card:hover .hovered-check-wrap,
.doc-card.doc-active-card .hovered-check-wrap {
    visibility: visible;
    opacity: 1;
}

.doc-card:hover,
.doc-card.doc-active-card {
    background: #e5e9f2 !Important;
}

.tab-wrap {}

.tab-wrap .nav-tabs {
    border-bottom: 1px solid #dbdfea;
}

.tab-wrap .nav-tabs .nav-item {
    margin-bottom: 0;
    margin-right: 5px;
}

.tab-wrap .nav-tabs .nav-item:last-child {
    margin-right: 0;
}

.tab-wrap .nav-link {
    padding: 20px 10px;
    position: relative;
    font-weight: 600;
    color: #526484;
    border: none;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;

    -moz-border-radius: 4px 4px 0 0;

    -ms-border-radius: 4px 4px 0 0;

    -o-border-radius: 4px 4px 0 0;

    transition: .2s all linear;

    -webkit-transition: .2s all linear;

    -moz-transition: .2s all linear;

    -ms-transition: .2s all linear;

    -o-transition: .2s all linear;

}

.tab-wrap .nav-tabs .nav-link.active,
.tab-wrap .nav-tabs .nav-item.show .nav-link {
    color: #3fcc81;
    background: none;
    border-color: #dee2e6 #dee2e6 #f5f6fa;
}

.tab-wrap .nav-tabs .nav-link.active,
.tab-wrap .nav-tabs .nav-link:hover {

    color: #ffffff;

    border: none;

    background-color: #3fcc81;

}



/* .tab-wrap .nav-tabs .nav-link:before, 
.tab-wrap .nav-tabs .nav-link:after {
    position: absolute;
    content: '';
}

.tab-wrap .nav-tabs .nav-link:after {
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: #3fcc81;
    opacity: 0;
}
*/

.tab-wrap .nav-tabs .nav-link.active:after {
    opacity: 1;
}

.tab-wrap .tab-content>.tab-pane {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    padding: 15px 0 0;
    margin: 0;
}

.image-wrap iframe {
    /* height: 80px; */
    border: rgba(0, 0, 0, 0.08) 1px solid;
    padding: 2px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.image-wrapp {
    cursor: pointer;
}

.user-typing-height {
    height: 15px;
}

.file-name {
    word-break: break-all;
}

.sticky-btn {
    position: fixed;
    top: 50%;
    right: 25px;
    z-index: 9;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
}

.chat,
.chat-box {
    word-break: break-word;
}

.badge.rounded-pill.bg-danger {
    padding: 2px 8px;
    line-height: 12px;
    vertical-align: text-bottom;
    border: #fff 1px solid;
}

.chat-sidebar-body {
    max-height: calc(100vh - 190px);
    overflow-y: scroll;
}

.h-media-wrap {
    position: relative;
}

.h-media {
    overflow: hidden;
    width: 70px;
    height: 70px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.h-media img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.h-desc {
    word-break: break-all;
}

.chat-sidebar-body .member-fig {
    left: 5px;
    top: 10px;
}

.activity-block.fixed-height-activity {
    max-height: 320px;
    overflow-y: scroll;
    padding: 0 0;
    overflow: hidden scroll;
}

.multiselect {
    background: #fff;
}

.success-load {
    text-align: -webkit-right;
}

.success-load a {
    margin-bottom: 20px;
    background: #03b356;
    color: #FFF;
    width: 120px;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 10px;
    display: block;
    transition: 0.3s all linear;
    position: relative;
}

.success-load a:hover {
    border: 1px solid #03b356;
    background: #fff;
    color: #03b356;
}

.success-loading a {
    background: #03b356;
    color: #FFF;
    width: 120px;
    height: 35px;
    text-align: center;
    display: block;
    position: relative;
    border-radius: 10px;
    z-index: 1;
}

.success-loading a:before {
    position: absolute;
    z-index: -1;
    content: url(../img/chat-loading.gif);
    opacity: 1;
    top: 0;
    bottom: 0;
    color: #fff;
    text-align: center;
}

.duplicate-text {
    /* border-radius: 5px; */
    /* border: 1px solid #ff0019; */
    background: #ffc5c5;
    color: #ff0019;
    font-size: 12px;
    /* display: none; */
    max-width: 250px;
    padding: 3px;
}

.duplicate-text p {
    margin: 0;
}


/* .warning-duplicate:hover .duplicate-text {
    display: block;
} */

.warning-text-wrap {
    background: #ffc5c5;
    text-align: center;
    border-radius: 5px;
    padding: 5px 0 0;
}

.warning-text-wrap svg {
    margin-bottom: 5px;
}

.warning-duplicate {
    position: absolute;
    top: 39%;
    left: 34%;
    width: 190px;
    transform: translate(-50%, -50%);
    z-index: 333;
}

.warning-duplicate svg {
    font-size: 25px;
    color: #ff0019;
}

.disable-button-list ul {
    margin: 10px;
    padding: 10px;
}

.disable-button-list {
    border-radius: 5px;
    border: 1px solid #d1e4f8;
    padding: 10px;
    margin-bottom: 20px;
}

.disable-button-list ul li {
    list-style-type: disc;
    margin-bottom: 10px;
}

.disable-button-list ul li a {
    display: inline-block;
    background: #03b356;
    color: #fff;
    font-weight: 700;
    transition: 0.3s all linear;
    text-align: center;
    border-radius: 5px;
    padding: 0px 10px;
}

.disable-button-list ul li a:hover {
    color: #03b356;
    background: #fff;
    border: 1px solid #03b356;
}


/* disable-button-list */


/* /disable-button-list */

.main-msg-thread .chat-box img.msg-user,
.main-msg-thread .msg-user {
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.main-msg-thread .chat-box {
    padding-left: 35px;
}

.error-media-holder {
    max-width: 300px;
    margin: 35px auto;
}

.with-actiondropdown .file-actions {
    right: 15px;
    top: 30px;
    z-index: 99;
}

.green-tag {
    background: #3fcc81;
    color: #ffffff;
}

.form-group {
    position: relative;
}


.control-icon {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 4px;
    color: #3FCC81;
    border-right: #bbcdde 1px solid;
    padding: 2px 5px;
    font-size: 10px;
}

.form-group.control-with-icon {
    padding: 4px;
    background: #fff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.form-group.control-with-icon .form-control {
    width: 120px;
    text-indent: 30px;
    padding: 0;
    /* padding-left: 30px; */
    font-size: 10px;
    border-color: #bbcdde;
    font-weight: 600;
}

.project-info .green::before {
    background-color: #28a745;
}

.file-actions.position-relative {
    top: 0;
    right: 0;
}

.table input[type=checkbox] {
    vertical-align: middle;
}

.filter-wrap .btn {
    padding: 6px 10px;
}

.filter-wrap label {
    font-size: 12px;
    font-weight: 600;
}

.tour-popover-container,
.send-schedule-container {
    position: fixed;
    bottom: 60px;
    left: 15px;
    right: auto;
    z-index: 9999;
}

.send-schedule-container {
    position: absolute;
    left: -30px;
    bottom: 5px;
    z-index: 99;
}

.tour-pop-wrap.card {
    background-color: #fdfffe;
    border: 1px solid #3fcc81;
}

.tour-pop-wrap.card.disappear-block,
.arrow-tooltip.card.disappear-block {
    display: none;
}

.tour-pop-icon a {
    display: inline-block;
    width: 35px;
    height: 35px;
    background: #16ae5d;
    color: #fff;
    line-height: 35px;
    text-align: center;
    position: relative;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.tour-pop-wrap {
    position: absolute;
    width: 245px;
    left: 100%;
    right: auto;
    bottom: 100%;
    margin: 0 0px -42px 9px;
}

.tour-pop-wrap h5 {
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    color: #3fcc81;
}

.tour-pop-wrap .icon-wrapper {
    width: 50px;
    height: 50px;
    line-height: 55px;
}

.tour-pop-wrap .icon-wrapper svg {
    font-size: 20px;
}

.tour-pop-wrap::after,
.tour-pop-wrap::before {
    position: absolute;
    display: block;
    content: "";
    border-color: transparent;
    border-style: solid;
    bottom: 15px;
    margin-left: -9px;
}

.tour-pop-wrap::before,
.tour-pop-wrap::before {
    left: 0;
    border-width: 0.5rem 0.5rem 0.5rem 0;
    border-right-color: #3fcc81;
}

.tour-pop-wrap::after,
.tour-pop-wrap::after {
    left: 1px;
    border-width: 0.5rem 0.5rem 0.5rem 0;
    border-right-color: #fff;
}

.introjs-tooltipbuttons {
    border-top: 1px solid #ffffff;
}

.introjs-bullets ul li a {
    background: rgba(255, 255, 255, 0.65);
}

.introjs-bullets ul li a.active {
    background: #fff;
}

.introjs-tooltip-header {
    padding-left: 15px;
    padding-right: 0;
}

.Tooltipwithvideo {
    min-width: 320px;
    max-width: 320px;
}

.Tooltipwithvideo .introjs-bullets ul li a {
    background: #c0b9b9;
}

.Tooltipwithvideo .introjs-tooltip-title {
    color: #364a63;
}

.Tooltipwithvideo .introjs-tooltipbuttons {
    border-top: 1px solid #eaeaea;
}

.Tooltipwithvideo .introjs-skipbutton {
    color: #364a63;
}

.introjs-tooltiptext {
    padding: 5px 15px;
    font-size: 13px;
}

.introjs-button {
    padding: 5px 10px;
}

.introjs-nextbutton,
.introjs-button:focus {
    border: 1px solid #3fcc81;
    color: #ffffff;
    background-color: #3fcc81;
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.introjs-nextbutton:hover {
    border-color: #21b466;
    background-color: #21b466;
    color: #fff;
}

.introjs-skipbutton {
    color: #000;
}

.introjs-tooltip {
    color: #000;
}

.Tooltipnotification {
    background: #ffe979;
}

.Tooltipnotification .introjs-arrow.top-middle {
    border-bottom-color: #ffe979;
}

.Tooltiplogout {
    background: #f6b7d4;
}

.Tooltiplogout .introjs-arrow.top-middle {
    border-bottom-color: #f6b7d4;
}

.Tooltipusericon {
    background: #85cbcd;
}

.Tooltipusericon .introjs-arrow.top-right {
    border-bottom-color: #85cbcd;
}

.Tooltipdashboard {
    background: #b5ea2b;
}

.Tooltipdashboard .introjs-arrow.left {
    border-right-color: #b5ea2b;
}

.Tooltipinvitation {
    background: #f96868;
}

.Tooltipinvitation .introjs-arrow.left {
    border-right-color: #f96868;
}

.Tooltiptemplate {
    background: #d0a2ff;
}

.Tooltiptemplate .introjs-arrow.left {
    border-right-color: #d0a2ff;
}

.Tooltiplibrary {
    background: #5b9aff;
}

.Tooltiplibrary .introjs-arrow.left {
    border-right-color: #5b9aff;
}

.Tooltipuploadpdf {
    background: #efa758;
}

.Tooltipuploadpdf .introjs-arrow.left {
    border-right-color: #efa758;
}

.Tooltipmydrive {
    background: #ffe979;
}

.Tooltipmydrive .introjs-arrow.left {
    border-right-color: #ffe979;
}

.Tooltipmydrive .introjs-arrow.left-bottom {
    border-right-color: #ffe979;
}

.Tooltipguest {
    background: #f79aa1;
}

.Tooltipguest .introjs-arrow.left {
    border-right-color: #f79aa1;
}

.Tooltipguest .introjs-arrow.left-bottom {
    border-right-color: #f79aa1;
}

.Tooltiptutorial {
    background: #85cbcd;
}

.Tooltiptutorial .introjs-arrow.left {
    border-right-color: #85cbcd;
}

.Tooltiptutorial .introjs-arrow.left-bottom {
    border-right-color: #85cbcd;
}

.Tooltipappointment {
    background: #b5ea2b;
}

.Tooltipappointment .introjs-arrow.left {
    border-right-color: #b5ea2b;
}

.Tooltipappointment .introjs-arrow.left-bottom {
    border-right-color: #b5ea2b;
}

.Tooltipproject {
    background: #80d5fa;
}

.Tooltipproject .introjs-arrow.top {
    border-bottom-color: #80d5fa;
}

.Tooltipusetemplate {
    background: #4189fc;
}

.Tooltipusetemplate .introjs-arrow.top {
    border-bottom-color: #4189fc;
}

.Tooltipusetemplate .introjs-arrow.top-middle {
    border-bottom-color: #4189fc;
}

.Tooltipprojectstatus {
    background: #25e39a;
}

.Tooltipprojectstatus .introjs-arrow.top {
    border-bottom-color: #25e39a;
}

.Tooltipprojectstatus .introjs-arrow.left {
    border-right-color: #25e39a;
}

.Tooltipatoz {
    background: #ffe979;
}

.Tooltipatoz .introjs-arrow.top {
    border-bottom-color: #ffe979;
}

.Tooltipatoz .introjs-arrow.top-middle {
    border-bottom-color: #ffe979;
}

.Tooltipprojectdetails {
    background: #f6b7d4;
}

.Tooltipprojectdetails .introjs-arrow.right {
    border-left-color: #f6b7d4;
}

.Tooltipprojectdetails .introjs-arrow.top {
    border-bottom-color: #f6b7d4;
}

.Tooltipprojectdetails .introjs-arrow.bottom {
    border-top-color: #f6b7d4;
}

.Tooltiprecentchannels {
    background: #85cbcd;
}

.Tooltiprecentchannels .introjs-arrow.top {
    border-bottom-color: #85cbcd;
}

.Tooltiprecentchannels .introjs-arrow.bottom {
    border-top-color: #85cbcd;
}

.Tooltipactivityfeed {
    background: #b5ea2b;
}

.Tooltipactivityfeed .introjs-arrow.bottom {
    border-top-color: #b5ea2b;
}

.error-field {
    border-color: #dc3545 !important;
}


/* table-relative */

.table-relative {
    position: relative;
}

.table-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    background: rgba(255, 255, 255, 0.16);
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.30);
    border-radius: 4px;
    border: rgba(7, 7, 7, 0.20) 1px solid;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.table-loader img {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.table-loader {
    position: absolute;
    top: 0%;
    left: 0%;
    text-align: center;
    background: rgba(255, 255, 255, 0.16);
}

.table-loader.chat-load {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
    border: none;
}

.ck.ck-toolbar {
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
    -webkit-border-radius: 8px 8px 0 0 !important;
    -moz-border-radius: 8px 8px 0 0 !important;
    -ms-border-radius: 8px 8px 0 0 !important;
    -o-border-radius: 8px 8px 0 0 !important;
}

.editor-wrap {
    position: relative;
    border: 1px solid #c1c8d6;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {
    border: none !important;
    border-radius: 0 0 8px 8px !important;
    -webkit-border-radius: 0 0 8px 8px !important;
    -moz-border-radius: 0 0 8px 8px !important;
    -ms-border-radius: 0 0 8px 8px !important;
    -o-border-radius: 0 0 8px 8px !important;
}

.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
    box-shadow: none !important;
    border: none !important;
}

.ck.ck-icon {
    font-size: 8px !important;
}


/*  */

.form-list-wrapper .table p {
    margin: 0;
    font-size: 12px;
}

.form-list-wrapper .table .table-button a:hover {
    color: #16ae5d;
}

.side-card-head {
    border-top: 1px solid #E2E8EA;
    border-bottom: 1px solid #E2E8EA;
    background: #F8F8F8;
    margin: 0 0;
    padding: 15px;
    color: #182948;
}

.card-head {
    border-bottom: 1px solid #e6ebf1;
    margin: 0 -15px 10px;
    padding: 0 15px;
}

.dragdrop-area {
    position: relative;
}

.message-box-wrap {
    background: #fff;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

[contentEditable=true]:empty:not(:focus):before {
    content: attr(data-text)
}

.text-wrap-features ul {
    padding: 0;
    margin: 0;
}

.text-wrap-features ul li {
    list-style-type: none;
    display: inline-block;
}

.text-wrap-features ul li a {
    color: #2c3e50;
    text-decoration: none;
    margin-right: 10px;
    margin-bottom: 1px;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    display: inline-block;
    padding: 2px 5px;
    background: transparent;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.text-wrap-features ul li a:hover,
.text-wrap-features ul li a.is-active {
    color: #2c3e50;
    background: #d9d9d9;
}

.enter-message-wrap {
    padding: 5px 10px;
    min-height: 65px;
}

.text-wrap-features {
    background: #f8f8f8;
    padding: 2px 10px;
    border-radius: 7px 7px 0 0;
    -webkit-border-radius: 7px 7px 0 0;
    -moz-border-radius: 7px 7px 0 0;
    -ms-border-radius: 7px 7px 0 0;
    -o-border-radius: 7px 7px 0 0;
}

.plus-wrap {
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 28px;
    background: #ebebeb;
    border-radius: 50%;
    text-align: center;
}

.text-format {
    position: relative;
}

.text-format select {
    margin-right: 20px;
    border: none;
}

.text-format:before {
    position: absolute;
    content: '';
    top: 1px;
    left: auto;
    right: 5px;
    bottom: 1px;
    background: #c3c3c3;
    width: 1px;
}

.text-format:last-child:before {
    background: none;
}

.message-box-wrap ul li .underlined {
    text-decoration: underline;
}

.ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    color: #adb5bd;
    pointer-events: none;
    height: 0;
}

.send-return-wrap {
    position: absolute;
    bottom: 50px;
    left: auto;
    right: 30px;
    background: #42b983;
    border-radius: 5px;
    display: inline-flex;
}

.send-return-wrap .send-wrap {
    border-right: 0.5px solid #fff;
    border-radius: 5px 0 0 5px;
}

.send-return-wrap .send-schedule-arrow {
    border-radius: 0 5px 5px 0;
    position: relative;
}

.send-return-wrap .send-wrap {
    padding: 5px 15px;
}

.send-return-wrap .send-schedule-arrow {
    padding: 5px;
    background: #93baa8;
}

.send-return-wrap a {
    color: #fff;
    display: inline-block;
    text-align: center;
    margin: 0;
}

.send-return-wrap ul li a:hover {
    color: #fff;
}

.arrow-tooltip {
    position: absolute;
    left: auto;
    right: 0;
    bottom: 30px;
    width: 300px;
    padding: 15px;
    border: 1px solid #e5e9f2;
    background: #fff;
    box-shadow: 0 3px 12px 1px rgba(44, 55, 130, 0.15);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    color: #2c3e50;
    /* display: none; */
    /* z-index: 3; */
    display: block;
    text-align: left;
    transition: 0.3s all linear;
    -webkit-transition: 0.3s all linear;
    -moz-transition: 0.3s all linear;
    -ms-transition: 0.3s all linear;
    -o-transition: 0.3s all linear;
}

.arrow-tooltip .form-check {
    margin: 0 0 5px;
}

.arrow-tooltip .form-check-label {
    margin-bottom: 0;
    line-height: 22px;
    font-size: 12px;
    vertical-align: top;
}

.send-schedule-arrow:focus-within .arrow-tooltip {
    display: block;
}

.message-box-wrap.disabled .send-return-wrap {
    background: none;
}

.message-box-wrap.disabled .send-wrap a,
.message-box-wrap.disabled .send-schedule-arrow :any-link {
    color: #6f6868;
}

.arrow-tooltip ul li a {
    font-weight: 400;
    padding: 10px 0;
}

.arrow-tooltip ul li:first-child {
    border-radius: 5px 5px 0 0;
}

.arrow-tooltip ul li:last-child {
    border-radius: 0 0 5px 5px;
}

.arrow-tooltip ul li:hover {
    color: #fff;
    background: #2c3e50;
}

.arrow-tooltip ul li:hover a {
    color: #fff;
}

.ProseMirror:focus-visible {
    outline: none;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(3, 3, 3, 0.08);
    font-size: 48px;
    color: #2c3e50;
    font-weight: 700;
    text-align: center;
    display: none;
    border-radius: 15px;
    z-index: 999;
}

.loading-overlay img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.carousel__wrapper .loading-overlay img {
    width: 20px;
    height: 20px;
}



.message-box-wrap.disabled .text-wrap-features,
.message-box-wrap.disabled .enter-message-wrap,
.message-box-wrap.disabled .additional-features-wrap {
    opacity: 0.2;
}

.message-box-wrap.disabled .loading-overlay {
    display: block;
    opacity: 1;
}

.small-texts-side p {
    text-align: right;
    padding-bottom: 0;
    margin-bottom: 0;
}

.small-texts-side p a {
    text-decoration: none;
    color: #2c3e50;
}

.small-texts-side p a:hover {
    color: #42b983;
}

.ProseMirror ul {}

.ProseMirror ul li {}

.paragraph-dropdown .dropdown-item.h1,
.ProseMirror h1 {
    font-size: 22px;
    font-weight: 700;
}

.paragraph-dropdown .dropdown-item.h2,
.ProseMirror h2 {
    font-size: 16px;
    font-weight: 600;
}

.loading-overlay img {
    max-width: 150px;
}

.enter-btn {
    background: #6f6868;
    color: #fff;
    vertical-align: inherit;
    border-radius: 4px;
    padding: 2px 7px 4px;
    display: inline-block;
    line-height: 16px;
    font-size: 12px;
    box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.30);
    margin: 0 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.small-texts-side i {
    margin-right: 5px
}

mark {
    background-color: #ffe066;
    padding: 0.125em 0;
    border-radius: 0.25em;
    box-decoration-break: clone;
}

.shortcut-key {
    position: relative;
}

.shortcut-tooltip {
    position: absolute;
    width: 70px;
    top: -40px;
    left: -27px;
    background: #2c3e50;
    color: #fff;
    border-radius: 5px;
    padding: 5px;
    display: none;
    text-align: center;
}

.shortcut-tooltip p {
    margin: 0;
}

.shortcut-tooltip:before {
    position: absolute;
    content: '\f0d7';
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    font-size: 16px;
    bottom: -12px;
    color: #2c3e50;
    left: 50%;
    margin-left: -8px;
}

.shortcut-key:hover .shortcut-tooltip {
    display: block;
}

.items {
    padding: 0.2rem;
    position: relative;
    border-radius: 0.5rem;
    background: #FFF;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    font-size: 0.9rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1), ;
}

.item {
    display: block;
    margin: 0;
    width: 100%;
    text-align: left;
    background: transparent;
    border-radius: 0.4rem;
    border: 1px solid transparent;
    padding: 0.2rem 0.4rem;
    /* &.is-selected {
        border-color: #000;
      } */
}

.mention {
    padding: 0.1rem 0.3rem;
    box-decoration-break: clone;
    background: #d5fde8;
    color: #20a960;
    margin: 0 5px 5px 0;
    border-radius: 0.4rem;
    -webkit-border-radius: 0.4rem;
    -moz-border-radius: 0.4rem;
    -ms-border-radius: 0.4rem;
    -o-border-radius: 0.4rem;
}

.additional-features-wrap {
    position: absolute;
    left: auto;
    right: 0;
    bottom: 10px;
    margin: 0;
}

.send-schedule-arrow {
    position: relative;
}

.send-schedule-container .send-schedule-arrow a {
    color: #fff;
    display: inline-block;
    background: #3fcc81;
    width: 25px;
    height: 25px;
    line-height: 25px;
    border-radius: 50%;
    border: #c1c8d6 1px solid;
    text-align: center;
    z-index: 333;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: relative;
}

.send-schedule-arrow a:hover {
    color: #fff;
    background: #2d8255;
}

.arrow-tooltip input {
    margin-right: 5px;
}

.tippy-box {
    border: 1px solid #e5e9f2;
    box-shadow: 0 3px 12px 1px rgba(44, 55, 130, 0.15);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.tippy-box .item {
    color: #526484;
    font-weight: 600;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.tippy-box .item:hover {
    color: #ffffff;
    background: #3fcc81;
}

.enter-message-wrap p {
    margin: 0;
}

.small-texts-side {}

.small-texts-side p {
    font-size: 12px;
}

.editor-bullet-list {
    margin: 0;
    padding: 0 0 0 15px;
}

.editor-bullet-list li {
    list-style-type: none;
    display: block;
    position: relative;
    padding-left: 15px;
    line-height: 20px;
    margin: 5px 0 0;
}

.editor-bullet-list li::before {
    position: absolute;
    content: '';
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    background: #5c678f;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.editor-ordered-list {
    margin: 0;
    padding: 0 0 0 15px;
}

.editor-ordered-list li {
    line-height: 20px;
    margin: 5px 0 0;
}

.deleted-holder {
    border-radius: 17px;
    color: #bcc0c4;
}

.ProseMirror {
    white-space: break-spaces;
    max-height: 100px;
    overflow-y: scroll;
}


/* logo-changes */

.img-logo-big {
    display: none;
}

.fixed-ht-div {
    max-height: 300px;
    min-height: 300px;
    overflow-y: scroll;
}

.table-primary {
    position: sticky;
    top: 0;
}

.project-rowwrap {
    overflow: hidden;
}

.verify-phone-num {
    padding: 8px 15px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    color: #fff;
    font-weight: 500;
    margin-top: 10px;
}

.verify-phone-num:hover {
    box-shadow: 0 3px 12px 1px rgba(0, 13, 101, 0.15);
    ;
}

.otp-counter {
    width: 25px;
    height: 25px;
    font-size: 12px;
    color: #c51d33;
    font-weight: 600;
    line-height: 25px;
    text-align: center;
    background: #ffe8ea;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 1px solid #ff4b4b;
    margin-top: 25px;
}

.otp-mini-text {
    font-size: 10px;
    color: #5c678f;
    margin: 10px 10px 0;
}

.form-group.mobile-holder {
    position: relative;
}

.verified-mobile-icon {
    position: absolute;
    top: 40px;
    left: auto;
    right: -35px;
    background: #ccffce;
    width: 25px;
    height: 25px;
    line-height: 25px;
    border-radius: 50%;
    text-align: center;
    border: 1px solid #008000;
}

.green-check-wrap,
.red-check-wrap {
    padding: 2px 4px;
    text-align: center;
    background: #e5fff1;
    border: 1px solid #008000;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    font-size: 12px;
    margin-left: 10px;
    color: #008000;
}

.red-check-wrap {
    background: #ff4b4b;
    border: 1px solid #c51d33;
    color: #c51d33;
}

.table-primary {
    position: sticky;
    top: 0;
}

.table-primary,
.table-primary>td,
.table-primary>th {
    --cui-table-bg: #B8DAFF;
}

.project-rowwrap {
    overflow: hidden;
}


/* mail-template-fixes */

.table .file-actions a {
    margin-right: 10px;
}

.not-sent-email .fa-envelope-open {
    color: #ff4b4b;
}

.modal-wrap .modal-body p {
    font-weight: 500;
    color: #2c3e50;
    margin: 0;
}

.mail-count ul {
    margin: 0;
    padding: 0;
}

.mail-count ul li {
    list-style-type: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background: #80d5fa;
    color: #1c3faa;
    margin-right: 5px;
    text-align: center;
}

.mail-count ul .failed-mail {
    background: #f79aa1;
    color: #ff0019;
}

.mail-count ul .success-mail {
    background: #ddffed;
    color: #20a960;
}

.mail-count ul li:last-child {
    margin-right: 0;
}

.sb-nav-fixed .dropdown-item.clear-all-btn {
    font-size: 14px;
    font-weight: 700;
}

.user-verfication-resend {
    background: #ffc5c5;
    padding: 10px;
    margin-bottom: 20px;
}

.user-verfication-resend h4 {
    font-size: 14px;
    font-weight: 500;
}

.resend-verification-btn {
    color: #1d316e;
    transition: 0.3s all linear;
}

.user-verfication-resend ul {
    margin: 10px 0 10px 20px;
}

.resend-verification-btn {
    color: #1c3faa;
    font-weight: 600;
}

.user-verfication-resend ul li {
    font-size: 12px;
    margin-bottom: 5px;
}

.resend-verification-btn:hover {
    color: #4189fc;
}

.mini-stats-wid p {
    line-height: 18px;
}

/* /mail-template-fixes */

.warning-file-size {
    background: #ffd802;
    color: #000;
    /* width: 80%; */
    text-align: center;
    /* position: absolute; */
    padding: 3px;
    /* top: 50%; */
    font-size: 12px;
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    border-radius: 5px;
}

.warning-file-size svg {
    font-size: 26px;
    margin-bottom: 5px;
}

.warning-file-size p {
    margin: 0
}

.chat-block.active,
.thread-active,
.chat-block.active:hover
{
    background-color: rgb(217 255 235);
}

.lds-ring {
    display: inline-block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
    margin: 8px;
    border: 4px solid #000;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #000 transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.chat-loader-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 99;
}


/* members list update */

.title-status-wrap ul {
    margin: 0;
    padding: 0;
}

.title-status-wrap ul li {
    display: inline-block;
    list-style-type: none;
    margin: 5px 0;
}

.title-status-wrap ul li:first-child {
    margin-right: 15px;
}


/* attachment-hover */

.pdf-wrapp.attachment-wrap {
    position: relative;
}

.pdf-wrapp.attachment-wrap .attachment-buttons {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.50);
    display: none;
    transition: 0.3s all linear;
    -webkit-transition: 0.3s all linear;
    -moz-transition: 0.3s all linear;
    -ms-transition: 0.3s all linear;
    -o-transition: 0.3s all linear;
}

.pdf-wrapp.attachment-wrap .attachment-buttons ul {
    margin: 0;
    padding: 0;
    position: relative;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.pdf-wrapp.attachment-wrap .attachment-buttons ul li {
    list-style-type: none;
    display: inline-block;
}

.pdf-wrapp.attachment-wrap .attachment-buttons ul li a {
    color: #8fffc0;
    text-decoration: none;
    font-size: 35px;
}

.pdf-wrapp.attachment-wrap .attachment-buttons ul li:first-child {
    margin-right: 30px;
}

.pdf-wrapp.attachment-wrap:hover .attachment-buttons {
    display: block;
}

.avatar-wrap {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #405189;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: 500;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}

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

.mini-stats-wid p {
    font-size: 12px;
}

.pro-detail-wrap {
    max-width: 400px;
}

.timeline {
    margin-bottom: 50px;
    position: relative
}

.timeline:before {
    background-color: #dee2e6;
    bottom: 30px;
    content: "";
    left: 50%;
    position: absolute;
    top: 30px;
    width: 2px;
    z-index: 0
}

.timeline .time-show {
    margin-bottom: 30px;
    margin-top: 30px;
    position: relative
}

.timeline .timeline-box {
    background: #fff;
    display: block;
    margin: 15px 0;
    position: relative;
    padding: 20px;
    border-radius: .25rem;
    -webkit-box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
    box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
}

.timeline .timeline-album {
    margin-top: 12px
}

.timeline .timeline-album a {
    display: inline-block;
    margin-right: 5px
}

.timeline .timeline-album img {
    height: 36px;
    width: auto;
    border-radius: 3px
}

.width-lg {
    min-width: 140px;
}

.font-16 {
    font-size: 16px !important;
}

.timeline-fixed-height {
    height: 400px;
}

.timeline-fixed-height {
    height: 800px;
    overflow-y: scroll;
}

.table .table-light {
    border-color: #f3f6f9;
    background-color: #f3f6f9;
}

.font-12 {
    font-size: 12px !important;
}

.badge-soft-warning {
    color: #f7b84b;
    background-color: rgba(247, 184, 75, .1);
}

.badge-soft-danger {
    color: #f06548;
    background-color: rgba(240, 101, 72, .1);
}

.badge-soft-success {
    color: #0ab39c;
    background-color: rgba(10, 179, 156, .1);
}

.green-text {
    color: #0fcf17;
}

.yellow-text {
    color: #f4bd0e;
}

.badge-dim.badge-success {
    color: #1ee0ac;
    background-color: #e6fcf6;
    border-color: #e6fcf6;
}

.badge-dim.badge-warning {
    color: #f4bd0e;
    background-color: #fef8e4;
    border-color: #fef8e4;
}

.badge-dim.badge-danger {
    color: #e85347;
    background-color: #fceceb;
    border-color: #fceceb;
}

.badge-dim.badge-light {
    color: #b7c2d0;
    background-color: #f7f8fa;
    border-color: #f7f8fa;
}

.badge-outline-light {
    border: 1px solid #d4dae3;
    padding: 2px 7px;
    vertical-align: text-top;
    font-weight: 700;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.font-8 {
    font-size: 8px !important;
}

.btn-soft-success {
    color: #28c76f;
    background-color: rgba(40, 199, 111, .12);
    border-color: transparent;
}

.modal-wrap {}

.modal-wrap input.form-control,
.modal-wrap select.form-control {
    height: 36px;
}

.back-export {
    background: rgba(28, 64, 171, 0.10);
    padding: 6px 10px;
    border-radius: 4px;
    color: #1c3faa;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.back-export:hover {
    background: #1c3faa;
    color: #fff;
}

/* member-status-chnages*/

.avatar-wrap.rounded-circle,
.member-img-cirlce {
    position: relative;
}

.members-list.small-av ul {
    margin: 0;
    padding: 0;
}

.members-list.small-av ul li {
    list-style-type: none;
    display: inline-block;
    margin-left: 10px;
}

.members-list.small-av ul li:first-child {
    margin-left: 0
}

.member-status-wrap {
    position: absolute;
    top: -5px;
    left: -5px;
    font-size: 10px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    display: none;
    z-index: 9;
}

.member-status-wrap.active {
    display: block;
}

.member-status-wrap.accepted {
    background: #35de2b;
    color: #ffffff;
    border: 1px solid #35de2b;
}

.member-status-wrap.pending {
    background: #e0b700;
    color: #fff;
    border: 1px solid #e0b700;
}

.member-status-wrap.declined {
    background: #ff4b4b;
    color: #fff;
    border: 1px solid #ff0019;
}

.activity-list.active {
    background: #ddffed;
}

.nowrap-text {
    white-space: nowrap;
}

.delete-btn {
    color: #fff;
    background-color: #f06548;
    border-color: #f06548;
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}

.disable-btn {
    color: #000;
    background-color: #f5f7fa;
    border-color: #f4f7fa;
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}

.enable-btn {
    color: #fff;
    background-color: #3fcc81;
    border-color: #3fcc81;
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}

.notifications-dropdown .dropdown-menu {
    max-height: 245px;
    overflow-y: scroll;
}

.notifications-dropdown .dropdown-item {
    border-bottom: 1px solid #ebeef5;
}

.member-list.member-chat h5 a,
.chat-sidebar .member-list .remove-btn .private-chat a {
    color: #1c3faa;
    font-size: 16px;
    margin-left: 15px;
    background: none;
    border: none;
}

.member-list.member-chat h5 a:hover,
.chat-sidebar .member-list .remove-btn .private-chat a:hover {
    color: #20a960;
}

.chat-sidebar .member-list .remove-btn ul {
    margin: 0;
    padding: 0;
}

.chat-sidebar .member-list .remove-btn ul li {
    list-style-type: none;
    display: inline-block;
}

.custom-switch .custom-control-label::before,
.custom-switch .custom-control-label::after {
    top: 0;
}

.custom-control-label::before,
.custom-control-label::after {
    top: 0;
}

.project-budget-block {
    padding: 15px;
    border: 0.5px solid #e5e5e5;
    box-shadow: 2px 4px 6px 1px rgba(52, 48, 255, 0.15);
    border-radius: 5px;
}

.project-info-budget ul {
    margin: 0;
    padding: 0;
}

.project-info-budget ul li {
    list-style-type: none;
    display: inline-block;
    margin-right: 15px;

    margin-bottom: 15px;
}

.project-info-budget ul li:first-child {
    font-weight: 600;
    color: #2c3e50;
}

.project-info-budget ul li:last-child {
    margin-right: 0;
}

.project-info-budget ul:first-child {
    margin-right: 20px;
}

.project-info-budget.date-wrap ul li:nth-child(3) {
    color: #2c3e50;
}

.project-info-budget.date-wrap ul li:nth-child(2) {
    color: #28a745;
}

.project-info-budget.date-wrap ul li:last-child {
    color: #dc3545;
}

.project-info-budget h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

.custom-switch .custom-control-label::after {
    top: 2px;
}


.floating-div {
    position: fixed;
    right: 15px;
    top: 50%;
    z-index: 9;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
}

.floating-div ul {
    margin: 0;
    padding: 0;
}

.floating-div ul li {
    list-style-type: none;
    display: block;
    margin: 10px 0;
}

.floating-div ul li a {}

.hover-text {
    position: absolute;
    left: 50%;
    top: 100%;
    display: inline-block;
    white-space: nowrap;
    background: #000;
    color: #fff;
    padding: 2px 8px 4px;
    line-height: 21px;
    font-size: 12px;
    border-radius: 3px;
    margin: -20px 15px 0 0;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate(-50%, 25px);
    -moz-transform: translate(-50%, 25px);
    -ms-transform: translate(-50%, 25px);
    -o-transform: translate(-50%, 25px);
    transform: translate(-50%, 25px);
    -webkit-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.hover-text:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 50%;
    margin-top: -10px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);
}

.round-icon:hover .hover-text,
.action-btn:hover>.hover-text {
    visibility: visible;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-filter: alpha(opacity=100);
}

.icon-50 {
    width: 50px;
    height: 50px;
    font-size: 20px;
    line-height: 30px;
}

.icon-50 svg {
    margin: 0;
}

.icon-50 .fa-share-alt {
    margin: 14px 0 0;
}

.black-btn {
    background: #5c678f !important;
    color: #fff !important;

}

.black-btn:hover {
    background: #000 !important;
    color: #fff !important;
}

.form-number-input .form-control {
    position: relative;
    padding-left: 42px;
}

.number-one-field {
    background: #405189;
    color: #fff;
    text-align: center;
    width: 36px;
    height: 36px;
    border-radius: 5px 0 0 5px;
    line-height: 36px;
    position: absolute;
    top: 24px;
    left: 0;
    z-index: 3;
}

.add-invite-section-btn {
    background: #42b983;
    color: #fff;
    width: 25px;
    height: 25px;
    line-height: 12px;
    text-align: center;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 4px 6px 2px rgba(15, 0, 255, 0.09);
    margin-right: 15px;
    font-size: 10px;
}

.form-control.form-warning-field {
    border: 1px solid #f74141;
}

.spinner-loader-wrap {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.1);
    top: 25px;
    bottom: 0;
}

.spinner-loader-wrap img {
    max-width: 20px;
}

.iconed-box {
    position: relative;
    padding: 20px 40px;
    min-height: 60px;
    padding-left: 60px;
    margin: 15px 0 0;
    background: #EEEFF5;
    border: #EEEFF5 1px solid;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
    -webkit-box-shadow: 0 0px 2px rgba(34, 41, 47, 0.10);
    box-shadow: 0 0px 2px rgba(34, 41, 47, 0.10);
}

.round-icon-wrap {
    display: inline-block;
    width: 35px;
    height: 35px;
    background: #16ae5d;
    color: #fff;
    line-height: 35px;
    text-align: center;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.check-icon-wrap {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translate(0, -50%);
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.cursor-pointer {
    cursor: pointer;
}

.iconed-box:hover,
.iconed-box.selected-box {
    background: #fff;
    border-color: #3FCC81;
}

.iconed-box:hover .check-icon-wrap,
.iconed-box.selected-box .check-icon-wrap {
    color: #3FCC81;
}

.custom-switch .custom-control-label::after {
    top: 2px;
}

.custom-switch input[type=checkbox]~label {
    line-height: 22px;
}

.card-holder {
    max-width: 315px;
    background: #1d2029;
    color: #fff;
    padding: 15px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 0 0 5px 4px rgba(0, 0, 0, .07);
    -moz-box-shadow: 0 0 5px 4px rgba(0, 0, 0, .07);
    -moz-box-shadow: 0 0 5px 4px rgba(0, 0, 0, .07);
}

.card-logo-holder {
    margin: 10px 0;
}

.card-type-font {
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, .55);
}

.card-holder p {
    margin: 0;
    line-height: 22px;
}

.card-holder p small {
    color: rgba(255, 255, 255, .55);
}

.red-icon {
    background: #F3E4E4;
    color: #B10000;
}

.table-limit-input input {
    max-width: max-content;
}

.table-limit-input .hour-limit-input {
    max-width: 50px;
}

.input-warning {
    border: 1px solid #d11609;
    background: #ffe4e4;
}


.badge.text-green {
    color: #41b883;
}

.badge.text-orange {
    color: #f3a149;
}

.badge.text-red {
    color: #f10000;
}

.invoice-btn {
    padding: 5px 10px;
    border-radius: 5px;
    background: #1d316e;
    color: #fff;
    outline: none;
    border: 0;
    transition: 0.3s all linear;
}

.invoice-btn:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(46, 56, 70, 0.08);
    transform: scale(1.05);
}

.invoice-request-send svg {
    margin-left: 10px;
}

.account-pending-invoice {
    background: #fef8e4;
}

.btn.default-btn.outline.draft-btn {
    color: #dc0000;
    border: 1px solid #dc0000;
}

.btn.default-btn.outline.draft-btn:hover {
    background: #fef8e4;
}

.title-status-wrap {
    position: relative;
}


.table-input-checked-wrap {
    position: relative;
}

.input-checked-round-wrap {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #ccffce;
    position: absolute;
    top: -5px;
    left: -5px;
    border-radius: 50%;
    border: 0.5px solid #21b466;
}

.input-checked-round-wrap svg {
    color: #21b466;
    font-size: 10px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.search-wrap .form-control {
    font-size: 12px;
}

.edit-control {
    position: relative;
    padding-right: 25px;
}

.edit-control .form-control {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: #364a63;
    padding: 4px 10px;
    height: auto;
}

.save-icon {
    position: absolute;
    top: 7px;
    right: 0;
    cursor: pointer;
    color: #16ae5d;
}

.save-icon:hover {
    color: #069b4b;
}

.clear-ico {
    position: absolute;
    top: 015px;
    right: 20px;
    cursor: pointer;
}

.search-wrap .clear-ico svg {
    color: #ff0000;
}

.sticky-md-top {
    position: -webkit-sticky;
    position: sticky;
    top: 55px;
    z-index: 1020;
}

.sticky-header {
    box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.2);
    background: #fff;
    padding: 10px 15px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.action-btn {
    font-size: 14px;
    color: #526484;
    position: relative;
    display: inline-block;
    padding: 0.25rem 0rem;
}

.action-btn:before {
    position: absolute;
    z-index: -1;
    height: 20px;
    width: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    content: '';
    background-color: #d3d9e8;
    border-radius: 50%;
    opacity: 0;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.action-btn:hover:before {
    opacity: 1;
    height: 30px;
    width: 30px;
}

.action-btn:hover {
    color: #526484;
}

.sticky-header h5 {
    line-height: 39px;
}

.highlighted-text {
    background: #fdddaa;
}

.file-name p.font-weight-bold {
    color: #364a63;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
}

.task-list {}

.task-list ul {
    margin: 0;
    padding: 0;
}

.task-list ul li {
    list-style-type: none;
    display: block;
    color: #526484;
    font-size: 12px;
    font-weight: 400;
    margin: 6px 0;
}

.accordion-wrap {}

.accordion-wrap .form-wrap .custom-control-label {
    font-weight: 500;
    line-height: 18px;
    display: block;
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 75%;
    font-weight: 600;
    vertical-align: text-top;
}

.share-block {
    position: relative;
}

.absolute-text {
    position: absolute;
    top: -18px;
    left: 8px;
    display: inline-block;
    background: #fff;
    padding: 4px 10px;
}

.absolute-text small {
    font-weight: 600;
}

.accordion-wrap {}

.accordion-wrap .card {
    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 4px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.accordion-wrap .btn-link {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    line-height: 18px;
    background: #3fcc81;
    margin: 0;
    padding: 12px 15px;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
}
.accordion-wrap .btn-link:hover{
    background: #25c26f;
}
.accordion-wrap .btn-link .form-check-input {
    margin-top: 0;
    margin-left: 0;
    position: relative;
    vertical-align: sub;
    margin-right: 5px;
}

.accordion-wrap .card-header .btn-link:after {
    position: absolute;
    right: 10px;
    top: 18px;
    content: "";
    font-size: 34px;
    line-height: 20px;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-right-style: solid;
    border-right-width: 2px;
    content: "";
    display: inline-block;
    height: 12px;
    width: 12px;
    border-color: #fff;
    transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    -o-transform: rotate(225deg);
}
.accordion-wrap .card-header .btn-link.collapsed:after {
    top: 13px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

.accordion-wrap p {
    font-size: 12px;
    line-height: 24px;
}

.multiselect-placeholder,
.multiselect-option {
    font-size: 14px;
}

.shadowed-box {
    box-shadow: 0 0px 3px rgba(46, 56, 70, 0.17);
}

.member-box {
    position: relative;
    padding: 10px 15px;
    padding-left: 60px;
}

.small-icon-wrap {
    font-size: 12px;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    background: #cdf5e4;
    color: #3f6e5a;
    position: absolute;
    top: 12px;
    left: 15px;
    text-align: center;
}

.image-gallery-wrap {
    position: relative;
}

.nav-arrows {
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #5c678f;
    background: #fff;
    border-radius: 50%;
    border: 1px solid #e6ebf1;
    box-shadow: 0px 2px 3px rgba(4, 4, 7, 0.10);
    -webkit-box-shadow: 0px 2px 3px rgba(4, 4, 7, 0.10);
    -moz-box-shadow: 0px 2px 3px rgba(4, 4, 7, 0.10);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.previous-btn {
    left: 15px;
}

.next-btn {
    right: 15px;
}

.gallery-image {
    padding: 3px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    box-shadow: rgba(23, 43, 77, 0.2) 0px 0px 1px, rgb(23, 43, 77, 0.2) 0px 0px 1px;
}

.gallery-image img {
    width: 100%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.nav-arrows:hover {
    background: #069b4b;
    color: #fff;
}

.pin-tag {
    width: 20px;
    height: 16px;
    z-index: 99;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    display: inline-block;
    cursor: pointer;
    color: #98725B;
    margin-bottom: 10px;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.pin-tag:after {
    position: absolute;
    content: '';
    top: 0;
    left: -20px;
    z-index: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 25px 0;
    border-color: transparent #FEF1CF transparent transparent;
    line-height: 0px;
    _border-color: #000000 #FEF1CF #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

.pin-tag svg {
    position: relative;
    z-index: 1;
    margin: 2px 0 0 3px;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
}

.pinned,
.pin-tag:hover {
    color: #fff;
}

.pinned.pin-tag:after,
.pin-tag:hover:after {
    border-color: transparent #3FCC81 transparent transparent;
    line-height: 0px;
    _border-color: #000000 #3FCC81 #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

.pinned svg,
.pin-tag:hover svg {
    transform: rotate(-0deg);
    -webkit-transform: rotate(-0deg);
    -moz-transform: rotate(-0deg);
    -ms-transform: rotate(-0deg);
    -o-transform: rotate(-0deg);
}

.dashed-bordered-card {
    border: #B8C0CD dashed 1px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.card-header-wrap {
    position: relative;
    margin: 15px 0 0 0;
    padding: 0 0 0 80px;
    border-bottom: #DFDFDF 1px solid;
}

.role-wrap {
    position: absolute;
    top: 0;
    left: 15px;
    width: 60px;
    text-align: center;
    padding: 8px 5px;
}

.project-header {
    min-height: 60px;
    padding-top: 5px;
}

.card-body-wrap {
    padding: 15px 15px;
    max-height: 200px;
    overflow-y: auto;
}

.type-holder.dark-grey-tag {
    background: #d3d9e8;
    color: #526484;
}

.card.with-actiondropdown .card-header-wrap {
    padding-right: 50px;
    min-height: 75px;
}

.create-url {
    color: #526484;
    font-weight: 600;
    font-size: 12px;
}

.small-round-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    background: #EEEFF5;
    text-align: center;
    color: #526484;
    border-radius: 50%;
}

.info-box {
    padding: 10px;
    position: relative;
    box-shadow: 0 0px 3px rgba(0, 0, 0, 0.15);
    padding-left: 40px;
    margin-bottom: 15px;
}

.icons-type-wrap {
    display: inline-block;
    color: #343a40;
    text-align: center;
    font-size: 14px;
    border-radius: 4px;
    position: absolute;
    top: 15px;
    left: 10px;
}

.info-box h5 {
    font-size: 12px;
    line-height: 16px;
}

.info-box p {
    color: #AAAAAA;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.feed-block {
    position: relative;
}

.feed-block:before {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 20px;
    left: 20px;
    border-left: 1px solid #B8C0CD;
}

.green-btn {
    display: inline-block;
    background: #3FCC81;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 22px;
}

.green-btn:hover {
    background: #24bc6b;
    color: #fff;
}

.channel-card-wrap {
    margin-bottom: 10px;
    border: #BCBCBC 1px solid;
    position: relative;
    padding: 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.10);
    padding-left: 40px;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.iconn-holder {
    background: #526484;
    width: 22px;
    height: 22px;
    color: #fff;
    line-height: 23px;
    text-align: center;
    font-size: 10px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
}

.channel-card-wrap h6 {
    font-size: 12px;
    color: #182948;
    font-weight: 700;
}

.sub-channel-wrap p {
    font-size: 12px;
    color: #3D3D3D;
}

.sub-channel-wrap {
    position: relative;
    padding-left: 40px;
    font-weight: 500;
}

.sub-icon-wrap {
    color: #3D3D3D;
    position: absolute;
    top: 5px;
    left: 15px;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}

.channel-card-wrap:before {
    position: absolute;
    content: '';
    left: 20px;
    top: 30px;
    width: 1px;
    height: 16px;
    background: #B8C0CD;
    z-index: 0;
}

.channel-card-wrap:after {
    position: absolute;
    content: '';
    left: 20px;
    top: 46px;
    width: 30px;
    height: 1px;
    background: #B8C0CD;
}

.channel-card-wrap:hover {
    background: rgb(221 232 255);
}

.same-ht-img {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.same-ht-img img {
    height: 100%;
    width: 100%;
    object-fit: fill;
    max-width: 100%;
}

.iconed-box-wrap {
    position: relative;
    padding-left: 30px;
    min-height: 20px;
}

.small-fig-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.small-fig-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.reply-block {
    padding-left: 10px;
    border-left: #ccc 4px solid;
}

.yellow-tag {
    background: #f5c63a;
}

.red-tag {
    background: #F35369;
}

.card-title a {
    color: #3fcc81;
}

.card-title a:hover,
.hovered-div:hover .card-title a {
    color: #3ca36c;
}

.remove-image.share-icon {
    right: 65px;
}

.change-image-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.change-image-wrapper a {
    display: block;
    background: rgba(0, 0, 0, 0.60);
    text-align: center;
    padding: 5px 15px;
    color: #fff;
    font-size: 20px;
}

.avatar-img:hover .change-image-wrapper {
    opacity: 1;
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.upload-btn {}

.upload-btn-wrapper input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.text-color {
    position: relative;
}

.below-line {
    position: absolute;
    bottom: 2px;
    width: 14px;
    height: 3px;
    left: 7px;
    background: #000;
}

.text-color input {
    background: none;
    border: none;
    padding: 0;
    width: 24px;
    height: 24px;
    min-height: 24px;
    display: inline-block;
    vertical-align: text-top;
    margin: 0;
    position: relative;
    top: 0;
}

.absolute-loader-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background: #fff;
    z-index: 9;
}

.positioned-btn {
    position: absolute;
    top: 10px;
    right: 10px;
}

.responsive-iframe-wrap {
    width: 100%;
}

.docu-iframe {
    height: 800px;
    width: 100%;
}

.responsive-iframe-wrap iframe,
.responsive-iframe-wrap>div {
    width: 100% !important;
    height: 100% !important;
}

.doc-card h4 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #303E67;
    margin: 0 0 0;
}

.doc-card h4 a {
    color: #303E67;
}

.doc-card h4 a:hover {
    color: #000;
}

.doc-card p {
    font-size: 12px;
}

.pdf-wrapper {
    height: 300px;
    position: relative;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.pdf-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.view-large-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    font-size: 30px;
    opacity: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.view-large-wrap a {
    color: #fff;
}

.pdf-wrapper:hover .view-large-wrap {
    opacity: 1;
}

.tutorial-editor {}

.tutorial-editor .enter-message-wrap {
    min-height: 125px;
}

.sb-sidenav-menu .nav-link[data-toggle].collapsed:after {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 26px;
    content: " ▾";
}

.sb-sidenav-menu .nav-link[data-toggle]:not(.collapsed):after {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 26px;
    content: " ▴";
}

.h-400 {
    height: 400px;
}

.filter-wrap .multiselect__tags,
.filter-wrap .multiselect {
    min-height: 30px;
}

.filter-wrap .multiselect__placeholder {
    font-size: 12px;
}

.filter-wrap .multiselect__select {
    height: 30px;
    padding: 0px 8px;
}

.filter-wrap .multiselect__tags {
    padding: 4px 40px 0 8px;
}

.filter-wrap {}

.filter-wrap .multiselect__option,
.filter-wrap .multiselect__input,
.filter-wrap .multiselect__single {
    font-size: 12px;
}

.note-wrap {
    line-height: 24px;
}

.bordered-tab-wrap {}


.bordered-tab-wrap .nav-tabs .nav-link {
    color: #AAAAAA;
    font-size: 12px;
    border: none;
    border-radius: 0;
    padding: 12px 6px;
    font-weight: 600;
    background: none;
    position: relative;
    border-top: transparent 2px solid;
}

.bordered-tab-wrap .nav-tabs .nav-link.active,
.bordered-tab-wrap .nav-tabs .nav-item.show .nav-link,
.bordered-tab-wrap .nav-tabs .nav-link:hover,
.bordered-tab-wrap .nav-tabs .nav-link:focus {
    color: #526484;
    background: none;
}

.bordered-tab-wrap .nav-tabs .nav-link.active .tab-icon,
.bordered-tab-wrap .nav-tabs .nav-item.show .nav-link .tab-icon,
.bordered-tab-wrap .nav-tabs .nav-link:hover .tab-icon,
.bordered-tab-wrap .nav-tabs .nav-link:focus .tab-icon {
    color: #3FCC81;
}

.bordered-tab-wrap .tab-content>.tab-pane {
    border: none;
    border-top: 1px solid #DFDFDF;
    padding: 0 10px;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.bordered-tab-wrap .nav-tabs .nav-link.active {
    border-color: #3FCC81;
}

.bordered-tab-wrap .nav-tabs .nav-link::before {
    position: absolute;
    content: '';
    top: 5px;
    bottom: 5px;
    right: 0;
    width: 1px;
    background: #D1D1D1;
}

.bordered-tab-wrap .nav-tabs .nav-item:last-child .nav-link:before {
    display: none;
}

.chat-card-header {
    position: relative;
    margin: 0 0 20px;
    padding-top: 5px;
}

.chat-card-header.with-actiondropdown {
    padding-right: 55px;
}

.channel-icon {
    position: absolute;
    top: 10px;
    left: 0;
    margin-bottom: 0;
}

.chat-card-header.with-actiondropdown .file-actions {
    right: 0;
    top: 0;
}

.bg-light .file-actions .dropdown-toggle {
    background: #fff;
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.10);
}

.name-wrap {
    width: 120px;
}

.no-channel-row {
    width: 75px;
}

.phase-row,
.email-row {
    width: 200px;
    line-height: 20px;
}

.form-list {
    position: relative;
    padding-left: 35px;
    min-height: 45px;
    margin-bottom: 30px;
}

.form-list p {
    font-size: 12px;
}

.fixed-ht-500 {
    max-height: 500px;
    min-height: 500px;
    overflow-y: scroll;
}

.inline-items.align-middle ul li {

    vertical-align: middle;

}



.iconed-holder {}

.bordered-icon {
    color: #9EB8E3;
    width: 40px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #F3F6F9;
    border: 1px solid #DEEFFF;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;

}



.red-bordered-icon {
    color: #f06548;
    border-color: #ffd7ce;
    background-color: #fff1f0;
}

.green-bordered-icon {
    color: #29b34a;
    background-color: #ecfaf2;
    border-color: #beead1;
}

.payer-email-list-display {}

.payer-email-list-display ul {
    margin: 0;
    padding: 0;

}

.payer-email-list-display ul li {
    list-style-type: none;
    display: inline-block;
    margin: 0 10px 5px 0;
}

.media-holder {
    height: 150px;
    margin-bottom: 10px;
}

.media-holder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.signature-wrap {
    max-width: 200px;
    border: #ccc 1px solid;
    padding: 10px;
    height: 150px;
    border-radius: 4px;
}

.signature-wrap img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}

.inactive-member {

    filter: blur(0.5px);

    -webkit-filter: blur(0.5px);

}



.expandable-table .table-responsive.tableFixHead {

    max-height: inherit;

    overflow-y: scroll;

}

.fixed-ht-table {

    overflow-y: auto;

    /* make the table scrollable if height is more than 200 px  */

    height: 240px;

}



.tableFixHead thead th {

    position: sticky;

    /* make the table heads sticky */

    top: 0px;

    /* table head will be placed from the top of the table and sticks to it */

}



.unit-dropdown .dropdown-menu {

    max-height: 100px;

    overflow-y: scroll;

    right: 0 !important;

    min-width: 100% !important;

}

.dropdown-item {

    position: relative;

}

.unit-dropdown .dropdown-item {

    position: relative;

}



.with-actions {

    padding-right: 20px;

}

.dropdown-actions {

    position: absolute;

    top: 10px;

    right: 15px;

}



.actions-text {}

.item-card {}

.item-card .card-header {

    padding: 0;

    margin-bottom: 0;

    background: none;

    border: none;

}



.item-card .card-header h2 {

    margin: 0;

    line-height: 18px;

}

.item-card .accordion-btn {

    color: #526484;

    font-size: 14px;

    font-weight: 600;

    padding: 15px 15px;

    padding-left: 35px;

    position: relative;

}



.item-card .accordion-btn::before {

    position: absolute;

    top: 14px;

    left: 15px;

    content: '-';

    font-size: 16px;

    font-weight: 600;

    color: #526484;

}



.item-card .accordion-btn.collapsed:before {

    content: '+';

}



.item-card .card-header:first-child {

    border-radius: 0;

}

.actions-list {

    margin: 0;

    padding: 0;

}



.actions-list li {

    list-style-type: none;

    margin-left: 10px;

}



.actions-list li a {

    font-size: 16px;

}

.items-dropdown {

    width: 200px;

}

.items-dropdown .dropdown-toggle::after {

    position: absolute;

    top: 13px;

    right: 10px;

}

.item-desc {

    line-height: 22px;
    font-size: 12px;
    overflow-x: clip;

}

.items-dropdown-menu {

    width: 100%;

}

.items-scroll-box {

    max-height: 175px;

    overflow-y: scroll;

}

.items-lists {

    padding: 15px 15px;

}

.items-lists h6 {

    font-weight: 600;

}

.items-lists p {

    font-size: 12px;

    line-height: 20px;

    margin: 0;

}

.desc-wrap {

    width: 330px;

}

.desc-wrap p {

    line-height: 20px;

}

.sortable-item {

    cursor: move;

}

.invoice-logo {

    max-width: 200px;

    margin: 0 0 35px;

}

.invoice-holder p {

    line-height: 24px !important;

}

.invoice-holder p {

    line-height: 24px !important;

}

.choose-item-dropdown.unit-dropdown .dropdown-menu {

    max-height: inherit;

    overflow-y: inherit;

}

.choose-item-dropdown .items-scroll-box {

    max-height: 90px;

    overflow-y: scroll;

}

.company-logo-wrap {

    max-width: 200px;

}

.company-logo-holder {

    width: 70px;

    height: 70px;

    margin-right: 15px;

    border-radius: 50%;

}

.company-logo-holder img {

    object-fit: contain;

    height: 100%;

    width: 100%;

}

.signature-wrap-sm {
    max-width: 140px;
    height: 55px;
}

.modal-wrap .modal-body .contract-desc p {

    line-height: 24px;

}

.dropdown-toggle {

    position: relative;

}

.dropdown-toggle::after {

    position: absolute;

    top: 13px;

    right: 10px;

}

.svg-icon-holder {

    max-width: 20px;

}

.action-icons {

    color: #526484;

}

.action-icons svg {

    color: #526484;

}

.read-only-box {

    background: #e9ecef;

    border: 1px solid #ced4da;

    border-radius: 0.25rem;

    padding: 10px 10px;

    font-size: 12px;

}

.phase-cards-holder {

    max-height: 500px;

    min-height: 500px;

    overflow-y: scroll;

    overflow-x: hidden;

}

.unit-dropdown .dropdown-toggle {

    font-size: 14px;

    white-space: break-spaces;

    color: #495057;

    font-weight: 600;

}


.resizer {

    position: absolute;

    top: 0;

    right: -8px;

    bottom: 0;

    left: auto;

    width: 16px;

    cursor: col-resize;

}

.with-badge-list ul {

    margin: 0;

    padding: 0;

}

.with-badge-list ul li {

    list-style-type: none;

    display: block;

    position: relative;

    padding: 11px 15px;

    padding-right: 100px;

}

.with-badge-list ul li .dropdown-item {

    display: inline-block;

    width: auto;

    padding: 0;

    font-size: 14px;

}

.with-badge-list ul li .dropdown-item:hover {

    color: #28a745;

    background: none;

}

.with-badge-list .badge {

    position: absolute;

    top: 9px;

    right: 15px;

}

.error-field {

    border-width: 2px !important;

}

.mb-3.border-bottom:last-child {

    border-bottom: none !important;

}

.list-accordion .card {

    margin-bottom: 3px;

}

.list-accordion .accordion>.card>.card-header {

    border: none;

    background-color: rgb(238 250 255);

}

.list-accordion .btn-link {

    color: #526484;

    font-size: 14px;

    font-weight: 600;

    padding: 5px 15px;

    padding-left: 25px;

    position: relative;

    text-decoration: none;

    vertical-align: text-top;

    line-height: 30px;

}

.list-accordion .btn-link::before {

    position: absolute;

    font-size: 16px;

    color: #526484;

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    content: '\f0d7';

    top: 5px;

    left: 10px;

}



.list-accordion .btn-link.collapsed:before {

    content: '\f0da';

}

.addphasemodal-wrap .choose-item-dropdown.unit-dropdown .dropdown-menu {

    transform: none !important;

    margin: 36px 0 0;

}

.righ-actions {

    position: relative;

    padding-right: 40px;

}

.right-position {

    position: absolute;

    right: 0;

    top: 0;

}

.task-list-wrap {

    max-height: 485px;

    overflow-y: scroll;

    overflow-x: hidden;

}

.task-card {

    background: #fff;

}

.task-card:nth-child(odd) {

    background: #f5f5f5;

}



.month-dropdown {}

.btn-pill {

    padding: 5px 15px;

    border-radius: 40px;

    -webkit-border-radius: 40px;

    -moz-border-radius: 40px;

    -ms-border-radius: 40px;

    -o-border-radius: 40px;

}

.month-dropdown .btn-pill {

    padding-left: 15px;

    padding-right: 26px;

}

.sb-nav-fixed .month-dropdown .dropdown-menu {

    min-width: 150px;

    border-radius: 5px;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -ms-border-radius: 5px;

    -o-border-radius: 5px;

}

.sb-nav-fixed .month-dropdown .dropdown-item {

    padding: 4px 15px;

}

.prev-btn,
.next-btn {

    display: inline-block;

    color: #868686;

    width: 30px;

    height: 30px;

    line-height: 30px;

    border: #dee2e6 1px solid;

    text-align: center;

    border-radius: 50%;

}

.calendar-heading {

    font-size: 16px;

    font-weight: 700;

    color: #526484;

}

.calendar-toast p {

    font-size: 12px;

    line-height: 20px;

    margin: 0 0 5px;

    color: #526484;

}

.icon-holder {

    font-size: 14px;

}

.footer-actions {

    font-size: 12px;

}

.footer-actions a {

    color: #526484;

}

.dropdown-menu.calendar-toast i,
.footer-actions a i,
.footer-actions a svg {

    color: #000;

}

.footer-actions a:hover {

    color: #000;

}

.color-select-wrap {}

.color-eclipse {

    display: inline-block;

    width: 18px;

    height: 18px;

    background: #039be5;

    border-radius: 50%;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -ms-border-radius: 50%;

    -o-border-radius: 50%;

    color: #fff;

    line-height: 18px;

    text-align: center;

    transition: .2s all linear;

    -webkit-transition: .2s all linear;

    -moz-transition: .2s all linear;

    -ms-transition: .2s all linear;

    -o-transition: .2s all linear;

}

.color-select-wrap .dropdown-toggle {

    padding-right: 25px;

}

.color-select-wrap .dropdown-toggle::after {
    top: 7px;
    border-width: 5px;
}

.color-select-wrap .dropdown-menu {
    min-width: 60px !important;
    -webkit-box-shadow: 0 0px 6px rgba(34, 41, 47, 0.4);
    box-shadow: 0 0px 6px rgba(34, 41, 47, 0.4);
    border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    -ms-border-radius: 3px !important;
    -o-border-radius: 3px !important;
}

.color-select-wrap .dropdown-item {
    display: inline-block;
    width: auto;
    vertical-align: text-top;
    padding: 3px 5px;
}

.color-select-wrap .dropdown-item:hover {
    background: none;
}

.dropdown-item .color-eclipse:hover {
    width: 20px;
    height: 20px;
    line-height: 20px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .2);
}

.calendar-toast .close {
    font-size: 15px;
    opacity: 1;
}

/* .signature-area {

    height: 520px;

} */

.left-colored-border {

    border-left: 6px solid #a3d39c;

}

.vh-height {
    max-height: calc(100vh);
    min-height: calc(100vh);
    overflow-y: scroll;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.kanban-wrap {
    background: #f5f5f5;
}

.channel-card {
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.kanban-wrap .channel-card:hover {
    cursor: move;
}

.sb-nav-fixed .navbar-nav .nav-link.verigy-tag {
    background: #3fcc81;
    color: #fff;
    font-weight: 500;
    line-height: 14px;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.sb-nav-fixed .navbar-nav .nav-link.verigy-tag:hover {
    background: #3fcc81;
    color: #000;
}

.input-group-text {

    font-size: 12px;
}

.multiselect__input,
.multiselect__single {
    font-size: 12px;
}

.multiselect__option {
    font-size: 12px;
}

.multiselect__content-wrapper {
    width: 300px;
}

.with-icon-control .form-control {
    padding-right: 40px;
}

.chat-inline-list {}

.chat-bubble-btn {
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #3fcc81;
    color: #3fcc81;
    padding: 5px 10px;
    font-size: 12px;
    display: inline-block;
    position: relative;
    padding-right: 30px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.chat-bubble-btn:hover {
    color: #fff;
    background-color: #3fcc81;
}

.chat-bubble-btn:hover .link-icon {
    color: #fff;
}

.chat-inline-list ul {
    margin: 0;
    padding: 0;
}

.chat-inline-list ul li {
    display: inline-block;
    position: relative;
    margin: 5px 0 0;
    list-style-type: none;
}

.view-more-btn {
    font-size: 14px;
    background-color: #3fcc81;
    border: 1px solid #3fcc81;
    color: #ffffff;
    padding: 5px 10px;
    font-size: 12px;
    display: inline-block;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.view-more-btn:hover {
    color: #fff;
    background-color: #34bc73;
}

.gallery-wrap {}

.gallery-wrap.custom-scroll {
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: clip;
}

.gallery-wrap .same-ht-img {
    height: 115px;
}

.unpinned-badge {
    color: #98725B;
    background: #FEF1CF;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.pinned-badge,
.unpinned-badge:hover {
    background: #3FCC81;
    color: #fff;
}

.unpinned-badge i,
.unpinned-badge svg {
    position: relative;
    z-index: 1;
    margin: 2px 3px 0 3px;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
}

#f1_container {
    position: relative;
    margin: 0 auto;
    z-index: 1;
}

#f1_container {
    perspective: 1000;
}

#f1_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
}

input.ossm-input[type=checkbox]:checked~#f1_card {
    transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.face {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.onclick-text {
    cursor: pointer;
    transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}

.onclick-text:hover {
    color: #ee3443;
}

.face.back {
    display: none;
    transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    box-sizing: border-box;
}

input.ossm-input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
    /* For mobile, it's typically better to position checkbox on top of clickable
 area and turn opacity to 0 instead. */
}

input.ossm-input[type=checkbox]:checked~#f1_card .face:nth-child(1) {
    display: none;
}

input.ossm-input[type=checkbox]:checked~#f1_card .back.face {
    display: block;
}

.or-col {
    margin: 10px 0;
    position: relative;
}

.or-col:after {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 50%;
    background: rgba(0, 0, 0, 0.1);
    height: 1px;

}

.or-col span {
    display: inline-block;
    background: #fff;
    padding: 5px 10px;
    position: relative;
    z-index: 1;
}

.input-with-icon {
    position: relative;
}

.input-with-icon .form-control {
    /* padding-right: 100px; */
}

.input-icon {
    position: absolute;
    top: 12px;
    right: 15px;
}

.change-text {
    display: inline-block;
    padding: 3px 9px;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    background: #3fcc81;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px;
    border: #fff 1px solid;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

.change-text:hover {
    color: #fff;
    background: #18a55a;
}

.mic-icons {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    line-height: 30px;
    border: 2px solid #5c678f;
    z-index: 1;
    background: #FFFFFF;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}


.mic-icons .fa {
    font-size: 18px;
}

.mic-icons .svg-inline--fa {
    width: auto;
    height: 12px;
}

@-webkit-keyframes ripple {
    from {
        opacity: 1;
        transform: scale3d(0.75, 0.75, 1);
    }

    to {
        opacity: 0;
        transform: scale3d(2, 2, 1);
    }
}

@keyframes ripple {
    from {
        opacity: 1;
        transform: scale3d(0.75, 0.75, 1);
    }

    to {
        opacity: 0;
        transform: scale3d(2, 2, 1);
    }
}

.ripple-effect-icon {
    position: relative;
}

.ripple-effect-icon {}

/* .ripple-effect-icon::after {
    opacity: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    height: 100%;
    width: 100%;
    background: #0460CC;
    border-radius: 100%;
    -webkit-animation-name: ripple;
    animation-name: ripple;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
    animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
} */

.ripple-effect-icon .fa,
.ripple-effect-icon .svg-inline--fa {
    color: #d93025;
}

.small-btn svg {
    width: 15px;
}

.checklist {}

.checklist ul {
    margin: 0;
    padding: 0;
}

.checklist ul li {
    margin: 0 0 10px;
    line-height: 24px;
}

.small-btn {
    display: inline-block;
    background: #3fcc81;
    color: #fff;
    padding: 4px 5px;
    font-size: 12px !important;
    line-height: 16px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.small-btn:hover {
    background: #27ab65;
    color: #fff;
}

.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
}

.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.custom-modal-dialog {
    position: relative;
    width: auto;
    max-width: 480px;
    margin: 50px auto;
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
    transform: translate(0, -50px);
    -webkit-transform: translate(0, -50px);
    -moz-transform: translate(0, -50px);
    -ms-transform: translate(0, -50px);
    -o-transform: translate(0, -50px);
}

.custom-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem;

}

.custom-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}

.custom-modal-title {
    color: #526484;
    font-size: 12px;
    font-weight: 700;
    line-height: 23px;
    font-size: 20px;
    margin: 0;
}

.custom-modal-close {
    margin-top: -12px;
    color: #dc4c64;
    opacity: 1;
    font-size: 20px;
    margin: 0;
    padding: 0;
}

.custom-modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: calc(0.3rem - 1px);
    border-bottom-left-radius: calc(0.3rem - 1px);
}

.h-100vh {
    height: 100vh;
}

.login-tab-wrap .nav-link {
    padding: 12px 15px;
    font-weight: 600;
    margin-right: 5px;
    background: #d7f0e3;
    border: #c8d2cc 1px solid;
    color: #01602d;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.login-tab-wrap .nav-tabs .nav-link.active,
.login-tab-wrap .nav-tabs .nav-item.show .nav-link {
    background: #3fcc81;
    color: #fff;
    border: #3fcc81 1px solid;Chat Channels (12)
     Create Channel
    Phase BCM Bhatt , Nepal FirstHello 67View more (9+)
    +1
    project : Project B 
    Your Role : Owner
    
    sdfsafdsa
    
    Chat Channels (2)
     Create Channel
    Channel FirstCM Bhatt,CM Bhatt
    
    project : Nepal absdjhdfsdf 
    Your Role : Owner
    
    Chat Channels (1)
     Create Channel
    Channel A
    
    project : Project Jul 3 
    Your Role : Owner
    
    sdfsdfsdf
    
    Chat Channels (1)
     Create Channel
    New Channel for July 3
    
    project : Hello Test Cdsf 
    Your Role : Owner
    
    Chat Channels
     Create Channel
    No Channel Yet!
    
    
    project : Project X 
    Your Role : Owner
    
    Chat Channels
     Create Channel
    No Channel Yet!
    
    
    
}

.tab-content {
    padding: 10px 0;
}

.send-icon-wrap {
    color: #03b356;
    font-size: 12px;
    position: absolute;
    bottom: -5px;
    right: 0px;
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 15px;
    font-size: 8px;
    border: #fff 1px solid;
    text-align: center;
    color: #fff;
    background: #03b356;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.members-list a .send-icon-wrap {
    position: absolute;
    bottom: -5px;
    right: 0px;
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 15px;
    font-size: 8px;
    border: #fff 1px solid;
    text-align: center;
    color: #fff;
    background: #03b356;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.timeline-text {
    position: relative;
    text-align: center;
}

.timeline-text.latest-message {
   position: absolute;
   bottom: 180px;
   left: 50%;
   transform: translateX(-50%);
}

.timeline-text::before {
    position: absolute;
    content: '';
    top: 50%;
    height: 1px;
    left: 0;
    width: 100%;
    border-top: rgba(0, 0, 0, 0.1) 1px solid;
}

.timeline-text span {
    display: inline-block;
    background: #fff;
    color: #6e6e6e;
    position: relative;
    font-size: 14px;
    font-weight: 600;
    padding: 5px 15px;
    box-shadow: 0 0px 3px rgba(30, 32, 37, .3);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

a.btn {
    text-transform: capitalize;
}

a {
    text-transform: capitalize;
}

.to-upper {
    text-transform: capitalize;
}

.uppercase-text {
    text-transform: uppercase;
}

.lowercase-text {
    text-transform: lowercase;
}

.send-tag {
    display: inline-block;
    padding: 1px 8px;
    background: #eaeaea;
    font-size: 10px;
    border: #d0d0d0 1px solid;
    border-radius: 20px;
}

.tab-content>.tab-pane.two-col-tab {
    background: #F5F5FF;
}

.left-col-wrap {
    border-right: #D3D3FF 1px solid;
}

.right-col-wrap {
    width: 86px;


}

.vertical-nav {}

.vertical-nav ul {
    margin: 0;
    padding: 0;
}

.vertical-nav ul li {
    list-style-type: none;
    display: block;
    margin: 25px 0 0;
    font-size: 12px;
    line-height: 18px;
}

.vertical-nav ul li a {
    color: #526484;
}

.vertical-nav ul li a span {
    margin: 5px 0 0;
}

.vertical-nav ul li i {
    font-size: 14px;
}

.vertical-nav ul li a:hover {
    color: #16ae5d;
}

.acc-v2 {}

.acc-v2.accordion-wrap .btn-link {
    color: #000;
    font-size: 12px;
    background: #DEEFFF;
    border: #BBD3FA 1px solid;
    padding-right: 26px;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.acc-v2 .bg-light {
    background-color: #f5f5f5 !important;
}

.vertical-tab-wrap {}

.vertical-tab-wrap .nav-link {
    border-bottom: 1px solid #DFDFDF;
    color: #526484;
    font-weight: 500;
    text-align: left;
    padding: 20px 15px;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.vertical-tab-wrap .nav-link:hover,
.vertical-tab-wrap .nav-link.active {
    background: #3FCC81;
    color: #fff;
}

.fw-600 {
    font-weight: 600;
}

.offcanvas-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #526484;
}

.fs-12 {
    font-size: 12px;
}

.form-list-card {}

.form-list-card h6 {
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #526484;
}

.form-list-card p {
    font-size: 10px;
    line-height: 15px;
    color: #8497B9;
}

.msg-header .icon:not(.icon-c-s):not(.icon-custom-size) {
    width: auto;
    height: auto;
    font-size: 45px;
}

.no-scroll-body {
    overflow: hidden;
}

.no-scroll-body .chat-body {
    height: calc(100vh - 280px);
    padding-bottom: 200px;
}

.reply-chat-body {
    height: calc(100vh - 316px);
    padding-bottom: 195px;
    overflow-y: auto;
    background: #ffffff;
}

.timeline-sm {
    padding-left: 110px
}

.timeline-sm .timeline-sm-item {
    position: relative;
    padding-bottom: 20px;
    padding-left: 40px;
    border-left: 2px solid #dee2e6
}

.timeline-sm .timeline-sm-item:after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: -7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #526dee
}

.timeline-sm .timeline-sm-item .timeline-sm-date {
    position: absolute;
    left: -104px
}

.image-list-wrap {
    max-height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: calc(100vh - 560px);
}

.resizable-column {
    white-space: nowrap;
    position: relative;
    user-select: none;
}

.resizer {
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
    height: 100%;
    cursor: ew-resize;
    background-color: transparent;
}

.tab-height {
    height: 50px;
}

.btn-size {
    font-size: 18px;
}

.fixed-height-canvas {
    height: 100vh;
    overflow-y: scroll;
}

p.size {
    text-align: left;
    margin: 0;
    font-size: 12px;
}

.carousel__wrapper {
    position: relative;
}

.carousel__wrapper .loading-overlay {
    display: block;
}

.carousel__wrapper .carousel__prev,
.carousel__wrapper .carousel__next {
    background: rgb(22 174 93);
    color: #ffffff;
}

.carousel__wrapper .carousel__next--disabled,
.carousel__wrapper .carousel__prev--disabled {
    opacity: 1;
}

.carousel__wrapper .carousel__slide {
    margin: 0 6px;
}

.image-hover-icon {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    font-size: 14px;
    background: #000;
    opacity: 0;
    transition: .2s all linear;
    -webkit-transition: .2s all linear;
    -moz-transition: .2s all linear;
    -ms-transition: .2s all linear;
    -o-transition: .2s all linear;
}

.small-img-wrap:hover .image-hover-icon {
    opacity: 1;
}

.small-multiselect-wrap {}

.small-multiselect-wrap .multiselect-input {
    min-height: 30px;
}

.small-multiselect-wrap .multiselect-tags {
    margin-top: 4px;
}

.small-multiselect-wrap .is-tags .multiselect-search input {
    margin: 0;
    font-size: 12px;
    padding: 0;
}

.small-multiselect-wrap .multiselect-clear {
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
}

.small-multiselect-wrap .multiselect-clear:after,
.small-multiselect-wrap .multiselect-clear:before {
    top: 5px;
    left: 12px;
}

.small-multiselect-wrap .multiselect {
    min-height: 30px;
}

.scrollable-member-list {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 10px;
}

.tooltip-icon {
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.tooltip-content {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 1000;
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    padding: 12px;
    width: 250px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 13px;
    border-radius: 6px;
    white-space: normal;
}

.channel-entry {
    margin-bottom: 10px;
}

.channel-detail {
    margin: 2px 0;
    font-size: 12px;
}

.channel-name {
    margin-bottom: 4px;
    font-weight: bold;
}
.channel-list-box, .member-list-box{
    max-height: 135px;
    overflow-y: scroll;
}
.tableFixHead {
	overflow-y: auto;
}

.tableFixHead table {
	border-collapse: collapse;
	width: 100%;
	display: block;
	overflow-y: auto;
}
.tableFixHead thead th {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -ms-sticky;
	position: -o-sticky;
	position: sticky;
	top: 0;
	z-index: 1;
}
.fixed-ht-table {
    max-height: 200px;
    overflow-y: auto;
}
.tableFixHead thead>tr>th, .tableFixHead thead>tr>td {
    width: 1%;
}
.table thead label{
    line-height: 14px;
}
.user-cards-list{
     max-height: 335px;
    overflow-y: auto;
}
.user-card p {
  font-size: 13px;
}
.modal-open{
    overflow: hidden;
}