/*
	Copyright by Silvia Mazzoni
	silviamazzoni@yahoo.com 
	2024
*/
		*{
			margin:0;
			padding:0;
			box-sizing: border-box;
			outline: none;
		}
        html, body {
	        width: 100%;
	        height: 100%;
	        margin: 0;
	        font-size: 1.0em;
/*	        overflow-x: hidden; */
/*	        padding: 10px 10px 10px 10px;*/
/*	        padding: 10px 10px 10px 10px;*/
	        }
	        
		h1,h2, h3, h4 {
		  margin: 0;
		}
		
		img {
			max-width:1000px;
		}
		
		
	        
	    .table-wrapper
			{
			    width: 1500px;
			    overflow-x: auto;
			}    
	    .table-wrapperRed
			{
			    border: 1px solid red;
			    width: 1500px;
			    overflow-x: auto;
			}    
        #map {position:absolute;top:0;bottom:0;right:0;left:0;}
        iframe {
      		border:4px solid grey;
      		border-top-left-radius:10px;
      		border-top-right-radius:10px;
      		border-bottom-right-radius:10px;
      		border-bottom-left-radius:10px;
      		box-shadow: 5px 5px 5px #888;
      	}
      	input { font-size: 0.9em; }

      	textarea { font-size: 0.95em; }
      	
		label.notBold {
		  font-weight: normal;
		  float: right;
		}      	
      	
        #BraineryMapA {
            position: relative;
            width: 800px;
            height: 600px;
   /*         width: 800px; */
   /*         height: 600px; */
            left: 0.0%;
            top: 0.0%;
        }
        #BraineryMapB {
            position: relative;
            width: 800px;
            height: 600px;
            left: 0.0%;
            top: 0.0%;
        }
        fieldset {
			border:1px solid #999;
			border-radius:3px;
			box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0,0,0,0.19);
		}
        fieldset.main {
			min-width: 100%;
		}
	/*	fieldset:hover {
			background: yellow;
		} */
		legend {
			background:#fff;
			border-radius:4px;
		}
        .overflow-container {max-height: 100px; overflow: auto}
		html {
			position: relative;
			min-height: 100%;
		}
		body {
			/* Margin bottom by footer height */
			/*margin-bottom: 60px;*/
			/*margin-right: 20%;*/
		}
      	th
			{
			 white-space: nowrap;
			 padding: 2px 3px 2px 3px;
			}
      	td
			{
			 overflow: auto;
			 text-overflow: ellipsis;
			 /*white-space: nowrap;*/
			 padding: 2px 3px 2px 3px;
			}
/*    	table
//    		{
//    			 overflow: auto;
//    			 text-overflow: ellipsis;
//    			 overflow-x:auto;
//		    }*/

    	table2
    		{
    		    word-break:break-all;
    			 table-layout:fixed;
    			 word-wrap:break-word;
		    }
    	tableNoPaddings
    		{
	    		display: block;
    		    padding: 0px 0px 0px 0px;
    		    margin: 0px 0px 0px 0px;
    		    border-spacing: 0;
				border-collapse: collapse;
    		    cellspacing: 0;
    		    cellpadding: 0;
		    }

    	tablewrap
    		{
    			 table-layout:fixed;
    			 word-wrap:break-word;
		    }
		    
		    .scrollwrapper {
			  overflow: auto;
			}
		    		    
    	table.wrap
    		{
    			 overflow: auto;
    			 text-overflow: auto;
    			 overflow-x: visible;
		    }
      	td.wrap
			{
			 overflow: auto;
			 text-overflow: ellipsis;
			 white-space: wrap;
			 word-wrap:break-word;
			 padding: 5px 10px 5px 10px;
			}
		    
      button.right {
        float: right;
        border-style: dashed;
        background-color: #704090;
        color: white;
        padding: 8px 8px;
      }
      		    
      button.rightClear {
        float: right;
        font-size: 1.0em;
        padding: 2px 8px;
        background-color: transparent;
        color: white;
      }
      		    
		table.fixed {table-layout:fixed; width:100%;white-space: wrap}/*Setting the table width is important!*/ 
/*		table.fixed {table-layout:fixed; width:1250px; white-space: wrap}/*Setting the table width is important!*/ 
/*		table.fixed {table-layout:fixed; width:80%;}/*Setting the table width is important!*/ 
		table.fixedsmaller {table-layout:fixed; width:1000px;}/*Setting the table width is important!*/ 
		table.padded {padding: 15px;}/*Setting the table width is important!*/ 
        .center {
            margin-left: auto;
            margin-right: auto;
          }
		button.notpadded {padding: 0px;}/*Setting the table width is important!*/ 
		
        .button {
          background-color: #FCF0FF; /* Magenta #A1045A */
          border: none;
          color: black;
          padding: 5px 10px 5px 10px;
          text-align: left;
          text-decoration: none;
          display: inline-block;
          font-size: 1.0em;  /* 1.25em */
          margin: 1px;
          cursor: pointer;
          -webkit-transition-duration: 0.4s; /* Safari */
          transition-duration: 0.4s;
          border-radius: 4px;
          /*box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0,0,0,0.19);*/
          
        }		
		
        .button:hover {
          background-color: #A1045A; /* Magenta */
          color: white;
        }      
                
   
                
        button.navbutton:hover {
          background-color: #A1045A; /* Magenta */
          color: white;
        }        
        
        
                
/*        .button {
          background-color: #FCF0FF;
          border: none;
          color: black;
          padding: 5px 10px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 1.25em;
          margin: 2px 2px;
          cursor: pointer;
          -webkit-transition-duration: 0.4s; 
          transition-duration: 0.4s;
          border-radius: 4px;
          box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0,0,0,0.19);
          
        }*/
	
	/*https://stackoverflow.com/questions/18310434/how-to-set-text-size-in-a-button-in-html*/
		.startStopBtn {
		    font-size: 1.25em;
		    font-weight: bold;
		    display: inline-block;
		    margin: 0 auto;
		    color: #dcfbb4;
		    background-color: green;
		    border: 0.4em solid #d4f7da;
		    border-radius: 50%;
		    transition: all 0.3s;
		    box-sizing: border-box;
		    width: 4em;
		    height: 4em;
		    line-height: 3em;
		    cursor: pointer;
		    box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1);
		    text-align: center;
		}
		.startStopBtn:hover{
		    box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
		    background-color: #29a074;
		  }	
        
        .buttonSmallFont {
        /*  font-size: 14px; */
            display: block;
    		position: relative;
        }
        .buttonNoShadow {
          background-color: #A1045A; /* Magenta */
          border: none;
          color: Black;
          padding: 5px 10px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          /*  font-size: 16px; */
          margin: 2px 2px;
          cursor: pointer;
          -webkit-transition-duration: 0.4s; /* Safari */
          transition-duration: 0.4s;
          border-radius: 4px;
          box-shadow: 0 0 0 0 rgba(0,0,0,0.2), 0 0 0 0 rgba(0,0,0,0.19);
        }
        .button2 {
          background-color: lightgrey; /* Magenta  #CA8CF4*/
          border: none;
          color: black;
          padding: 5px 10px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          /*  font-size: 16px; */
          margin: 2px 2px;
          cursor: pointer;
          -webkit-transition-duration: 0.4s; /* Safari */
          transition-duration: 0.4s;
          border-radius: 4px;
          box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0,0,0,0.19);
        }        
        
		.button:disabled,
		.button[disabled]{
		  border: 1px solid #999999;
		  background-color: white;
		  color: #666666;
		}        
        
        
        .buttonBlack {
          background-color: #A1045A; /* Magenta */
          border: none;
          color: black;
          padding: 5px 10px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          /*  font-size: 16px; */
          margin: 2px 2px;
          cursor: pointer;
          -webkit-transition-duration: 0.4s; /* Safari */
          transition-duration: 0.4s;
          border-radius: 4px;
          box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0,0,0,0.19);
        }
        
        .buttonsmall {
          background-color: #4CAF50; /* Green */
          border: none;
          color: white;
          padding: 2px 2px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          /*  font-size: 14px; */
          margin: 4px 2px;
          cursor: pointer;
          -webkit-transition-duration: 0.4s; /* Safari */
          transition-duration: 0.4s;
          border-radius: 4px;
        }
        .button1 {
          box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);width:45%;
        }
        .button1:hover {
          box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);width:45%;
        }        

                
        .buttonFullWidth {width:100%;} /* Green */
        .button80pctWidth {width:80%;} /* Green */
        .button90pctWidth {width:90%;} /* Green */

        
        .button1plain {background-color: #4CAF50;} /* Green */
        .button2blue {background-color: blue;color:white;padding: 2px 8px;} /* Blue ;font-size: 12px */
        .button2grey {background-color: grey;padding: 4px 8px;} /* grey font-size: 12px;*/
        .button2lightgreythin {background-color: lightgrey;padding: 2px 4px;font-size: .9em;} /* grey font-size: 12px;*/
        .button2greythin {background-color: grey;padding: 2px 8px;} /* grey font-size: 12px;*/
        
        
        .SiteClassUnitsButt {background-color: blue;color:white;padding: 1px 10px 1px 10px;} /* Blue font-size: 10px;*/
        
        .buttonclear {background-color: transparent;padding: 2px 8px;} /* grey font-size: 8px;*/
        
        
        tr.border_bottom td {
          border-bottom: 1px solid black;
        }
      	.button:active {
		  background-color: #4CAF50;
		  box-shadow: 0 5px #666;
		  transform: translateY(4px);
		}
		
        
		/* Style the tab */
		
		/* Set height of body and the document to 100% to enable "full page tabs" */

		
		/* Style tab links */
		.tablinkToken {
		  background-color: black;color: white;float: left;border: 0px solid black;cursor: pointer;padding: 3px 2px;width: 20%; border-radius: 4px; box-shadow: 3px 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);; border-radius: 20px 3px 20px 3px; 
		}
		.tablinkTarget {
		  background-color: black;color: white;float: left;border: 0px solid black;cursor: pointer;padding: 3px 2px;width: 20%; border-radius: 4px; box-shadow: 3px 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);; border-radius: 20px 3px 20px 3px; 
		}
		.tablinkSearch {
		  background-color: black;color: white;float: left;border: 0px solid black;cursor: pointer;padding: 0px 0px 0px 0px;width: 50%;  border-radius: 20px 3px 20px 3px; 
		}
		.tablinkSearch:disabled {
		  background-color: #3a8a40;color: yellow;float: left;border: 0px solid grey;cursor: pointer;padding: 3px 2px;font-size: 0.5em;width: 33%; border-radius: 33px 33px 33px 33px; box-shadow: 3px 8px 16px 0 rgba(0,0,0,0.0), 0 6px 20px 0 rgba(0,0,0,0);; border-radius: 20px 3px 20px 3px; 
		}

		.tablinkSearchScenDeg {
		  background-color: black;color: white;float: left;border: 0px solid black;cursor: pointer;padding: 0px 0px 0px 0px;width: 50%;  border-radius: 20px 3px 20px 3px; 
		}
		.tablinkSearchScenDeg:disabled {
		  background-color: #3a8a40;color: yellow;float: left;border: 0px solid grey;cursor: pointer;padding: 3px 2px;font-size: 0.5em;width: 33%; border-radius: 33px 33px 33px 33px; box-shadow: 3px 8px 16px 0 rgba(0,0,0,0.0), 0 6px 20px 0 rgba(0,0,0,0);; border-radius: 20px 3px 20px 3px; 
		}
				
		.tablinkSiteClass {
		/*  background-color: black;color: white;float: left;border: 2px solid black;outline: 1px black;cursor: pointer;padding: 0px 0px 0px 0px;width: 33.333333333333%; border-radius: 12px 12px 0px 0px; */
		  background-color: black;color: white;float: left;border: 0px solid black;cursor: pointer;padding: 0px 0px 0px 0px;width: 33.333333333333%; border-radius: 20px 3px 20px 3px; 
		/*  background-color: black;color: white;float: left;border: 2px solid black;outline: 1px black;cursor: pointer;padding: 5px 15px 5px 15px; border-radius: 0px 0px 0px 0px; */
		/*  background-color: black;color: white;float: left;border: 1px solid solid none solid black;cursor: pointer;padding: 0px 0px 0px 0px;width: 33.333333333333%; border-radius: 0px 0px 0px 0px; */
		}
		
		
		
		
		.tablinkRatioScaled {
		  background-color: black;color: white;float: left;border: 2px solid black;cursor: pointer;padding: 0px 0px 0px 0px;width: 50%; border-radius: 0px 0px 0px 0px; 
		}
		.tablinkRatioScaled:disabled {
		  background-color: #3a8a40;color: yellow;float: left;border: 0px solid grey;cursor: pointer;padding: 3px 2px;font-size: 0.5em;width: 33%; border-radius: 33px 33px 33px 33px; box-shadow: 3px 8px 16px 0 rgba(0,0,0,0.0), 0 6px 20px 0 rgba(0,0,0,0);
		}
		
		.tablinkRatioMod {
		  background-color: black;color: white;float: left;border: 2px solid black;cursor: pointer;padding: 0px 0px 0px 0px;width: 50%; border-radius: 0px 0px 0px 0px; 
		}
		.tablinkRatioMod:disabled {
		  background-color: #3a8a40;color: yellow;float: left;border: 0px solid grey;cursor: pointer;padding: 3px 2px;font-size: 0.5em;width: 33%; border-radius: 33px 33px 33px 33px; box-shadow: 3px 8px 16px 0 rgba(0,0,0,0.0), 0 6px 20px 0 rgba(0,0,0,0);
		}
		

		
		/* Style the tab content (and add height:100% for full page content) */
		.tabcontentToken {color: black;display: none;padding: 20px 0px;height: 100%;}
		/*.tabcontentTarget {color: black;display: none;padding: 20px 0px;height: 100%;}
		.tabcontentSearch {color: black;background-color: yellow;display: none;padding: 20px 0px;height: 100%;}
		.tabcontentSiteClass {color: black;background-color: yellow;display: none;padding: 20px;height: 100%;}
		.tabcontentSearchScenDeg {color: black;background-color: yellow;display: none;padding: 20px 0px;height: 100%;}*/
		

     /*
        details {
		  font: 14px "Open Sans", Calibri, sans-serif;
		  width: 620px;
		  margin-left: 4em;
		}
		
		details > summary style="display: list-item" {
		  padding: 2px 6px;
		  width: 15em;
		  background-color: #ddd;
		  border: none;
		  box-shadow: 3px 3px 4px black;
		  cursor: pointer;
		}
		
		details > p {
		  border-radius: 0 0 10px 10px;
		  background-color: #ddd;
		  padding: 2px 6px;
		  margin: 0;
		  box-shadow: 3px 3px 4px black;
		  display: list-item;
		}
		
		details[open] > summary style="display: list-item" {
		  background-color: #ccf;
		}
		details>* {
		  margin-left: 10em;
		  background: yellow;
		}
		details> :first-child {
		  margin-left: 100;
		}
		details div{
		  margin-left: 4em;
		}	
		summary style="display: list-item" {
			display: list-item;
			cursor: pointer;
			background-color: yellow;
		}
		details summary { 
		  cursor: pointer;
			background-color: yellow;
		}
		details summary > * {
		  display: inline;
		  cursor: pointer;
		  background-color: yellow;
		}

		.footer {
		  position: fixed;
		  left: 0;
		  bottom: 0;
		  width: 100%;
		  background-color: white;
		  color: grey;
		  text-align: center;
		}		
		body:fullscreen {
		  overflow: scroll !important;
		  width:75%";
		}
		body:-ms-fullscreen {
		  overflow: scroll !important;
		  width:75%";
		}
		body:-webkit-full-screen {
		  overflow: scroll !important;
		  width:75%";
		}
		body:-moz-full-screen {
		  overflow: scroll !important;
		  width:75%";
		}
		*/
		/* scroll bar
			/* width */
			::-webkit-scrollbar {
			  width: 10px;
			}
			
			/* Track */
			::-webkit-scrollbar-track {
			  box-shadow: inset 0 0 5px grey; 
			  border-radius: 10px;
			}
			 
			/* Handle */
			::-webkit-scrollbar-thumb {
			  background: pink; 
			  border-radius: 10px;
			}
			
			/* Handle on hover */
			::-webkit-scrollbar-thumb:hover {
			  background: #b30000; 
			}      
			
					
	/*	div {
		  margin-bottom: 15px;
		  color: blue;
		  padding: 4px 12px;
		}   */
		
		.hoverYellowShadowDiv:hover {
			background-color: #F6EFFD;
			box-shadow: 10px 8px 16px 0px yellow
		}
		
		.danger {
		  /*background-color: #E2E3E5;*/
		  color: #272727;
		  border-left: 6px solid #272727;
		  /*border-right: 6px solid #272727;*/
		}
		
		.success {
		  /*background-color: #B5B5B5 ;*/
		  color: #272727;
		  border-left: 6px solid #6F6F6F;
		  /*border-right: 6px solid #6F6F6F;*/
		}
		
		.info {
		  /*background-color: #6F6F6F;*/
		  /*color: #E2E3E5;*/
		  color: #272727;
		  border-left: 6px solid #B5B5B5;
		  /*border-right: 6px solid #B5B5B5;*/
		}
		
		
		.warning {
		  /*background-color: #272727; */
		  /*color: #E2E3E5;*/
		  color: #272727;
		  border-left: 6px solid #E2E3E5;
		  /*border-right: 6px solid #E2E3E5;*/
		}			
		.warningPurple {
		  background-color: #FAE9FC; 
		  color: #272727;
		  border-left: 6px solid purple;
		  border-right: 6px solid purple;
		  border-top: 3px solid purple;
		  border-bottom: 3px solid purple;
		  padding:0px 5px 15px;
		  margin:10px 13px 0px 0px;
		}			
		.warningNoBorder {
		  background-color: #f8f8f8; 
		  color: #272727;
		  padding:0px 5px 15px;
		  margin:10px 13px 0px 0px;
		}			
		.warningGrey {
		  background-color: #f8f8f8; 
		  color: #272727;
		  border-left: 6px solid #686b69;
		  border-right: 6px solid #686b69;
		  border-top: 3px solid #686b69;
		  border-bottom: 3px solid #686b69;
		  padding:0px 5px 15px;
		  margin:10px 13px 0px 0px;
		}			
		
		.warningBlack {
		  background-color: black; 
		  color: white;
		  border-left: 2px solid black;
		  border-right: 2px solid black;
		  border-top: 2px solid black;
		  border-bottom: 2px solid black;
		  padding:0px 0px 0px 0px;
		  margin:0px 0px 0px 0px;
		}			
		
		
		
		.warningYellow {
		  background-color: Yellow; 
		  color: #272727;
		  border-left: 6px solid red;
		  border-right: 6px solid red;
		}			
		.warningWhite {
		  background-color: white; 
		  color: #272727;
		  border-left: 6px solid purple;
		  border-right: 6px solid purple;
		  border-top: 3px solid purple;
		  border-bottom: 3px solid purple;
		}			
			
			
	/*Sales panel*/
	

	
	.sales {
	  grid-column-start: auto;
	/*  position: fixed;*/
	  display: grid;
	  width: 100%;
	  top: 0;
	  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	  grid-gap: 0em;
	  margin: 0px;
	}
	.sales > span {
	  padding: 0px;
	  margin: 0px;
	 white-space: wrap;
	}

	.sales > div {
	  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
	  border-radius: 15px;
	  padding: 0px;
	  margin: 0px;
	 white-space: wrap;
	}
	.sales > button {
	  border-radius: 5px;
	  padding: 0px;
	  margin: 0px;
	  white-space: wrap;
	  border: none;
	  color: #000000;
	  background-color: #FFFFFF; 
	}
	
	.sales h1 {
	  margin: 0.5em 0;
	}
	
	.sales table {
	  table-layout: fixed;
	}
	
	.sales td {
	  word-wrap:break-word
	}
	
	.sales h1 {
	  margin: 0.5em 0;
	}
	
	.sales small { color: #fff; }
	
/*	.sales > div:nth-child(even) {
	  background: linear-gradient(0deg, #b52b4b, #ea335d);
	}*/
	
/*	.sales > div:nth-child(odd) {
	  background: linear-gradient(0deg, purple, purple);
	}	*/		
			
			
	.switch {
	  position: relative;
	  display: inline-block;
	  width: 40px;
	  height: 14px;
	}
	
	.switch input { 
	  opacity: 0;
	  width: 0;
	  height: 0;
	}
	
	.slider {
	  position: absolute;
	  cursor: pointer;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: #ccc;
	  -webkit-transition: .4s;
	  transition: .4s;
	}
	
	.slider:before {
	  position: absolute;
	  content: "";
	  height: 12px;
	  width: 12px;
	  left: 0px;
	  bottom: 1px;
	  background-color: white;
	  -webkit-transition: .4s;
	  transition: .4s;
	}
	
	input:checked + .slider {
	  background-color: #2196F3;
	}
	
	input:focus + .slider {
	  box-shadow: 0 0 1px #2196F3;
	}
	
	input:checked + .slider:before {
	  -webkit-transform: translateX(26px);
	  -ms-transform: translateX(26px);
	  transform: translateX(26px);
	}
	
	/* Rounded sliders */
	.slider.round {
	  border-radius: 10px;
	}
	
	.slider.round:before {
	  border-radius: 40%;
	}			
			
			
	
/*===== Navbar =====*/
.navbar {
  text-decoration: none;
  background: #1c2147;
  z-index: 3;
 /* position: fixed; */
 /* height:40px;*/
  width: 100%;
	margin:0px 0px 10px 0px;
}

.navbar .container {
  max-width: 1250px;
 /* padding: 1em 2em;*/
  margin: 0 auto;
}

.navbar .container > div {
  display: grid;
  grid-template-columns: 1fr 6fr;
  align-items: center;
}

.navbar .menu,
.navbar .social-media {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar ul {
  display: inline-block;
}

.navbar ul li {
  display: inline-block;
 /* margin: 0 0.5em;*/
  font-size: 1.25em;
}

.navbar ul a {
  font-size: 0.8em;
  text-transform: uppercase;
  color: #704090;
/*  padding-bottom: 0.2em;*/
  transition: 0.3s;
  border:0px;
}

.navbar button {
  font-size: 0.8em;
  text-transform: uppercase;
  color: #704090;
/*  padding-bottom: 0.2em;*/
  transition: 0.3s;
  border:0px;
	font-size: 1.25em;
	background-color: #F6EFFD;
}

.navbar ul a button:hover, .dropdown:hover .dropbtn {
  color: red;
}

.navbar .active {
 /* border-bottom: 2px #03dcee solid;*/
  color: blue;
}

.navbar .container .menu-btn {
  display: none;
}

.options span {
  font-size: 2em;
  color: #fff;
}

.profile-img {
  width: 2.5em;
  border-radius: 50%;
}

.notification { position: relative; }

.notification::before {
  content: '5';
  position: absolute;
  top: -1.5em;
  right: -0.5em;
  width: 1.5em;
  height: 1.5em;
  background: #ea335d;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
}	




/* submenu style */
.navbar ul .submenu{
	position: absolute;
	width: 200px;
	background-color: #F6EFFD;
	box-shadow: 0 20px 45px #00000020;
	margin-top 50px;
	opacity: 0;
	z-index : -999; 
	transition: all ease 0.5s;
}
.navbar ul li:hover .submenu{
	z-index:99;
	opacity: 1;
	margin-top: 0;
}
.navbar ul .submenu li{
	margin:0;
	width: 100%;
}
.navbar ul .submenu li a{
	padding: 2px 10px;
	display: inline-block;
	width:100%;
}	
/*===== Dropdown =====*/
/*===== https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp =====*/
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F6EFFD;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a li button {
/*  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;*/
  
	text-decoration: none;
	color: #704090;
	padding: 5px 0;
	display: inline-block;
	transition: all ease 0.3s;
	font-size: 1.25em;

}

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

.dropdown:hover .dropdown-content {
  display: block;
}

header{
/*	position: fixed;*/
	display:flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 0 55px;
	border-bottom: 1px solid #dbdbdb;
	background-color: #F6EFFD;
	margin:0px 0px 0px 0px;
}
header ul li{
	display: inline-block;
	list-style:none;
	margin:0 30px;
}
header ul li:last-child{
	margin-right:0;
}
header ul li a button{
	text-decoration: none;
	color: #704090;
	padding: 5px 0;
	display: inline-block;
	transition: all ease 0.3s;
	font-size: 1.25em;
} 
header ul li a button:hover{
	color:#202090;
}

/* submenu style */
header ul .submenu{
	position: absolute;
	width: 200px;
	/*background-color: #F6EFFD;*/
	/*box-shadow: 0 20px 45px #00000020;*/
	margin-top 0px;
	opacity: 0;
	z-index : -999; 
	transition: all ease 0.5s;
}
header ul .dropdown-content{
	position: absolute;
	width: 200px;
/*	background-color: #F6EFFD; */
/*	box-shadow: 0 20px 45px #00000020;*/
	margin-top 0px;
	opacity: 0;
	z-index : -999; 
	transition: all ease 0.5s;
}
header ul li:hover .submenu{
	z-index:99;
	opacity: 1;
	margin-top: 0;
}
header ul li:hover .dropdown-content{
	z-index:99;
	opacity: 1;
	margin-top: 0;
}
header ul .submenu li{
	margin:0;
	width: 100%;
}
header ul .dropdown-content li{
	margin:0;
	width: 100%;
}
header ul .submenu li a{
/*	padding: 2px 10px;*/
	display: inline-block;
	width:100%;
}

header ul .dropdown-content li a{
/*	padding: 2px 10px;*/
	display: inline-block;
	width:100%;
}

header .dropdown-content {
  display: none;
  position: absolute;
  /*background-color: #F6EFFD;*/
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

header .dropdown-content a li button {
/*  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;*/
  
	text-decoration: none;
	color: #704090;
	padding: 5px 0;
	display: inline-block;
	transition: all ease 0.3s;
	font-size: 1.25em;

}

header .dropdown-content a:hover {
  background-color: #F6EFFD;
}

header .dropdown:hover .dropdown-content {
  display: block;
}




/*===== Sidebar =====*/
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  padding: 5em 2em 0 2em;
  background: linear-gradient(0deg, darkgrey, black);
  max-width: 18em;
  overflow-y: scroll;
}

.sidebar .container {
  position: relative;
  height: 100%;
}

.sidebar .title {
  font-weight: 400;
  color: #6b6f8a;
}

.sidebar ul {
  margin: 1em 0 3em 0;
}

.sidebar li {
  display: block;
  padding: 1em 0;
  border-bottom: 1px #21284c solid;
}

.sidebar ul a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.sidebar a .material-icons {
  margin-right: 0.7em;
  color: #6b6f8a;
  transition: 0.3s;
}

.sidebar a:hover .material-icons {
  color: #fff;
}

.note {
  background: linear-gradient(90deg, #0e133d, #1d1d4d);
  box-shadow: 
    0 0 10px rgba(0, 0, 0, 0.5),
    inset 5px 5px 0 #10183b,
    inset -5px -5px 0 #161e41;
  padding: 1.5em;
  border-radius: 15px;
}

.btn {
  background: linear-gradient(90deg, #178add, #03dcee);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  font-size: 1.2em;
  border-radius: 2em;
  display: inline-block;
  padding: 0.5em 1.5em;
}

.sidebar-footer {
  padding: 3em 1em 1em 1em;
}







/* === sidenav == */
/* Fixed sidenav, full height */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  /*font-size: 1.25em;*/
  color: pink;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.sidenav a, .dropdown-btn2 {
  padding: 6px 8px 6px 26px;
  text-decoration: none;
  /*font-size: 1.25em;*/
  color: pink;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  /*font-size: 1.25em;
  color: #f1f1f1;
}

/* Main content */
.main {
 /* margin-left: 200px; /* Same as the width of the sidenav */
 /* font-size: 20px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {
  /*background-color: darkblue;*/
  /*font-size: 1.0em;*/
  color: white;
}

/* 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: white;
  padding-left: 8px;
}
.dropdown-container2 {
  display: none;
  background-color: white;
  padding-left: 18px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  /*float: right;*/
  padding-right: 8px;
}

/*https://stackoverflow.com/questions/36126340/button-with-partial-border-on-top-and-bottom */
.brd {  
  font-size: 30px;
  padding: 4px 20px;
  position: relative;
  border: none;
  background-color: #FEFCFF;
}
.brd:before,
.brd:after {
  content: ' ';
  position: absolute;
  border: 1px solid black;
  top: 0;
  bottom: 0;
  width: 10px;
}
.brd:before {
  border-right: 0;
  left: 0;
}
.brd:after {
  border-left: 0;
  right: 0;
}