@tailwind base;
@tailwind components;
@tailwind utilities;

.text-main-500{
  --tw-text-opacity: 1;
  color: rgba(11, 166, 101, var(--tw-text-opacity)) 
}
.dark{
  --tw-bg-opacity: 1;
  background-color: rgb(17 20 24 / var(--tw-bg-opacity));
}
.sidebar-active {
    --tw-bg-opacity: 0.2;
    /* background-color: rgba(243, 244, 246, var(--tw-bg-opacity)); bg-gray-100 */
    background-color: rgba(156, 163, 175, var(--tw-bg-opacity)); /* bg-gray-400 */
    --tw-text-opacity: 1;
    color: rgba(11, 166, 101, var(--tw-text-opacity)) /* text-indigo-500 */

  }

  .sidebar-active-dark {
    /* --tw-bg-opacity: 1; */
    /* background-color: rgb(31 41 55 / var(--tw-bg-opacity)); bg-gray-800 */
    /* --tw-text-opacity: 1; */
    /* color: rgba(255, 255, 255, var(--tw-text-opacity)) text-white */

  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }



  
  :root {
    --folderColor: #3CB884;
    --paperColor: #ffffff;
  }
  
  .folder-card {
    transition: all 0.2s ease-in;
  }
  
  .folder__svg {
    width: 100px;
    height: 80px;
  }
  
  .folder__back {
    fill: #0BA665;
    rx: 10;
    ry: 10;
  }
  
  .paper-1 {
    fill: #e6e6e6;
    transition: all 0.3s ease-in-out;
    rx: 10;
    ry: 10;
  }

  .paper-2 {
    fill: #e6e6e6;
    transition: all 0.3s ease-in-out;
    rx: 10;
    ry: 10;
  }
  
  .paper-1:nth-child(2) {
    fill: #f2f2f2;
  }
  
  .paper-1:nth-child(3) {
    fill: #ffffff;
  }

  .paper-2:nth-child(2) {
    fill: #f2f2f2;
  }
  
  .paper-2:nth-child(3) {
    fill: #ffffff;
  }
  
  .folder__front {
    fill: var(--folderColor);
    rx: 10;
    ry: 10;
    transform-origin: bottom;
    transition: all 0.3s ease-in-out;
  }
  
  .folder-card:hover {
    transform: translateY(-5px);
  }
  
  .folder-card:hover .paper-1 {
    y: 12;
    transform: translateY(0%);
  }

  .folder-card:hover .paper-2 {
    y: 22;
    transform: translateY(0%);
  }
  
  .folder-card:hover .folder__front {
    rx: 13;
    ry: 13;
    y: 10; height:80;
    transform: skewY(0deg) scaleY(0.6);
  }
  
  .folder-card:hover .folder__front.right {
    rx: 13;
    ry: 13;
    y: 0; height:80;
    transform: skewY(0deg) scaleY(0.6);
  }

  .loader {
    border-top-color: #0BA665; /* You can change this color as needed */
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
  }

  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

.card-icon-bg{
  background-color: rgb(129 132 138 / 10%);
}


  .dark\:pintree-bg-gray-900:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 20 24 / var(--tw-bg-opacity));
  }
  .dark\:pintree-bg-gray-800:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(34 37 42 / var(--tw-bg-opacity));
  }
  .dark\:pintree-bg-gray-700:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(39 42 48 / var(--tw-bg-opacity));
  }
  .dark\:pintree-bg-gray-600:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(45 49 57 / var(--tw-bg-opacity));
  }


  .dark\:hover\:pintree-bg-gray-900:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 20 24 / var(--tw-bg-opacity));
  }
  .dark\:hover\:pintree-bg-gray-800:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(34 37 42 / var(--tw-bg-opacity));
  }
  .dark\:hover\:pintree-bg-gray-700:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(39 42 48 / var(--tw-bg-opacity));
  }
  .dark\:hover\:pintree-bg-gray-600:hover:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(45 49 57 / var(--tw-bg-opacity));
  }


  .dark\:pintree-border-gray-900:is(.dark *) {
    --tw-bg-opacity: 1;
    border-color: rgb(17 20 24 / var(--tw-bg-opacity));
  }
  .dark\:pintree-border-gray-800:is(.dark *) {
    --tw-bg-opacity: 1;
    border-color: rgb(34 37 42 / var(--tw-bg-opacity));
  }
  .dark\:pintree-border-gray-700:is(.dark *) {
    --tw-bg-opacity: 1;
    border-color: rgb(39 42 48 / var(--tw-bg-opacity));
  }
  .dark\:pintree-border-gray-600:is(.dark *) {
    --tw-bg-opacity: 1;
    border-color: rgb(45 49 57 / var(--tw-bg-opacity));
  }


  .dark\:pintree-ring-gray-900:is(.dark *) {
    --tw-bg-opacity: 1;
    --tw-ring-color: rgb(17 20 24 / var(--tw-bg-opacity));
  }
  .dark\:pintree-ring-gray-800:is(.dark *) {
    --tw-bg-opacity: 1;
    --tw-ring-color: rgb(34 37 42 / var(--tw-bg-opacity));
  }
  .dark\:pintree-ring-gray-700:is(.dark *) {
    --tw-bg-opacity: 1;
    --tw-ring-color: rgb(39 42 48 / var(--tw-bg-opacity));
  }
  .dark\:pintree-ring-gray-600:is(.dark *) {
    --tw-bg-opacity: 1;
    --tw-ring-color: rgb(45 49 57 / var(--tw-bg-opacity));
  }