static/style.css

.accordion {
    background-color:gray;
    color: white;
    cursor: pointer;
    padding: 8px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    border-radius: 5px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 20px;
    font-style: italic;
    margin-left: 5px;
    margin-top: 60px; 
    margin-right: 10px;

  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .accordion:hover {
    background-color:lightgrey;
    opacity: 0.7;
  }
  
  /* Style the accordion panel. Note: hidden by default */
  .panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
  }




#pagetitle{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 30px;
    text-align:center;
    padding-top: 30px;
    align-items: center;
    justify-content: center;
    margin-left: 40%;
    margin-right: -50%;
    color: white;

     

}

#backgroundimg{
    display: block;
    margin-left:50% ;
    margin-right: 20px;
    margin-top: 10px;
    background-color: lightgrey;

    width:49%;
    height: 407px;
    position: absolute;

 
 }
 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width:100%;
    height: 50px;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    z-index:999
  }


.selectionsProj, .selectionsProjp , .selectionsProjs{
    margin-top: 18.5px ;
    width: 49%;
    height: 30px;
    margin-left: 5px ;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 2px 2px 2px gray;

}
#measurementselectionsid{
    margin-top: 18.5px ;
    width: 99%;
    height: 30px;
    margin-left: 5px ;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 2px 2px 2px gray;
}
#measurementselectionsid:hover{
    box-shadow: 4px 4px 4px gray;
}
.selectionsProj:hover, .selectionsProjp:hover , .selectionsProjs:hover{
    background-color: lightgrey;
    box-shadow: 4px 4px 4px gray;
}


#measureLabel, #relvDocLabel{
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin-left: 15px ;
    font-size: 21px;
    position: absolute;
    margin-top: 10px;
    color: black;
    font-style: italic;
   
}

#measureCheckbox, #relvdiv,#saveOPlabel, #saveOP{ /*,.area , .pattern, .border , .length , .match{*/
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin-left: 13px ;
    margin-top: 20px;
    font-size: 20px;
    cursor: pointer;
    max-width: 50%;

}

#measureADRbutton{
    background-color: #16c72e;
    border: none;
    padding: 10px 175px;
    cursor: pointer;
    border-radius: 7px;
    margin-left: 3%;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 16px;
    color:white;
}
#measureADRbutton:hover{
    background-color:darkseagreen;
    color:black;
}


#addicon,#donebutton{
    top: 1px;
    width:30px;
    height:30px;
    left:97%;
    cursor: pointer;

}
#measureitemsid{
    margin-top: 10px ;
    width: 30%;
    height: 30px;
    margin-left: 5px ;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 2px 2px 2px gray;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
#measureitemsid:hover{
    box-shadow: 4px 4px 4px gray;
}

#selectionsid{
    margin-top: 10px ;
    width: 68.8%;
    height: 30px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 2px 2px 2px gray;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
#selectionsid:hover{
    box-shadow: 4px 4px 4px gray;
}
#repeatforloop{
    margin-left: 5px ;
    margin-top: 10px;
    
}
#text0,#text1,#text2{
    font-size: 14px;
    width: 31.5%;
    height: 40px;
    border-radius: 5px;
    margin-bottom: 13px;
    margin-right: 0.2%;
    font-family: Georgia, 'Times New Roman', Times, serif;
    
}
#addmctnameid{
  
    width:35px;
    height:35px;
    left: 96.8%;
    cursor: pointer;
    
   position: absolute;
    border: none;
}
#doneebackground{
    top: 10px;
    width:30px;
    height:30px;
    left: 96%;
    cursor: pointer;
    position: relative;
    background-color: white;
    border: none;
}

#radio{
    margin-right: 0.2%;
    position: relative;
}

#radio:hover{
cursor: pointer;
}
#radiolbl{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 16px;
    position: relative;
}

#nLevels{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 16px;
    position: relative;
    margin-left: 1%;
    
}

#lvlinput{
    font-size: 14px;
    width: 15%;
    height: 30px;
    border-radius: 5px;
    
    margin-left: 1%;
    font-family: Georgia, 'Times New Roman', Times, serif;
    
}

#color{
    margin-top: 1%;
    margin-left: 1%;
    box-shadow: 2px 2px 2px gray;
}
#color:hover{
    cursor: pointer;
    box-shadow: 4px 4px 4px rgb(57, 57, 57);
}