application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require selectize
 *= require selectize.default
 */

@import 'bootstrap';

// $fa-font-path: '/packs/media/webfonts';
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import 'layout';
@import 'forms';
@import 'edit_teachers';
@import 'merge_modal';
@import './sidebar.scss';
@import "./selectize.scss";

html {
  min-height: 100%;
  position: relative;
  --berkeley-blue: #003262;
}

body {
  margin: 70px 0 255px;
  /* bottom = footer height */
}

.btn-xs {
  padding: 0 0.5rem;
  font-size: 0.6rem;
  line-height: 1.5;
  border-radius: 100%;
}

.btn-primary {
  background-color: var(--berkeley-blue);
  border-color: var(--berkeley-blue);
  color: white;

  &:visited {
    color: white;
  }
}

.btn-purple {
  background-color: #8A2BE2; /* Light purple */
}

/* Style for the box around the file upload link */
.box-link {
  display: inline-block;
  padding: 5px 10px; 
  height: 40px;
  border: 1px solid #ccc; 
  border-radius: 5px;
  background-color: #f9f9f9;
}

.btn-blue {
  background-color: #9dc0ee;
}

footer {
  position: absolute;
  margin: 0;
  background-color: #18568C;
  color: #FFF;
  padding-top: 25px;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}

footer .container .social-icons {
  text-align: center;
  margin-bottom: 10px;
}

footer .container .social-icons a {
  margin-right: 10px;
}

.fa-2x {
  font-size: 2em;
}

footer .footer-links {
  max-width: 80em;
  margin: 0.2em auto;
  padding: 1em;
  text-align: center;
  font-size: 12px;
}

.social-icons > a {
  color: #fff;
}

#sign-up-form-container {
  margin-bottom: 80px;
}

.google-signin {
  background-color: white;
}

.hero-btn {
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
  width: 160px;
  margin-right: 15px;
}

.admin-jumbotron {
  margin-top: 55px;
}

#map {
  height: 500px;
  margin-bottom: 55px;
}

a {
  color: var(--indigo);
}

footer a {
    color: #B3EFFF;
}

footer a:hover,
footer a:active {
    /* As similar lines below, each line has been considered.
       Links' colors are placed at the end so that they have the
       highest specificity. */
    color: #F2E205;
}

.pages-sidebar {
  border-right: 1px solid var(--berkeley-blue);
  padding: 1em 0;
}

.requests-dashboard {
  th[data-col="status"],
  td[data-col="status"] {
    display: none;
  }
}

.primary-email-dot,
.bounced-email-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
  cursor: default;
}

.primary-email-dot {
  background-color: #007bff;
}

.bounced-email-dot {
  background-color: #dc3545;
}

.trapezoid {
  position: absolute;
  bottom: -11px;
  left: 36px;
  border-top-style: solid;
  border-top-width: 12px;
  border-top-color: #0C3559;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  height: 0;
  width: 60px;
  z-index: 100;
}