2FAuth/resources/sass/app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
//@import '~bootstrap/scss/bootstrap';
@import '~bulma/bulma';

nav.level {
    padding: 0 20px;
    /*postion: fixed;*/
}

#otp {
    cursor: pointer;
}

.twofaccount {
    font-size: 1.7rem !important;
    width: 250px;
    display: block;
    height: auto;
    border-radius: 6px;
}

.twofaccount img {
    height: 0.75em;
    width: 0.75em;
    margin-right: .1em;
}

.twofaccount span {
  display: block;
}

.dots {
  list-style: none;
  padding: 0;
}

.dots li {
  display: inline-block;
  margin: 0 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: hsl(348, 100%, 61%); /* red */
}
.dots li[data-is-active] ~ li {
  background: hsl(0, 0%, 7%);  /* grey */
}

.dots li:nth-child(-n+27) {
  background: hsl(48, 100%, 67%); /* yellow */
}

.dots li:nth-child(-n+18) {
  background: hsl(141, 71%, 48%); /* green */
}

.dots li:nth-child(3n+2), .dots li:nth-child(3n+3) {
    //background-color: black;
    display:none;
}

.dots li:last-child() {
    // background-color: black;
    //display:none;
}



.input, .select select, .textarea {
  background-color: hsl(0, 0%, 21%);
  border-color: hsl(0, 0%, 29%);
  color: hsl(0, 0%, 71%);
}

.label {
  color: hsl(0, 0%, 48%);
}

.modal .field.is-grouped:last-child {
  justify-content: flex-end;
  padding-top: 20px;
}

footer {
  padding: 10px 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 30;
}

footer .field.has-addons {
  justify-content: center;
}