body {                                                                 
                              font-family: "Lato", sans-serif;                                     
                       }                                                                    
                       /* Fixed sidebar, full height */
                       .sidebar {                                                            
                                  height: 100%;                                                         
                                  width: 0;                                                               
                                  position: fixed;                                                       
                                  z-index: 1;
                                  top: 0;
                                  left: 0;
                                  background-color: #4F2984;
                                  overflow-x: hidden;
                                  transition: 0.5s;
                                  padding-top: 60px;
                        }
                        .sidebar a { color: #FFDD00;
                                     padding: 8px 16px;
                                     text-decoration: none;
                                     font-size: 25px;
                                     color: #FFDD00
                                     display: block;
                                     transition: 0.3s;
                        }
                        
                        /* Style the sidebar links and the dropdown button */
                       .button, .dropdown-btn {
                                 display: block;
                                 color: #FFDD00;
                                 text-shadow: 0 0 2px rgba(0,0,0,.3);
                                 font-family: sans-serif;
                                  box-shadow:
                                      inset 0 0 2px 0 rgba(255,255,255,.4),
                                      inset 0 0 3px 0 rgba(0,0,0,.4),
                                      inset 0 0 3px 5px rgba(0,0,0,.05),
                                  border-radius: 4px;
                                  padding: 8px 16px;
                                  font-size: 25px;
                                  line-height: 14px;
                                  position: relative;
                                  transition: 0.3s;                             
                      }
    
                      .button.purple { background: #4F2984; }
                      .dropdown-btn { background: #4F2984; }
                  
                      .button:before, .button:after {
                            content: '';
                            display: block;
                            position: absolute;
                            left: 2px;
                            right: 2px;
                            height: 3px;
                        }
                        .button:before {
                            top: 0;
                            background: rgba(255,255,255,.6);
                            box-shadow:
                                      inset 0 0 2px 0 rgba(255,255,255,.4),
                                      inset 0 0 3px 0 rgba(0,0,0,.4),
                                      inset 0 0 3px 5px rgba(0,0,0,.05),
                           border-radius: 4px;      
                        }
                        .button:after {
                            bottom: 0;
                            border-top-left-radius: 4px;
                            border-top-right-radius: 4px;
                            background: rgba(0,0,0,.15);
                            box-shadow:
                                      inset 0 0 2px 0 rgba(255,255,255,.4),
                                      inset 0 0 3px 0 rgba(0,0,0,.4),
                                      inset 0 0 3px 5px rgba(0,0,0,.05),
                           border-radius: 4px;    
                        }

    
    
                          /* On mouse-over */
                          .sidenav a:hover, .button:hover {
                            color: #FFFFFF; 
                          }
                          /* Style the sidebar close button */
                          .sidebar .closebtn { 
                                                position: absolute;
                                                top: 0;
                                                right: 25px;
                                                font-size: 36px;
                                                color: #4F2984
                                                margin-left: 50px;
                          }
                          /* Style the sidebar open button */
                         .openbtn { 
                                    font-size: 20px;
                                    cursor: pointer;
                                    background-color: #0066CC;
                                    color: #F3F4F5;
                                    padding: 10px 15px;
                                    border: none;
                         }
                          /* On mouse-over */
                          .openbtn:hover {
                            background-color: #009AD6;
                          }
                          /* Main content */
                          #main {
                            transition: margin-left .5s;
                            padding: 16px;
                          }
                          /* Add an active class to the active dropdown button */
                          .active {
                            background-color: #009AD6;
                            color: #FFFFFF;
                          }

                          /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
                          .dropdown-container {
                            display: none;
                            background-color: #FFFFFF;
                            color: #000000
                            padding-left: 8px;
                          }

                          .fa-caret-down{
                                 float: right;
                           }
                           
                          /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
                          @media screen and (max-height: 450px) {
                            .sidebar {padding-top: 15px;}
                            .sidebar a {font-size: 18px;}
                          }
                           .dark-mode {
                                  background-color: black;
                                  color: #00FF33;
                          }
                          .light-mode {
                                  background-color: white;
                                  color: black;
                          }