:root {
    --colecture-main-purple: #6320EE;
    --colecture-main-purple-rgb: 99, 32, 238;

    --colecture-main-highlight: #25E48E; /* green */
    --colecture-main-highlight-rgb: 37, 228, 142;

    --colecture-gray: #E3E3DE; /* gray */
    --colecture-gray-rgb: 227, 227, 222;

    --colecture-secondary-purple: #8075FF; /* gray */
    --colecture-secondary-purple-rgb: 128, 117, 255;

    --colecture-black: #0D0D07;
    --colecture-black-rgb: 13, 13, 7;

    color: var(--colecture-main-purple) !important;
    --bs-font-sans-serif: 'Verdana', serif !important;
    font-size: 14pt;
    /* --bs-body-font-size: 1.5rem; */

    --bs-primary: var(--colecture-main-purple) !important;

}

body {
    background-color: #f8f9fa;
}

[data-bs-theme="dark"] body{
    background-color: var(--colecture-black);
}

/*
[data-bs-theme="dark"] .nav-item {
    background-color: var(--colecture-black);
    color: var(--colecture-main-purple);
}*/

[data-bs-theme="dark"] .colecture-header {
    background-color: var(--colecture-black);
    color: var(--colecture-main-purple);
    border: 1px solid var(--colecture-main-purple);
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.6);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .card-header{
    /* background-color: var(--colecture-main-purple);
     filter: brightness(50%); /* even darker */
    color: var(--colecture-main-highlight);
}

.btn-primary {
    --bs-btn-border-color: var(--colecture-main-purple);
    --bs-btn-bg: var(--colecture-main-purple);
    --bs-btn-hover-bg: var(--colecture-secondary-purple);
}

.btn-primary:hover {
}

.btn-primary:active {
}

.btn-outline-primary {
    --bs-btn-color: var(--colecture-main-purple);
    --bs-btn-border-color: var(--colecture-main-purple);
    --bs-btn-hover-bg: var(--colecture-secondary-purple);
}

.toast {
  background-color: #fff !important;
  opacity: 1 !important;
}

.card-header{
    /* background-color: var(--colecture-gray); */
}

.dev-only {
    border: 2px dashed #0d6efd; /* Bootstrap primary color */
    background-color: rgba(13, 110, 253, 0.05); /* subtle background */
    padding: 0.5rem;
    border-radius: 0.375rem;
}

.getacon-badge{
    background-color: var(--getacon-green);
    color: var(--getacon-dark-blue);
}

.colecture-header {
    background-color: var(--colecture-main-purple);
    color: var(--colecture-gray);
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.6);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.colecture-header .navbar-toggler {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

.colecture-header .navbar-toggler:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.85);
}

.colecture-header .navbar-toggler:focus {
    /*box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.28);*/
    box-shadow: none;
}

.colecture-header .navbar-toggler:not(.collapsed) {
    /*background-color: rgba(255, 255, 255, 0.12);*/
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 0.12rem rgba(255, 255, 255, 0.22);
}

/*
.colecture-header-footer-bg .nav-link{
    color: var(--colecture-main-highlight);
}*/

.colecture-footer {
    background-color: var(--colecture-main-purple);
    color: var(--colecture-gray);
}

.colecture-header .link-secondary:visited,
.colecture-footer .link-secondary {
    color: var(--colecture-gray) !important;
}

.colecture-footer .link-secondary:active {
    color: var(--colecture-gray) !important;
}

.colecture-footer .link-secondary:hover {
    filter: brightness(85%); /* slightly darker */
}

.colecture-footer .link-secondary:focus
.colecture-footer .link-secondary .active {
    filter: brightness(70%); /* even darker */
}

.colecture-footer .build {
    font-size: 8pt;
}


.colecture-header .nav-link:visited,
.colecture-header .nav-link {
    color: var(--bs-gray-100);
}

.colecture-header .nav-link:hover {
    filter: brightness(85%); /* slightly darker */
}

.colecture-header .nav-link:focus
.colecture-header .nav-link.active {
    filter: brightness(70%); /* even darker */
}

.nav.nav-tabs > .nav-item > .nav-link {
    /* color: var(--colecture-main-purple); */
    color: var(--colecture-secondary-purple);
}

.nav.nav-tabs > .nav-item > .nav-link.active {
    font-weight: bold;
    background-color: var(--bs-gray-100);
}

.getacon-dark-blue-bg {
    background-color: var(--getacon-dark-blue);
}

.cl-card {
    /* Note: If you need to use @extend, this file should be renamed to .scss and processed with SASS */
}

.getacon-property {
    margin-bottom: 1rem;
}
.getacon-rw-label {
    font-weight: bold;
    color: var(--getacon-dark-blue);
    /* transform: translate(15px, 25px); */
    /* background-color: white; */
}

.getacon-ro-label {
    font-weight: bold;
    color: var(--getacon-dark-blue);
}

.icon-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--getacon-light-blue); /* Set the background color */
}

.icon-circle i {
    font-size: 24px; /* Adjust the icon size as needed */
}


  .animated {
    position: relative;
    z-index: 1;
    display: inline-block;
  }

 .animated.inplace::before,
 .animated.inplace::after {
      content: "";
      width: 0px;
      height: 2px;
      background-color: #000;
      position: absolute;
      top: 50%;
      z-index: -1;
      transform: translateY(-50%);
      animation: expandDash 0.8s forwards;
      animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
 }
 .animated.inplace::before {
      margin-left: -20px;
      left: 10px;
      transform: translateX(-100%);
 }

 .animated.inplace::after {
    margin-right: -20px;
    right: 10px;
    transform: translateX(100%);
 }

  .animated.highlight::before {
       content: "";
       width: 0px;
       height: 1.0lh;
       background-color: var(--getacon-green);
       position: absolute;
       top: 50%;
       left: -2.5%;
       transform: translateY(-50%);
       z-index: -1;
       animation: highlightStuff 0.8s forwards, changeColor 10.0s infinite alternate;
       animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }


.animated.moving {
    animation: moveStuff 0.8s forwards;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.animated.moving::before {
    content: "";
    width: 0px;
    height: 2px;
    background-color: black;
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    z-index: -1;
    animation: expandDash 0.8s forwards;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.animated.movingBig {
    position: relative;
    display: inline-block;
    animation: moveStuff 0.8s forwards;
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.animated.movingBig::before {
     content: "";
     width: 0px;
     height: 100%;
     background-color: black;
     position: absolute;
     top: 50%;
     left: 0px;
     transform: translateY(-50%);
     z-index: -1;
     animation: expandDash 0.8s forwards;
     animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

@keyframes highlightStuff {
    to {
        width: 105%;
    }
}

@keyframes moveStuff {
    to {
      padding-left: 50px;
    }
}

@keyframes changeColor {
  from {
    background-color: var(--getacon-green);
  }
  to {
    background-color: var(--getacon-light-blue);
  }
}

  @keyframes expandDash {
    to {
      width: 40px;
    }
  }