*{
  padding:0;
  margin:0;
  box-sizing: border-box;
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
}


.container{
  margin: 0 auto;
  max-width: 1366px;
  border: 1px solid #e1e1e1;
  border-radius: .2rem;
}

header{
  padding:1.5rem;
  text-align: center;
  font-size: 2.5rem;
}

h1{
  font-size: 4vw;
}

h2{
  font-size: 2rem;
}

.wide_band{
  border: 15px solid #999999;
  margin-bottom: 10px;
}

.red{
  color:#f23400;
  font-weight: bold;
}

.inline_span{
  display:inline;
}

.inline_span a{
  text-decoration: none;
}

footer{
  background:#666666;
  padding: 0.5rem;
  color: white;
}

footer a{
  color: white;
  text-decoration: none;
}

main {
  padding: 1rem;
  text-align: center;
  
}



.login-wrapper{
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  
}

.login-field, .login-btn {
  width:280px;
  text-align: center;
  border: none;
  border-radius: 0.4rem;
  padding: 0.4rem;
  margin: 0.2rem;
}



.login-btn {
  background: dodgerblue;
  color:white;
}

.login-img, .login-img img {
    max-width: 280px;
    max-height: 100%;
}

.menu-top-wrapper{
  display: flex;
  justify-content: center;
}

.menu-top-wrapper a{
  text-decoration: none;
}

/* link like a small orange button */
.like-btn-sml{
  background: orange;
  color:white;
  text-align: center;
  border: none;
  border-radius: 0.4rem;
  padding: 0.2rem;
  margin: 0.2rem;
  text-decoration: none;
}

.like-btn-sml:hover{
  background:coral;
}

.table{
  position: relative;
  margin: 0 auto;
  background: #ffffff;
  width:100%;
  border-collapse: collapse;
  border:1px solid #999999;
}

.table th, .table td {
  text-align: left;
  padding: 8px;
}

.table tr:nth-child(even){background-color: #f2f2f2};

/* button styled like bootstrap */
td .btn {
  /* default for <button>, but useful for <a> */
  display: inline-block;
  text-align: center;
  text-decoration: none;

  /* create a small space when buttons wrap on 2 lines */
  margin: 2px 0;

  /* invisible border (will be colored on hover/focus) */
  border: solid 1px transparent;
  border-radius: 4px;

  /* size comes from text & padding (no width/height) */
  padding: 0.5em 1em;

  /* make sure colors have enough contrast! */
  color: #ffffff;
  background-color: lightcoral;
}

/* Alphabetical selector to enable record filtering rolodex style */
.rolo{
  margin-bottom:.3rem;
}

.rolo a{
  text-decoration: none;
}

.rolo a:hover{
  background-color: lightgrey;
}


/* style add and edit forms */
.frm_ae{
  margin:0 auto;
  width: 30rem;
}

.frm_ae > div{
  display: flex;
  flex-direction: column;
  text-align: left;
  
}

.frm_ae{
  background-color: #b8c6db;
  background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%);
  border-radius: 10px;
}

.frm_ae > input[type=label]{
  font-weight:bold;
}

.frm_ae button{
  color: orange;
  color:white;
  text-align: center;
}

 .frm_ae input[type=text] , .frm_ae input[type=date], .frm_ae input[type=checkbox], .frm_ae textarea, .frm_ae select {
  padding:10px;
  margin:10px;
  border:0;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.06);
}

.frm_ae textarea{
  resize: none;
  height:10vh;
}

.frm_ae label {
  margin: 10px 10px 2px 10px;
}

footer{
  text-align: center;
}

.tbl_pics{
  background:#e1e1e1;
  width: 95%;
  margin:0 auto;
  border-collapse: collapse;
}

.tbl_pics  td{
  border: 1px solid #666666;
}

#output_image{
  display:flex;
  justify-content: center;
  width:100%;
  height:auto;
}

/*////////////////////////////////////// Mobiles, etc ///////////////////////////////////// */


@media screen and (max-width: 600px) {
  body{
    background:white;
  }
}