body{
    font-family: sans-serif;
    margin: 0;
    cursor: default;
    text-align: center;
    user-select: none;
}

nav{
    width: 100%;
    height: 70px;
    border-bottom: 2px solid lightgray;
    box-shadow: 5px 5px 5px black;
    text-align: left;
    position: fixed;
    background-color: white;
    z-index:10;
}

.dropbtn {
  background-color: #00aaff;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius:15px;
}

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

.dropdown {
  position: relative;
  display: inline-block;
  margin-left: 5px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
 border-radius:15px;
}

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

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

.show {display: block;}

.hidden{
    display: none;
}

        #newDocumentPrompt{
            width: 50%;
            height: 75vh;
            position: fixed;
            margin-top: 100px;
            margin-left: 25%;
            z-index: 99999;
            border-radius: 10px;
            background-image: linear-gradient(45deg, white, rgb(211, 211, 211));
            transition: 0.5s;
            opacity: 100%;
        }

        .coolInput {
            width: 75%;
            background-color: white;
            border-radius: 25px;
            border: 1px solid grey;
            padding: 10px;
        }

                .coolBtn {
            padding: 7px 20px;
            margin: 10px;
            border-radius: 25px;
            background-color: transparent;
            border: 1px solid grey;
            transition: 0.1s;
        }

        .coolBtn:hover {
            background-color: rgba(250, 250, 255, .5);
            color: blue;
        }


        .documentList{
            border: 2px solid lightgray;
            border-radius: 25px;
            width: fit-content;
            display: inline-block;
        }


        .graphic{
            border-radius: 25px;
            padding: 5px;
            border-bottom: 2px solid lightgray;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }

        .documentList:hover{
            background-color: lightgray;
        }


                #documentPopup {
            height: 80%;
            width: 90%;
            margin-top: 7%;
            background-color: rgb(231, 231, 231);
            margin-left: 5%;
            position: fixed;
            z-index: 5;
            overflow: auto;
            border-radius: 15px;
        }


        #documentPopup button {
            background-color: white;
            padding: 10px;
            color: black;
            border: 5px solid black;
            font-size: larger;
        }

        #documentPopup button:hover {
            background-color: black;
            padding: 10px;
            color: white;
            border: 5px solid white;
            outline: 5px solid black;
        }


        .coolSelect{
            border: 3px solid rgb(193, 193, 255);
            background-color: rgb(200, 237, 250);
            color: rgb(0, 0, 187);
            padding:15px;
            font-size: larger;
            border-radius: 15px;
        }

        .context-menu {
  position: absolute;
  text-align: center;
  background-color: lightgray;
  min-width: 150px;
  border-radius: 15px;
}
.context-menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.context-menu ul li {
  padding: 7px;
  border-radius: 15px;
}
.context-menu ul li:hover {
  background-color: rgb(202, 202, 202);
}   


        #newImagePrompt{
            width: 50%;
            height: 75vh;
            position: fixed;
            margin-top: 100px;
            margin-left: 25%;
            z-index: 99999;
            border-radius: 10px;
            background-image: linear-gradient(45deg, white, rgb(211, 211, 211));
            transition: 0.5s;
            opacity: 100%;
        }


#newListPrompt{
		            width: 50%;
            height: 75vh;
            position: fixed;
            margin-top: 100px;
            margin-left: 25%;
            z-index: 99999;
            border-radius: 10px;
            background-image: linear-gradient(45deg, white, rgb(211, 211, 211));
            transition: 0.5s;
            opacity: 100%;
}

#listPopup{
            height: 80%;
            width: 90%;
            margin-top: 7%;
            background-color: rgb(231, 231, 231);
            margin-left: 5%;
            position: fixed;
            z-index: 5;
            overflow: auto;
            border-radius: 15px;
}

#moreTools{
  width: 100%;
  border-radius: 15px;
  background-color: lightgray;
  display: flex;
  justify-content: space-evenly;
}

#sidebar{
  background-color: lightgray;
  height: 100vh;
  width: 50px;
  margin-left: calc(100vw - 50px);
  position: fixed;
  display: flex;
    z-index: 11;
  top: 0;
  left: 0;
}

#sidebar button{
  height: 45px;
  width: 45px;
  margin: 5px;
  background-color: lightgray;
  border: none;
  border-radius: 15px;
  font-size: larger;
}

#sidebar button:hover{
  height: 45px;
  width: 45px;
  margin: 5px;
  background-color: rgb(192, 192, 192);
  border: none;
  border-radius: 15px;
}


                #notePopup {
            height: 80%;
            width: 50%;
            margin-top: 7%;
            background-color: rgb(231, 231, 231);
            margin-left: 40%;
            position: fixed;
            z-index: 5;
            overflow: auto;
            border-radius: 15px;
        }

html{
  scroll-behavior: smooth;
}