Style.css for driver.js

style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'Rubik', system-ui, sans-serif;
  }
}

.color-selected{
  border: 2px black solid;
}




/* Class assigned to popover wrapper */
.driver-popover.driverjs-theme {
  background-color: #ffffff;
  color: #000;
  min-width: 320px;
  border-radius: 12px;
}

.driver-popover.driverjs-theme .driver-popover-title {
  font-size: 20px;
}

.driver-popover.driverjs-theme .driver-popover-title,
.driver-popover.driverjs-theme .driver-popover-description,
.driver-popover.driverjs-theme .driver-popover-progress-text {
  color: #000;
  margin-bottom: 24px;
}

.driver-popover.driverjs-theme .driver-popover-description{
  color: #707070;
}

.driver-popover.driverjs-theme .driver-popover-footer{
  align-items: center;
  justify-content: center;
  margin-top: 28px;
}
.driver-popover.driverjs-theme  .driver-popover-progress-text{
  margin: 0;
}

/* change button theme here */
.driver-popover.driverjs-theme button {
  flex: 1;
  text-align: center;
  align-items: center;
  background-color: #5355dc;
  color: #ffffff;
  text-shadow: none;
  font-size: 14px;
  padding: 8px 8px;
  border-radius: 8px;
  max-width: 100px;
}
/* Don't forget to change the button over effect */
.driver-popover.driverjs-theme button:hover {
  background-color: #000;
  color: #ffffff;
}

.driver-popover.driverjs-theme .driver-popover-navigation-btns {
  justify-content: end;
  gap: 3px;
}

.driver-popover.driverjs-theme .driver-popover-close-btn {
  color: #0a0a0a;
  background-color: white;
  border: none;
  font-size: 20px;
  
  height: 12px;
}

.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
  color: #0a0a0a;
  background-color: white;
  border: none;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
  border-left-color: #ffffff;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
  border-right-color: #ffffff;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
  border-top-color: #ffffff;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
  border-bottom-color: #ffffff;
}



.driver-popover.driverjs-theme .driver-popover-prev-btn {
  background-color: #F1EFEF;
  color: black;
  border: none;
}