.navbar-dark{
  background-color: rgba(0, 0, 0, 0.7);
}

.navbar-brand{
  margin-right: 3rem;
}

.navzone {
  width: 100%;
  height: 3.5rem;
}

.nav-link{
  padding: 0.2rem;
  display: inline;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-item {
  color: #212529 !important;
}

.btn-outline-success {
  color: white;
  border-color: white;
}

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 7rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 32rem;
  background-color: #777;
}

.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
}

.ifc-caption {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 0.5rem;
}

.footer {
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
}

.footer-content{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.copyright{
  text-align: center;
}

.default-container{
  padding-top: 5rem;
}

.faust-doc {
  height: 100vh;
}

.faust-doc-content {
  padding-top:4rem;
  padding-right:0rem!important;
  /* text-align: justify; */
}

ul {
  padding-left: 1rem;
}

/* TODO: not sure why this needs to be done */
pre {
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f5f5f5;
  padding: 0.5rem;
}

#TOC {
  background-color: #f5f5f5;
}

table {
  text-align: center;
  margin-left: auto; 
  margin-right: auto;
  margin-bottom: 1rem;
}

th, td {
  border-bottom: 1px solid black;
  padding: 0.5rem;
}

blockquote{
  padding-left: 1rem;
  margin-left: 3rem;
  border-left: solid 2px #ccc;
}

.col {
  padding-bottom: 15px !important;
}

/******************************************************************************/
/* Faust Editor */
/******************************************************************************/

.application {
  width: 100%;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

.logozone {
  background-color: rgb(30, 30, 30);
}

.actionzone {
  width: 100%;
  background-color: rgb(30, 30, 30);
}

.dynamic-button {
  height: 2.5rem;
  width: 5rem;
  color: black;
}

.action-button {
  height: 2.5rem;
  width: 5rem;
  color: black;
}

.editionzone {
  width: calc(100vw - 6.9rem);
  height: calc(100vh - 7rem);
}

.dropzone {
  border: 4px dashed rgb(30, 30, 30);
}

.dropzone:hover {
  border: 4px dashed #FF3366;
}

.dropzone input {
  color: black;
}

.modalwrapper {
  top:auto;
}

#run{
  background-color: #BCF0FF;
}

#upload{
  background-color: #FF3366;
}

#save{
  background-color: #2D8AC4;
}

#doc{
  background-color: #2EC4B6;
}

#export{
  background-color: #E3D26F;
}

#block{
  background-color: #FF6B42;
}

#config{
  background-color: #486AAF;
}

#run:hover{
  background-color: #566E74;
}

#upload:hover{
  background-color: #A32141;
}

#save:hover{
  background-color: #1D587D;
}

#doc:hover{
  background-color: #1E7D74;
}

#export:hover{
  background-color: #918647;
}

#block:hover{
  background-color: #74311E;
}

#config:hover{
  background-color: #213150;
}