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

@import url(/assets/frontend/css/color.css);

/* Different Colors */
#item1 { background-color: #24fc3a; }
#item2 { background-color: #1e90ff; }
#item3 { background-color: #d52ec1; }
#item4 { background-color: #ffa502; }

html, body {
    overflow: hidden;
}

::-webkit-scrollbar {
    width: 6px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #f0f0f0;
    /* border-radius: 4px; */
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #d4d4d4;
    /* border-radius: 10px; */
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #d8d8d8;
  }

.mainHight {
    height: calc(100% - 140px);
}
.menu-container {
    position: relative;
}

/* Main Button */
.menu-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary);
    color: white;
    font-size: 28px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
    position: relative;
    z-index: 10;
    transform: rotate(45deg);
}

.menu-btn.open {
    background-color: #dc3545;
}

.menu-btn span {
    transition: transform 0.3s ease;
}

.menu-btn.open {
    transform: rotate(0deg);
}

/* Floating Items */
.menu-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translate(-50%, 0);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-item i {
    font-size: 20px;
    color: white;
}

.bottomBar.active svg {
    fill: var(--primary);
}

.bottomBar.active h6 {
    color: var(--primary);
}