:root {
		--white     : #ffffff;
		--mainColor : #3b3f5c;
		--gray      : #888ea8;
		--light     : #f1f2f3;
		--green     : #15949a;
		--lightgreen: #2ad1c9;
		/* dark theme */
		/* --green  : #3b3b3b;
	    --white  : #565656;
	    --light  : #484848; */
	}

	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 {
		transition: all 0.5s;
	}

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

	.btn-primary {
		background-color: var(--green);
		border-color    : var(--green);
	}

	.auth {
		display        : flex;
		justify-content: center;
		align-items    : center;
	}

	.form-content {
		display       : flex;
		align-items   : center;
		flex-direction: column;
		min-width     : 480px;
		max-width     : 100%;
		padding       : 25px;
		background    : var(--white);
		text-align    : center;
		border-radius : 15px;
		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 {
		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         : flex;
		padding         : 0 15px;
		position        : fixed;
		width           : 100%;
		top             : 0;
		min-height      : 54px;
		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        : flex;
		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        : flex;
		margin         : 0;
		padding        : 0;
		list-style     : none;
		margin-right   : 20px;
		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         : flex;
		background-color: var(--white);
		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 {
		width                      : 260px;
		position                   : fixed;
		z-index                    : 1;
		border-radius              : 6px 6px 0 0;
		transition                 : 0.6s;
		height                     : 100vh;
		touch-action               : none;
		user-select                : none;
		-webkit-user-drag          : none;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		top                        : 106px;
		left                       : 16px;
		border-top-right-radius    : 0;
		border-right               : 1px solid #e0e6ed;
	}

	.row-layout {
		background-color: var(--white);
		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     : 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;
		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);
		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;
	}

	.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;
		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;
		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;
		flex-direction    : row;
		-ms-flex-align    : center;
		align-items       : center;
		padding           : 0.75rem 0.625rem;
		position          : relative;
		display           : inline-flex;
		min-width         : 0;
		word-wrap         : break-word;
		justify-content   : space-between;
		background        : #fff;
		margin-bottom     : 8px;
		border-radius     : 6px;
		padding           : 13px 18px;
		width             : 100%;
		min-width         : 767px;
		transition        : all 0.35s ease;
		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);
		transform        : translateY(0) scale(1.01);
	}

	.item-content>div {
		flex-basis: 20%;
		display   : flex;
	}

	.list .list-items .item .user-profile {
		display: flex;
	}

	.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;
		justify-content: flex-end;
		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);
		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);
		-moz-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           : flex;
		justify-content   : space-between;
	}

	.paginating-container {
		display        : flex;
		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           : 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);
		-moz-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;
	}

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

	.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);
	}

	.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% - 120px);
		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        : flex;
		justify-content: center;
	}

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

	.no-message p {
		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              : flex;
		align-items          : center;
		clear                : both;
		margin-bottom        : 8px;
		padding              : 9px 18px;
		vertical-align       : top;
		-moz-border-radius   : 5px;
		-webkit-border-radius: 5px;
		border-radius        : 5px;
		word-break           : break-word;
		max-width            : 470px;
		background           : var(--white);
		color                : var(--green);
		flex-direction       : column;
		align-items          : start;
	}

	@media (max-width: 768px) {
		.message {
			max-width: 320px;
		}
	}

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

	.image .additional {
		display: block;
	}

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

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

	#file p {
		color     : var(--lightgreen);
		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";
		-moz-transform   : rotate(29deg) skew(-35deg);
		-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;
		text-align: right;
	}

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

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

	.chat-meta-user {
		display                : flex;
		width                  : 100%;
		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;
		align-self            : flex-start;
		-moz-animation-name   : slideFromLeft;
		-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;
		-moz-border-radius   : 5px;
		-webkit-border-radius: 5px;
		border-radius        : 5px;
		word-break           : break-word;
		max-width            : 370px;
	}

	.events .checkbox-primary {
		align-items    : center;
		justify-content: center;
	}

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

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

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

	.radio-primary {
		position    : relative;
		padding-left: 20px;
		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;
		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 {
		flex-basis: 55%;
	}

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

	.item-content--category_actions {
		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);
		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: auto;
	}

	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;
		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    : flex;
		align-items: center;
		flex-wrap  : wrap;
	}

	.mediafiles_videos {
		flex-basis: 100%;
	}

	.mediafiles .mediafiles_item {
		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;
		flex-basis: unset;
		max-height: none;
	}

	.mediafiles_item img {
		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 {
		box-shadow   : 0px 2px 4px rgba(126, 142, 177, 0.12);
		background   : #fff;
		border-radius: 6px;
	}

	.statistic_row {
		display        : flex;
		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;
		animation-name           : blinker;
		animation-iteration-count: infinite;
		animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
		animation-duration       : 1s;
	}

	.shake {
		animation          : shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
		transform          : translate3d(0, 0, 0);
		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;
	}

	.table 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 {
		box-shadow: none;
	}

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

		body.tunnels tr {
			display  : flex;
			flex-wrap: wrap;
		}

		body.tunnels tbody {
			display: flex;
		}

		body.tunnels thead {
			display   : flex;
			flex-basis: 50%;
			max-width : 50%;
		}

		body.tunnels th {
			display   : flex;
			flex-basis: 100%;
		}

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

	.gray {
		color    : var(--gray);
		font-size: 14px;
	}

	.gray:hover,
	.gray::selection {
		color: var(--green);
	}

	.translates .col {
		flex-basis: 400px;
	}

	.translates .col .form-control {
		background: #c3c3c3;
	}

	.languages {
		display        : flex;
		justify-content: flex-end;
	}

	.languages div {
		padding      : 5px;
		background   : var(--lightgreen);
		color        : var(--white);
		border-radius: 3px;
		margin-left  : 5px;
		cursor       : pointer;
		user-select  : none;
	}

	.languages div.active {
		background: var(--green);
	}
	
	.js_change-active .feather-check {
		stroke: #c3c3c3;
	}

	.js_change-active.active .feather-check {
		stroke: var(--green);
	}
	.js_sort-phone{
		cursor: pointer;
	}