/*
 * Skin: Purple
 * ------------
 */

 /*
 "color:orange" in menu => #6f4fc8 (rose) or c68125 f59e0b (orange)
 --color-info-500: #0ea5e9;
 --color-success-500: #14b8a6;
 --color-warning-500: #f59e0b;
 --color-danger-500: #f43f5e;
 --color-mauve-500: #4e3cb9;
 --color-fuchsia-500: #d946ef;
 primary ? 8b5cf6
 */

 :root {

    --color-info-500: #0ea5e9;
    --color-success-500: #14b8a6;
    --color-warning-500: #f59e0b;
    --color-danger-500: #f43f5e;
    --color-mauve-500: #4e3cb9;
    --color-fuchsia-500: #d946ef;

    --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-200: #ddd6fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  --color-violet-900: #4c1d95;
  --color-violet-950: #2e1065;

    --color-primary-50: 245 243 255;
    --color-primary-100: 237 233 254;
    --color-primary-200: 221 214 254;
    --color-primary-300: 196 181 253;
    --color-primary-400: 167 139 250;
    --color-primary-500: 139 92 246;
    --color-primary-600: 124 58 237;
    --color-primary-700: 109 40 217;
    --color-primary-800: 91 33 182;
    --color-primary-900: 76 29 149;
    --color-primary-950: 46 16 101;
    --color-muted-50: 248 250 252;
    --color-muted-100: 241 245 249;
    --color-muted-200: 226 232 240;
    --color-muted-300: 203 213 225;
    --color-muted-400: 148 163 184;
    --color-muted-500: 100 116 139;
    --color-muted-600: 71 85 105;
    --color-muted-700: 51 65 85;
    --color-muted-800: 30 41 59;
    --color-muted-900: 15 23 42;
    --color-muted-950: 2 6 23;

    --tw-border-opacity:1;
 
  }

.bg-myblue td {
  background-color:#1e293b;
}


.emojifont {
  font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
}

  .selmonth select option {
    background-color: #333 !important;
    color: #ccc !important;
    /*font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;*/
  }

  .selmonth {
    font-size: 18px !important;
  }

  .selmonth select {
    font-size: 18px !important;
  }

  .sellang {
    font-size: 18px !important;
  }
 .sellang select {
    font-size: 18px !important;
    color: #333 !important;
    font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
  }

.sellang select option {
  background-color: #333 !important;
  color: #ccc !important;
  font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
}

  .selmonth div, .sellang div {
    float: left;
  }

  .selmonth select, .selmonth input {
    color: #000;
  }

  .tick text {
    color: #ccc !important;
  }

  .c3 path, .c3 line, .tick text { 
    stroke: #ccc;
  }

  path.domain { fill: #ccc; }
.tick text { fill: #ccc; }
.c3-legend-item text { fill:#ccc; }

  table.aright tr td {
    text-align:right;
  }

  table.aright tr td:nth-child(1) {
    text-align:left;
  }


  table.aright2 tr td {
    text-align:right;
  }

  table.aright2 tr td:nth-child(2) {
    text-align:left;
  }


  table.aright2b tr td {
    text-align:right;
  }

  table.aright2b tr td:nth-child(3) {
    text-align:left;
  }
  table.aright2b tr td:nth-child(2) {
    text-align:center;
  }


  .skin-purple .dropdown-menu > li > a {
    color: #bbb;
  }


.skin-purple body, body {
  color: #ccc ! important;
}

.btn-default {
  color: #bbb;
  background-color: #7c3aed !important;
  border-color: #7c3aed;
}


.btn-default.active, .btn-default:active, .open > .dropdown-toggle.btn-default {
  color: #bbb;
  background-color: #7c3aed !important;
  border-color: #adadad;
}

.skin-purple .dropdown-menu, .navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    background-color: #605ca8;;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default {
  color: #aaa;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
  color: #bbb ! important;
}

.skin-purple .dropdown-menu {
  border-color: #1e293b;
}

.skin-purple .well {
  background-color: #1e293b;
  border: 1px solid #334155;
  color: rgb(var(--color-muted-400)/.8);
}

.skin-purple  .help-block {
    color: rgb(var(--color-muted-500)/.8);
  }

.skin-purple .main-header .navbar {
  background-color: #7c3aed;
}
.skin-purple .main-header .navbar .nav > li > a {
  color: #ffffff;
}

.skin-purple .bg-yellow {
    background-color:#f59e0b !important;
}

.skin-purple .bg-green {
    background-color:#14b8a6 !important;
}

.skin-purple .bg-blue {
    background-color:#0ea5e9 !important;
}

.skin-purple .bg-price {
    /*background-color:#702cdd; */  /* #334155;*/
    background-color:var(--color-violet-700) !important; 
    color: rgb(var(--color-muted-400)/1);
}

.skin-purple .bg-price > .widget-user-username, .skin-purple .bg-speech > .widget-user-username { 
    font-weight:bold;
    color: #ffffff;
}

.skin-purple .bg-price > .widget-user-desc, .skin-purple .bg-speech > .widget-user-desc { 
    color: #ffffff;
}

.skin-purple .bg-speech > .widget-user-desc, .skin-purple .bg-speech > .widget-user-username { 
    margin-left:10px;
}

/* support */

.skin-purple  .text-green {
    color : var(--color-success-500) ! important;
}

.bg-green, .callout.callout-success, .alert-success, .label-success, .modal-success .modal-body {
    background-color: var(--color-success-500) !important;
}

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

.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
    border: 1px solid #778;
}

table.dataTable tbody tr:hover, table.dataTable tbody tr.selected {
    background-color: #333;
}
.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: #0f172a;
  }

  .table-striped > tbody > tr:nth-of-type(2n) {
    background-color: #1e293b;
  }


.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: rgb(var(--color-muted-400)/1);;
  }

  .pagination > li > a {
    background-color: var(--color-violet-600);
    border: 1px solid rgba(0,0,0,0.1);
  }

  .pagination > .active > a {
    background-color: var(--color-violet-700);
    border: 1px solid rgba(0,0,0,0.1);
    color:  rgb(var(--color-muted-200)/1);
  }


  .pagination > li > a:hover {
    border: 1px solid #fff !important;
    background-color: var(--color-violet-600) !important;
  }


  .pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover {
    background-color: var(--color-violet-400) ! important;
    color:  rgb(var(--color-muted-300)/1);
    border: 1px solid rgba(0,0,0,0.1);
  }
/* / support */

.skin-purple .timeline > li > .timeline-item {
    background-color: #0f172a;
    color: #ddd;
}

.timeline > li > .timeline-item > .timeline-header {
    margin: 0;
    color: #ddd;
    border-bottom: 1px solid #888;
}

.btn-default {
    background-color: #333;
    color: #eee;
    border-color: #333;
  }

  .btn-default:hover {
    background-color: #333;
    color: #eee;
    border-color: #ddd;
  }

.skin-purple .buy-btn {
    text-align: center;
}
.skin-purple .buy-btn button {
    color: #ffffff;
    background-color:var(--color-violet-700);
    border: 1px solid var(--color-violet-700);
    padding: 10px;
    border-radius: 10px;
    vertical-align: baseline;
}

.skin-purple .buy-btn a:hover {
    background-color:#1e293b;
}

.skin-purple .buy-btn button:hover {
    border: 1px solid #fff;
}

.skin-purple button:hover {
    border: 1px solid #fff;
}


.skin-purple .li-price, .skin-purple .li-price:hover {
    background-color:#14b8a6;
    color: #ffffff !important;
    font-weight:600;
}

.pull-right {
    margin-left:2px !important;
}

.skin-purple .bg-price1 {
    background-color:var(--color-violet-700) !important;  /*#702cdd !important; */ /* #334155;*/
}

.skin-purple .bg-price2 {
    background-color:var(--color-violet-900) !important;  /*#702cdd !important; */ /* #334155;*/
}

.skin-purple .bg-price3 {
    background-color:var(--color-violet-700) !important; 
}

.skin-purple .bg-price .bg-speech {
    background-color:var(--color-muted-800) !important; 
}

.skin-purple .bg-fuchsia-active {
    background-color: #702cdd !important;  /*rgb(var(--color-muted-800)) !important; */ /*#8b5cf6 !important;*/
}

.skin-purple .content-wrapper,
.skin-purple .right-side {
  background-color:#0f172a;
}


.skin-purple .box {
    background: #1e293b; /*#1e293b;*/
    border-top: 3px solid #334155;
    border-top-color: #7c3aed;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    border-radius: .375rem;
  }

  .skin-purple .neutraltop {
    border-top: 3px solid #1e293b !important;
  }

  .skin-purple  .box-header.with-border {
    border-bottom: 0px;  /*1px dashed #7c3aed;*/
  }


  .skin-purple .box-body {
    color: rgb(var(--color-muted-400)/1);
    font-size:1.2em;
    font-weight: 500;
  }

  .skin-purple .box-footer {
    border-top: 0px; /*1px dashed #7c3aed;*/
    padding: 10px;
    background-color: #1e293b;
  }
  .skin-purple .btn-success {
    background-color: #14b8a6;
    border-color: #115e59;  /* success-800 */
  }

  .skin-purple .btn-primary {
    background-color: rgb(var(--color-primary-500));
    border-color: rgb(var(--color-primary-500));
    border-radius: .375rem;
  }


  .skin-purple ul, .skin-purple .nav-stacked > li > a {
    color: rgb(var(--color-muted-400));
  }

  .skin-purple .nav-stacked > li :hover {
    background-color: var(--color-violet-900) !important;
  }

  .skin-purple .nav-stacked > li :active {
    background-color: var(--color-violet-900) !important;
  }


 .skin-purple .nav-stacked > li  {
    border-bottom: 1px solid #334155 !important;

    /*display: flex;
    flex-direction: row;
    flex-wrap: wrap;*/
  }

  @media (max-width: 600px) {
    .skin-purple .nav-stacked > li  {
        min-height:60px;
    }
  }

  .skin-purple label {
    color: rgb(var(--color-muted-400)/.8);
    font-weight: 500;
  }

  .skin-purple .box-footer {
    color: rgb(var(--color-muted-400)/1);
  }


  .input-group  .input-group-addon {
    color: rgb(var(--color-muted-400)/.8);
    background-color: rgb(var(--color-muted-900));
    border-color: #334155 !important; /*#f43f5e !important;*/
  }

  .form-group  a, .box-footer a, .box-body a {
    color: rgb(var(--color-primary-500));
  }

  .form-group  a:hover, .box-footer a:hover, .box-body a:hover , .main-footer a:hover{
    color: rgb(var(--color-primary-200)) !important;
    text-decoration: underline;
  }

  .form-control {
    border-color: #334155 !important;
    background-color: rgb(var(--color-muted-900));
    color:rgb(var(--color-muted-400)/1);
  }
  .form-control::placeholder {
    color:rgb(var(--color-muted-300)/.8);
    opacity: 1;
  }

  .skin-purple .box-title {
    color: rgb(var(--color-muted-100));
  }


  .skin-purple .main-footer {
    background-color: #1a2226;
    border-top: 1px solid #334155;
    color: rgb(var(--color-muted-300));
  }

  .skin-purple .main-footer a {
    color: rgb(var(--color-primary-500));
  }
  /*.input-group {
    color: rgb(var(--color-muted-400)/.8);
    background-color: #14b8a6;
  }*/

/*
.skin-purple .nav-stacked > li > a:active {
    background-color: rgb(var(--color-violet-900));
}*/

.skin-purple .nav>li>a:active,  .skin-purple .nav>li>a:focus {
    background-color: rgb(var(--color-violet-900));
}

.skin-purple .main-header .navbar .nav > li > a:hover,
.skin-purple .main-header .navbar .nav > li > a:active,
.skin-purple .main-header .navbar .nav > li > a:focus,
.skin-purple .main-header .navbar .nav .open > a,
.skin-purple .main-header .navbar .nav .open > a:hover,
.skin-purple .main-header .navbar .nav .open > a:focus,
.skin-purple .main-header .navbar .nav > .active > a {
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
}
.skin-purple .main-header .navbar .sidebar-toggle {
  color: #ffffff;
}
.skin-purple .main-header .navbar .sidebar-toggle:hover {
  color: #f6f6f6;
  background: rgba(0, 0, 0, 0.1);
}
.skin-purple .main-header .navbar .sidebar-toggle {
  color: #fff;
}
.skin-purple .main-header .navbar .sidebar-toggle:hover {
  background-color: #555299;
}
@media (max-width: 767px) {
  .skin-purple .main-header .navbar .dropdown-menu li.divider {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .skin-purple .main-header .navbar .dropdown-menu li a {
    color: #fff;
  }
  .skin-purple .main-header .navbar .dropdown-menu li a:hover {
    background: #555299;
  }
}
.skin-purple .main-header .logo {
  background-color: #7c3aed;
  color: #ffffff;
  border-bottom: 0 solid transparent;
}
.skin-purple .main-header .logo:hover {
  background-color: #545096;
}
.skin-purple .main-header li.user-header {
  background-color: #605ca8;
}
.skin-purple .content-header {
  background: transparent;
  color: #ffffff;
}


.skin-purple .content-header small,
.skin-purple .content-header .breadcrumb li a {
    color: #94a3b8;
}

.skin-purple .breadcrumb li + li::before, 
.skin-purple .breadcrumb .active {
    color: #ffffff;
}

.skin-purple .wrapper,
.skin-purple .main-sidebar,
.skin-purple .left-side {
  background-color: #1e293b;
}
.skin-purple .user-panel > .info,
.skin-purple .user-panel > .info > a {
  color: #fff;
}
.skin-purple .sidebar-menu > li.header {
  color: #4b646f;
  background: #1a2226;
}
.skin-purple .sidebar-menu > li > a {
  border-left: 3px solid transparent;
}
.skin-purple .sidebar-menu > li:hover > a,
.skin-purple .sidebar-menu > li.active > a {
  color: #ffffff;
  background: #1e282c;
  border-left-color: #605ca8;
}
.skin-purple .sidebar-menu > li > .treeview-menu {
  margin: 0 1px;
  background: #2c3b41;
}
.skin-purple .sidebar a {
  color: #b8c7ce;
}
.skin-purple .sidebar a:hover {
  text-decoration: none;
}
.skin-purple .treeview-menu > li > a {
  color: #8aa4af;
}
.skin-purple .treeview-menu > li.active > a,
.skin-purple .treeview-menu > li > a:hover {
  color: #ffffff;
}
.skin-purple .sidebar-form {
  border-radius: 3px;
  border: 1px solid #374850;
  margin: 10px 10px;
}
.skin-purple .sidebar-form input[type="text"],
.skin-purple .sidebar-form .btn {
  box-shadow: none;
  background-color: #374850;
  border: 1px solid transparent;
  height: 35px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.skin-purple .sidebar-form input[type="text"] {
  color: #666;
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
}
.skin-purple .sidebar-form input[type="text"]:focus,
.skin-purple .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  background-color: #fff;
  color: #666;
}
.skin-purple .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  border-left-color: #fff;
}
.skin-purple .sidebar-form .btn {
  color: #999;
  border-top-left-radius: 0;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 0;
}