:root {
    --bg: #F8FAFC;
    --black: #002c5c;
    --dark-grey: #323b49;
    --grey: #64748b;
    --primary: #3b82f6;
    --green: #10b981;
    --red: #ef4444;
    --stroke: #f1f2f4;
    --area-bg: #EEF4FF;
    --drop-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
}

html {
    font-size: clamp(8px, 0.89vw + 2.286px, 16px);
}

button{
    cursor: pointer;
    transition: transform 300ms ease-in-out, background 800ms ease-in-out, box-shadow 600ms ease-in-out;
}

button:hover{
    transform: scale(1.05);
}

button:disabled{
    opacity: 50%;
    transform: none;
}

.green-btn:hover {
    background-clip: text;
    color: transparent;
    background: linear-gradient(0deg, rgba(86, 212, 7, 0.5), rgba(0, 0, 0, 0));
    box-shadow: 0 0 0.5rem 0.25rem rgba(86, 212, 7, 0.5);
}

.green-btn:disabled, .red-btn:disabled, .reject-btn:disabled {
    background: linear-gradient(180deg, rgba(93, 93, 93, 0.5), rgba(0, 0, 0, 0));
    box-shadow: none;
}

.red-btn, .reject-btn {
    color: red;
}

.red-btn:hover {
    transform: matrix();
}

.reject-btn:hover {
    background: linear-gradient(0deg, rgba(212, 41, 7, 0.5), rgba(0, 0, 0, 0));
    box-shadow: 0 0 0.5rem 0.25rem rgba(212, 7, 7, 0.5);
}

.menu-selector {
    transition: all 300ms ease-in-out;
}

.menu-selector:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0.5rem 0.25rem rgba(7, 212, 154, 0.425);
}

.desc {
    max-height: 3rem;
    overflow: hidden;
    padding: 0.75rem 0;
    border-radius: calc(1rem/4);
    color: var(--dark-grey);
    background: transparent;
    transition:
        max-height    200ms ease-in-out,
        padding       200ms ease-in-out,
        background    300ms ease-in-out 100ms,
        color         300ms ease-in-out,
        box-shadow    300ms ease-out 100ms,
        transform     200ms ease-out;
}

.desc:hover, .desc:active {
    max-height: 25rem;
    padding: 0.75rem;
    overflow-y: auto;
    background: var(--area-bg);
    box-shadow: 0 0 1rem 0rem rgba(0, 0, 0, 0.08);
    transform: translateY(0.5rem) translateX(0.5rem);
    z-index: 10;
}

.active-tab, .menu-selector:active {
    transform: scale(1.1);
    color: rgb(0, 252, 181);
    background: rgba(7, 212, 154, 0.425);
    box-shadow: 0 0 0.5rem 0.25rem rgba(7, 212, 154, 0.425);

}

.active-tab span {
    color: rgb(2, 86, 62);
    /* rgb(2, 57, 41); */
}

.recycle-btn {
    display: block;
    margin-top: auto;
}

.btl{
    border: 3px solid #4bf63b;
}

.bgtl{
    background: linear-gradient(180deg, #4bf63b 0%, #6c09c8 50%, #4bf63b 100%);
}

.btp{
    border: 3px solid #6c09c8;
}

.btr{
    border: 3px solid #fb2424;
}