.navbar-hidden {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

body {
  padding-top: 56px;
  /* Set the background image */
  background-image: url("../img/darkLegion1280.jpg");
  /* Center the background image */
  background-position: center center;
  /* Make the background image fixed */
  background-attachment: fixed;
  /* Resize the background image to cover the entire screen */
  background-size: cover;
  /* Set a background color as a fallback if the image is unavailable or takes time to load */
  /* Extra small devices (portrait phones) */
  /* Small devices (landscape phones) */
  /* Medium devices (tablets) */
  /* Large devices (desktops) */
  /* Extra large devices (large desktops) */
  color: whitesmoke;
}
body .title {
  font-size: 0.85em;
  display: inline-block;
  padding: 0.2em 0.5em;
  color: darkred;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 4px;
}
body .btnToogle, body .btnImg {
  opacity: 0.1;
  transition: opacity 0.3s ease-in-out;
}
body .btnToogle:hover, body .btnImg:hover {
  opacity: 1;
}
@media (max-width: 575.98px) {
  body body {
    background-color: lightcoral;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  body body {
    background-color: lightskyblue;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  body body {
    background-color: lightgreen;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  body body {
    background-color: lightyellow;
  }
}
@media (min-width: 1200px) {
  body body {
    background-color: lightpink;
  }
}

.active {
  color: red !important;
}

.navbar .navbar-brand {
  color: white;
}
.navbar .navbar-brand:hover {
  color: red;
}
.navbar .nav-link.active,
.navbar .navbar-nav .show > .nav-link {
  color: red;
}
.navbar .dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
.navbar li.nav-item ul {
  background-color: rgba(51, 51, 51, 0.5);
}
.navbar li.nav-item a {
  color: white;
}
.navbar li.nav-item a:hover {
  color: red;
}

/* Extra small devices (portrait phones) */
@media (max-width: 575.98px) {
  body {
    background-color: lightcoral;
  }
}
/* Small devices (landscape phones) */
@media (min-width: 576px) and (max-width: 767.98px) {
  body {
    background-color: lightskyblue;
  }
}
/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 991.98px) {
  body {
    background-color: lightgreen;
  }
}
/* Large devices (desktops) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  body {
    background-color: lightyellow;
  }
}
/* Extra large devices (large desktops) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  body {
    background-color: lightpink;
  }
}
/* Extra Extra  large devices (large desktops) */
@media (min-width: 1400px) {
  body {
    background-color: orange;
  }
}
#gridHeader .row {
  border: 1px solid red; /* Change the color and style as needed */
  padding: 10px 0; /* Top and bottom margin */
  margin: 10px 0; /* Top and bottom margin */
  background-color: rgba(0, 0, 0, 0.7);
}

.dropdown-item.active {
  background-color: rgba(0, 0, 0, 0.3) !important;
}

textarea {
  resize: vertical;
  width: 100%;
}

/* Hide edit elements by default */
.edit-mode {
  display: noblockne;
}

/* Show edit elements when in edit mode */
.edit-mode.show {
  display: block;
}

/* Show view elements by default */
.view-mode {
  display: block;
}

/* Hide view elements when in edit mode */
.view-mode.hide {
  display: none;
}

.definition .view-mode {
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid black;
}

.view-mode a {
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid black;
  padding: 2px;
}
.view-mode a:hover {
  color: #f03b4d;
}

#new #imagePreview {
  display: inline-grid;
  width: 100%;
}
#new label {
  display: inline;
  cursor: pointer;
  color: white; /* Default color when unchecked */
  font-size: 1.5rem; /* Set the font size to make it look like an h3 */
  margin-bottom: 10px; /* Add some margin for spacing */
}
#new label:hover {
  pointer-events: cursor;
}
#new .bigger {
  display: block;
  cursor: pointer;
  color: white; /* Default color when unchecked */
  font-size: 1.5rem; /* Set the font size to make it look like an h3 */
}
#new checkbox {
  cursor: pointer;
}
#new input[type=file] {
  width: 100%; /* Ensure the input takes up the full width */
}
#new input[type=file]:hover {
  cursor: pointer;
}
#new input[type=text] {
  width: 100%; /* Ensure the input takes up the full width */
}
#new textarea {
  width: 100%;
  height: 50px;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}
#new .myCheckbox:checked + .myLabel {
  color: red;
}
#new .form-check-input:checked + .form-check-label {
  color: red; /* Change the label's color when the checkbox is checked */
}
#new #aT,
#new #aS {
  background-color: rgba(0, 0, 0, 0.6);
}

.valid-feedback,
.greg-valid-feedback {
  color: greenyellow;
}

.invalid-feedback,
.greg-invalid-feedback {
  color: red;
}

.form-text {
  display: grid;
}/*# sourceMappingURL=style.css.map */