html,
body {
  overscroll-behavior-x: none;
  scroll-behavior: smooth;
}

/* body {
  transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
} */

.material-symbols-outlined {
  font-variation-settings:
    'FILL'0,
    'wght'400,
    'GRAD'0,
    'opsz'48
}


.voice-open {
  font-size:21pt;
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}

.navbar {
  z-index                   : 1000;
  /* padding                : 10px; */
  height                    : 200px;
  bottom                    : -135px;
  padding-top               : 7px;
  padding-bottom            : 7px;
  color                     : rgba(255, 255, 255, 0.568);
  background-color          : #494949;
}

.navbar .item {
  width : 20%;
  cursor: pointer;
}

.order-1 {
  position:relative;
}

.profile .order-1:before {
  content:"\A";
  z-index:100;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent black transparent transparent;
  position: absolute;
  top:35px;
  left: -15px;
}

.topbar {
  z-index         : 10;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  padding   : 10px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.avatar {
  width          : 38px;
  height         : 38px;
  background-size: cover;
  border         : 1px solid gray;
}

.App {
  width        : 500px;
  border       : 2px solid black;
  border-radius: 20px;
  background   : linear-gradient(#fff 10%, #f1f1f1 98%, #ccc);
  padding      : 0 20px 20px;
  font-family  : monospace;
}

.box {
  width: 100%;
}

.box h2 {
  display        : flex;
  text-align     : center;
  align-items    : center;
  color          : #000;
  margin-top     : -10px;
  justify-content: center;
}

.box .chart {
  position       : relative;
  align-items    : center;
  justify-content: center;
  margin         : auto;
  width          : 260px;
  margin-top     : 50px;
  text-align     : center;
  font-size      : 40px;
  line-height    : 160px;
  height         : 260px;
  font-weight    : bold;
  color          : #2A85D9;
}

.box canvas {
  position: absolute;
  bottom  : 45px;
  left    : 0;
  width   : 100%;
  width   : 100%;
}


.profile .image-profile,
.content .image-profile {
  width              : 200px;
  height             : 200px;
  background-position: center top;
  margin             : auto;
  border             : 5px solid #ddd;
  background-size    : cover;
}

button:hover {
  opacity: 0.9;
}

/* sidebar animation */

.asp-sidebar {
  z-index         : 1001;
  transform       : translateX(-16em);
  width           : 15em;
  height          : 100vh;
  background-color: #F5F5F5;
  transition      : 0.7s;
  position        : fixed;
}

.asp-sidebar.is-closed {
  transform: translateX(0em);
}

.asp-sidebar .image-profile {
  width              : 150px;
  height             : 150px;
  background-position: center top;
  border             : 5px solid #ddd;
  align-self         : center;
  display            : flex;
  align-items        : center;
  justify-content    : center;
  text-align         : center;
}

.asp-sidebar .menu .item .icon {
  opacity: .9;
}

.asp-sidebar .menu {}

.asp-sidebar .menu .item {}

/* voicebar animation */

.voice {
  z-index                : 999;
  transform              : translatey(20em);
  width                  : 100%;
  height                 : 270px;
  background-color       : #494949;
  transition             : 0.7s;
  position               : fixed;
  bottom                 : 0px;
  border-top-left-radius : 30px;
  border-top-right-radius: 30px;
}

.voice.is-closed {
  transform: translatey(0em);
}

.voice textarea {
  border-radius : 30px;
  padding-left  : 12px;
  line-height   : 100%;
  padding-bottom: 10px;
  padding-top   : 10px;
  padding-right : 80px;
  box-sizing    : border-box;
}

.voice .image-profile {
  width              : 150px;
  height             : 150px;
  background-position: center top;
  border             : 5px solid #ddd;
  align-self         : center;
  display            : flex;
  align-items        : center;
  justify-content    : center;
  text-align         : center;
}

.voice .mic {
  top  : 0px;
  right: -10px;
}

/* tab */

.container--tabs {}

.container--tabs .nav-tabs {
  display        : flex;
  justify-content: space-between;
  width          : 100%;
  margin         : 0;
  list-style-type: none;
  border-bottom  : 1px solid #ddd;
}

.container--tabs .nav-tabs>li {
  width        : 100%;
  margin-bottom: -1px;
}

.container--tabs .nav-tabs>li>a {
  line-height  : 1.42857143;
  padding      : 10px;
  text-align   : center;
  width        : 100%;
  display      : block;
  border       : 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

.container--tabs .nav-tabs>li>a:hover {
  border-color: #eee #eee #ddd;
}

.container--tabs .nav-tabs>li.active>a,
.container--tabs .nav-tabs>li.active>a:hover,
.container--tabs .nav-tabs>li.active>a:focus {
  cursor             : pointer;
  width              : 100%;
  font-weight        : bold;
  display            : block;
  background-color   : #fff;
  border             : 1px solid #ddd;
  border-bottom-color: transparent;
}

.container--tabs .tab-content {
  float: left;
  width: 100%;
}

.container--tabs .tab-content>.tab-pane {
  display: none;
}

.container--tabs .tab-content>.tab-pane.active {
  display: block;
}

.container--tabs .tab-content>.active {
  display: block;
}

@media (min-width: 1024px) {
  .fancybox__slide {
      padding: 64px 64px!important;
  }

  #video_player {
    width: 650px!important;
    height: 350px!important;
  }

  .fancybox__carousel .fancybox__slide.has-map .fancybox__content, .fancybox__carousel .fancybox__slide.has-pdf .fancybox__content, .fancybox__carousel .fancybox__slide.has-video .fancybox__content, .fancybox__carousel .fancybox__slide.has-html5video .fancybox__content {
    height:100%!important;
  }


}

.apexcharts-legend {
  row-gap: 5px;
  column-gap: 5px;
}



/* */
swiper-container {
  width: 100%;
  height: 100%;
}

swiper-slide {
  font-size: 18px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px 20px;
  padding-bottom:40px;
  margin-top:-10px;
}

.parallax-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 130%;
  height: 100%;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
}

swiper-slide .title {
  font-size: 41px;
  font-weight: 300;
}

swiper-slide .subtitle {
  font-size: 21px;
}

swiper-slide .text {
  font-size: 14px;
  max-width: 400px;
  line-height: 1.3;
}

.container--tabs {}

.container--tabs .analytics-nav-tabs {
  font-size      : 0.75rem;
  display        : flex;
  justify-content: space-between;
  width          : 100%;
  color          : rgba(0, 0, 0, 0.357);
  margin         : 0;
  list-style-type: none;
}

.container--tabs .analytics-nav-tabs>li {
  width        : 100%;
  margin-bottom: -1px;
}

.container--tabs .analytics-nav-tabs>li>a {
  line-height  : 1.42857143;
  padding      : 10px;
  text-align   : center;
  width        : 100%;
  display      : block;
  border       : 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

.container--tabs .analytics-nav-tabs>li>a:hover {
  border-color: #eee #eee #ddd;
}

.container--tabs .analytics-nav-tabs>li.active>a,
.container--tabs .analytics-nav-tabs>li.active>a:hover,
.container--tabs .analytics-nav-tabs>li.active>a:focus {
  cursor       : pointer;
  width        : 100%;
  display      : block;
  font-weight  : bold;
  border-bottom: 2px solid #555;
}

.container--tabs .analytics-tab-content {
  float: left;
  width: 100%;
}

.container--tabs .analytics-tab-content>.analytics-tab-pane {
  display: none;
}

.container--tabs .analytics-tab-content>.analytics-tab-pane.active {
  background-color: none !important;
  display         : block;
}

.container--tabs .analytics-tab-content>.active {
  display: block;
}


.card .wrapper {
  width : 350px;
  height: 220px;

  /* background: blue; */
  overflow-x: scroll;
  overflow-y: hidden;
}

.card .content {
  width      : auto;
  white-space: nowrap;
}

.card .item {
  display: inline-block;

  width : 180px;
  height: 500px;
  ;
}

/* checklist card */

.checklist-card {
  border-bottom: 2px rgb(189, 189, 189) solid;
}

.checklist-card:hover {
  background-color: white;
}

.checklist-card textarea {
  border       : 1px solid rgb(189, 189, 189);
  padding      : 2px;
  padding-left : 10px;
  padding-right: 50px;
  min-height: 40px;
}

.w-full-site {
  max-width:1440px;
  margin:auto;
}

/* toolbar */
.toolbar {
  top   : 48px;
  cursor: pointer;
  background-color: #ffffff96;
  backdrop-filter: blur(4px);
}

.toolbar .button {
  width        : 40px;
  min-height   : 40px;
  text-align   : center;
  border-radius: 5px;
  margin-left  : 2px;
  margin-top   : 3px;
}

/* collab */
.overview-card .collapsible {
  cursor: pointer;
  width : 100%;
}

.overview-card .content {}

.overview-card .active,
.collapsible:hover {}

/* jquery sidebar */

.sidebar.left {
  position  : fixed;
  top       : 0;
  left      : -10;
  bottom    : 0;
  width     : 100vw;
  background: var(--bg);
}

.sidebar.right {
  position  : fixed;
  top       : 0;
  left      : -10;
  bottom    : 0;
  width     : 100vw;
  background: var(--bg);
}

.sidebar.bottom {
  left      : 0;
  right     : 0;
  bottom    : 0;
  height    : 100vw;
  background: #03A9F4;
}

.sidebar.top {
  left      : 0;
  right     : 0;
  top       : 0;
  height    : 100vw;
  background: #03A9F4;
}

.sidebars>.sidebar {
  position: fixed;
  padding : 30px;
}

.progress {
  display         : -ms-flexbox;
  display         : flex;
  height          : 1rem;
  overflow        : hidden;
  font-size       : .75rem;
  background-color: #e9ecef;
  border-radius   : 0.25rem;
}

.progress-bar {
  display           : -ms-flexbox;
  display           : flex;
  -ms-flex-direction: column;
  flex-direction    : column;
  -ms-flex-pack     : center;
  justify-content   : center;
  color             : #fff;
  text-align        : center;
  white-space       : nowrap;
  background-color  : #007bff;
  transition        : width .6s ease;
}

.checklist-q0 {
  font-weight: bold;
}

.checklist-q2 {
  font-weight: 700;
}

.checklist-q1 {
  font-weight: 300;
}

.attched {
  margin-top: -10px;
}

.voicepad #results {

  transform        : rotateX(180deg);
  -moz-transform   : rotateX(180deg);
  /* Mozilla */
  -webkit-transform: rotateX(180deg);
  /* Safari and Chrome */
  -ms-transform    : rotateX(180deg);
  /* IE 9+ */
  -o-transform     : rotateX(180deg);
  /* Opera */
}

.voicepad #final {

  transform        : rotateX(180deg);
  -moz-transform   : rotateX(180deg);
  /* Mozilla */
  -webkit-transform: rotateX(180deg);
  /* Safari and Chrome */
  -ms-transform    : rotateX(180deg);
  /* IE 9+ */
  -o-transform     : rotateX(180deg);
  /* Opera */

}

.swiper-slide-card {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* pie */

@property --p {
  syntax       : '<number>';
  inherits     : true;
  initial-value: 0;
}

.pie {
  --p: 20;
  --b: 22px;
  --c: darkred;
  --w: 150px;

  width        : var(--w);
  aspect-ratio : 1;
  position     : relative;
  display      : inline-grid;
  margin       : 5px;
  place-content: center;
  font-size    : 25px;
  font-weight  : bold;
  font-family  : sans-serif;

}

.pie:before,
.pie:after {
  content      : "";
  position     : absolute;
  border-radius: 50%;
}

.pie:before {
  inset: 0;
  background:
    radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%), #0000 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
  mask        : radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}

.pie:after {
  inset     : calc(50% - var(--b)/2);
  background: var(--c);
  transform : rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}

.animate {
  animation: p 1s .5s both;
}

.no-round:before {
  background-size : 0 0, auto;
  background-color: #d0d0d0;
}

.no-round:after {
  content: none;
}


.global-color-red {
  color: red!important;
  --blue : red!important;
  --green : red!important;
  --green-dark : red!important;
  --red : red!important;
  --muted : rgba(255, 0, 0, 0.5)!important;
  --lantern : red!important;
  --rose : red!important;
}

.global-color-green {
  color: green!important;
  --green: green!important;
  --red: green!important;
  --blue : green!important;
  --muted : rgba(0, 128, 0, 0.5)!important;
  --lantern : green!important;
  --rose : green!important;
}

.global-color-blue {
  color: blue!important;
  --green: blue!important;
  --red: blue!important;
  --blue : blue!important;
  --green-dark : blue!important;
  --muted : rgba(0, 0, 255, 0.5)!important;
  --lantern : blue!important;
  --rose : blue!important;
}

.global-color-orange {
  color: orange!important;
  --green: orange!important;
  --red: orange!important;
  --blue : orange!important;
  --green-dark : orange!important;
  --muted : rgba(255, 166, 0, 0.5)!important;
  --lantern : orange!important;
  --rose : orange!important;
}

.inputGroup {
  display: block;
  margin: 10px 0;
  position: relative;
}
.inputGroup label {
  padding: 0px 30px;
  width: 100%;
  display: block;
  text-align: left;
  color: #3c454c;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 200ms ease-in;
  overflow: hidden;
}
.inputGroup label:before {
  width: 10px;
  height: 10px;
  border-radius: 20px;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale3d(1, 1, 1);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  z-index: -1;
}
.inputGroup label:after {
  width: 24px;
  height: 24px;
  content: "";
  border: 2px solid #d1d7dc;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
  background-repeat: no-repeat;
  background-position: -1px 0px;
  border-radius: 5px;
  z-index: 2;
  position: absolute;
  left:10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 200ms ease-in;
}
.inputGroup input:checked ~ label:before {
  transform: translate(-50%, -50%) scale3d(56, 56, 1);
  opacity: 1;
}
.inputGroup input:checked ~ label:after {
  background-color: rgb(12 74 110);
  border-color: rgb(12 74 110);
}
.inputGroup input {
  width: 32px;
  height: 32px;
  order: 1;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  visibility: hidden;
}

@keyframes p {
  from {
    --p: 0
  }
}

.highlight {
  border   : 2px dotted red;
  animation: highlight 2000ms ease-out;
}

@media (min-width: 1024px) {
  .md\:container {
    max-width: 1024px;
  }
  .inputGroup label:after {
    right: 50%;
    left:30%;
  }
  .inputGroup label {
    padding: 12px 30px;
  }
}

@keyframes highlight {
  0% {
    background-color: rgb(255, 255, 192);
  }

  100% {
    background-color: white;
  }
}

@keyframes highlight-dark {
  0% {
    background-color: rgba(0, 0, 0, 0.634);
  }

  100% {
    background-color: rgba(26, 10, 203, 0.628);
  }
}

@media (prefers-color-scheme: dark) {

  html,
  body {
    color      : rgb(235, 235, 235);
    font-weight: 100 !important;
  }

  .font-bold {
    font-weight: 100 !important;
  }

  .toolbar {
    background-color: #00000096;
  }

  .swiper-slide-card {
    background: rgb(39, 45, 49);
  }

  .apexcharts-legend-text,
  .apexcharts-datalabel-value {
    color: white!important;
  }
  .apexcharts-yaxis-label {
    color:white!important;
  }

  .border {
    border-width: 0.125px!important;
    border-color: #5e6175;
  }
  .border-b {
    border-color: #5e6175;
  }

  .bg {
    background-color: #1E2127 !important;
  }

  .bg-gray-light {
    background-color: #1E2127 !important;
  }

  .bg-green,
  .bg-blue,
  .bg-gray,
  .bg-blue-light {
    background-color: #26292f !important;
  }

  @keyframes highlight {
    0% {
      background-color: rgba(0, 0, 0, 0.634);
    }
  
    100% {
      background-color: rgba(26, 10, 203, 0.628);
    }
  }
  

  .bg-red {
    background-color: rgb(147, 27, 51) !important;
  }

  .bg-white {
    background-color: rgb(45 51 56) !important;

  }

  .navbar,
  .topbar {
    background-color: rgb(45 51 56) !important;
  }

  [sidebarjs-container] {
    background-color: rgb(45 51 56) !important;
  }

  .no-round:before {
    background-color: rgb(63 67 76) !important;
  }

  input,
  textarea {
    background-color: rgb(13, 13, 13) !important;
    border-color    : #5e6175;
    border-width    : 0.125px;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-box-shadow     : 0 0 0 30px rgb(13, 13, 13) inset !important;
    -webkit-text-fill-color: rgb(171, 171, 171) !important;
  }

  textarea:focus,
  input:focus {
    outline: #2A85D9;
    border : 1px solid #585c78;
  }

  button {
    border-color: #5e6175;
    border-width: 0.125px;
  }

  hr {
    border-color: #5e6175;
    border-width: 0.125;
  }

  .text-white {
    color: rgb(208, 208, 208);
  }

  .angularjs-toast .alert.alert-success,
  .toast-alert .alert.alert-success {
    color           : rgb(208, 208, 208) !important;
    background-color: #08512e !important;
    border-color    : #5e6175 !important;
    border-width    : 0.125px !important;
  }

  .angularjs-toast .alert.alert-info,
  .toast-alert .alert.alert-info {
    color           : rgb(208, 208, 208) !important;
    background-color: #26292f !important;
    border-color    : #5e6175 !important;
    border-width    : 0.125px !important;
  }

  .angularjs-toast .alert.alert-warning,
  .toast-alert .alert.alert-warning {
    color           : rgb(208, 208, 208) !important;
    background-color: #26292f !important;
    border-color    : #5e6175 !important;
    border-width    : 0.125px !important;
  }

  .angularjs-toast .alert.alert-danger,
  .toast-alert .alert.alert-danger {
    color           : rgb(208, 208, 208) !important;
    background-color: #591515 !important;
    border-color    : #441f23 !important;
    border-width    : 0.125px !important;
  }

  .container--tabs .nav-tabs>li.active>a,
  .container--tabs .nav-tabs>li.active>a:hover,
  .container--tabs .nav-tabs>li.active>a:focus {
    /* color: #555; */
    cursor             : pointer;
    width              : 100%;
    font-weight        : bold;
    color              : rgb(208, 208, 208) !important;
    display            : block;
    background-color   : #1E2127 !important;
    border             : 0.125px solid #5e6175;
    border-bottom-color: transparent;
  }

  .container--tabs .nav-tabs>li>a {
    color: #555;
    border: 0.125px solid #5e61753a;
  }

  .container--tabs .nav-tabs {
    border: 0.125px solid #5e61753a;
  }

  .progress-card .bg-green {
    background-color: #60D624!important;
  }

  .skeleton {
    animation: skeleton-loading-dark 1s linear infinite alternate;
  }
  
  .ngdialog.ngdialog-theme-default .ngdialog-content {
    border-width: 0.125px!important;
    border-color: #5e6175!important;
    background-color: #47494e !important;
    color: rgb(208, 208, 208)!important;
  }

  .ngdialog.ngdialog-theme-default .ngdialog-button.ngdialog-button-primary {
    background-color: rgb(45 51 56) !important;
  }
  
  .ngdialog.ngdialog-theme-default .ngdialog-button.ngdialog-button-secondary {
    background-color: #4b4c52!important;
    /* color: #777; */
  }
}

.gradient-button-primary {
  background: linear-gradient(180deg, #c10b3f 0%, #E50000 100%);
}



[data-theme="dark"] html,
[data-theme="dark"] body {
    color      : rgb(235, 235, 235);
    font-weight: 100 !important;
  }

  [data-theme="dark"] .font-bold {
    font-weight: 100 !important;
  }

  [data-theme="dark"] .toolbar {
    background-color: #00000096;
  }

  [data-theme="dark"] .swiper-slide-card {
    background: rgb(39, 45, 49);
  }

  [data-theme="dark"] .apexcharts-legend-text,
  [data-theme="dark"] .apexcharts-datalabel-value {
    color: white!important;
  }

  [data-theme="dark"] .border {
    border-width: 0.125px!important;
    border-color: #5e6175;
  }
  [data-theme="dark"] .border-b {
    border-color: #5e6175;
  }

  [data-theme="dark"] .bg {
    background-color: #1E2127 !important;
  }

  [data-theme="dark"] .bg-gray-light {
    background-color: #1E2127 !important;
  }

  [data-theme="dark"] .bg-green,
  [data-theme="dark"] .bg-blue,
  [data-theme="dark"] .bg-gray,
  [data-theme="dark"] .bg-blue-light {
    background-color: #26292f !important;
  }

  [data-theme="dark"] .bg-red {
    background-color: rgb(147, 27, 51) !important;
  }

  [data-theme="dark"] .bg-white {
    background-color: rgb(45 51 56) !important;

  }

  [data-theme="dark"] .navbar,
  [data-theme="dark"] .topbar {
    background-color: rgb(45 51 56) !important;
  }

  [data-theme="dark"] [sidebarjs-container] {
    background-color: rgb(45 51 56) !important;
  }

  [data-theme="dark"] .no-round:before {
    background-color: rgb(63 67 76) !important;
  }

  [data-theme="dark"] input,
  [data-theme="dark"] textarea {
    background-color: rgb(13, 13, 13) !important;
    border-color    : #5e6175;
    border-width    : 0.125px;
  }

  [data-theme="dark"] input:-webkit-autofill,
  [data-theme="dark"] input:-webkit-autofill:hover,
  [data-theme="dark"] input:-webkit-autofill:focus,
  [data-theme="dark"] input:-webkit-autofill:active {
    -webkit-box-shadow     : 0 0 0 30px rgb(13, 13, 13) inset !important;
    -webkit-text-fill-color: rgb(171, 171, 171) !important;
  }

  [data-theme="dark"] textarea:focus,
  [data-theme="dark"] input:focus {
    outline: #2A85D9;
    border : 1px solid #585c78;
  }

  [data-theme="dark"] button {
    border-color: #5e6175;
    border-width: 0.125px;
  }

  [data-theme="dark"] hr {
    border-color: #5e6175;
    border-width: 0.125;
  }

  [data-theme="dark"] .highlight {
    border   : 2px dotted red;
    animation: highlight-dark 2000ms ease-out;
  }

  [data-theme="dark"] .text-white {
    color: rgb(208, 208, 208);
  }

  [data-theme="dark"] .angularjs-toast .alert.alert-success,
  [data-theme="dark"] .toast-alert .alert.alert-success {
    color           : rgb(208, 208, 208) !important;
    background-color: #08512e !important;
    border-color    : #5e6175 !important;
    border-width    : 0.125px !important;
  }

  [data-theme="dark"] .angularjs-toast .alert.alert-info,
  [data-theme="dark"] .toast-alert .alert.alert-info {
    color           : rgb(208, 208, 208) !important;
    background-color: #26292f !important;
    border-color    : #5e6175 !important;
    border-width    : 0.125px !important;
  }

  [data-theme="dark"] .angularjs-toast .alert.alert-warning,
  [data-theme="dark"] .toast-alert .alert.alert-warning {
    color           : rgb(208, 208, 208) !important;
    background-color: #26292f !important;
    border-color    : #5e6175 !important;
    border-width    : 0.125px !important;
  }

  [data-theme="dark"] .angularjs-toast .alert.alert-danger,
  [data-theme="dark"] .toast-alert .alert.alert-danger {
    color           : rgb(208, 208, 208) !important;
    background-color: #591515 !important;
    border-color    : #441f23 !important;
    border-width    : 0.125px !important;
  }

  [data-theme="dark"] .container--tabs .nav-tabs>li.active>a,
  [data-theme="dark"] .container--tabs .nav-tabs>li.active>a:hover,
  [data-theme="dark"] .container--tabs .nav-tabs>li.active>a:focus {
    /* color: #555; */
    cursor             : pointer;
    width              : 100%;
    font-weight        : bold;
    color              : rgb(208, 208, 208) !important;
    display            : block;
    background-color   : #1E2127 !important;
    border             : 0.125px solid #5e6175;
    border-bottom-color: transparent;
  }

  [data-theme="dark"] .container--tabs .nav-tabs>li>a {
    color: #555;
    border: 0.125px solid #5e61753a;
  }

  [data-theme="dark"] .container--tabs .nav-tabs {
    border: 0.125px solid #5e61753a;
  }

  [data-theme="dark"] .progress-card .bg-green {
    background-color: #60D624!important;
  }

  [data-theme="dark"] .skeleton {
    animation: skeleton-loading-dark 1s linear infinite alternate;
  }
  
  [data-theme="dark"] .ngdialog.ngdialog-theme-default .ngdialog-content {
    border-width: 0.125px!important;
    border-color: #5e6175!important;
    background-color: #47494e !important;
    color: rgb(208, 208, 208)!important;
  }

  [data-theme="dark"] .ngdialog.ngdialog-theme-default .ngdialog-button.ngdialog-button-primary {
    background-color: rgb(45 51 56) !important;
  }
  
  [data-theme="dark"] .ngdialog.ngdialog-theme-default .ngdialog-button.ngdialog-button-secondary {
    background-color: #4b4c52!important;
    /* color: #777; */
  }

@media (min-width: 1024px) {
  [data-theme="dark"] .lg\:bg-gray-100 {
    background-color: #47494e;
  }
  [data-theme="dark"] .lg\:bg-sky-100 {
    background-color: #47494e;
  }

  [data-theme="dark"] .lg\:dark\:hover\:bg-gray-700 {
    background-color: #47494e;
  }
}



  
  @keyframes skeleton-loading-dark {
    0% {
      background-color: #4f5055;
    }
    100% {
      background-color: #4b4c52;
    }
  }