/* p {
  margin: 10px 0 !important;
} */

.login-container {
  width: 400px;
  margin-top: 50px;
  text-align: center;
}

.loginImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fa-small {
  font-size: 16px !important;
}

.btn-float {
  float: left;
  margin-right: 10px;
}

.img-small {
  width: 180px;
}

.fa-large {
  font-size: 26px !important;
}

.input-group{
  display:table;
  width:100%;
}
.input-group .input-field,
.input-group .input-group-addon{
  display:table-cell;
}

.search-form {
  margin: 70px 0;
}

/* Apply styles to the modal container */
#modalContainer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent background */
  z-index: 1;
}

/* Apply styles to the modal */
#modal {
  background-color: #212529;
  padding: 20px;
  max-width: 70%; /* Set the maximum width for the modal */
  max-height: 80%; /* Set the maximum height for the modal */
  margin: 50px auto; /* Center the modal vertically and horizontally */
  overflow-y: scroll; /* Enable vertical scrolling within the modal */
}

.row .col {
  padding: min(0.5rem, 1vw);
}

input[type=file]::file-selector-button {
  padding: .2em .4em;
  border-radius: .2em;
  background-color: #212529;
  border: 2px solid #212529;
  color: #fff;
  /* transition: 1s; */
}

input[type=text]::placeholder {
  padding: .2em .4em;
  border-radius: .2em;
  color: white;
  background-color: #212529;
}

/* position #openButton to the bottom right of the viewport, responsive*/
#openButton {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  z-index: 2;
}


/* input[type=file]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
} */

#viewSettingsButton {
  position: fixed;  
  z-index: 999;
  left: 20px;
  bottom: 20px;
  animation: bounce 1.0s infinite alternate;
  margin: 2%;
}

#editorLaunchButton {
  position: fixed;  
  z-index: 999;
  left: 160px;
  bottom: 39px;
  margin: 2%;
}

::placeholder {
  color: black;
}

#navHover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}

#navHover:hover {
  transform: translateY(0);
}

.layout-container {
  /* border: solid red 1px; */
  padding: 0;
}

/* Style for the image container */
.image-container {
  position: relative;
  text-align: center;
}

/* Style for the friendly name */
.image-name {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px;
  width: 80%;
  box-sizing: border-box;
  /* display: none; */
}

.image-container:hover .image-name {
  display: block;
}

/* Style for the image */
.background-image {
  width: 100%;
  height: auto;
  display: block;
}

.hero-section{
  height: 40vh;
  color: white;
  text-align: center;
  position: relative;  
}

.hero-section h1 {
  font-size: 3rem;
  margin-top: 10vh;
  position: absolute;
}

.bg-section {
  max-height: 60vh;
  overflow-y: scroll;
}

.table-section {
  overflow-y: scroll;
  max-height: 60vh;
  min-height: 40vh;
}

#userProfileImage {
  max-width: 10%;
}

.profile-section {
  max-height: 35vh;
}

.other-info {
  overflow-y: scroll;
  max-height: 32vh;
}

/* Key Frames */
@keyframes bounce {
  from {
      transform: translateY(-50%) scale(1);
  }
  to {
      transform: translateY(-50%) scale(1.1);
  }
}