body {font-family: Arial, Helvetica, sans-serif;}

* {box-sizing: border-box;}



/* Full-width input fields */

input[type=text], input[type=password],input[type=number] {

  width: 60%;

  padding: 15px;

  margin: 5px 0 22px 0;

  display: inline-block;

  border: none;

  background: #f1f1f1;

}

@media screen and (max-width: 600px) {



form.userform label{

  width: 100% !important;

 
  text-align: left;

  font-size:16px !important;

  margin-left: 100px;

  

}

.modal-content {

  margin-right: 0px !important;

}

input[type=text], input[type=number],input[type=password] {



 margin-right: 0px !important;

   width: 90% !important;



}

}

/* Add a background color when the inputs get focus */

input[type=text]:focus,input[type=number]:focus, input[type=password]:focus {

  background-color: #ddd;

  outline: none;

}

form.userform label{

  width: 20%;

  float: left;

  text-align: left;

  font-size: 17px;

  

}

/* Set a style for all buttons */

button {

  background-color: #4CAF50;

  color: white;

  padding: 14px 20px;

  margin: 8px 0;

  border: none;

  cursor: pointer;

  width: 100%;

  opacity: 0.9;

}



button:hover {

  opacity:1;

}



/* Extra styles for the cancel button */

.cancelbtn {

  padding: 14px 20px;

  background-color: #f44336;

}



/* Float cancel and signup buttons and add an equal width */

.cancelbtn, .signupbtn {

  float: left;

  width: 50%;

}



/* Add padding to container elements */

.container {

  padding: 16px;

 

  width: 100%;

  

}



/* The Modal (background) */

.modal {

  display: none; /* Hidden by default */

  position: fixed; /* Stay in place */

  z-index: 1; /* Sit on top */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: #474e5d;

  padding-top: 50px;

}



/* Modal Content/Box */

.modal-content {

  background-color: #fefefe;

  margin: 1% auto 1% auto; /* 5% from the top, 15% from the bottom and centered */

  width: 90%; /* Could be more or less, depending on screen size */

  border-radius: 20px;/* display border*/

}



/* Style the horizontal ruler */

hr {

  border: 1px solid #f1f1f1;

  margin-bottom: 25px;

}

 

/* The Close Button (x) */

.close {

  position: absolute;

  right: 35px;

  top: 15px;

  font-size: 40px;

  font-weight: bold;

  color: #f1f1f1;

}



.close:hover,

.close:focus {

  color: #f44336;

  cursor: pointer;

}



/* Clear floats */

.clearfix::after {

  content: "";

  clear: both;

  display: table;

}



/* Change styles for cancel button and signup button on extra small screens */

@media screen and (max-width: 300px) {

  .cancelbtn, .signupbtn {

     width: 100%;

  }

}



.error {color: #FF0000;

padding: 20px;

}



.check {color: white;

padding: 20px;

background-color: green;

}



.xx {

      text-align: center;

      color: red;

      font-size: 25px; 

}

.errorlog{

  background:red;

  color:white;

  padding: 10px;

  width: 100%;



}

.succesfull{

  background:green;

  color:white;

  padding: 10px;

  width: 100%;



}







/*TABLE decoration*/



.thead-dark tr th{

background-color: black;

color: white;

padding: 10px 30px;





}

.table.table-striped thead-dark{

  border:2px solid black;

  background-color: black;







}





.table-striped{

  border:2px solid black;

}