*{
  margin: 0px;
}
body{
  background-color: white;
}
.editbutton2{
  background-image: url('./resources/edit.png');
}

.item-namebtnhidden{
  visibility: hidden;
  margin: 2px;
  background: rgba(255, 255, 255, 0.2); 
  border: 2px solid rgba(255, 255, 255, 0.5); 
  border-radius: 5px; 
  padding: 1px 1px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

}
.item-namebtn{
  margin: 2px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  padding: 1px 2px;
  color: rgb(25, 233, 170);
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

  transition: all 0.3s ease;
}
.item-namebtn:hover {
      background: linear-gradient(to bottom, #66BB6A, #388E3C);
      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
      transform: translateY(-2px);
    }

    .item-namebtn:active {
     background: rgba(255, 255, 255, 0.4); /* Slightly brighter on hover */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Enhanced shadow */
  transform: scale(1.05); /* Slight zoom effect */
      transform: translateY(2px);
    }
h3{
  scale: 0.6;
  color: white;
}
.sidebarc,.sidebar{
  display: none;
}
.mainappbtns {
  transition: scale 0.1s;
  scale: 1;
}
.mainappbtns:active {
  transition: scale 0.5s;
  scale: 0.5;
}
.sidebbi{
 
  position:relative;
  width: 100%;
  height: 100%;
  background-color: none;
  margin: auto;
}
.sbsegmt-a{
  top: 0px;
  display :flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
justify-content: space-evenly;
  position:relative;
  width: 75%;
  height: 40%;
  background-color: none;
  margin: auto;
}
.sidebb {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: white;
  font-size: 18px;
  
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: 0.3s ease-in-out;
}



.sidebb:hover::before {
  opacity: 1;
}

.sidebb:hover {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.8);
}
.sidebb:active{
  scale: 0.5;
}
.opbutbc {
  transition-duration: 2s;
  display: none;
  position: absolute;
}
.opbutbo{
  display: block;
  box-shadow: 3px -3px 15px black;
  display: flex;
  justify-items: center;

  align-items: center;
  flex-direction: column;
  top:0px;
  position: fixed;
  width:25%;
  height:100vh;
  
  
  z-index: 10;
  opacity: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #999 #333;
  color: black;
    backdrop-filter: blur(0.5px);
}
.sbclose {
  transition-duration: 2s;
  display: none;
  position: absolute;
}
.sbopenb{
  background-color: pink;
  opacity: 0;
  position: sticky;
}
.sbopen{
  
  box-shadow: 3px 3px 15px black;
  display: flex;
  justify-items: center;
  justify-content: space-around;
  align-items: center ;
  flex-direction: column;
  top:0px;
  position: sticky;
  width:100;
  height:100%;
  background-image: linear-gradient(to right, #000000,#FFFFFF00);
  border-right-color:grey ;
  border-right-width: 2px;
  border-right-style: solid;
  z-index: 10;
  opacity: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #999 #333;
  color: black;
  transition: display 0.5s;
    backdrop-filter: blur(0.5px);
}
.copydiv{
  display: none;
}
#inappsearch{
  margin: none;
}
#linking{
  margin: none;
}
#importbtn:active {
  background-color: green;
}
#csearch:active {
  background-color: green;
}
/* #csearch:hover {
  background-color: #45a049;
} */
#csearch{
  border: none;
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s ease;
}
#importbtn:hover {
  background-color: #45a049;
}
#importbtn{
  border: none;
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s ease;
}
#txtfile{
display: none;
}
.textfinput {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}


.textfinput:hover {
  background-color: #45a049;
}
.resultanchor{
  border: 1px solid #ccc;
  height: 100%;
  width: 100%;
  position: relative;
  background-color: skyblue;
}
.a2{
  border: 1px solid #ccc;
  height: 150px;
  width: 150px;
  overflow-y: auto;
  background-color: skyblue;
  float: left;
}
#searchBox{
  visibility: hidden;
  color: blue;
}
     #results {
            border: 1px solid #ccc;
            max-height: 350px;
            overflow-y: auto;
            overflow-x: auto;
            background: linear-gradient(to bottom, #C8F3AF, #C8F3AF);
            display: block;
            margin-bottom: 0%;
        }
        .result-item {
          text-decoration: none;
          font-size:20px;
          display: flex;
            padding: 8px;
            cursor: pointer;
            border-radius: 2px;
            width: 100%;
            color: green;
            background: linear-gradient(to bottom, #C8F3AF, #C8F3AF);
            transition-duration:0s;
        }
        .result-item:hover {
            background-color: #F0F0F0;
        }
.saveoption{
  z-index: 8;
  flex-direction: column;
  background-color:green;
  visibility: hidden;
  position: fixed;
  top: 25%;
  left: 25%;
  width:70%;
  height: 20%;/*
  display: flex;
  justify-content: space-evenly;
  align-items:center ;
  justify-content: center;*/
  border-radius: 20px;
  /* box-shadow: 3px 3px 0px black; */
}
#alertclose{
  border: none;
  background-color: lightgreen;
  width: 25%;
  height:20%;
  color:black;
  visibility: visible;
  position:relative;
  top: 20%;
  /* margin-left: auto; */
  left:80%;
  visibility: hidden;
  z-index: 15;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s ease;
}
#alertb{
  background-color: green;
  width: 50%;
  height:10%;
  color:white;
  visibility: visible;
  position:absolute;
  top: 20%;
  /* margin-left: auto; */
  z-index: 11;
  right:25%;
  visibility: hidden;
}
#alertc{
  background-color: white;
  width: 70%;
  height:90%;
  color:black;
  visibility: hidden;
  position:absolute;
  padding: 5%;
  /* margin-left: auto; */
  right:25%;
  visibility: hidden;
  z-index: 12;
  font-size: 80%;
}
.filename{
  visibility: hidden;
  position:absolute;
  left:0px;
}
.filename{
  border: solid;
  border-radius: 10px;
}
.backupbtn{
  border: none;
  border-radius: 0px;
  text-decoration: none;
  background-color: lightgreen;
  color: green;
}
.save{
  z-index: 7;
  visibility: hidden ;
  
  position: absolute;
  background-color: transparent;
  color: white;
  border:none
}
body{
    font-size: 15pt;
    top: 0px;
    display:flex;
}
#exampleimage1,#exampleimage2,#exampleimage3,#exampleimage4,#exampleimage5,#exampleimage6,#exampleimage7{
  background-size:cover;
  width: 100%;
  
}
.showinapp{
  color: white;
  background-color: green;
  text-shadow: 3px 3px 3px lime, -3px -3px -3px lime ;
  border-radius: 3px;
  z-index: 6;
  border:none;
  
}
  
  .insert{
    
    float: left;
    background-color: darkgreen;
    display: flex;
    flex-direction: column;
    width:100%;
    height: 60px;
    line-height: 15px;
    background-image: linear-gradient(to bottom, green, green);
    z-index: 5;
    justify-content: space-around;
  }
  .functions{
    
    width: 100%;
    height: 60px;
    display: flex;
    float:right;
    background-color: green;
    
    justify-content: space-between;
    z-index: 1;
  }
#enterbtn{
  background-color: green;
  background-image: linear-gradient(to bottom, green, green);
  height:60px;
  float: right;
  border:none;
  outline: none;
}
#enterbtn:active{
  background-color: green;
  background-image: linear-gradient(to bottom, green, green);
  height:60px;
  float: right;
  border:none;
  outline: none;
  
  opacity : .7;
  
}
.updatecontroller{
  
  display: none;
}
.updatecontroller2 {
  display: none;
}
.theList {
  width: 100%;
  top:0px;
  position: sticky;
  display: flex;
  margin: 0px;
  align-items: start;
  border: none;
  background-color: none;
  height: 100px;
  overflow: clip;
  z-index: 1;
  
}
.saverTitle{
  
  top: 0%;
  display: flex;
  color:white;
  background: linear-gradient(to bottom, green, green);
  justify-content: start;
  border-style: solid;
  border-width: 0px;
  border-color: yellowgreen;
  padding: 0px;
  box-shadow: 0px 2px 1px darkgreen;
  z-index: 2;
  border-radius:1px;
  height:63px;
  width: 94.5%;
  border-top-color: green;
  line-height:63px;
  padding-left: 20px;
  position: static;
}
.brand{
  font-size: 30px;
  color: white;
  
}
#item{
  position: relative;
  bottom: 0%;
  z-index: -1;
  color: green;
  border-style: solid;
  border-width: 3px;
  border-color:darkgreen;
  border-radius:5px;
  margin: 0px;
  width:70%;
  animation: fade_in 1.2s;
}


#name{
  position: relative;
  bottom: 0%;
  z-index: -1;
  color: green;
  border-style: solid;
  border-width: 3px;
  border-color:darkgreen;
  border-radius:5px;
  margin: 0px;
  width: 70%;
  
}
#content{
  display: none;
  position: relative;
  bottom: 0%;
  z-index: -1;
  color: green;
  border-style: solid;
  border-width: 3px;
  border-color:darkgreen;
  border-radius:5px;
  margin: 0px;
  width: 70%;
  
}

.exampleimage{
  display: block;
  position:fixed;
  border-color:black;
  width:100%;
  height:100vh;
  z-index: 5;
}
.exampleimageb{
  display: none;
}
#nextbtn{
  z-index: 7;
  position: fixed;
  margin-left:280px;
  border :none;
  background-color: green;
  color: white;
  transform: scale(1.2);
}
#nextbtn:active {
  transition-duration:0.2s;
  z-index: 7;
  position: fixed;
  margin-left: 300px;
  border: none;
  transform:translatex(10px);
  transform: scale(1.2);
}
#previousbtn{
  z-index: 7;
  position: fixed;
  margin-left:20px;
  border:none;
  transform: scale(1);
  background-color:red;
  color:white;
  transform: scale(1.2);
}
#previousbtn:active {
  transition-duration:0.5s;
  z-index: 7;
  position: fixed;
  margin-left: 0px;
  border: none;
  transform:translatex(-10px);
  transform: scale(1.2);
  color:white;
}
#connection{
  background: linear-gradient(to bottom, green, green, green);
  color: white;
  border: none;
  width: 70px;
  float: right;
  outline: none;
}

@media (min-width: 361px) {
.copydiv{
  display: none;
}
  #inappsearch{
    position:relative;
    margin: none;
    height: 50%;
  }
  #linking{
    margin: none;
  }
  .resultanchor{
    border: 1px solid #ccc;
    height: 100%;
    width: 100%;
    position: relative;
    background-color: skyblue;
  }
  .a2{
    border: 1px solid #ccc;
    height: 150px;
    width: 150px;
    overflow-y: auto;
    background-color: skyblue;
    float: left;
  }
  #searchBox{
    visibility: hidden;
    color: blue;
  }
          #results {
            border: 1px solid #ccc;
            position: relative;
            max-height: 100%;
            overflow-y: auto;
            overflow-x: auto;
            background: linear-gradient(to bottom, #C8F3AF, #C8F3AF);
            display: block;
            margin-bottom: 0%;
        }
          .result-item {
            text-decoration: none;
            font-size:20px;
            display: flex;
              padding: 8px;
              cursor: pointer;
              border-radius: 2px;
              width: 100%;
              color: green;
              background: linear-gradient(to bottom, #C8F3AF, #C8F3AF);
              transition-duration:0s;
          }
          .result-item:hover {
              background-color: #F0F0F0;
          }

  #alertclose{
    border: none;
    background-color: lightgreen;
    width: 15%;
    height:50%;
    color:black;
    visibility: visible;
    position:relative;
    top: 20%;
    /* margin-left: auto; */
    left:80%;
    visibility: hidden;
    z-index: 15;
    border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s ease;
  }
  #alertb{
    background-color: green;
    width: 50%;
    height:10%;
    color:white;
    visibility: visible;
    position:absolute;
    top: 20%;
    /* margin-left: auto; */
    right:25%;
    visibility: hidden;
  }
  #alertc{
    background-color: white;
    width: 70%;
    height:90%;
    color:green;
    visibility: hidden;
    position:absolute;
    padding: 5%;
    /* margin-left: auto; */
    right:25%;
    visibility: hidden;
    
    font-size: 80%;
  }
  .save {
    z-index: 7;
    visibility: hidden;
    
    position: absolute;
    background-color: transparent;
    color: white;
    border: none;
    
  }
  /* .saveoption {
    z-index: 8;
    background-color: green;
    visibility: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 10%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
  } */
  .filename{
  border: solid;
  border-radius: 10px;
  
}
.backupbtn{
  border: none;
  border-radius: s0px;
  text-decoration: none;
  background-color: lightgreen;
  color: green;
}
*{
  margin: 0px;
}
body{
  display:block;
  justify-content: center;
}
.saverTitle{
  width: 97.2%;
  display: block;
}

#nextbtn{
  right:5px;
  float: right;
}
.exampleimage{
  display: block;
}
/*.exampleimageb{
  display: block;
  position:fixed;
  border-color:black;
  width:100%;
  height:100vh;
  z-index: 5;
}*/
}