html, body {
    background-color: hsl(0,0%,95%); 
    clear:both;
    height:100%;
    margin:0px;
    width:100%;
    font-family: helvetica,Arial,sans-serif;

}
h1 {
   font-size:larger; 
}

body {
    display:grid;
    grid-template-areas: "A"
    "B";
    grid-template-rows: 3rem auto;
    
}


  .f-title {
      grid-area:A;
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 0.5rem 2rem 0.5rem ;
      border-bottom: solid gray 1px;
      border-top: solid gray 1px;
      margin-bottom:2px;
      background: #0a66c2;
      color: hsl(0,0%,95%);
      position: fixed;
      top: 0;
      width: 100%;
      z-index:2;
  }
              

  .f-title-start {
      grid-column: 1;
      grid-row: 2;
      font-size: x-large;
      justify-self: start;
      margin-left: 1rem;
  
   }
  

  .f-title-center {
       grid-column: 2;
       grid-row: 2;
       font-size: x-large;
       justify-self:center;
  
  }
  
   
  .f-title-end {
      grid-column: 3;
      grid-row: 2;
      font-size: x-large;
      justify-self: end;
      margin-right: 1rem;
    
  
  }

  .f-content {
      font-family:Verdana, Geneva, Tahoma, sans-serif;
      grid-area:B;
      text-align:center;
      margin:6em;
      font-size:large;
      
  }

   




.centerpage {
   text-align:center;
   position:absolute;
   top: 50%;
   transform: translate(0,-50%);
}

.orange {
    color:orange;
}

.red {
    color:red;
    background-color:#F2F2F2;

}

.clickable {
    cursor:pointer
}
.hidden {
    max-height: 0 !important;
}

.menu:not(.hidden) {
    z-index: +3;
    position: relative;
    background-color:#0a66c2;

}


.dropdown .menu{
	/* transition: max-height .5s ease-out; */
	max-height: 20em;
	overflow: hidden;
}

.dropdown .menu .option{
	margin: .5em .5em .5em .5em;
	margin-top: 0.3em;
}


.f-title-end {
   display:grid;
   grid-template-rows: 1fr;
   grid-template-columns: 1fr 1fr;
   font-size: x-large;
   align-items: baseline;

}

.menu div:hover {
    color:gray;   
    /*margin: 0em .5em .5em 0em;
	margin-top: 0em;*/
}


.menu  .option.item_selected {
    color:gray;   
    cursor:not-allowed;
}

.menu  .option.item_selected::before {
    content: "\2611";
    
}

.menu  .option:not(.item_selected)::before {
    content: "\2610";
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #ccc;

  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
  }

  .tabcontent.active {
      display:block;
  }

  .tabcontent:not(.active) {
    display:none;
}