body {
  background: #e3e5fc;
  color: #333333;
  margin-top: 1rem;
}

h1, h2, h3, h4, h5, h6 {
  color: #444444;
  font-family: 'Helvetica';
}

ul {
  margin: 1rem;
}

.bg-steel {
  background-color: #6e78e3;
}

.site-header .navbar-nav .nav-link {
  padding: 10px 10px;

    font-family: 'Helvetica';
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
    color: white;

    text-decoration: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}


.site-header .navbar-nav .nav-link:hover {
   padding: 10px 10px;

    font-family: 'Helvetica';
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
    color: #ffe970;

    text-decoration: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.content-section {
  background: #ff8960;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  width: 3000px;

  border-radius: 3px;
  margin-bottom: 20px;
   font-family: 'Helvetica';
}


///////////

.site-header .navbar-nav .nav-link-out {
  padding: 10px 10px;

    font-family: 'Helvetica';
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
    color: white;

    text-decoration: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}


.site-header .navbar-nav .nav-link-out:hover {
   padding: 10px 10px;

    font-family: 'Helvetica';
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
    color: #ffe970;

    text-decoration: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.site-header .navbar-nav-out {
  font-weight: 500;
}

.content-section {
  background: #ffffff;
  margin:0;
  width: 3000px;
  padding: 5px 10px;
  border: 1px solid #dddddd;
  border-radius: 3px;
   font-family: 'Helvetica';
}

.content-section-wide {
  background: #ffffff;
  width: 5000px;
  margin:0;
  padding: 5px 10px;
  border: 1px solid #dddddd;
  border-radius: 3px;
   font-family: 'Helvetica';
}

.even td {
background: #e3e5fc;
}

.odd td {
background: white;
}

.table tr hover {background: #ff8960;}

.table thead tr {
background: #6e78e3;
}

.orderable {
    font-size: 18px;
    color: black;
    text-align: left;
    vertical-align: top;
    padding: 2px 5px;
}


.orderable a {
  color: white;
  font-family: 'Helvetica';
  text-decoration: none;
}


.orderable a:hover {
  color: black;
  text-decoration: bold;
  font-family: 'Helvetica';
  text-decoration: none;
}

 /* Pagination links */
.pagination a {
  list-style-type: none;
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}

/* Style the active/current link */
.pagination a.active {
  list-style-type: none;
  background-color: dodgerblue;
  color: white;
}

/* Add a grey background color on mouse-over */
.pagination a:hover:not(.active) {
list-style-type: none;
background-color: #ddd;}

.pagination li{
  display: inline;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}


.button_add {
  background-color: #07a83f;
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
}

.button_repeat {
  background-color: #D3D3D3;
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
}

.button_add:hover {opacity: 1}

.btn {
  width: 130px;
  height: 40px;
  background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%); /* W3C */
  border: none;
  border-radius: 5px;

  border-bottom: 4px solid #2b8bc6;
  color: #fbfbfb;
  font-weight: 600;
  font-family: 'Helvetica';
  text-shadow: 1px 1px 1px rgba(0,0,0,.4);
  font-size: 15px;
  text-align: left;
  text-indent: 5px;
  box-shadow: 0px 3px 0px 0px rgba(0,0,0,.2);
  cursor: pointer;

/* Just for presentation */
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
}

.button_back {
  background-color: red;
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 0.6;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
}

.button {
  width: 130px;
  height: 40px;
  background: linear-gradient(to bottom, #6e78e3 0%,#7c85e5 100%); /* W3C */
  border: none;
  border-radius: 5px;
  color: #fbfbfb;
  font-weight: 600;
  font-family: 'Helvetica';
  text-shadow: 1px 1px 1px rgba(0,0,0,.4);
  font-size: 15px;
  text-align: left;

  box-shadow: 0px 3px 0px 0px rgba(66,72,136,1);
  cursor: pointer;

/* Just for presentation */
  display: block;

  margin-bottom: 20px;
}

.button:hover {opacity: 1}