@font-face {
  font-family: 'KIdDOS';
  src: url('../fonts/KIdDOS.otf') format('opentype');
}

body {
  margin: 0;
  padding: 0;
  background-color: black;
  color: white;
}

h1, h2, h3, h4, h5, h6, p{
  margin: 0;
  padding: 0;}


  /* Normal state */
a {
  color: white;        /* Sets the text color */
  text-decoration: none; /* Removes the underline */
}


/* Visited state */
a:visited {
  color: rgb(225, 141, 225);      /* Sets the text color for previously visited links */
}



.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

input[type=radio], input[type=checkbox] {
  display: none;
}

input[type=text], input[type=number], input[type=email], input[type=password] {
  background-color: #3f3f3f;
  color: white;
  border-radius: 5px;
}
input[type=text]::placeholder, input[type=number]::placeholder, input[type=email]::placeholder, input[type=password]::placeholder {
  color: rgb(185, 185, 185);
}

input[type="text"]:focus,
input[type="number"]:focus {
    background-color: #20672c !important;
    /* If you also want to set the text color, you can add another rule here. For example: */
    color: white !important;
    outline: none !important; /* Remove default outline */
    border : 1px solid #a9a9a9 !important;
    box-shadow: 0 0 15px #339643 !important; /* Add a glowing effect */
}





.logo-container {
  display: flex; /* Use flexbox to align the children inline */
  align-items: center; /* Vertically center the children */
}

.logo {
  width: 50px;
  margin-right: 10px; /* Add some space between the logo and the header */
  margin-left: 10px;
}

#mainHeader {
  font-family: 'KIdDOS', sans-serif; /* Use the custom font */
  font-size: 2rem;
  margin: 0; /* Remove default margins */
  box-sizing: border-box; 
}


#uploadDate-datepicker {
  margin-top: 0 !important;
}






/* Main Datepicker background color */
.datepicker {
  background-color: #333;
}

/* Text color within the Datepicker */
.datepicker table tr td,
.datepicker table tr th {
  color: white;
}

/* Selected date background and color */
.datepicker table tr td.active,
.datepicker table tr td.active:hover {
  background-color: #565656;
  color: white;
}

/* Inputs for Datepicker */
input.datepicker {
  background-color: #565656;
  color: white;
}

/* Ensure visibility of the arrow symbols in Datepicker's header */
.datepicker .prev, .datepicker .next {
  color: white;
}

.month:hover {
  background-color: #565656 !important;
}

input.datepicker:focus {
  background-color: #20672c !important;
  color: white !important;
}



.datepicker .focused {
  background-image: linear-gradient(to bottom, #565656, #565656) !important;
  color: white !important;
}

.datepicker .active {
  background-image: linear-gradient(to bottom, #339643, #20672c) !important;
}












.imgColumns{
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.imgColumns img {
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}


#popWindow {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 20;
  cursor: pointer;
}




#window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #333;
  z-index: 21;
  padding: 20px;
  box-shadow: 0px 0px 10px 0px black;
  border-color: white;
  border-style: solid;
  border-width: 1px;
  max-height: 80%;
  overflow-y: auto;
  width: auto; /* Adjusts based on content */
  max-width: 50%; /* Default max-width for larger screens */
}

/* Adjusting width and max-width for small screens */
@media (max-width: 768px) {
  #window {
    width: 90%; /* Explicit width for small screens */
    max-width: 100%; /* Allowing it to go up to 100% just in case */
  }
}

#window p{
  color: white;
text-align: center;}




.closeModules {
  position: absolute;
  right: 15px;
  top: 60px;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.closeModules:hover {
  opacity: 0.8;
}

/*┌┬┐┌─┐┌─┐  ┌┐ ┌─┐┬─┐
   │ │ │├─┘  ├┴┐├─┤├┬┘
   ┴ └─┘┴    └─┘┴ ┴┴└─*/



   .logo-container{
    cursor: pointer;
   }
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background-color: #333;
  color: white;
  z-index: 15;
  padding :0;
}



.navbar-buttons {
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* Prevent wrapping */
  margin-right: 10px;
}
.nav-button {
  display: flex;          /* Horizontally center the content */
  align-items: center;     /* Vertically center the content */
  padding: 0 14px;
  border-radius: 5px;
  height: 39px;
  cursor: pointer;
}

.nav-displayName{
  background-color: #565656;
  margin-left: 5px;
}

.nav-button-active{
  background-color: #339643;
}
.nav-button.nav-loggedin.nav-upload svg {
  width: 29px; /* Define an explicit width */
  height: 29px; /* Define an explicit height */
  flex-shrink: 0; /* Prevent the SVG from shrinking */
}

.nav-wikiBtn, .nav-count {
  margin-right: 5px;
}
.nav-wikiBtn svg, .nav-count svg {
  width: 29px; /* Define an explicit width */
  height: 29px; /* Define an explicit height */
  flex-shrink: 0; /* Prevent the SVG from shrinking */
}
.nav-count-inner {
  margin-right: 10px;
}
.nav-buttons-profile {
  display: none; /* Initially hide the profile buttons */
  position: absolute; /* Position it absolutely to the parent */
  top: 56.4px; /* Adjust this value based on your parent's actual height */
  right: 0;
  z-index: 25; /* To ensure it's above other elements */
  background-color:#333;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
}

.nav-button:hover {
  background-color: #45a049;
}
.nav-count:hover {
  background-color: initial;
  cursor: auto;
}

#content {
  padding-top: 70px; /* This is equal to the height of the navbar, adjust accordingly */
}
.nav-count {
  display:flex!important;
}
/* Adjusting width and max-width for small screens */
@media (max-width: 768px) {
  .nav-count {
    display:none!important;
  }
}



/*pages, profile, admin...*/



.uploadModule{
  display: none;
}
#openUpload{
  display: none;
}



.wiki{
  background-color: black;
  overflow: hidden !important;
}









/*IMAGES LAYOUT*/


.imgLayout-imgContainer {
  position: relative;
  display: inline-block;
  width: 100%;
}

.imgLayout-imgContainer img {
  display: block;
  width: 100%;
}

.imgOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  font-size: 12px;
  font-weight: bold;
  pointer-events: none; /* Make the overlay transparent to clicks */
}

.imgInfo {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 3px 5px;
  border-radius: 3px;
}

.top-left {
  top: 5px;
  left: 5px;
}

.top-right {
  top: 5px;
  right: 5px;
}

.bottom-left {
  bottom: 5px;
  left: 5px;
}

.bottom-right {
  bottom: 5px;
  right: 5px;
}

.imgColumns {
  padding: 0 10px;
}





/*symbols layout*/

.imgInfo.bottom-left {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-end;
  padding: 5px;
  gap: 5px; /* Adjust the spacing between SVG icons */
  box-sizing: border-box;
}

.imgInfo.bottom-left svg {
  width: 24px; /* Adjust the width of the SVGs */
  height: 24px; /* Adjust the height of the SVGs */
}

.imgInfo.bottom-left .symbol-display-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}

.imgInfo.bottom-left .symbol-label {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  padding: 0;
  margin: 0;
}

.imgInfo.bottom-left .symbol-label svg {
  width: 100%;
  height: 100%;
  display: block;
}