Common styling for Shiny apps

shiny_app_styles.css

.img-local {
}

.small-box .img-local {
  position: absolute;
  top: auto;
  bottom: 5px;
  right: 5px;
  z-index: 0;
  font-size: 70px;
  color: rgba(0, 0, 0, 0.15);
}

#plot-container {
  position: relative;
}
#loading-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  margin-top: -33px;  /* half of the spinner's height */
  margin-left: -33px; /* half of the spinner's width */
}
#Map.recalculating {
  z-index: -2;
}

#toast-container.toast-top-center > div {
  width: 50%;
  height: 200px;
}

.toast-top-center { 
   top: 400px;   
   margin: 0 auto;
   left: 115px;
 }

.btn-go { 
  color: #ffffff; 
  background-color: #3C8DBC; 
  border-color: #3C8DBC; 
} 
 
.btn-go:hover, 
.btn-go:focus, 
.btn-go:active, 
.btn-go.active, 
.open .dropdown-toggle.btn-go { 
  color: #ffffff; 
  background-color: #357CA5; 
  border-color: #3C8DBC; 
} 
 
.btn-go:active, 
.btn-go.active, 
.open .dropdown-toggle.btn-go { 
  background-image: none; 
} 
 
.btn-go.disabled, 
.btn-go[disabled], 
fieldset[disabled] .btn-go, 
.btn-go.disabled:hover, 
.btn-go[disabled]:hover, 
fieldset[disabled] .btn-go:hover, 
.btn-go.disabled:focus, 
.btn-go[disabled]:focus, 
fieldset[disabled] .btn-go:focus, 
.btn-go.disabled:active, 
.btn-go[disabled]:active, 
fieldset[disabled] .btn-go:active, 
.btn-go.disabled.active, 
.btn-go[disabled].active, 
fieldset[disabled] .btn-go.active { 
  background-color: #3C8DBC; 
  border-color: #3C8DBC; 
} 
 
.btn-go .badge { 
  color: #3C8DBC; 
  background-color: #ffffff; 
}

  /* image links with text on hover */
.img_app {
    border-radius: 5px;
    border-style: solid;
    border-width: 3px;
    border-color: #3C8DBC;
}

.img_link_wrap {
  position: relative;
  height: 100%;
  width: 100%;
}

.img_hover_layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(60, 141, 188, 0.6);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .5s, visibility .5s;
}

.img_link_wrap:hover .img_hover_layer {
  visibility: visible;
  opacity: 1;
}

.img_hover {
  transition: .5s;
  transform: translateY(1em);
}

.img_link_wrap:hover .img_hover {
  transform: translateY(0);
}