/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

:root {
    --white     : #ffffff;
    --mainColor : #3b3f5c;
    --gray      : #888ea8;
    --light     : #f1f2f3;
    --green     : #15949a;
    --lightgreen: #2ad1c9;
}

html,
body {
    height          : 100%;
    font-family     : "Nunito", sans-serif;
    background-color: var(--light);
    color           : var(--gray);
    height          : 100%;
    font-size       : 0.875rem;
    overflow-x      : hidden;
    overflow-y      : auto;
    letter-spacing  : 0.0312rem;
    font-family     : "Nunito", sans-serif;
}

img {
    width: 100%;
}

h1 {
    font-size: 32px;
    color    : var(--mainColor);
}

button {
    border    : 0;
    background: transparent;
    outline   : none;
}

button:hover,
button:focus,
button:active {
    outline: none;
}

.btn {
    -webkit-transition: all 0.5s;
    -o-transition     : all 0.5s;
    transition        : all 0.5s;
}

.btn:hover {
    -webkit-transform: translateY(-3px);
    -ms-transform    : translateY(-3px);
    transform        : translateY(-3px);
}

.auth {
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center;
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
}

.form-content {
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-align    : center;
    -ms-flex-align       : center;
    align-items          : center;
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction   : column;
    flex-direction       : column;
    min-width            : 480px;
    max-width            : 100%;
    padding              : 25px;
    background           : var(--white);
    text-align           : center;
    border-radius        : 15px;
    -webkit-box-shadow   : 0 4px 6px 0 rgba(85, 85, 85, 0.1), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
    box-shadow           : 0 4px 6px 0 rgba(85, 85, 85, 0.1), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
}

.form-content>p {
    font-size    : 13px;
    color        : var(--gray);
    font-weight  : 600;
    margin-bottom: 35px;
}

.field-wrapper {
    width        : 100%;
    padding      : 11px 0px 16px 0;
    border-bottom: none;
    position     : relative;
}

.field-wrapper label {
    font-size     : 10px;
    font-weight   : 700;
    margin-bottom : 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.field-wrapper input {
    font-weight: 600;
    font-size  : 16px;
    padding    : 13px 35px 13px 46px;
}

.field-wrapper button {
    -ms-flex-item-align: center;
    -ms-grid-row-align : center;
    align-self         : center;
    width              : 100%;
    padding            : 11px 14px;
    font-size          : 16px;
    letter-spacing     : 2px;
}

.auth .field-wrapper input+svg {
    cursor: pointer;
    left  : auto;
    right : 12px;
}

.form-control {
    height: calc(1.4em + 1.4rem + 2px);
    border: 1px solid #bfc9d4;
}

.form-control.validate-error {
    border: 1px solid #c10000;
}

.header {
    background-color : var(--green);
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    padding          : 0 15px;
    position         : fixed;
    width            : 100%;
    top              : 0;
    min-height       : 54px;
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    z-index          : 2;
}

.header--block__right {
    width: 150px;
}

.header--block__left {
    width: 200px;
}

.header--block__center {
    width: calc(100% - 300px);
}

.header-menu--mobile {
    display: none;
}

.header--menu {
    list-style      : none;
    display         : -webkit-box;
    display         : -ms-flexbox;
    display         : flex;
    -webkit-box-pack: justify;
    -ms-flex-pack   : justify;
    justify-content : space-between;
    margin          : 0;
    padding         : 0;
    line-height     : 54px;
}

.header--menu li {
    cursor    : pointer;
    width     : 100%;
    text-align: center;
}

.header--menu li.active,
.header--menu li:hover {
    background-color: var(--white);
}

.header--menu a {
    line-height: 54px;
}

.header--menu li.active a,
.header--menu li:hover a {
    color: var(--mainColor);
}

.sidebarCollapse {
    color       : var(--lightgreen);
    line-height : 3.6em;
    margin-right: 20px;
}

.sidebarCollapse:hover {
    color: var(--green);
}

.navbar-item {
    display         : -webkit-box;
    display         : -ms-flexbox;
    display         : flex;
    margin          : 0;
    padding         : 0;
    list-style      : none;
    margin-right    : 20px;
    -webkit-box-pack: end;
    -ms-flex-pack   : end;
    justify-content : flex-end;
}

.header .nav-link {
    padding    : 0;
    line-height: 2.75rem;
}

.header .nav-item {
    margin-left: 20px;
}

.language-dropdown a.dropdown-toggle img {
    width : 20px;
    height: 20px;
    margin: 11px 0px;
}

.user-profile-dropdown .nav-link img {
    width        : 28px;
    border-radius: 4px;
    height       : 28px;
}

.sub-header-container {
    display           : -webkit-box;
    display           : -ms-flexbox;
    display           : flex;
    background-color  : var(--white);
    -webkit-box-shadow: 0px 20px 20px rgba(126, 142, 177, 0.12);
    box-shadow        : 0px 20px 20px rgba(126, 142, 177, 0.12);
    padding           : 0 30px;
    min-height        : 53px;
}

.sub-header-container .breadcrumb-one .breadcrumb-item span {
    color: var(--mainColor);
}

.navbar-nav {
    padding    : 0;
    line-height: 3.6em;
}

.sidebar-active .sidebar {
    left: 16px;
}

.sidebar {
    width                      : 260px;
    position                   : fixed;
    z-index                    : 1;
    border-radius              : 6px 6px 0 0;
    -webkit-transition         : 0.6s;
    -o-transition              : 0.6s;
    transition                 : 0.6s;
    height                     : 100vh;
    -ms-touch-action           : none;
    touch-action               : none;
    -webkit-user-select        : none;
    -moz-user-select           : none;
    -ms-user-select            : none;
    user-select                : none;
    -webkit-user-drag          : none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    top                        : 106px;
    border-top-right-radius    : 0;
    border-right               : 1px solid #e0e6ed;
}

.row-layout {
    background-color  : var(--white);
    -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.1), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
    box-shadow        : 0 4px 6px 0 rgba(85, 85, 85, 0.1), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06);
    margin            : 0 20px;
    margin-top        : 20px;
    padding           : 20px;
    border-radius     : 6px;
}

.sidebar a {
    color: var(--gray);
}

.new-control-input {
    position: absolute;
    z-index : -1;
    opacity : 0;
}

.new-control {
    position    : relative;
    display     : -ms-inline-flexbox;
    display     : -webkit-inline-box;
    display     : inline-flex;
    padding-left: 1.5rem;
    margin-right: 1rem;
    font-weight : 100;
    font-size   : 14px;
}

.new-control.new-checkbox[class*="checkbox-outline-"]>input:checked~span.new-control-indicator {
    background-color: transparent;
}

.new-control.new-checkbox.checkbox-outline-info>input:checked~span.new-control-indicator {
    border: 2px solid var(--green);
}

.new-control.new-checkbox .new-control-indicator {
    position           : absolute;
    top                : 2px;
    left               : 0;
    display            : block;
    width              : 17px;
    height             : 17px;
    pointer-events     : none;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none;
    background-color   : #e0e6ed;
    background-repeat  : no-repeat;
    background-position: center center;
    background-size    : 50% 50%;
    border-radius      : 100%;
}

.table>tbody tr {
    border-radius     : 4px;
    -webkit-transition: all 0.1s ease;
    -o-transition     : all 0.1s ease;
    transition        : all 0.1s ease;
    border-bottom     : 1px solid #e0e6ed;
}

.table-hover tbody tr:hover .new-control.new-checkbox .new-control-indicator {
    border: 2px solid #1b55e2;
}

.table-hover tbody tr:hover {
    background-color : transparent !important;
    -webkit-transform: translateY(-1px) scale(1.01);
    -ms-transform    : translateY(-1px) scale(1.01);
    transform        : translateY(-1px) scale(1.01);
}

.table thead th.actions {
    width: 62px;
}

.table-controls {
    width  : 62px;
    margin : 0;
    padding: 0;
}

.table-controls li {
    list-style: none;
    display   : inline;
}

.table-controls li svg {
    color         : #888ea8;
    vertical-align: middle;
    width         : 28px;
    height        : 28px;
    fill          : rgba(0, 23, 55, 0.08);
    cursor        : pointer;
}

#content:before {
    content   : "";
    position  : absolute;
    left      : 0;
    right     : 0;
    background: rgba(136, 142, 168, 0.14);
    width     : 100%;
    height    : 183px;
}

.orders #content:before {
    content: none;
}

.home #content::before,
.settings #content::before {
    content: none;
}


/*----------Theme checkbox---------*/

.new-control {
    padding-left: 0;
    margin-right: 0;
}

.new-control-input {
    position: unset;
}

.new-control.new-checkbox span.new-control-indicator:after {
    top: 51%;
}


/*
  Filtered List Search
*/

.filtered-list-search form>div {
    position: relative;
    width   : 80%;
}

.filtered-list-search form>div svg {
    position: absolute;
    right   : 11px;
    color   : #acb0c3;
    height  : 36px;
    width   : 19px;
    top     : 4px;
}

.filtered-list-search form input {
    padding           : 6px 27px 6px 15px;
    border            : none;
    -webkit-box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
    box-shadow        : 0px 2px 4px rgba(126, 142, 177, 0.12);
    width             : 100% !important;
    background-color  : #fff;
}

.filtered-list-search form input:focus {
    border-color: #d3d3d3;
}

.filtered-list-search form input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #888ea8;
}

.filtered-list-search form input::-moz-placeholder {
    /* Firefox 19+ */
    color: #888ea8;
}

.filtered-list-search form input:-ms-input-placeholder {
    /* IE 10+ */
    color: #888ea8;
}

.filtered-list-search form input:-moz-placeholder {
    /* Firefox 18- */
    color: #888ea8;
}


/* List users */

.list .switch {
    text-align: right;
}

.list svg {
    padding           : 9px;
    background        : #ffffff;
    border-radius     : 5px;
    cursor            : pointer;
    -webkit-box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
    box-shadow        : 0px 2px 4px rgba(126, 142, 177, 0.12);
    width             : 43px;
    height            : 41px;
    color             : var(--lightgreen);
    fill              : rgba(27, 204, 226, 0.2);
}

.list svg:hover {
    color: var(--green);
    fill : rgba(0, 23, 55, 0.08);
}

.list .list-items .item.items-header-section h4 {
    display      : inline-block;
    font-size    : 16px;
    font-weight  : 600;
    margin-bottom: 0;
}

.list .list-items .item.items-header-section .n-chk {
    display: inline-block;
}

.list .list-items .item.items-header-section .n-chk+h4 {
    margin-left: 40px;
}

.list .list-items .item .item-content {
    -ms-flex-direction   : row;
    -webkit-box-orient   : horizontal;
    -webkit-box-direction: normal;
    flex-direction       : row;
    -ms-flex-align       : center;
    -webkit-box-align    : center;
    align-items          : center;
    padding              : 0.75rem 0.625rem;
    position             : relative;
    display              : -webkit-inline-box;
    display              : -ms-inline-flexbox;
    display              : inline-flex;
    min-width            : 0;
    word-wrap            : break-word;
    -webkit-box-pack     : justify;
    -ms-flex-pack        : justify;
    justify-content      : space-between;
    background           : #fff;
    margin-bottom        : 8px;
    border-radius        : 6px;
    padding              : 13px 18px;
    width                : 100%;
    min-width            : 767px;
    -webkit-transition   : all 0.35s ease;
    -o-transition        : all 0.35s ease;
    transition           : all 0.35s ease;
    -webkit-box-shadow   : 0px 2px 4px rgba(126, 142, 177, 0.12);
    box-shadow           : 0px 2px 4px rgba(126, 142, 177, 0.12);
}

.list .list-items .item:not(.items-header-section) .item-content:hover {
    -webkit-transform: translateY(0) scale(1.03);
    -ms-transform    : translateY(0) scale(1.01);
    transform        : translateY(0) scale(1.01);
}

.item-content>div {
    -ms-flex-preferred-size: 20%;
    flex-basis             : 20%;
    display                : -webkit-box;
    display                : -ms-flexbox;
    display                : flex;
}

.list .list-items .item .user-profile {
    display      : -webkit-box;
    display      : -ms-flexbox;
    display      : flex;
    -ms-flex-wrap: wrap;
    flex-wrap    : wrap;
}

.list .list-items .item .user-meta-info .user-name {
    margin-bottom: 0;
    color        : #3b3f5c;
    font-weight  : 600;
    font-size    : 15px;
}

.list .list-items .item .user-meta-info .user-work {
    margin-bottom: 0;
    color        : #888ea8;
    font-weight  : 500;
    font-size    : 13px;
}

.list .list-items .item .user-email p {
    margin-bottom: 0;
    color        : #888ea8;
    font-weight  : 600;
}

.list .list-items .item .user-location p {
    font-size    : 13px;
    font-weight  : 600;
    margin-bottom: 0;
}

.list .list-items .item .user-phone p {
    margin-bottom: 0;
    color        : #888ea8;
    font-weight  : 600;
    font-size    : 13px;
}

.list .list-items .item .user-phone .info-title {
    display: none;
}

.item-content--category_actions,
.list .list-items .item .action-btn {
    font-weight            : 600;
    color                  : #acb0c3;
    -webkit-box-pack       : end;
    -ms-flex-pack          : end;
    justify-content        : flex-end;
    -ms-flex-preferred-size: 10%;
    flex-basis             : 10%;
}

.list .list-items .item .action-btn svg {
    margin-right      : 5px;
    cursor            : pointer;
    width             : 20px;
    height            : 25px;
    padding           : 0;
    color             : var(--lightgreen);
    fill              : rgba(27, 204, 226, 0.2);
    -webkit-box-shadow: none;
    box-shadow        : none;
}

.list .list-items .item .action-btn svg:hover {
    color: var(--green);
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {

    /* IE10+ CSS styles go here */
    .new-control.new-checkbox .new-control-indicator {
        top : -13px;
        left: -8px;
    }
}

@media (max-width: 1199px) {
    .list .searchable-items.list {
        display                   : block;
        width                     : 100%;
        overflow-x                : auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 575px) {
    .filtered-list-search form>div {
        width: 100%;
    }
}

.as-footer-container {
    position          : fixed;
    bottom            : 0;
    width             : calc(100% - 316px);
    background        : var(--green);
    padding           : 12px 20px;
    -webkit-box-shadow: -2px -9px 20px rgba(126, 142, 177, 0.12);
    box-shadow        : -2px -9px 20px rgba(126, 142, 177, 0.12);
    border-top        : 1px solid #f1f2f3;
    border-radius     : 6px 6px 0 0;
    z-index           : 5;
    display           : -webkit-box;
    display           : -ms-flexbox;
    display           : flex;
    -webkit-box-pack  : justify;
    -ms-flex-pack     : justify;
    justify-content   : space-between;
}

.paginating-container {
    display         : -webkit-box;
    display         : -ms-flexbox;
    display         : flex;
    -webkit-box-pack: center;
    -ms-flex-pack   : center;
    justify-content : center;
    margin-bottom   : 0;
}

.paginating-container .prev svg {
    width         : 18px;
    height        : 18px;
    vertical-align: text-bottom;
}

.paginating-container .next svg {
    width         : 18px;
    height        : 18px;
    vertical-align: text-bottom;
}

.paginating-container .pagination {
    margin-bottom: 0;
}

.paginating-container li a {
    padding    : 10px 15px;
    font-weight: 600;
    color      : #3b3f5c;
}

.paginating-container li {
    padding      : 10px 0;
    font-weight  : 600;
    color        : #3b3f5c;
    border-radius: 4px;
}

.paginating-container li:not(:last-child) {
    margin-right: 4px;
}


/*
    Default Style
*/

.pagination-default li {
    border: 2px solid #e0e6ed;
}

.pagination-default li:hover {
    border: 2px solid var(--green);
}

.pagination-default li:hover a {
    color: var(--green);
}

.pagination-default li.active {
    border: 2px solid var(--green);
    color : var(--green);
}

.pagination-default li a.active:hover {
    color: var(--green);
}

.pagination-default li.active a {
    color: var(--green);
}

.pagination-default .prev {
    border: 2px solid #e0e6ed;
}

.pagination-default .prev:hover {
    border: 2px solid var(--green);
}

.pagination-default .prev:hover a {
    color: var(--green);
}

.pagination-default .prev:hover svg {
    color: var(--green);
}

.pagination-default .next {
    border: 2px solid #e0e6ed;
}

.pagination-default .next:hover {
    border: 2px solid var(--green);
}

.pagination-default .next:hover a {
    color: var(--green);
}

.pagination-default .next:hover svg {
    color: var(--green);
}

.pagination-solid li {
    background-color: #e0e6ed;
}

.pagination-solid li:hover a {
    color: var(--green);
}

.pagination-solid li.active {
    background-color: var(--green);
    color           : #fff;
}

.pagination-solid li a.active:hover {
    color: #fff;
}

.pagination-solid li.active a {
    color: #fff;
}

.pagination-solid .prev {
    background-color: #e0e6ed;
}

.pagination-solid .prev:hover {
    background-color: var(--green);
}

.pagination-solid .prev:hover a {
    color: #fff;
}

.pagination-solid .prev:hover svg {
    color: #fff;
}

.pagination-solid .next {
    background-color: #e0e6ed;
}

.pagination-solid .next:hover {
    background-color: var(--green);
}

.pagination-solid .next:hover a {
    color: #fff;
}

.pagination-solid .next:hover svg {
    color: #fff;
}

.form-info {
    height       : calc(1.4em + 1.4rem + 2px);
    border-bottom: 1px solid #bfc9d4;
    padding      : 0.375rem 0.75rem;
    font-size    : 1rem;
    font-weight  : 400;
    line-height  : 2.5;
    color        : #495057;
}

.form-link {
    cursor: pointer;
}

.js__control--success-text {
    color    : var(--green);
    font-size: 1rem;
}

.spin {
    -webkit-animation: spin 2s infinite linear;
    animation        : spin 2s infinite linear;
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform        : rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform        : rotate(359deg);
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform        : rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform        : rotate(359deg);
    }
}

.chat-system {
    display           : -webkit-box;
    display           : -ms-flexbox;
    display           : flex;
    -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
    box-shadow        : 0 4px 6px 0 rgba(85, 85, 85, 0.08), 0 1px 20px 0 rgba(0, 0, 0, 0.07), 0px 1px 11px 0px rgba(0, 0, 0, 0.07);
    height            : calc(100vh - 179px);
    margin-bottom     : 10px;
    border-radius     : 6px;
}

.user-list-info {
    width                    : 30%;
    max-width                : 400px;
    border-right             : 1px solid #ebedf2;
    border-bottom-left-radius: 6px;
    background               : #fff;
    border-top-left-radius   : 6px;
    overflow-y               : scroll;
}

.chat-box {
    position                  : relative;
    width                     : 100%;
    height                    : 616px;
    border-bottom-right-radius: 6px;
    border-top-right-radius   : 6px;
    height                    : calc(100vh - 179px);
    min-height                : 400px;
}

.user-list-box input {
    border-radius: 4px;
    padding-left : 38px;
    font-size    : 16px;
    width        : 100%;
    color        : #3b3f5c;
    border       : 0;
    outline      : none;
    padding      : 12px 16px 12px 43px;
    background   : #f1f2f3;
    margin       : 0 20px 0 20px;
    border       : 1px dashed #888ea8;
}

.user-list-settings {
    border-bottom: 1px solid #e0e6ed;
}

.user-list-settings .form-group {
    margin: 1rem;
}

.form-group a {
    width  : 100%;
    display: block;
}

.form-group a:hover {
    color: var(--green);
}

.chat-box-inner {
    height: 100%;
}

.chat-footer {
    display                   : block;
    padding                   : 6px 10px;
    background                : #fafafa;
    border-bottom-right-radius: 6px;
}

.chat-input {
    position: relative;
}

.chat-input svg {
    position          : absolute;
    color             : #888ea8;
    top               : 12px;
    fill              : rgba(0, 23, 55, 0.08);
    -webkit-transition: all 2s;
    -o-transition     : all 2s;
    transition        : all 2s;
}

.chat-input .feather-message-square {
    left: 11px;
}

.chat-input .feather-paperclip {
    right : 11px;
    cursor: pointer;
}

.chat-input label {
    position     : absolute;
    width        : 44px;
    height       : 44px;
    right        : 0;
    top          : 0;
    cursor       : pointer;
    color        : #888ea8;
    margin-bottom: 0;
}

.chat-input input[type="file"] {
    display: none;
}

.chat-input input {
    font-size : 16px;
    width     : 100%;
    color     : #3b3f5c;
    outline   : none;
    padding   : 12px 16px 12px 43px;
    border    : 1px dashed #888ea8;
    background: #fafafa;
}

.chat-conversation-box {
    position  : relative;
    margin    : auto;
    width     : 100%;
    height    : calc(100% - 180px);
    padding   : 15px;
    overflow  : auto;
    background: var(--light);
}

.mailing .chat-conversation-box {
    height: calc(100% - 57px);
}

.chat-input label[for="additional"] {
    left: 0;
}

.chat-conversation-box.no-message {
    display         : -webkit-box;
    display         : -ms-flexbox;
    display         : flex;
    -webkit-box-pack: center;
    -ms-flex-pack   : center;
    justify-content : center;
}

.header--block__left img {
    max-width: 80%;
}

.no-message p {
    -ms-flex-item-align: center;
    -ms-grid-row-align : center;
    align-self         : center;
    font-size          : 18px;
    color              : var(--green);
    margin-bottom      : 0;
    font-weight        : 600;
    background         : var(--white);
    padding            : 15px;
    border-radius      : 8px;
}

.message {
    font-size            : 16px;
    position             : relative;
    display              : -webkit-box;
    display              : -ms-flexbox;
    display              : flex;
    -webkit-box-align    : center;
    -ms-flex-align       : center;
    align-items          : center;
    clear                : both;
    margin-bottom        : 8px;
    padding              : 9px 18px;
    vertical-align       : top;
    border-radius        : 5px;
    word-break           : break-word;
    max-width            : 370px;
    background           : var(--white);
    color                : var(--green);
    -webkit-box-orient   : vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction   : column;
    flex-direction       : column;
    -webkit-box-align    : start;
    -ms-flex-align       : start;
    align-items          : start;
}

.message::-moz-selection {
    color: var(--mainColor);
}

.message::selection {
    color: var(--mainColor);
}

.message a {
    display: inline-block;
    color  : var(--lightgreen);
}

.image #file,
.additional {
    display: none;
}

.image .additional {
    display: block;
}

.message-file a {
    color: var(--lightgreen);
}

#file {
    display         : -webkit-box;
    display         : -ms-flexbox;
    display         : flex;
    text-align      : center;
    -webkit-box-pack: center;
    -ms-flex-pack   : center;
    justify-content : center;
    font-size       : 18px;
    color           : var(--lightgreen);
}

#file p {
    color              : var(--lightgreen);
    -ms-flex-item-align: end;
    align-self         : flex-end;
}

#file svg {
    margin-right: 10px;
    width       : 50px;
    height      : 50px;
}

.message::before {
    position         : absolute;
    top              : 18px;
    display          : block;
    width            : 8px;
    height           : 6px;
    content          : "\00a0";
    -ms-transform    : rotate(29deg) skew(-35deg);
    -webkit-transform: rotate(29deg) skew(-35deg);
    transform        : rotate(29deg) skew(-35deg);
    background-color : #fff;
}

.message[data-from="user"]:before {
    left: -3px;
}

.message[data-from="user"] {
    float: left;
}

.message[data-from="client"]:before {
    right: -3px;
}

.message[data-from="client"] {
    float: right;
}

.message .date {
    font-size          : 10px;
    -ms-flex-item-align: end;
    align-self         : flex-end;
    margin-top         : 5px;
}

.message[data-from="user"] .date {
    -ms-flex-item-align: start;
    align-self         : flex-start;
}

.chat-meta-user {
    display                : -webkit-box;
    display                : -ms-flexbox;
    display                : flex;
    width                  : 100%;
    -webkit-box-pack       : start;
    -ms-flex-pack          : start;
    justify-content        : flex-start;
    background-color       : #fafafa;
    border-top-right-radius: 6px;
}

.chat-user-photo {
    padding: 5px;
}

.chat-user-photo img {
    max-height   : 40px;
    width        : auto;
    border-radius: 6px;
}

.chat-user-name {
    padding    : 14px 15px 15px 15px;
    color      : #0e1726;
    font-weight: 600;
    font-size  : 15px;
}

.chat-system .chat-box .bubble.you {
    float                 : left;
    color                 : #1b55e2;
    background-color      : #f6f6f6;
    -webkit-align-self    : flex-start;
    -ms-flex-item-align   : start;
    align-self            : flex-start;
    -webkit-animation-name: slideFromLeft;
    animation-name        : slideFromLeft;
    -webkit-box-shadow    : 0px 2px 4px rgba(126, 142, 177, 0.12);
    box-shadow            : 0px 2px 4px rgba(126, 142, 177, 0.12);
}

.chat-system .chat-box .bubble {
    font-size     : 16px;
    position      : relative;
    display       : inline-block;
    clear         : both;
    margin-bottom : 8px;
    padding       : 9px 18px;
    vertical-align: top;
    border-radius : 5px;
    word-break    : break-word;
    max-width     : 370px;
}

.events .checkbox-primary {
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center;
}

.settings .checkbox-primary a {
    width: auto;
    color: #0cc4b3;
    margin-left: 5px;
}

.events .new-control.checkbox-primary {
    height    : auto;
    margin-top: 0;
}

.events .item-content>div:not(.item-content--category_actions) {
    -ms-flex-preferred-size: 55%;
    flex-basis             : 55%;
}

.checkbox-primary {
    position    : relative;
    padding-left: 20px;
    display     : -webkit-inline-box;
    display     : -ms-inline-flexbox;
    display     : inline-flex;
    margin      : 0;
    line-height : 20px;
}

.radio-primary {
    position    : relative;
    padding-left: 20px;
    display     : -webkit-inline-box;
    display     : -ms-inline-flexbox;
    display     : inline-flex;
    margin      : 0;
    line-height : 22px;
}

.radio-input,
.checkbox-input {
    visibility: hidden;
}

.radio-span {
    display      : block;
    width        : 22px;
    height       : 22px;
    position     : absolute;
    border       : 1px solid;
    border-radius: 100%;
    left         : 0;
    cursor       : pointer;
}

.checkbox-span {
    display      : block;
    width        : 20px;
    height       : 20px;
    position     : absolute;
    border       : 1px solid;
    border-radius: 3px;
    left         : 0;
    cursor       : pointer;
}

#image {
    padding: 15px;
}

.radio-input:checked+.radio-span {
    border: 2px solid var(--lightgreen);
}

.checkbox-input:checked+.checkbox-span {
    border: 2px solid var(--lightgreen);
}

.radio-input:checked+.radio-span:before,
.checkbox-input:checked+.checkbox-span:before {
    content          : "";
    top              : 50%;
    left             : 50%;
    margin-left      : -2px;
    margin-top       : -6px;
    width            : 5px;
    height           : 10px;
    border-width     : 0 2px 2px 0 !important;
    -webkit-transform: rotate(45deg);
    -ms-transform    : rotate(45deg);
    transform        : rotate(45deg);
    position         : absolute;
    border           : solid var(--lightgreen);
    display          : block;
}

.user-info .form-group {
    margin: 1rem;
}

.user-info .form-info {
    height     : 1.8rem;
    line-height: 1.4;
    font-size  : 12px;
}

.item-content--name {
    -ms-flex-preferred-size: 55%;
    flex-basis             : 55%;
}

.item-content--category {
    -ms-flex-preferred-size: 30%;
    flex-basis             : 30%;
}

.item-content--category_actions {
    -ms-flex-preferred-size: 15%;
    flex-basis             : 15%;
    text-align             : right;
}

.item-content--category_actions svg {
    cursor            : pointer;
    width             : 22px;
    height            : 25px;
    padding           : 0;
    color             : var(--lightgreen);
    fill              : rgba(27, 204, 226, 0.2);
    -webkit-box-shadow: none;
    box-shadow        : none;
    margin-right      : 10px;
}

.item-content--name .n-chk {
    display: inline-block;
}

.item-content--name a {
    color        : var(--lightgreen);
    display      : inline-block;
    font-size    : 16px;
    font-weight  : 600;
    margin-bottom: 0;
}

input[type="number"] {
    width: 100px;
}

table .form-group {
    margin-bottom: 0;
}


/*  Table   */

.table-bordered {
    border: 1px solid #f1f2f3;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f1f2f3 !important;
}

.table>tbody>tr>td {
    vertical-align: middle;
    color         : #515365;
    font-size     : 13px;
    letter-spacing: 1px;
    position      : relative;
}

.table>thead>tr>th {
    color         : var(--green);
    font-weight   : 700;
    font-size     : 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.table>tbody>tr>td .usr-img-frame {
    background-color: #ebedf2;
    padding         : 2px;
    width           : 35px;
    height          : 35px;
}

.table>tbody>tr>td .usr-img-frame img {
    width : 35px;
    margin: 0;
}

.table>tbody>tr>td .admin-name {
    font-weight: 700;
    color      : #515365;
}

.table>tbody>tr>td .progress {
    width : 135px;
    height: 6px;
    margin: auto 0;
}

.table>tbody>tr>td svg.icon {
    width: 21px;
}

.table>tbody>tr>td .t-dot {
    background-color: #000;
    height          : 11px;
    width           : 11px;
    border-radius   : 50%;
    cursor          : pointer;
    margin          : 0 auto;
}

.table>tbody>tr>td svg.t-icon {
    padding       : 5px;
    border-radius : 50%;
    font-size     : 11px;
    vertical-align: sub;
    cursor        : pointer;
}

.table>tbody>tr>td svg.t-icon.t-hover-icon:hover {
    background-color: #e7515a;
    color           : #fff;
}

.table-bordered td {
    border: 1px solid #ebedf2;
}

.table-bordered th {
    border: 1px solid #ebedf2;
}

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

.table-hover:not(.table-dark) tbody tr:hover {
    background-color: #f1f2f3 !important;
}

.table-controls>li>a svg {
    color: #25d5e4;
}

.table tr td .custom-dropdown.t-custom-dropdown a.dropdown-toggle,
.table tr td .custom-dropdown-icon.t-custom-dropdown a.dropdown-toggle {
    border-radius: 5px;
    border       : 1px solid #d3d3d3;
}

.table-controls>li>a svg {
    color: #888ea8;
    width: 21px;
}

[data-item] {
    visibility        : hidden;
    position          : absolute;
    -webkit-transition: all 0.5s;
    -o-transition     : all 0.5s;
    transition        : all 0.5s;
}

[data-item]:first-child {
    visibility: visible;
    position  : relative;
}

.visible[data-item] {
    visibility: visible;
    position  : relative;
}

.tooltip-inner {
    padding: 0.25rem 0.5rem 0.45rem;
}

.settings input[type="number"] {
    width: 100%;
}

input[type="number"].full-size {
    width: 100%;
}

*[data-add_field] {
    cursor: pointer;
}

.mediafiles {
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    -ms-flex-wrap    : wrap;
    flex-wrap        : wrap;
}

.mediafiles_videos {
    -ms-flex-preferred-size: 100%;
    flex-basis             : 100%;
}

.mediafiles .mediafiles_item {
    -ms-flex-preferred-size: calc((100% / 3) - 20px);
    flex-basis             : calc((100% / 3) - 20px);
    max-width              : calc((100% / 3) - 20px);
    margin                 : 10px;
    max-height             : 180px;
    position               : relative;
}

.mediafiles_videos .mediafiles_item {
    position               : relative;
    max-width              : 400px;
    -ms-flex-preferred-size: unset;
    flex-basis             : unset;
    max-height             : none;
}

.mediafiles_item img {
    -o-object-fit: cover;
    object-fit   : cover;
    height       : 180px;
}

.mediafiles_item a {
    color        : var(--danger);
    position     : absolute;
    right        : 10px;
    top          : 10px;
    background   : var(--white);
    border-radius: 5px;
    padding      : 4px;
    z-index      : 2;
}

.statistic {
    -webkit-box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
    box-shadow        : 0px 2px 4px rgba(126, 142, 177, 0.12);
    background        : #fff;
    border-radius     : 6px;
}

.statistic_row {
    display         : -webkit-box;
    display         : -ms-flexbox;
    display         : flex;
    -webkit-box-pack: justify;
    -ms-flex-pack   : justify;
    justify-content : space-between;
    font-size       : 14px;
    border-radius   : 6px;
    padding         : 15px 18px;
    border-top      : 1px solid #e0e6ed;
}

.dropdown-item a {
    color: var(--mainColor);
}

.header .badge {
    display: none;
}

.header .badge {
    position     : absolute;
    line-height  : 17px;
    height       : 20px;
    width        : 20px;
    border-radius: 100%;
    background   : var(--white);
    color        : var(--green);
    top          : 0;
    left         : 50%;
}

.header .badge.new {
    display                          : block;
    -webkit-animation-name           : blinker;
    animation-name                   : blinker;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count        : infinite;
    -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    animation-timing-function        : cubic-bezier(1.0, 0, 0, 1.0);
    -webkit-animation-duration       : 1s;
    animation-duration               : 1s;
}

.shake {
    -webkit-animation          : shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    animation                  : shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    -webkit-transform          : translate3d(0, 0, 0);
    transform                  : translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility        : hidden;
}

.item-content.item-danger .new-control-indicator,
.item.unreaded .new-control-indicator {
    background-color: var(--red);
}

a.js__control--button {
    color: var(--dark);
}

.input-group-text button {
    border : 0;
    outline: none;
    color  : #495057;
}

.hidden {
    display: none;
}

a[data-remove] {
    color: var(--gray);
}

.buttons input[type="number"] {
    width: 70px;
}

.auth .field-wrapper svg {
    position: absolute;
    left    : 12px;
    color   : var(--gray);
    fill    : rgba(0, 23, 55, 0.08);
    width   : 20px;
    height  : 20px;
    top     : 48px;
}

[data-cleardate] {
    position: absolute;
    right   : 15px;
    top     : 20px;
    color   : var(--gray);
    cursor  : pointer;
}

.widget .layout-px-spacing {
    padding: 0 !important;
}

.widget .chat-system {
    -webkit-box-shadow: none;
    box-shadow        : none;
}

a[data-remove] {
    color: var(--gray);
}

.buttons input[type="number"] {
    width: 70px;
}

.auth .field-wrapper svg {
    position: absolute;
    left    : 12px;
    color   : var(--gray);
    fill    : rgba(0, 23, 55, 0.08);
    width   : 20px;
    height  : 20px;
    top     : 48px;
}

[data-cleardate] {
    position: absolute;
    right   : 15px;
    top     : 20px;
    color   : var(--gray);
    cursor  : pointer;
}

.search-remove {
    position: absolute;
    right   : 0;
}

.tunnels input[type="number"] {
    max-width: 50px;
}

.flatpickr-input_range.flatpickr-input[readonly] {
    background-color: #fff !important;
    border          : 0;
}

.additional_modal .flatpickr-input_range.flatpickr-input[readonly],
.user-list-settings .flatpickr-input_range.flatpickr-input[readonly] {
    border: 1px solid #bfc9d4
}

.input-group-append button {
    border : 0;
    padding: 0;
    outline: none;
}

.filtered-list-search .input-group {
    border: 1px solid #bfc9d4;
}

.filtered-list-search .input-group-append button svg {
    border-radius: 0;
}

.history_back:focus,
.history_back:hover,
.history_back:active {
    border : 1px solid var(--green);
    outline: none;
}

.history_back {
    border       : 1px solid #bfc9d4;
    outline      : none;
    background   : #fff;
    padding      : 5px 10px;
    border-radius: 3px;
}

.list .user-message svg {
    width      : 22px;
    height     : 22px;
    padding    : 0;
    margin-left: 10px;
}

.buttons a {
    color     : #3c3c3c;
    margin-top: 5px;
    display   : block;
    cursor    : pointer;
}

.buttons a.hide {
    opacity: 0.3;
}

.mailing-stat .item-content {
    max-height: 200px;
    overflow  : hidden;
}

.list .mailing-stat .list-items .item .item-content {
    -webkit-box-align: start;
    -ms-flex-align   : start;
    align-items      : start;
}

.mailing-text {
    -o-text-overflow: ellipsis;
    text-overflow   : ellipsis;
    max-height      : 105px;
    overflow        : hidden;
}

.chat-input button svg:last-of-type {
    /* display: none; */
    display: block;
}

.chat-input label.sending svg:last-of-type {
    display          : block;
    -webkit-animation: rotate 2s infinite;
    animation        : rotate 2s infinite
}

.chat-input label.sending svg:first-of-type {
    display: none;
}

.child {
    border-bottom          : 1px solid;
    -ms-flex-preferred-size: 100%;
    flex-basis             : 100%;
    display                : -webkit-box;
    display                : -ms-flexbox;
    display                : flex;
    margin                 : 5px;
    padding                : 5px;
    -ms-flex-wrap          : wrap;
    flex-wrap              : wrap;
}

.home .list .list-items .item .user-profile {
    -webkit-box-pack: center;
    -ms-flex-pack   : center;
    justify-content : center;
}

.child .age,
.child .gender {
    -ms-flex-preferred-size: 100%;
    flex-basis             : 100%;
}

@media (max-width: 560px) {
    body.tunnels table {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    body.tunnels tr {
        display      : -webkit-box;
        display      : -ms-flexbox;
        display      : flex;
        -ms-flex-wrap: wrap;
        flex-wrap    : wrap;
    }

    body.tunnels tbody {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    body.tunnels thead {
        display                : -webkit-box;
        display                : -ms-flexbox;
        display                : flex;
        -ms-flex-preferred-size: 50%;
        flex-basis             : 50%;
        max-width              : 50%;
    }

    body.tunnels th {
        display                : -webkit-box;
        display                : -ms-flexbox;
        display                : flex;
        -ms-flex-preferred-size: 100%;
        flex-basis             : 100%;
    }

    body.tunnels td {
        padding: 0 !important;
    }
}

.select2-container {
    display: block;
    width  : 100% !important;
}

.mediafiles_item-doc {
    -ms-flex-preferred-size: 100%;
    flex-basis             : 100%;
    padding                : 20px 0;
    position               : relative;
}

.mediafiles_item-doc a[data-remove] {
    position: absolute;
    right   : 0;
}

.doc-link {
    color: var(--gray);
}

.doc-link:hover {
    color: var(--green);
}

.widget .chat-system {
    height: calc(100vh - 255px);
}

.learn-showed:before {
    content   : '';
    display   : block;
    width     : 100%;
    height    : 100%;
    position  : fixed;
    background: rgba(0, 0, 0, 0.4);
    z-index   : 1;
    left      : 0;
    top       : 0;
    z-index   : 2;
}

.learn-showed * {
    position: relative;
    z-index : 3;
}

.learn-showed h5 {
    color: #fff;
}

.learn_block {
    display      : none;
    position     : fixed;
    bottom       : 0;
    padding      : 15px;
    z-index      : 3;
    background   : #fff;
    width        : 60%;
    left         : 20%;
    bottom       : 15px;
    border-radius: 5px;
}

.learn_block.show {
    display: block;
}

.learn_block-buttons {
    display         : -webkit-box;
    display         : -ms-flexbox;
    display         : flex;
    -webkit-box-pack: end;
    -ms-flex-pack   : end;
    justify-content : flex-end;
}

li[rel] {
    cursor: pointer;
}

.learn_block-buttons li {
    list-style : none;
    margin-left: 15px;
}

.learn_block a {
    color: var(--green);
}

.helper-block {
    position     : absolute;
    right        : 30px;
    bottom       : 30px;
    cursor       : pointer;
    background   : #fff;
    border-radius: 100%;
}

.helper-block svg {
    width : 40px;
    height: 40px;
}

.helper-block_items {
    display      : none;
    bottom       : 0;
    right        : 60px;
    width        : 300px;
    background   : #fff;
    border-radius: 5px;
    position     : absolute;
}

.helper-block_items.show {
    display: block;
}

.helper-block_items ul {
    margin-top: 1rem;
}

.helper-block_bots {
    display : none;
    position: absolute;
    bottom  : 50px;
    right   : -10px;
}

.helper-block_bots.show {
    display: block;
}

.helper-block_bots a {
    background   : #fff;
    display      : -webkit-box;
    display      : -ms-flexbox;
    display      : flex;
    border-radius: 100%;
    padding      : 10px;
    margin-bottom: 10px;
}

.language-switcher {
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    display          : none;
    border-left      : 1px solid var(--lightgreen);
    padding-left     : 10px;
}

.language-switcher a.active {
    display: none;
}

.lang-switcher {
    position     : absolute;
    display      : -webkit-box;
    display      : -ms-flexbox;
    display      : flex;
    top          : 1px;
    right        : 1px;
    background   : var(--light);
    color        : #000;
    font-size    : 0;
    border-radius: 2px;
    overflow     : hidden;
}

.lang-switcher span {
    border             : 1px solid #bfc9d4;
    display            : inline-block;
    width              : 30px;
    text-align         : center;
    padding            : 5px;
    font-size          : 14px;
    border-right       : 0;
    border-top         : 0;
    cursor             : pointer;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none;
}

.lang-switcher span.active {
    background: var(--green);
    color     : var(--white);
    border    : 1px solid var(--green);
}

.lang-tabs {
    position: relative;
}

.lang-tabs .lang-tab {
    display: none
}

.lang-tabs .lang-tab.active {
    display: block;
}

.lang-tab textarea {
    padding: .375rem 62px .375rem .75rem;
}

.relative {
    position: relative;
}

.lang-switcher.buttons {
    right: 20px;
    top  : 10px;
}

.lang-switcher.buttons span {
    border: 1px solid #bfc9d4;
}

.lang-switcher.buttons span.active {
    border: 1px solid var(--green);
}

.promo {
    max-width: 250px;
}

.promocodes .flatpickr-input_range.flatpickr-input[readonly] {
    border: 1px solid #bfc9d4;
}

#promocode_types>div {
    display: none;
}

.editable {
    font-size: 14px;
    padding  : 10px;
    border   : 1px solid #bfc9d4;
}

#input-search {
    border: 0;
}
.svg-loader{
    margin: auto;
    display: block;
}
.list-items .user-phone h4,.list-items .user-message h4{
    margin-left: 3px;
}