.layout {
    display: grid;
    grid-template-columns: 30% 70%;
    /*min-height: 100vh;*/
    min-height: 60vh;
}

.banner {
    grid-column: span 2;
    padding: 20px;
    font-size: 1.5rem;
    /*background-color: #3498db;*/
}

.sidebar {
    padding: 40px;
    /*background-color: #2ecc71;*/
}

.content {
    padding: 20px;
}

.fileinput {
    display: none;
}

.pad-bottom {
    padding-bottom: 1.2em;
}

.form-container {
    overflow: auto;
}

#viewer-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.slide-canvas {
    width: 480px;
    height: 640px;
}

.info-container {
    position: relative;
}

.info-container img {
    width: 25px;
    height: auto;
}

.popup-box {
    border: 2px solid black;
    border-radius: 8px;
    background-color: white;
    position: absolute;
    visibility: hidden;
}

.info-container:hover .popup-box {
    visibility: visible;
}

.temp-banner {
  position: fixed;
  border: 2px solid black;
  background-color: #444;
  width: 80%;
  left: 10%;
  color: #fff;
  opacity: 1;
  padding: 15px;
  transition: opacity 1s ease-out;
}

.temp-banner.fade-out {
  opacity: 0;
}