.list {
    @apply flex flex-col flex-grow-0 flex-shrink-0 self-start w-full
}

.list-container {
    @apply flex flex-grow-0 flex-shrink-0 space-x-2 items-center w-full whitespace-normal transition duration-100 ease-in-out
}

.list-content {
    @apply flex flex-grow min-w-min
}

/*<editor-fold desc="Filled Style">*/
/*General Definitions*/
.list-filled-base {
    @apply text-white p-2 font-semibold border-b last:border-b-0
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.list-filled-black {
    @apply bg-gray-800 border-black border-opacity-50 hover:bg-gray-300 hover:text-gray-700 focus:bg-gray-300 focus:text-gray-700
}

.list-filled-black-active {
    @apply bg-gray-600 border-black border-gray-700 hover:bg-gray-300 hover:text-gray-700 !important
}

/*Blue*/
.list-filled-blue {
    @apply bg-blue-500 border-blue-300 border-opacity-50 hover:bg-blue-200 hover:text-blue-700 focus:bg-blue-200 focus:text-blue-700
}

.list-filled-blue-active {
    @apply bg-blue-100 border-blue-300 text-blue-700 hover:bg-blue-200 hover:text-blue-700
}

/*Gray*/
.list-filled-gray {
    @apply bg-gray-500 border-gray-300 border-opacity-50 hover:bg-gray-200 hover:text-gray-700 focus:bg-gray-200 focus:text-gray-700
}

.list-filled-gray-active {
    @apply bg-white border-gray-300 text-gray-700 hover:bg-gray-200 hover:text-gray-700
}

/*Green*/
.list-filled-green {
    @apply bg-green-500 border-green-300 border-opacity-50 hover:bg-green-200 hover:text-green-700 focus:bg-green-200 focus:text-green-700
}

.list-filled-green-active {
    @apply bg-green-100 border-green-300 text-green-700 hover:bg-green-200 hover:text-green-700
}

/*Indigo*/
.list-filled-indigo {
    @apply bg-indigo-500 border-indigo-300 border-opacity-50 hover:bg-indigo-200 hover:text-indigo-700 focus:bg-indigo-200 focus:text-indigo-700
}

.list-filled-indigo-active {
    @apply bg-indigo-100 border-indigo-300 text-indigo-700 hover:bg-indigo-200 hover:text-indigo-700
}

/*Pink*/
.list-filled-pink {
    @apply bg-pink-500 border-pink-300 border-opacity-50 hover:bg-pink-200 hover:text-pink-700 focus:bg-pink-200 focus:text-pink-700
}

.list-filled-pink-active {
    @apply bg-pink-100 border-pink-300 text-pink-700 hover:bg-pink-200 hover:text-pink-700
}

/*Purple*/
.list-filled-purple {
    @apply bg-purple-500 border-purple-300 border-opacity-50 hover:bg-purple-200 hover:text-purple-700 focus:bg-purple-200 focus:text-purple-700
}

.list-filled-purple-active {
    @apply bg-purple-100 border-purple-300 text-purple-700 hover:bg-purple-200 hover:text-purple-700
}

/*Red*/
.list-filled-red {
    @apply bg-red-500 border-red-100 border-opacity-50 hover:bg-red-200 hover:text-red-700 focus:bg-red-200 focus:text-red-700
}

.list-filled-red-active {
    @apply bg-red-100 border-red-100 border-red-300 text-red-700 hover:bg-red-200 hover:text-red-700
}

/*White*/
.list-filled-white {
    @apply bg-white text-gray-700 border-gray-500 border-opacity-50 hover:bg-gray-200 hover:text-gray-700 focus:bg-gray-200 focus:text-gray-700
}

.list-filled-white-active {
    @apply bg-gray-300 border-gray-500 text-gray-700 hover:bg-gray-200 hover:text-gray-700
}

/*Yellow*/

.list-filled-yellow {
    @apply bg-yellow-500 border-yellow-300 border-opacity-50 hover:bg-yellow-200 hover:text-yellow-700 focus:bg-yellow-200 focus:text-yellow-700
}

.list-filled-yellow-active {
    @apply bg-yellow-100 border-yellow-300 text-yellow-700 hover:bg-yellow-200 hover:text-yellow-700
}

/*</editor-fold>*/

/*<editor-fold desc="Light Style">*/
/*General Definitions*/
.list-light-base {
    @apply first:border-t border-b border-l border-r p-2 font-semibold
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.list-light-black {
    @apply bg-gray-500 border-black text-gray-50 hover:bg-gray-500 hover:text-white
}

.list-light-black-active {
    @apply bg-gray-300 border-black text-gray-700 hover:bg-gray-500 hover:text-white
}

/*Blue*/
.list-light-blue {
    @apply bg-blue-200 border-blue-500 text-blue-800 hover:bg-blue-500 hover:text-white
}

.list-light-blue-active {
    @apply bg-blue-300 border-blue-500 text-blue-700 hover:bg-blue-500 hover:text-white
}

/*Gray*/
.list-light-gray {
    @apply bg-gray-200 border-gray-500 text-gray-800 hover:bg-gray-500 hover:text-white
}

.list-light-gray-active {
    @apply bg-white border-gray-500 text-gray-700 hover:bg-gray-500 hover:text-white
}

/*Green*/
.list-light-green {
    @apply bg-green-200 border-green-500 text-green-800 hover:bg-green-500 hover:text-white
}

.list-light-green-active {
    @apply bg-green-300 border-green-500 text-green-700 hover:bg-green-500 hover:text-white
}

/*Indigo*/
.list-light-indigo {
    @apply bg-indigo-200 border-indigo-500 text-indigo-800 hover:bg-indigo-500 hover:text-white
}

.list-light-indigo-active {
    @apply bg-indigo-300 border-indigo-500 text-indigo-700 hover:bg-indigo-500 hover:text-white
}

/*Pink*/
.list-light-pink {
    @apply bg-pink-200 border-pink-500 text-pink-800 hover:bg-pink-500 hover:text-white
}

.list-light-pink-active {
    @apply bg-pink-300 border-pink-500 text-pink-700 hover:bg-pink-500 hover:text-white
}

/*Purple*/
.list-light-purple {
    @apply bg-purple-200 border-purple-500 text-purple-800
}

.list-light-purple-active {
    @apply bg-purple-300 border-purple-500 text-purple-700 hover:bg-purple-500 hover:text-white
}

/*Red*/
.list-light-red {
    @apply bg-red-200 border-red-500 text-red-800 hover:bg-red-500 hover:text-white
}

.list-light-red-active {
    @apply bg-red-300 border-red-500 text-red-700 hover:bg-red-500 hover:text-white
}

/*White*/
.list-light-white {
    @apply bg-white border-gray-300 text-gray-700
}

.list-light-white-active {
    @apply bg-gray-300 border-gray-400 border-opacity-75 text-gray-700 hover:bg-gray-500 hover:text-white
}
/*Yellow*/
.list-light-yellow {
    @apply bg-yellow-200 border-yellow-500 text-yellow-800 hover:bg-yellow-500 hover:text-white
}

.list-light-yellow-active {
    @apply bg-yellow-300 border-yellow-500 text-yellow-700 hover:bg-yellow-500 hover:text-white
}

/*</editor-fold>*/

/*<editor-fold desc="Outline Style">*/
.list-outline-base {
    @apply first:border-t border-b border-l border-r p-2 font-semibold
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.list-outline-black {
    @apply border-black text-gray-700 hover:bg-gray-500 hover:text-white
}

.list-outline-black-active {
    @apply bg-gray-300 border-black text-gray-700 hover:bg-gray-500 hover:text-white
}

/*Blue*/
.list-outline-blue {
    @apply border-blue-500 text-blue-700 hover:bg-blue-100
}

.list-outline-blue-active {
    @apply bg-blue-100 border-blue-500 text-blue-700 hover:bg-blue-500 hover:text-white
}

/*Gray*/
.list-outline-gray {
    @apply border-gray-500 text-gray-700 hover:bg-gray-200
}

.list-outline-gray-active {
    @apply bg-gray-200 border-gray-500  text-gray-700 hover:bg-gray-500 hover:text-white
}

/*Green*/
.list-outline-green {
    @apply border-green-500 text-green-700 hover:bg-green-100
}

.list-outline-green-active {
    @apply bg-green-100 border-green-500 text-green-700 hover:bg-green-500 hover:text-white
}

/*Indigo*/
.list-outline-indigo {
    @apply border-indigo-500 text-indigo-700 hover:bg-indigo-100
}

.list-outline-indigo-active {
    @apply bg-indigo-100 border-indigo-500 text-indigo-700 hover:bg-indigo-500 hover:text-white
}

/*Pink*/
.list-outline-pink {
    @apply border-pink-500 text-pink-700 hover:bg-pink-100
}

.list-outline-pink-active {
    @apply bg-pink-100 border-pink-500 text-pink-700 hover:bg-pink-500 hover:text-white
}

/*Purple*/
.list-outline-purple {
    @apply border-purple-500 text-purple-700 hover:bg-purple-100
}

.list-outline-purple-active {
    @apply bg-purple-100 border-purple-500 text-purple-700 hover:bg-purple-500 hover:text-white
}

/*Red*/
.list-outline-red {
    @apply border-red-500 text-red-700 hover:bg-red-100
}

.list-outline-red-active {
    @apply bg-red-100 border-red-500 text-red-700 hover:bg-red-500 hover:text-white
}

/*White*/
.list-outline-white {
    @apply border-gray-300 text-gray-700 hover:bg-white
}

.list-outline-white-active {
    @apply bg-gray-200 border-gray-300 border-opacity-100 text-gray-700 hover:bg-gray-500 hover:text-white
}

/*Yellow*/
.list-outline-yellow {
    @apply border-yellow-500 text-yellow-700 hover:bg-yellow-100
}

.list-outline-yellow-active {
    @apply bg-yellow-100 border-yellow-500 text-yellow-700 hover:bg-yellow-500 hover:text-white
}

/*</editor-fold>*/

/*<editor-fold desc="Elegant Style">*/
/*General Definitions*/
.list-elegant-base {
    @apply first:border-t border-b border-l border-r border-dashed p-4 font-semibold bg-red-200
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.list-elegant-black {
    @apply bg-gray-500 text-white text-opacity-80 border-gray-800 hover:bg-gray-300 hover:text-gray-700 hover:text-opacity-80
}

.list-elegant-black-active {
    @apply bg-gray-200 border-opacity-100 border-opacity-100 text-gray-700 text-opacity-80 hover:bg-gray-300 hover:text-gray-700 hover:text-opacity-80
}

/*Blue*/
.list-elegant-blue {
    @apply bg-blue-50 text-gray-700 text-opacity-80 border-blue-300 hover:bg-blue-200
}

.list-elegant-blue-active {
    @apply bg-blue-100 border-opacity-100 text-blue-700 text-opacity-80 hover:bg-blue-200 hover:text-gray-700 hover:text-opacity-80
}

/*Gray*/
.list-elegant-gray {
    @apply bg-gray-50 text-gray-700 text-opacity-80 border-gray-300 hover:bg-gray-200
}

.list-elegant-gray-active {
    @apply bg-white border-opacity-100 text-gray-700 text-opacity-80 hover:bg-gray-300 hover:text-gray-700 hover:text-opacity-80
}

/*Green*/
.list-elegant-green {
    @apply bg-green-50 text-gray-700 text-opacity-80 border-green-300 hover:bg-green-200
}

.list-elegant-green-active {
    @apply bg-green-100 border-opacity-100 text-green-700 text-opacity-80 hover:bg-green-200 hover:text-gray-700 hover:text-opacity-80
}

/*Indigo*/
.list-elegant-indigo {
    @apply bg-indigo-50 text-gray-700 text-opacity-80 border-indigo-300 hover:bg-indigo-200
}

.list-elegant-indigo-active {
    @apply bg-indigo-100 border-opacity-100 text-indigo-700 text-opacity-80 hover:bg-indigo-200 hover:text-gray-700 hover:text-opacity-80
}

/*Pink*/
.list-elegant-pink {
    @apply bg-pink-50 text-gray-700 text-opacity-80 border-pink-300 hover:bg-pink-200
}

.list-elegant-pink-active {
    @apply bg-pink-100 border-opacity-100 text-pink-700 text-opacity-80 hover:bg-pink-200 hover:text-gray-700 hover:text-opacity-80
}

/*Purple*/
.list-elegant-purple {
    @apply bg-purple-50 text-gray-700 text-opacity-80 border-purple-300 hover:bg-purple-200
}

.list-elegant-purple-active {
    @apply bg-purple-100 border-opacity-100 text-purple-700 text-opacity-80 hover:bg-purple-200 hover:text-gray-700 hover:text-opacity-80
}

/*Red*/
.list-elegant-red {
    @apply bg-red-50 text-gray-700 text-opacity-80 border-red-300 hover:bg-red-200
}

.list-elegant-red-active {
    @apply bg-red-100 border-opacity-100 text-red-700 text-opacity-80 hover:bg-red-200 hover:text-gray-700 hover:text-opacity-80
}

/*White*/
.list-elegant-white {
    @apply bg-white text-gray-700 text-opacity-80 border-gray-300 hover:bg-gray-200
}

.list-elegant-white-active {
    @apply bg-gray-100 border-opacity-100 text-gray-700 text-opacity-80 hover:bg-gray-200 hover:text-gray-700 hover:text-opacity-80
}

/*Yellow*/
.list-elegant-yellow {
    @apply bg-yellow-50 text-gray-700 text-opacity-80 border-yellow-300 hover:bg-yellow-200
}

.list-elegant-yellow-active {
    @apply bg-yellow-100 border-opacity-100 text-yellow-700 text-opacity-80 hover:bg-yellow-200 hover:text-gray-700 hover:text-opacity-80
}

/*</editor-fold>*/

/*<editor-fold desc="Filled Style">*/
/*General Definitions*/
.list-simple-base {
    @apply px-2 py-1 font-semibold border-b last:border-b-0
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.list-simple-black {
    @apply border-gray-800 hover:bg-gray-300 hover:border-transparent hover:text-gray-700 focus:bg-gray-300 focus:text-gray-700
}

.list-simple-black-active {
    @apply font-bold text-gray-700 hover:bg-gray-300 hover:text-gray-700
}

/*Blue*/
.list-simple-blue {
    @apply border-blue-200 hover:bg-blue-50 hover:border-transparent hover:text-blue-700 focus:bg-blue-200 focus:text-blue-700
}

.list-simple-blue-active {
    @apply text-blue-700 hover:bg-blue-50 hover:text-blue-700
}

/*Gray*/
.list-simple-gray {
    @apply border-gray-200 hover:bg-gray-200 hover:border-transparent hover:text-gray-700 focus:bg-gray-200 focus:text-gray-700
}

.list-simple-gray-active {
    @apply font-bold text-gray-700 hover:bg-gray-200 hover:text-gray-700
}

/*Green*/
.list-simple-green {
    @apply border-green-200 hover:bg-green-50 hover:border-transparent hover:text-green-700 focus:bg-green-200 focus:text-green-700
}

.list-simple-green-active {
    @apply text-green-700 hover:bg-green-50 hover:text-green-700
}

/*Indigo*/
.list-simple-indigo {
    @apply border-indigo-200 hover:bg-indigo-50 hover:border-transparent hover:text-indigo-700 focus:bg-indigo-200 focus:text-indigo-700
}

.list-simple-indigo-active {
    @apply text-indigo-700 hover:bg-indigo-50 hover:text-indigo-700
}

/*Pink*/
.list-simple-pink {
    @apply border-pink-200 hover:bg-pink-50 hover:border-transparent hover:text-pink-700 focus:bg-pink-200 focus:text-pink-700
}

.list-simple-pink-active {
    @apply text-pink-700 hover:bg-red-50 hover:text-pink-700
}

/*Purple*/
.list-simple-purple {
    @apply border-purple-200 hover:bg-purple-50 hover:border-transparent hover:text-purple-700 focus:bg-purple-200 focus:text-purple-700
}

.list-simple-purple-active {
    @apply text-purple-700 hover:bg-purple-50 hover:text-purple-700
}

/*Red*/
.list-simple-red {
    @apply border-red-200 hover:bg-red-50 hover:border-transparent hover:text-red-700 focus:bg-red-200 focus:text-red-700
}

.list-simple-red-active {
    @apply text-red-700 hover:bg-red-50 hover:text-red-700
}

/*White*/
.list-simple-white {
    @apply border-gray-200 hover:bg-white hover:border-transparent hover:text-gray-700 focus:bg-white focus:text-gray-700
}

.list-simple-white-active {
    @apply font-bold text-gray-700 hover:bg-white hover:text-gray-700
}

/*Yellow*/

.list-simple-yellow {
    @apply bg-yellow-500 border-yellow-300 border-opacity-50 hover:bg-yellow-200 hover:text-yellow-700 focus:bg-yellow-200 focus:text-yellow-700
}

.list-simple-yellow-active {
    @apply bg-yellow-100 border-opacity-100 text-yellow-700 hover:bg-yellow-200 hover:text-yellow-700
}

/*</editor-fold>*/
