/*
	===============================
			@Import	Function
	===============================
*/
/*
	===============================
			@Import	Mixins
	===============================
*/
div#load_screen {
  background: #e0f0ef;
  opacity: 1;
  position: fixed;
  z-index: 999999;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%; }
  div#load_screen .loader {
    display: flex;
    justify-content: center;
    height: 100vh;
    border: none;
    animation: none;
    width: 100%; }
  div#load_screen .loader-content {
    right: 0;
    align-self: center; }

.spinner-grow {
  color: #009688; }

/*
	===============================
			@Import	Function
	===============================
*/
/*
	===============================
			@Import	Mixins
	===============================
*/
html {
  min-height: 100%; }

body {
  color: #888ea8;
  height: 100%;
  font-size: 0.875rem;
  background: #f1f2f3;
  overflow-x: hidden;
  overflow-y: auto;
  letter-spacing: 0.0312rem;
  font-family: 'Quicksand', sans-serif; }

h1, h2, h3, h4, h5, h6 {
  color: #3b3f5c; }

:focus {
  outline: none; }

::-moz-selection {
  /* Code for Firefox */
  color: #4361ee;
  background: transparent; }

::selection {
  color: #4361ee;
  background: transparent; }

p {
  margin-top: 0;
  margin-bottom: 0.625rem;
  color: #515365; }

hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border-top: 1px solid #f1f2f3; }

strong {
  font-weight: 600; }

code {
  color: #e7515a; }

select.form-custom::-ms-expand {
  display: none; }

.custom-file-input:focus ~ .custom-file-label {
  border: 1px solid #ced4da;
  box-shadow: none; }
  .custom-file-input:focus ~ .custom-file-label::after {
    border: none;
    border-left: 1px solid #ced4da; }

.lead a.btn.btn-primary.btn-lg {
  margin-top: 15px;
  border-radius: 4px; }

.jumbotron {
  background-color: #f1f2f3; }

.mark, mark {
  background-color: #fff9ed; }

.code-section-container {
  margin-top: 20px;
  text-align: left; }

.toggle-code-snippet {
  border: none;
  background-color: transparent !important;
  padding: 0px !important;
  box-shadow: none !important;
  color: #888ea8 !important;
  margin-bottom: -24px;
  border-bottom: 1px dashed #bfc9d4;
  border-radius: 0; }
  .toggle-code-snippet svg {
    color: #4361ee; }

.code-section {
  padding: 0;
  height: 0; }

.code-section-container.show-code .code-section {
  margin-top: 20px;
  height: auto; }

.code-section pre {
  margin-bottom: 0;
  height: 0;
  padding: 0;
  border-radius: 6px; }

.code-section-container.show-code .code-section pre {
  height: auto;
  padding: 22px; }

.code-section code {
  color: #fff; }

/*blockquote*/
blockquote.blockquote {
  color: #0e1726;
  padding: 20px 20px 20px 14px;
  font-size: 0.875rem;
  background-color: #ffffff;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  border: 1px solid #e0e6ed;
  border-left: 2px solid #4361ee;
  -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); }
  blockquote.blockquote > p {
    margin-bottom: 0; }

blockquote .small:before, blockquote footer:before, blockquote small:before {
  content: '\2014 \00A0'; }

blockquote .small, blockquote footer, blockquote small {
  display: block;
  font-size: 80%;
  line-height: 1.42857143;
  color: #777; }

blockquote.media-object.m-o-border-right {
  border-right: 4px solid #4361ee;
  border-left: none; }

blockquote.media-object .media .usr-img img {
  width: 55px; }

/* Icon List */
.list-icon {
  list-style: none;
  padding: 0;
  margin-bottom: 0; }
  .list-icon li:not(:last-child) {
    margin-bottom: 15px; }
  .list-icon svg {
    width: 18px;
    height: 18px;
    color: #4361ee;
    margin-right: 2px;
    vertical-align: sub; }
  .list-icon .list-text {
    font-size: 14px;
    font-weight: 600;
    color: #515365;
    letter-spacing: 1px; }

a {
  color: #515365;
  outline: none; }
  a:hover {
    color: #555555;
    text-decoration: none; }
  a:focus {
    outline: none;
    text-decoration: none; }

button:focus {
  outline: none; }

textarea {
  outline: none; }
  textarea:focus {
    outline: none; }

.btn-link:hover {
  text-decoration: none; }

span.blue {
  color: #4361ee; }

span.green {
  color: #1abc9c; }

span.red {
  color: #e7515a; }

/*      Form Group Label       */
.form-group label, label {
  font-size: 15px;
  color: #888ea8;
  letter-spacing: 1px; }

/*  Disable forms     */
.custom-control-input:disabled ~ .custom-control-label {
  color: #d3d3d3; }

/*      Form Control       */
.form-control {
  height: auto;
  border: 1px solid #bfc9d4;
  color: #3b3f5c;
  font-size: 15px;
  padding: 8px 10px;
  letter-spacing: 1px;
  height: calc(1.4em + 1.4rem + 2px);
  padding: .75rem 1.25rem;
  border-radius: 6px; }
  .form-control[type="range"] {
    padding: 0; }
  .form-control:focus {
    box-shadow: 0 0 5px 2px rgba(194, 213, 255, 0.619608);
    border-color: #4361ee;
    color: #3b3f5c; }
  .form-control::-webkit-input-placeholder, .form-control::-ms-input-placeholder, .form-control::-moz-placeholder {
    color: #bfc9d4;
    font-size: 15px; }
  .form-control:focus::-webkit-input-placeholder, .form-control:focus::-ms-input-placeholder, .form-control:focus::-moz-placeholder {
    color: #d3d3d3;
    font-size: 15px; }
  .form-control.form-control-lg {
    font-size: 19px;
    padding: 11px 20px; }
  .form-control.form-control-sm {
    padding: 7px 16px;
    font-size: 13px; }

/*      Custom Select       */
.custom-select {
  height: auto;
  border: 1px solid #f1f2f3;
  color: #3b3f5c;
  font-size: 15px;
  padding: 8px 10px;
  letter-spacing: 1px;
  background-color: #f1f2f3; }
  .custom-select.custom-select-lg {
    font-size: 18px;
    padding: 16px 20px; }
  .custom-select.custom-select-sm {
    font-size: 13px;
    padding: 7px 16px; }
  .custom-select:focus {
    box-shadow: none;
    border-color: #4361ee;
    color: #3b3f5c; }

/*      Form Control File       */
.form-control-file {
  width: 100%;
  color: #805dca; }
  .form-control-file::-webkit-file-upload-button {
    letter-spacing: 1px;
    padding: 9px 20px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    font-weight: normal;
    white-space: normal;
    word-wrap: break-word;
    transition: .2s ease-out;
    touch-action: manipulation;
    cursor: pointer;
    background-color: #805dca;
    box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
    will-change: opacity, transform;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    border-radius: 4px;
    border: transparent;
    outline: none; }
  .form-control-file::-ms-file-upload-button {
    letter-spacing: 1px;
    padding: 9px 20px;
    text-shadow: none;
    font-size: 14px;
    color: #fff;
    font-weight: normal;
    white-space: normal;
    word-wrap: break-word;
    transition: .2s ease-out;
    touch-action: manipulation;
    cursor: pointer;
    background-color: #805dca;
    box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
    will-change: opacity, transform;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    border-radius: 4px;
    border: transparent;
    outline: none; }
  .form-control-file.form-control-file-rounded::-webkit-file-upload-button {
    -webkit-border-radius: 1.875rem !important;
    -moz-border-radius: 1.875rem !important;
    -ms-border-radius: 1.875rem !important;
    -o-border-radius: 1.875rem !important;
    border-radius: 1.875rem !important; }

select.form-control.form-custom {
  display: inline-block;
  width: 100%;
  height: calc(2.25rem + 2px);
  vertical-align: middle;
  background: #fff url(../img/arrow-down.png) no-repeat right 0.75rem center;
  background-size: 13px 14px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

/*      Form Control Custom File       */
.custom-file {
  height: auto; }
  .custom-file input {
    height: auto; }

.custom-file-label {
  height: auto;
  border: 1px solid #f1f2f3;
  color: #3b3f5c;
  font-size: 15px;
  padding: 8px 10px;
  letter-spacing: 1px;
  background-color: #f1f2f3; }
  .custom-file-label::after {
    height: auto;
    padding: 8px 12px;
    color: #515365; }

/*      Input Group      */
.input-group button:hover, .input-group .btn:hover, .input-group button:focus, .input-group .btn:focus {
  transform: none; }

.input-group .dropdown-menu {
  border: none;
  border: 1px solid #e0e6ed;
  z-index: 1028;
  box-shadow: none;
  padding: 10px;
  padding: .35rem 0;
  top: 0 !important;
  right: auto;
  border-radius: 8px; }
  .input-group .dropdown-menu a.dropdown-item {
    border-radius: 5px;
    width: 100%;
    padding: 6px 17px;
    clear: both;
    font-weight: 500;
    color: #030305;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    font-size: 13px; }
    .input-group .dropdown-menu a.dropdown-item:hover {
      color: #2196f3; }
  .input-group .dropdown-menu .dropdown-item:hover {
    color: #2196f3; }

.input-group .dropdown-divider {
  height: 0;
  margin: .5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef; }

.input-group .input-group-prepend .input-group-text {
  border: 1px solid #bfc9d4;
  background-color: #f1f2f3; }
  .input-group .input-group-prepend .input-group-text svg {
    color: #888ea8; }

.input-group:hover .input-group-prepend .input-group-text svg {
  color: #4361ee;
  fill: rgba(27, 85, 226, 0.239216); }

.input-group .input-group-append .input-group-text {
  border: 1px solid #bfc9d4;
  background-color: #f1f2f3; }
  .input-group .input-group-append .input-group-text svg {
    color: #888ea8; }

.input-group:hover .input-group-append .input-group-text svg {
  color: #4361ee;
  fill: rgba(27, 85, 226, 0.239216); }

/*      Input Group append       */
/*      Input Group Append       */
/*      Validation Customization      */
.invalid-feedback {
  color: #e7515a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px; }

.valid-feedback {
  color: #1abc9c;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px; }

.valid-tooltip {
  background-color: #1abc9c; }

.invalid-tooltip {
  background-color: #e7515a; }

.custom-select.is-valid, .form-control.is-valid {
  border-color: #1abc9c;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231abc9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e"); }

.was-validated .custom-select:valid, .was-validated .form-control:valid {
  border-color: #1abc9c;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231abc9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e"); }

.custom-control-input.is-valid ~ .custom-control-label, .was-validated .custom-control-input:valid ~ .custom-control-label {
  color: #1abc9c; }

.form-control.is-invalid, .was-validated .form-control:invalid {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e7515a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e"); }

.custom-control-input.is-invalid ~ .custom-control-label, .was-validated .custom-control-input:invalid ~ .custom-control-label {
  color: #e7515a; }

.dropdown-toggle:after, .dropup .dropdown-toggle::after, .dropright .dropdown-toggle::after, .dropleft .dropdown-toggle::before {
  display: none; }

.dropdown-toggle svg.feather[class*="feather-chevron-"] {
  width: 15px;
  height: 15px;
  vertical-align: middle; }

.btn {
  padding: 0.4375rem 1.25rem;
  text-shadow: none;
  font-size: 14px;
  color: #3b3f5c;
  font-weight: normal;
  white-space: normal;
  word-wrap: break-word;
  transition: .2s ease-out;
  touch-action: manipulation;
  cursor: pointer;
  background-color: #f1f2f3;
  box-shadow: 0px 5px 20px 0 rgba(0, 0, 0, 0.1);
  will-change: opacity, transform;
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out; }
  .btn svg {
    width: 20px;
    height: 20px;
    vertical-align: bottom; }
  .btn.rounded-circle {
    height: 40px;
    width: 40px;
    padding: 8px 8px; }
  .btn:hover, .btn:focus {
    color: #3b3f5c;
    background-color: #f1f2f3;
    border-color: #d3d3d3;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 #e0e6ed,0 2px 10px 0 #e0e6ed;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px); }

.btn-group .btn:hover, .btn-group .btn:focus {
  -webkit-transform: none;
  transform: none; }

.btn.disabled, .btn.btn[disabled] {
  background-color: #f1f2f3;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border: 1px solid rgba(0, 0, 0, 0.13); }

.btn.disabled:hover, .btn.btn[disabled]:hover {
  cursor: not-allowed; }

.btn .caret {
  border-top-color: #0e1726;
  margin-top: 0;
  margin-left: 3px;
  vertical-align: middle; }

.btn + .caret, .btn + .dropdown-toggle .caret {
  margin-left: 0; }

.btn-group > .btn, .btn-group .btn {
  padding: 8px 14px; }

.btn-group-lg > .btn, .btn-group-lg .btn {
  font-size: 1.125rem; }

.btn-group-lg > .btn {
  padding: .625rem 1.5rem;
  font-size: 16px; }

.btn-lg {
  padding: .625rem 1.5rem;
  font-size: 16px; }

.btn-group > .btn.btn-lg, .btn-group .btn.btn-lg {
  padding: .625rem 1.5rem;
  font-size: 16px; }

.btn-group-lg > .btn, .btn-group-lg .btn {
  font-size: 1.125rem; }

.btn-group-sm > .btn, .btn-sm {
  font-size: 0.6875rem; }

.btn-group > .btn.btn-sm, .btn-group .btn.btn-sm {
  font-size: 0.6875rem; }

.btn-group .dropdown-menu {
  border: none;
  border: 1px solid #e0e6ed;
  z-index: 1028;
  box-shadow: none;
  padding: 10px;
  padding: .35rem 0;
  top: 0 !important;
  right: auto;
  border-radius: 8px;
 }
  .btn-group .dropdown-menu a.dropdown-item {
    border-radius: 5px;
    width: 100%;
    padding: 6px 17px;
    clear: both;
    font-weight: 500;
    color: #030305;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    font-size: 13px; }
    .btn-group .dropdown-menu a.dropdown-item:hover {
      color: #2196f3; }
    .btn-group .dropdown-menu a.dropdown-item svg {
      cursor: pointer;
      color: #888ea8;
      margin-right: 6px;
      vertical-align: middle;
      width: 20px;
      height: 20px;
      fill: rgba(0, 23, 55, 0.08); }
    .btn-group .dropdown-menu a.dropdown-item:hover svg {
      color: #4361ee; }

.dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu {
  border: none;
  border: 1px solid #e0e6ed;
  z-index: 899;
  box-shadow: none;
  padding: 10px;
  padding: .35rem 0;
  transition: top 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s, visibility 0.3s ease-in-out 0s;
  opacity: 0;
  visibility: hidden;
  display: block !important;
  transform: none !important;
  top: 0 !important;
  right: 0;
  left: auto !important;
  border-radius: 8px; }
  .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu.right {
    right: auto;
    left: auto !important; }
  .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu.left {
    right: 0;
    left: auto !important; }
  .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    top: 21px !important; }
  .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu a.dropdown-item {
    border-radius: 5px;
    display: block;
    width: 100%;
    padding: 6px 17px;
    clear: both;
    font-weight: 500;
    color: #030305;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    font-size: 13px; }
    .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu a.dropdown-item svg {
      width: 18px;
      height: 18px;
      margin-right: 4px;
      vertical-align: bottom;
      color: #888ea8; }
    .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu a.dropdown-item:hover svg {
      color: #2196f3; }
    .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu a.dropdown-item.active, .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu a.dropdown-item:active {
      background-color: transparent;
      color: #3b3f5c;
      font-weight: 700; }
    .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu a.dropdown-item:hover {
      color: #2196f3; }

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: none; }

.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: none; }

.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.show > .btn-success.dropdown-toggle:focus {
  box-shadow: none; }

.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.show > .btn-info.dropdown-toggle:focus {
  box-shadow: none; }

.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: none; }

.btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: none; }

.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: none; }

.btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.show > .btn-dark.dropdown-toggle:focus {
  box-shadow: none; }

.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: none; }

.btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.show > .btn-outline-success.dropdown-toggle:focus {
  box-shadow: none; }

.btn-outline-info:not(:disabled):not(.disabled).active:focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.show > .btn-outline-info.dropdown-toggle:focus {
  box-shadow: none; }

.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.show > .btn-outline-danger.dropdown-toggle:focus {
  box-shadow: none; }

.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .btn-outline-warning:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.show > .btn-outline-warning.dropdown-toggle:focus {
  box-shadow: none; }

.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.show > .btn-outline-secondary.dropdown-toggle:focus {
  box-shadow: none; }

.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus {
  box-shadow: none; }

.show > .btn-outline-dark.dropdown-toggle:focus {
  box-shadow: none; }

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

.btn-success:focus, .btn-info:focus, .btn-danger:focus, .btn-warning:focus, .btn-secondary:focus, .btn-dark:focus, .btn-outline-success:focus, .btn-outline-info:focus, .btn-outline-danger:focus, .btn-outline-warning:focus, .btn-outline-secondary:focus, .btn-outline-dark:focus .btn-light-default:focus, .btn-light-primary:focus, .btn-light-success:focus, .btn-light-info:focus, .btn-light-danger:focus, .btn-light-warning:focus, .btn-light-secondary:focus, .btn-light-dark:focus {
  box-shadow: none; }

/*      Default Buttons       */
.btn-primary {
  color: #fff !important;
  background-color: #4361ee !important;
  border-color: #4361ee; }
  .btn-primary:hover, .btn-primary:focus {
    color: #fff !important;
    background-color: #4361ee;
    box-shadow: none;
    border-color: #4361ee; }
  .btn-primary:active, .btn-primary.active {
    background-color: #4361ee;
    border-top: 1px solid #4361ee; }
  .btn-primary.disabled, .btn-primary.btn[disabled], .btn-primary:disabled {
    background-color: #4361ee;
    border-color: #4361ee;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none; }
  .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover {
    color: #fff !important;
    background-color: #2aebcb;
    border-color: #2aebcb; }
  .btn-primary.focus:active {
    color: #fff !important;
    background-color: #2aebcb;
    border-color: #2aebcb; }
  .btn-primary:active:focus, .btn-primary:active:hover {
    color: #fff !important;
    background-color: #2aebcb;
    border-color: #2aebcb; }

.open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover {
  color: #fff !important;
  background-color: #2aebcb;
  border-color: #2aebcb; }

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
  color: #fff !important;
  background-color: #4361ee;
  border-color: #4361ee; }

.show > .btn-primary.dropdown-toggle {
  color: #fff !important;
  background-color: #4361ee;
  border-color: #4361ee; }

.btn-primary .caret {
  border-top-color: #fff; }

.btn-group.open .btn-primary.dropdown-toggle {
  background-color: #eaf1ff; }

.btn-secondary {
  color: #fff !important;
  background-color: #805dca;
  border-color: #805dca; }
  .btn-secondary:hover, .btn-secondary:focus {
    color: #fff !important;
    background-color: #805dca;
    box-shadow: none;
    border-color: #805dca; }
  .btn-secondary:active, .btn-secondary.active {
    background-color: #805dca;
    border-top: 1px solid #805dca; }
  .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active {
    color: #fff !important;
    background-color: #805dca;
    border-color: #805dca; }

.show > .btn-secondary.dropdown-toggle {
  color: #fff !important;
  background-color: #805dca;
  border-color: #805dca; }

.btn-secondary.disabled, .btn-secondary.btn[disabled], .btn-secondary:disabled {
  background-color: #805dca;
  border-color: #805dca;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

.btn-secondary .caret {
  border-top-color: #fff; }

.btn-info {
  color: #fff !important;
  background-color: #2196f3;
  border-color: #2196f3; }
  .btn-info:hover, .btn-info:focus {
    color: #fff !important;
    background-color: #2196f3;
    box-shadow: none;
    border-color: #2196f3; }
  .btn-info:active, .btn-info.active {
    background-color: #2196f3;
    border-top: 1px solid #2196f3; }
  .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active {
    color: #fff !important;
    background-color: #2196f3;
    border-color: #2196f3; }

.show > .btn-info.dropdown-toggle {
  color: #fff !important;
  background-color: #2196f3;
  border-color: #2196f3; }

.btn-info.disabled, .btn-info.btn[disabled], .btn-info:disabled {
  background-color: #2196f3;
  border-color: #2196f3;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

.btn-info.active.focus, .btn-info.active:focus, .btn-info.active:hover {
  color: #fff !important;
  background-color: #2196f3;
  border-color: #2196f3; }

.btn-info.focus:active {
  color: #fff !important;
  background-color: #2196f3;
  border-color: #2196f3; }

.btn-info:active:focus, .btn-info:active:hover {
  color: #fff !important;
  background-color: #2196f3;
  border-color: #2196f3; }

.open > .dropdown-toggle.btn-info.focus, .open > .dropdown-toggle.btn-info:focus, .open > .dropdown-toggle.btn-info:hover {
  color: #fff !important;
  background-color: #2196f3;
  border-color: #2196f3; }

.btn-info .caret {
  border-top-color: #fff; }

.btn-group.open .btn-info.dropdown-toggle {
  background-color: #e7f7ff; }

.btn-warning {
  color: #fff !important;
  background-color: #e2a03f;
  border-color: #e2a03f; }
  .btn-warning:hover, .btn-warning:focus {
    color: #fff !important;
    background-color: #e2a03f;
    box-shadow: none;
    border-color: #e2a03f; }
  .btn-warning:active, .btn-warning.active {
    background-color: #e2a03f;
    border-top: 1px solid #e2a03f; }
  .btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active {
    color: #0e1726;
    background-color: #e2a03f;
    border-color: #e2a03f; }

.show > .btn-warning.dropdown-toggle {
  color: #0e1726;
  background-color: #e2a03f;
  border-color: #e2a03f; }

.btn-warning.disabled, .btn-warning.btn[disabled], .btn-warning:disabled {
  background-color: #e2a03f;
  border-color: #e2a03f;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover {
  color: #fff !important;
  background-color: #e2a03f;
  border-color: #e2a03f; }

.btn-warning.focus:active {
  color: #fff !important;
  background-color: #e2a03f;
  border-color: #e2a03f; }

.btn-warning:active:focus, .btn-warning:active:hover {
  color: #fff !important;
  background-color: #e2a03f;
  border-color: #e2a03f; }

.open > .dropdown-toggle.btn-warning.focus, .open > .dropdown-toggle.btn-warning:focus, .open > .dropdown-toggle.btn-warning:hover {
  color: #fff !important;
  background-color: #e2a03f;
  border-color: #e2a03f; }

.btn-warning .caret {
  border-top-color: #fff; }

.btn-group.open .btn-warning.dropdown-toggle {
  background-color: #df8505; }

.btn-danger {
  color: #fff !important;
  background-color: #e7515a;
  border-color: #e7515a; }
  .btn-danger:hover, .btn-danger:focus {
    color: #fff !important;
    background-color: #e7515a;
    box-shadow: none;
    border-color: #e7515a; }
  .btn-danger:active, .btn-danger.active {
    background-color: #e7515a;
    border-top: 1px solid #e7515a; }
  .btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active {
    color: #fff !important;
    background-color: #e7515a;
    border-color: #e7515a; }

.show > .btn-danger.dropdown-toggle {
  color: #fff !important;
  background-color: #e7515a;
  border-color: #e7515a; }

.btn-danger.disabled, .btn-danger.btn[disabled], .btn-danger:disabled {
  background-color: #e7515a;
  border-color: #e7515a;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

.btn-danger.active.focus, .btn-danger.active:focus, .btn-danger.active:hover {
  color: #fff !important;
  background-color: #c00;
  border-color: #c00; }

.btn-danger.focus:active {
  color: #fff !important;
  background-color: #c00;
  border-color: #c00; }

.btn-danger:active:focus, .btn-danger:active:hover {
  color: #fff !important;
  background-color: #c00;
  border-color: #c00; }

.open > .dropdown-toggle.btn-danger.focus, .open > .dropdown-toggle.btn-danger:focus, .open > .dropdown-toggle.btn-danger:hover {
  color: #fff !important;
  background-color: #c00;
  border-color: #c00; }

.btn-danger .caret {
  border-top-color: #fff; }

.btn-group.open .btn-danger.dropdown-toggle {
  background-color: #a9302a; }

.btn-dark {
  color: #fff !important;
  background-color: #3b3f5c;
  border-color: #3b3f5c; }
  .btn-dark:hover, .btn-dark:focus {
    color: #fff !important;
    background-color: #3b3f5c;
    box-shadow: none;
    border-color: #3b3f5c; }
  .btn-dark:active, .btn-dark.active {
    background-color: #3b3f5c;
    border-top: 1px solid #3b3f5c; }
  .btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active {
    color: #fff !important;
    background-color: #3b3f5c;
    border-color: #3b3f5c; }

.show > .btn-dark.dropdown-toggle {
  color: #fff !important;
  background-color: #3b3f5c;
  border-color: #3b3f5c; }

.btn-dark.disabled, .btn-dark.btn[disabled], .btn-dark:disabled {
  background-color: #3b3f5c;
  border-color: #3b3f5c;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

.btn-dark .caret {
  border-top-color: #fff; }

.btn-group.open .btn-dark.dropdown-toggle {
  background-color: #484848; }

.btn-success {
  color: #fff !important;
  background-color: #1abc9c;
  border-color: #1abc9c; }
  .btn-success:hover, .btn-success:focus {
    color: #fff !important;
    background-color: #1abc9c;
    box-shadow: none;
    border-color: #1abc9c; }
  .btn-success:active, .btn-success.active {
    background-color: #1abc9c;
    border-top: 1px solid #1abc9c; }
  .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active {
    color: #fff !important;
    background-color: #1abc9c;
    border-color: #1abc9c; }

.show > .btn-success.dropdown-toggle {
  color: #fff !important;
  background-color: #1abc9c;
  border-color: #1abc9c; }

.btn-success.disabled, .btn-success.btn[disabled], .btn-success:disabled {
  background-color: #1abc9c;
  border-color: #1abc9c;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover {
  color: #fff !important;
  background-color: #17c678;
  border-color: #17c678; }

.btn-success.focus:active {
  color: #fff !important;
  background-color: #17c678;
  border-color: #17c678; }

.btn-success:active:focus, .btn-success:active:hover {
  color: #fff !important;
  background-color: #17c678;
  border-color: #17c678; }

.open > .dropdown-toggle.btn-success.focus, .open > .dropdown-toggle.btn-success:focus, .open > .dropdown-toggle.btn-success:hover {
  color: #fff !important;
  background-color: #17c678;
  border-color: #17c678; }

.btn-success .caret {
  border-top-color: #fff; }

/*-----/Button Light Colors------*/
.btn.box-shadow-none {
  border: none; }
  .btn.box-shadow-none:hover, .btn.box-shadow-none:focus {
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: transparent; }

.box-shadow-none {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important; }

.btn.box-shadow-none:not(:disabled):not(.disabled).active, .btn.box-shadow-none:not(:disabled):not(.disabled):active {
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: transparent; }

.show > .btn.box-shadow-none.dropdown-toggle {
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  background-color: transparent; }

.btn-group.open .btn-success.dropdown-toggle {
  background-color: #499249; }

.btn-dismiss {
  color: #0e1726;
  background-color: #fff !important;
  border-color: #fff;
  padding: 3px 7px; }
  .btn-dismiss:hover, .btn-dismiss:focus {
    color: #0e1726;
    background-color: #fff; }
  .btn-dismiss:active, .btn-dismiss.active {
    background-color: #fff;
    border-top: 1px solid #fff; }

.btn-group > .btn i {
  margin-right: 3px; }

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.16), 0 0px 0px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.16), 0 0px 0px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.16), 0 0px 0px 0 rgba(0, 0, 0, 0.12); }

.btn-group > .btn + .dropdown-toggle {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }
  .btn-group > .btn + .dropdown-toggle.btn-primary {
    border-left: 1px solid #4468fd; }
  .btn-group > .btn + .dropdown-toggle.btn-success {
    border-left: 1px solid #a3c66f; }
  .btn-group > .btn + .dropdown-toggle.btn-info {
    border-left: 1px solid #49acfb; }
  .btn-group > .btn + .dropdown-toggle.btn-warning {
    border-left: 1px solid #f5b455; }
  .btn-group > .btn + .dropdown-toggle.btn-danger {
    border-left: 1px solid #f1848b; }
  .btn-group > .btn + .dropdown-toggle.btn-dark {
    border-left: 1px solid #70767a; }
  .btn-group > .btn + .dropdown-toggle.btn-secondary {
    border-left: 1px solid #8353dc; }

.btn-group.dropleft .dropdown-toggle-split {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

.btn-group.dropleft .btn-primary:not(.dropdown-toggle-split) {
  border-left: 1px solid #4468fd; }

.btn-group.dropleft .btn-success:not(.dropdown-toggle-split) {
  border-left: 1px solid #a3c66f; }

.btn-group.dropleft .btn-info:not(.dropdown-toggle-split) {
  border-left: 1px solid #49acfb; }

.btn-group.dropleft .btn-warning:not(.dropdown-toggle-split) {
  border-left: 1px solid #f5b455; }

.btn-group.dropleft .btn-danger:not(.dropdown-toggle-split) {
  border-left: 1px solid #f1848b; }

.btn-group.dropleft .btn-dark:not(.dropdown-toggle-split) {
  border-left: 1px solid #70767a; }

.btn-group.dropleft .btn-secondary:not(.dropdown-toggle-split) {
  border-left: 1px solid #8353dc; }

/*
    Btn group dropdown-toggle
*/
.btn .badge.badge-align-right {
  position: absolute;
  top: -1px;
  right: 8px; }

.dropup .btn .caret {
  border-bottom-color: #0e1726; }

.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active {
  background-color: #4361ee;
  color: #fff !important; }

.show > .btn-outline-primary.dropdown-toggle {
  background-color: #4361ee;
  color: #fff !important; }

.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active {
  background-color: #1abc9c;
  color: #fff !important; }

.show > .btn-outline-success.dropdown-toggle {
  background-color: #1abc9c;
  color: #fff !important; }

.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active {
  background-color: #2196f3;
  color: #fff !important; }

.show > .btn-outline-info.dropdown-toggle {
  background-color: #2196f3;
  color: #fff !important; }

.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active {
  background-color: #e7515a;
  color: #fff !important; }

.show > .btn-outline-danger.dropdown-toggle {
  background-color: #e7515a;
  color: #fff !important; }

.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active {
  background-color: #e2a03f;
  color: #fff !important; }

.show > .btn-outline-warning.dropdown-toggle {
  background-color: #e2a03f;
  color: #fff !important; }

.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active {
  background-color: #805dca;
  color: #fff !important; }

.show > .btn-outline-secondary.dropdown-toggle {
  background-color: #805dca;
  color: #fff !important; }

.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active {
  background-color: #3b3f5c;
  color: #fff !important; }

.show > .btn-outline-dark.dropdown-toggle {
  background-color: #3b3f5c;
  color: #fff !important; }

.show > .btn-outline-primary.dropdown-toggle:after, .show > .btn-outline-success.dropdown-toggle:after, .show > .btn-outline-info.dropdown-toggle:after, .show > .btn-outline-danger.dropdown-toggle:after, .show > .btn-outline-warning.dropdown-toggle:after, .show > .btn-outline-secondary.dropdown-toggle:after, .show > .btn-outline-dark.dropdown-toggle:after, .show > .btn-outline-primary.dropdown-toggle:before, .show > .btn-outline-success.dropdown-toggle:before, .show > .btn-outline-info.dropdown-toggle:before, .show > .btn-outline-danger.dropdown-toggle:before, .show > .btn-outline-warning.dropdown-toggle:before, .show > .btn-outline-secondary.dropdown-toggle:before, .show > .btn-outline-dark.dropdown-toggle:before {
  color: #fff !important; }

.btn-outline-primary {
  border: 1px solid #4361ee !important;
  color: #4361ee !important;
  background-color: transparent;
  box-shadow: none; }

.btn-outline-info {
  border: 1px solid #2196f3 !important;
  color: #2196f3 !important;
  background-color: transparent;
  box-shadow: none; }

.btn-outline-warning {
  border: 1px solid #e2a03f !important;
  color: #e2a03f !important;
  background-color: transparent;
  box-shadow: none; }

.btn-outline-success {
  border: 1px solid #1abc9c !important;
  color: #1abc9c !important;
  background-color: transparent;
  box-shadow: none; }

.btn-outline-danger {
  border: 1px solid #e7515a !important;
  color: #e7515a !important;
  background-color: transparent;
  box-shadow: none; }

.btn-outline-secondary {
  border: 1px solid #805dca !important;
  color: #805dca !important;
  background-color: transparent;
  box-shadow: none; }

.btn-outline-dark {
  border: 1px solid #3b3f5c !important;
  color: #3b3f5c !important;
  background-color: transparent;
  box-shadow: none; }

.btn-outline-primary:hover, .btn-outline-info:hover, .btn-outline-warning:hover, .btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover {
  box-shadow: 0px 5px 20px 0 rgba(0, 0, 0, 0.1); }

.btn-outline-primary:hover {
  color: #fff !important;
  background-color: #4361ee; }

.btn-outline-info:hover {
  color: #fff !important;
  background-color: #2196f3; }

.btn-outline-warning:hover {
  color: #fff !important;
  background-color: #e2a03f; }

.btn-outline-success:hover {
  color: #fff !important;
  background-color: #1abc9c; }

.btn-outline-danger:hover {
  color: #fff !important;
  background-color: #e7515a; }

.btn-outline-secondary:hover {
  color: #fff !important;
  background-color: #805dca; }

.btn-outline-dark:hover {
  color: #fff !important;
  background-color: #3b3f5c; }

/*      Dropdown Toggle       */
.btn-rounded {
  -webkit-border-radius: 1.875rem !important;
  -moz-border-radius: 1.875rem !important;
  -ms-border-radius: 1.875rem !important;
  -o-border-radius: 1.875rem !important;
  border-radius: 1.875rem !important; }

/*
    ===========================
        Data Marker ( dot )
    ===========================
*/
.data-marker {
  padding: 2px;
  border-radius: 50%;
  font-size: 18px;
  display: inline-flex;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  align-items: center;
  justify-content: center; }

.data-marker-success {
  background-color: #1abc9c; }

.data-marker-warning {
  background-color: #e2a03f; }

.data-marker-danger, .data-marker-info, .data-marker-dark {
  background-color: #e7515a; }

.badge {
  font-weight: 600;
  line-height: 1.4;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out; }
  .badge:hover {
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px); }
  .badge.badge-enabled {
    background-color: #1abc9c;
    color: #fff; }
  .badge.badge-disable {
    background-color: #e7515a;
    color: #fff; }

.badge-pills {
  border-radius: 30px; }

.badge-classic {
  border-radius: 0; }

.badge-collapsed-img img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 2px solid #ffffff;
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.3);
  margin-left: -21px; }

.badge-collapsed-img.badge-tooltip img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 2px solid #ffffff;
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.3);
  margin-left: -21px;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease; }
  .badge-collapsed-img.badge-tooltip img:hover {
    -webkit-transform: translateY(-5px) scale(1.02);
    transform: translateY(-5px) scale(1.02); }

.badge-collapsed-img.translateY-axis img {
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease; }
  .badge-collapsed-img.translateY-axis img:hover {
    -webkit-transform: translateY(-5px) scale(1.02);
    transform: translateY(-5px) scale(1.02); }

.badge-collapsed-img.rectangle-collapsed img {
  width: 45px;
  height: 32px; }

.badge-collapsed-img.translateX-axis img {
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease; }
  .badge-collapsed-img.translateX-axis img:hover {
    -webkit-transform: translateX(5px) scale(1.02);
    transform: translateX(5px) scale(1.02); }

.badge-primary {
  color: #fff;
  background-color: #4361ee; }

.badge-info {
  color: #fff;
  background-color: #2196f3; }

.badge-success {
  color: #fff;
  background-color: #1abc9c; }

.badge-danger {
  color: #fff;
  background-color: #e7515a; }

.badge-warning {
  color: #fff;
  background-color: #e2a03f; }

.badge-dark {
  color: #fff;
  background-color: #3b3f5c; }

.badge-secondary {
  background-color: #805dca; }

.outline-badge-primary {
  color: #4361ee;
  background-color: transparent;
  border: 1px solid #4361ee; }

.outline-badge-info {
  color: #2196f3;
  background-color: transparent;
  border: 1px solid #2196f3; }

.outline-badge-success {
  color: #1abc9c;
  background-color: transparent;
  border: 1px solid #1abc9c; }

.outline-badge-danger {
  color: #e7515a;
  background-color: transparent;
  border: 1px solid #e7515a; }

.outline-badge-warning {
  color: #e2a03f;
  background-color: transparent;
  border: 1px solid #e2a03f; }

.outline-badge-dark {
  color: #3b3f5c;
  background-color: transparent;
  border: 1px solid #3b3f5c; }

.outline-badge-secondary {
  color: #805dca;
  background-color: transparent;
  border: 1px solid #805dca; }

.outline-badge-primary:focus, .outline-badge-primary:hover {
  background-color: #eaf1ff;
  color: #4361ee; }

.outline-badge-secondary:focus, .outline-badge-secondary:hover {
  color: #805dca;
  background-color: #f3effc; }

.outline-badge-success:focus, .outline-badge-success:hover {
  color: #1abc9c;
  background-color: #ddf5f0; }

.outline-badge-danger:focus, .outline-badge-danger:hover {
  color: #e7515a;
  background-color: #fff5f5; }

.outline-badge-warning:focus, .outline-badge-warning:hover {
  color: #e2a03f;
  background-color: #fff9ed; }

.outline-badge-info:focus, .outline-badge-info:hover {
  color: #2196f3;
  background-color: #e7f7ff; }

.outline-badge-dark:focus, .outline-badge-dark:hover {
  color: #3b3f5c;
  background-color: #e3e4eb; }

/*      Link     */
.badge[class*="link-badge-"] {
  cursor: pointer; }

.link-badge-primary {
  color: #4361ee;
  background-color: transparent;
  border: 1px solid transparent; }

.link-badge-info {
  color: #2196f3;
  background-color: transparent;
  border: 1px solid transparent; }

.link-badge-success {
  color: #1abc9c;
  background-color: transparent;
  border: 1px solid transparent; }

.link-badge-danger {
  color: #e7515a;
  background-color: transparent;
  border: 1px solid transparent; }

.link-badge-warning {
  color: #e2a03f;
  background-color: transparent;
  border: 1px solid transparent; }

.link-badge-dark {
  color: #3b3f5c;
  background-color: transparent;
  border: 1px solid transparent; }

.link-badge-secondary {
  color: #805dca;
  background-color: transparent;
  border: 1px solid transparent; }

.link-badge-primary:focus, .link-badge-primary:hover {
  color: #4361ee;
  background-color: transparent; }

.link-badge-secondary:focus, .link-badge-secondary:hover {
  color: #6f51ea;
  background-color: transparent; }

.link-badge-success:focus, .link-badge-success:hover {
  color: #2ea37d;
  background-color: transparent; }

.link-badge-danger:focus, .link-badge-danger:hover {
  color: #e7515a;
  background-color: transparent; }

.link-badge-warning:focus, .link-badge-warning:hover {
  color: #dea82a;
  background-color: transparent; }

.link-badge-info:focus, .link-badge-info:hover {
  color: #009eda;
  background-color: transparent; }

.link-badge-dark:focus, .link-badge-dark:hover {
  color: #454656;
  background-color: transparent; }

/* Custom Dropdown*/
.custom-dropdown .dropdown-toggle::after, .custom-dropdown-icon .dropdown-toggle::after, .custom-dropdown .dropdown-toggle::before, .custom-dropdown-icon .dropdown-toggle::before {
  display: none; }

.custom-dropdown .dropdown-menu, .custom-dropdown-icon .dropdown-menu {
  min-width: 140px;
  border-radius: 12px;
  border: none;
  border: 1px solid #e0e6ed;
  z-index: 899;
  top: 15px !important;
  padding: 10px 0;
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
  box-shadow: 0 0 40px 0 rgba(94, 92, 154, 0.12);
  transition: transform 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s, visibility 0.3s ease-in-out 0s;
  opacity: 0;
  visibility: hidden;
  display: block !important;
  transform: translate3d(87px, 0, 0px); }

.custom-dropdown.dropup .dropdown-menu, .custom-dropdown-icon.dropup .dropdown-menu {
  top: -15px !important; }

.custom-dropdown .dropdown-menu.dropdown-menu-right, .custom-dropdown-icon .dropdown-menu.dropdown-menu-right {
  right: auto;
  left: auto; }

.custom-dropdown .dropdown-menu, .custom-dropdown-icon .dropdown-menu {
  transform: translate3d(87px, 0, 0px); }

.custom-dropdown.dropup .dropdown-menu.dropdown-menu-right, .custom-dropdown-icon.dropup .dropdown-menu.dropdown-menu-right {
  transform: translate3d(-29px, -115px, 0px); }

.custom-dropdown .dropdown-menu.dropdown-menu-right, .custom-dropdown-icon .dropdown-menu.dropdown-menu-right {
  transform: translate3d(-29px, 0, 0px); }

.custom-dropdown.dropup .dropdown-menu, .custom-dropdown-icon.dropup .dropdown-menu {
  transform: translate3d(87px, -115px, 0px); }

.custom-dropdown .dropdown-menu.show, .custom-dropdown-icon .dropdown-menu.show {
  opacity: 1;
  visibility: visible; }

.custom-dropdown .dropdown-item.active, .custom-dropdown .dropdown-item:active, .custom-dropdown .dropdown-item:hover {
  color: #2196f3;
  background-color: transparent; }

.custom-dropdown-icon .dropdown-item.active, .custom-dropdown-icon .dropdown-item:active, .custom-dropdown-icon .dropdown-item:hover {
  color: #2196f3;
  background-color: transparent; }

.custom-dropdown .dropdown-item {
  font-size: 13px;
  color: #191e3a;
  display: block;
  font-weight: 600;
  padding: 8px 16px;
  font-size: 12px;
  transition: .5s; }

.custom-dropdown-icon .dropdown-item {
  font-size: 13px;
  color: #191e3a;
  display: block;
  font-weight: 600;
  padding: 8px 16px;
  font-size: 12px;
  transition: .5s; }

.custom-dropdown-icon .dropdown-menu .dropdown-item svg {
  width: 16px;
  height: 16px;
  margin-right: 3px;
  color: #888ea8;
  vertical-align: bottom; }

.custom-dropdown .dropdown-item.active svg, .custom-dropdown .dropdown-item:active svg, .custom-dropdown .dropdown-item:hover svg {
  color: #2196f3; }

.custom-dropdown-icon .dropdown-item.active svg, .custom-dropdown-icon .dropdown-item:active svg, .custom-dropdown-icon .dropdown-item:hover svg {
  color: #2196f3; }

.status.rounded-tooltip .tooltip-inner {
  border-radius: 20px;
  padding: 8px 20px; }

.tooltip-inner {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0; }

.popover {
  z-index: 999;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-bottom-color: #b3b3b3; }

input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
  cursor: not-allowed;
  background-color: #f1f2f3 !important;
  color: #bfc9d4; }

.help-block, .help-inline {
  color: #555555; }

.controls {
  position: relative; }

.search-form-control {
  border-radius: .25rem; }

/*  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; }

.table > thead > tr > th {
  color: #4361ee;
  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, .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; }

/*  Table Dark      */
.table.table-dark > thead > tr > th {
  color: #d3d3d3; }

.table.table-dark > tbody > tr > td {
  color: #ffffff; }

.table-dark {
  background-color: #060818; }
  .table-dark.table-hover tbody tr {
    background-color: #060818; }
  .table-dark td, .table-dark th, .table-dark thead th {
    border-color: #191e3a !important; }
  .table-dark.table-hover tbody tr:hover {
    background-color: rgba(25, 30, 58, 0.631373); }

.table.table-dark > tbody > tr > td i.t-icon {
  padding: 5px;
  border-radius: 50%;
  font-size: 14px;
  vertical-align: sub;
  cursor: pointer;
  color: #0e1726 !important; }

table .badge-success, table .badge-primary, table .badge-warning, table .badge-danger, table .badge-info, table .badge-secondary, table .badge-dark {
  box-shadow: 0px 5px 20px 0 rgba(0, 0, 0, 0.2);
  will-change: opacity, transform;
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out; }

.table > tfoot > tr > th {
  color: #3b3f5c; }

.table-vertical-align tr, .table-vertical-align th, .table-vertical-align td {
  vertical-align: middle !important; }

.statbox .widget-content:before, .statbox .widget-content:after {
  display: table;
  content: "";
  line-height: 0;
  clear: both; }

.nav-tabs > li > a {
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  border-radius: 0 !important; }

.btn-toolbar {
  margin-left: 0px; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .input-group > .form-control {
    flex: 1 1 auto;
    width: 1%; } }

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

.toast-primary {
  background: #4361ee; }

.toast-header {
  background: #4361ee;
  color: #fff;
  border-bottom: 1px solid rgba(33, 150, 243, 0.341176); }
  .toast-header .meta-time {
    color: #f1f2f3; }
  .toast-header .close {
    color: #f1f2f3;
    opacity: 1;
    text-shadow: none; }

.toast-body {
  padding: 16px 12px;
  color: #fff; }

/*  
    ==========================
        Background Colors  
    ==========================
*/
/*  
    Default  
*/
.bg-primary {
  background-color: #4361ee !important;
  border-color: #4361ee;
  color: #fff; }

.bg-success {
  background-color: #1abc9c !important;
  border-color: #1abc9c;
  color: #fff; }

.bg-info {
  background-color: #2196f3 !important;
  border-color: #2196f3;
  color: #fff; }

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

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

.bg-secondary {
  background-color: #805dca !important;
  border-color: #805dca;
  color: #fff; }

.bg-dark {
  background-color: #fff;
  border-color: #3b3f5c;
  color: #fff; }

/*  
    Light Background  
*/
.bg-light-primary {
  background-color: #eaf1ff !important;
  border-color: #eaf1ff;
  color: #2196f3; }

.bg-light-success {
  background-color: #ddf5f0 !important;
  border-color: #ddf5f0;
  color: #1abc9c; }

.bg-light-info {
  background-color: #e7f7ff !important;
  border-color: #e7f7ff;
  color: #2196f3; }

.bg-light-warning {
  background-color: #fff9ed !important;
  border-color: #fff9ed;
  color: #e2a03f; }

.bg-light-danger {
  background-color: #fff5f5 !important;
  border-color: #fff5f5;
  color: #e7515a; }

.bg-light-secondary {
  background-color: #f3effc !important;
  border-color: #f3effc;
  color: #805dca; }

.bg-light-dark {
  background-color: #e3e4eb;
  border-color: #e3e4eb;
  color: #fff; }

/*  
    Progress Bar
*/
.progress {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  background-color: #ebedf2;
  margin-bottom: 1.25rem;
  height: 16px;
  box-shadow: 1px 3px 20px 3px #f1f2f3; }
  .progress.progress-bar-stack .progress-bar:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px; }
  .progress .progress-bar {
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0, 69, 255, 0.15), 0 8px 16px rgba(0, 69, 255, 0.2);
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 100; }
  .progress:not(.progress-bar-stack) .progress-bar {
    border-radius: 16px; }

.progress-sm {
  height: 4px; }

.progress-md {
  height: 10px; }

.progress-lg {
  height: 20px; }

.progress-xl {
  height: 25px; }

.progress-striped .progress-bar {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); }

.progress .progress-title {
  display: flex;
  justify-content: space-between;
  padding: 15px; }
  .progress .progress-title span {
    align-self: center; }

.progress .progress-bar.bg-gradient-primary {
  background-color: #4361ee;
  background: linear-gradient(to right, #0081ff 0%, #0045ff 100%); }

.progress .progress-bar.bg-gradient-info {
  background-color: #4361ee;
  background-image: linear-gradient(to right, #04befe 0%, #4481eb 100%); }

.progress .progress-bar.bg-gradient-success {
  background-color: #4361ee;
  background-image: linear-gradient(to right, #3cba92 0%, #0ba360 100%); }

.progress .progress-bar.bg-gradient-warning {
  background-color: #4361ee;
  background-image: linear-gradient(to right, #f09819 0%, #ff5858 100%); }

.progress .progress-bar.bg-gradient-secondary {
  background-color: #4361ee;
  background-image: linear-gradient(to right, #7579ff 0%, #b224ef 100%); }

.progress .progress-bar.bg-gradient-danger {
  background-color: #4361ee;
  background-image: linear-gradient(to right, #d09693 0%, #c71d6f 100%); }

.progress .progress-bar.bg-gradient-dark {
  background-color: #4361ee;
  background-image: linear-gradient(to right, #2b5876 0%, #4e4376 100%); }

.br-0 {
  border-radius: 0 !important; }

.br-4 {
  border-radius: 4px !important; }

.br-6 {
  border-radius: 6px !important; }

.br-30 {
  border-radius: 30px !important; }

.br-50 {
  border-radius: 50px !important; }

.br-left-30 {
  border-top-left-radius: 30px !important;
  border-bottom-left-radius: 30px !important; }

.br-right-30 {
  border-top-right-radius: 30px !important;
  border-bottom-right-radius: 30px !important; }

.bx-top-6 {
  border-top-right-radius: 6px !important;
  border-top-left-radius: 6px !important; }

.bx-bottom-6 {
  border-bottom-right-radius: 6px !important;
  border-bottom-left-radius: 6px !important; }

/*      Badge Custom      */
.badge.counter {
  position: absolute;
  z-index: 2;
  right: 0;
  top: -10px;
  font-weight: 600;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  padding: 2px 0px;
  font-size: 12px; }

.badge-chip {
  display: inline-block;
  padding: 0 25px;
  font-size: 16px;
  line-height: 42px;
  border-radius: 25px; }
  .badge-chip img {
    float: left;
    margin: 0px 10px 0px -26px;
    height: 44px;
    width: 44px;
    border-radius: 50%; }
  .badge-chip .closebtn {
    color: #f1f2f3;
    font-weight: bold;
    float: right;
    font-size: 20px;
    cursor: pointer; }
    .badge-chip .closebtn:hover {
      color: #fff; }

/*-------text-colors------*/
.text-primary {
  color: #4361ee !important; }

.text-success {
  color: #1abc9c !important; }

.text-info {
  color: #2196f3 !important; }

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

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

.text-secondary {
  color: #805dca !important; }

.text-dark {
  color: #3b3f5c !important; }

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

.text-white {
  color: #fff !important; }

.text-black {
  color: #000 !important; }

/*-----border main------*/
.border {
  border: 1px solid !important; }

.border-bottom {
  border-bottom: 1px solid !important; }

.border-top {
  border-top: 1px solid !important; }

.border-right {
  border-right: 1px solid !important; }

.border-left {
  border-left: 1px solid !important; }

.border-primary {
  border-color: #4361ee !important; }

.border-info {
  border-color: #2196f3 !important; }

.border-warning {
  border-color: #e2a03f !important; }

.border-success {
  border-color: #1abc9c !important; }

.border-danger {
  border-color: #e7515a !important; }

.border-secondary {
  border-color: #805dca !important; }

.border-dark {
  border-color: #3b3f5c !important; }

/*-----border style------*/
.border-dotted {
  border-style: dotted !important; }

.border-dashed {
  border-style: dashed !important; }

.border-solid {
  border-style: solid !important; }

.border-double {
  border-style: double !important; }

/*-----border width------*/
.border-width-1px {
  border-width: 1px !important; }

.border-width-2px {
  border-width: 2px !important; }

.border-width-3px {
  border-width: 3px !important; }

.border-width-4px {
  border-width: 4px !important; }

.border-width-5px {
  border-width: 5px !important; }

.border-width-6px {
  border-width: 6px !important; }

/*-----transform-position------*/
.position-absolute {
  position: absolute; }

.position-static {
  position: static; }

.position-fixed {
  position: fixed; }

.position-inherit {
  position: inherit; }

.position-initial {
  position: initial; }

.position-relative {
  position: relative; }

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

.progress-bar-mask {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color:#d3dcda;
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}

.vue-progress-path .progress {
  stroke: #3E3F54 !important;
}

.vue-progress-path .background {
  stroke: #e8e8e8 !important;
}

/*
	===============================
			@Import	Function
	===============================
*/
/*
	===============================
			@Import	Mixins
	===============================
*/
/*
 * Container style
 */
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto; }

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 10px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute; }

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 10px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute; }

.ps--active-x > .ps__rail-x, .ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent; }

.ps:hover > .ps__rail-x, .ps:hover > .ps__rail-y {
  opacity: 0.6; }

.ps--focus > .ps__rail-x, .ps--focus > .ps__rail-y {
  opacity: 0.6; }

.ps--scrolling-x > .ps__rail-x, .ps--scrolling-y > .ps__rail-y {
  opacity: 0.6; }

.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9; }

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #d3d3d3;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 4px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute; }

.ps__thumb-y {
  background-color: #d3d3d3;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 4px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute; }

.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #e3e4eb;
  height: 6px; }

.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #e3e4eb;
  width: 6px; }

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important; } }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important; } }

.activity-section-animation {
  background-repeat: no-repeat;
  background-position: left top;
  padding-top: 95px;
  margin-bottom: 60px;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

#content .col-right {
  padding: 0;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  width: 350px;

  position: fixed;
  top: 0;
  width: 310px;
  right: 0;
  border-radius: 0;
  z-index: 1029 !important;
  transition: 0.3s ease all;
  width: 255px;
}
#content .col-right-content {
  background: #030305;
  padding: 32px 20px 0 20px;
  margin: 0 0 0 5px;
  z-index: 4;
  height: 100%;
  border-top-left-radius: 30px;
}

/* 
  widget profile
*/

.widget-profile {
  margin-bottom: 20px;
}
.widget-profile .w-profile-view {
  display: flex;
  padding: 15px 22px;
  background: #151516;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}
.widget-profile .w-profile-view img {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  border: 3px solid rgb(255 255 255 / 18%);
  margin-right: 12px;
  box-shadow: 0px 1px 9px 8px #000000;
}
.widget-profile .w-profile-view .w-profile-content h6 {
  font-size: 15px;

  color: #fff;
  margin-bottom: 0;
}
.widget-profile .w-profile-view .w-profile-content p {
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 500;
  color: #bfc9d4;
}
.widget-profile .w-profile-links {
  display: flex;
  background: #151516;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  padding: 6px 9px 16px 69px;
}
.widget-profile .w-profile-links .w-p-link {
  text-align: center;
  align-self: center;
  margin-right: 12px;
  display: flex;
  border-radius: 6px;
  padding: 4px 9px;
  border: 1px solid #515365;
}
.widget-profile .w-profile-links .w-p-link svg {
  width: 17px;
  height: 17px;
  margin-right: 6px;
  color: #fff;
  stroke-width: 1.5;
}
.widget-profile .w-profile-links .w-p-link p {
  font-size: 11px;
  font-weight: 100;
  margin-bottom: 0;
  align-self: center;
  color: #fff;
}

/* 
  widget todo
*/

.widget-todo {
  padding: 12px 21px;
  border-radius: 16px;
  background: #151516;
  margin-bottom: 20px;
}
.widget-todo .todo-content {
  display: flex;
}
.widget-todo .todo-content .todo-title {
  align-self: center;
  margin-right: 12px;
  padding-right: 9px;
  border-right: 1px solid #515365;
}
.widget-todo .todo-content .todo-title h6 {
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  display: flex;
}
.widget-todo .todo-content .todo-title h6 span.icon {
  display: inline-flex;
  background: #4361ee;
  padding: 3px 6px;
  border-radius: 6px;
  height: 27px;
  width: 29px;
  margin-right: 9px;
}
.widget-todo .todo-content .todo-title h6 svg {
  width: 17px;
  height: 19px;
  vertical-align: bottom;
  align-self: center;
}
.widget-todo .todo-content .todo-text {
  align-self: center;
}
.widget-todo .todo-content .todo-text p {
  margin-bottom: 0;
  font-size: 17px;
  color: #bfc9d4;
  font-weight: 500;
  letter-spacing: 1px;
}

/* 
  widget message
*/

.widget-message {
  padding: 22px 22px;
  border-radius: 16px;
  background: #151516;
  margin-bottom: 20px;
  background: linear-gradient(
    229deg,
    #517281 0%,
    #3b5d70 27%,
    #4d5c82 72%,
    #5d647f 100%
  );
}
.widget-message .widget-title {
  display: flex;
  justify-content: space-between;
}
.widget-message .widget-title h5 {
  color: #fff;
  margin-bottom: 0;
}
.widget-message .widget-title svg {
  width: 18px;
  height: 19px;
  align-self: center;
  color: #bfc9d4;
}
.widget-message .widget-messages {
  margin-top: 25px;
}
.widget-message .widget-messages .w-message:not(:last-child) {
  margin-bottom: 18px;
}
.widget-message .widget-messages .w-message {
  display: flex;
}
.widget-message .widget-messages .w-message img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgb(191 201 212 / 21%);
  margin-right: 10px;
}
.widget-message .widget-messages .w-message .msg-content {
  align-self: center;
}
.widget-message .widget-messages .w-message .w-msg-username {
  font-size: 14px;
  font-weight: 600;
  color: #bfc9d4;
  margin-bottom: 0;
}
.widget-message .widget-messages .w-message .w-msg-text {
  margin-bottom: 0;
  color: #fff;
  font-size: 12px;
}

/* 
  widget invoice
*/

.widget-invoice {
  padding: 22px 22px;
  border-radius: 16px;
  background: #e9edf0;
  /* background: #151516; */
  margin-bottom: 20px;
}
.widget-invoice .widget-title {
  display: flex;
  justify-content: space-between;
}
.widget-invoice .widget-title h5 {
  color: grey;
  margin-bottom: 0;
}
.widget-invoice .widget-title svg {
  width: 18px;
  height: 19px;
  align-self: center;
  color: #bfc9d4;
}
.widget-invoice .widget-invoice-lists {
  margin-top: 25px;
}
.widget-invoice .widget-invoice-lists .w-invoice {
  position: relative;
}
.widget-invoice .widget-invoice-lists .w-invoice:not(:last-child) {
  margin-bottom: 15px;
}
.widget-invoice .widget-invoice-lists .w-invoice p {
  color: #bfc9d4;
  margin-bottom: 0;
}
.widget-invoice .widget-invoice-lists .w-invoice p span.inv-number {
  font-size: 14px;
  font-weight: 500;
  color: #4cd265;
}
.widget-invoice .widget-invoice-lists .w-invoice p span.usr-name {
  font-weight: 700;
}

/* 
  widget taskBoard
*/

.widget-taskBoard {
  padding: 22px 22px;
  border-radius: 16px;
  background: #151516;
  margin-bottom: 20px;
}
.widget-taskBoard .widget-title {
  display: flex;
  justify-content: space-between;
}
.widget-taskBoard .widget-title h5 {
  color: #fff;
  margin-bottom: 0;
}
.widget-taskBoard .widget-title svg {
  width: 18px;
  height: 19px;
  align-self: center;
  color: #bfc9d4;
}
.widget-taskBoard .widget-taskBoard-lists {
  margin-top: 25px;
}
.widget-taskBoard .widget-taskBoard-lists .w-taskBoard {
  position: relative;
  padding-left: 18px;
}
.widget-taskBoard .widget-taskBoard-lists .w-taskBoard:before {
  content: "";
  background: #bfc9d4;
  height: 8px;
  width: 8px;
  position: absolute;
  border-radius: 50%;
  left: 3px;
  top: 6px;
}
.widget-taskBoard .widget-taskBoard-lists .w-taskBoard p {
  color: #bfc9d4;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 0;
}
.widget-taskBoard .widget-taskBoard-lists .w-taskBoard:not(:last-child) p {
  margin-bottom: 10px;
}
.widget-taskBoard .widget-taskBoard-lists .w-taskBoard p span.taskBoard-number {
  font-weight: 600;
  font-size: 13px;
  color: #61b6cd;
}
.widget-taskBoard .widget-taskBoard-lists .w-taskBoard p span.usr-name {
  font-size: 14px;
  font-weight: 500;
}

/* 
  widget calendar
*/

.widget-calendar {
  border-radius: 16px;
  margin-bottom: 20px;
}

.widget-calendar .widget-title {
  display: flex;
  justify-content: space-between;
}

.widget-calendar .widget-title h5 {
  color: #3e3f54;
  margin-bottom: 0;
}
.widget-calendar .widget-title svg {
  color: #888ea8;
  width: 19px;
  height: 19px;
}

.widget-calendar
  .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown)
  .dropdown-menu {
  background: #555555;
  border: 1px solid #555555;
  transform: translate3d(-141px, 0, 0px);
}

.widget-calendar .dropdown .dropdown-menu a {
  color: #fff !important;
}

.widget-calendar .widget-calendar-lists {
  margin-top: 24px;
}
.widget-calendar .widget-calendar-lists .w-calendar {
  padding: 15px 15px;
  border-radius: 12px;
  background: #151516;
  margin-bottom: 12px;
  display: flex;
}
.widget-calendar .widget-calendar-lists .w-calendar .w-icon {
  padding: 10px;
  border-radius: 12px;
  margin-right: 16px;
  height: 42px;
  width: 42px;
  align-self: center;
}
.widget-calendar .widget-calendar-lists .w-calendar .w-icon svg {
  width: 22px;
  height: 22px;
}
.widget-calendar .widget-calendar-lists .w-calendar.w-calendar-c2 .w-icon {
  background: linear-gradient(215deg, #c52d47 0%, #a5325c 30%, #8b366d 100%);
}
.widget-calendar .widget-calendar-lists .w-calendar.w-calendar-c2 .w-icon svg {
  fill: rgb(3 3 5 / 11%);
  color: rgb(255 255 255 / 66%);
}
.widget-calendar .widget-calendar-lists .w-calendar.w-calendar-c1 .w-icon {
  background: linear-gradient(to right, #005e7f, #61b6cd);
}
.widget-calendar .widget-calendar-lists .w-calendar.w-calendar-c1 .w-icon svg {
  fill: rgb(3 3 5 / 11%);
  color: rgb(255 255 255 / 75%);
}
.widget-calendar .widget-calendar-lists .w-calendar.w-calendar-c3 .w-icon {
  background: linear-gradient(
    225deg,
    #1623a6 0%,
    #3343d4 29%,
    #175eac 73%,
    #176682 100%
  );
}
.widget-calendar .widget-calendar-lists .w-calendar.w-calendar-c3 .w-icon svg {
  fill: rgb(3 3 5 / 11%);
  color: rgb(255 255 255 / 75%);
}
.widget-calendar .widget-calendar-lists .w-calendar.w-calendar-c4 .w-icon {
  background: linear-gradient(
    to right top,
    #604c7c 0%,
    #257983 50%,
    #20825a 100%
  );
}
.widget-calendar .widget-calendar-lists .w-calendar.w-calendar-c4 .w-icon svg {
  fill: rgb(3 3 5 / 11%);
  color: rgb(255 255 255 / 75%);
}
.widget-calendar .widget-calendar-lists .w-calendar.w-calendar-c5 .w-icon {
  background: linear-gradient(to bottom, #203025 0%, #151516 100%);
}
.widget-calendar .widget-calendar-lists .w-calendar.w-calendar-c5 .w-icon svg {
  fill: rgb(3 3 5 / 11%);
  color: rgb(255 255 255 / 75%);
}
.widget-calendar .widget-calendar-lists .w-calendar.w-calendar-c6 .w-icon {
  background: linear-gradient(
    to right top,
    #194189 0%,
    #3b4980 25%,
    #8738a7 100%
  );
}
.widget-calendar .widget-calendar-lists .w-calendar.w-calendar-c6 .w-icon svg {
  fill: rgb(3 3 5 / 11%);
  color: rgb(255 255 255 / 75%);
}
.widget-calendar .widget-calendar-lists .w-calendar p {
  margin-bottom: 0;
  color: #fff;
  font-size: 13px;
  align-self: center;
}
.widget-calendar .widget-calendar-lists .w-calendar p span.calendar-number {
  color: #61b6cd;
  font-size: 13px;
  font-weight: 600;
}

body .col-right-content .col-right-content-container {
  position: relative;
  height: calc(100vh - 92px);
}
body #content .col-right-content .ps .ps__rail-y:hover {
  background: transparent;
}
body .col-right-content .col-right-content-container .ps__rail-y.ps--clicking {
  background-color: transparent;
}

.col-right-content-container .ps__rail-y:hover > .ps__thumb-y {
  background-color: #555555;
}
.col-right-content-container .ps__thumb-y {
  background-color: #555555;
}

@media (max-width: 1199px) {
  #content .col-right {
    position: fixed;
    top: 0;
    width: 310px;
    left: -380px;
    border-radius: 0;
    z-index: 1029 !important;
    transition: 0.3s ease all;
    width: 348px;
  }
  #content .col-right.show {
    left: -10px;
  }
  .col-right-content .col-right-content-container {
    position: relative;
    height: calc(100vh - 92px);
    padding: 0 0 0 0;
    padding-right: 14px;
  }
  #content .col-right-content {
    border-top-left-radius: 0;
    border-top-right-radius: 30px;
    padding: 32px 18px 32px 32px;
  }

  #content .col-right-content .ps .ps__rail-y:hover {
    background: transparent;
  }

  .admin-header .search-ul {
    padding-right: 14px;
  }
}

/* =================================================================================================================
  Below CSS is for adjusting Notification Sidebar on Smaller Resolution Devices (such as iPhone Mini and iPhone SE)
  ================================================================================================================= */

@media (max-width: 399px) {
  #content .col-right-content {
    padding: 32px 0 32px 15px;
  }
  .col-right-content .col-right-content-container {
    padding-right: 15px;
  }
  #content .col-right {
    width: 315px;
  }
}

/*

Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/

*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #23241f;
}

.hljs,
.hljs-tag,
.hljs-subst {
  color: #f8f8f2;
}

.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
  color: #ae81ff;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
  color: #a6e22e;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
  color: #f92672;
}

.hljs-symbol,
.hljs-attribute {
  color: #66d9ef;
}

.hljs-params,
.hljs-class .hljs-title {
  color: #f8f8f2;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
  color: #e6db74;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
  color: #75715e;
}

html { min-height: 100% }
body {
    color: #888ea8;
    height: 100%;
    font-size: 0.875rem;
    background: #f1f2f3;
    overflow-x: hidden;
    overflow-y: auto;
    letter-spacing: 0.0312rem;
    font-family: 'Quicksand', sans-serif !important;
}
h1, h2, h3, h4, h5, h6 { color: #3b3f5c; }
:focus { outline: none; }
::-moz-selection { /* Code for Firefox */
  color: #4361ee;
  background: transparent;
}
::selection {
  color: #4361ee;
  background: transparent;
}
p { margin-top: 0; margin-bottom: 0.625rem; color: #515365 }
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border-top: 3px solid #3E3F54; /*f1f2f3*/
}
strong { font-weight: 600; }
code { color: #e7515a; }

/*Page title*/

.page-header-content {
    margin-right: auto;
    margin-left: 32px;
    margin-top: 9px;
}
.page-header {
    border: 0;
    margin: 0;
    display: flex;
    margin-top: 20px;
    margin-bottom: 0;
    margin-left: 0;
    margin-top: 20px;
}
.page-title {
    position: relative;
    align-self: center;
    margin-right: 0;
    width: 100%;
}
.page-title h3 {
    margin: 0;
    margin-bottom: 0;
    font-size: 21px;
    color: #3b3f5c;
    font-weight: 600;
}

.main-container {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;

    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
#container.fixed-header { margin-top: 56px; }
#content {
    width: 50%;
    flex-grow: 8;
    margin-bottom: 0;
    margin-left: 255px;
    
    -webkit-transition: .3s ease all;
    transition: .3s ease all;
}

.admin-header .page-header {
    margin-top: 0;
}
.main-container-fluid > .main-content > .container {
    float: left;
    width: 100%
}
.content-container {
    display: flex;
    margin-right: -20px;
    margin-left: -15px;
}
#content .col-left {
    padding: 0;

    -webkit-box-flex: 1;
    flex: 1 auto;
    -ms-flex: 1 0 0px;
    min-width: 0;
    margin-right: 250px;
    /* margin-right: 348px; */
}
#content .col-left-content {
    padding: 0 10px;
    margin: 0 10px;
    border-radius: 10px;

    height: 100%;
}
.section-ui #content .col-left-content, .section-components #content .col-left-content, .section-form #content .col-left-content {
    margin: 0 auto;
    max-width: 1170px;
}
#content > .wrapper {
    -webkit-transition: margin ease-in-out .1s;
    -moz-transition: margin ease-in-out .1s;
    -o-transition: margin ease-in-out .1s;
    transition: margin ease-in-out .1s;
    position: relative
}
.widget {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 6px;
    -webkit-box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002), 0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004), 0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005), 0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006), 0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008), 0 7px 0px rgba(0, 0, 0, 0.01);
    -moz-box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002), 0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004), 0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005), 0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006), 0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008), 0 7px 0px rgba(0, 0, 0, 0.01);
    box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002), 0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004), 0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005), 0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006), 0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008), 0 7px 0px rgba(0, 0, 0, 0.01);
}
.layout-top-spacing { margin-top: 25px; }
.layout-spacing { padding-bottom: 40px; }
.layout-px-spacing { padding: 0 20px 0 20px!important; min-height: calc(100vh - 140px)!important; }
.widget.box .widget-header {
    background: #fff;
    padding: 0px 8px 0px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}
.row [class*="col-"] .widget .widget-header h4 {
    color: #3b3f5c;
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    padding: 16px 15px;
}
.seperator-header {
    background: transparent;
    box-shadow: none;
    margin-bottom: 40px;
    border-radius: 0;
}
.seperator-header h4 {
    margin-bottom: 0;
    line-height: 1.4;
    padding: 5px 8px;
    font-size: 15px;
    border-radius: 4px;
    letter-spacing: 1px;
    display: inline-block;
    background: rgba(0, 150, 136, 0.26);
    color: #009688;
    font-weight: 500;
}
.widget .widget-header {
    border-bottom: 0px solid #f1f2f3;
}
.widget .widget-header:before,
.widget .widget-header:after {
    display: table;
    content: "";
    line-height: 0
}
.widget .widget-header:after { clear: both }
.widget-content-area {
    padding: 20px;
    position: relative;
    /* background-color: #fff; */
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.widget .widget-header:after { clear: both }
.widget-content-area-edit {
    padding: 20px;
    position: relative;
    background-color: #fff;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.content-area {
    max-width: 58.333333%;
    margin-left: 80px;
}


/*
    ==================
    ------------------
        Navigation
    ------------------
    ==================
*/


/* 
======================================
    Dashboard Header - Navigation Bar
======================================
*/

.admin-header .header-container .navbar {
    display: flex;
    justify-content: space-between;
    padding: 0 0 8px 0;
    padding-top: 0;
}

.admin-header .header-container .sidebarCollapse {
    margin: 0 0 0 0;
    color: #3E8E9E;
    background-color: #d1e5e9;
    height: 34px;
    display: inline-flex;
    width: 34px;
    align-self: center;
    justify-content: center;
    border-radius: 10px;
    padding: 7px;
    box-shadow: 0px 0px 20px -10px #3E8E9E;
    margin-right: 12px;
}
.bt-menu-trigger {
    font-size: 10px;
    position: relative;
    display: inline-block;
    width: 16px;
    height: 9px;
    cursor: pointer;
}
.bt-menu-trigger span {
    position: absolute;
    top: 9px;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 0;
    background-color: #3E3F54;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    border-radius: 30px;
}
.sidebarCollapse.bt-menu-open .bt-menu-trigger span {
    background-color: #009688;
}
.bt-menu-trigger span:after,
.bt-menu-trigger span:before {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #009688;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}
.sidebarCollapse.bt-menu-open .bt-menu-trigger span:after,
.sidebarCollapse.bt-menu-open .bt-menu-trigger span:before {
    background: #009688;
}   

.bt-menu-trigger span:before {
    -webkit-transform: translateY(-0.5em);
    transform: translateY(-0.5em);
}

.bt-menu-trigger span:after {
    -webkit-transform: translateY(0.5em);
    transform: translateY(0.5em);
}
.bt-menu-open .bt-menu-trigger span:before {
    -webkit-transform: translateY(-0.25em) translateX(-0.45em) rotate(-40deg) scaleX(0.6);
    transform: translateY(-0.25em) translateX(-0.45em) rotate(-40deg) scaleX(0.6);
}
.bt-menu-open .bt-menu-trigger span:after {
    -webkit-transform: translateY(0.25em) translateX(-0.45em) rotate(38deg) scaleX(0.6);
    transform: translateY(0.25em) translateX(-0.45em) rotate(38deg) scaleX(0.6);
}

.admin-header .header-actions {
    display: flex;
}


/*   Language Dropdown  */

.admin-header .language-dropdown {
    align-self: center;
}
/*   Language Dropdown  */

.admin-header .language-dropdown .custom-dropdown-icon a.dropdown-toggle {
    position: relative;
    padding: 9px 35px 10px 15px;
    border: none;
    border-radius: 6px;
    transform: none;
    font-size: 14px;
    line-height: 17px;
    min-width: 115px;
    text-align: inherit;
    color: #1b2e4b;
    box-shadow: none;
    max-height: 35px;
    font-weight: 600;
}
.admin-header .language-dropdown .custom-dropdown-icon a.dropdown-toggle img {
    width: 22px;
    height: 22px;
    margin-right: 9px;
}
.admin-header .language-dropdown .custom-dropdown-icon a.dropdown-toggle svg {
    position: absolute;
    right: 20px;
    top: 14px;
    color: #515365;
    width: 13px;
    height: 13px;
    margin: 0;
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}
.admin-header .language-dropdown .custom-dropdown-icon.show a.dropdown-toggle svg {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.admin-header .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown).language-dropdown .custom-dropdown-icon .dropdown-menu {
    position: absolute;
    right: 0;
    padding: 8px 0;
    min-width: 155px;
    background: #fff;
    top: 166%!important;
}
.admin-header .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown).language-dropdown .custom-dropdown-icon .dropdown-menu.show {
    top: 37px!important;
}
.admin-header .language-dropdown .custom-dropdown-icon .dropdown-menu a {
    padding: 8px 15px!important;
    font-size: 13px!important;
    font-weight: 700!important;
    color: #3b3f5c!important;
}
.admin-header .language-dropdown .custom-dropdown-icon .dropdown-menu a:hover {
    color: #2196f3!important;
    border-radius: 0!important;
}
.admin-header .language-dropdown .custom-dropdown-icon .dropdown-menu img {
    width: 22px;
    height: 22px;
    margin-right: 7px;
}

.admin-header .toggle-notification-bar {
    align-self: center;
    margin: 0 0 0 0;
    color: #3E8E9E;
    background-color: #d1e5e9;
    height: 38px;
    display: none;
    width: 38px;
    align-self: center;
    justify-content: center;
    border-radius: 10px;
    padding: 9px 9px;
    box-shadow: 0px 0px 20px -10px #3E8E9E;
    margin-left: 12px;
}


/* Search */

.admin-header .search-ul {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}
.admin-header .nav-item.search-animated {
    position: relative;
    margin-right: 0;
    margin-left: 0;
    width: 100%;
}
.admin-header .nav-item.search-animated svg {
    font-weight: 600;
    margin: 0 9.6px;
    cursor: pointer;
    color: #A1B2BF;
    position: absolute;
    width: 18px;
    height: 18px;
    top: 8px;
    left: 12px;
}
.admin-header .nav-item form.form-inline input.search-form-control {
    width: 100%;
    font-size: 14px;
    border: none;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    color: #888ea8;
    letter-spacing: 1px;
    padding: 0px 4px 0px 50px;
    height: 35px;
    font-weight: 600;
}
.admin-header .nav-item form.form-inline input.search-form-control:focus {
    box-shadow:0 0.1px 0.4px rgba(0, 0, 0, 0), 0 0.1px 1.1px rgba(0, 0, 0, 0), 0 0.3px 2px rgba(0, 0, 0, 0), 0 0.4px 3.6px rgba(0, 0, 0, 0), 0 0.8px 6.7px rgba(0, 0, 0, 0.023), 0 2px 16px rgba(0, 0, 0, 0.04);
}
.form-inline.search {
    width: 100%;
}
.search-bar {
    width: 100%;
}
.admin-header .nav-item .form-inline.search .search-form-control {
    border: 1px solid #D5DDE3;
    width: 100%;
    background: #E9EDF0;
}
.admin-header .nav-item form.form-inline input.search-form-control::-webkit-input-placeholder {
    color: #888ea8;
    letter-spacing: 1px;
    font-size: 13px;
}
.admin-header .nav-item form.form-inline input.search-form-control::-ms-input-placeholder {
    color: #888ea8;
    letter-spacing: 1px;
    font-size: 13px;
}
.admin-header .nav-item form.form-inline input.search-form-control::-moz-placeholder {
    color: #888ea8;
    letter-spacing: 1px;
    font-size: 13px;
}
.admin-header .nav-item form.form-inline input.search-form-control:focus::-webkit-input-placeholder {
    color: #e3e4eb;
}
.admin-header .nav-item form.form-inline input.search-form-control:focus::-ms-input-placeholder {
    color: #e3e4eb;
}
.admin-header .nav-item form.form-inline input.search-form-control:focus::-moz-placeholder {
    color: #e3e4eb;
}
.search-overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: transparent!important;
    z-index: 814!important;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.search-overlay.show {
    display: block;
    opacity: .1;
}

.col-right-content.content-fixed .col-right-content-container  {
    position: relative;
    height: calc(100vh - 105px);
    padding: 0 0 0 0;
}

.search-overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: transparent!important;
    z-index: 814!important;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.search-overlay.show {
    display: block;
    opacity: .1;
}


/* 
===============
    Sidebar
===============
*/

.sidebar-wrapper * {
    overflow: hidden;
    white-space: nowrap;
}
.sidebar-wrapper {
    width: 255px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1028;
    height: 100%;
    transition: .3s ease all;
    border-top-right-radius: 30px;
    /*background-color: #EFDE91;*/
     /*#e0f0ef*/
     background-color: #e8e8e8;
}
.sidebar-closed .sidebar-wrapper  {
    left: -255px;
}
.sidebar-wrapper .theme-logo {
    z-index: 1030;
    left: 0;
    transition: .3s ease all;
    position: fixed;
    top: 0;
    width: 255px;
    padding: 21px 14px 13px 14px;
    border-top-right-radius: 34px;
}
.sidebar-wrapper .bottom-logo {
    z-index: 1030;
    left: 0;
    transition: .3s ease all;
    position: fixed;
    bottom: 0;
    width: 255px;
    padding: 21px 14px 13px 14px;
    border-bottom-right-radius: 34px;
}
.sidebar-closed.sbar-open .sidebar-wrapper .theme-logo {
    left: -255px;
}
.sidebar-closed.sbar-open .sidebar-wrapper .bottom-logo {
    left: -255px;
}    
.sidebar-wrapper .theme-logo a {
    display: flex;
    font-size: 29px;
    color: #030305;
}
.sidebar-wrapper .bottom-logo a {
    display: flex;
    font-size: 29px;
    color: #030305;
}
.sidebar-wrapper .theme-logo .navbar-logo {
    width: 46px;
    height: 45px;
    border-radius: 6px;
}
.sidebar-wrapper .bottom-logo .navbar-logo {
    width: 46px;
    height: 45px;
    border-radius: 6px;
}
.sidebar-wrapper .theme-logo .admin-logo {
    border-left: 1px solid #bfc9d4;
    margin-left: 12px;
    padding-left: 14px;
}
.sidebar-wrapper .theme-logo .admin-logo span {
    display: inline-block;
    background: #000;
    height: 5px;
    width: 5px;
    border-radius: 50%;
    margin-left: 3px;
}

.sidebar-wrapper .sidebarCollapseFixed {
    position: absolute;
    display: inline-block;
    background: #000;
    padding: 8px;
    border-radius: 12px;
    right: -25px;
    top: 63px;
    z-index: 1032;
    background-color: #e7f7ff;
    box-shadow: 0 0 32px rgb(0 0 0 / 9%);
    cursor: pointer;

    visibility: hidden;
    opacity: 0;
    transition: .5s;
}
.sidebar-wrapper .sidebarCollapseFixed.show {
    visibility: visible;
    opacity: 1;
    right: -8px;
}
.sidebar-wrapper .sidebarCollapseFixed svg {
    color: #030305;
    width: 17px;
    height: 17px;
    stroke-width: 1.6;
}


.sidebar-closed.sbar-open .sidebar-wrapper .user-content {
    left: -255px;
}
.sidebar-wrapper .user-content {
    z-index: 1053;
    left: 0;
    transition: .3s ease all;
    position: fixed;
    top: 93px;
}
.sidebar-wrapper .user-content .dropdown-menu {
    position: fixed!important;
    padding: 10px 0;
    top: 91px!important;
    width: 232px;
    box-shadow: 0 10px 20px -10px rgba(191, 201, 212, 0.7098039215686275);
}
.sidebar-wrapper .usr-info-content {
    display: flex;
}
.sidebar-wrapper .user-info {
    display: flex;
    padding: 8px 11px;
    width: 232px;
    background: #fff;
    margin: 3px 12px;
    border-radius: 6px;
    box-shadow: 0 10px 20px -10px rgba(191, 201, 212, 0.62);
    justify-content: space-between;
    box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002), 0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004), 0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005), 0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006), 0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008), 0 7px 0px rgba(0, 0, 0, 0.01)
}
.sidebar-wrapper .dropdown.show .user-info {
    border: 1px solid #e0e6ed;
    border-bottom: none;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.sidebar-wrapper .dropdown.show .dropdown-menu {
    border: 1px solid #e0e6ed;
    border-top: none;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
.sidebar-wrapper .user-info .user-image img {
    width: 35px;
    height: 35px;
    border-radius: 4px;
    margin-right: 12px;
}
.sidebar-wrapper .user-info .user-name h6 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 0;
}
.sidebar-wrapper .user-info .user-name p {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 0;
}
.sidebar-wrapper .user-info svg {
    align-self: center;
    width: 16px;
    height: 16px;
    margin-left: 14px;
}
.sidebar-wrapper .user-content .dropdown-menu .dropdown-item {
    padding: 0;
}
.sidebar-wrapper .user-content .dropdown-menu .dropdown-item:hover {
    background-image: linear-gradient(108deg, #f5f7fa 50%, #c3cfe2 150%);
}
.sidebar-wrapper .user-content .dropdown-menu .dropdown-item a {
    display: block;
    color: #3b3f5c;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 30px;
}

.sidebar-wrapper .user-content .dropdown-menu .dropdown-item a svg {
    width: 18px;
    margin-right: 8px;
    height: 18px;
    color: #3b3f5c;
    fill: rgba(59, 63, 92, 0.2);
}

.sidebar-closed #content {
    margin-left: 0;
}
.sidebar-wrapper #compactSidebar {
    width: 255px;
    position: fixed;
    top: 101px;
    left: 0;
    z-index: 1031;
    transition: .3s ease all;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.sidebar-closed #compactSidebar {
    left: -255px;
}

.sidebar-wrapper #compactSidebar .menu-categories {
    position: relative;
    padding: 0;
    height: calc(90vh - 85px);
    flex-wrap: wrap;
    display: inline-block;
    margin-bottom: 0;
}
.sidebar-wrapper #compactSidebar .menu-categories.ps .ps__rail-y:hover, 
.sidebar-wrapper #compactSidebar .menu-categories.ps .ps__rail-y.ps--clicking {
    background-color: transparent;
}
.sidebar-wrapper #compactSidebar .menu-categories > li.menu:first-child {
    float: none;
}
.sidebar-wrapper #compactSidebar .menu-categories > li.menu {
    position: relative;
    list-style: none;
    width: 50%;
    flex: 0 0 50%;
    padding: 12px;
    float: left;
}
.sidebar-wrapper #compactSidebar .menu-categories a.menu-toggle {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    color: #515365;
    /* color: black; */
    transition: color .3s;
    transition: background .3s;
    /*background: rgb(223 188 37 / 30%);// rgb(0 150 136 / 11%);*/
    background: rgb(211 220 218);/* rgb(0 150 136 / 11%);*/
    border-radius: 10px;
    margin-bottom: 10px;
}
.sidebar-wrapper #compactSidebar .menu-categories a.menu-toggle:hover {
    border: 1px solid #3E3F54;
}
.sidebar-wrapper #compactSidebar .menu-categories a.menu-toggle > div.base-menu {
    text-align: center;
}
.sidebar-wrapper #compactSidebar .menu-categories a.menu-toggle .base-icons {
    text-align: center;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    padding-top: 2px;
}
.sidebar-wrapper #compactSidebar .menu-categories a.menu-toggle:hover .base-icons {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}
.sidebar-wrapper #compactSidebar .menu-categories a.menu-toggle .base-icons svg {
    position: relative;
    display: inline-block;
    color: #3E3F54;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    fill: rgb(81 83 101 / 40%);/* rgb(0 150 136 / 14%);*/
    stroke-width: 1px;
}
.sidebar-wrapper #compactSidebar .menu-categories a.menu-toggle .base-menu span {
    font-size: 12px;
    margin-top: 8px;
    display: inline-block;
    color: #3E3F54;
    font-weight: 600;
    letter-spacing: 0.8px;
}
.sidebar-wrapper #compactSidebar .menu-categories > li.menu:hover svg.feather-chevron-left {
    display: block;
}
/*Data active True*/
.sidebar-wrapper #compactSidebar .menu-categories > li.menu.active svg.feather-chevron-left {
    display: block;
}
.sidebar-wrapper:not(.hide-mainMenu) #compactSidebar .menu-categories a.menu-toggle[data-active="true"] {
    /*#009688*/
    background-color: #E48574 ;
    box-shadow: 0 10px 20px -10px #E48574 ;
    border: 1px solid #E48574 ;
}
.sidebar-wrapper:not(.hide-mainMenu) #compactSidebar .menu-categories a.menu-toggle[data-active="true"] .base-icons {
    text-align: center;
}
.sidebar-wrapper:not(.hide-mainMenu) #compactSidebar .menu-categories a.menu-toggle[data-active="true"] .base-icons svg {
    color: #3E3F54;
    fill: rgb(81 83 101 / 25%);
}
.sidebar-wrapper:not(.hide-mainMenu) #compactSidebar .menu-categories a.menu-toggle[data-active="true"] .base-menu span {
    font-weight: 600;
    color: #3E3F54; /*#e0e6ed*/
    font-size: 11px;
}
.sidebar-wrapper #compact_submenuSidebar {
    left: -255px;
    position: fixed;
    height: calc(100vh - 85px);
    top: 85px;
    background: #e0f0ef;
    width: 255px;
    padding: 17px 0;
    transition: .3s ease all;
    z-index: 1031;
    /*background-color: #EFDE91; /*#e0f0ef*/
    background-color: #e8e8e8;
}
.sidebar-wrapper #compact_submenuSidebar.show {
    left: 0;
}
.sidebar-wrapper #compact_submenuSidebar .submenu {
    display: none;
}
.sidebar-wrapper #compact_submenuSidebar .submenu.show {
    display: block;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list {
    padding: 0;
    margin: 0;
    margin-bottom: 25px;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list:not(.menu-block-submenu) {
    padding: 7px 20px;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li {
    padding: 0;
    list-style: none;
    margin-bottom: 0;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list.menu-block-submenu {
    display: flex;
    flex-wrap: wrap;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.menu-block {
    display: inline-block;
    position: relative;
    list-style: none;
    width: 50%;
    flex: 0 0 50%;
    padding: 12px;
    float: left;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.menu-block a:hover {
    border: 1px solid #009688;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.menu-block a {
    padding: 17px 14px!important;
    text-align: center;
    background: rgb(35 126 112 / 12%);
    border-radius: 10px;
    box-shadow: 0 10px 20px -10px rgba(191, 201, 212, 0.7098039215686275);
    margin-bottom: 10px;
    font-size: 12px;
    color: #009688;
    font-weight: 600;
    letter-spacing: 0.8px;
    border: 1px solid rgb(201 226 224);
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.active.menu-block a {
    background-color: #009688;
    box-shadow: 0 10px 20px -10px #009688;
    border: 1px solid #009688;
    color: #fff;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.active.menu-block a svg:not(.feather-chevron-right) {
    color: #e0e6ed;
    stroke-width: 1.5px;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.menu-block a svg:not(.feather-chevron-right) {
    display: block;
    margin: 0 auto;
    margin-bottom: 12px;
    width: 25px;
    height: 25px;
    stroke-width: 1px;
    fill: rgb(0 150 136 / 14%);
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li a {
    padding: 6px 5px;
    display: block;
    color: #506690;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: .300s;
    border-radius: 5px;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li:first-child a {
    padding-top: 0;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list:not(.menu-block-submenu) li a {
    position: relative;
    display: inline-block;
    font-weight: 500;
    color: #1b2e4b;
    background: linear-gradient(to right, midnightblue, midnightblue 50%, #fff 50%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 200% 100%;
    background-position: 100%;
    transition: background-position 275ms ease;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list:not(.menu-block-submenu) li.active > a {
    background-position: 0 100%;
    color: #2196f3;
    -webkit-text-fill-color: #2196f3;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list:not(.menu-block-submenu) li.active a .icon svg {
    fill: #2196f3!important;
    color: #2196f3;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.active a .icon svg.feather-git-commit:not(.feather-chevron-right):not(.feather-folder) line {
    color: #2196f3;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li a:hover .icon svg:not(.feather-chevron-right) {
    fill: #3e8e9e4a;
    color: #3e8e9e;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li a .cat-icon {
    display: inline;
    padding: 5px;
    background: #e0e6ed;
    margin-right: 15px;
    border-radius: 6px;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li a svg:not(.feather-chevron-right) {
    color: #E48574;
    vertical-align: bottom;
    width: 21px;
    height: 21px;
    fill: rgba(6, 8, 24, 0.0784313725490196);
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li a .icon {
    display: inline-flex;
    justify-content: center;
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 4px;
    transition: .100s;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li a .icon svg:not(.feather-chevron-right) {
    margin-right: 0;
    width: 4px;
    height: 4px;
    align-self: center;
    fill: #3e8e9e;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li a .icon svg.feather-git-commit:not(.feather-chevron-right):not(.feather-folder) {
    transform: rotate(45deg);
}

.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li a .icon svg:not(.feather-chevron-right):not(.feather-chevron-right) {
    margin-right: 0;
    width: 17px;
    height: 17px;
    align-self: center;
    fill: transparent;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li a .icon svg.feather-git-commit:not(.feather-chevron-right):not(.feather-folder) line {
    color: rgb(228 133 116 / 41%);
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li a .icon svg.feather-folder {
    margin-bottom: 3px;
    stroke-width: 1.6;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li a:hover {
    background-position: 0 100%;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li a:hover .icon svg:not(.feather-chevron-right) {
    fill: red ;
    /* color: #E48574; */
    color: #f2076de9;
    stroke-width: 1.8px;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li a svg.feather-chevron-right {
    width: 15px;
    height: 15px;
    align-self: center;
    transition: .500s;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.sub-submenu a[aria-expanded="true"] {
    transition: .300s;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.sub-submenu a[aria-expanded="true"] svg.feather-chevron-right {
    transform: rotate(90deg);
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.sub-submenu a {
    display: flex;
    justify-content: space-between;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.sub-submenu ul {
    padding-left: 0;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.sub-submenu ul li:first-child a {
    padding-top: 20px;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.sub-submenu ul li a {
    position: relative;
    padding: 6px 55px;
    background: transparent;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    color: #506690;
    -webkit-text-fill-color: #506690;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.sub-submenu ul li a:hover {
    color: #151516;
    -webkit-text-fill-color: #151516;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.sub-submenu ul li.active a {
    color: #009688;
    -webkit-text-fill-color: #009688;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.sub-submenu ul li.active a:before {
    background-color: #009688;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.sub-submenu ul li:first-child a:before {
    top: 28px;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.sub-submenu ul li a:before {
    content: '';
    position: absolute;
    height: 3px;
    width: 3px;
    background-color: #888ea8;
    top: 14px;
    left: 37px;
    border-radius: 50%;
}
.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.sub-submenu ul li a:hover:before {
    background-color: #304aca;
}
.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.1);
    z-index: 1029!important;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    touch-action: pan-y;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.overlay.show {
    display: block;
}
.animated{-webkit-animation-duration:0.2s;animation-duration:0.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes e-fadeInUp {
    0% {
        opacity: 0;
        margin-top: 10px;
    }
    100% {
        opacity: 1;
        margin-top: 0;
    }
}
@keyframes e-fadeInUp {
    0% {
        opacity: 0;
        margin-top: 10px;
    }
    100% {
        opacity: 1;
        margin-top: 0;
    }
}
.fadeInUp {
    -webkit-animation-name: e-fadeInUp;
    animation-name: e-fadeInUp
}

/*  
    ======================
        Footer-wrapper
    ======================
*/

.footer-wrapper {
    padding: 10px 0 10px 0;
    display: inline-block;
    background: transparent;
    font-weight: 600;
    font-size: 12px;
    width: 100%;
    border-top-left-radius: 6px;
    display: flex;
    justify-content: space-between;
    max-width: 1599px;
    margin: 0 auto;
}
.main-container.sidebar-closed .footer-wrapper {
    border-radius: 0;
}
.footer-wrapper .footer-section p {
    margin-bottom: 0;
    color: #515365;
    font-size: 13px;
    letter-spacing: 1px;
}
.footer-wrapper .footer-section p a {
    color: #515365;
}
.footer-wrapper .footer-section svg {
    color: #e7515a;
    fill: rgba(231, 81, 90, 0.4196078431372549);
    width: 15px;
    height: 15px;
    vertical-align: text-top;
}


/*  
    ======================
        MEDIA QUERIES
    ======================
*/

.admin-header .header-container {
    margin-bottom: 25px;
    max-width: 1599px;
    margin: 0 auto;
}
.admin-data-content {
    max-width: 1599px;
    margin: 0 auto;
    margin-top: 25px;
    min-height: calc(100vh - 135px);
}
@media (max-width: 1199px) {

    #content .col-left-content {
        height: auto;
    }
    .admin-data-content {
        min-height: calc(100vh - 142px);
        height: auto;
    }

    .admin-header .header-container {
        position: fixed;
        top: 0;
        width: 100%;
        left: 0;
        padding: 16px 25px;
        background: #f1f2f3;
        z-index: 5;
    }
    #content .col-left {
        margin-top: 78px;
    }
    .admin-header .header-container .navbar {
        display: flex;
        justify-content: space-between;
        padding: 0 0 8px 0;
        padding-top: 0;
    }

    .header-container {
        padding-right: 0;
        padding-left: 0;
    }
    .header-container .sidebarCollapse {
        margin-left: 8px;
        display: block;
    }
    .header-container .sidebarCollapse svg {
        width: 21px;
        height: 21px;
    }
    .navbar .navbar-item .nav-item.theme-logo {
        margin-right: 3px;
        margin-left: 0;
    }

    /*
        =============
            NavBar
        =============
    */
    .navbar {
        padding: 0 0 0 12px;
    }
    .navbar .navbar-item .nav-item.theme-logo a img {
        width: 38px;
        height: 38px;
    }
    .navbar .language-dropdown .custom-dropdown-icon a.dropdown-toggle {
        position: relative;
        padding: 9px 20px 10px 12px;
    }
    .admin-header .language-dropdown .custom-dropdown-icon a.dropdown-toggle svg {
        right: 10px;
        top: 13px;
    }
    /*
        =============
            Sidebar
        =============
    */
    #content { margin-left: 0; }
    #content .col-left { margin-right: 6px; }
    #sidebar .theme-brand {
        border-radius: 0;
    }
    .sidebar-closed #sidebar .theme-brand {
        padding: 0.9px 12px 0.9px 24px;
    }
    html.sidebar-noneoverflow .main-container:not(.sidebar-closed) .sidebar-wrapper #compactSidebar,
    .main-container.sbar-open .sidebar-wrapper #compactSidebar { left: 0; width: 255px }
    .sidebar-wrapper #compactSidebar { left: 0; }
    .sbar-open .sidebar-wrapper .theme-logo {
        left: 0;
    }
    .sbar-open .sidebar-wrapper .user-content {
        left: 0;
    }
    .sbar-open.sidebar-closed #compactSidebar { left: -150px!important; }
    /* body.alt-menu .sidebar-closed > .sidebar-wrapper { width: 0; left: -52px; } */
    .main-container { padding: 0;  }
    #sidebar ul.menu-categories.ps {
        height: calc(100vh - 114px)!important;
    }
    .sidebar-wrapper {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 9999;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
        border-radius: 0;
        left: -255px;
        width: 255px;
    }
    .sidebar-wrapper .sidebarCollapseFixed.show {
        display: none;
    }
    .sbar-open .sidebar-wrapper {
        left: 0;
    }
    .sbar-open.sidebar-closed .sidebar-wrapper {
        left: -255px;
    }
    #sidebar {
        height: 100vh!important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
    }

    /* display .overlay when it has the .active class */

    .overlay.show {
        display: block;
        opacity: .7;
    }
    
}
@media (max-width: 1199px) {
    .navbar .navbar-item .nav-item .form-inline.search .search-form-control { width: 220px; }
    
    .admin-header .toggle-notification-bar {
        display: block;
    }
    .admin-header .toggle-notification-bar svg {
        width: 19px;
        height: 19px;
        stroke-width: 1.6px;
    }
    .search-ul {
        display: inline-block;
        text-align: center;
    }
    .language-dropdown {
        display: inline-flex;
    }
}
@media (min-width: 992px) {
    .sidebar-closed #sidebar .theme-brand li.theme-text a { display: none; }
}
@media (max-width: 767px) {
    .navbar .navbar-item.search-ul { margin: 0 16px 0 auto; }
    .navbar .navbar-item .nav-item .form-inline.search .search-form-control {
        opacity: 0;
        transition: opacity 200ms, top 200ms
    }
    .navbar .navbar-item .nav-item .form-inline.search.input-focused .search-form-control {
        opacity: 1;
        transition: opacity 200ms, top 200ms
    }
    .navbar .navbar-item .nav-item .form-inline.search {
        opacity: 0;
        transition: opacity 200ms, top 200ms;
        top: -25px;
    }
    .navbar .navbar-item .nav-item .form-inline.search.input-focused {
        position: absolute;
        bottom: 0;
        top: 0;
        background: #fff;
        height: 100%;
        width: 100%;
        left: 0;
        right: 0;
        z-index: 32;
        margin-top: 0px!important;
        display: flex;
        opacity: 1;
        transition: opacity 200ms, top 200ms;
    }
    .navbar .navbar-item .nav-item.search-animated {
        position: initial;
        margin-right: 0;
        margin-left: 0;
    }
    .navbar .navbar-item .nav-item.search-animated svg {
        margin: 0;
        cursor: pointer;
        position: initial;
        transition: top 200ms;
        fill: none;
        stroke-width: 1.6px;
        color: #e3e4eb;
        width: 24px;
        height: 24px;
    }
    .navbar .navbar-item .nav-item.search-animated.show-search svg {
        margin: 0;
        position: absolute;
        top: 17px;
        left: 16px;
        width: 24px;
        height: 24px;
        color: #805dca;
        z-index: 40;
        transition: top 200ms;
    }
    .navbar .navbar-item .nav-item .form-inline.search.input-focused .search-bar { width: 100%; }
    .navbar .navbar-item .nav-item .form-inline.search.input-focused .search-form-control {
        background: transparent;
        display: block;
        padding-left: 50px;
        padding-right: 12px;
        border: none;
    }
    .navbar .navbar-item .nav-item .form-inline.search .search-form-control {
        border: none;
        width: 100%;
        display: none;
    }
}
@media (max-width: 575px) {

    .page-title h3 {
        text-overflow: ellipsis;
        overflow: hidden;
        min-width: 100px;
        max-width: 105px;
        white-space: nowrap;
    }    
    .navbar .navbar-item .nav-item.user-profile-dropdown { margin-left: 16px; }
    .navbar .navbar-item .nav-item.dropdown a svg {
        width: 24px;
        height: 24px;
    }
    .navbar .language-dropdown .custom-dropdown-icon a.dropdown-toggle img {
        width: 20px;
        height: 20px;
    }
    .admin-header .language-dropdown .custom-dropdown-icon a.dropdown-toggle {
        min-width: auto;
    }
    .admin-header .language-dropdown .custom-dropdown-icon a.dropdown-toggle svg {
        top: 14px;
    }
    .navbar .language-dropdown .custom-dropdown-icon a.dropdown-toggle span { display: none; }
    .footer-wrapper .footer-section.f-section-2 { display: none; }
    
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .navbar {
        padding: 12px 0 11px 20px;
    }
    .navbar .navbar-item .nav-item form.form-inline input.search-form-control {
        padding-top: 8px;
    }
}
/*
	===============================
			@Import	Function
	===============================
*/
/*
	===============================
			@Import	Mixins
	===============================
*/
.nav-tabs .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu.show, .nav-pills .dropdown:not(.custom-dropdown-icon):not(.custom-dropdown) .dropdown-menu.show {
  top: 36px !important; }

.nav-tabs {
  border-bottom: 1px solid #ebedf2; }
  .nav-tabs svg {
    width: 20px;
    vertical-align: bottom; }
  .nav-tabs .nav-link.active {
    color: #e95f2b;
    background-color: #fff;
    border-color: #e0e6ed #e0e6ed #fff; }
    .nav-tabs .nav-link.active:after {
      color: #e95f2b; }
  .nav-tabs .nav-link:hover {
    border-color: #ebedf2 #ebedf2 #f1f2f3; }

.dropdown-menu {
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.1); }

.nav-tabs .dropdown-item:hover {
  background-color: #f1f2f3;
  color: #515365; }

.nav-tabs li a.disabled {
  color: #e3e4eb !important; }

.nav-pills .nav-item:not(:last-child) {
  margin-right: 5px; }

.nav-pills .nav-link {
  color: #3b3f5c; }
  .nav-pills .nav-link.active:after {
    color: #fff; }

.nav-pills .show > .nav-link {
  background-color: #e95f2b; }

.nav-pills li a.disabled {
  color: #e3e4eb !important; }

h4 {
  font-size: 1.125rem; }

/*
    Simple Tab
*/
.simple-tab .nav-tabs li a {
  color: #3b3f5c; }

.simple-tab .nav-tabs .nav-item.show .nav-link, .simple-tab .nav-tabs .nav-link.active {
  color: #4361ee;
  font-weight: 600;
  background-color: #fff; }

.nav-tabs {
  border-bottom: 1px solid #e0e6ed; }

.simple-tab .tab-content > .tab-pane {
  padding: 20px 0 0 0; }

/*
    Simple Pills
*/
.simple-pills .nav-pills li a {
  color: #3b3f5c; }

.simple-pills .nav-pills .nav-link.active, .simple-pills .nav-pills .show > .nav-link {
  background-color: #4361ee;
  border-color: transparent; }

.simple-pills .tab-content > .tab-pane {
  padding: 20px 0 0 0; }

/*
    Icon Tab
*/
.icon-tab .nav-tabs li a {
  color: #3b3f5c; }

.icon-tab .nav-tabs svg {
  width: 20px;
  vertical-align: bottom; }

.icon-tab .nav-tabs .nav-item.show .nav-link, .icon-tab .nav-tabs .nav-link.active {
  color: #e95f2b;
  background-color: #fff;
  border-color: #e0e6ed #e0e6ed #fff; }

.icon-tab .tab-content > .tab-pane {
  padding: 20px 0 0 0; }

/*
    Icon Pill
*/
.icon-pill .nav-pills li a {
  color: #3b3f5c; }

.icon-pill .nav-pills svg {
  width: 20px;
  vertical-align: bottom; }

.icon-pill .nav-pills .nav-link.active, .icon-pill .nav-pills .show > .nav-link {
  background-color: #e2a03f;
  border-color: transparent; }

.icon-pill .tab-content > .tab-pane {
  padding: 20px 0 0 0; }

/*
    Underline
*/
.underline-content .nav-tabs {
  border-bottom: 1px solid #e0e6ed; }
  .underline-content .nav-tabs li a {
    padding-top: 15px;
    padding-bottom: 15px; }

.underline-content .tab-content > .tab-pane {
  padding: 20px 0 0 0; }

.underline-content .nav-tabs .nav-link.active, .underline-content .nav-tabs .show > .nav-link {
  border-color: transparent;
  border-bottom: 1px solid #241816;
  /* color: #805dca; */
  color: #241816;
  font-weight: bold;
  background-color: transparent; }

.underline-content .nav-tabs .nav-link.active:hover, .underline-content .nav-tabs .show > .nav-link:hover, .underline-content .nav-tabs .nav-link.active:focus, .underline-content .nav-tabs .show > .nav-link:focus {
  border-bottom: 1px solid #241816; }

.underline-content .nav-tabs .nav-link:focus, .underline-content .nav-tabs .nav-link:hover {
  border-color: transparent; }

/*
    Animated Underline
*/
.animated-underline-content .nav-tabs {
  border-bottom: 1px solid #e0e6ed; 
}
  .animated-underline-content .nav-tabs li a {
    padding-top: 15px;
    padding-bottom: 15px;
    position: relative; }

.animated-underline-content .tab-content > .tab-pane {
  padding: 20px 0 0 0; }

.animated-underline-content .nav-tabs .nav-link.active, .animated-underline-content .nav-tabs .show > .nav-link {
  border-color: transparent;
  color: #241816;
  font-weight: bold;
  /* background-color: #E48574; */
  /* border-bottom: 1px solid #e0e6ed;  */

  /* color: #E48574; */
  /* color: #805dca; */
 }

.animated-underline-content .nav-tabs .nav-link:focus, .animated-underline-content .nav-tabs .nav-link:hover {
  border-color: transparent; }

.animated-underline-content .nav-tabs .nav-link.active:before {
  -webkit-transform: scale(1);
  transform: scale(1); }

.animated-underline-content .nav-tabs .nav-link:before {
  content: "";
  height: 1px;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  background-color: #E48574;
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: all .3s; }

/*
    Justify Tab
*/
.justify-tab .nav-tabs li a {
  color: #3b3f5c; }

.justify-tab .nav-tabs .nav-item.show .nav-link, .justify-tab .nav-tabs .nav-link.active {
  color: #4361ee;
  background-color: #fff;
  border-color: #e0e6ed #e0e6ed #fff; }

.justify-tab .tab-content > .tab-pane {
  padding: 20px 0 0 0; }

/*
    Justify Pill
*/
.justify-pill .nav-pills li a {
  color: #3b3f5c; }

.justify-pill .nav-pills .nav-link.active, .justify-pill .nav-pills .show > .nav-link {
  background-color: #2196f3;
  border-color: transparent; }

.justify-pill .tab-content > .tab-pane {
  padding: 20px 0 0 0; }

/*
    Justify Centered Tab
*/
.tab-justify-centered .nav-tabs li a {
  color: #3b3f5c; }

.tab-justify-centered .nav-tabs .nav-item.show .nav-link, .tab-justify-centered .nav-tabs .nav-link.active {
  color: #e95f2b;
  background-color: #fff;
  border-color: #e0e6ed #e0e6ed #fff; }

.tab-justify-centered .tab-content > .tab-pane {
  padding: 20px 0 0 0; }

/*
    Justify Centered Pill
*/
.pill-justify-centered .nav-pills li a {
  color: #3b3f5c; }

.pill-justify-centered .nav-pills .nav-link.active, .pill-justify-centered .nav-pills .show > .nav-link {
  background-color: #e2a03f; }

.pill-justify-centered .tab-content > .tab-pane {
  padding: 20px 0 0 0; }

/*
    Justify Right Tab
*/
.tab-justify-right .nav-tabs li a {
  color: #3b3f5c; }

.tab-justify-right .nav-tabs .nav-item.show .nav-link, .tab-justify-right .nav-tabs .nav-link.active {
  color: #4361ee;
  background-color: #fff;
  border-color: #e0e6ed #e0e6ed #fff; }

.tab-justify-right .tab-content > .tab-pane {
  padding: 20px 0 0 0; }

/*
    Justify Right Pill
*/
.pill-justify-right .nav-pills .nav-link.active, .pill-justify-right .nav-pills .show > .nav-link {
  background-color: #2196f3; }

.pill-justify-right .tab-content > .tab-pane {
  padding: 20px 0 0 0; }

/*
    With Icons   
*/
.rounded-pills-icon .nav-pills li a {
  -webkit-border-radius: 0.625rem !important;
  -moz-border-radius: 0.625rem !important;
  -ms-border-radius: 0.625rem !important;
  -o-border-radius: 0.625rem !important;
  border-radius: 0.625rem !important;
  background-color: #f1f2f3;
  width: 100px;
  padding: 8px; }
  .rounded-pills-icon .nav-pills li a svg {
    display: block;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto; }

.rounded-pills-icon .nav-pills .nav-link.active, .rounded-pills-icon .nav-pills .show > .nav-link {
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
  background-color: #009688; }

.rounded-pills-icon .tab-content > .tab-pane {
  padding: 20px 0 0 0; }

/*
    Vertical With Icon
*/
.rounded-vertical-pills-icon .nav-pills a {
  -webkit-border-radius: 0.625rem !important;
  -moz-border-radius: 0.625rem !important;
  -ms-border-radius: 0.625rem !important;
  -o-border-radius: 0.625rem !important;
  border-radius: 0.625rem !important;
  background-color: #ffffff;
  border: solid 1px #e4e2e2;
  padding: 11px 23px;
  text-align: center;
  width: 100px;
  padding: 8px; }
  .rounded-vertical-pills-icon .nav-pills a svg {
    display: block;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto; }

.rounded-vertical-pills-icon .nav-pills .nav-link.active, .rounded-vertical-pills-icon .nav-pills .show > .nav-link {
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
  background-color: #009688;
  border-color: transparent; }

/*
    Rouned Circle With Icons   
*/
.rounded-circle-pills-icon .nav-pills li a {
  background-color: #f1f2f3;
  padding: 20px 20px; }
  .rounded-circle-pills-icon .nav-pills li a svg {
    display: block;
    text-align: center; }

.rounded-circle-pills-icon .nav-pills .nav-link.active, .rounded-circle-pills-icon .nav-pills .show > .nav-link {
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
  background-color: #2196f3; }

.rounded-circle-pills-icon .tab-content > .tab-pane {
  padding: 20px 0 0 0; }

/*
    Vertical Rounded Circle With Icon
*/
.rounded-circle-vertical-pills-icon .nav-pills a {
  background-color: #ffffff;
  border: solid 1px #e4e2e2;
  border-radius: 50%;
  height: 58px;
  width: 60px;
  padding: 16px 18px;
  max-width: 80px;
  min-width: auto; }
  .rounded-circle-vertical-pills-icon .nav-pills a svg {
    display: block;
    text-align: center;
    line-height: 19px; }

.rounded-circle-vertical-pills-icon .nav-pills .nav-link.active, .rounded-circle-vertical-pills-icon .nav-pills .show > .nav-link {
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
  background-color: #2196f3;
  border-color: transparent; }

/*
    Vertical Pill
*/
.vertical-pill .nav-pills .nav-link.active, .vertical-pill .nav-pills .show > .nav-link {
  background-color: #009688; }

/*
    Vertical Pill Right
*/
.vertical-pill-right .nav-pills .nav-link.active, .vertical-pill-right .nav-pills .show > .nav-link {
  background-color: #009688; }

/*
    Creative vertical pill
*/
.vertical-line-pill .nav-pills {
  border-bottom: 1px solid transparent;
  width: 92px;
  border-right: 1px solid #e0e6ed; }
  .vertical-line-pill .nav-pills a {
    padding-top: 15px;
    padding-bottom: 15px;
    position: relative; }
  .vertical-line-pill .nav-pills .nav-link {
    padding: .5rem 0; }
    .vertical-line-pill .nav-pills .nav-link.active {
      position: relative;
      background-color: transparent;
      border-color: transparent;
      color: #805dca;
      font-weight: 600; }
  .vertical-line-pill .nav-pills .show > .nav-link {
    position: relative;
    background-color: transparent;
    border-color: transparent;
    color: #805dca;
    font-weight: 600; }
  .vertical-line-pill .nav-pills .nav-link:focus, .vertical-line-pill .nav-pills .nav-link:hover {
    border-color: transparent; }
  .vertical-line-pill .nav-pills .nav-link.active:before {
    -webkit-transform: scale(1);
    transform: scale(1);
    bottom: 0; }
  .vertical-line-pill .nav-pills .nav-link:before {
    content: "";
    height: 100%;
    position: absolute;
    width: 1px;
    right: -1px;
    background-color: #805dca;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: all .3s; }

.vertical-line-pill #v-line-pills-tabContent h4 {
  color: #e2a03f; }

.vertical-line-pill #v-line-pills-tabContent p {
  color: #888ea8; }

.media img {
  border-radius: 50%;
  border: solid 5px #ebedf2;
  width: 80px;
  height: 80px; }

/*
    Border Tab
*/
.border-tab .tab-content {
  border: 1px solid #e0e6ed;
  border-top: none;
  padding: 10px; }
  .border-tab .tab-content > .tab-pane {
    padding: 20px 30px 0 30px; }
  .border-tab .tab-content .media img.meta-usr-img {
    margin-left: -30px; }

/*
    Vertical Border Tab
*/
.vertical-border-pill .nav-pills {
  width: 92px; }
  .vertical-border-pill .nav-pills a {
    padding-top: 15px;
    padding-bottom: 15px;
    position: relative; }
  .vertical-border-pill .nav-pills .nav-link {
    padding: .5rem 0;
    border: 1px solid #e0e6ed;
    border-radius: 0;
    border-bottom: none; }
    .vertical-border-pill .nav-pills .nav-link:last-child {
      border-bottom: 1px solid #e0e6ed; }
    .vertical-border-pill .nav-pills .nav-link.active {
      position: relative;
      color: #fff;
      background-color: #1abc9c; }
  .vertical-border-pill .nav-pills .show > .nav-link {
    position: relative;
    color: #fff;
    background-color: #1abc9c; }

/*
    Border Top Tab
*/
.border-top-tab .nav-tabs {
  border-bottom: 1px solid transparent; }
  .border-top-tab .nav-tabs li a {
    border-radius: 0px;
    padding: 12px 30px;
    background: #f6f7f8;
    color: #0e1726;
    border-right: 1px solid transparent; }

.border-top-tab .tab-content > .tab-pane {
  padding: 20px 0 0 0; }

.border-top-tab .nav-tabs .nav-item.show .nav-link {
  color: #495057;
  border-radius: 0px;
  padding: 12px 30px;
  background: #f6f7f8;
  color: #805dca;
  border: 1px solid transparent;
  border-top: 2px solid #805dca; }

.border-top-tab .nav-tabs .nav-link.active {
  color: #495057;
  border-radius: 0px;
  padding: 12px 30px;
  background: #f6f7f8;
  color: #805dca;
  border: 1px solid transparent;
  border-top: 2px solid #805dca; }

.border-top-tab .nav-tabs .nav-link:focus, .border-top-tab .nav-tabs .nav-link:hover {
  border: 1px solid transparent;
  border-top: 2px solid #805dca; }

/*
	===============================
			@Import	Function
	===============================
*/
/*
	===============================
			@Import	Mixins
	===============================
*/
/*
=======================
    Timeline Simple
=======================
*/
.timeline-simple {
  margin-bottom: 45px;
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto; }
  .timeline-simple h3 {
    font-size: 23px;
    font-weight: 600; }
  .timeline-simple p.timeline-title {
    position: relative;
    font-size: 19px;
    font-weight: 600;
    color: #1b55e2;
    margin-bottom: 28px; }
    .timeline-simple p.timeline-title:before {
      position: absolute;
      content: "";
      height: 2px;
      width: 70px;
      background: #1b55e2;
      border-radius: 50px;
      bottom: -2px;
      left: 15px; }
  .timeline-simple .timeline-list p.meta-update-day {
    margin-bottom: 24px;
    font-size: 16px;
    font-weight: 600;
    color: #888ea8; }
  .timeline-simple .timeline-list .timeline-post-content {
    display: flex; }
    .timeline-simple .timeline-list .timeline-post-content > div > div {
      margin-top: 28px; }
    .timeline-simple .timeline-list .timeline-post-content:not(:last-child) > div > div {
      margin-bottom: 70px; }
    .timeline-simple .timeline-list .timeline-post-content div.user-profile {
      position: relative;
      z-index: 2; }
      .timeline-simple .timeline-list .timeline-post-content div.user-profile:after {
        content: '';
        position: absolute;
        border-color: inherit;
        border-width: 2px;
        border-style: solid;
        top: 15px;
        left: 34%;
        transform: translateX(-50%);
        width: 0;
        height: auto;
        top: 48px;
        bottom: -15px;
        border-right-width: 0;
        border-top-width: 0;
        border-bottom-width: 0;
        border-radius: 0;
        z-index: -1;
        border-color: #ebedf2; }
      .timeline-simple .timeline-list .timeline-post-content div.user-profile img {
        width: 53px;
        height: 53px;
        border-radius: 50%;
        margin-right: 30px;
        -webkit-box-shadow: 0px 4px 9px 0px rgba(31, 45, 61, 0.31);
        box-shadow: 0px 4px 9px 0px rgba(31, 45, 61, 0.31); }
    .timeline-simple .timeline-list .timeline-post-content h4 {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 0;
      color: #1b55e2; }
    .timeline-simple .timeline-list .timeline-post-content svg {
      color: #888ea8;
      vertical-align: text-bottom;
      width: 21px;
      height: 21px; }
    .timeline-simple .timeline-list .timeline-post-content:hover svg {
      color: #1b55e2;
      fill: rgba(27, 85, 226, 0.239216); }
    .timeline-simple .timeline-list .timeline-post-content h6 {
      display: inline-block;
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 11px; }
    .timeline-simple .timeline-list .timeline-post-content:hover h6 {
      color: #888ea8; }
    .timeline-simple .timeline-list .timeline-post-content p.post-text {
      padding-left: 31px;
      color: #888ea8;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 28px; }
    .timeline-simple .timeline-list .timeline-post-content .post-contributers {
      padding-left: 31px; }
      .timeline-simple .timeline-list .timeline-post-content .post-contributers img {
        width: 38px;
        border-radius: 50%;
        margin-right: 7px;
        -webkit-box-shadow: 0px 6px 9px 2px rgba(31, 45, 61, 0.31);
        box-shadow: 1px 3px 7px 2px rgba(31, 45, 61, 0.31);
        -webkit-transition: all 0.35s ease;
        transition: all 0.35s ease;
        cursor: pointer;
        margin-bottom: 5px; }
        .timeline-simple .timeline-list .timeline-post-content .post-contributers img:hover {
          -webkit-transform: translateY(-3px) scale(1.02);
          transform: translateY(-3px) scale(1.02);
          box-shadow: none; }
    .timeline-simple .timeline-list .timeline-post-content .post-gallery-img {
      padding-left: 31px; }
      .timeline-simple .timeline-list .timeline-post-content .post-gallery-img img {
        width: 20%;
        border-radius: 6px;
        -webkit-box-shadow: 0px 6px 9px 2px rgba(31, 45, 61, 0.31);
        box-shadow: 1px 3px 7px 2px rgba(31, 45, 61, 0.31);
        -webkit-transition: all 0.35s ease;
        transition: all 0.35s ease;
        cursor: pointer; }
        .timeline-simple .timeline-list .timeline-post-content .post-gallery-img img:hover {
          -webkit-transform: translateY(-3px) scale(1.02);
          transform: translateY(-3px) scale(1.02);
          box-shadow: none; }
        .timeline-simple .timeline-list .timeline-post-content .post-gallery-img img:not(:last-child) {
          margin-right: 23px; }

.mt-container {
  /* max-width: 0px; */
  /* max-width: 570px; */
 }

.modern-timeline {
  list-style: none;
  position: relative;
  padding: 50px 0 50px;
  margin: 0; }
  .modern-timeline:before {
    position: absolute;
    background: #ebedf2;
    bottom: 0;
    left: 50%;
    top: 0;
    content: "";
    width: 3px;
    margin-left: -1.5px; }
  .modern-timeline > li {
    margin-bottom: 50px;
    position: relative; }
    .modern-timeline > li:after, .modern-timeline > li:before {
      display: table;
      content: ""; }
    .modern-timeline > li > .modern-timeline-badge {
      position: absolute;
      background: #fff;
      border: 3px solid #ebedf2;
      border-radius: 100%;
      height: 20px;
      width: 20px;
      margin-left: -10px;
      text-align: center;
      z-index: 1;
      left: 50%;
      top: 32px; }
    .modern-timeline > li > .modern-timeline-panel {
      position: relative;
      border: 1px solid #ebedf2;
      background: #fff;
      border-radius: .1875rem;
      box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
      box-shadow: 0px 20px 20px rgba(126, 142, 177, 0.12);
      transition: .3s ease-in-out;
      float: left;
      width: 46%;
      border-radius: 6px; }
      .modern-timeline > li > .modern-timeline-panel:before {
        position: absolute;
        background: #ebedf2;
        right: -37px;
        top: 40px;
        transition: .3s ease-in-out;
        content: " ";
        width: 37px;
        height: 3px;
        display: block; }
    .modern-timeline > li:nth-child(even) > .modern-timeline-panel:before {
      right: auto;
      left: -37px;
      width: 37px; }
    .modern-timeline > li:after {
      clear: both; }
    .modern-timeline > li > .modern-timeline-panel .modern-timeline-preview img {
      width: 100%;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px; }
    .modern-timeline > li > .modern-timeline-panel *:last-child {
      margin-bottom: 0; }
    .modern-timeline > li:nth-child(even) > .modern-timeline-panel {
      border: 1px solid #ebedf2;
      float: right; }
    .modern-timeline > li > .modern-timeline-panel *:last-child {
      margin-bottom: 0; }
    .modern-timeline > li > .modern-timeline-panel .modern-timeline-body {
      padding: 30px 20px;
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px; }
      .modern-timeline > li > .modern-timeline-panel .modern-timeline-body h4 {
        color: #e95f2b;
        margin-bottom: 20px;
        font-size: 1.125rem; }
      .modern-timeline > li > .modern-timeline-panel .modern-timeline-body p {
        color: #3b3f5c;
        margin-bottom: 0; }
        .modern-timeline > li > .modern-timeline-panel .modern-timeline-body p a {
          display: block; }
    .modern-timeline > li > .modern-timeline-panel *:last-child {
      margin-bottom: 0; }

.modern-timeline-top:before, .modern-timeline-bottom:before {
  background: #ebedf2;
  position: absolute;
  height: 3px;
  width: 50px;
  display: block;
  content: "";
  bottom: 0;
  left: 50%;
  margin-left: -25px; }

.modern-timeline-top:before {
  top: 0; }

@media (max-width: 767px) {
  ul.modern-timeline > li > .modern-timeline-panel {
    border: 1px solid #ebedf2;
    float: right;
    width: 100%; }
  ul.modern-timeline > li > .modern-timeline-badge {
    display: none; }
  .modern-timeline > li > .modern-timeline-panel:before {
    display: none; } }

/*
=====================
    Modern
=====================
*/
.timeline-alter .item-timeline {
  display: flex; }
  .timeline-alter .item-timeline .t-time {
    padding: 10px;
    align-self: center; 
  }
    .timeline-alter .item-timeline .t-time p {
      margin: 0;
      min-width: 58px;
      max-width: 100px;
      font-size: 16px;
      font-weight: 600;
      color: #3b3f5c;
      align-self: center; }
  .timeline-alter .item-timeline .t-img {
    position: relative;
    border-color: #ebedf2;
    padding: 10px; }
    .timeline-alter .item-timeline .t-img:before {
      content: '';
      position: absolute;
      border-color: inherit;
      border-width: 2px;
      border-style: solid;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      top: 15px;
      left: 50%;
      transform: translateX(-50%); }
    .timeline-alter .item-timeline .t-img:after {
      content: '';
      position: absolute;
      border-color: inherit;
      border-width: 2px;
      border-style: solid;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      top: 15px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: auto;
      top: 25px;
      bottom: -15px;
      border-right-width: 0;
      border-top-width: 0;
      border-bottom-width: 0;
      border-radius: 0; }
    .timeline-alter .item-timeline .t-img img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      z-index: 7;
      position: relative; }
  .timeline-alter .item-timeline .t-usr-txt {
    display: block;
    padding: 10px;
    position: relative;
    border-color: #ebedf2; }
    .timeline-alter .item-timeline .t-usr-txt:before {
      content: '';
      position: absolute;
      border-color: inherit;
      border-width: 2px;
      border-style: solid;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      top: 15px;
      left: 50%;
      transform: translateX(-50%); }
    .timeline-alter .item-timeline .t-usr-txt:after {
      content: '';
      position: absolute;
      border-color: inherit;
      border-width: 2px;
      border-style: solid;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      top: 15px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: auto;
      top: 25px;
      bottom: -15px;
      border-right-width: 0;
      border-top-width: 0;
      border-bottom-width: 0;
      border-radius: 0; }
    .timeline-alter .item-timeline .t-usr-txt p {
      margin: 0;
      background: #c2d5ff;
      height: 45px;
      width: 45px;
      border-radius: 50%;
      display: flex;
      align-self: center;
      justify-content: center;
      margin-bottom: 0;
      color: #1b55e2;
      font-weight: 700;
      font-size: 18px;
      z-index: 7;
      position: relative; }
    .timeline-alter .item-timeline .t-usr-txt span {
      align-self: center; }
  .timeline-alter .item-timeline .t-meta-time {
    padding: 10px;
    align-self: center; 
  }
    .timeline-alter .item-timeline .t-meta-time p {
      margin: 0;
      min-width: 100px;
      max-width: 100px;
      font-size: 12px;
      font-weight: 700;
      color: #888ea8; }
  .timeline-alter .item-timeline .t-text {
    padding: 10px;
    align-self: center; }
    .timeline-alter .item-timeline .t-text p {
      font-size: 13px;
      margin: 0;
      color: #3b3f5c;
      font-weight: 600; }
      .timeline-alter .item-timeline .t-text p a {
        color: #1b55e2;
        font-weight: 600; }

/*
=====================
    Basic
=====================
*/
.timeline-line .item-timeline {
  display: flex; }
  .timeline-line .item-timeline .t-dot {
    position: relative; }
    .timeline-line .item-timeline .t-dot:before {
      content: '';
      position: absolute;
      border-color: inherit;
      border-width: 2px;
      border-style: solid;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      top: 15px;
      left: 50%;
      transform: translateX(-50%);
      border-color: #2196f3; }
    .timeline-line .item-timeline .t-dot:after {
      content: '';
      position: absolute;
      border-color: inherit;
      border-width: 2px;
      border-style: solid;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      top: 15px;
      left: 50%;
      transform: translateX(-50%);
      border-color: #2196f3;
      width: 0;
      height: auto;
      top: 25px;
      bottom: -15px;
      border-right-width: 0;
      border-top-width: 0;
      border-bottom-width: 0;
      border-radius: 0; }
    .timeline-line .item-timeline .t-dot.t-dot-primary:before {
      border-color: #1b55e2; }
    .timeline-line .item-timeline .t-dot.t-dot-success:before {
      border-color: #8dbf42; }
    .timeline-line .item-timeline .t-dot.t-dot-warning:before {
      border-color: #e2a03f; }
    .timeline-line .item-timeline .t-dot.t-dot-info:before {
      border-color: #2196f3; }
    .timeline-line .item-timeline .t-dot.t-dot-danger:before {
      border-color: #e7515a; }
    .timeline-line .item-timeline .t-dot.t-dot-dark:before {
      border-color: #3b3f5c; }
    .timeline-line .item-timeline .t-dot.t-dot-primary:after {
      border-color: #1b55e2; }
    .timeline-line .item-timeline .t-dot.t-dot-success:after {
      border-color: #8dbf42; }
    .timeline-line .item-timeline .t-dot.t-dot-warning:after {
      border-color: #e2a03f; }
    .timeline-line .item-timeline .t-dot.t-dot-info:after {
      border-color: #2196f3; }
    .timeline-line .item-timeline .t-dot.t-dot-danger:after {
      border-color: #e7515a; }
    .timeline-line .item-timeline .t-dot.t-dot-dark:after {
      border-color: #3b3f5c; }
  .timeline-line .item-timeline:last-child .t-dot:after {
    display: none; }
  .timeline-line .item-timeline .t-meta-time {
    margin: 0;
    min-width: 100px;
    max-width: 100px;
    font-size: 12px;
    font-weight: 700;
    color: #888ea8;
    align-self: center; }
  .timeline-line .item-timeline .t-text {
    padding: 10px;
    align-self: center;
    margin-left: 10px; }
    .timeline-line .item-timeline .t-text p {
      font-size: 13px;
      margin: 0;
      color: #3b3f5c;
      font-weight: 600; }
      .timeline-line .item-timeline .t-text p a {
        color: #1b55e2;
        font-weight: 600; }
  .timeline-line .item-timeline .t-time {
    margin: 0;
    min-width: 58px;
    max-width: 100px;
    font-size: 16px;
    font-weight: 600;
    color: #3b3f5c;
    padding: 10px 0; }
  .timeline-line .item-timeline .t-text .t-meta-time {
    margin: 0;
    min-width: 100px;
    max-width: 100px;
    font-size: 12px;
    font-weight: 700;
    color: #888ea8;
    align-self: center; }

@media (max-width: 767px) {
  .timeline-simple .timeline-list .timeline-post-content .post-gallery-img img {
    width: 150px;
    margin-bottom: 23px; } }

@media (max-width: 575px) {
  .timeline-alter .item-timeline {
    display: block;
    text-align: center; }
    .timeline-alter .item-timeline .t-meta-time p, .timeline-alter .item-timeline .t-usr-txt p {
      margin: 0 auto; }
  .timeline-simple .timeline-list .timeline-post-content {
    display: block; }
    .timeline-simple .timeline-list .timeline-post-content div.user-profile {
      margin-bottom: 18px;
      text-align: center; }
      .timeline-simple .timeline-list .timeline-post-content div.user-profile:after {
        display: none; }
      .timeline-simple .timeline-list .timeline-post-content div.user-profile img {
        margin-right: 0; }
    .timeline-simple .timeline-list .timeline-post-content h4, .timeline-simple .timeline-list .timeline-post-content .meta-time-date {
      text-align: center; } }

/*
	===============================
			@Import	Function
	===============================
*/
/*
	===============================
			@Import	Mixins
	===============================
*/
.widget-content-area {
  padding: 10px 20px; }

.toggle-code-snippet {
  margin-bottom: -6px; }

/*      Media Object      */
.media {
  margin-top: 20px;
  margin-bottom: 20px; }
  .media img {
    width: 50px;
    height: 50px;
    margin-right: 15px; }
  .media .media-body {
    align-self: center; }
    .media .media-body .media-heading {
      color: #3b3f5c;
      font-weight: 700;
      margin-bottom: 10px;
      font-size: 17px;
      letter-spacing: 1px; }
    .media .media-body .media-text {
      color: #515365;
      margin-bottom: 0;
      font-size: 14px;
      letter-spacing: 0; }

/*      Right Aligned   */
.media-right-aligned .media img {
  margin-right: 0;
  margin-left: 15px; }

/* 	Media Notation 	*/
.notation-text .media:first-child {
  border-top: none; }

.notation-text .media .media-body .media-notation {
  margin-top: 8px;
  margin-bottom: 9px; }
  .notation-text .media .media-body .media-notation a {
    color: #515365;
    font-size: 13px;
    font-weight: 700;
    margin-right: 8px; }

/* 	Media Notation With Icon	*/
.notation-text-icon .media:first-child {
  border-top: none; }

.notation-text-icon .media .media-body .media-notation {
  margin-top: 8px;
  margin-bottom: 9px; }
  .notation-text-icon .media .media-body .media-notation a {
    color: #515365;
    font-size: 13px;
    font-weight: 700;
    margin-right: 8px; }
    .notation-text-icon .media .media-body .media-notation a svg {
      color: #888ea8;
      margin-right: 6px;
      vertical-align: sub;
      width: 18px;
      height: 18px;
      fill: rgba(0, 23, 55, 0.08); }

/* 	With Labels	*/
.m-o-label .media:first-child {
  border-top: none; }

.m-o-label .media .badge {
  float: right; }

/* 	Dropdown	*/
.m-o-dropdown-list .media:first-child {
  border-top: none; }

.m-o-dropdown-list .media .media-heading {
  display: flex;
  justify-content: space-between; }
  .m-o-dropdown-list .media .media-heading div.dropdown-list {
    cursor: pointer;
    color: #888ea8;
    font-size: 18px;
    float: right; }
    .m-o-dropdown-list .media .media-heading div.dropdown-list a.dropdown-item span {
      align-self: center; }
    .m-o-dropdown-list .media .media-heading div.dropdown-list a.dropdown-item svg {
      color: #888ea8;
      align-self: center;
      width: 20px;
      height: 20px;
      fill: rgba(0, 23, 55, 0.08);
      float: right;
      margin-right: 0; }
    .m-o-dropdown-list .media .media-heading div.dropdown-list a.dropdown-item:hover svg {
      color: #4361ee;
      fill: rgba(27, 85, 226, 0.239216); }

.m-o-dropdown-list .dropdown-menu {
  border-radius: 6px;
  min-width: 9rem;
  border: 1px solid #ebedf2;
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
  padding: 9px 0; }

.m-o-dropdown-list .dropdown-item {
  font-size: 14px;
  color: #888ea8;
  padding: 5px 12px;
  display: flex;
  justify-content: space-between; }
  .m-o-dropdown-list .dropdown-item:hover {
    color: #e95f2b;
    text-decoration: none;
    background-color: #f1f2f3; }

/* 	Label Icon	*/
.m-o-label-icon .media:first-child {
  border-top: none; }

.m-o-label-icon .media svg.label-icon {
  align-self: center;
  width: 30px;
  height: 30px;
  margin-right: 16px; }
  .m-o-label-icon .media svg.label-icon.label-success {
    color: #1abc9c; }
  .m-o-label-icon .media svg.label-icon.label-danger {
    color: #ee3d49; }
  .m-o-label-icon .media svg.label-icon.label-warning {
    color: #ffbb44; }

/* 	Checkbox	*/
.m-o-chkbox .media:first-child {
  border-top: none; }

.m-o-chkbox .media .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #515365; }

/* 	Checkbox	*/
.m-o-radio .media:first-child {
  border-top: none; }

.m-o-radio .media .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #515365; }

.custom-control-label::before {
  background-color: #d3d3d3; }

/*
	===============================
			@Import	Function
	===============================
*/
/*
	===============================
			@Import	Mixins
	===============================
*/
.layout-px-spacing {
  min-height: auto !important; }

[class*="g-dot-"] {
  position: relative; }
  [class*="g-dot-"]:before {
    position: absolute;
    padding: 4px;
    content: '';
    background: transparent;
    border-radius: 50%;
    top: 15px;
    left: 0;
    border: 2px solid #515365; }

.g-dot-primary:before {
  border: none;
  background: #2196f3; }

.g-dot-warning:before {
  border: none;
  background: #e2a03f; }

.g-dot-success:before {
  border: none;
  background: #1abc9c; }

.g-dot-danger:before {
  border: none;
  background: #e7515a; }

.mail-content-container.mailInbox [data-original-title="Restore"], .mail-content-container.sentmail [data-original-title="Restore"], .mail-content-container.important [data-original-title="Restore"], .mail-content-container.spam [data-original-title="Restore"] {
  display: none; }

.mail-content-container.trashed [data-original-title="Reply"], .mail-content-container.trashed [data-original-title="Forward"], .mail-content-container.trashed [data-original-title="Print"] {
  display: none; }

/*----------Theme checkbox---------*/
.new-control {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex; }

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

.new-control.new-checkbox {
  cursor: pointer; }
  .new-control.new-checkbox .new-control-indicator {
    position: relative;
    top: .25rem;
    left: 0;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #bfc9d4;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
    border-radius: 2px;
    margin-right: 13px; }
  .new-control.new-checkbox > input:checked ~ span.new-control-indicator {
    background: #888ea8; }
    .new-control.new-checkbox > input:checked ~ span.new-control-indicator:after {
      display: block; }
  .new-control.new-checkbox span.new-control-indicator:after {
    border: solid #fff;
    top: 50%;
    left: 50%;
    margin-left: -2px;
    margin-top: -6px;
    width: 5px;
    height: 10px;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg);
    content: '';
    position: absolute;
    display: none; }
  .new-control.new-checkbox.checkbox-primary > input:checked ~ span.new-control-indicator {
    background: #3b3f5c; }

.mail-box-container {
  position: relative;
  display: flex;
  border-radius: 6px;
  background-color: #fff;
  -webkit-box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002), 0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004), 0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005), 0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006), 0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008), 0 7px 0px rgba(0, 0, 0, 0.01);
  -moz-box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002), 0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004), 0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005), 0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006), 0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008), 0 7px 0px rgba(0, 0, 0, 0.01);
  box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002), 0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004), 0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005), 0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006), 0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008), 0 7px 0px rgba(0, 0, 0, 0.01);
  height: calc(100vh - 142px); }

body.minimal .mail-box-container {
  border: 1px solid #e0e6ed !important;
  box-shadow: none; }

.mail-box-container .avatar-sm {
  width: 2.5rem;
  height: 2.5rem;
  font-size: .83333rem; }

.mail-box-container .avatar {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 34px;
  font-size: 12px; }
  .mail-box-container .avatar .avatar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #060818;
    color: #ebedf2; }

.mail-overlay {
  display: none;
  position: absolute;
  width: 100vw;
  height: 100%;
  background: #3b3f5c !important;
  z-index: 4 !important;
  opacity: 0;
  transition: all 0.5s ease-in-out; }
  .mail-overlay.mail-overlay-show {
    display: block;
    opacity: .7; }

.tab-title {
  padding: 33px 15px;
  max-width: 115px;
  border-right: 1px solid #e0e6ed; }
  .tab-title .mail-btn-container {
    padding: 0 30px; }
  .tab-title #btn-compose-mail {
    transform: none;
    background: #3b3f5c;
    border: none !important;
    padding: 7px 9px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff !important;
    width: 40px;
    margin: 0 auto;
    box-shadow: 0px 5px 10px 0px rgba(59, 63, 92, 0.38); }
    .tab-title #btn-compose-mail:hover {
      box-shadow: none; }
    .tab-title #btn-compose-mail svg {
      width: 22px;
      height: 22px; }
  .tab-title.mail-menu-show {
    left: 0;
    width: 100%;
    height: 100%; }
  .tab-title .nav-pills .nav-link.active, .tab-title .nav-pills .show > .nav-link {
    background-color: transparent;
    color: #4361ee;
    font-weight: 600;
    fill: rgba(27, 85, 226, 0.239216); }
  .tab-title .mail-categories-container {
    margin-top: 35px;
    padding: 0 0; }
  .tab-title .mail-sidebar-scroll {
    position: relative;
    margin: auto;
    width: 100%;
    overflow: auto;
    height: calc(100vh - 283px); }
    .tab-title .mail-sidebar-scroll .ps__rail-y {
      right: -15px !important; }
  .tab-title .nav-pills:nth-child(1) .nav-item:first-child a.nav-link {
    border-top: 1px solid #e0e6ed;
    padding-top: 24px; }
  .tab-title .nav-pills a.nav-link {
    position: relative;
    font-weight: 600;
    color: #515365;
    padding: 14px 0px 14px 0px;
    cursor: pointer;
    font-size: 14px;
    display: block;
    text-align: center;
    border-radius: 0;
    border-bottom: 1px solid #e0e6ed; }
  .tab-title .nav-pills .nav-link.active svg, .tab-title .nav-pills .show > .nav-link svg {
    color: #4361ee; }
  .tab-title .nav-pills a.nav-link svg {
    width: 19px;
    height: 19px;
    margin-bottom: 7px;
    color: #888ea8; }
  .tab-title .nav-pills a.nav-link span.nav-names {
    display: block;
    letter-spacing: 1px;
    padding: 0; }
  .tab-title .nav-pills a.nav-link .mail-badge {
    background: #4361ee;
    border-radius: 50%;
    position: absolute;
    right: 8px;
    padding: 3px 0;
    height: 19px;
    width: 19px;
    color: #fff;
    font-weight: 500;
    font-size: 10px;
    top: 7px; }

.group-section {
  font-weight: 600;
  font-size: 15px;
  display: inline-block;
  color: #060818;
  letter-spacing: 1px;
  margin-top: 22px;
  margin-bottom: 13px;
  display: flex;
  justify-content: center; }
  .group-section svg {
    color: #060818;
    margin-right: 6px;
    align-self: center;
    width: 17px;
    height: 17px;
    fill: #acb0c3; }

.tab-title .nav-pills.group-list .nav-item a {
  position: relative;
  padding: 6px 45px 6px 41px;
  letter-spacing: 1px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #888ea8;
  border-bottom: none !important; }
  .tab-title .nav-pills.group-list .nav-item a.g-dot-primary.active:before {
    background: #2196f3; }
  .tab-title .nav-pills.group-list .nav-item a.g-dot-warning.active:before {
    background: #e2a03f; }
  .tab-title .nav-pills.group-list .nav-item a.g-dot-success.active:before {
    background: #8dbf42; }
  .tab-title .nav-pills.group-list .nav-item a.g-dot-danger.active:before {
    background: #e7515a; }
  .tab-title .nav-pills.group-list .nav-item a[class*="g-dot-"]:before {
    position: absolute;
    padding: 3px;
    content: '';
    border-radius: 50%;
    top: 11px;
    left: 18px;
    border: 2px solid #e0e6ed; }

.tab-title .nav-pills .nav-item .dropdown-menu {
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2);
  padding: 0;
  border: none; }

.tab-title li.mail-labels a.dropdown-item {
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px; }
  .tab-title li.mail-labels a.dropdown-item:hover {
    background-color: #fff;
    color: #4361ee; }

.tab-title li.mail-labels .label:after {
  position: absolute;
  content: "";
  height: 6px;
  width: 6px;
  border-radius: 50%;
  right: 15px;
  top: 43%; }

/*Mail Labels*/
.actions-btn-tooltip.tooltip {
  opacity: 1;
  top: -11px !important; }

.actions-btn-tooltip .arrow:before {
  border-top-color: #3b3f5c; }

.actions-btn-tooltip .tooltip-inner {
  background: #3b3f5c;
  color: #fff;
  font-weight: 700;
  border-radius: 30px;
  box-shadow: 0px 5px 15px 1px rgba(113, 106, 202, 0.2);
  padding: 4px 16px; }

/*
=====================
    Mailbox Inbox
=====================
*/
.mailbox-inbox {
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  max-width: 100%;
  width: 100%;
  background: #f9f9f9; }
  .mailbox-inbox .mail-menu {
    margin: 12px 13px 12px 13px;
    width: 22px;
    border-radius: 0;
    color: #515365;
    align-self: center; }
  .mailbox-inbox .search {
    display: flex;
    border-bottom: 1px solid #e0e6ed;
    background: #ebedf2; }
    .mailbox-inbox .search input {
      border: none;
      padding: 12px 13px 12px 13px;
      background-color: #fff;
      border-radius: 0;
      border-top-right-radius: 6px; }
      .mailbox-inbox .search input:focus {
        box-shadow: 0 0 5px 2px #f1f2f3; }
  .mailbox-inbox .action-center {
    display: flex;
    justify-content: space-between;
    background: transparent;
    padding: 14px 25px;
    border-bottom: 1px solid #e0e6ed; }
    .mailbox-inbox .action-center .new-control {
      font-weight: 600;
      color: #3b3f5c; }
    .mailbox-inbox .action-center .nav-link {
      padding: 0;
      display: inline-block; }
    .mailbox-inbox .action-center .more-actions .dropdown-menu.show {
      top: 30px !important; }
    .mailbox-inbox .action-center .dropdown-menu.d-icon-menu {
      padding: 0;
      border: 1px solid #e0e6ed;
      min-width: 6rem;
      border-radius: 6px;
      top: 11px !important;
      left: 9px !important; }
      .mailbox-inbox .action-center .dropdown-menu.d-icon-menu a {
        font-size: 14px;
        font-weight: 600;
        padding: 10px 23px 10px 43px;
        color: #3b3f5c;
        letter-spacing: 1px; }
        .mailbox-inbox .action-center .dropdown-menu.d-icon-menu a[class*="g-dot-"]:before {
          left: 19px; }
        .mailbox-inbox .action-center .dropdown-menu.d-icon-menu a.dropdown-item.active, .mailbox-inbox .action-center .dropdown-menu.d-icon-menu a.dropdown-item:active {
          background-color: transparent; }
        .mailbox-inbox .action-center .dropdown-menu.d-icon-menu a svg {
          vertical-align: middle;
          font-size: 15px;
          margin-right: 7px;
          color: #888ea8; }
    .mailbox-inbox .action-center .nav-link:after {
      display: none; }
    .mailbox-inbox .action-center svg {
      cursor: pointer;
      color: #888ea8;
      margin-right: 6px;
      vertical-align: middle;
      width: 20px;
      height: 20px;
      fill: #e0e6ed; }
    .mailbox-inbox .action-center .nav-link.label-group svg {
      margin-right: 12px; }
    .mailbox-inbox .action-center svg:not(:last-child) {
      margin-right: 12px; }
    .mailbox-inbox .action-center svg.revive-mail, .mailbox-inbox .action-center svg.permanent-delete {
      display: none; }
    .mailbox-inbox .action-center.tab-trash-active .nav-link svg {
      display: none; }
    .mailbox-inbox .action-center.tab-trash-active svg.action-important, .mailbox-inbox .action-center.tab-trash-active svg.action-spam, .mailbox-inbox .action-center.tab-trash-active svg.action-delete {
      display: none; }
    .mailbox-inbox .action-center.tab-trash-active svg.revive-mail, .mailbox-inbox .action-center.tab-trash-active svg.permanent-delete {
      display: inline-block; }
  .mailbox-inbox .more-actions svg.feather-more-vertical {
    margin-right: 0; }
  .mailbox-inbox .message-box {
    padding: 0 0 0 0; }
    .mailbox-inbox .message-box .message-box-scroll {
      position: relative;
      margin: auto;
      width: 100%;
      overflow: auto;
      height: calc(100vh - 247px); }
  .mailbox-inbox .mail-item[id*="unread-"] div.mail-item-heading .mail-item-inner .f-body .mail-title {
    font-weight: 600;
    color: #1b2e4b; }
  .mailbox-inbox .mail-item[id*="unread-"] div.mail-item-heading .mail-item-inner .f-body .user-email {
    font-weight: 500;
    color: #0e1726; }
  .mailbox-inbox .mail-item[id*="unread-"] div.mail-item-heading .mail-item-inner .mail-content-excerpt {
    font-weight: 600;
    color: #1b2e4b; }
  .mailbox-inbox .mail-item[id*="unread-"] div.mail-item-heading .mail-item-inner .f-body .meta-time {
    font-weight: 600; }
  .mailbox-inbox .mail-item div.mail-item-heading {
    padding: 11px 10px 11px 0;
    cursor: pointer;
    position: relative;
    background: #fff;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
    margin: 9px;
    border: 1px solid #e0e6ed;
    border-radius: 6px; }
    .mailbox-inbox .mail-item div.mail-item-heading:hover {
      background: #ebedf2;
      border: 1px solid #151516 !important; }
    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner {
      padding-left: 15px; }
      .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .n-chk {
        align-self: center; }
      .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-head {
        align-self: center; }
        .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-head img {
          width: 35px;
          height: 35px;
          border-radius: 50%; }
      .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body {
        align-self: center;
        display: flex;
        width: 100%; }
        .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body > div.meta-title-tag {
          display: flex;
          width: 100%;
          justify-content: space-between; }
        .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body > div.meta-mail-time {
          display: flex;
          justify-content: space-between; }
        .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .user-email {
          padding: 0 15px 0 20px;
          min-width: 215px;
          max-width: 215px;
          font-size: 15px;
          color: #607d8b;
          margin-bottom: 0;
          letter-spacing: 0px;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
          white-space: nowrap !important;
          align-self: center; }
        .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .meta-time {
          margin-bottom: 0;
          float: right;
          font-weight: 500;
          font-size: 12px;
          min-width: 75px;
          max-width: 80px;
          text-align: right; }
        .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .mail-title {
          font-size: 15px;
          color: #515365;
          margin-bottom: 2px;
          letter-spacing: 0px; }
        .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .tags {
          position: relative; }
          .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .tags span {
            display: none;
            margin-left: 11px; }
    .mailbox-inbox .mail-item div.mail-item-heading.personal .mail-item-inner .f-body .tags span.g-dot-primary, .mailbox-inbox .mail-item div.mail-item-heading.work .mail-item-inner .f-body .tags span.g-dot-warning, .mailbox-inbox .mail-item div.mail-item-heading.social .mail-item-inner .f-body .tags span.g-dot-success, .mailbox-inbox .mail-item div.mail-item-heading.private .mail-item-inner .f-body .tags span.g-dot-danger {
      display: inline-block; }
    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .tags span[class*="g-dot-"]:before {
      top: -11px;
      left: -13px; }
    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .mail-content-excerpt {
      font-size: 14px;
      margin-bottom: 0;
      color: #607d8b;
      margin-left: 0;
      margin-right: 0;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      width: calc(100vw - 830px);
      align-self: center; }
      .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .mail-content-excerpt svg.attachment-indicator {
        width: 18px;
        height: 18px;
        margin-right: 5px;
        vertical-align: top; }
  .mailbox-inbox .mail-item.sentmail div.mail-item-heading .mail-item-inner .mail-content-excerpt, .mailbox-inbox .mail-item.draft div.mail-item-heading .mail-item-inner .mail-content-excerpt {
    margin-left: 31px; }
  .mailbox-inbox .mail-item div.mail-item-heading .attachments {
    width: calc(100vw - 830px);
    margin: 0 auto;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: calc(100vw - 830px); }
    .mailbox-inbox .mail-item div.mail-item-heading .attachments span {
      display: inline-block;
      border: 1px solid #bfc9d4;
      padding: 1px 11px;
      border-radius: 30px;
      color: #3b3f5c;
      background: transparent;
      font-size: 12px;
      margin-right: 3px;
      font-weight: 700;
      margin-bottom: 2px;
      letter-spacing: 0px;
      max-width: 96px;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important; }

/*
=====================
    Content Box
=====================
*/
.content-box {
  background-color: #f9f9f9;
  position: absolute;
  top: 0;
  height: 100%;
  width: 0px;
  left: auto;
  right: -46px;
  overflow: hidden;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px; }
  .content-box .msg-close {
    padding: 13px;
    background: #fff;
    -webkit-box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
    box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12); }
  .content-box svg.close-message {
    font-size: 15px;
    color: #3b3f5c;
    padding: 3px;
    align-self: center;
    cursor: pointer;
    margin-right: 12px; }
  .content-box .mail-title {
    font-size: 24px;
    font-weight: 600;
    color: #4361ee;
    margin-bottom: 0;
    align-self: center; }

.mailbox-inbox .collapse {
  position: relative;
  height: calc(100vh - 196px); }

.mailbox-inbox .mail-content-container {
  position: relative;
  height: auto;
  overflow: auto;
  padding: 25px;
  border-radius: 6px; }
  .mailbox-inbox .mail-content-container .user-info img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 8px;
    border: 3px solid #ebedf2; }
  .mailbox-inbox .mail-content-container .user-info .avatar {
    margin-right: 8px; }
  .mailbox-inbox .mail-content-container .user-info .meta-title-tag .mail-usr-name {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 700;
    color: #2196f3; }
  .mailbox-inbox .mail-content-container .user-info .user-email {
    margin-bottom: 0;
    font-weight: 600;
    display: inline-block; }
    .mailbox-inbox .mail-content-container .user-info .user-email span {
      font-size: 16px;
      font-weight: 700; }
  .mailbox-inbox .mail-content-container .user-info .user-cc-mail {
    margin-bottom: 0;
    font-weight: 600;
    margin-left: 8px;
    display: inline-block; }
    .mailbox-inbox .mail-content-container .user-info .user-cc-mail span {
      font-size: 16px;
      font-weight: 700; }
  .mailbox-inbox .mail-content-container .user-info .meta-mail-time .meta-time {
    display: inline-block;
    font-weight: 700; }
  .mailbox-inbox .mail-content-container .mail-content-meta-date {
    font-size: 13px;
    font-weight: 600;
    color: #3b3f5c;
    display: inline-block;
    font-weight: 700; }
  .mailbox-inbox .mail-content-container .action-btns a {
    margin-right: 20px; }
  .mailbox-inbox .mail-content-container .action-btns svg {
    color: #888ea8;
    font-weight: 600; }
    .mailbox-inbox .mail-content-container .action-btns svg.restore {
      position: relative; }
      .mailbox-inbox .mail-content-container .action-btns svg.restore:after {
        content: '';
        height: 28px;
        width: 2px;
        background: #e3e4eb;
        position: absolute;
        border-radius: 50px;
        left: 9px;
        transform: rotate(30deg);
        top: -3px; }
  .mailbox-inbox .mail-content-container .mail-content-title {
    font-weight: 600;
    font-size: 20px;
    color: #515365;
    margin-bottom: 25px; }
  .mailbox-inbox .mail-content-container p {
    font-size: 14px;
    color: #3b3f5c; }
    .mailbox-inbox .mail-content-container p.mail-content {
      padding-top: 45px;
      border-top: 1px solid #e0e6ed;
      margin-top: 20px; }
  .mailbox-inbox .mail-content-container .attachments {
    margin-top: 55px;
    margin-bottom: 0; }
    .mailbox-inbox .mail-content-container .attachments .attachments-section-title {
      font-weight: 600;
      color: #515365;
      font-size: 16px;
      border-bottom: 1px solid #e0e6ed;
      padding-bottom: 9px;
      margin-bottom: 20px; }
  .mailbox-inbox .mail-content-container .attachment {
    display: inline-block;
    padding: 9px;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    min-width: 150px;
    max-width: 235px; }
    .mailbox-inbox .mail-content-container .attachment svg {
      font-size: 18px;
      margin-right: 13px;
      color: #805dca;
      align-self: center; }
    .mailbox-inbox .mail-content-container .attachment .file-name {
      color: #3b3f5c;
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 0;
      word-break: break-word; }
    .mailbox-inbox .mail-content-container .attachment .file-size {
      color: #3b3f5c;
      font-size: 11px;
      text-align: left;
      font-weight: 700;
      margin-bottom: 0; }

#editor-container {
  height: 200px; }

.ql-toolbar.ql-snow {
  border: 1px solid #e0e6ed;
  margin-top: 30px; }

.ql-container.ql-snow {
  border: 1px solid #e0e6ed; }

.modal-backdrop {
  background-color: #515365; }

.modal-content {
  border: none;
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); }
  .modal-content svg.close {
    position: absolute;
    right: -7px;
    top: -8px;
    font-size: 12px;
    font-weight: 600;
    padding: 2px;
    background: #fff;
    border-radius: 5px;
    opacity: 1;
    color: #2196f3;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: .600s; }
    .modal-content svg.close:hover {
      box-shadow: none;
      transition: .600s;
      opacity: 1 !important; }

.compose-box {
  background-color: #fff;
  border-radius: 6px; }
  .compose-box .form-control-file {
    width: 100%;
    color: #2196f3; }
    .compose-box .form-control-file::-webkit-file-upload-button, .compose-box .form-control-file::-ms-file-upload-button {
      background-color: #2196f3; }
  .compose-box .compose-content form .validation-text {
    display: none;
    color: #e7515a;
    font-weight: 600;
    text-align: left;
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: 1px; }
  .compose-box .compose-content form .mail-form p {
    font-weight: 700;
    color: #3b3f5c;
    font-size: 16px;
    margin-bottom: 0;
    align-self: center; }
  .compose-box .compose-content form .mail-form select {
    padding: 5px;
    font-weight: 700;
    color: #4361ee;
    margin-left: 10px;
    border-radius: 6px;
    border: 1px solid #d3d3d3; }
  .compose-box .compose-content form .mail-to svg, .compose-box .compose-content form .mail-cc svg, .compose-box .compose-content form .mail-subject svg {
    align-self: center;
    font-size: 19px;
    margin-right: 14px;
    color: #4361ee;
    font-weight: 600; }
  .compose-box .compose-content form #editor-container h1, .compose-box .compose-content form #editor-container p {
    color: #3b3f5c; }

#composeMailModal .modal-content .modal-footer {
  border-top: none;
  padding-top: 0; }

#composeMailModal .modal-footer .btn[data-dismiss="modal"] {
  background-color: #fff;
  color: #4361ee;
  font-weight: 700;
  border: 1px solid #e8e8e8;
  padding: 10px 25px; }
  #composeMailModal .modal-footer .btn[data-dismiss="modal"] svg {
    font-size: 11px;
    font-weight: 600;
    margin-right: 8px; }

#composeMailModal .modal-footer #btn-reply, #composeMailModal .modal-footer #btn-fwd, #composeMailModal .modal-footer #btn-send {
  background-color: #2196f3;
  color: #fff;
  font-weight: 600;
  border: 1px solid #2196f3;
  padding: 10px 25px; }

#composeMailModal .modal-footer #btn-reply.disabled, #composeMailModal .modal-footer #btn-fwd.disabled, #composeMailModal .modal-footer #btn-send.disabled {
  opacity: .53; }

#composeMailModal .modal-footer #btn-save, #composeMailModal .modal-footer #btn-reply-save, #composeMailModal .modal-footer #btn-fwd-save {
  background-color: #009688;
  color: #fff;
  font-weight: 600;
  border: 1px solid #e0e6ed;
  padding: 10px 25px; }

@keyframes fadeInUp {
  from {
    transform: translate3d(0, 40px, 0); }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1; } }

@-webkit-keyframes fadeInUp {
  from {
    transform: translate3d(0, 40px, 0); }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1; } }

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both; }

.animatedFadeInUp {
  opacity: 0; }

.fadeInUp {
  opacity: 0;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp; }

@media (min-width: 1200px) {
  .main-container:not(.sidebar-closed) .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .mail-content-excerpt {
    width: calc(100vw - 1125px); }
  .main-container:not(.sidebar-closed) .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .user-email {
    min-width: 134px;
    max-width: 170px; }
  .main-container:not(.sidebar-closed) .mailbox-inbox .mail-item div.mail-item-heading .attachments {
    width: calc(100vw - 990px); } }

@media (max-width: 991px) {
  .mail-box-container {
    overflow-x: hidden;
    overflow-y: auto; }
  .mailbox-inbox .search input {
    border-left: 1px solid #e0e6ed; }
  .tab-title {
    position: absolute;
    z-index: 4;
    left: -147px;
    width: 0;
    background: #060818;
    border-right: none; }
    .tab-title.mail-menu-show {
      left: 0;
      width: 100%;
      min-width: 111px; }
  .mailbox-inbox {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }
    .mailbox-inbox .mail-menu {
      margin: 12px 13px 8px 13px; }
    .mailbox-inbox .search {
      background-color: #fff;
      padding: 0; }
    .mailbox-inbox .action-center {
      padding: 14px 14px; }
    .mailbox-inbox .mail-item div.mail-item-heading:hover {
      background: transparent;
      border: none !important; }
    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner {
      padding-left: 14px; }
      .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .mail-content-excerpt {
        width: calc(100vw - 527px); }
      .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .user-email {
        min-width: 170px;
        max-width: 170px; }
    .mailbox-inbox .mail-item div.mail-item-heading .attachments {
      width: calc(100vw - 527px);
      padding: 0 15px; } }

@media (max-width: 767px) {
  .new-control.new-checkbox .new-control-indicator {
    margin-right: 10px; }
  .mailbox-inbox {
    display: block; }
    .mailbox-inbox .mail-item div.mail-item-heading {
      margin: 0;
      padding: 20px 10px 20px 0;
      border: none; }
      .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-head img {
        width: 35px;
        height: 35px; }
      .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body {
        display: block; }
    .mailbox-inbox .message-box {
      width: 100%;
      margin-bottom: 40px; }
    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body > div.meta-title-tag {
      padding-left: 10px; }
    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .user-email {
      padding: 0 0 0 10px; }
    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .meta-time {
      min-width: auto; }
    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .mail-content-excerpt {
      width: calc(100vw - 192px);
      padding-right: 7px; }
    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .tags {
      position: absolute;
      right: 5px;
      top: 23px;
      width: 60px; }
    .mailbox-inbox .mail-item.sentmail div.mail-item-heading .mail-item-inner .mail-content-excerpt, .mailbox-inbox .mail-item.draft div.mail-item-heading .mail-item-inner .mail-content-excerpt {
      margin-left: 0;
      width: calc(100vw - 178px); }
    .mailbox-inbox .mail-item div.mail-item-heading .attachments {
      width: calc(100vw - 192px);
      padding: 0 11px; }
    .mailbox-inbox .mail-item.sentmail div.mail-item-heading .attachments {
      margin: 0 0 0 40px; } }

@media (max-width: 575px) {
  .mailbox-inbox .message-box {
    margin-bottom: 0; }
  .mailbox-inbox .mail-content-container .user-info {
    display: block !important; }
    .mailbox-inbox .mail-content-container .user-info img {
      margin-bottom: 10px; }
  .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body > div {
    display: block; }
    .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body > div.meta-mail-time {
      display: block; }
  .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .f-body .meta-time {
    margin-bottom: 0;
    float: none; }
  .mailbox-inbox .mail-item div.mail-item-heading .mail-item-inner .mail-content-excerpt {
    margin-left: 0;
    margin-right: 0;
    width: calc(100vw - 215px); }
  .mailbox-inbox .mail-content-container .action-btns a {
    margin-right: 0; }
  .compose-box .compose-content form .mail-form select {
    margin-left: 3px;
    margin-top: 10px; } }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
  .tab-title {
    width: 100%; }
  .mailbox-inbox .mail-content-container .attachment .media .media-body {
    flex: none; } }

/*
	===============================
			@Import	Function
	===============================
*/
/*
	===============================
			@Import	Mixins
	===============================
*/
.layout-px-spacing {
  min-height: auto !important; }

.wrapper {
  position: relative;
  left: 50%;
  width: 1000px;
  height: 600px;
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0); }

.chat-system {
  display: flex;
  -webkit-box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002), 0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004), 0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005), 0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006), 0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008), 0 7px 0px rgba(0, 0, 0, 0.01);
  -moz-box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002), 0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004), 0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005), 0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006), 0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008), 0 7px 0px rgba(0, 0, 0, 0.01);
  box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002), 0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004), 0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005), 0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006), 0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008), 0 7px 0px rgba(0, 0, 0, 0.01);
  height: calc(100vh - 145px); }

body.minimal .chat-system {
  border: 1px solid #e0e6ed !important;
  box-shadow: none;
  border-radius: 5px; }

.chat-system .hamburger {
  display: none; }

.chat-system .user-list-box {
  width: 35%;
  max-width: 400px;
  border-right: 1px solid #ebedf2;
  border-bottom-left-radius: 6px;
  background: #fff;
  border-top-left-radius: 6px; }
  .chat-system .user-list-box .search {
    position: relative;
    padding: 13px 0 13px 0;
    display: flex; }
    .chat-system .user-list-box .search svg {
      content: "\f169";
      position: absolute;
      left: 11px;
      color: #bfc9d4;
      top: 25px;
      left: 30px;
      stroke-width: 1.6; }
  .chat-system .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; }
  .chat-system .user-list-box .people {
    padding: 0;
    overflow: auto;
    position: relative;
    margin: auto;
    width: 100%;
    overflow: auto;
    height: calc(100vh - 218px); }
    .chat-system .user-list-box .people .person {
      position: relative;
      width: 100%;
      padding: 20px 20px;
      cursor: pointer;
      border-bottom: 1px solid #e0e6ed; }
      .chat-system .user-list-box .people .person.border-none {
        border-bottom: none; }

.person {
  display: inline-block; }

.chat-system .user-list-box .people .person .user-info {
  display: flex; }
  .chat-system .user-list-box .people .person .user-info .f-head img {
    width: 45px;
    height: 45px;
    margin-right: 12px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #d3d3d3;
    box-shadow: 0px 0px 14px 3px rgba(126, 142, 177, 0.24); }
  .chat-system .user-list-box .people .person .user-info .f-body {
    width: 100%; }
    .chat-system .user-list-box .people .person .user-info .f-body .meta-info .user-name {
      font-size: 14px;
      color: #3b3f5c;
      font-weight: 700; }
    .chat-system .user-list-box .people .person .user-info .f-body .meta-info .user-meta-time {
      font-size: 12px;
      position: absolute;
      bottom: 8px;
      right: 11px;
      color: #888ea8;
      font-weight: 700;
      float: right; }
    .chat-system .user-list-box .people .person .user-info .f-body .preview {
      font-size: 13px;
      display: inline-block;
      overflow: hidden !important;
      width: 70%;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #888ea8;
      font-weight: 600; }

.chat-system .user-list-box .people .person:hover .user-info .f-head img {
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); }

.chat-system .user-list-box .people .person:hover .user-info .f-body .meta-info .user-name, .chat-system .user-list-box .people .person:hover .user-info .f-body .meta-info .user-meta-time {
  color: #4361ee; }

.chat-system .user-list-box .people .person.active:after, .chat-system .user-list-box .people .person:hover:after {
  display: none; }

.chat-system .chat-box {
  position: relative;
  width: 100%;
  height: 616px;
  background-image: url(../../img/bg.png);
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
  height: calc(100vh - 145px); }
  .chat-system .chat-box .chat-not-selected {
    display: flex;
    height: 100%;
    justify-content: center; }
    .chat-system .chat-box .chat-not-selected p {
      align-self: center;
      font-size: 18px;
      color: #3b3f5c;
      margin-bottom: 0;
      font-weight: 600;
      background: #bfc9d4;
      padding: 7px 20px;
      border-radius: 6px;
      -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 .chat-not-selected p svg {
        vertical-align: middle;
        color: #888ea8; }
  .chat-system .chat-box .overlay-phone-call {
    display: none;
    position: absolute;
    width: 100%;
    height: calc(100vh - 145px);
    z-index: -1;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    background-color: rgba(3, 3, 5, 0.66);
    background-attachment: fixed;
    background-size: contain;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px); }
    .chat-system .chat-box .overlay-phone-call.phone-call-show {
      opacity: 1;
      z-index: 4; }
    .chat-system .chat-box .overlay-phone-call > div {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: space-between; }
      .chat-system .chat-box .overlay-phone-call > div .calling-user-info {
        padding: 20px 16px; }
        .chat-system .chat-box .overlay-phone-call > div .calling-user-info svg {
          font-size: 28px;
          margin-right: 12px;
          color: #fff;
          vertical-align: middle;
          cursor: pointer; }
        .chat-system .chat-box .overlay-phone-call > div .calling-user-info .user-name {
          font-size: 20px;
          color: #fff;
          vertical-align: middle;
          margin-right: 8px; }
        .chat-system .chat-box .overlay-phone-call > div .calling-user-info .call-status {
          vertical-align: sub;
          color: #fff;
          font-size: 10px;
          font-weight: 600; }
      .chat-system .chat-box .overlay-phone-call > div .calling-user-img {
        text-align: center; }
        .chat-system .chat-box .overlay-phone-call > div .calling-user-img img {
          border-radius: 50%;
          border: 4px solid #ebedf2; }
        .chat-system .chat-box .overlay-phone-call > div .calling-user-img .timer {
          visibility: hidden;
          font-size: 16px;
          font-weight: 600;
          margin-top: 7px;
          color: #fff; }
          .chat-system .chat-box .overlay-phone-call > div .calling-user-img .timer .minutes, .chat-system .chat-box .overlay-phone-call > div .calling-user-img .timer .seconds {
            color: #ffffff; }
      .chat-system .chat-box .overlay-phone-call > div .calling-options {
        text-align: center; }
        .chat-system .chat-box .overlay-phone-call > div .calling-options svg {
          font-size: 25px;
          border-radius: 50%;
          padding: 11px;
          background: rgba(21, 21, 22, 0.28);
          margin-bottom: 23px;
          color: #fff;
          cursor: pointer;
          width: 48px;
          height: 46px;
          -webkit-transition: all 0.35s ease;
          transition: all 0.35s ease;
          box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.67); }
          .chat-system .chat-box .overlay-phone-call > div .calling-options svg:hover {
            -webkit-transform: translateY(-5px) scale(1.02);
            transform: translateY(-5px) scale(1.02); }
          .chat-system .chat-box .overlay-phone-call > div .calling-options svg:not(:last-child) {
            margin-right: 7px; }
          .chat-system .chat-box .overlay-phone-call > div .calling-options svg.switch-to-microphone {
            position: relative; }
            .chat-system .chat-box .overlay-phone-call > div .calling-options svg.switch-to-microphone.micro-off:after {
              content: '';
              height: 35px;
              width: 2px;
              background: #fff;
              position: absolute;
              left: 20px;
              top: 6px; }
          .chat-system .chat-box .overlay-phone-call > div .calling-options svg.cancel-call {
            background-color: #e7515a; }
  .chat-system .chat-box .overlay-video-call {
    display: none;
    position: absolute;
    width: 100%;
    height: calc(100vh - 145px);
    z-index: -1;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    background-color: rgba(3, 3, 5, 0.66);
    background-attachment: fixed;
    background-size: contain;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px); }
    .chat-system .chat-box .overlay-video-call.video-call-show {
      opacity: 1;
      z-index: 4; }
    .chat-system .chat-box .overlay-video-call.onConnect {
      background-image: url(../../../assets/img/640x426.jpg);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: cover;
      background-attachment: unset; }
    .chat-system .chat-box .overlay-video-call .video-caller {
      position: absolute;
      height: 112px;
      width: 173px;
      bottom: 83px;
      right: 0; }
    .chat-system .chat-box .overlay-video-call > div {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: space-between; }
      .chat-system .chat-box .overlay-video-call > div .calling-user-info {
        padding: 20px 16px; }
        .chat-system .chat-box .overlay-video-call > div .calling-user-info svg {
          font-size: 28px;
          margin-right: 12px;
          color: #fff;
          cursor: pointer; }
        .chat-system .chat-box .overlay-video-call > div .calling-user-info .user-name {
          font-size: 20px;
          color: #fff;
          margin-right: 8px; }
        .chat-system .chat-box .overlay-video-call > div .calling-user-info .call-status {
          color: #fff;
          font-size: 10px;
          font-weight: 600;
          margin-top: 10px; }
        .chat-system .chat-box .overlay-video-call > div .calling-user-info .timer {
          visibility: hidden;
          font-size: 16px;
          font-weight: 600;
          color: #fff; }
          .chat-system .chat-box .overlay-video-call > div .calling-user-info .timer .minutes, .chat-system .chat-box .overlay-video-call > div .calling-user-info .timer .seconds {
            margin-bottom: 0;
            color: #ffffff; }
      .chat-system .chat-box .overlay-video-call > div .calling-user-img {
        text-align: center; }
        .chat-system .chat-box .overlay-video-call > div .calling-user-img img {
          border-radius: 50%;
          border: 4px solid #ebedf2; }
      .chat-system .chat-box .overlay-video-call > div .calling-options {
        text-align: center; }
        .chat-system .chat-box .overlay-video-call > div .calling-options svg {
          font-size: 25px;
          border-radius: 50%;
          padding: 11px;
          background: rgba(21, 21, 22, 0.56);
          margin-bottom: 23px;
          color: #fff;
          cursor: pointer;
          width: 48px;
          height: 46px;
          -webkit-transition: all 0.35s ease;
          transition: all 0.35s ease;
          box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.67); }
          .chat-system .chat-box .overlay-video-call > div .calling-options svg:hover {
            -webkit-transform: translateY(-5px) scale(1.02);
            transform: translateY(-5px) scale(1.02); }
          .chat-system .chat-box .overlay-video-call > div .calling-options svg:not(:last-child) {
            margin-right: 7px; }
          .chat-system .chat-box .overlay-video-call > div .calling-options svg.switch-to-microphone {
            position: relative; }
            .chat-system .chat-box .overlay-video-call > div .calling-options svg.switch-to-microphone.micro-off:after {
              content: '';
              height: 35px;
              width: 2px;
              background: #fff;
              position: absolute;
              transform: rotate(46deg);
              left: 20px;
              top: 6px; }
          .chat-system .chat-box .overlay-video-call > div .calling-options svg.cancel-call {
            background-color: #e7515a; }
  .chat-system .chat-box .chat-box-inner {
    height: auto; }
    .chat-system .chat-box .chat-box-inner .chat-meta-user {
      display: none; }
      .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active {
        display: flex;
        width: 100%;
        justify-content: space-between;
        background-color: #fafafa;
        border-top-right-radius: 6px; }
      .chat-system .chat-box .chat-box-inner .chat-meta-user .current-chat-user-name {
        padding: 14px 15px 15px 15px; }
        .chat-system .chat-box .chat-box-inner .chat-meta-user .current-chat-user-name span {
          font-size: 15px;
          color: #888ea8; }
          .chat-system .chat-box .chat-box-inner .chat-meta-user .current-chat-user-name span img {
            width: 45px;
            height: 45px;
            border-radius: 7px;
            border-radius: 10px;
            margin-top: 0px;
            -webkit-transition: all 0.35s ease;
            transition: all 0.35s ease;
            margin-right: 10px; }
          .chat-system .chat-box .chat-box-inner .chat-meta-user .current-chat-user-name span .name {
            color: #0e1726;
            font-weight: 600; }
      .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn svg {
        cursor: pointer;
        color: #888ea8;
        margin-right: 6px;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        fill: rgba(0, 23, 55, 0.08);
        stroke-width: 1.6; }
        .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn svg:hover {
          color: #4361ee;
          fill: rgba(27, 85, 226, 0.239216); }
        .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn svg:not(:last-child) {
          margin-right: 9px; }
      .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn .dropdown-menu {
        box-shadow: rgba(113, 106, 202, 0.2) 0px 0px 15px 1px;
        /* top: 15px !important; */
        padding: 10px;
        border-width: initial;
        border-style: none;
        border-color: initial;
        border-image: initial;
        transform: translate3d(-134px, 0, 0px); }
        .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn .dropdown-menu.show {
          top: 35px !important; }
        .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn .dropdown-menu a {
          font-size: 12px;
          font-weight: 700;
          color: #888ea8;
          padding: 11px 8px; }
          .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn .dropdown-menu a svg {
            color: #888ea8;
            margin-right: 6px;
            vertical-align: middle;
            width: 20px;
            height: 20px;
            fill: rgba(0, 23, 55, 0.08); }
          .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn .dropdown-menu a.dropdown-item.active, .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn .dropdown-menu a.dropdown-item:active {
            background-color: transparent; }
          .chat-system .chat-box .chat-box-inner .chat-meta-user.chat-active .chat-action-btn .dropdown-menu a:hover svg {
            color: #2196f3;
            fill: rgba(27, 85, 226, 0.239216); }
    .chat-system .chat-box .chat-box-inner .chat-conversation-box {
      position: relative;
      margin: auto;
      width: 100%;
      height: calc(100% - 90px);
      overflow: auto; }
      .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat {
        position: relative;
        display: none;
        overflow: hidden;
        padding: 30px 40px 0;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        -webkit-flex-direction: column;
        flex-direction: column; }
        .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat {
          display: block;
          display: -webkit-flex;
          display: flex; }
          .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble {
            -moz-transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
            -o-transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
            -webkit-transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1);
            transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1); }
            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(1) {
              -moz-animation-duration: 0.15s;
              -webkit-animation-duration: 0.15s;
              animation-duration: 0.15s; }
            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(2) {
              -moz-animation-duration: 0.3s;
              -webkit-animation-duration: 0.3s;
              animation-duration: 0.3s; }
            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(3) {
              -moz-animation-duration: 0.45s;
              -webkit-animation-duration: 0.45s;
              animation-duration: 0.45s; }
            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(4) {
              -moz-animation-duration: 0.6s;
              -webkit-animation-duration: 0.6s;
              animation-duration: 0.6s; }
            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(5) {
              -moz-animation-duration: 0.75s;
              -webkit-animation-duration: 0.75s;
              animation-duration: 0.75s; }
            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(6) {
              -moz-animation-duration: 0.9s;
              -webkit-animation-duration: 0.9s;
              animation-duration: 0.9s; }
            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(7) {
              -moz-animation-duration: 1.05s;
              -webkit-animation-duration: 1.05s;
              animation-duration: 1.05s; }
            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(8) {
              -moz-animation-duration: 1.2s;
              -webkit-animation-duration: 1.2s;
              animation-duration: 1.2s; }
            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(9) {
              -moz-animation-duration: 1.35s;
              -webkit-animation-duration: 1.35s;
              animation-duration: 1.35s; }
            .chat-system .chat-box .chat-box-inner .chat-conversation-box .chat.active-chat .bubble:nth-of-type(10) {
              -moz-animation-duration: 1.5s;
              -webkit-animation-duration: 1.5s;
              animation-duration: 1.5s; }
  .chat-system .chat-box .chat-footer {
    display: none; }
    .chat-system .chat-box .chat-footer.chat-active {
      display: block;
      padding: 6px 10px;
      background: #fafafa;
      border-bottom-right-radius: 6px; }
  .chat-system .chat-box .chat-form {
    position: relative; }
  .chat-system .chat-box .chat-input svg {
    position: absolute;
    color: #888ea8;
    left: 11px;
    top: 12px;
    fill: rgba(0, 23, 55, 0.08);
    stroke-width: 1.2; }
  .chat-system .chat-box .chat-input input {
    font-size: 16px;
    width: 100%;
    color: #3b3f5c;
    border: 0;
    outline: none;
    padding: 12px 16px 12px 43px;
    border: 1px dashed #888ea8;
    background: #fafafa; }
    .chat-system .chat-box .chat-input input::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: #888ea8; }
    .chat-system .chat-box .chat-input input::-moz-placeholder {
      /* Firefox 19+ */
      color: #888ea8; }
    .chat-system .chat-box .chat-input input:-ms-input-placeholder {
      /* IE 10+ */
      color: #888ea8; }
    .chat-system .chat-box .chat-input input:-moz-placeholder {
      /* Firefox 18- */
      color: #888ea8; }
  .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; }
    .chat-system .chat-box .bubble: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); }
    .chat-system .chat-box .bubble.you {
      float: left;
      color: #2196f3;
      background-color: #fdfdfd;
      -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.you:before {
        left: -3px;
        background-color: #fff; }
    .chat-system .chat-box .bubble.me {
      float: right;
      color: #fff;
      background-color: #009688;
      -webkit-align-self: flex-end;
      align-self: flex-end;
      -moz-animation-name: slideFromRight;
      -webkit-animation-name: slideFromRight;
      animation-name: slideFromRight;
      -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.me:before {
        right: -3px;
        background-color: #009688; }
  .chat-system .chat-box .conversation-start {
    position: relative;
    width: 100%;
    margin-bottom: 27px;
    text-align: center; }
    .chat-system .chat-box .conversation-start span {
      font-size: 12px;
      color: #3b3f5c;
      margin-bottom: 0;
      font-weight: 700;
      background: #fff;
      padding: 7px 20px;
      border-radius: 6px;
      -webkit-box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
      box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12); }

@keyframes slideFromLeft {
  0% {
    margin-left: -200px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; }
  100% {
    margin-left: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1; } }

@-webkit-keyframes slideFromLeft {
  0% {
    margin-left: -200px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; }
  100% {
    margin-left: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1; } }

@keyframes slideFromRight {
  0% {
    margin-right: -200px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; }
  100% {
    margin-right: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1; } }

@-webkit-keyframes slideFromRight {
  0% {
    margin-right: -200px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; }
  100% {
    margin-right: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1; } }

.credits {
  color: white;
  font-size: 11px;
  position: absolute;
  bottom: 10px;
  right: 15px; }
  .credits a {
    color: white;
    text-decoration: none; }

@media (max-width: 1199px) {
  .chat-system .user-list-box {
    width: 40%; }
  .chat-system .chat-box {
    width: 66%; }
    .chat-system .chat-box .overlay-video-call .video-caller {
      height: 68px;
      width: 68px; } }

@media (max-width: 991px) {
  .chat-system .chat-box {
    border-radius: 6px; }
    .chat-system .chat-box .overlay-video-call .video-caller {
      height: 107px;
      width: 147px; } }

@media (max-width: 767px) {
  .chat-system .hamburger {
    padding: 7px 10px 7px 10px;
    font-size: 20px;
    border-radius: 0;
    color: #fff;
    align-self: center;
    position: fixed;
    top: 218px;
    right: 9px;
    display: block;
    z-index: 78;
    background-color: #515365;
    border-radius: 50%; }
  .chat-system .user-list-box {
    position: absolute;
    z-index: 40;
    left: -341px;
    width: 255px; }
    .chat-system .user-list-box.user-list-box-show {
      position: absolute;
      z-index: 34;
      left: 15px;
      border-radius: 0; }
  .chat-system .chat-box {
    width: 100%; }
    .chat-system .chat-box .overlay-video-call .video-caller {
      height: 75px;
      width: 110px; } }

@media (max-width: 575px) {
  .chat-system .chat-box .overlay-video-call .video-caller {
    bottom: 83px; }
  .chat-system .chat-box .conversation-start span:before, .chat-system .chat-box .conversation-start span:after {
    background-color: transparent; } }

@-moz-document url-prefix() {
  .chat-system .chat-box .overlay-phone-call, .chat-system .chat-box .overlay-video-call {
    background-color: #030305; } }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .chat-system .chat-box .overlay-phone-call {
    background-image: none; }
  .chat-system .chat-box .overlay-video-call {
    background-image: none; }
    .chat-system .chat-box .overlay-video-call.onConnect {
      background-attachment: local; } }

/*
	===============================
			@Import	Function
	===============================
*/
/*
	===============================
			@Import	Mixins
	===============================
*/
/*----------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: #e3e4eb;
    height: 36px;
    width: 19px;
    top: 4px; }

.filtered-list-search form input {
  padding: 6px 33px 6px 15px;
  color: #d3d3d3;
  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; }

.searchable-container .switch {
  text-align: right; }
  .searchable-container .switch .view-grid, .searchable-container .switch .view-list {
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    color: #515365;
    box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
    width: 43px;
    height: 41px;
    fill: rgba(0, 23, 55, 0.08); }

.searchable-container #btn-add-contact {
  padding: 9px;
  background: #ffffff;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 35px;
  box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
  width: 43px;
  height: 41px;
  color: #4361ee;
  fill: rgba(27, 85, 226, 0.239216); }
  .searchable-container #btn-add-contact:hover {
    color: #515365;
    fill: rgba(0, 23, 55, 0.08); }

.modal-backdrop {
  background-color: #ebedf2; }

.searchable-container .modal-content {
  border: none;
  box-shadow: 0px 0px 15px 1px rgba(113, 106, 202, 0.2); }
  .searchable-container .modal-content svg.close {
    position: absolute;
    right: -7px;
    top: -8px;
    font-size: 12px;
    font-weight: 600;
    padding: 7px;
    background: #fff;
    border-radius: 5px;
    opacity: 1;
    color: #2196f3;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: .600s; }

.searchable-container .add-contact-box .add-contact-content .contact-name .validation-text, .searchable-container .add-contact-box .add-contact-content .contact-email .validation-text, .searchable-container .add-contact-box .add-contact-content .contact-occupation .validation-text, .searchable-container .add-contact-box .add-contact-content .contact-phone .validation-text, .searchable-container .add-contact-box .add-contact-content .contact-location .validation-text {
  display: none;
  color: #e7515a;
  font-weight: 600;
  text-align: left;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 1px; }

.searchable-container .add-contact-box .add-contact-content .contact-name svg, .searchable-container .add-contact-box .add-contact-content .contact-email svg, .searchable-container .add-contact-box .add-contact-content .contact-occupation svg, .searchable-container .add-contact-box .add-contact-content .contact-phone svg, .searchable-container .add-contact-box .add-contact-content .contact-location svg {
  align-self: center;
  font-size: 19px;
  margin-right: 14px;
  color: #2196f3;
  font-weight: 600; }

.searchable-container .add-contact-box .add-contact-content .contact-name #c-name::-webkit-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-email #c-email::-webkit-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-occupation #c-occupation::-webkit-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-phone #c-phone::-webkit-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-location #c-location::-webkit-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-name #c-name::-ms-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-email #c-email::-ms-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-occupation #c-occupation::-ms-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-phone #c-phone::-ms-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-location #c-location::-ms-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-name #c-name::-moz-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-email #c-email::-moz-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-occupation #c-occupation::-moz-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-phone #c-phone::-moz-input-placeholder, .searchable-container .add-contact-box .add-contact-content .contact-location #c-location::-moz-input-placeholder {
  color: #e3e4eb;
  font-weight: 600; }

.searchable-container .add-contact-box .add-contact-content .contact-name, .searchable-container .add-contact-box .add-contact-content .contact-email, .searchable-container .add-contact-box .add-contact-content .contact-occupation, .searchable-container .add-contact-box .add-contact-content .contact-phone {
  padding-top: 20px; }

.searchable-container .add-contact-box .add-contact-content .contact-location {
  padding-top: 20px; }
  .searchable-container .add-contact-box .add-contact-content .contact-location #c-location {
    resize: none; }

.searchable-container .modal-footer {
  border: none;
  padding: 0 15px 14px 15px; }
  .searchable-container .modal-footer .btn[data-dismiss="modal"] {
    background-color: #fff;
    color: #4361ee;
    font-weight: 700;
    border: 1px solid #e8e8e8;
    padding: 10px 25px; }
    .searchable-container .modal-footer .btn[data-dismiss="modal"] svg {
      font-size: 11px;
      font-weight: 600;
      margin-right: 8px; }
  .searchable-container .modal-footer .btn#btn-add {
    background-color: #2196f3;
    color: #fff;
    font-weight: 600;
    border: 1px solid #2196f3;
    padding: 10px 25px; }
  .searchable-container .modal-footer .btn#btn-edit {
    background-color: #009688;
    color: #fff;
    font-weight: 600;
    border: 1px solid #e0e6ed;
    padding: 10px 25px; }

.searchable-container .switch .view-grid:hover, .searchable-container .switch .view-list:hover, .searchable-container .switch .active-view {
  color: #4361ee;
  fill: rgba(27, 85, 226, 0.239216); }

.searchable-container .searchable-items {
  position: relative; }
  .searchable-container .searchable-items.list .items.items-header-section h4 {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
    margin-left: 39px; }
  .searchable-container .searchable-items.list .items.items-header-section .n-chk {
    display: inline-block; }
  .searchable-container .searchable-items.list .items .item-content {
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center;
    padding: .75rem .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); }
    .searchable-container .searchable-items.list .items .item-content:hover .user-meta-info .user-name, .searchable-container .searchable-items.list .items .item-content:hover .user-email p, .searchable-container .searchable-items.list .items .item-content:hover .user-location p, .searchable-container .searchable-items.list .items .item-content:hover .user-phone p {
      color: #2196f3; }
  .searchable-container .searchable-items.list .items .user-profile {
    display: flex; }
    .searchable-container .searchable-items.list .items .user-profile img {
      width: 43px;
      height: 43px;
      border-radius: 5px;
      margin-right: 11px;
      margin-left: 18px; }
  .searchable-container .searchable-items.list .items .user-meta-info .user-name {
    margin-bottom: 0;
    color: #3b3f5c;
    font-weight: 600;
    font-size: 15px; }
  .searchable-container .searchable-items.list .items .user-meta-info .user-work {
    margin-bottom: 0;
    color: #888ea8;
    font-weight: 500;
    font-size: 13px; }
  .searchable-container .searchable-items.list .items .user-email p {
    margin-bottom: 0;
    color: #888ea8;
    font-weight: 600; }
  .searchable-container .searchable-items.list .items .user-email .info-title {
    display: none; }
  .searchable-container .searchable-items.list .items .user-location p {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0; }
  .searchable-container .searchable-items.list .items .user-location .info-title {
    display: none; }
  .searchable-container .searchable-items.list .items .user-phone p {
    margin-bottom: 0;
    color: #888ea8;
    font-weight: 600;
    font-size: 13px; }
  .searchable-container .searchable-items.list .items .user-phone .info-title {
    display: none; }
  .searchable-container .searchable-items.list .items .action-btn {
    font-weight: 600;
    color: #e3e4eb; }
    .searchable-container .searchable-items.list .items .action-btn .delete-multiple {
      margin-right: 5px;
      cursor: pointer;
      color: #515365;
      width: 20px;
      fill: rgba(27, 85, 226, 0.239216); }
      .searchable-container .searchable-items.list .items .action-btn .delete-multiple:hover {
        color: #4361ee; }
    .searchable-container .searchable-items.list .items .action-btn .edit, .searchable-container .searchable-items.list .items .action-btn .delete {
      margin-right: 5px;
      cursor: pointer;
      color: #515365;
      width: 20px;
      fill: rgba(27, 85, 226, 0.239216); }
    .searchable-container .searchable-items.list .items .action-btn .edit:hover, .searchable-container .searchable-items.list .items .action-btn .delete:hover {
      color: #4361ee; }

/* .searchable-container .searchable-items.list {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
} */
.searchable-items.grid {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px; }

.searchable-container .searchable-items.grid .items {
  margin-bottom: 30px;
  border-radius: 6px;
  width: 100%;
  color: #0e1726;
  transition: all 0.35s ease;
  width: 33%;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px; }
  .searchable-container .searchable-items.grid .items .item-content {
    background-color: #fff;
    padding: 13px 18px;
    -webkit-box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
    box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
    border-radius: 6px; }
  .searchable-container .searchable-items.grid .items.items-header-section {
    display: none; }
  .searchable-container .searchable-items.grid .items .user-profile {
    text-align: center;
    margin-top: 20px; }
    .searchable-container .searchable-items.grid .items .user-profile .n-chk {
      display: none; }
    .searchable-container .searchable-items.grid .items .user-profile img {
      border-radius: 12px; }
  .searchable-container .searchable-items.grid .items .user-meta-info {
    margin-top: 10px; }
    .searchable-container .searchable-items.grid .items .user-meta-info .user-name {
      font-size: 21px;
      font-weight: 600;
      margin-bottom: 0;
      color: #2196f3; }
    .searchable-container .searchable-items.grid .items .user-meta-info .user-work {
      font-weight: 700;
      font-size: 13px; }
  .searchable-container .searchable-items.grid .items .user-email {
    display: flex;
    justify-content: space-between;
    margin-top: 24px; }
    .searchable-container .searchable-items.grid .items .user-email .info-title {
      font-size: 14px;
      font-weight: 600;
      color: #3b3f5c;
      margin-bottom: 11px; }
    .searchable-container .searchable-items.grid .items .user-email p {
      color: #888ea8;
      font-size: 13px;
      margin-bottom: 11px; }
  .searchable-container .searchable-items.grid .items .user-location {
    display: flex;
    justify-content: space-between; }
    .searchable-container .searchable-items.grid .items .user-location .info-title {
      font-size: 14px;
      font-weight: 600;
      color: #3b3f5c;
      margin-bottom: 11px;
      margin-right: 10px; }
    .searchable-container .searchable-items.grid .items .user-location p {
      color: #888ea8;
      font-size: 13px;
      margin-bottom: 11px; }
  .searchable-container .searchable-items.grid .items .user-phone {
    display: flex;
    justify-content: space-between; }
    .searchable-container .searchable-items.grid .items .user-phone .info-title {
      font-size: 14px;
      font-weight: 600;
      color: #3b3f5c;
      margin-bottom: 11px; }
    .searchable-container .searchable-items.grid .items .user-phone p {
      color: #888ea8;
      font-size: 13px;
      margin-bottom: 11px;
      margin-right: 10px; }
  .searchable-container .searchable-items.grid .items .action-btn {
    font-weight: 600;
    color: #e3e4eb;
    text-align: center;
    margin: 20px 0; }
    .searchable-container .searchable-items.grid .items .action-btn .edit, .searchable-container .searchable-items.grid .items .action-btn .delete {
      margin-right: 5px;
      cursor: pointer;
      color: #515365;
      width: 20px;
      fill: rgba(27, 85, 226, 0.239216); }
    .searchable-container .searchable-items.grid .items .action-btn .edit:hover, .searchable-container .searchable-items.grid .items .action-btn .delete:hover {
      color: #4361ee; }

@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: 1659px) {
  .searchable-container .searchable-items.grid .items {
    width: 0 0 33.3%;
    -ms-flex: 0 0 33.3%;
    flex: 0 0 33.3%;
    max-width: 34%; }
  /* .searchable-container .searchable-items.grid .items .user-email p {
    word-break: break-all;
  } */ }

@media (max-width: 1399px) {
  .searchable-container .searchable-items.grid .items {
    width: 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; } }

@media (max-width: 1199px) {
  .searchable-container .searchable-items.grid .items {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%; } }

@media (max-width: 767px) {
  .searchable-container .searchable-items.list .items {
    min-width: 767px; }
  .searchable-container .searchable-items.grid .items {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; } }

@media (max-width: 575px) {
  .searchable-container .searchable-items.grid .items {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }
  .filtered-list-search form > div {
    width: 100%; } }

/*
	===============================
			@Import	Function
	===============================
*/
/*
	===============================
			@Import	Mixins
	===============================
*/
/*
    Infobox 1
*/
.infobox-1 {
  border: 1px solid #e0e6ed;
  width: 50%;
  padding: 25px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 2px 10px 1px rgba(31, 45, 61, 0.1);
  box-shadow: 0px 2px 10px 1px rgba(31, 45, 61, 0.1);
  margin-right: auto;
  margin-left: auto; }
  .infobox-1 .info-icon svg {
    width: 50px;
    height: 50px;
    stroke-width: 1px;
    margin-bottom: 20px;
    color: #4361ee; }
  .infobox-1 .info-heading {
    font-weight: 600;
    font-size: 19px;
    margin-bottom: 14px;
    letter-spacing: 2px; }
  .infobox-1 .info-text {
    font-size: 15px;
    color: #888ea8;
    margin-bottom: 15px; }
  .infobox-1 .info-link {
    color: #4361ee;
    font-weight: 600; }
    .infobox-1 .info-link svg {
      width: 15px;
      height: 15px; }

/*
    Infobox 2
*/
.infobox-2 {
  border: 1px solid #e0e6ed;
  width: 50%;
  padding: 25px;
  border-radius: 6px;
  background: #3b3f5c;
  -webkit-box-shadow: 0px 2px 10px 1px rgba(31, 45, 61, 0.1);
  box-shadow: 0px 2px 10px 1px rgba(31, 45, 61, 0.1);
  margin-right: auto;
  margin-left: auto; }
  .infobox-2 .info-icon {
    border-radius: 50%;
    background: #888ea8;
    display: inline-block;
    padding: 15px;
    margin-bottom: 20px; }
    .infobox-2 .info-icon svg {
      width: 50px;
      height: 50px;
      stroke-width: 1px;
      color: #d3d3d3; }
  .infobox-2 .info-heading {
    font-weight: 600;
    font-size: 19px;
    margin-bottom: 14px;
    letter-spacing: 2px;
    color: #fff; }
  .infobox-2 .info-text {
    font-size: 15px;
    color: #e0e6ed;
    margin-bottom: 15px; }
  .infobox-2 .info-link {
    color: #2196f3;
    font-weight: 600; }
    .infobox-2 .info-link svg {
      width: 15px;
      height: 15px; }

/*
    Infobox 3
*/
.infobox-3 {
  position: relative;
  border: 1px solid #e0e6ed;
  width: 50%;
  margin-top: 30px;
  padding: 50px 25px 25px 25px;
  border-radius: 6px;
  -webkit-box-shadow: 0px 2px 10px 1px rgba(31, 45, 61, 0.1);
  box-shadow: 0px 2px 10px 1px rgba(31, 45, 61, 0.1);
  margin-right: auto;
  margin-left: auto; }
  .infobox-3 .info-icon {
    position: absolute;
    margin-bottom: 20px;
    background: #4361ee;
    display: inline-block;
    top: -31px;
    padding: 6px;
    border-radius: 6px; }
    .infobox-3 .info-icon svg {
      width: 50px;
      height: 50px;
      stroke-width: 1px;
      color: #fff; }
  .infobox-3 .info-heading {
    font-weight: 600;
    font-size: 19px;
    margin-bottom: 14px;
    letter-spacing: 2px; }
  .infobox-3 .info-text {
    font-size: 15px;
    color: #888ea8;
    margin-bottom: 15px; }
  .infobox-3 .info-link {
    color: #4361ee;
    font-weight: 600; }
    .infobox-3 .info-link svg {
      width: 15px;
      height: 15px; }

@media (max-width: 575px) {
  .infobox-1, .infobox-2, .infobox-3 {
    width: auto; } }

/*
	===============================
			@Import	Function
	===============================
*/
/*
	===============================
			@Import	Mixins
	===============================
*/
.breadcrumb {
  background-color: transparent;
  margin-bottom: 0; }

/*
    Breadcrumb 1
*/
.breadcrumb-one {
  display: inline-block; }
  .breadcrumb-one .breadcrumb {
    padding: 0;
    vertical-align: text-bottom; }
  .breadcrumb-one .breadcrumb-item {
    align-self: center; }
    .breadcrumb-one .breadcrumb-item a {
      color: #888ea8;
      vertical-align: text-bottom; }
      .breadcrumb-one .breadcrumb-item a svg {
        width: 18px;
        height: 18px;
        vertical-align: sub;
        fill: #e0e6ed; }
    .breadcrumb-one .breadcrumb-item.active a {
      color: #515365; }
    .breadcrumb-one .breadcrumb-item span {
      vertical-align: text-bottom; }
    .breadcrumb-one .breadcrumb-item.active {
      color: #3b3f5c;
      font-weight: 600; }
    .breadcrumb-one .breadcrumb-item + .breadcrumb-item {
      padding: 0px; }
      .breadcrumb-one .breadcrumb-item + .breadcrumb-item::before {
        color: #888ea8;
        padding: 0 6px 0 6px; }

/*
    Breadcrumb 2
*/
.breadcrumb-two .breadcrumb {
  list-style: none;
  overflow: hidden;
  padding: 0; }
  .breadcrumb-two .breadcrumb li {
    float: left; }

.breadcrumb-two .breadcrumb-item + .breadcrumb-item::before {
  color: #fff; }

.breadcrumb-two .breadcrumb li a {
  color: #4361ee;
  text-decoration: none;
  padding: 6px 0 6px 40px;
  background: #ebedf2;
  position: relative;
  display: block;
  float: left; }
  .breadcrumb-two .breadcrumb li a:after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    /* Go big on the size, and let overflow hide */
    border-bottom: 50px solid transparent;
    border-left: 30px solid #ebedf2;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 100%;
    z-index: 2; }
  .breadcrumb-two .breadcrumb li a:before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    /* Go big on the size, and let overflow hide */
    border-bottom: 50px solid transparent;
    border-left: 30px solid #ebedf2;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    margin-left: 1px;
    left: 100%;
    z-index: 1; }

.breadcrumb-two .breadcrumb li:last-child a:before {
  margin-left: -6px; }

.breadcrumb-two .breadcrumb li:first-child a {
  padding-left: 10px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px; }

.breadcrumb-two .breadcrumb li.active a {
  background: #4361ee;
  color: #fff; }
  .breadcrumb-two .breadcrumb li.active a:after {
    border-left-color: #4361ee; }

.breadcrumb-two .breadcrumb li:last-child a {
  pointer-events: none;
  cursor: default;
  padding-left: 20px;
  padding-right: 20px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px; }
  .breadcrumb-two .breadcrumb li:last-child a:after {
    border: none; }

/*
    Breadcrumb 3
*/
.breadcrumb-three {
  padding: 0;
  background-color: transparent; }
  .breadcrumb-three .breadcrumb {
    padding: 0; }
  .breadcrumb-three .breadcrumb-item {
    color: #888ea8;
    padding: 9px 9px;
    background: #f1f2f3;
    border-bottom-right-radius: 13px;
    border-top-right-radius: 13px; }
    .breadcrumb-three .breadcrumb-item.active {
      color: #4361ee;
      font-weight: 600; }
    .breadcrumb-three .breadcrumb-item + .breadcrumb-item::before {
      color: #515365;
      font-weight: 700;
      font-size: 13px;
      content: '';
      padding: 0px 6px;
      vertical-align: sub; }

/*
    Breadcrumb 4
*/
.breadcrumb-four .breadcrumb {
  display: inline-flex;
  padding: 0;
  background-color: transparent;
  margin-bottom: 0; }
  .breadcrumb-four .breadcrumb li {
    position: relative;
    font-size: 14px;
    background: #fff;
    margin-right: 20px;
    margin-bottom: 6px;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid #e0e6ed;
    -webkit-box-shadow: 2px 5px 17px 0 rgba(31, 45, 61, 0.1);
    box-shadow: 0px 1px 8px 0px rgba(31, 45, 61, 0.1); }
    .breadcrumb-four .breadcrumb li:last-child {
      margin-right: 0; }
    .breadcrumb-four .breadcrumb li:not(:first-child):before {
      content: '';
      position: absolute;
      border-radius: 50%;
      height: 4px;
      width: 4px;
      background: #4361ee;
      left: -13px;
      top: 50%; }
    .breadcrumb-four .breadcrumb li a {
      color: #555;
      vertical-align: sub; }
      .breadcrumb-four .breadcrumb li a:hover {
        text-decoration: none;
        color: #4d7496; }
    .breadcrumb-four .breadcrumb li:not(:first-child) svg {
      margin-right: 5px; }
    .breadcrumb-four .breadcrumb li svg {
      color: #6f6f6f;
      vertical-align: text-bottom;
      width: 20px; }
    .breadcrumb-four .breadcrumb li.active a {
      color: #4361ee !important;
      font-weight: 600; }
    .breadcrumb-four .breadcrumb li.active svg {
      color: #4361ee; }
    .breadcrumb-four .breadcrumb li span {
      vertical-align: text-bottom; }

/*
    Breadcrumb 5
*/
.breadcrumb-five .breadcrumb {
  padding: 0;
  background-color: transparent;
  margin-bottom: 0; }
  .breadcrumb-five .breadcrumb li {
    position: relative;
    font-size: 14px;
    margin-right: 20px;
    padding: 0 7px; }
    .breadcrumb-five .breadcrumb li:last-child {
      margin-right: 0; }
    .breadcrumb-five .breadcrumb li:not(:first-child):before {
      content: '';
      position: absolute;
      border-radius: 50%;
      height: 4px;
      width: 4px;
      background: #4361ee;
      left: -13px;
      top: 50%; }
    .breadcrumb-five .breadcrumb li a {
      color: #555;
      vertical-align: sub; }
      .breadcrumb-five .breadcrumb li a:hover {
        text-decoration: none;
        color: #4d7496; }
    .breadcrumb-five .breadcrumb li svg {
      color: #6f6f6f;
      vertical-align: bottom;
      width: 20px; }
    .breadcrumb-five .breadcrumb li.active a {
      color: #4361ee !important;
      font-weight: 600; }

@media (max-width: 575px) {
  .breadcrumb-two .breadcrumb li {
    padding: 0; }
    .breadcrumb-two .breadcrumb li a {
      padding: 6px 10px 6px 10px;
      margin-bottom: 5px; }
      .breadcrumb-two .breadcrumb li a:after {
        display: none; }
  .breadcrumb-two .breadcrumb-item + .breadcrumb-item::before, .breadcrumb-two .breadcrumb li a:before {
    display: none; } }

/*
	===============================
			@Import	Function
	===============================
*/
/*
	===============================
			@Import	Mixins
	===============================
*/
/*
==================
    Switches
==================
*/
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 18px; }
  .switch input {
    display: none; }
  .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ebedf2;
    -webkit-transition: .4s;
    transition: .4s; }
    .switch .slider:before {
      position: absolute;
      content: "";
      background-color: white;
      -webkit-transition: .4s;
      -ms-transition: .4s;
      transition: .4s;
      height: 14px;
      width: 14px;
      left: 2px;
      bottom: 2px;
      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
  .switch input:checked + .slider:before {
    -webkit-transform: translateX(17px);
    -ms-transform: translateX(17px);
    transform: translateX(17px); }
  .switch .slider.round {
    border-radius: 34px; }
    .switch .slider.round:before {
      border-radius: 50%; }
  .switch.s-default .slider:before {
    background-color: #d3d3d3; }
  .switch.s-primary .slider:before {
    background-color: #4361ee; }
  .switch.s-success .slider:before {
    background-color: #1abc9c; }
  .switch.s-warning .slider:before {
    background-color: #e2a03f; }
  .switch.s-danger .slider:before {
    background-color: #e7515a; }
  .switch.s-secondary .slider:before {
    background-color: #805dca; }
  .switch.s-info .slider:before {
    background-color: #2196f3; }
  .switch.s-dark .slider:before {
    background-color: #3b3f5c; }
  .switch input:checked + .slider:before {
    background-color: #fff; }
  .switch.s-default input:checked + .slider {
    background-color: #d3d3d3; }
  .switch.s-default input:focus + .slider {
    box-shadow: 0 0 1px #ebedf2; }
  .switch.s-primary input:checked + .slider {
    background-color: #4361ee; }
  .switch.s-primary input:focus + .slider {
    box-shadow: 0 0 1px #4361ee; }
  .switch.s-success input:checked + .slider {
    background-color: #1abc9c; }
  .switch.s-success input:focus + .slider {
    box-shadow: 0 0 1px #1abc9c; }
  .switch.s-warning input:checked + .slider {
    background-color: #e2a03f; }
  .switch.s-warning input:focus + .slider {
    box-shadow: 0 0 1px #e2a03f; }
  .switch.s-danger input:checked + .slider {
    background-color: #e7515a; }
  .switch.s-danger input:focus + .slider {
    box-shadow: 0 0 1px #e7515a; }
  .switch.s-secondary input:checked + .slider {
    background-color: #805dca; }
  .switch.s-secondary input:focus + .slider {
    box-shadow: 0 0 1px #805dca; }
  .switch.s-info input:checked + .slider {
    background-color: #2196f3; }
  .switch.s-info input:focus + .slider {
    box-shadow: 0 0 1px #2196f3; }
  .switch.s-dark input:checked + .slider {
    background-color: #3b3f5c; }
  .switch.s-dark input:focus + .slider {
    box-shadow: 0 0 1px #3b3f5c; }
  .switch.s-outline .slider {
    border: 2px solid #ebedf2;
    background-color: transparent;
    width: 36px;
    height: 19px; }
    .switch.s-outline .slider:before {
      height: 13px;
      width: 13px; }
  .switch.s-outline[class*="s-outline-"] .slider:before {
    bottom: 1px;
    left: 1px;
    border: 2px solid #bfc9d4;
    background-color: #bfc9d4;
    color: #ebedf2;
    box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.25); }
  .switch.s-icons.s-outline-default {
    color: #d3d3d3; }
  .switch.s-icons.s-outline-primary {
    color: #4361ee; }
  .switch.s-icons.s-outline-success {
    color: #1abc9c; }
  .switch.s-icons.s-outline-warning {
    color: #e2a03f; }
  .switch.s-icons.s-outline-danger {
    color: #e7515a; }
  .switch.s-icons.s-outline-secondary {
    color: #805dca; }
  .switch.s-icons.s-outline-info {
    color: #2196f3; }
  .switch.s-icons.s-outline-dark {
    color: #3b3f5c; }
  .switch.s-outline-default input:checked + .slider {
    border: 2px solid #ebedf2; }
    .switch.s-outline-default input:checked + .slider:before {
      border: 2px solid #d3d3d3;
      background-color: #d3d3d3;
      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.25); }
  .switch.s-outline-default input:focus + .slider {
    box-shadow: 0 0 1px #ebedf2; }
  .switch.s-outline-primary input:checked + .slider {
    border: 2px solid #4361ee; }
    .switch.s-outline-primary input:checked + .slider:before {
      border: 2px solid #4361ee;
      background-color: #4361ee;
      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
  .switch.s-outline-primary input:focus + .slider {
    box-shadow: 0 0 1px #4361ee; }
  .switch.s-outline-success input:checked + .slider {
    border: 2px solid #1abc9c; }
    .switch.s-outline-success input:checked + .slider:before {
      border: 2px solid #1abc9c;
      background-color: #1abc9c;
      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
  .switch.s-outline-success input:focus + .slider {
    box-shadow: 0 0 1px #1abc9c; }
  .switch.s-outline-warning input:checked + .slider {
    border: 2px solid #e2a03f; }
    .switch.s-outline-warning input:checked + .slider:before {
      border: 2px solid #e2a03f;
      background-color: #e2a03f;
      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
  .switch.s-outline-warning input:focus + .slider {
    box-shadow: 0 0 1px #e2a03f; }
  .switch.s-outline-danger input:checked + .slider {
    border: 2px solid #e7515a; }
    .switch.s-outline-danger input:checked + .slider:before {
      border: 2px solid #e7515a;
      background-color: #e7515a;
      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
  .switch.s-outline-danger input:focus + .slider {
    box-shadow: 0 0 1px #e7515a; }
  .switch.s-outline-secondary input:checked + .slider {
    border: 2px solid #805dca; }
    .switch.s-outline-secondary input:checked + .slider:before {
      border: 2px solid #805dca;
      background-color: #805dca;
      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
  .switch.s-outline-secondary input:focus + .slider {
    box-shadow: 0 0 1px #805dca; }
  .switch.s-outline-info input:checked + .slider {
    border: 2px solid #2196f3; }
    .switch.s-outline-info input:checked + .slider:before {
      border: 2px solid #2196f3;
      background-color: #2196f3;
      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
  .switch.s-outline-info input:focus + .slider {
    box-shadow: 0 0 1px #2196f3; }
  .switch.s-outline-dark input:checked + .slider {
    border: 2px solid #3b3f5c; }
    .switch.s-outline-dark input:checked + .slider:before {
      border: 2px solid #3b3f5c;
      background-color: #3b3f5c;
      box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.34); }
  .switch.s-outline-dark input:focus + .slider {
    box-shadow: 0 0 1px #3b3f5c; }
  .switch.s-icons {
    width: 57px;
    height: 30px; }
    .switch.s-icons .slider {
      width: 48px;
      height: 25px; }
      .switch.s-icons .slider:before {
        vertical-align: sub;
        color: #3b3f5c;
        height: 19px;
        width: 19px;
        line-height: 1.3;
        content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23e9ecef" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>'); }
    .switch.s-icons input:checked + .slider:before {
      content: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>');
      vertical-align: sub;
      color: #fff;
      line-height: 1.4;
      -webkit-transform: translateX(23px);
      -ms-transform: translateX(23px);
      transform: translateX(23px); }

/* Hide default HTML checkbox */
/* The slider */
/* Rounded Slider Switches */
/* Solid Switches*/
/* Outline Switches */
/*  Icons Switches */

/*
	===============================
			@Import	Function
	===============================
*/
/*
	===============================
			@Import	Mixins
	===============================
*/
/*
    ===============================
    /|\                         /|\
    /|\                         /|\
    /|\    Analytics Section    /|\
    /|\                         /|\
    /|\                         /|\
    ===============================
*/
.layout-spacing {
    padding-bottom: 30px;
}

.widget {
    position: relative;
    padding: 0;
    border-radius: 6px;
    border: none;
    box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002),
        0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004),
        0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005),
        0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006),
        0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008),
        0 7px 0px rgba(0, 0, 0, 0.01);
}

.layout-spacing {
    padding-bottom: 30px;
}

.widget {
    position: relative;
    padding: 20px;
    border-radius: 8px;
    border: none;
    background: #fff;
}
.widget .widget-heading {
    margin-bottom: 15px;
}
.widget h5 {
    letter-spacing: 0px;
    font-size: 19px;
    display: block;
    color: #0e1726;
    font-weight: 600;
    margin-bottom: 0;
}

/*
    ==================
        Notification
    ==================
*/
.widget-card-four {
    padding: 25px 23px;
    background: #fff;
}
.widget-card-four .w-header {
    display: flex;
    justify-content: space-between;
}
.widget-card-four .w-header .w-info {
    align-self: center;
}
.widget-card-four .w-header .w-info h6 {
    font-weight: 600;
    margin-bottom: 0;
    color: #0e1726;
    font-size: 23px;
    letter-spacing: 0;
}
.widget-card-four .w-header .task-action svg {
    color: #888ea8;
    width: 19px;
    height: 19px;
}
.widget-card-four .w-header .task-action .dropdown-menu {
    transform: translate3d(-141px, 0, 0px);
}
.widget-card-four .w-content {
    display: flex;
    justify-content: space-between;
    margin-top: 36px;
}
.widget-card-four .w-content .w-info p.value {
    font-weight: 500;
    margin-bottom: 0;
    color: #e95f2b;
    font-size: 30px;
}
.widget-card-four .w-content .w-info p.value span {
    font-size: 15px;
    color: #030305;
    font-weight: 700;
    letter-spacing: 0;
}
.widget-card-four .w-content .w-info p.value svg {
    width: 16px;
    height: 16px;
    color: #009688;
    margin-top: 7px;
}
.widget-card-four .w-progress-stats {
    display: flex;
    margin-top: 36px;
}
.widget-card-four .w-icon {
    color: #5f0a87;
    align-self: center;
    justify-content: center;
    border-radius: 50%;
}
.widget-card-four .progress {
    height: 8px;
    margin-bottom: 0;
    height: 20px;
    padding: 4px;
    border-radius: 20px;
    box-shadow: 0 2px 2px rgba(224, 230, 237, 0.458824);
    width: 100%;
    align-self: flex-end;
    margin-right: 22px;
    background-color: rgba(246, 112, 98, 0.14);
}
.widget-card-four .progress-bar.bg-gradient-secondary {
    position: relative;
    background-color: #fc5296;
    background-image: linear-gradient(315deg, #fc5296 0%, #f67062 74%);
}
.widget-card-four .progress-bar:before {
    content: "";
    height: 7px;
    width: 7px;
    background: #fff;
    position: absolute;
    right: 3px;
    border-radius: 50%;
    top: 3.4px;
}
.widget-card-four .w-icon p {
    margin-bottom: 0;
    color: #e95f2b;
    font-size: 15px;
    font-weight: 700;
}

/*
    =====================
        Unique Visitors
    =====================
*/
.widget.widget-chart-three {
    background: #fff;
    padding: 0;
}
.widget.widget-chart-three .widget-heading {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #e0e6ed;
    padding: 20px 20px;
    margin-bottom: 0;
    padding-bottom: 20px;
}
.widget.widget-chart-three .widget-heading h5 {
    font-size: 17px;
    display: block;
    color: #0e1726;
    font-weight: 600;
    margin-bottom: 0;
}
.widget.widget-chart-three .widget-heading .dropdown {
    align-self: center;
}
.widget.widget-chart-three .widget-heading .dropdown a svg {
    color: #888ea8;
    width: 19px;
    height: 19px;
}
.widget.widget-chart-three .widget-heading .dropdown .dropdown-menu {
    padding: 8px 8px;
    min-width: 10rem;
    border-radius: 6px;
    top: 5px !important;
}
.widget.widget-chart-three .apexcharts-legend-marker {
    left: -5px !important;
}

/*
    ========================
        Not Available
    ========================
*/
/*
    ========================
        Recent Activities
    ========================
*/
.widget-activity-three .widget-content {
    padding: 20px 10px 20px 20px;
}

.widget-activity-three .mt-container {
    position: relative;
    height: 310px;
    overflow: auto;
    padding: 0 12px 0 12px;
}

.widget.widget-activity-three .timeline-line .item-timeline {
    display: flex;
    margin-bottom: 20px;
}
.widget.widget-activity-three .timeline-line .item-timeline .t-dot {
    position: relative;
}
.widget.widget-activity-three .timeline-line .item-timeline .t-dot div {
    border-radius: 50%;
    padding: 5px;
    margin-right: 11px;
    display: flex;
    height: 37px;
    justify-content: center;
    width: 36px;
}
.widget.widget-activity-three
    .timeline-line
    .item-timeline
    .t-dot
    div.t-primary
    svg {
    color: #4361ee;
}
.widget.widget-activity-three
    .timeline-line
    .item-timeline
    .t-dot
    div.t-success
    svg {
    color: #009688;
}
.widget.widget-activity-three
    .timeline-line
    .item-timeline
    .t-dot
    div.t-danger
    svg {
    color: #e7515a;
}
.widget.widget-activity-three
    .timeline-line
    .item-timeline
    .t-dot
    div.t-warning
    svg {
    color: #e2a03f;
}
.widget.widget-activity-three
    .timeline-line
    .item-timeline
    .t-dot
    div.t-dark
    svg {
    color: #3b3f5c;
}
.widget.widget-activity-three .timeline-line .item-timeline .t-dot svg {
    color: #fff;
    height: 20px;
    width: 20px;
    stroke-width: 1.6px;
    align-self: center;
}
.widget.widget-activity-three .timeline-line .item-timeline .t-content {
    width: 100%;
}
.widget.widget-activity-three
    .timeline-line
    .item-timeline
    .t-content
    .t-uppercontent {
    display: flex;
    justify-content: space-between;
}
.widget.widget-activity-three
    .timeline-line
    .item-timeline
    .t-content
    .t-uppercontent
    h5 {
    font-size: 14px;
    letter-spacing: 0;
    font-weight: 500;
    margin-bottom: 5px;
}
.widget.widget-activity-three
    .timeline-line
    .item-timeline
    .t-content
    .t-uppercontent
    span {
    margin-bottom: 0;
    font-size: 11px;
    font-weight: 500;
    color: #0e1726;
}
.widget.widget-activity-three .timeline-line .item-timeline .t-content p {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #888ea8;
}
.widget.widget-activity-three .timeline-line .item-timeline .t-dot:after {
    content: "";
    position: absolute;
    border-width: 1px;
    border-style: solid;
    left: 40%;
    transform: translateX(-50%);
    border-color: #ebedf2;
    width: 0;
    height: auto;
    top: 36px;
    bottom: -20px;
    border-right-width: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    border-radius: 0;
}
.widget.widget-activity-three
    .timeline-line
    .item-timeline:last-child
    .t-dot:after {
    display: none;
}

/*
    ==================
        Statistics
    ==================
*/
.widget-one_hybrid {
    background: #fff;
    padding: 0;
}
.widget-one_hybrid .widget-heading {
    padding: 20px 13px;
}
.widget-one_hybrid .widget-heading .w-title {
    /* display: flex; */
    margin-bottom: 15px;
}
.widget-one_hybrid .widget-heading .w-icon {
    display: inline-block;
    align-self: center;
    padding: 10px;
    border-radius: 12px;
    margin-right: 16px;
}
.widget-one_hybrid .widget-heading svg {
    width: 22px;
    height: 22px;
}
.widget-one_hybrid .widget-heading .w-value {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 0;
    align-self: center;
}
.widget-one_hybrid .widget-heading h5 {
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 600;
    color: #506690;
}
.widget-one_hybrid .apexcharts-canvas svg {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.widget-one_hybrid.widget-followers .widget-heading .w-icon {
    color: #4361ee;
    background: #c2d5ff;
}
.widget-one_hybrid.widget-referral .widget-heading .w-icon {
    color: #e7515a;
    background-color: #ffe1e2;
}
.widget-one_hybrid.widget-social {
    background: #bae7ff;
    background: #4361ee;
}
.widget-one_hybrid.widget-social .widget-heading .w-icon {
    color: #2196f3;
    border: 1px solid #2196f3;
}
.widget-one_hybrid.widget-engagement .widget-heading .w-icon {
    background-color: #e6ffbf;
    color: #009688;
}

/*
    ==================
        Balance
    ==================
*/
.widget-account-invoice-two {
    padding: 22px 19px;
    border: none;
    box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002),
        0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004),
        0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005),
        0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006),
        0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008),
        0 7px 0px rgba(0, 0, 0, 0.01);
    background: #3b3f5c;
    background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
    background-blend-mode: multiply;
}
.widget-account-invoice-two .account-box .info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 86px;
}
.widget-account-invoice-two .account-box h5 {
    color: #e0e6ed;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 400;
    margin-top: 5px;
}
.widget-account-invoice-two .account-box .inv-balance-info {
    text-align: right;
}
.widget-account-invoice-two .account-box p {
    color: #e0e6ed;
    font-weight: 400;
    margin-bottom: 4px;
    align-self: center;
    font-size: 20px;
}
.widget-account-invoice-two .account-box .inv-stats {
    display: inline-block;
    padding: 3px 5px;
    background: rgba(0, 150, 136, 0.26);
    color: #009688;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
}
.widget-account-invoice-two .account-box .acc-action {
    margin-top: 23px;
    display: flex;
    justify-content: space-between;
}
.widget-account-invoice-two .account-box .acc-action a {
    display: inline-block;
    padding: 6px;
    border-radius: 6px;
    color: #e0e6ed;
    box-shadow: 0px 0px 2px 0px #bfc9d4;
}
.widget-account-invoice-two .account-box .acc-action a:first-child {
    margin-right: 4px;
}
.widget-account-invoice-two .account-box .acc-action a svg {
    width: 17px;
    height: 17px;
    stroke-width: 1.7;
}

/*
    ==================
        Statistics
    ==================
*/
.widget-card-one {
    background: #fff;
    padding: 20px 0;
    height: 100%;
}
.widget-card-one .widget-content .media {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 19px;
    padding-bottom: 21px;
    border-bottom: 1px dashed #e0e6ed;
}
.widget-card-one .widget-content .media .w-img {
    margin-right: 10px;
    align-self: center;
}
.widget-card-one .widget-content .media img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #e0e6ed;
}
.widget-card-one .widget-content .media-body {
    align-self: center;
}
.widget-card-one .widget-content .media-body h6 {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0;
    margin-bottom: 0;
}
.widget-card-one .widget-content .media-body p {
    font-size: 13px;
    letter-spacing: 0px;
    margin-bottom: 0;
    font-weight: 600;
    color: #888ea8;
    padding: 0;
}
.widget-card-one .widget-content p {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 36px;
    padding: 0 20px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    width: 100%;
}
.widget-card-one .widget-content .w-action {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
}
.widget-card-one .widget-content .w-action svg {
    color: #2196f3;
    fill: #bae7ff;
    margin-right: 8px;
    stroke-width: 1.5;
}
.widget-card-one .widget-content .w-action span {
    vertical-align: sub;
    font-weight: 700;
    color: #0e1726;
    letter-spacing: 1px;
}
.widget-card-one .widget-content .w-action .read-more {
    align-self: center;
}
.widget-card-one .widget-content .w-action .read-more a {
    display: inline-block;
    padding: 3px 5px;
    background: rgba(0, 150, 136, 0.26);
    color: #009688;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
}
.widget-card-one .widget-content .w-action .read-more a svg {
    margin-right: 0;
    color: #009688;
    width: 16px;
    height: 16px;
    fill: transparent;
    stroke-width: 1.8;
    transition: 0.5s;
}
.widget-card-one .widget-content .w-action .read-more a:hover {
    box-shadow: 0 0 30px #e0f0ef;
}

/*
    ====================
        Visitors by Browser
    ====================
*/
.widget-four {
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    height: 100%;
    box-shadow: none;
    box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002),
        0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004),
        0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005),
        0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006),
        0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008),
        0 7px 0px rgba(0, 0, 0, 0.01);
}
.widget-four .widget-heading {
    margin-bottom: 54px;
}
.widget-four .widget-heading h5 {
    font-size: 17px;
    display: block;
    color: #0e1726;
    font-weight: 600;
    margin-bottom: 0;
}
.widget-four .widget-content {
    font-size: 17px;
}
.widget-four .widget-content .browser-list {
    display: flex;
}
.widget-four .widget-content .browser-list:not(:last-child) {
    margin-bottom: 30px;
}
.widget-four .widget-content .w-icon {
    display: inline-block;
    padding: 10px 9px;
    border-radius: 50%;
    display: inline-flex;
    align-self: center;
    height: 34px;
    width: 34px;
    margin-right: 12px;
}
.widget-four .widget-content .w-icon svg {
    display: block;
    width: 15px;
    height: 15px;
}
.widget-four .widget-content .browser-list:nth-child(1) .w-icon {
    background: #c2d5ff;
}
.widget-four .widget-content .browser-list:nth-child(2) .w-icon {
    background: #ffe1e2;
}
.widget-four .widget-content .browser-list:nth-child(3) .w-icon {
    background: #ffeccb;
}
.widget-four .widget-content .browser-list:nth-child(1) .w-icon svg {
    color: #4361ee;
}
.widget-four .widget-content .browser-list:nth-child(2) .w-icon svg {
    color: #e7515a;
}
.widget-four .widget-content .browser-list:nth-child(3) .w-icon svg {
    color: #e2a03f;
}
.widget-four .widget-content .w-browser-details {
    width: 100%;
    align-self: center;
}
.widget-four .widget-content .w-browser-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1px;
}
.widget-four .widget-content .w-browser-info h6 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    color: #888ea8;
}
.widget-four .widget-content .w-browser-info p {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 0;
    color: #888ea8;
}
.widget-four .widget-content .w-browser-stats .progress {
    margin-bottom: 0;
    height: 22px;
    padding: 4px;
    border-radius: 20px;
    box-shadow: 0 2px 2px rgba(224, 230, 237, 0.458824),
        1px 6px 7px rgba(224, 230, 237, 0.458824);
}
.widget-four .widget-content .w-browser-stats .progress .progress-bar {
    position: relative;
}

.progress .progress-bar.bg-gradient-primary {
    background-color: #2a2a72;
    background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
}

.progress .progress-bar.bg-gradient-danger {
    background-image: linear-gradient(315deg, #3f0d12 0%, #a71d31 74%);
}

.progress .progress-bar.bg-gradient-warning {
    background-color: #fc9842;
    background-image: linear-gradient(315deg, #fc9842 0%, #fe5f75 74%);
}

.widget-four .widget-content .w-browser-stats .progress .progress-bar:before {
    content: "";
    height: 7px;
    width: 7px;
    background: #fff;
    position: absolute;
    right: 3px;
    border-radius: 50%;
    top: 3.4px;
}

/*
    ==================
        Dev Summit
    ==================
*/
.widget-card-two {
    background: #fff;
    padding: 20px 0px;
}
.widget-card-two .media {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 19px;
    padding-bottom: 21px;
    border-bottom: 1px dashed #e0e6ed;
}
.widget-card-two .media .w-img {
    margin-right: 10px;
}
.widget-card-two .media .w-img img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #e0e6ed;
}
.widget-card-two .media .media-body {
    align-self: center;
}
.widget-card-two .media .media-body h6 {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0;
    margin-bottom: 0;
}
.widget-card-two .media .media-body p {
    margin-bottom: 0;
    font-weight: 600;
    color: #888ea8;
}
.widget-card-two .card-bottom-section {
    text-align: center;
}
.widget-card-two .card-bottom-section h5 {
    font-size: 14px;
    color: #009688;
    font-weight: 700;
    margin-bottom: 20px;
}
.widget-card-two .card-bottom-section .img-group img {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 2px solid #e0e6ed;
}
.widget-card-two .card-bottom-section .img-group img:not(:last-child) {
    margin-right: 5px;
}
.widget-card-two .card-bottom-section a {
    display: block;
    margin-top: 18px;
    background: #4361ee;
    color: #fff;
    padding: 10px 10px;
    transform: none;
    margin-right: 15px;
    margin-left: 15px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    border: none;
    background-image: linear-gradient(315deg, #1e9afe 0%, #60dfcd 74%);
}
.widget-card-two .card-bottom-section a.btn:hover,
.widget-card-two .card-bottom-section a.btn:focus {
    border-color: #4361ee;
}

/*
    =====================
        Task Indicator
    =====================
*/
.widget-five {
    background: #fff;
    padding: 28px 0 0 0;
    height: 100%;
}
.widget-five .widget-content .header {
    display: flex;
    justify-content: space-between;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 23px;
    border-bottom: 1px dashed #e0e6ed;
}
.widget-five .widget-content .header-body {
    align-self: center;
}
.widget-five .widget-content .header-body h6 {
    font-size: 19px;
    display: block;
    color: #0e1726;
    font-weight: 600;
    margin-bottom: 0;
}
.widget-five .widget-content .header-body p {
    margin-bottom: 0;
    font-weight: 600;
    color: #888ea8;
    padding: 0;
}
.widget-five .widget-content .task-action {
    display: flex;
}
.widget-five .widget-content .task-action .dropdown {
    align-self: center;
}
.widget-five .widget-content .task-action .dropdown a.dropdown-toggle svg {
    color: #888ea8;
    width: 19px;
    height: 19px;
}
.widget-five .w-content {
    text-align: center;
    height: 100%;
    padding: 20px 26px;
}
.widget-five .w-content div .task-left {
    margin-bottom: 0;
    font-size: 30px;
    color: #805dca;
    background: #f3effc;
    font-weight: 600;
    border-radius: 12px;
    display: inline-flex;
    height: 76px;
    width: 76px;
    justify-content: center;
    align-self: center;
    padding: 16px 0px;
    border: 1px solid #ebedf2;
    margin-bottom: 20px;
    box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002),
        0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004),
        0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005),
        0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006),
        0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008),
        0 7px 0px rgba(0, 0, 0, 0.01);
}
.widget-five .w-content div .task-completed {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #009688;
}
.widget-five .w-content div .task-hight-priority {
    color: #acb0c3;
    font-weight: 500;
    margin-bottom: 0;
}
.widget-five .w-content div .task-hight-priority span {
    color: #e7515a;
    font-weight: 700;
}

/*
    ==================
        Total Sales
    ==================
*/
.widget-two {
    position: relative;
    background: #fff;
    padding: 0;
    border-radius: 8px;
    height: 100%;
    box-shadow: none;
    border: 1px solid #f1f2f3;
    box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002),
        0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004),
        0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005),
        0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006),
        0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008),
        0 7px 0px rgba(0, 0, 0, 0.01);
}
.widget-two .widget-content {
    font-size: 17px;
}
.widget-two .w-chart {
    position: absolute;
    bottom: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
.widget-two .w-numeric-value {
    display: flex;
    color: #fff;
    font-weight: 500;
    padding: 20px;
    justify-content: space-between;
}
.widget-two .w-numeric-value .w-icon {
    display: inline-block;
    background: #bae7ff;
    padding: 13px 12px;
    border-radius: 12px;
    display: inline-flex;
    align-self: center;
    height: 45px;
    width: 45px;
}
.widget-two .w-numeric-value svg {
    display: block;
    color: #2196f3;
    width: 20px;
    height: 20px;
}
.widget-two .w-numeric-value .w-value {
    margin-bottom: -9px;
    letter-spacing: 0px;
    font-size: 19px;
    display: block;
    color: #0e1726;
    font-weight: 600;
}
.widget-two .w-numeric-value .w-numeric-title {
    font-size: 13px;
    color: #888ea8;
    font-weight: 600;
}

.widget.widget-one {
    padding: 20px 18px 12px 18px;
    background: #fff;
}
.widget.widget-one .widget-heading h6 {
    color: #0e1726;
    margin-bottom: 30px;
    font-size: 17px;
    display: block;
    font-weight: 600;
}
.widget.widget-one .w-chart {
    display: flex;
}
.widget.widget-one .w-chart .w-chart-section {
    width: 49%;
    padding: 0 12px;
    background: #000;
    border-radius: 16px;
    padding: 15px;
}
.widget.widget-one .w-chart .w-chart-section.total-visits-content {
    background-color: #e7f7ff;
}
.widget.widget-one .w-chart .w-chart-section.paid-visits-content {
    background-color: #fff9ed;
}
.widget.widget-one .w-chart .w-chart-section:not(:last-child) {
    margin-right: 10px;
}
.widget.widget-one .w-chart .w-chart-section .w-detail {
    color: #fff;
}
.widget.widget-one .w-chart .w-chart-section .w-title {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 0;
    color: #4361ee;
}
.widget.widget-one .w-chart .w-chart-section .w-stats {
    color: #4361ee;
    font-size: 18px;
    letter-spacing: 1px;
    margin-bottom: 0;
    font-weight: 500;
}
.widget.widget-one .w-chart .w-chart-section.paid-visits-content .w-title,
.widget.widget-one .w-chart .w-chart-section.paid-visits-content .w-stats {
    color: #e95f2b;
}

/*
    ==================
        Widget
    ==================
*/
.widget-one {
    position: relative;
    background: #4361ee;
    padding: 0;
    border-radius: 8px;
    height: 100%;
    -webkit-box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002),
        0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004),
        0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005),
        0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006),
        0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008),
        0 7px 0px rgba(0, 0, 0, 0.01);
    -moz-box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002),
        0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004),
        0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005),
        0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006),
        0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008),
        0 7px 0px rgba(0, 0, 0, 0.01);
    box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002),
        0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004),
        0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005),
        0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006),
        0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008),
        0 7px 0px rgba(0, 0, 0, 0.01);
}
.widget-one .widget-content {
    font-size: 17px;
}
.widget-one .w-numeric-value {
    position: absolute;
    display: flex;
    color: #fff;
    font-weight: 500;
    padding: 20px;
}
.widget-one .w-numeric-value .w-icon {
    display: inline-block;
    background: #fff;
    padding: 13px 12px;
    border-radius: 50%;
    display: inline-flex;
    align-self: center;
    height: 45px;
    width: 45px;
    margin-right: 14px;
}
.widget-one .w-numeric-value svg {
    display: block;
    color: #4361ee;
    width: 20px;
    height: 20px;
}
.widget-one .w-numeric-value .w-value {
    font-size: 26px;
    display: block;
    color: #fff;
    font-weight: 600;
    margin-bottom: -9px;
}
.widget-one .w-numeric-value .w-numeric-title {
    font-size: 13px;
    color: #fff;
    letter-spacing: 1px;
    font-weight: 600;
}

/*
    ====================
        Order Summary
    ====================
*/
.widget-three {
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    height: 100%;
    box-shadow: 0 0.1px 0px rgba(0, 0, 0, 0.002),
        0 0.2px 0px rgba(0, 0, 0, 0.003), 0 0.4px 0px rgba(0, 0, 0, 0.004),
        0 0.6px 0px rgba(0, 0, 0, 0.004), 0 0.9px 0px rgba(0, 0, 0, 0.005),
        0 1.2px 0px rgba(0, 0, 0, 0.006), 0 1.8px 0px rgba(0, 0, 0, 0.006),
        0 2.6px 0px rgba(0, 0, 0, 0.007), 0 3.9px 0px rgba(0, 0, 0, 0.008),
        0 7px 0px rgba(0, 0, 0, 0.01);
}

.widget-three .widget-heading {
    margin-bottom: 54px;
}
.widget-three .widget-heading h5 {
    font-size: 19px;
    display: block;
    color: #0e1726;
    font-weight: 600;
    margin-bottom: 0;
}

.widget-three .widget-content {
    font-size: 17px;
}
.widget-three .widget-content .summary-list {
    display: flex;
}
.widget-three .widget-content .summary-list:not(:last-child) {
    margin-bottom: 30px;
}
.widget-three .widget-content .w-icon {
    display: inline-block;
    padding: 8px 8px;
    border-radius: 50%;
    display: inline-flex;
    align-self: center;
    height: 34px;
    width: 34px;
    margin-right: 12px;
}
.widget-three .widget-content .w-icon svg {
    display: block;
    width: 17px;
    height: 17px;
}
.widget-three .widget-content .summary-list:nth-child(1) .w-icon {
    background: rgba(220, 207, 247, 0.55);
}
.widget-three .widget-content .summary-list:nth-child(2) .w-icon {
    background: rgba(199, 230, 228, 0.62);
}
.widget-three .widget-content .summary-list:nth-child(3) .w-icon {
    background: rgba(255, 236, 203, 0.51);
}
.widget-three .widget-content .summary-list:nth-child(1) .w-icon svg {
    color: #805dca;
}
.widget-three .widget-content .summary-list:nth-child(2) .w-icon svg {
    color: #009688;
}
.widget-three .widget-content .summary-list:nth-child(3) .w-icon svg {
    color: #e2a03f;
}
.widget-three .widget-content .w-summary-details {
    width: 100%;
    align-self: center;
}
.widget-three .widget-content .w-summary-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1px;
}
.widget-three .widget-content .w-summary-info h6 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    color: #888ea8;
}
.widget-three .widget-content .w-summary-info p {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 0;
    color: #888ea8;
}
.widget-three .widget-content .w-summary-stats .progress {
    margin-bottom: 0;
    height: 6px;
    border-radius: 20px;
    box-shadow: 0 2px 2px rgba(224, 230, 237, 0.458824),
        1px 6px 7px rgba(224, 230, 237, 0.458824);
}
.widget-three
    .widget-content
    .w-summary-stats
    .progress
    .progress-bar.bg-gradient-secondary {
    background-color: #4361ee;
    background-image: linear-gradient(to right, #ba68c8 0%, #7579ff 100%);
}
.widget-three
    .widget-content
    .w-summary-stats
    .progress
    .progress-bar.bg-gradient-success {
    background-color: #4361ee;
    background-image: linear-gradient(to right, #009688 0%, #25d5e4 100%);
}
.widget-three
    .widget-content
    .w-summary-stats
    .progress
    .progress-bar.bg-gradient-warning {
    background-color: #fc9842;
    background-image: linear-gradient(315deg, #fc9842 0%, #fe5f75 74%);
}

/*
    ==================
        Revenue
    ==================
*/
.widget-chart-one .widget-heading {
    display: flex;
    justify-content: space-between;
}

.widget-chart-one #revenueMonthly {
    background: rgba(243, 239, 252, 0.34);
    padding: 15px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #ebedf2;
}

.widget-chart-one .widget-content .apexcharts-canvas {
    transition: 0.5s;
}
.widget-chart-one .widget-content .apexcharts-canvas svg {
    transition: 0.5s;
}

.widget-chart-one .apexcharts-legend-marker {
    left: -5px !important;
}

.widget-chart-one .apexcharts-yaxis-title,
.widget-chart-one .apexcharts-xaxis-title {
    font-weight: 600;
    fill: #acb0c3;
}

.widget-chart-one .widget-heading .task-action svg {
    color: #888ea8;
    width: 19px;
    height: 19px;
}

.widget-chart-one .widget-heading .task-action .dropdown-menu {
    transform: translate3d(-141px, 0, 0px);
}

/*
    =======================
        Sold By cateory
    =======================
*/
.widget-chart-two {
    padding: 0 !important;
}

.widget.widget-chart-two .widget-heading {
    padding: 20px 20px 0 20px;
}

.widget.widget-chart-two .widget-content {
    padding: 0 0 20px 0;
}

.widget-chart-two .apexcharts-canvas {
    margin: 0 auto;
}

.widget-chart-two .apexcharts-legend-marker {
    left: -5px !important;
}

/*
    ==================
        Transaction
    ==================
*/
.widget-table-one .widget-heading {
    display: flex;
    margin-bottom: 25px;
    justify-content: space-between;
}
.widget-table-one .widget-heading .task-action .dropdown-toggle svg {
    color: #888ea8;
    width: 19px;
    height: 19px;
}
.widget-table-one .widget-heading .task-action .dropdown-menu {
    transform: translate3d(-141px, 0, 0px);
}

.widget-table-one .transactions-list {
    border-radius: 6px;
}
.widget-table-one .transactions-list:not(:last-child) {
    margin-bottom: 19px;
}
.widget-table-one .transactions-list .t-item {
    display: flex;
    justify-content: space-between;
}
.widget-table-one .transactions-list .t-item .t-company-name {
    display: flex;
}
.widget-table-one .transactions-list .t-item .t-icon {
    margin-right: 12px;
}
.widget-table-one .transactions-list .t-item .t-icon .avatar {
    position: relative;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
}
.widget-table-one .transactions-list .t-item .t-icon .avatar .avatar-title {
    background-color: #ffe1e2;
    color: #e7515a;
    border-radius: 12px;
    position: relative;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    width: 42px;
}
.widget-table-one
    .transactions-list.t-info
    .t-item
    .t-icon
    .avatar
    .avatar-title {
    background-color: #e7f7ff;
    color: #2196f3;
}
.widget-table-one .transactions-list.t-secondary .t-item .t-icon .icon {
    background-color: #f3effc;
}
.widget-table-one .transactions-list.t-secondary .t-item .t-icon .icon svg {
    color: #805dca;
}
.widget-table-one .transactions-list .t-item .t-icon .icon {
    position: relative;
    background-color: #ffeccb;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    width: 42px;
}
.widget-table-one .transactions-list .t-item .t-icon .icon svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    color: #e2a03f;
    stroke-width: 2;
}
.widget-table-one .transactions-list .t-item .t-name {
    align-self: center;
}
.widget-table-one .transactions-list .t-item .t-name h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
    transition: all 0.5s ease;
}
.widget-table-one .transactions-list:hover .t-item .t-name h4 {
    color: #2196f3;
}
.widget-table-one .transactions-list .t-item .t-name .meta-date {
    font-size: 12px;
    margin-bottom: 0;
    font-weight: 500;
    color: #888ea8;
}
.widget-table-one .transactions-list .t-item .t-rate {
    align-self: center;
}
.widget-table-one .transactions-list .t-item .t-rate p {
    margin-bottom: 0;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 500;
}
.widget-table-one .transactions-list .t-item .t-rate svg {
    width: 14px;
    height: 14px;
    vertical-align: baseline;
}
.widget-table-one .transactions-list .t-item .t-rate.rate-inc p {
    color: #009688;
}
.widget-table-one .transactions-list .t-item .t-rate.rate-dec p {
    color: #e7515a;
}

/*
    ========================
        Not Available
    ========================
*/
/*
    ========================
        Recent Activities
    ========================
*/
.widget-activity-four {
    padding-right: 0;
    padding-left: 0;
}
.widget-activity-four .widget-heading {
    margin-bottom: 28px;
    padding: 0 20px;
}
.widget-activity-four .widget-heading .w-icon {
    position: absolute;
    right: 20px;
    top: 15px;
}
.widget-activity-four .widget-heading .w-icon a {
    padding: 6px;
    border-radius: 10px;
    padding: 6px;
    background: #c7e6e4 !important;
    border: none;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.widget-activity-four .widget-heading .w-icon a svg {
    color: #009688;
}
.widget-activity-four .mt-container {
    position: relative;
    height: 326px;
    overflow: auto;
    padding-right: 12px;
}
.widget-activity-four .widget-content {
    padding: 0 8px 0 20px;
}
.widget-activity-four .timeline-line .item-timeline {
    display: flex;
    width: 100%;
    padding: 8px 0;
    transition: 0.5s;
    position: relative;
    border-radius: 6px;
    cursor: pointer;
}
.widget-activity-four .timeline-line .item-timeline .t-dot {
    position: relative;
}
.widget-activity-four .timeline-line .item-timeline .t-dot:before {
    content: "";
    position: absolute;
    border-color: inherit;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    top: 7px;
    left: 5px;
    transform: translateX(-50%);
    border-color: #e0e6ed;
    background: #bfc9d4;
    z-index: 1;
}
.widget-activity-four .timeline-line .item-timeline .t-dot:after {
    position: absolute;
    border-color: inherit;
    border-width: 1px;
    border-style: solid;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    left: 5px;
    transform: translateX(-50%);
    border-color: #e0e6ed;
    width: 0;
    height: auto;
    top: 12px;
    bottom: -19px;
    border-right-width: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    border-radius: 0;
}
.widget-activity-four
    .timeline-line
    .item-timeline.timeline-primary
    .t-dot:before {
    background: #c2d5ff;
    border: 2px solid rgba(27, 85, 226, 0.33);
}
.widget-activity-four
    .timeline-line
    .item-timeline.timeline-success
    .t-dot:before {
    background-color: #e6ffbf;
    border: 2px solid #9ad2cd;
}
.widget-activity-four
    .timeline-line
    .item-timeline.timeline-danger
    .t-dot:before {
    background-color: #ffe1e2;
    border: 2px solid #f1acb0;
}
.widget-activity-four
    .timeline-line
    .item-timeline.timeline-dark
    .t-dot:before {
    background-color: #acb0c3;
    border: 2px solid #9fa3bb;
}
.widget-activity-four
    .timeline-line
    .item-timeline.timeline-secondary
    .t-dot:before {
    background: #dccff7;
    border: 2px solid rgba(92, 26, 195, 0.35);
}
.widget-activity-four
    .timeline-line
    .item-timeline.timeline-warning
    .t-dot:before {
    background-color: #ffeccb;
    border: 2px solid #dec7a5;
}
.widget-activity-four .timeline-line .item-timeline:last-child .t-dot:after {
    display: none;
}
.widget-activity-four .timeline-line .item-timeline .t-meta-time {
    margin: 0;
    min-width: 100px;
    max-width: 100px;
    font-size: 12px;
    font-weight: 700;
    color: #888ea8;
    align-self: center;
}
.widget-activity-four .timeline-line .item-timeline .t-text {
    align-self: center;
    margin-left: 14px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    transition: 0.5s;
}
.widget-activity-four .timeline-line .item-timeline .t-text p {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 600;
    margin-bottom: 0;
}
.widget-activity-four .timeline-line .item-timeline .t-text p a {
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 600;
    color: #009688;
}
.widget-activity-four .timeline-line .item-timeline .t-text span.badge {
    position: absolute;
    right: -1px;
    padding: 2px 4px;
    font-size: 10px;
    letter-spacing: 1px;
    opacity: 0;
    font-weight: 600;
    transform: none;
    top: 6px;
}
.widget-activity-four
    .timeline-line
    .item-timeline.timeline-primary
    .t-text
    span.badge {
    color: #4361ee;
    border: 1px solid #4361ee;
    background-color: #c2d5ff;
}
.widget-activity-four
    .timeline-line
    .item-timeline.timeline-secondary
    .t-text
    span.badge {
    color: #805dca;
    border: 1px solid #805dca;
    background-color: #dccff7;
}
.widget-activity-four
    .timeline-line
    .item-timeline.timeline-danger
    .t-text
    span.badge {
    color: #e7515a;
    border: 1px solid #e7515a;
    background-color: #ffe1e2;
}
.widget-activity-four
    .timeline-line
    .item-timeline.timeline-warning
    .t-text
    span.badge {
    color: #e2a03f;
    border: 1px solid #e2a03f;
    background-color: #ffeccb;
}
.widget-activity-four
    .timeline-line
    .item-timeline.timeline-success
    .t-text
    span.badge {
    color: #009688;
    border: 1px solid #009688;
    background-color: #e6ffbf;
}
.widget-activity-four
    .timeline-line
    .item-timeline.timeline-dark
    .t-text
    span.badge {
    color: #3b3f5c;
    border: 1px solid #3b3f5c;
    background-color: #acb0c3;
}
.widget-activity-four .timeline-line .item-timeline:hover .t-text span.badge {
    opacity: 1;
}
.widget-activity-four .timeline-line .item-timeline .t-text p.t-time {
    text-align: right;
    color: #888ea8;
    font-size: 10px;
}
.widget-activity-four .timeline-line .item-timeline .t-time {
    margin: 0;
    min-width: 80px;
    max-width: 80px;
    font-size: 13px;
    font-weight: 600;
    color: #acb0c3;
    letter-spacing: 1px;
}
.widget-activity-four .tm-action-btn {
    text-align: center;
    padding-top: 19px;
}
.widget-activity-four .tm-action-btn button {
    background: transparent;
    box-shadow: none;
    padding: 0;
    color: #030305;
    font-weight: 800;
    letter-spacing: 0;
    border: none;
    font-size: 14px;
}
.widget-activity-four .tm-action-btn button:hover {
    transform: translateY(0);
}
.widget-activity-four .tm-action-btn button span {
    margin-right: 6px;
    display: inline-block;
    transition: 0.5s;
}
.widget-activity-four .tm-action-btn button:hover span {
    transform: translateX(-6px);
}
.widget-activity-four .tm-action-btn svg {
    width: 17px;
    height: 17px;
    vertical-align: sub;
    color: #acb0c3;
    stroke-width: 2.5px;
    transition: 0.5s;
}
.widget-activity-four .tm-action-btn button:hover svg {
    transform: translateX(6px);
}

/*
    =====================
        Account Info
    =====================
*/
.widget-account-invoice-one .invoice-box .acc-total-info {
    padding: 0 0;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px dashed #bfc9d4;
}

.widget-account-invoice-one .invoice-box h5 {
    text-align: center;
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: #4361ee;
}

.widget-account-invoice-one .invoice-box .acc-amount {
    text-align: center;
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 0;
    color: #009688;
}

.widget-account-invoice-one .invoice-box .inv-detail {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px dashed #bfc9d4;
}

.widget-account-invoice-one
    .invoice-box
    [class*="info-detail-"]:not(.info-sub) {
    display: flex;
    justify-content: space-between;
}
.widget-account-invoice-one
    .invoice-box
    [class*="info-detail-"]:not(.info-sub)
    p {
    margin-bottom: 13px;
    font-weight: 700;
    font-size: 14px;
}

.widget-account-invoice-one
    .invoice-box
    [class*="info-detail-"].info-sub
    .info-detail {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    font-weight: 700;
    font-size: 14px;
}
.widget-account-invoice-one
    .invoice-box
    [class*="info-detail-"].info-sub
    .info-detail
    p {
    margin-bottom: 0;
}

.widget-account-invoice-one
    .invoice-box
    [class*="info-detail-"].info-sub
    .info-detail-sub {
    margin-left: 9px;
}
.widget-account-invoice-one
    .invoice-box
    [class*="info-detail-"].info-sub
    .info-detail-sub
    p {
    color: #888ea8;
    margin-bottom: 2px;
    font-weight: 600;
}

.widget-account-invoice-one .invoice-box .inv-action {
    text-align: center;
    display: flex;
    justify-content: space-around;
}
.widget-account-invoice-one .invoice-box .inv-action a {
    transform: none;
}

/*
    =====================
        Recent Orders
    =====================
*/
.widget-table-two {
    position: relative;
}
.widget-table-two .widget-content {
    background: transparent;
}
.widget-table-two .table {
    border-collapse: separate;
    border-spacing: 0 5px;
    margin-bottom: 0;
}
.widget-table-two .table > thead > tr > th {
    text-transform: initial;
    font-weight: 600;
    border-top: none;
    background: #fafafa;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
    padding: 10px 0 10px 5px;
}
.widget-table-two .table > thead > tr > th:first-child {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}
.widget-table-two .table > thead > tr > th:last-child {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}
.widget-table-two .table > thead > tr > th .th-content {
    color: #4361ee;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
}
.widget-table-two .table > thead > tr > th:first-child .th-content {
    margin-left: 10px;
}
.widget-table-two .table > thead > tr > th:last-child .th-content {
    text-align: right;
    margin-right: 10px;
}
.widget-table-two .table > thead > tr > th:nth-last-child(2) .th-content {
    text-align: center;
    padding: 0 15px 0 0;
}
.widget-table-two .table > tbody > tr > td {
    border-top: none;
    background: transparent;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 10px;
    padding-left: 10px;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.widget-table-two .table > tbody > tr > td .td-content {
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 1px;
    color: #888ea8;
}
.widget-table-two .table > tbody > tr:hover > td .td-content {
    color: #515365;
}
.widget-table-two .table > tbody > tr > td:first-child {
    border-top-left-radius: 6px;
    padding: 10px 0 10px 15px;
    border-bottom-left-radius: 6px;
}
.widget-table-two .table > tbody > tr > td:last-child {
    border-top-right-radius: 6px;
    padding: 15.5px 15px 15.5px 0;
    text-align: right;
    border-bottom-right-radius: 6px;
}
.widget-table-two .table .td-content.customer-name {
    color: #515365;
    display: flex;
}
.widget-table-two .table .td-content.customer-name span {
    align-self: center;
}
.widget-table-two .table .td-content.product-brand {
    letter-spacing: 1px;
}
.widget-table-two .table .td-content img {
    border-radius: 12px;
    margin-right: 13px;
    width: 35px;
    height: 35px;
    border-radius: 6px;
    margin-right: 10px;
    padding: 2px;
    box-shadow: 1px 1px 16px 0px rgba(0, 0, 0, 0.18);
    align-self: center;
}
.widget-table-two .table tr > td:nth-last-child(2) .td-content {
    text-align: center;
}
.widget-table-two .table .td-content .badge {
    transform: none;
    border: 0;
}
.widget-table-two .table tr .td-content .outline-badge-dark {
    background-color: #acb0c3;
}
.widget-table-two .table tr .td-content .outline-badge-info {
    color: #2196f3;
    background-color: #bae7ff;
}
.widget-table-two .table tr .td-content .outline-badge-danger {
    background-color: #ffe1e2;
}

/*
    ===========================
        Top Selling Product
    ===========================
*/
.widget-table-three {
    position: relative;
}
.widget-table-three h5 {
    font-size: 19px;
    margin-bottom: 20px;
}
.widget-table-three .widget-content {
    background: transparent;
}
.widget-table-three .table {
    border-collapse: separate;
    border-spacing: 0 5px;
    margin-bottom: 0;
}
.widget-table-three .table > thead > tr > th {
    text-transform: initial;
    font-weight: 600;
    border-top: none;
    background: rgba(186, 231, 255, 0.34);
    border-right: none;
    border-left: none;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
    padding: 10px 0 10px 15px;
}
.widget-table-three .table > thead > tr > th:first-child .th-content {
    margin-left: 10px;
}
.widget-table-three .table > thead > tr > th:last-child .th-content {
    padding: 0 15px 0 0;
    width: 84%;
    margin: 0 auto;
}
.widget-table-three .table > thead > tr > th:first-child {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}
.widget-table-three .table > thead > tr > th:last-child {
    border-bottom-right-radius: 6px;
    padding-left: 0;
    border-top-right-radius: 6px;
}
.widget-table-three .table > thead > tr > th .th-content {
    color: #515365;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
}
.widget-table-three .table > tbody > tr {
    background: transparent;
}
.widget-table-three .table > tbody > tr > td {
    border-top: none;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 0;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.widget-table-three .table > tbody > tr > td .td-content {
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 1px;
    color: #515365;
}
.widget-table-three .table > tbody > tr:hover > td .td-content {
    color: #3b3f5c;
}
.widget-table-three .table > tbody > tr > td:first-child {
    border-top-left-radius: 6px;
    padding: 10px 0px 10px 15px;
    border-bottom-left-radius: 6px;
}
.widget-table-three .table > tbody > tr > td:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.widget-table-three .table > tbody > tr > td:last-child .td-content {
    padding: 0 15px 0 0;
    width: 50%;
    margin: 0 auto;
}
.widget-table-three .table tr > td:nth-last-child(2) .td-content {
    padding: 0 0 0 0;
    width: 50%;
    margin: 0 auto;
}
.widget-table-three .table .td-content .discount-pricing {
    padding: 10px 0 10px 15px;
}
.widget-table-three .table .td-content.product-name {
    color: #515365;
    letter-spacing: 1px;
    display: flex;
}
.widget-table-three .table .td-content.product-name .prd-name {
    font-weight: 700;
    margin-bottom: 0;
    font-size: 13px;
}
.widget-table-three .table tr:hover .td-content.product-name .prd-name {
    color: #888ea8;
}
.widget-table-three .table .td-content.product-name .prd-category {
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.26);
}
.widget-table-three .table .td-content img {
    width: 35px;
    height: 35px;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    margin-right: 10px;
    padding: 2px;
    box-shadow: 1px 1px 16px 0px rgba(0, 0, 0, 0.18);
    align-self: center;
}
.widget-table-three .table .td-content .pricing {
    padding: 10px 0 10px 15px;
}
.widget-table-three .table .td-content .tag {
    background: transparent;
    transform: none;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 2px 5px;
    border-radius: 6px;
}
.widget-table-three .table .td-content .tag-primary {
    color: #4361ee;
    border: 1px dashed #4361ee;
    background: #c2d5ff;
}
.widget-table-three .table .td-content .tag-success {
    color: #009688;
    border: 1px dashed #009688;
    background: #e6ffbf;
}
.widget-table-three .table .td-content .tag-danger {
    color: #e7515a;
    border: 1px dashed #e7515a;
    background: #ffe1e2;
}
.widget-table-three .table .td-content a {
    position: relative;
    padding: 0;
    font-size: 13px;
    background: transparent;
    transform: none;
    letter-spacing: 1px;
}
.widget-table-three .table .td-content a svg.feather-chevrons-right {
    width: 15px;
    height: 15px;
    position: absolute;
    left: -20px;
    top: 1px;
}

/*
    ====================
        Media Object
    ====================
*/
@media (max-width: 1430px) and (min-width: 1200px) {
    /*
      ===========================
          Top Selling Product
      ===========================
  */
    .widget-table-three .table .td-content img {
        display: block;
    }
}

@media (max-width: 767px) {
    .widget-notification-two button {
        display: none;
    }
}

@media (max-width: 575px) {
    /*
      ==================
          Total Sales
      ==================
  */
    .widget-two .w-chart {
        position: inherit;
    }
    /*
      ========================
          Recent Activities
      ========================
  */
    .widget-activity-one .mt-container {
        height: auto;
    }
    /*
      ===========================
          Top Selling Product
      ===========================
  */
    .widget-table-two .table > thead > tr > th {
        padding-right: 15px;
    }
    .widget-table-two .table > tbody > tr > td {
        border-top: none;
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 12px;
        padding-left: 12px;
    }
    .widget-table-two .table .td-content.customer-name {
        color: #515365;
        text-align: center;
    }
    .widget-table-two .table .td-content.product-brand {
        text-align: center;
    }
    .widget-table-two .table .td-content img {
        display: block;
        margin: 0 auto 5px auto;
    }
    /*
      ===========================
          Top Selling Product
      ===========================
  */
    .widget-table-three .table > thead > tr > th {
        padding-right: 15px;
    }
    .widget-table-three .table > tbody > tr > td {
        border-top: none;
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 12px;
        padding-left: 12px;
    }
}

/*
    ====================
        Media Object
    ====================
*/
@media (max-width: 1359px) and (min-width: 1200px) {
    /*
      ===========================
          Top Selling Product
      ===========================
  */
    .widget-account-invoice-three .widget-heading {
        padding: 24px 15px 63px 15px;
    }
    .widget-account-invoice-three .widget-amount .w-a-info {
        padding: 10px 9px;
        width: 44%;
    }
    .widget-account-invoice-three .widget-amount .w-a-info.funds-received {
        margin-right: 1px;
    }
    .widget-account-invoice-three .invoice-list .inv-action a {
        font-size: 12px;
        padding: 5px 6px;
    }
}

@media (max-width: 575px) {
    /*
      ==================
          Total Sales
      ==================
  */
    .widget-two .w-chart {
        position: inherit;
    }
    /*
      ========================
          Recent Activities
      ========================
  */
    .widget-activity-one .mt-container {
        height: auto;
    }
    /*
      ===========================
              Wallet 
      ===========================
  */
    .widget-account-invoice-three .widget-heading {
        padding: 24px 22px 63px 22px;
    }
    .widget-account-invoice-three .widget-amount .w-a-info {
        padding: 12px 12px;
    }
    .widget-account-invoice-three .widget-heading h5 {
        font-size: 25px;
    }
    /*
      ===========================
          Top Selling Product
      ===========================
  */
    .widget-table-three .table > thead > tr > th {
        padding-right: 15px;
    }
    .widget-table-three .table > tbody > tr > td {
        border-top: none;
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 12px;
        padding-left: 12px;
    }
}

/*
    =====================
        Media Query
    =====================
*/
@media (max-width: 1249px) {
    .widget-five .widget-content .meta-info .avatar {
        margin-left: -4px;
    }
    .widget-five .widget-content .meta-info .avatar.more-group {
        margin-right: -6px;
    }
    .widget-five:hover .widget-content .meta-info .avatar.more-group {
        margin-right: 6px;
    }
}

/*
    =====================
        User Analytics
    =====================
*/
.widget.widget-activity-three {
    position: relative;
    background: #fff;
    border-radius: 8px;
    height: 100%;
    padding: 0;
}
.widget.widget-activity-three .widget-heading {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #e0e6ed;
    padding: 20px 20px;
    padding-bottom: 20px;
}
.widget.widget-activity-three
    .widget-heading
    .task-action
    .dropdown-toggle
    svg {
    color: #888ea8;
    width: 19px;
    height: 19px;
}

/*
    =====================
        Unique Visitors
    =====================
*/
/*
    =========================
        Organic Vs Direct
    =========================
*/
/*
    =====================
        Account Info
    =====================
*/
.widget-account-invoice-three {
    padding: 0 !important;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    background: #fdfdfd;
}
.widget-account-invoice-three .widget-heading {
    padding: 24px 30px 63px 30px;
    border-radius: 25px;
    background-color: #6b0f1a;
    background-image: linear-gradient(315deg, #6b0f1a 0%, #1b55e2 74%);
    min-height: 213px;
    height: 100%;
}
.widget-account-invoice-three .widget-heading .wallet-usr-info {
    display: flex;
    justify-content: space-between;
}
.widget-account-invoice-three .widget-heading .wallet-usr-info span {
    display: inline-block;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 5px 12px 5px 6px;
    border-radius: 21px;
    position: relative;
    font-size: 13px;
    letter-spacing: 1px;
    cursor: pointer;
}
.widget-account-invoice-three .widget-heading .add {
    align-self: center;
}
.widget-account-invoice-three .widget-heading .add span {
    padding: 6px;
    border-radius: 12px;
}
.widget-account-invoice-three .widget-heading span img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.18);
}
.widget-account-invoice-three .widget-heading .wallet-balance {
    display: flex;
    justify-content: space-between;
    margin-top: 37px;
}
.widget-account-invoice-three .widget-heading .wallet-balance p {
    margin-bottom: 0;
    align-self: center;
    font-size: 19px;
    color: #fff;
}
.widget-account-invoice-three .widget-heading h5 {
    font-size: 28px;
    color: #fff;
    margin-top: 0;
    font-weight: 500;
}
.widget-account-invoice-three .widget-heading h5 .w-currency {
    color: #bfc9d4;
    display: inline-block;
}
.widget-account-invoice-three .widget-amount {
    text-align: center;
    margin-top: -48px;
}
.widget-account-invoice-three .widget-amount .w-a-info {
    display: inline-block;
    padding: 12px 23px;
    background: #fff;
    text-align: left;
    border-radius: 6px;
    width: 40%;
    -webkit-box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.06);
}
.widget-account-invoice-three .widget-amount .w-a-info.funds-received {
    margin-right: 15px;
}
.widget-account-invoice-three .widget-amount span {
    font-weight: 600;
    color: #151516;
}
.widget-account-invoice-three .widget-amount .w-a-info svg {
    width: 18px;
    height: 18px;
    float: right;
}
.widget-account-invoice-three .widget-amount .w-a-info.funds-received svg {
    vertical-align: top;
    color: #009688;
}
.widget-account-invoice-three .widget-amount .w-a-info.funds-spent svg {
    vertical-align: bottom;
    color: #e7515a;
}
.widget-account-invoice-three .widget-amount p {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0;
    text-align: center;
    background: #ebedf2;
    border-radius: 6px;
    margin-top: 10px;
    padding: 3px 0;
    color: #515365;
}
.widget-account-invoice-three .widget-content {
    padding: 20px;
    margin-top: 12px;
}
.widget-account-invoice-three .widget-content .bills-stats {
    margin-bottom: 24px;
}
.widget-account-invoice-three .widget-content .bills-stats span {
    display: inline-block;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 12px 4px 20px;
    border-radius: 21px;
    position: relative;
    font-size: 12px;
    letter-spacing: 1px;
    background-color: #1b2e4b;
}
.widget-account-invoice-three .widget-content .bills-stats span:before {
    content: "";
    position: absolute;
    height: 6px;
    width: 6px;
    background: white;
    border-radius: 50%;
    left: 9px;
    top: 9.5px;
}
.widget-account-invoice-three .invoice-list .inv-detail {
    margin-bottom: 24px;
}
.widget-account-invoice-three
    .invoice-list
    [class*="info-detail-"]:not(.info-sub) {
    display: flex;
    justify-content: space-between;
}
.widget-account-invoice-three
    .invoice-list
    [class*="info-detail-"]:not(.info-sub)
    p {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 13px;
    align-self: center;
}
.widget-account-invoice-three
    .invoice-list
    [class*="info-detail-"]:not(.info-sub)
    p
    span.w-currency {
    font-size: 16px;
    color: #888ea8;
    font-weight: 500;
}
.widget-account-invoice-three
    .invoice-list
    [class*="info-detail-"]:not(.info-sub)
    p
    span.bill-amount {
    font-size: 14px;
    color: #030305;
    font-weight: 700;
}
.widget-account-invoice-three .invoice-list .inv-action {
    text-align: center;
    display: flex;
    justify-content: space-around;
}
.widget-account-invoice-three .invoice-list .inv-action a {
    transform: none;
    border: none;
    font-size: 13px;
    padding: 6px 11px;
    font-weight: 600;
    letter-spacing: 1px;
}
.widget-account-invoice-three .invoice-list .inv-action a.view-details {
    color: #805dca !important;
    background: rgba(92, 26, 195, 0.17);
    border: none !important;
}
.widget-account-invoice-three .invoice-list .inv-action a.pay-now {
    color: #009688 !important;
    background: #00968830;
    border: none !important;
}

/*
    =====================
        Task Indicator
    =====================
*/
.widget.widget-six {
    background: #fff;
    padding: 20px 0px;
    height: 100%;
}

.widget-six .widget-heading {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid #e0e6ed;
    margin-bottom: 30px;
}
.widget-six .widget-heading .task-info {
    display: flex;
}
.widget-six .widget-heading .usr-avatar {
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background-color: #dccff7;
    color: #805dca;
}
.widget-six .widget-heading .usr-avatar span {
    font-size: 13px;
    font-weight: 700;
}
.widget-six .widget-heading .w-title {
    align-self: center;
}
.widget-six .widget-heading .w-title h5 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
}
.widget-six .widget-heading .w-title span {
    font-size: 12px;
    font-weight: 500;
}
.widget-six .widget-heading .task-action .dropdown a svg {
    color: #888ea8;
    width: 19px;
    height: 19px;
}
.widget-six .widget-heading .task-action .dropdown-menu {
    transform: translate3d(-141px, 0, 0px);
}

.widget-six .widget-content {
    padding: 0 20px;
}
.widget-six .widget-content p {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 14px;
    color: #888ea8;
}
.widget-six .mt-container {
    position: relative;
    height: 207px;
    overflow: auto;
    padding: 15px 12px 0 12px;
}
.widget-six .widget-content .progress-data {
    margin-top: 19px;
}
.widget-six .widget-content .progress-data .progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
.widget-six .widget-content .progress-data .task-count {
    display: flex;
}
.widget-six .widget-content .progress-data .task-count svg {
    align-self: center;
    margin-right: 6px;
    width: 15px;
    height: 15px;
    color: #009688;
    fill: rgba(199, 230, 228, 0.46);
}
.widget-six .widget-content .progress-data .task-count p {
    align-self: center;
    font-weight: 700;
    font-size: 12px;
    color: #515365;
}
.widget-six .widget-content .progress-data .progress-stats p {
    font-weight: 600;
    color: #4361ee;
    font-size: 15px;
}
.widget-six .widget-content .progress-data .progress {
    border-radius: 30px;
    height: 12px;
}
.widget-six .widget-content .progress-data .progress .progress-bar {
    margin: 3px;
    background-color: #60dfcd;
    background-image: linear-gradient(315deg, #60dfcd 0%, #1e9afe 74%);
}
.widget-six .widget-content .meta-info {
    display: flex;
    justify-content: space-between;
}
.widget-six .widget-content .meta-info .avatar--group {
    display: inline-flex;
}
.widget-six .widget-content .meta-info .avatar {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 36px;
    font-size: 1rem;
    transition: 0.5s;
}
.widget-six .widget-content .meta-info .avatar.more-group {
    margin-right: 5px;
    opacity: 0;
}

.widget-six:hover .widget-content .meta-info .avatar.more-group {
    opacity: 1;
}

.widget-six:hover .widget-content .meta-info .avatar:not(:first-child) {
    margin-left: -0.75rem;
}

.widget-six .widget-content .meta-info .avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border: 3px solid #ffffff;
    border-radius: 12px;
}

.widget-six .widget-content .meta-info .avatar .avatar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #bfc9d4;
    color: #fff;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

.widget-six .widget-content .meta-info .due-time {
    align-self: center;
}
.widget-six .widget-content .meta-info .due-time p {
    font-weight: 600;
    font-size: 11px;
    padding: 4px 6px 4px 6px;
    background: #ffe1e2;
    border-radius: 30px;
    color: #e7515a;
}
.widget-six .widget-content .meta-info .due-time p svg {
    width: 14px;
    height: 15px;
    vertical-align: text-bottom;
}

/*
    ========================
        Recent Activities
    ========================
*/
.widget.widget-activity-five {
    position: relative;
    background: #fff;
    border-radius: 8px;
    height: 100%;
    padding: 0;
}

.widget-activity-five .widget-heading .task-info {
    display: flex;
}
.widget.widget-activity-five .widget-heading {
    display: flex;
    justify-content: space-between;
    /* border-bottom: 1px dashed #e0e6ed; */
    border-bottom: 1px solid #e0e6ed;
    padding: 20px 20px;
    padding-bottom: 20px;
}

.widget.widget-activity-five .widget-heading h5 {
    font-size: 17px;
    display: block;
    color: #0e1726;
    font-weight: 600;
    margin-bottom: 0;
}
.widget-activity-five .widget-heading .w-title {
    align-self: center;
}
.widget-activity-five .widget-heading .w-title h5 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
}
.widget-activity-five .widget-heading .w-title span {
    font-size: 12px;
    font-weight: 500;
}
.widget.widget-activity-five .widget-heading .task-action svg {
    color: #888ea8;
    width: 19px;
    height: 19px;
}
.widget.widget-activity-five .widget-heading .task-action .dropdown-menu {
    transform: translate3d(-141px, 0, 0px);
}

.widget-activity-five .widget-content {
    padding: 12px 10px 21px 20px;
}

.widget-activity-five .w-shadow-top {
    display: block;
    position: absolute;
    z-index: 2;
    height: 17px;
    width: 97%;
    pointer-events: none;
    margin-top: -10px;
    left: 2px;
    -webkit-filter: blur(9px);
    filter: blur(9px);
    background: -webkit-linear-gradient(
        180deg,
        #060818 44%,
        #060818eb 73%,
        #2c303c00
    );
    background: linear-gradient(180deg, #ffffff 44%, #ffffffde 73%, #2c303c00);
}

.widget-activity-five .w-shadow-bottom {
    display: block;
    position: absolute;
    z-index: 2;
    height: 17px;
    width: 97%;
    pointer-events: none;
    margin-top: -3px;
    left: 2px;
    -webkit-filter: blur(9px);
    filter: blur(9px);
    background: -webkit-linear-gradient(
        180deg,
        #ffffff 44%,
        #ffffffde 73%,
        #2c303c00
    );
    background: linear-gradient(180deg, #ffffff 44%, #ffffffde 73%, #2c303c00);
}

.widget-activity-five .mt-container {
    position: relative;
    height: 207px;
    overflow: auto;
    padding: 15px 12px 0 12px;
}

.widget-activity-five .timeline-line .item-timeline {
    display: flex;
    margin-bottom: 35px;
}
.widget-activity-five .timeline-line .item-timeline .t-dot {
    position: relative;
}
.widget-activity-five .timeline-line .item-timeline .t-dot div {
    background: transparent;
    border-radius: 50%;
    padding: 5px;
    margin-right: 11px;
    display: flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}
.widget-activity-five .timeline-line .item-timeline .t-dot div.t-primary {
    background-color: rgba(194, 213, 255, 0.5);
}
.widget-activity-five .timeline-line .item-timeline .t-dot div.t-primary svg {
    color: #4361ee;
}
.widget-activity-five .timeline-line .item-timeline .t-dot div.t-secondary {
    background-color: rgba(220, 207, 247, 0.55);
}
.widget-activity-five .timeline-line .item-timeline .t-dot div.t-secondary svg {
    color: #805dca;
}
.widget-activity-five .timeline-line .item-timeline .t-dot div.t-success {
    background-color: rgba(199, 230, 228, 0.62);
}
.widget-activity-five .timeline-line .item-timeline .t-dot div.t-success svg {
    color: #009688;
}
.widget-activity-five .timeline-line .item-timeline .t-dot div.t-danger {
    background-color: rgba(255, 225, 226, 0.6);
}
.widget-activity-five .timeline-line .item-timeline .t-dot div.t-danger svg {
    color: #e7515a;
}
.widget-activity-five .timeline-line .item-timeline .t-dot div.t-warning {
    background-color: rgba(255, 236, 203, 0.51);
}
.widget-activity-five .timeline-line .item-timeline .t-dot div.t-warning svg {
    color: #e2a03f;
}
.widget-activity-five .timeline-line .item-timeline .t-dot div.t-dark {
    background-color: rgba(172, 176, 195, 0.51);
}
.widget-activity-five .timeline-line .item-timeline .t-dot div.t-dark svg {
    color: #3b3f5c;
}
.widget-activity-five .timeline-line .item-timeline .t-dot svg {
    color: #fff;
    height: 15px;
    width: 15px;
    align-self: center;
}
.widget-activity-five .timeline-line .item-timeline .t-content {
    width: 100%;
}
.widget-activity-five .timeline-line .item-timeline .t-content .t-uppercontent {
    display: flex;
    justify-content: space-between;
}
.widget-activity-five
    .timeline-line
    .item-timeline
    .t-content
    .t-uppercontent
    h5 {
    font-size: 14px;
    letter-spacing: 0;
    font-weight: 600;
    margin-bottom: 0;
}
.widget-activity-five
    .timeline-line
    .item-timeline
    .t-content
    .t-uppercontent
    span {
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 600;
    color: #009688;
}
.widget-activity-five .timeline-line .item-timeline .t-content p {
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 600;
    color: #888ea8;
}
.widget-activity-five .timeline-line .item-timeline .t-content p a {
    font-weight: 700;
}
.widget-activity-five .timeline-line .item-timeline .t-dot:after {
    content: "";
    position: absolute;
    border-width: 1px;
    border-style: solid;
    left: 39%;
    transform: translateX(-50%);
    border-color: #bfc9d4;
    width: 0;
    height: auto;
    top: 45px;
    bottom: -23px;
    border-right-width: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    border-radius: 0;
}
.widget-activity-five .timeline-line .item-timeline:last-child .t-dot:after {
    display: none;
}

/*
    ====================
        Order Summary
    ====================
*/
.widget-seven {
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    height: 100%;
    border: 1px solid #f1f2f3;
}
.widget-seven .widget-heading {
    display: flex;
    margin-bottom: 25px;
    justify-content: space-between;
}
.widget-seven .widget-heading .task-action .dropdown-toggle svg {
    color: #888ea8;
    width: 19px;
    height: 19px;
}
.widget-seven .widget-heading .task-action .dropdown-menu {
    transform: translate3d(-141px, 0, 0px);
}
.widget-seven .widget-content {
    font-size: 17px;
}
.widget-seven .widget-content .summary-list {
    position: relative;
    padding: 15px;
    background: rgba(224, 230, 237, 0.4);
    border-radius: 6px;
}
.widget-seven .widget-content .summary-list.summary-income {
    background: rgba(220, 207, 247, 0.34);
}
.widget-seven .widget-content .summary-list.summary-profit {
    background: rgba(186, 231, 255, 0.34);
}
.widget-seven .widget-content .summary-list.summary-expenses {
    background: rgba(255, 236, 203, 0.34);
}
.widget-seven .widget-content .summary-list .summery-info {
    display: flex;
    margin-bottom: 0;
}
.widget-seven .widget-content .summary-list:not(:last-child) {
    margin-bottom: 9px;
}
.widget-seven .widget-content .w-icon {
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 35px;
    margin-right: 12px;
}
.widget-seven .widget-content .w-icon svg {
    display: block;
    width: 22px;
    height: 22px;
    stroke-width: 1px;
}
.widget-seven .widget-content .summary-list:nth-child(1) .w-icon svg {
    color: #805dca;
    fill: rgba(92, 26, 195, 0.16);
}
.widget-seven .widget-content .summary-list:nth-child(2) .w-icon svg {
    color: #2196f3;
    fill: rgba(33, 150, 243, 0.16);
}
.widget-seven .widget-content .summary-list:nth-child(3) .w-icon svg {
    color: #e2a03f;
    fill: rgba(226, 160, 63, 0.16);
}
.widget-seven .widget-content .w-summary-details {
    width: 100%;
    align-self: center;
}
.widget-seven .widget-content .w-summary-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1px;
}
.widget-seven .widget-content .w-summary-info h6 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    color: #888ea8;
}
.widget-seven .widget-content .w-summary-info .summary-count {
    display: block;
    font-size: 16px;
    margin-top: 4px;
    font-weight: 600;
    color: #515365;
}
.widget-seven .widget-content .w-summary-info .summary-average {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
    color: #888ea8;
}
.widget-seven
    .widget-content
    .summary-list.summary-income
    .w-summary-info
    .summary-average {
    color: #805dca;
}
.widget-seven
    .widget-content
    .summary-list.summary-profit
    .w-summary-info
    .summary-average {
    color: #2196f3;
}
.widget-seven
    .widget-content
    .summary-list.summary-expenses
    .w-summary-info
    .summary-average {
    color: #e2a03f;
}

/*
    =====================
        Media Query
    =====================
*/
@media (max-width: 1199px) {
    .widget.widget-activity-two .widget-heading {
        margin-bottom: 21px;
    }
    .widget-activity-two .mt-container {
        position: relative;
        height: 177px;
    }
}

@media (max-width: 575px) {
    .widget-card-four .w-content-img img {
        height: 94px;
    }
    .widget-notification-one .noti-action a span {
        display: none;
    }
    .widget-statistic .col-12:not(:last-child) .widget-one_hybrid {
        margin-bottom: 40px;
    }
}

/*
    ===========================
    /|\                     /|\
    /|\                     /|\
    /|\    Sales Section    /|\
    /|\                     /|\
    /|\                     /|\
    ===========================
*/
/*
    ==================
        Widget
    ==================
*/
.widget-one {
    position: relative;
    padding: 0;
    border-radius: 8px;
    height: 100%;
    border: none;
    background-color: #fff;
}
.widget-one .widget-content {
    font-size: 17px;
}
.widget-one .w-numeric-value {
    position: absolute;
    display: flex;
    color: #fff;
    font-weight: 500;
    padding: 20px;
    width: 100%;
    justify-content: space-between;
}
.widget-one .w-numeric-value .w-icon {
    display: inline-block;
    background: #ffe1e2;
    padding: 13px 12px;
    border-radius: 12px;
    display: inline-flex;
    align-self: center;
    height: 45px;
    width: 45px;
    margin-right: 14px;
}
.widget-one .w-numeric-value svg {
    display: block;
    color: #e7515a;
    width: 20px;
    height: 20px;
    fill: rgba(231, 81, 90, 0.49);
}
.widget-one .w-numeric-value .w-value {
    font-size: 26px;
    display: block;
    color: #e7515a;
    font-weight: 600;
    margin-bottom: -9px;
    text-align: right;
}
.widget-one .w-numeric-value .w-numeric-title {
    font-size: 13px;
    color: #e7515a;
    letter-spacing: 1px;
    font-weight: 600;
}
.widget-one .apexcharts-canvas svg {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.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-input { position: absolute; z-index: -1; opacity: 0; }
.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: 4px;
}
.new-control.new-checkbox>input.new-control-input:disabled~span.new-control-indicator {
    opacity: 0.6;
    background-color: #e0e6ed;
    border: 1px solid #bfc9d4;
}
.new-control.new-checkbox { cursor: pointer; }
.new-control.new-checkbox.disabled { cursor: default; }
.new-control.new-checkbox>input:checked~span.new-control-indicator { background: #888ea8; }
.new-control.new-checkbox>input:checked~span.new-control-indicator:after { display: block; }
.new-control.new-checkbox span.new-control-indicator:after { border: solid #fff; }
.new-control.new-checkbox span.new-control-indicator:after {
    top: 50%;
    left: 50%;
    margin-left: -2px;
    margin-top: -5px;
    width: 4px;
    height: 8px;
    border-width: 0 2px 2px 0!important;
    transform: rotate(45deg);
    content: '';
    position: absolute;
    display: none;
    margin-left: -2px;
    margin-top: -5px;
    width: 4px;
    height: 8px;
    height: 8px;
}

/*rounded checkbox*/

.new-checkbox-rounded span.new-control-indicator { border-radius: 50%!important; }

/*  line through colors   */
.new-control.new-checkbox.new-checkbox-text>input:checked~span.new-chk-content,
.new-control.new-checkbox.new-checkbox-text.checkbox-outline-default>input:checked~span.new-chk-content { color: #888ea8; }

.new-control.new-checkbox.new-checkbox-text.checkbox-primary>input:checked~span.new-chk-content,
.new-control.new-checkbox.new-checkbox-text.checkbox-outline-primary>input:checked~span.new-chk-content { color: #4361ee; }

.new-control.new-checkbox.new-checkbox-text.checkbox-success>input:checked~span.new-chk-content,
.new-control.new-checkbox.new-checkbox-text.checkbox-outline-success>input:checked~span.new-chk-content { color: #1abc9c; }

.new-control.new-checkbox.new-checkbox-text.checkbox-info>input:checked~span.new-chk-content,
.new-control.new-checkbox.new-checkbox-text.checkbox-outline-info>input:checked~span.new-chk-content { color: #2196f3; }

.new-control.new-checkbox.new-checkbox-text.checkbox-warning>input:checked~span.new-chk-content,
.new-control.new-checkbox.new-checkbox-text.checkbox-outline-warning>input:checked~span.new-chk-content { color: #e2a03f; }

.new-control.new-checkbox.new-checkbox-text.checkbox-danger>input:checked~span.new-chk-content,
.new-control.new-checkbox.new-checkbox-text.checkbox-outline-danger>input:checked~span.new-chk-content { color: #e7515a; }

.new-control.new-checkbox.new-checkbox-text.checkbox-secondary>input:checked~span.new-chk-content,
.new-control.new-checkbox.new-checkbox-text.checkbox-outline-secondary>input:checked~span.new-chk-content { color: #805dca; }

.new-control.new-checkbox.new-checkbox-text.checkbox-dark>input:checked~span.new-chk-content,
.new-control.new-checkbox.new-checkbox-text.checkbox-outline-dark>input:checked~span.new-chk-content { color: #3b3f5c; }

/*  Color   */
.new-control.new-checkbox.checkbox-primary>input:checked~span.new-control-indicator { background: #4361ee; }
.new-control.new-checkbox.checkbox-success>input:checked~span.new-control-indicator { background: #1abc9c; }
.new-control.new-checkbox.checkbox-info>input:checked~span.new-control-indicator { background: #2196f3; }
.new-control.new-checkbox.checkbox-warning>input:checked~span.new-control-indicator { background: #e2a03f; }
.new-control.new-checkbox.checkbox-danger>input:checked~span.new-control-indicator { background: #e7515a; }
.new-control.new-checkbox.checkbox-secondary>input:checked~span.new-control-indicator { background: #805dca; }
.new-control.new-checkbox.checkbox-dark>input:checked~span.new-control-indicator { background: #3b3f5c; }

/*   Outline checkbox   */
.new-control.new-checkbox[class*="checkbox-outline-"]>input:checked~span.new-control-indicator { background-color: transparent; }
.new-control.new-checkbox.checkbox-outline-default>input:checked~span.new-control-indicator { border: 2px solid #888ea8; }
.new-control.new-checkbox.checkbox-outline-primary>input:checked~span.new-control-indicator { border: 2px solid #4361ee; }
.new-control.new-checkbox.checkbox-outline-success>input:checked~span.new-control-indicator { border: 2px solid #1abc9c; }
.new-control.new-checkbox.checkbox-outline-info>input:checked~span.new-control-indicator { border: 2px solid #2196f3; }
.new-control.new-checkbox.checkbox-outline-warning>input:checked~span.new-control-indicator { border: 2px solid #e2a03f; }
.new-control.new-checkbox.checkbox-outline-danger>input:checked~span.new-control-indicator { border: 2px solid #e7515a; }
.new-control.new-checkbox.checkbox-outline-secondary>input:checked~span.new-control-indicator { border: 2px solid #805dca; }
.new-control.new-checkbox.checkbox-outline-dark>input:checked~span.new-control-indicator { border: 2px solid #3b3f5c; }

.new-control.new-checkbox.checkbox-outline-default>input:checked~span.new-control-indicator:after { border-color: #888ea8; }
.new-control.new-checkbox.checkbox-outline-primary>input:checked~span.new-control-indicator:after { border-color: #4361ee; }
.new-control.new-checkbox.checkbox-outline-success>input:checked~span.new-control-indicator:after { border-color: #1abc9c; }
.new-control.new-checkbox.checkbox-outline-info>input:checked~span.new-control-indicator:after { border-color: #2196f3; }
.new-control.new-checkbox.checkbox-outline-warning>input:checked~span.new-control-indicator:after { border-color: #e2a03f; }
.new-control.new-checkbox.checkbox-outline-danger>input:checked~span.new-control-indicator:after { border-color: #e7515a; }
.new-control.new-checkbox.checkbox-outline-secondary>input:checked~span.new-control-indicator:after { border-color: #805dca; }
.new-control.new-checkbox.checkbox-outline-dark>input:checked~span.new-control-indicator:after { border-color: #3b3f5c; }


/*----------Theme Radio---------*/

.new-control.new-radio .new-control-indicator {
    position: absolute;
    top: 2px;
    left: 0;
    display: block;
    width: 16px;
    height: 16px;
    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: 50%;
}
.new-control.new-radio>input.new-control-input:disabled~span.new-control-indicator {
    opacity: 0.6;
    background-color: #e0e6ed;
    border: 1px solid #bfc9d4;
}
.new-control.new-radio { cursor: pointer; }
.new-control.new-radio.disabled { cursor: default; }
.new-control.new-radio>input:checked~span.new-control-indicator { background: #888ea8; }
.new-control.new-radio span.new-control-indicator:after {
    top: 50%;
    left: 50%;
    margin-left: -3px;
    margin-top: -3px;
    content: '';
    position: absolute;
    display: none;
    border-radius: 50%;
    height: 6px;
    width: 6px;
    background-color: #fff;
}

/*square radio*/
.new-control.new-radio.square-radio .new-control-indicator { border-radius: 0; }
.new-control.new-radio.square-radio span.new-control-indicator:after { border-radius: 0; }

/*  Color   */
.new-control.new-radio.radio-primary>input:checked~span.new-control-indicator { background: #4361ee; }
.new-control.new-radio.radio-success>input:checked~span.new-control-indicator { background: #1abc9c; }
.new-control.new-radio.radio-info>input:checked~span.new-control-indicator { background: #2196f3; }
.new-control.new-radio.radio-warning>input:checked~span.new-control-indicator { background: #e2a03f; }
.new-control.new-radio.radio-danger>input:checked~span.new-control-indicator { background: #e7515a; }
.new-control.new-radio.radio-secondary>input:checked~span.new-control-indicator { background: #805dca; }
.new-control.new-radio.radio-dark>input:checked~span.new-control-indicator { background: #3b3f5c; }

/*   Outline Radio   */
.new-control.new-radio[class*="radio-classic-"]>input:checked~span.new-control-indicator { background-color: transparent; }
.new-control.new-radio.radio-classic-default>input:checked~span.new-control-indicator { border: 3px solid #888ea8; }
.new-control.new-radio.radio-classic-primary>input:checked~span.new-control-indicator { border: 3px solid #4361ee; }
.new-control.new-radio.radio-classic-success>input:checked~span.new-control-indicator { border: 3px solid #1abc9c; }
.new-control.new-radio.radio-classic-info>input:checked~span.new-control-indicator { border: 3px solid #2196f3; }
.new-control.new-radio.radio-classic-warning>input:checked~span.new-control-indicator { border: 3px solid #e2a03f; }
.new-control.new-radio.radio-classic-danger>input:checked~span.new-control-indicator { border: 3px solid #e7515a; }
.new-control.new-radio.radio-classic-secondary>input:checked~span.new-control-indicator { border: 3px solid #805dca; }
.new-control.new-radio.radio-classic-dark>input:checked~span.new-control-indicator { border: 3px solid #3b3f5c; }

.new-control.new-radio.radio-classic-default>input:checked~span.new-control-indicator:after { background-color: #888ea8; }
.new-control.new-radio.radio-classic-primary>input:checked~span.new-control-indicator:after { background-color: #4361ee; }
.new-control.new-radio.radio-classic-success>input:checked~span.new-control-indicator:after { background-color: #1abc9c; }
.new-control.new-radio.radio-classic-info>input:checked~span.new-control-indicator:after { background-color: #2196f3; }
.new-control.new-radio.radio-classic-warning>input:checked~span.new-control-indicator:after { background-color: #e2a03f; }
.new-control.new-radio.radio-classic-danger>input:checked~span.new-control-indicator:after { background-color: #e7515a; }
.new-control.new-radio.radio-classic-secondary>input:checked~span.new-control-indicator:after { background-color: #805dca; }
.new-control.new-radio.radio-classic-dark>input:checked~span.new-control-indicator:after { background-color: #3b3f5c; }

/*  line through colors   */
.new-control.new-radio.new-radio-text>input:checked~span.new-radio-content,
.new-control.new-radio.new-radio-text.radio-classic-default>input:checked~span.new-radio-content { color: #888ea8; }

.new-control.new-radio.new-radio-text.radio-primary>input:checked~span.new-radio-content,
.new-control.new-radio.new-radio-text.radio-classic-primary>input:checked~span.new-radio-content { color: #4361ee; }

.new-control.new-radio.new-radio-text.radio-success>input:checked~span.new-radio-content,
.new-control.new-radio.new-radio-text.radio-classic-success>input:checked~span.new-radio-content { color: #1abc9c; }

.new-control.new-radio.new-radio-text.radio-info>input:checked~span.new-radio-content,
.new-control.new-radio.new-radio-text.radio-classic-info>input:checked~span.new-radio-content { color: #2196f3; }

.new-control.new-radio.new-radio-text.radio-warning>input:checked~span.new-radio-content,
.new-control.new-radio.new-radio-text.radio-classic-warning>input:checked~span.new-radio-content { color: #e2a03f; }

.new-control.new-radio.new-radio-text.radio-danger>input:checked~span.new-radio-content,
.new-control.new-radio.new-radio-text.radio-classic-danger>input:checked~span.new-radio-content { color: #e7515a; }

.new-control.new-radio.new-radio-text.radio-secondary>input:checked~span.new-radio-content,
.new-control.new-radio.new-radio-text.radio-classic-secondary>input:checked~span.new-radio-content { color: #805dca; }

.new-control.new-radio.new-radio-text.radio-dark>input:checked~span.new-radio-content,
.new-control.new-radio.new-radio-text.radio-classic-dark>input:checked~span.new-radio-content { color: #3b3f5c; }

/* theme color */

.new-control.new-checkbox.new-checkbox-text.checkbox-theme>input:checked~span.new-chk-content,
.new-control.new-checkbox.new-checkbox-text.checkbox-outline-theme>input:checked~span.new-chk-content {
    color: var(--wrapper);
}

.new-control.new-checkbox.checkbox-theme>input:checked~span.new-control-indicator { background: var(--wrapper); }

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

.new-control.new-checkbox.checkbox-outline-theme>input:checked~span.new-control-indicator:after { border-color: var(--wrapper); }

.new-control.new-radio.radio-theme>input:checked~span.new-control-indicator { background: var(--wrapper); }

.new-control.new-radio.radio-classic-theme>input:checked~span.new-control-indicator { border: 3px solid var(--wrapper); }

.new-control.new-radio.radio-classic-theme>input:checked~span.new-control-indicator:after { background-color: var(--wrapper); }

.new-control.new-radio.new-radio-text.radio-theme>input:checked~span.new-radio-content,
.new-control.new-radio.new-radio-text.radio-classic-theme>input:checked~span.new-radio-content { color: var(--wrapper); }
.timeline-simple {
    margin-bottom: 45px;
    max-width: 1140px;
    margin-right: auto;
    margin-left: auto;
}

.timeline-simple h3 {
    font-size: 23px;
    font-weight: 600;
}

.timeline-simple p.timeline-title {
    position: relative;
    font-size: 19px;
    font-weight: 600;
    color: #1b55e2;
    margin-bottom: 28px;
}

.timeline-simple p.timeline-title:before {
    position: absolute;
    content: "";
    height: 2px;
    width: 70px;
    background: #1b55e2;
    border-radius: 50px;
    bottom: -2px;
    left: 15px;
}

.timeline-simple .timeline-list p.meta-update-day {
    margin-bottom: 24px;
    font-size: 16px;
    font-weight: 600;
    color: #888ea8;
}

.timeline-simple .timeline-list .timeline-post-content {
    display: flex;
}

.timeline-simple .timeline-list .timeline-post-content>div>div {
    margin-top: 28px;
}

.timeline-simple .timeline-list .timeline-post-content:not(:last-child)>div>div {
    margin-bottom: 70px;
}

.timeline-simple .timeline-list .timeline-post-content div.user-profile {
    position: relative;
    z-index: 2;
}

.timeline-simple .timeline-list .timeline-post-content div.user-profile:after {
    content: "";
    position: absolute;
    border-color: inherit;
    border-width: 2px;
    border-style: solid;
    top: 15px;
    left: 34%;
    transform: translateX(-50%);
    width: 0;
    height: auto;
    top: 48px;
    bottom: -15px;
    border-right-width: 0;
    border-top-width: 0;
    border-bottom-width: 0;
    border-radius: 0;
    z-index: -1;
    border-color: #ebedf2;
}

.timeline-simple .timeline-list .timeline-post-content div.user-profile img {
    width: 53px;
    height: 53px;
    border-radius: 50%;
    margin-right: 30px;
    -webkit-box-shadow: 0px 4px 9px 0px rgba(31, 45, 61, 0.31);
    box-shadow: 0px 4px 9px 0px rgba(31, 45, 61, 0.31);
}

.timeline-simple .timeline-list .timeline-post-content h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0;
    color: #1b55e2;
}

.timeline-simple .timeline-list .timeline-post-content svg {
    color: #888ea8;
    vertical-align: text-bottom;
    width: 21px;
    height: 21px;
}

.timeline-simple .timeline-list .timeline-post-content:hover svg {
    color: #1b55e2;
    fill: rgba(27, 85, 226, 0.239216);
}

.timeline-simple .timeline-list .timeline-post-content h6 {
    display: inline-block;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 11px;
}

.timeline-simple .timeline-list .timeline-post-content:hover h6 {
    color: #888ea8;
}

.timeline-simple .timeline-list .timeline-post-content p.post-text {
    padding-left: 50px;
    color: #888ea8;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.timeline-simple .timeline-list .timeline-post-content .post-contributers {
    padding-left: 31px;
}

.timeline-simple .timeline-list .timeline-post-content .post-contributers img {
    width: 38px;
    border-radius: 50%;
    margin-right: 7px;
    -webkit-box-shadow: 0px 6px 9px 2px rgba(31, 45, 61, 0.31);
    box-shadow: 1px 3px 7px 2px rgba(31, 45, 61, 0.31);
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
    cursor: pointer;
    margin-bottom: 5px;
}

.timeline-simple .timeline-list .timeline-post-content .post-contributers img:hover {
    -webkit-transform: translateY(-3px) scale(1.02);
    transform: translateY(-3px) scale(1.02);
    box-shadow: none;
}

.timeline-simple .timeline-list .timeline-post-content .post-gallery-img {
    padding-left: 31px;
}

.timeline-simple .timeline-list .timeline-post-content .post-gallery-img img {
    width: 20%;
    border-radius: 6px;
    -webkit-box-shadow: 0px 6px 9px 2px rgba(31, 45, 61, 0.31);
    box-shadow: 1px 3px 7px 2px rgba(31, 45, 61, 0.31);
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
    cursor: pointer;
}

.timeline-simple .timeline-list .timeline-post-content .post-gallery-img img:hover {
    -webkit-transform: translateY(-3px) scale(1.02);
    transform: translateY(-3px) scale(1.02);
    box-shadow: none;
}

.timeline-simple .timeline-list .timeline-post-content .post-gallery-img img:not(:last-child) {
    margin-right: 23px;
}

.timeline-simple .timeline-list .timeline-post-content div.user-profile img {
    width: 25px;
    height: 25px;
}

.timeline-simple .timeline-list .timeline-post-content div.user-profile:after {
    top: 15px;
    left: 24%;
}

.timeline-simple .timeline-list .timeline-post-content h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 0;
    color: #3b3f5c;
}

@media (max-width: 767px) {
    .timeline-simple .timeline-list .timeline-post-content .post-gallery-img img {
        width: 150px;
        margin-bottom: 23px;
    }
}

@media (max-width: 575px) {
    .timeline-alter .item-timeline {
        display: block;
        text-align: center;
    }

    .timeline-alter .item-timeline .t-meta-time p,
    .timeline-alter .item-timeline .t-usr-txt p {
        margin: 0 auto;
    }

    .timeline-simple .timeline-list .timeline-post-content {
        display: block;
    }

    .timeline-simple .timeline-list .timeline-post-content div.user-profile {
        margin-bottom: 18px;
        text-align: center;
    }

    .timeline-simple .timeline-list .timeline-post-content div.user-profile:after {
        display: none;
    }

    .timeline-simple .timeline-list .timeline-post-content div.user-profile img {
        margin-right: 0;
    }

    .timeline-simple .timeline-list .timeline-post-content h4,
    .timeline-simple .timeline-list .timeline-post-content .meta-time-date {
        text-align: center;
    }
}
/**
 * This css contains color class definition
 **/

/*
 * Based on user's color config
 */
.btn-theme-wrapper {
    color: var(--nameColor) !important;
    background-color: var(--wrapper) !important;
}

.btn-theme-iconWrapper {
    color: var(--fontColor) !important;
    background-color: var(--iconWrapper) !important;
}

.bg-theme-wrapper {
    color: var(--nameColor) !important;
    background-color: var(--wrapper) !important;
}

.bg-theme-iconWrapper {
    color: var(--fontColor) !important;
    background-color: var(--iconWrapper) !important;
}

/*
 * Based on user's color config (invert)
 */

.btn-theme-wrapper-invert {
    color: var(--wrapper) !important;
    background-color: var(--nameColor) !important;
}

.btn-theme-iconWrapper-invert {
    color: var(--iconWrapper) !important;
    background-color: var(--fontColor) !important;
}

.bg-theme-wrapper-invert {
    color: var(--wrapper) !important;
    background-color: var(--nameColor) !important;
}

.bg-theme-iconWrapper-invert {
    color: var(--iconWrapper) !important;
    background-color: var(--fontColor) !important;
}

/**
 * White color
 **/
.color-white {
    color: #ffffff !important;
}

.bg-white {
    background-color: #ffffff !important;
}

/**
 * Black color
 **/
.color-black {
    color: #000000 !important;
}

.bg-black {
    background-color: #000000 !important;
}

.border-black {
    border-color: #000000 !important;
}

/**
 * Primary light color
 **/
.color-primary-light {
    color: #eaf1ff !important;
}

.bg-primary-light {
    background-color: #eaf1ff !important;
}

.border-primary-light {
    border-color: #eaf1ff !important;
}

/**
 * Info light color
 **/
.color-info-light {
    color: #e7f7ff !important;
}

.bg-info-light {
    background-color: #e7f7ff !important;
}

.border-info-light {
    border-color: #e7f7ff !important;
}


/**
 * dark light color
 **/
.color-dark-light {
    color: #e3e4eb !important;
}

.bg-dark-light {
    background-color: #e3e4eb !important;
}

.border-dark-light {
    border-color: #e3e4eb !important;
}

.text-shadow-dark-light {
    text-shadow: 2px 2px #e3e4eb !important;
}


/**
 * grey dark light
 **/
.color-grey-light {
    color: #a1a1a1 !important;
}

.color-grey-middle {
    color: #888ea8;
}

/**
 * grey dark color
 **/
.color-grey-dark {
    color: #6d6d6d !important;
}

/**
 * red dark color
 **/
.color-red-dark {
    color: #a12d2d !important;
}

/**
 * blue dark color
 **/
.color-blue-dark {
    color: #020eae !important;
}

/**
 * blue grey color
 **/
.color-blue-grey {
    color: #3b3f5c !important;
}

.form-group label {
    color: #515365;
}

.bg-green-dark {
    background-color: #8CC152 !important;
    color: #FFF !important;
}

.bg-red-dark {
    background-color: #DA4453 !important;
    color: #FFF !important;
}

.bg-yellow-dark {
    background-color: #F6BB42 !important;
    color: #FFF !important;
}

.bg-grey-dark {
    background-color: #6d6d6d !important;
    color: #FFF !important;
}

.color-green-dark {
    color: #00a71f !important;
}

.border-green-dark {
    border-color: #00a71f !important;
}

.color-yellow-dark {
    color: #e3cf1d !important;
}

.border-yellow-dark {
    border-color: #e3cf1d !important;
}

.color-gray-dark {
    color: #999999 !important;
}

.border-gray-dark {
    border-color: #999999 !important;
}

.border-red-dark {
    border-color: #DA4453 !important;
}
/*
 * This css contains web display class definition
 *
 * All style such as 
 * to hide eg: display = none
 * to set size eg: border-radius = 6px
 * and related
 * should be declared here
 */

/* None / Hide */

.display-none {
    display: none !important;
}

.display-block {
    display: block !important;
}

.display-inline {
    display: inline !important;
}

.display-inline-block {
    display: inline-block !important;
}

.bg-none {
    background: none !important;
}

.border-none {
    border: none !important;
}

.border-bottom-none {
    border-bottom: none !important;
}

.border-top-none {
    border-top: none !important;
}

.box-shadow-none {
    box-shadow: none !important;
}

/* Flex */

.display-flex {
    display: flex !important;
}

.flex-0-0-100 {
    flex: 0 0 100% !important;
}

.flex-1-1-auto {
    flex: 1 1 auto !important;
}

/* Opacity */

.bg-op-0 {
    background: rgb(0 0 0 / 0%) !important;
}

.opacity-0 {
    opacity: 0 !important;
}

.opacity-full {
    opacity: 1 !important;
}

/* Show / display */

.border-all {
    border: 1px solid #e3e3e3 !important;
}

.border-top {
    border-top: 1px solid #e3e3e3 !important;
}

.border-bottom {
    border-bottom: 1px solid #e3e3e3 !important;
}

.border-left {
    border-left: 1px solid #e3e3e3 !important;
}

.border-right {
    border-right: 1px solid #e3e3e3 !important;
}

.border-bottom {
    border-bottom: 1px solid #e3e3e3 !important;
}

.overflow-visible {
    overflow: visible !important;
}

/* Radius */

.border-1px {
    border-radius: 1px !important;
}

.border-5px {
    border-radius: 5px !important;
}

.border-10px {
    border-radius: 10px !important;
}

.border-20px {
    border-radius: 20px !important;
}

.border-50 {
    border-radius: 50% !important;
}

.border-rtr-6 {
    border-top-right-radius: 6px !important;
}

.border-rtl-6 {
    border-top-left-radius: 6px !important;
}

.border-rbr-6 {
    border-bottom-right-radius: 6px !important;
}

.border-rbl-6 {
    border-bottom-left-radius: 6px !important;
}

/* Others */

.box-shadow-btn-opt {
    box-shadow: 0px 5px 70px 0 rgb(0 0 0 / 10%) !important;
}

.svg-shadow {
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
    filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  }

/* Texts / Sentences */

.word-wrap {
    white-space: pre-wrap !important;
    /* CSS3 */
    white-space: -moz-pre-wrap !important;
    /* Firefox */
    white-space: -pre-wrap !important;
    /* Opera <7 */
    white-space: -o-pre-wrap !important;
    /* Opera 7 */
    word-wrap: break-word !important;
}

.white-space-normal {
    white-space: normal !important;
}

/* grayscale */
.grayscale-50 {
    filter: grayscale(50%) !important;
}
.grayscale-100 {
    filter: grayscale(100%) !important;
}

/* background */
.background-size-cover {
    background-size: cover !important;
}

.border-all-white {
    border: 1px solid #ffffff !important;
}
/**
 * This css contains font style class definition
 *
 * All font style such as size, color and related should be decalre here
 **/

.font-10 {
	font-size: 10px !important;
}

.font-11 {
	font-size: 11px !important;
}

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

.font-13 {
	font-size: 13px !important;
}

.font-14 {
	font-size: 14px !important;
}

.font-15 {
	font-size: 15px !important;
}

.font-18 {
	font-size: 18px !important;
}

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

.font-25 {
	font-size: 25px !important;
}

.font-40 {
	font-size: 40px !important;
}

.font-w-600 {
	font-weight: 600 !important;
}
/**
 * This css contains measurement class definition
 *
 * All width, height and related should be decalre here
 **/

.w-10 {
    width: 10% !important;
}

.w-15 {
    width: 15% !important;
}

.w-20 {
    width: 20% !important;
}

.w-30 {
    width: 30% !important;
}

.w-40 {
    width: 40% !important;
}

.w-50 {
    width: 50% !important;
}

.w-60 {
    width: 60% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80% !important;
}

.w-90 {
    width: 90% !important;
}

.w-95 {
    width: 95% !important;
}

.w-100 {
    width: 100% !important;
}

.w-10px {
    width: 10px !important;
}

.w-15px {
    width: 15px !important;
}

.w-20px {
    width: 20px !important;
}

.w-30px {
    width: 30px !important;
}

.w-40px {
    width: 40px !important;
}

.w-50px {
    width: 50px !important;
}

.w-60px {
    width: 60px !important;
}

.w-70px {
    width: 70px !important;
}

.w-80px {
    width: 80px !important;
}

.w-120px {
    width: 120px !important;
}

.w-130px {
    width: 130px !important;
}

.w-140px {
    width: 140px !important;
}

.w-150px {
    width: 150px !important;
}

.w-200px {
    width: 200px !important;
}

.w-250px {
    width: 250px !important;
}

.w-300px {
    width: 300px !important;
}

.w-350px {
    width: 350px !important;
}

.h-10px {
    height: 10px !important;
}

.h-15px {
    height: 15px !important;
}

.h-20px {
    height: 20px !important;
}

.h-23px {
    height: 23px !important;
}

.h-30px {
    height: 30px !important;
}

.h-40px {
    height: 40px !important;
}

.h-50px {
    height: 50px !important;
}

.h-60px {
    height: 60px !important;
}

.h-70px {
    height: 70px !important;
}

.h-80px {
    height: 80px !important;
}

.h-100px {
    height: 100px !important;
}

.h-120px {
    height: 120px !important;
}

.h-130px {
    height: 130px !important;
}

.h-140px {
    height: 140px !important;
}

.h-150px {
    height: 150px !important;
}

.h-200px {
    height: 200px !important;
}

.h-250px {
    height: 250px !important;
}

.h-260px {
    height: 260px !important;
}

.h-300px {
    height: 300px !important;
}

.h-335px {
    height: 335px !important;
}

.h-336px {
    height: 336px !important;
}

.h-350px {
    height: 350px !important;
}

.h-368px {
    height: 368px !important;
}

.h-400px {
    height: 400px !important;
}

.h-409px {
    height: 409px !important;
}

.h-410px {
    height: 410px !important;
}

.h-440px {
    height: 440px !important;
}

.h-500px {
    height: 500px !important;
}

.h-100 {
    height: 100% !important;
}

.h-100vh {
    height: 100vh !important;
}

.h-80vh-mobile {
    height: calc(100vh - calc(100vh - 80%)) !important;
}

.h-90vh-mobile {
    height: calc(100vh - calc(100vh - 90%)) !important;
}

.h-100vh-mobile {
    height: calc(100vh - calc(100vh - 100%)) !important;
}

/* Min */

.min-w-0 {
    min-width: 0px !important;
}

.min-h-100 {
    min-height: 100% !important;
}

.min-h-100px {
    min-height: 100px !important;
}

.min-h-150px {
    min-height: 150px !important;
}

.min-h-200px {
    min-height: 200px !important;
}

.min-h-250px {
    min-height: 250px !important;
}

.min-h-500px {
    min-height: 500px !important;
}


/* Max */

.max-w-80px {
    max-width: 80px !important;
}

.max-w-150px {
    max-width: 150px !important;
}

.max-w-300px {
    max-width: 300px !important;
}

.max-w-350px {
    max-width: 350px !important;
}

.max-w-500px {
    max-width: 500px !important;
}

.max-h-80px {
    max-height: 80px !important;
}

.max-h-100px {
    max-height: 100px !important;
}

.max-h-150px {
    max-height: 150px !important;
}

.max-h-200px {
    max-height: 200px !important;
}

.max-h-250px {
    max-height: 250px !important;
}

.max-h-300px {
    max-height: 300px !important;
}

.max-h-336px {
    max-height: 336px !important;
}

.max-h-350px {
    max-height: 350px !important;
}

.max-h-368px {
    max-height: 368px !important;
}

.max-h-409px {
    max-height: 409px !important;
}

/* line-height */
.ln-h-10 {
    line-height: 10px !important;
}

.ln-h-15 {
    line-height: 15px !important;
}

.fill { 
    min-height: 100%;
    height: 100%;
}
/*
 * This css contains web position class definition
 *
 * All style such as 
 * z-index eg: z-index = 9000
 * to set position top eg: top = 0
 * and related
 * should be declared here
 */

/* z-index */

.z-in-9000 {
    z-index: 9000 !important;
}

.align-self-center {
    align-self: center !important;
}

.vertical-align-top {
    vertical-align: top !important;
}

.vertical-align-middle {
    vertical-align: middle !important;
}

.vertical-align-bottom {
    vertical-align: bottom !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

.position-unset {
    position: unset !important;
}

.top-0px {
    top: 0px !important;
}

.bottom-0px {
    bottom: 0px !important;
}

.left-0px {
    left: 0px !important;
}

.right-0px {
    right: 0px !important;
}

.top-5px {
    top: 5px !important;
}

.bottom-5px {
    bottom: 5px !important;
}

.left-5px {
    left: 5px !important;
}

.right-5px {
    right: 5px !important;
}

.top-8px {
    top: 8px !important;
}

.bottom-8px {
    bottom: 8px !important;
}

.left-8px {
    left: 8px !important;
}

.right-8px {
    right: 8px !important;
}

.top-10px {
    top: 10px !important;
}

.bottom-10px {
    bottom: 10px !important;
}

.left-10px {
    left: 10px !important;
}

.right-10px {
    right: 10px !important;
}

/* Justify */
.justify-content-left {
    justify-content: left !important;
}
/**
 * This css to overwrite template
 *
 * anythign final design
 * to replace old css
 * or prevent been replaced
 * should declare here
 **/

:root {
    --wrapper: #e8e8e8;
    --iconWrapper: #d3dcda;
    --nameColor: #3E3F54;
    --fontColor: #3E3F54;
    --progressBarMaskColor: #d3dcda;
    --borderHoverColor: #3E3F54;
    --navLinkActiveColor: #3e3f54;
    --navLinkActiveBgColor: #d3dcda;
    --imageEnquirySocial: url("data:image/svg+xml,%3Csvg xmlns='http: //www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23009d8a'/%3E%3Cstop offset='1' stop-color='%230052cf'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%230078ad'/%3E%3Cstop offset='1' stop-color='%230052cf'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='rotate(0 0 0)'%3E%3Cg transform='rotate(0 0 0)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(0 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.1' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#headerWrapper:before {
    background-image: var(--imageEnquirySocial) !important;
}

.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.menu-block a.profile {
    padding: 0px !important;
}

.sidebar-wrapper #compactSidebar .menu-categories a.menu-toggle .base-icons svg {
    fill: none;
}

.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.menu-block a svg:not(.feather-chevron-right) {
    fill: none;
}

.bt-menu-trigger span:after,
.bt-menu-trigger span:before {
    background: var(--bgColor);
}

.sidebarCollapse.bt-menu-open .bt-menu-trigger span:after,
.sidebarCollapse.bt-menu-open .bt-menu-trigger span:before {
    background: var(--bgColor);
}

.bt-menu-trigger span {
    background-color: var(--bgColor);
}

.sidebarCollapse.bt-menu-open .bt-menu-trigger span {
    background-color: var(--bgColor);
}

.sidebar-wrapper #compactSidebar .menu-categories a.menu-toggle:hover {
    border: 1px solid #3E3F54;
    border-color: var(--borderHoverColor);
}

.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.menu-block a {
    border: 1px solid transparent !important;
}

.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.menu-block a:hover {
    border: 1px solid #3E3F54 !important;
    border-color: var(--borderHoverColor) !important;
}

.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.menu-block a svg {
    text-align: center;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    padding-top: 2px;
}

.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.menu-block a:hover svg {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}

.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.menu-block a.menu-toggle .base-icons {
    text-align: center;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    padding-top: 2px;
}

.sidebar-wrapper #compact_submenuSidebar .submenu ul.submenu-list li.menu-block a.menu-toggle:hover .base-icons {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}

.sidebar-wrapper #compactSidebar .menu-categories {
    height: calc(90vh - 0px);
}

input[disabled],
input[readonly],
select[disabled],
select[readonly],
textarea[disabled],
textarea[readonly] {
    color: #2d2f31;
}

#content .col-right-content {
    /* background: #ffffff; */
    background: #fafafa;
}

.widget-calendar .widget-calendar-lists .w-calendar {
    background: #e9edf0;
}

.widget-calendar .widget-calendar-lists .w-calendar p {
    color: #181c19;
}

.vertical-line-pill .nav-pills .nav-link.active {
    /* color: var(--vlpActiveColor); */
    color: #241816;
}

.vertical-line-pill .nav-pills .nav-link:before {
    background-color: #241816;
}

.ps__rail-x:hover>.ps__thumb-x,
.ps__rail-x:focus>.ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
    background-color: #b9c1bf;
    height: 6px;
}

.progress-bar-mask {
    background-color: var(--progressBarMaskColor);
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

.progress-bar-mask-cool-select {
    background-color: var(--progressBarMaskColor);
    filter: alpha(opacity=10);
    -moz-opacity: 0.1;
    opacity: 0.1;
}

.admin-header .toggle-notification-bar {
    width: 34px;
    height: 34px;
    padding: 6px 7px;
}

.pointer {
    cursor: pointer !important;
}

.pointer-underline:hover {
    text-decoration: underline !important;
}

.pointer-border:hover {
    border: 1px solid #8c8c8c !important;
}

.searchable-container .searchable-items.grid .items .item-content {
    padding-bottom: 0px;
}

.searchable-container .searchable-items.list .items .action-btn .list-item-hidden {
    display: none !important;
}


.searchable-container .searchable-items.list .items.items-header-section h4 {
    font-size: 14px !important;
}

.searchable-container .searchable-items.list .items .user-meta-info .user-name {
    font-size: 13px !important;
}

.searchable-container .searchable-items.list .items p {
    font-size: 13px !important;
}

hr {
    border-top: 1px solid #e0e6ed;
}

.item-cool-select {
    display: flex;
    align-items: center;
}

.item-cool-select-name {
    font-size: 15px;
}

.item-cool-select-domain {
    color: grey;
}

.item-cool-select-logo {
    max-width: 50px;
    margin-right: 10px;
    /* border: 1px solid #eaecf0; */
}

.item-cool-select-loading-indicator {
    width: 20px;
    margin-right: 10px;
}

.vertical-border-pill .nav-pills .nav-link {
    border: 0px;
}

.vertical-border-pill .nav-pills .nav-link.active {
    color: var(--navLinkActiveColor);
    background-color: var(--navLinkActiveBgColor);
}

.sidebar-wrapper #compactSidebar {
    /* top: 110px; */
    /* height: calc(100vh - 220px); */
    top: 100px;
    height: 100vh;
}

.sidebar-wrapper #compact_submenuSidebar {
    /* top: 110px; */
    /* height: calc(100vh - 220px); */
    top: 100px;
    /* height: 100vh; */
    height: 90vh;
}

.slideout-panel .slideout-panel-bg {
    z-index: 9000 !important;
}

.slideout-panel .slideout-wrapper .slideout {
    background: #fafafa !important;
}

.justify-tab .nav-tabs .nav-item.show .nav-link,
.justify-tab .nav-tabs .nav-link.active {
    color: #212122;
}

.nav-tabs .nav-link {
    color: #241816;
}

.Vue-Toastification__toast--success {
    color: var(--fontColor) !important;
    background-color: var(--iconWrapper) !important;
}

.multiselect__tags {
    border: 1px solid #bfc9d4 !important;
}

.vue-advanced-cropper__background,
.vue-advanced-cropper__foreground {
    background: #3f4a60 !important;
}

.v-collapse-content {
    max-height: 0;
    transition: max-height 0.6s ease-out;
    overflow: hidden;
    padding: 0;
}

.v-collapse-content-end {
    transition: max-height 0.6s ease-in;
    max-height: 800px;
}

.card-body-enq {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1rem;
    padding-bottom: 10px;
}

.component-card_9 {
    border: 1px solid #e0e6ed;
    border-radius: 6px;
    /* width: 22rem; */
    margin: 0 auto;
    -webkit-box-shadow: 4px 6px 10px -3px #bfc9d4;
    box-shadow: 4px 6px 10px -3px #bfc9d4;
}

.component-card_9 .card-body {
    padding: 22px 20px;
    background-color: white;
}

.component-card_9 .meta-date {
    margin-bottom: 5px;
    font-size: 10px;
    color: #a1a1a1;
}

.component-card_9 .card-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.component-card_9 .card-text {
    color: #888ea8;
    line-height: 22px;
}

.component-card_9 .meta-info {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    padding-top: 15px;
}

.component-card_9 .meta-info:before {
    content: "";
    position: absolute;
    /*height: 1px;
		width: 215px;*/
    height: 2px;
    width: 100%;
    /* background: #e0e6ed; */
    top: 0;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
}

.component-card_9 .meta-user {
    display: flex;
}

.component-card_9 .avatar {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 34px;
    font-size: 1rem;
    margin-right: 10px;
}

.component-card_9 .avatar .avatar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #515365;
    color: #e0e6ed;
    font-size: 14px;
}

.component-card_9 .user-name {
    align-self: center;
    color: #515365;
    font-weight: 600;
}

.component-card_9 .meta-action {
    display: flex;
}

.component-card_9 .meta-likes {
    align-self: center;
    margin-right: 5px;
    color: #4361ee;
}

.component-card_9 .meta-likes svg {
    width: 16px;
    vertical-align: sub;
    color: #4361ee;
    fill: rgba(27, 85, 226, 0.239216);
}

.component-card_9 .meta-view {
    align-self: center;
    color: #4361ee;
}

.component-card_9 .meta-view svg {
    width: 16px;
    vertical-align: sub;
    color: #4361ee;
    fill: rgba(27, 85, 226, 0.239216);
}

.tag-input {
    width: 100%;
    border: 1px solid #bfc9d4;
    font-size: 0.9em;
    height: 50px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 6px;
}

.tag-input__tag {
    height: 30px;
    float: left;
    margin-right: 10px;
    background-color: rgb(37, 160, 226);
    color: #fafafa;
    margin-top: 10px;
    line-height: 30px;
    padding: 0 5px;
    border-radius: 5px;
}

.tag-input__tag>span {
    cursor: pointer;
    opacity: 0.75;
}

.tag-input__text {
    border: none;
    box-sizing: border-box;
    outline: none;
    font-size: 0.9em;
    line-height: 50px;
    background: none;
}

.ql-toolbar.ql-snow {
    border: 1px solid #e0e6ed;
    margin-top: 0px;
}


/*
  Component Card 5
*/
.component-card_5 {
    height: 100%;
}

.component-card_5 .card-body {
    padding: 10px 10px;
}

.component-card_5 .card-body .user-info {
    display: flex;
    padding: 0px 0 0 0;
}

.component-card_5 .card-body .media-body {
    align-self: center;
}

.component-card_5 .card-body img {
    width: 56px;
    height: 56px;
    margin-right: 18px;
    border-radius: 50%;
}

.component-card_5 .card-body h5.card-user_name {
    font-size: 15px;
    color: #515365;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 3px;
}

.component-card_5 .card-body p.card-user_occupation {
    font-size: 14px;
    color: #515365;
    letter-spacing: 1px;
    margin-bottom: 0;
}

.component-card_5 .card-body .card-text {
    color: #515365;
    font-size: 14px;
    letter-spacing: 1px;
    padding-top: 15px;
}

.component-card_5 .card-body hr.hr1 {
    margin-bottom: 10px;
    border-top: 1px solid #e0e6ed;
}

.component-card_5 .card-body hr.hr2 {
    margin-top: 10px;

    height: 1px;
    /* Set the hr color */
    color: #161c2d;
    /* old IE */
    background-color: #161c2d;
    /* Modern Browsers */
}

.announcement-pic:before {
    content: "";
    display: inline-block;
    height: 50%;
    width: 1px;
    margin-right: -1px;
}

#readmore {
    color: #22853b
}

.underline-content .nav-tabs .nav-link-no-bottom-border.active {
    border-bottom: none !important;
}

.breadcrumb-two .breadcrumb li a {
    color: var(--wrapper) !important;
    background-color: var(--nameColor) !important;
}

.breadcrumb-two .breadcrumb li a:before {
    border-left-color: var(--nameColor) !important;
}

.breadcrumb-two .breadcrumb li a:after {
    border-left-color: var(--nameColor) !important;
}

.breadcrumb-two .breadcrumb li.active a {
    color: var(--fontColor) !important;
    background-color: var(--iconWrapper) !important;
}

.breadcrumb-two .breadcrumb li.active a:after {
    border-left-color: var(--iconWrapper) !important;
}

.ql-blank {
    min-height: 200px;
}

.dropdown-menu {
    min-width: auto;
}

/* Bottom right text */
.text-block-vision {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: rgba(212, 103, 19, 0.926);
    color: rgb(255, 255, 255);
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    width: 45%;
    font-size: 12px;
    border-radius: 6px;
}

.text-block-mission {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: rgba(19, 160, 212, 0.864);
    color: rgb(255, 255, 255);
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    width: 45%;
    font-size: 12px;
    border-radius: 6px;
}

.widget.widget-activity-five .widget-heading {
    display: flex;
    justify-content: space-between;
    /* border-bottom: 1px dashed #e0e6ed; */
    border-bottom: 1px solid #e0e6ed;
    padding: 15px 20px;
    padding-bottom: 20px;
}

.widget-activity-five .widget-heading .w-title {
    align-self: center;
    padding-bottom: 9px;
}

.widget-activity-five .mt-container {
    position: relative;
    height: 338px;
    overflow: auto;
    padding: 15px 12px 0 12px;
}

.widget-activity-five .timeline-line .item-timeline {
    display: flex;
    margin-bottom: 10px;
}

.widget-activity-five .widget-content {
    padding: 0px 5px 21px 0px;
}

.widget.widget-six {
    background: #fff;
    padding: 15px 0px;
    height: 100%;
}

.widget-six .mt-container {
    position: relative;
    height: 344px;
    overflow: auto;
    padding: 15px 12px 0 12px;
}

.widget-six .widget-content {
    padding: 0 5px;
}

.widget-six .widget-heading .w-title {
    align-self: center;
    // padding-bottom: 4px;
    margin-bottom: 9px;
}

.widget.widget-activity-nine {
    position: relative;
    background: #fff;
    border-radius: 6px;
    height: 13.9%;
    padding: 0;
}

.widget.widget-activity-nine .widget-heading {
    display: flex;
    justify-content: space-between;
    border: 1px solid #e0e6ed;
    /* border-bottom: 1px solid #e0e6ed; */
    border-radius: 8px;
    padding: 15px 20px;
    padding-bottom: 20px;
}

.widget-activity-nine .widget-heading .w-title {
    align-self: center;
    padding-bottom: 20px;
}

.widget-activity-nine .widget-heading .w-title h5 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
}

.widget-activity-nine .widget-heading .w-title span {
    font-size: 12px;
    font-weight: 500;
}

.form-control {
    height: auto;
    border: 1px solid #bfc9d4;
    color: #3b3f5c;
    font-size: 12px;
    padding: 8px 10px;
    /* letter-spacing: 1px; */
    height: calc(1.4em + 1.4rem + 2px);
    /* padding: 0.75rem 1.25rem; */
    border-radius: 6px;
}

.vue-friendly-iframe {
    height: 100%;
}

.ui-bg-cover {
    background-color: rgba(0, 0, 0, 0);
    background-position: center center;
    background-size: cover;
}

.ui-square {
    padding-top: 100% !important;
}

.ui-square,
.ui-rect,
.ui-rect-30,
.ui-rect-60,
.ui-rect-67,
.ui-rect-75 {
    position: relative !important;
    display: block !important;
    padding-top: 100% !important;
    width: 100% !important;
}

/* Different window size (Responsive) */
ol,
ul,
dl {
    padding-left: 22px;
}

.text-block-mission p {
    color: white !important;
    /* line-height: 22px; */
}

.text-block-mission h6 {
    color: white !important;
}

.text-block-vision p {
    color: white !important;
}

.text-block-vision h6 {
    color: white !important;
}

.user-profile-middle {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: normal !important;
}

.user-meta-info-middle {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: normal !important;
}

.hyperlink a:hover {
    /* text-decoration: none; */
    color: #4361ee;
    background: transparent;
}

.text-overflow {
    text-overflow: ellipsis;
    overflow: hidden;
}

.cl-title {
    text-align: center;
}

body .col-right-content .col-right-content-container {
    position: relative;
    height: calc(67vh - 0px);
}


/*
    =====================
        Account Info
    =====================
*/

.widget-account-invoice-three {
    padding: 0 !important;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    background: #fdfdfd;
}

.widget-account-invoice-three .widget-heading {
    padding: 24px 30px 63px 30px;
    border-radius: 15px;
    background-color: #6b0f1a;
    background-image: linear-gradient(315deg, #6b0f1a 0%, #4361ee 74%);
    min-height: 213px;
    height: 100%;

}

.widget-account-invoice-three .widget-heading .wallet-usr-info {
    display: flex;
    justify-content: space-between;
}

.widget-account-invoice-three .widget-heading .wallet-usr-info span {
    display: inline-block;
    color: #fff;
    background: rgb(0 0 0 / 40%);
    padding: 5px 12px 5px 6px;
    border-radius: 21px;
    position: relative;
    font-size: 13px;
    letter-spacing: 1px;
    cursor: pointer;
}

.widget-account-invoice-three .widget-heading .add {
    align-self: center;
}

.widget-account-invoice-three .widget-heading .add span {
    padding: 6px;
    border-radius: 12px;
}

.widget-account-invoice-three .widget-heading span img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid rgb(255 255 255 / 18%);
}

.widget-account-invoice-three .widget-heading .wallet-balance {
    display: flex;
    justify-content: space-between;
    margin-top: 37px;
}

.widget-account-invoice-three .widget-heading .wallet-balance p {
    margin-bottom: 0;
    align-self: center;
    font-size: 19px;
    color: #fff;
}

.widget-account-invoice-three .widget-heading h5 {
    font-size: 28px;
    color: #fff;
    margin-top: 0;
    font-weight: 500;
}

.widget-account-invoice-three .widget-heading h5 .w-currency {
    color: #bfc9d4;
    display: inline-block;
}

.widget-account-invoice-three .widget-amount {
    text-align: center;
    margin-top: -48px;
}

.widget-account-invoice-three .widget-amount .w-a-info {
    display: inline-block;
    padding: 12px 23px;
    background: #fff;
    text-align: left;
    border-radius: 6px;
    width: 40%;
    -webkit-box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.06);
}

.widget-account-invoice-three .widget-amount .w-a-info.funds-received {
    margin-right: 15px;
}

.widget-account-invoice-three .widget-amount span {
    font-weight: 600;
    color: #151516;
}

.widget-account-invoice-three .widget-amount .w-a-info svg {
    width: 18px;
    height: 18px;
    float: right;
}

.widget-account-invoice-three .widget-amount .w-a-info.funds-received svg {
    vertical-align: top;
    color: #009688;
}

.widget-account-invoice-three .widget-amount .w-a-info.funds-spent svg {
    vertical-align: bottom;
    color: #e7515a;
}

.widget-account-invoice-three .widget-amount p {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0;
    text-align: center;
    background: #ebedf2;
    border-radius: 6px;
    margin-top: 10px;
    padding: 3px 0;
    color: #515365;
}

.widget-account-invoice-three .widget-content {
    padding: 20px;
    margin-top: 12px;
}

.widget-account-invoice-three .widget-content .bills-stats {
    margin-bottom: 24px;
}

.widget-account-invoice-three .widget-content .bills-stats span {
    display: inline-block;
    color: #fff;
    background: rgb(0 0 0 / 40%);
    padding: 4px 12px 4px 20px;
    border-radius: 21px;
    position: relative;
    font-size: 12px;
    letter-spacing: 1px;
    background-color: #1b2e4b;
}

.widget-account-invoice-three .widget-content .bills-stats span:before {
    content: '';
    position: absolute;
    height: 6px;
    width: 6px;
    background: white;
    border-radius: 50%;
    left: 9px;
    top: 9.5px;
}

.widget-account-invoice-three .invoice-list .inv-detail {
    margin-bottom: 24px;
}

.widget-account-invoice-three .invoice-list [class*="info-detail-"]:not(.info-sub) {
    display: flex;
    justify-content: space-between;
}

.widget-account-invoice-three .invoice-list [class*="info-detail-"]:not(.info-sub) p {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 13px;
    align-self: center;
}

.widget-account-invoice-three .invoice-list [class*="info-detail-"]:not(.info-sub) p span.w-currency {
    font-size: 16px;
    color: #888ea8;
    font-weight: 500;
}

.widget-account-invoice-three .invoice-list [class*="info-detail-"]:not(.info-sub) p span.bill-amount {
    font-size: 14px;
    color: #030305;
    font-weight: 700;
}

.widget-account-invoice-three .invoice-list .inv-action {
    text-align: center;
    display: flex;
    justify-content: space-around;
}

.widget-account-invoice-three .invoice-list .inv-action a {
    transform: none;
    border: none;
    font-size: 13px;
    padding: 6px 11px;
    font-weight: 600;
    letter-spacing: 1px;
}

.widget-account-invoice-three .invoice-list .inv-action a.view-details {
    color: #805dca !important;
    background: rgb(92 26 195 / 17%);
    border: none !important;
}

.widget-account-invoice-three .invoice-list .inv-action a.pay-now {
    color: #009688 !important;
    background: #00968830;
    border: none !important;
}

.form-form .form-form-wrap form .social a {
    width: 131px !important;
}



/* Different window size (Responsive) */

@media (min-width: 1200px) {
    .container-profile {
        max-width: 960px;
    }

    .container-announcement {
        max-width: 744px;
    }
}

@media (min-width: 1199px) {
    .d-md-to-lg-none {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .container-profile {
        max-width: 960px;
    }

    .container-announcement {
        max-width: 744px;
    }
}