/* EXAMPLE PANEL-TUPLE
<div class="panel-transparent">
  <div class="panel-heading">
    <h3>Panel primary</h3>
  </div>

  <div class="panel-body">
    Panel content
    <!-- <i class='fas fa-female'></i>
    <i class="material-icons">computer</i> -->
  </div>
</div> */

/* CSS CLASSES */

.panel-transparent {
  background: none;
  border-radius: 5px;

  /* MARGIN
  Could be defined in different forms as below.
  top - right - bottom - left
  top - right=left - bottom
  top=bottom - right=left */
  margin-left: 80px;
  margin-right: 80px;
  /* left and right was 50 before */

  padding: 10px; /* or 1% */
  /* was 5 before */
}

.panel-transparent .panel-heading {
  background: rgba(122, 130, 136, 0.2)!important;
  border-radius: inherit;

  margin-left: inherit;
  margin-right: inherit;
  margin-top: 30px; /* was 100 in the beginning */

  padding: inherit;
}

.panel-transparent .panel-body {
  background: rgba(46, 51, 56, 0.2)!important;
  border-radius: inherit;

  margin-left: inherit;
  margin-right: inherit;
  margin-top: 10px;
  /* Even if it's 0, it always puts ~10px gap in between. */

  padding: inherit;

  overflow: auto;
}

.panel-transparent .whitish {
  background: rgba(255, 255, 255, 0.4)!important;
  border-radius: 10px;
  margin-left: inherit;
  margin-right: inherit;
  padding: inherit;
  overflow: auto;
}

.panel-transparent .whitish::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  font-size: 64px;
  background: rgba(0, 0, 0, 0.2);
  z-index: -1;
}

.panel-transparent .whitish:hover:before {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}