html, body {
      height: 100%;
      margin: 0;
      font-family: Arial, sans-serif;
      background-image: url('https://ciocotisan.ro/images/peakpx5.jpg');
      transition: background 0.5s ease;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
    }

  p {
    color: #fff; /* Blue for paragraphs */
}

/* Set text color for all headings */
h1, h2, h3, h4, h5, h6 {
    color: #ff6600; /* Orange for headings */
}

/* Customize specific heading levels */
h1 {
    color: #ff0000; /* Red for h1 */
}

h2 {
    color: #fff; /* Green for h2 */
}



#top {
  /*background-color: #212121;*/
  background-color: #212121;
  color:#eeeeee;
  text-align: center;
  padding: 10px;
  height: 15px;
}

.item {
  /*background-color: #4CAF50;*/
  color: #e0e0e0;
  position: absolute;
  height: 15px;
  transition: transform 0.3s ease; /* Smooth transition for the hover effect */
}

.item1 {
  top: 10px;
  left: 30px;
  height: 15px;
}

.item1:hover {
  transform: scale(1.2); /* Scale the element to 120% of its original size */
}

.item2 {
  top: 10px;
  right: 20px;
  height: 15px;
  width: 15px; /* Set the width of the image */
  border-radius: 5px;
}

.item3 {
  top: 10px;
  right: 55px;
  height: 15px;
  width: 15px; /* Set the width of the image */  
  border-radius: 5px;
}

.item4 {
  top: 10px;
  right: 90px;
  height: 15px;
  width: 15px; /* Set the width of the image */ 
  border-radius: 5px; 
}


#container {
  display: flex;
  height: calc(100vh - 50px); /* Adjust the height to fill the remaining viewport height */
  /*background-image: url('http://192.168.9.142/images/peakpx.jpg');*/ /* Add background image */
  /*background-size: cover; /* Ensure the image covers the entire div */
  /*background-position: center; /* Center the image */
  /*background-repeat: no-repeat; /* Prevent the image from repeating */ 
  /*background-attachment: fixed; */

}

#left {
  width: 60px;
  background-color: #212121;
  height: 100%; /* Ensure the left div height is 100% of the container height */
  padding: 10px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  opacity: 0.7; /* 50% opacity */
}


.menu img {
  /*background-color: #333;
  overflow: hidden;*/
  transition: transform 0.3s;
  opacity: 1; /* Ensure icons are fully opaque */
}

.image-container img {
  transition: transform 0.3s;
  opacity: 1;  /* Ensure the image is fully opaque */
}

.image-container img:hover {
  transform: scale(1.2);
  opacity: 1;  /* Ensure the image is fully opaque */
}

.menu .icon {
  float: left;
  display: block;
  /*color: #f2f2f2;*/
  text-align: center;
  padding: 5px 5px;
  text-decoration: none;
  font-size: 17px;
  opacity: 1;  /* Ensure the image is fully opaque */
}

.menu .icon:hover {
  /*background-color: #ddd;
  color: black;*/
  transform: scale(1.2);
  opacity: 1;  /* Ensure the image is fully opaque */
}

#content {
  flex: 1;
  /* background-color: #ffffff; */
  height: 10%; /* Ensure the content div height is 100% of the container height */
  padding: 10px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);

  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Adds spacing between folders */
  /*margin: 20px;*/
  /*padding: 10px;*/
  /*border: 1px solid #ccc;*/
 
}

.baritem {
  /*background-color: #4CAF50;*/
  color: #e0e0e0;
  position: absolute;
  height: 15px;
}

.baritem1 {
  top: 50px;
  left: 15px;
  height: 15px;
}

.baritem2 {
  top: 10px;
  right: 20px;
  height: 15px;
  width: 15px; /* Set the width of the image */
}

.baritem3 {
  top: 10px;
  right: 55px;
  height: 15px;
  width: 15px; /* Set the width of the image */  
}

.baritem4 {
  top: 10px;
  right: 90px;
  height: 15px;
  width: 15px; /* Set the width of the image */  
}

.folder {
  position: relative;
  width: 100px; /* Folder width */
  height: 100px; /* Folder height */
  text-align: center;
  /*border: 1px solid #000;*/
  /*background-color: #f0f0f0;*/
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  
}

.folder-icon {
  background-image: url('https://ciocotisan.ro/images/folder_60x60.png');
  width: 60px; /* Icon size */
  height: 60px;
  /*background-color: #c3e0ff; /* Icon color */
  border-radius: 5px;
}

.folder-text {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  font-size: 12px;
  font-size: 16px; /* Customize font size */
  color: #fff; /* Adjust font color (black here) */
}

/* The popup container (hidden by default) */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

/* The popup content */
.popup-content {
  /*background-color: white;*/
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  text-align: center;
}

/* Close button */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  cursor: pointer;
}

/* Button styling */
button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

#search {
  margin-top: 20px; /* Adds some space from the top */
  display: flex;
  justify-content: center; /* Centers the search bar horizontally */
  align-items: flex-start; /* Keeps the search bar at the top */
}

#search input[type="text"] {
    background: url(search-dark.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

#search input[type="text"]:focus {
width: 200px;
}

.horizontal-bar {
height: 5px; /* Height of the bar */
width: 100%; /* Full width of the container */
background-color: #4CAF50; /* Green color */
margin: 20px 0; /* Spacing around the bar */
}

/*
#start_menu {

}

#start_top {
  text-align: center;
  padding: 10px;
  height: 15px;
}

#start_content {
  text-align: center;
  padding: 10px;
  height: 15px;

}*/

/* Styles for the Top Content Div */
.top-content {
  /*background-color: #f4f4f4;*/
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
}

/* Styles for Horizontal Image Div */
.image-row {
  display: flex;
  justify-content: center;
  gap: 10px; /* Space between images */
  margin-bottom: 20px; /* Creates a 20px space below each div */
}

.image-row img {
  width: 150px; /* Adjust image size */
  height: auto;
  /*border: 2px solid #ddd; /* Optional styling */
}

.image-row img:hover {
  /*background-color: #ddd;
  color: black;*/
  transform: scale(1.2);
  opacity: 1;  /* Ensure the image is fully opaque */
}

/* Start DropDown menu Style */
.dropbtn {
  /*background-color: #3498DB;*/
  color: #000;
  /*padding: 16px;*/
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/*.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}*/

.dropdown {
  position: absolute;
  display: inline-block;
}

.dropdown-content {
  display: none;
  /*position: absolute;*/
  background-color: #212121;
  /*min-width: 160px;*/
  /*overflow: auto;*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  width: auto; /* Adjust image size */
  height: auto;
  position: fixed;
  top: 30px;
  right: 0;
}

.dropdown-content a {
  color: black;
  /*padding: 12px 16px;*/
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

/* Style for the custom menu */
#customMenu {
  display: none;
  position: absolute;
  background-color: #212121;
  /*border: 1px solid #ccc;*/
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
  z-index: 1000;
  color:#eeeeee;
}
#customMenu li {
  padding: 10px;
  list-style-type: none;
  cursor: pointer;
}
#customMenu li:hover {
  background-color: #ddd;
}


textarea {
  border: none; /* Removes the border */
  background: transparent; /* Makes the background transparent */
  resize: none; /* Disables resizing (optional) */
  outline: none; /* Removes the focus outline (optional) */
  width: 100%; /* Adjusts width as needed */
  height: 100px; /* Adjusts height as needed */
  font-size: 16px; /* Customize font size */
  color: #fff; /* Adjust font color (black here) */
  text-align: left; /* Aligns text to the left */
}

/*Player custom menu*/

/* Start DropDown menu Style */
.dropbtnplay {
  /*background-color: #3498DB;*/
  color: #000;
  /*padding: 16px;*/
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/*.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}*/

.dropdownplay {
  position: absolute;
  display: inline-block;
}

.dropdownplay-content {
  display: none;
  /*position: absolute;*/
  background-color: #212121;
  /*min-width: 160px;*/
  /*overflow: auto;*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  width: auto; /* Adjust image size */
  height: auto;
  position: fixed;
  top: 30px;
  right: 50;
}

.dropdownplay-content a {
  color: black;
  /*padding: 12px 16px;*/
  text-decoration: none;
  display: block;
}

.dropdownplay a:hover {background-color: #ddd;}


/*Player custom menu End*/