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

  .record-table{

    display: block;

    overflow-x: scroll;

  }

  button.copy-button {

    font-size: 14px;

    min-width: 120px;

    text-transform: capitalize;

    padding: 8px 10px;

  }

}

#pass-auto{
      border: 0;
    background: #9bd2c5;
    color: #2d3f58;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    cursor: pointer;
}
#popup-box {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.link-style {
  display: inline-block;
  padding: 6px 12px;
  margin: 10px;
  font-size: 16px;
  color: blue;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.status{

  padding: 10px;

  border-radius: 5px;

  min-width: 85px;

  display: inline-block;

  color:#fff;

  font-weight: bold;

}

.done{

  background-color: #28A745;		

}

.pending{

  background-color: #FFC107;

}



.justify-center{

  justify-content: center;

}

.download-qr-code{

 text-decoration: none !important;

 color: #2d3f58;

}



.open-link {

  padding: 0 15px;

  text-decoration: none !important;

  color: #2d3f58;

  font-weight: 600;

}

.open-link i.fa,

.download-qr-code i.fa{

  margin-left: 5px;

}

.link-box{

  display: none;

}

.email-notification.not-found h2, 

.email-notification.not-found h5 {

  font-weight: 600;

  margin-bottom: 30px !important;

  text-transform: uppercase;

}

.header i.fa {

  font-size: 18px;

  font-weight: 600;

  margin-left: 10px;

}

label.label {

  font-size: 18px;

}

h2 {

  font-size: 35px;

}

.login-form .submit {

  padding: 20px 0 20px;

}

h2.heading {

  text-align: center;

  padding: 20px 0 20px;

  font-weight: 600;

}

.qr-code{

  height: 100px;

  width:100px;

}

.user-detail {

    padding: 10px;

}

.login-logout, .bulk-qr {

  padding: 10px 10px;

  text-align: center;

}

.login-logout a, .bulk-qr a{

  color: #3a3a3a;

}

.record-table{

  width: 100%;

  text-align: center;

}

.record-table td, .record-table th {

  border: 1px solid;

  padding: 10px 20px;

}

#error_para {

  color: red;

  margin-bottom: 30px !important;

  width: 100%;

  float: left;

  font-weight: 600;

}

table#formrecord tr td:first-child {

  font-weight: 600;

}

button:focus {

  outline: 0;

}

.error {

  color: #FF0000;

}

h2.form-title {

  text-align: center;

  padding: 30px 0;

  border-bottom: 1px solid #00000014;

  margin-bottom: 30px;

  text-transform: uppercase;

  font-weight: 600;

}



.email-notification h3{

  text-transform: uppercase;

  font-family: Helvetica;

  margin-bottom: 30px;

  line-height: 1.3;

}

.email-notification{

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  text-align: center;

  padding: 30px;

}

.email-notification a button {

  border: 0;

  background: #9bd2c5;

  color: #2d3f58;

  padding: 13px 30px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1px;

  margin: 10px 10px 0;

}

.email-notification a button:hover {

  opacity: 0.9;

}

div.submit {

  padding: 30px 0 0;

}

.form-field {

  float: left;

}

.mb15 {

  margin-bottom: 15px;

}

.mb20 {

  margin-bottom: 20px;

}

.mb30 {

  margin-bottom: 30px;

}

.form-section {

  padding: 30px;

  background: #f3f3f3;

}

.section {

  padding: 30px;

  padding-bottom: 100px;

}



.height-90{

    min-height:90px;

}

select, input, textarea {

  width: 100%;

  min-height: 40px;

  padding: 8px 10px 8px 10px;

  border-width: 1px !important;

  border-color: #ccc !important;

  border-radius: 2px;

  border-style: solid;

  background-color: transparent;

}

.margin-auto{

  margin: auto;

}

.submit button, .copy-button {

  border: 0;

  background: #9bd2c5;

  color: #2d3f58;

  padding: 8px 30px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1px;

}

button:hover {

  opacity: 0.9;

}

.announcement-bar{

  background-color: #2d3f58;

  position: relative;

}

.announcement-bar__message {

  display: block;

  padding: 10px 20px 10px;

  color: #e8b152;

  text-align: center;

  font-weight: 700;

}

.logo {

  max-width: 250px;

}



/* Header/logo Title */

.header {

  text-align: center;

  padding-top: 30px;

}

/* Style the body */

body {

  font-family:Helvetica, 'Helvetica Neue', Arial, 'Lucida Grande', sans-serif;

  margin: 0;

}



/* Increase the font size of the heading */

.header h1 {

  font-size: 40px;

}



/* Style the top navigation bar */

.navbar {

  overflow: hidden;

  background-color: #2d3f58;

  justify-content: center;

}



/* Style the navigation bar links */

.navbar a {

  float: left;

  display: block;

  color: white;

  text-align: center;

  padding: 14px 20px;

  text-decoration: none;

}



/* Right-aligned link */

.navbar a.right {

  float: right;

}



/* Change color on hover */

.navbar a:hover {

  background-color: #ddd;

  color: black;

}



/* Column container */

.row {  

  display: -ms-flexbox; /* IE10 */

  display: flex;

  -ms-flex-wrap: wrap; /* IE10 */

  flex-wrap: wrap;

}





/* Footer */

.footer {

  padding: 20px;

  text-align: center;

  background: #2d3f58;

  color: #9bd2c5;
  bottom: 0;

  width: 100%;

  min-height: 70px;

}



.footer a{

  color: #9bd2c5;

}



/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */

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

  .row {   

    flex-direction: column;

  }
  #popup-box{
    width:90%;
  }
  .link-style{
    width: 100% !important;
    font-size: 12px !important;
  }

}



/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */

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

  .navbar a {

    float: none;

    width: 100%;

  }
   #uploadfile, #imageUpload{
    font-size: 14px;
    background-color: white;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    padding: 5px !important;
   }
}