.select{
    width: fit-content;
    font-size: 16px;
    font-weight: 600;
    color: var(--main-text-color);
    cursor: pointer;
    height: 45px;
    width: fit-content;
    min-width: 125px;
    text-align:center;
    border: none;
    background-size: 300% 100%;
    border-radius: 50px;
    transition: all 0.4s ease-in-out;
    background-image: var(--button-gradient);
    box-shadow: var(--button-box-shadow);
}

.select:hover {
    background-position: 100% 0;
    background-image: var(--button-gradient-hover);
    box-shadow: var(--button-box-shadow-hover);
    transition: all 0.4s ease-in-out;
}

.select:focus {
    outline: none;
}

.deleteTrue{
    background-image: none;
    background-color: var(--dark-red) !important;
}

.deleteTrue:hover{
    box-shadow: none;
    background-image: none;
    background-color: var(--dark-red);
}

.gruen{
    background-color: var(--main-green) !important;
    background-image: none !important;
}

.delete{
    background-color: var(--dark-red) !important;
    background-image: none !important;
    margin-top: 10px;
}

/*Large Desktop, TV, etc.*/
@media screen and (min-width: 1200px){

}

/*Tablet landscape, laptop, Desktop*/
@media screen and (min-width: 992px) and (max-width: 1199px){ 

}

/*Tablet portrait*/
@media screen and (min-width: 767px) and (max-width: 991px) { 

}

/*mobile landscape*/
@media screen and (min-width: 480px) and (max-width: 766px){

}

@media screen and (max-width: 479px){
    
}