@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Serif+4:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body{
    background: #EFEFEF url(../images/bg.jpg) repeat;
    font-family: 'Times New Roman', Times, serif;
    }
container {
    position: relative;
  }    

.responsive {
    width: auto;
    max-width: 100%;
}
.welcome {
    color: tomato;
    font-size:2vw;
    font-family: 'Gentium Book Basic', serif;
    text-align: center;
}


/* Footer */

#footer {
	overflow: hidden;
	width: 100%;
	height: 75px;
	background-color: #05457D;
}

#footer .f {
    font-size:18px;
	color: yellow;
	text-align:center;
    font-family: 'Times New Roman', Times, serif;
    margin: auto;
    word-spacing: 0.5px;
    letter-spacing: 0.4px;
}



/* End Footer */

/* Login */
h2 {
    text-align: center;
}
.con{
	background-color:lightgrey;
    border-radius:10px;
    padding:0px 0px 8px 8px;
    border: 3px solid lightsalmon;
    width: 380px;
    height: 300px;
}
.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 20px; 
}

.icon {
  padding: 10px;
  background: dodgerblue;
  color: white;
  min-width: 40px;
  text-align: center;
  border-radius:10px;
  }

.input-field {
  width: 100%;
  padding: 10px;
  border-radius:10px;
  border: 1.5px solid blue;
  background-color: white;
  font-family: 'Times New Roman', Times, serif;
}

.input-field:focus {
  border: 2px solid dodgerblue;
}

/* Set a style for the submit button */
 input[type=submit] {padding:10px 15px; font-family: 'Times New Roman', Times, serif;background:green; width: 75px; color: white; font: bold; font-size: 15; border:0 none;
        cursor:pointer;
        -webkit-border-radius: 5px;
        border-radius: 5px; }
    
button[type=submit] {padding:5px 8px; font-family: 'Times New Roman', Times, serif; background:green; width: 75px; color: white; font: bold; font-size: 15; border:0 none;
        cursor:pointer;
        -webkit-border-radius: 5px;
        border-radius: 5px; }
    
input[type=reset] {padding:10px 15px; font-family: 'Times New Roman', Times, serif; background:red; width: 75px; color: white; font: bold; font-size: 15; border:0 none;
        cursor:pointer;
        -webkit-border-radius: 5px;
        border-radius: 5px; }
          
          
button[type=reset] {padding:10px 15px; font-family: 'Times New Roman', Times, serif; background:red;  width: 75px;color: white; font: bold; font-size: 15; border:0 none;
        cursor:pointer;
        -webkit-border-radius: 5px;
        border-radius: 5px; }



/* MENU */
.topnav {
            overflow: hidden;
            background-color: #05457D;
            margin-left: 15px;
            margin-right: 15px;
          }
          
.topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
          }
          
          .topnav a:hover {
            background-color: lightyellow;
            color: #05457D;
          }
          
          .topnav a.active {
            background-color: #05457D;
            color: white;
          }
          
          .topnav .icon {
            display: none;
            color: lightyellow;
            background-color: #05457D;
            }
          
          @media screen and (max-width: 600px) {
            .topnav a:not(:first-child) {display: none;}
            .topnav a.icon {
              float: right;
              display: block;
            }
          }
          
          @media screen and (max-width: 600px) {
            .topnav.responsive {position: relative;}
            .topnav.responsive .icon {
              position: absolute;
              right: 0;
              top: 0;
            }
            .topnav.responsive a {
              float: none;
              display: block;
              text-align: left;
            }
          }
/* MENU END*/

/* BUTTON */
          .adduser {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 5px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            margin: 4px 2px;
            cursor: pointer;
            font-size: 20px;
            border-radius: 12px;
          }
        
         .userdetail, .edituser,.deleteuser {
            border: none;
            color: white;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            margin: 2px 2px;
            cursor: pointer;
            font-size: 15px;
            border-radius: 12px;
          }
        
          .userdetail {
            background-color:green;
          }
          .edituser{
              background-color: blue;
            }
          .deleteuser{
              background-color: red;
          }
/* BUTTON END */
          table{
            text-align: left;
          
        }

