table { border-collapse: collapse; border: solid; border-color: darkblue !important; } th { color: darkblue !important; } tr:hover { background-color: #f5f5f5; } .delete-btn { background-color: darkred !important; } .delete-btn:hover { background-color: red !important; } .select-wrapper { overflow: visible; border-radius: 6px; color: #444; border: 1px solid #CCC; background: #dddddd3b; cursor: pointer; vertical-align: middle; padding: 5px 15px; text-align: center; } .select-wrapper input.select-dropdown { font-size: 12px; } .select-wrapper:hover { color: #333; background-color: #e7e7e7; } /* PROGRESS BAR STEP */ .stepper-wrapper { margin-top: auto; display: flex; justify-content: space-between; margin: 20px 0px; } .stepper-item { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; @media (max-width: 768px) { font-size: 12px; } } .stepper-item::before { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 15px; left: -50%; z-index: 2; } .stepper-item::after { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 13px; left: 50%; z-index: 2; } .stepper-item .step-counter { position: relative; z-index: 5; display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ccc; margin-bottom: 6px; color: white } .stepper-item.active { font-weight: bold; } .stepper-item.active .step-counter { background-color: rgb(38, 166, 154); } .stepper-item.completed .step-counter { background-color: darkblue; } .stepper-item.empty .step-counter { background-color: #f46536; } .stepper-item.line::after { position: absolute; content: ""; border-bottom: 4px solid darkblue; width: 100%; top: 13px; left: 50%; z-index: 3; } .stepper-item:first-child::before { content: none !important; } .stepper-item:last-child::after { content: none; }