panel/app/assets/stylesheets/application.scss

@import "bootstrap";
@import "bootstrap-markdown/css/bootstrap-markdown.min";
@import "font-awesome";
@import "select2/dist/css/select2";
@import "select2-theme-bootstrap4/dist/select2-bootstrap";
@import "dragula-with-animation/dist/dragula";

$footer-height: 60px;

/* Colores */
$purpura: #5c004d;
$turquesa: #009389;
$azul: #0b2660;
$fucsia: #e9193e;
$celeste: #91f0ff;
$verde: #96d643;

/* Tema */
ol.breadcrumb {
  background-color: white;
}

.breadcrumb-item {
  color: black;
}

.form-control {
  &:focus {
    border-color: transparentize($verde, 0.25);
    box-shadow: 0 0 0 0.2rem transparentize($verde, 0.75);
  }
}

.btn-info {
  background-color: $turquesa;
  border-color: $turquesa;
  &:focus {
    box-shadow: 0 0 0 0.2rem transparentize($turquesa, 0.5);
  }
}

.btn-success {
  background-color: $verde;
  border-color: $verde;
  &:focus {
    box-shadow: 0 0 0 0.2rem transparentize($verde, 0.5);
  }
}

.turbolinks-progress-bar {
  height: 3px;
  background-color: $purpura;
}



.background-cover {
  background: image-url("background.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.full-height {
  height: calc(100vh - #{$footer-height});
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: $footer-height;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: $footer-height;
  line-height: $footer-height;
  text-align: center;
}

textarea.post-content {
  min-height: 80vh;
  font-family: monospace;
  font-size: 90%;
}

.rtl {
  direction: rtl;
  text-align: right;
}

.btn-text {
  background-color: transparent;
  border: none;
}

.inline {
  display: inline;
}

.sindu_dragger table {
  background: transparent !important;
}

.d-none, .d-block {
  transition: all 3s;
}

/* Select2 Bootstrap4 Validation */

.was-validated {
  .form-control {
    &:invalid {
      ~ .select2-container--bootstrap {
        border: 1px solid #dc3545;
        border-radius: 0.25rem;

        .select2-dropdown {
          border: 1px solid #dc3545;
          border-radius: 0.25rem;
        }
      }
    }
    &:valid {
      ~ .select2-container--bootstrap {
        border: 1px solid #28a745;
        border-radius: 0.25rem;

        .select2-dropdown {
          border: 1px solid #28a745;
          border-radius: 0.25rem;
        }
      }
    }
  }
}

.field-groups {
  .field-group {
    .remove-group {
      display: none
    }
  }

  .extra-groups {
    .field-group {
      border-top: 1px solid lightgray;
      padding-top: 1rem;

      .remove-group {
        display: inline-block;
      }
    }
  }
}