$transition: all 0.4s;
$color-blue: #028be5;
$color-dark-blue: rgb(0, 76, 125);
$color-black: rgb(36, 39, 42);
$color-gray: rgb(86, 96, 105);
$color-red: rgb(202, 52, 52);
$color-green: rgb(26, 146, 96);
$color-yellow: rgb(246, 158, 0);
$background-gray: rgb(245, 247, 250);
$background-color-2: rgba(39, 156, 255, 0.08);
$background-color-red: rgba(202, 52, 52, 0.1);
$background-color-yellow: rgb(242, 227, 124);
$border-color: rgb(212, 212, 212);
$white: #fff;
$box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);


.extra-icon {
    display: none;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    right: -100%;
    transition: all 0.5s ease;
}

li:hover .extra-icon {
    right: 0; 
    display: inline-block;
}

.custom-profile-button{
    cursor: pointer;
}

.custom-profile-button:hover{
    color: blue;
}

/* Override Select2 styles */
.select2-container--default .select2-selection--single {
    position: static;
    border-radius: 4px !important;
    color: $color-black; 
    font-size: 13px;
    line-height: 35px;
    font-weight: 400;
    border: $border-color; 
    background-color: rgb(248, 248, 249);
    outline: none;
    height: 42px;
    min-height: 42px;
    padding: 0 10px;
    transition: all 0.4s;
    width: 100%;
    margin: 0 !important;
    box-sizing: border-box;
    box-shadow: none;
}

/* Add hover state */
.select2-container--default .select2-selection--single:hover {
    border: 1px solid #028be5 !important;
}

.select2-container--default, .select2-container--open,
.select2-container--default .select2-selection--single:hover {
    border: #028be5;
    box-shadow: 0 0 5px rgba(39, 156, 255, 0.2);
    background: $white;
    color: $color-black; 
    outline: none !important;
}
/* Customize the text display of the selected item */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: $color-black; 
    line-height: 35px;
    padding-left: 0; /* Adjust padding if needed */
    padding-right: 10px; /* Adjust padding if needed */
}

.select2-container--default .select2-selection--single.sb-error {
    border: $color-red;
    box-shadow: 0 0 5px rgba(202, 52, 52, 0.25);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 10px;
}

.select2-container--default .select2-dropdown {
    background-color: rgb(248, 248, 249);
    border: $border-color; 
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 200px;
    overflow-y: auto;
}

.select2-container--default .select2-results__option {
    padding: 8px 12px;
    color: $color-black; /* Replace $color-black with the actual color code */
}

/* Optional: Customize highlighted options */
.select2-container--default .select2-results__option--highlighted {
    background-color: #028be5 !important; /* Replace $color-blue with the actual color code */
    color: #fff !important;
}