:root {
    /* Card Colors */
    --orange: #edb232;
    --green: #1f7b27;
    --red: #c02323;
    --black: #000000;
    --pink: #d86dcd;
    --yellow: #efdf2d;
    --purple: #7e4fd5;
    --brown: #5f4a15;
    --blue: #1201fd;
    
    /* Card background Color */
    --light_gray: #eaeaea;

    /* Border width */
    --width: 2px;
}

button {
    border-radius: 0.2rem !important;
}

/* Custom color dropdown styles */
.color-option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 2px solid transparent;
    border-radius: 4px;
    margin: 2px 4px;
    transition: all 0.2s;
}

.color-option:hover {
    background-color: #f8f9fa;
}

.color-option .color-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    margin-right: 10px;
    border: 2px solid #dee2e6;
}

/* Color borders for each option */
.color-option.Yellow {
    border-left: 4px solid var(--yellow) !important;
}

.color-option.Purple {
    border-left: 4px solid var(--purple) !important;
}

.color-option.Orange {
    border-left: 4px solid var(--orange) !important;
}

.color-option.Green {
    border-left: 4px solid var(--green) !important;
}

.color-option.Brown {
    border-left: 4px solid var(--brown) !important;
}

.color-option.Red {
    border-left: 4px solid var(--red) !important;
}

.color-option.Black {
    border-left: 4px solid var(--black) !important;
}

.color-option.Pink {
    border-left: 4px solid var(--pink) !important;
}

.color-option.Blue {
    border-left: 4px solid var(--blue) !important;
}

.color-option.active,
.color-option.selected {
    background-color: #e9ecef;
    font-weight: 600;
}

.color-option.active.Yellow,
.color-option.selected.Yellow {
    background-color: rgba(239, 223, 45, 0.2);
    border-left: 4px solid var(--yellow) !important;
}

.color-option.active.Purple,
.color-option.selected.Purple {
    background-color: rgba(126, 79, 213, 0.2);
    border-left: 4px solid var(--purple) !important;
}

.color-option.active.Orange,
.color-option.selected.Orange {
    background-color: rgba(237, 178, 50, 0.2);
    border-left: 4px solid var(--orange) !important;
}

.color-option.active.Green,
.color-option.selected.Green {
    background-color: rgba(31, 123, 39, 0.2);
    border-left: 4px solid var(--green) !important;
}

.color-option.active.Brown,
.color-option.selected.Brown {
    background-color: rgba(95, 74, 21, 0.2);
    border-left: 4px solid var(--brown) !important;
}

.color-option.active.Red,
.color-option.selected.Red {
    background-color: rgba(192, 35, 35, 0.2);
    border-left: 4px solid var(--red) !important;
}

.color-option.active.Black,
.color-option.selected.Black {
    background-color: rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--black) !important;
}

.color-option.active.Pink,
.color-option.selected.Pink {
    background-color: rgba(216, 109, 205, 0.2);
    border-left: 4px solid var(--pink) !important;
}

.color-option.active.Blue,
.color-option.selected.Blue {
    background-color: rgba(18, 1, 253, 0.2);
    border-left: 4px solid var(--blue) !important;
}

#bagColorDropdown {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#color-dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Bordes de color para el botón cuando se selecciona */
#bagColorDropdown.border-yellow {
    border-left: 4px solid var(--yellow) !important;
}

#bagColorDropdown.border-purple {
    border-left: 4px solid var(--purple) !important;
}

#bagColorDropdown.border-orange {
    border-left: 4px solid var(--orange) !important;
}

#bagColorDropdown.border-green {
    border-left: 4px solid var(--green) !important;
}

#bagColorDropdown.border-brown {
    border-left: 4px solid var(--brown) !important;
}

#bagColorDropdown.border-red {
    border-left: 4px solid var(--red) !important;
}

#bagColorDropdown.border-black {
    border-left: 4px solid var(--black) !important;
}

#bagColorDropdown.border-pink {
    border-left: 4px solid var(--pink) !important;
}

#bagColorDropdown.border-blue {
    border-left: 4px solid var(--blue) !important;
}