/* Full-width input fields */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
.tabcontent button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}


/* Style the tab */
.tab {
    overflow: hidden;
    text-align: center;
    border: none;   
    background-color: #ffffff;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: center;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 30px;
}

/* 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;
}

/* Center the image */
.logo {
    text-align: center;   
}

.logo img {
    max-width: 50%;
    height: auto;
    width: auto\9; /* ie8 */ 
}

span.psw {
    float: right;
    padding-top: 16px;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

.modal hr {
    width: 100%;
    color: lightgrey;
    height: 1.2px;
    background-color:lightgrey;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
}

.callout {
  margin-left: 10px;
  max-width: 400px;
}

.callout-warning {
  position: fixed;
  right: 10px;
  bottom: 15px;
}

.callout-error {
  position: fixed;
  left: 10px;  
  bottom: 15px;
}

.callout-header {
  padding: 8px 30px 8px 8px;
  font-size: 16px;
  font-weight: bold
}

.callout-error .callout-header{
    background: red;
      color: white;
}

.callout-success .callout-header{
    background: green;
      color: white;
}

.callout-warning .callout-header{
    background: orange;
      color: white;
}

.callout-container {
  font-size: 10px;
  padding: 10px;
  background-color: #ddd;
  color: black
}

.closebtn {
  position: absolute;
  top: -5px;
  right: 8px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

.closebtn:hover {
  color: lightgrey;
}