body  
{  
    margin: 0;  
    padding: 0;  
    background-color:white;  
    font-family: 'Arial';  
  
      background-image: url("/photos/loginbg.jpg");
    background-size:100% 100%;
}  
.login{  
        width: 382px;  
        overflow: hidden;  
        margin: auto;  
        margin: 50 20 20 150px;  
        padding: 80px;  
        background: #1795d1;  
        border-radius: 10px ;  
        opacity: .8;
        position: relative;
        float: right;
        height: 40vh;
}  
h2{  
    text-align: center;  
    color: white;  
    padding: 10px;  
}  
h1{
  text-align: center;  
}
label{  
    color: white;  
    font-size: 17px;  
    
}  
#user{  
    width: 380px;  
    height: 30px;  
    border: none;  
    border-radius: 3px;  
    padding-left: 20px;  
    
}  
#pass{  
    width: 380px;  
    height:30px;  
    border: none;  
    border-radius: 3px;  
    padding-left: 8px;  
   
}  
#btn{  
    width: 380px;  
    height: 30px;  
    border: none;  
    border-radius: 17px;  
    padding-left: 7px;  
    color: blue;  
  
  
}  
span{  
    color: white;  
    font-size: 10px;  
}  
a{  
    float: right;  
    background-color: grey;  
}  


.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;
}

.crewnav {
  background-color: #0e3066;
  overflow: hidden;
  float:left;
}

.nav-links a {
  float: left;
  color: #1795d1;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.crewnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.crewnav a.active {
  background-color: #60aaff;
  color: white;
}


  
#leftdiv
        {
        float: left;
        color: #fff;
        width: 300px;
        padding: 20px;
        height: 100vh;
        background-image: linear-gradient(30deg, #0a5cc7, #dcecf2);
        
        border: white;
                }

#rightdiv
        {
        float: right;
        color: #fff;
        width: 100px;
        padding: 10px;
        height: 20vh;
        background-image: linear-gradient(30deg, #0a5cc7, #dcecf2);
        
        border: white;
                      }

#vessels select {
  display: none; /*hide original SELECT element: */
   background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
  
}    
       
         div a {
        font-size: 14px;
        color: #fff;
        display: block;
        padding: 12px;
        padding-left: 30px;
        text-decoration: none;
        outline: none;
          border: white;
      }
         div a:hover {
        color: #0a5cc7;
        background: #fff;
        position: relative;
        background-color: #fff;
          border: white;
      }
      
         
#middlediv
         {
          margin: 40px;
         float: middle;
         background-color:white;
           border: white;
             font-size: 14px;
              overflow: auto;
                    padding: 12px;
         }
#certdiv
           {
               margin: 40px;
         float: middle;
         background-color:white;
           border: white;
             font-size: 14px;
              overflow: auto;
                    padding: 12px;
                    
         }
     table {
    border-collapse: collapse;
            }
    th {
    background-color:  #60aaff;
    color: white;
        }

  
  /* Add a black background color to the top navigation */
.topnav {
  background-color: #0e3066;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
#topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
#topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
#topnav a.active {
  background-color: #60aaff;
  color: white;
}