@import "./animations.css";
@import "./themes.css";

body {
  font-family: var(--font);
  color:var(--body-color);
  margin: 0;
  padding: 0;
  background:var(--body-background-color);
}
.logo{
  width:35px;
  /* position:absolute; */
  /* left:1em; */
  vertical-align:sub;
  /* top:2em; */
  content:url("./Schelp_Logo_4-2.png");
}
.logo-2{
  width:35px;
  /* position:absolute; */
  /* left:1em; */
  vertical-align:sub;
  /* top:2em; */
  content:url("./Schelp_Logo_5-2.png");
}
/* Dropdown container */
.dropdown {
  position: relative;
  display: inline-block;
}
.show{
  display:block;
}
/* Dropdown toggle button */
.dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .255em;
  vertical-align: .255em;
  border-top: .3em solid transparent;
  border-right: .3em solid transparent;
  border-bottom: .3em solid;
  border-left: .3em solid transparent;
  transform: rotate(0deg);
  transition: transform .2s ease-in-out;
}

/* Dropdown menu */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1002; /* Ensure it's above the navbar and other elements */
  /* float: left; */
  width: 175%;
  padding: .5rem 0;
  /* margin: .125rem 0 0; */
  font-size: 1rem;
  color: white;
  /* text-align: left; */
  background: var(--nav-bg-color);
  border: none;
  border-radius:0;
  /* box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); */
}
table#cat-menu{
  width:100%;
  border-collapse:collapse;
}
table#cat-menu tr{
  border-bottom:1px solid var(--dropdown-border-color);  
}
table#cat-menu td{
  text-align:center;
  position:relative;
  /* padding:10px 20px; */
  box-sizing:border-box;
  /* border-bottom:1px solid white */
}
table#cat-menu td a{
  display:block;
  box-sizing:border-box;
  width:100%;
  height:100%;
  padding:10px 20px;
}
/* Dropdown menu items */
.dropdown-item {
  /* margin-left:10em; */
  /* display: block; */
  width: 100%; /* Ensure full width of the dropdown menu */
  /* padding: .25rem 1.5rem; */
  clear: both;
  font-weight: 400;
  color: white;
  /* text-align: inherit; */
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
tr.dropdown-item td a{
  color:var(--link-color);
  /* text-decoration:none; */
}
/* Dropdown item hover */
table#cat-menu td a:hover {
  color: var(--category-hover-color);
  /* background-color: #e60000; */
}
table#cat-menu td a:active{
  color:var(--category-active-color);
}
td[first],td[last]{
  border-right:1px solid white
}
/* Ensure the header does not clip content */
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 900; /* Ensure it's below the dropdown menu */
  background: var(--header-bg-color);
  color: var(--header-color);
  padding: 10px 0;
  text-align: center;
  overflow: visible; /* Ensure dropdown is not clipped */
}

/* Navbar styles */
nav {
  background: var(--nav-bg-color);
  display: flex;
  font-size: 90%;
  align-items: center;
  width: 100%; /* Ensure the navbar takes the full width of the screen */
  box-sizing: border-box; /* Include padding and border in the element's width and height */
  padding: 10px 20px;
  overflow-x: hidden; /* Prevent the navbar from overflowing horizontally */
  z-index: 900; /* Ensure it's below the dropdown menu */
  position: relative; /* Ensure correct stacking context */
}

nav a {
  color: var(--link-color);
  padding: 0 40px;
  text-decoration: var(--link-decoration);
  text-align: center;
}

/* Ensure the dropdown is visible when toggled */
.dropdown-menu.show {
  display: block; /* Make sure it's visible when toggled */
}

.container {
  margin-left:1.5em;
  /* padding: 20px; */
}

.category-header {
  margin-bottom: 20px;
}

.posts .post ,.announcements .post{
  background: var(--posts-background-color);
  border: 1px solid var(--posts-border-color);
  color:var(--posts-color);
  margin-bottom: 10px;
  padding: 15px;
  z-index:900;
}
.post button.delete-btn{
  color:red;
  border:none;
  padding:5px;
  background-color:black;
}
.post button.delete-btn:hover{
  background-color:red;
  color:white;
}
button[type='submit']{
  border:none;
  padding:5px;
  background-color:#e60000;
  color:white;
}
button[type="submit"]:active{
  background-color:#c00000
}
.new-post-form {
  background: var(--posts-background-color);
  border: 1px solid #ddd;
  padding: 20px;
  margin-top: 20px;
}
#postTitle{
  padding:5px;
  border:1px solid #ddd;
}
#postContent{
  border:1px solid #ddd;
  padding:5px;
  border-radius:0px;
  width:100%
}
/* Search container styles */
/* Search container styles */
.search-container {
  /* display: flex; */
  align-items: center;
  position: absolute;
  right:3.5em;
  top:6em;
  z-index: 1000; /* Ensure the search container is above the navbar */
}

.search-icon {
  font-size: 20px;
  color: var(--search-icon-color);
  cursor: pointer;
}

.search-input {
  display:var(--search-input-display);
  padding: 5px;
  width: 200px;
  /* border: 1px solid #ddd;*/
  border:var(--search-input-border);
  background-color:var(--search-input-bg-color);
  border-radius: var(--search-border-radius);
  margin-left: 10px;
  box-sizing: border-box;
}
.search-input::placeholder{
  color:var(--search-placeholder);
}
.search-container.active .search-input {
  display: inline-block;
  outline:none;
  background-color:var(--search-input-bg-color);
  color:var(--body-color);
}
.search-input:focus{
  border:var(--search-input-active-border)
}
/* Positioning and styling the dropdown */
#searchResults {
  position: absolute; /* Positioned relative to the search container */
  top: 100%; /* Position just below the search input */
  right: 0;
  display:none;
  width: 1200px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  list-style-type: none;
  padding: 0;
  margin: 5px 0 0 0; /* Slight margin above the dropdown */
/*   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
  z-index: 1002; /* Higher z-index to appear above the header and navbar */
}

#searchResults li {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #ddd; /* Add a separator between items */
}

#searchResults li:last-child {
  border-bottom: none; /* Remove the border from the last item */
}

#searchResults li a {
  text-decoration: none;
  color: #333;
  display: block; /* Make the link fill the entire item */
}
.container{
  /* margin-top:120px; */
  padding:20px;
  /* padding-bottom:5em; */
}
footer{
  /* padding-top:50px; */
}
#postFormContainer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 95%;
  background-color: var(--body-background-color);
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
  padding: 10px;
  transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
  z-index: 1000;
}

#postFormContainer.hidden {
  /* transform: translateX(-100%); */
  width:5%;
  display:none;
}

#toggleButtonWrapper {
  position: fixed;
  bottom: 11em;
  right: 0; /* Initially on the right */
  transition: right 0.3s ease-in-out;
  z-index: 1001;
}

#toggleButtonWrapper.move-left {
  left: 1px; /* Move to the left side of the screen when the form is hidden */
  width:10%;
}

#toggleFormBtn {
  background: red;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
  /* bottom:50%; */
  /* height:210px; */
  /* border-bottom:50px solid red; */
  margin-right:1px;
  border-radius: 100%;
}
#toggleFormBtn:hover{
  background-color:#e60000
}
#toggleFormBtn:active{
  background-color:#c00000
}
#postForm {
  /* display: flex; */
  /* height:400px; */
  /* flex-direction: column; */
}

#postForm input, #postForm select, #postForm textarea {
  margin-bottom: 10px;
  /* padding: 8px; */
  color:var(--body-color);
  background-color:var(--post-form-objects-bg-color);
  width:98%;
  border: 1px solid #ccc;
  border-radius: 0;
}
#postForm select{
  background-color:var(--post-form-objects-bg-color);
  padding:5px;
}
#postForm input{
  font-size:21px;
}
#postForm select>option{
  color:white;
  background-color:red;
}
#postForm button[type="submit"] {
  position:relative;
  background-color: red;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#postForm button[type="submit"]:hover {
  background-color: #e60000;
}
#postForm button[type="submit"]:active{
  background-color:#c00000
}
#resources a{
  color:red;
  font-size:105%
}
.resource{
  padding:5px;
}
#postModal{
  display:none;
  position: fixed;
  z-index: 1003;
  left: 0;
  top: 0;
  /* color:white; */
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
#postModalContent{
  margin-top:5em;
  color:var(--posts-color);
  /* display:flex; */
  margin-left:25%;
  background:var(--posts-background-color);
  width:50%;
  max-height:410px;
  padding:10px;
  /* background-clip:content; */
}
#postModalContent #postForm{
  /* display:flex; */
  max-height:400px;
}
#postSubmit{
  position:relative;
  /* top:50%; */
  bottom:0;
  /* left:1em; */
}
#postCancel{
  padding:10px;
  border:none;
  border-radius:4px;
}
#postCancel:hover{
  background-color:gray;
}
#postCancel:active{
  background-color:dimgray;
}
#postModalContent #postForm select{
  font-size:18px;
  color:var(--posts-color);
  width:99%;
}
#postModalContent #postForm input:focus,#postModalContent #postForm textarea:focus{
  outline:none;
  border:1px solid black;
  color:var(--posts-color);
}
#newpost{
  color:red;
  border:1px solid red;
  border-radius:4px;
  background-color:white;
}
#newpost:hover{
  background-color:gainsboro;
  color:red;
}
#newpost:active{
  background-color:lightgray;
  color:red;
}
.preview{
    width:100px;
  }
  #light{
    content:url("./theme-previews/Schelp_Theme_Preview_Light.png");
  }
      #blue-light{
          content:url("./theme-previews/Schelp_Theme_Preview_Blue_Light.png");
      }
      #forest-green{
          content:url("./theme-previews/Schelp_Theme_Preview_Forest_Green.png");
      }
      #oldie{
          content:url("./theme-previews/Schelp_Theme_Preview_Oldie.png");
      }
      #fire{
          content:url("./theme-previews/Schelp_Theme_Preview_Fire.png");
      }
      #fire{
          content:url("./theme-previews/Schelp_Theme_Preview_Fire.png");
      }
      #roman{
          content:url("./theme-previews/Schelp_Theme_Preview_Roman.png");
      }
      #pride{
          content:url("./theme-previews/Schelp_Theme_Preview_Pride.png");
      }
      #super-pride{
          content:url("./theme-previews/Schelp_Theme_Preview_Super_Pride.png");
      }
      #ruby{
          content:url("./theme-previews/Schelp_Theme_Preview_Ruby.png");
      }
      #ocean{
          content:url("./theme-previews/Schelp_Theme_Preview_Ocean.png");
      }
      #emerald{
          content:url("./theme-previews/Schelp_Theme_Preview_Emerald.png");
      }
      #dark{
          content:url("./theme-previews/Schelp_Theme_Preview_Dark.png");
      }
      #blue-dark{
          content:url("./theme-previews/Schelp_Theme_Preview_Blue_Dark.png");
      }
      #dark-forest{
          content:url("./theme-previews/Schelp_Theme_Preview_Dark_Forest.png");
      }
      #destiny{
          content:url("./theme-previews/Schelp_Theme_Preview_Destiny.png");
      }
#prhs{
  content:url("./theme-previews/Schelp_Theme_Preview_PRHS.png");
}
#fire-and-ice{
  content:url("./theme-previews/Schelp_Theme_Preview_Fire_And_Ice.png");
}
#red{
  content:url("./theme-previews/Schelp_Theme_Preview_Red.png");
}
#blue{
  content:url("./theme-previews/Schelp_Theme_Preview_Blue.png");
}
#green{
  content:url("./theme-previews/Schelp_Theme_Preview_Green.png");
}
#yellow{
  content:url("./theme-previews/Schelp_Theme_Preview_Yellow.png");
}
#orange{
  content:url("./theme-previews/Schelp_Theme_Preview_Orange.png");
}
#purple{
  content:url("./theme-previews/Schelp_Theme_Preview_Purple.png");
}
#white{
  content:url("./theme-previews/Schelp_Theme_Preview_White.png");
}
#black{
  content:url("./theme-previews/Schelp_Theme_Preview_Black.png");
} 
#inverse{
  content:url("./theme-previews/Schelp_Theme_Preview_Inverse.png");
} 
#inverse-dark{
  content:url("./theme-previews/Schelp_Theme_Preview_Inverse_Dark.png");
} 
#cyan{
  content:url("./theme-previews/Schelp_Theme_Preview_Cyan.png");
} 
#theme-table{
  border-spacing:5px;
}
#theme-table td{
  font-size:80%
}
.comments{
  display:none;
  padding-top:5px;
  overflow-y:scroll;
  max-height:200px;
}
.addComment{
  position:sticky;
  top:0;
  left:0;
  width:100%;
  padding:5px;
/*   background-color:var(--posts-background-color); */
/*   color:var(--links-color); */
  border:none;
}
.reply-btn,.dislike-btn,.like-btn{
  background-color:transparent;
  border:none;
  color:gray;
  font-family:Red-Icons;
}
.liked,.disliked{
  color:red;
}
.commentform textarea{
  display:block;
  background-color:inherit;
  width:99%;
  margin:0 auto;
  border:1px solid gray;
/*   margin-left:1px; */
/*   margin-right:1px; */
}
.commentform{
  position:sticky;
  bottom:0;
  width:100%;
  left:0;
  background-color:var(--body-background-color);
}