/* --------------   Responsive Container ------------------------- */
.flex-container
{
  width: 100%;
  Height: auto;

  display: flex;
  flex-direction: row;
  justify-content: left;
  flex-flow: wrap;
}

/* --------------   Responsive Container Center------------------------- */
.flex-container-center
{
    width: 100%;
    Height: auto;

    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-flow: wrap;
}

/* --------------   Responsive Container Right------------------------- */
.flex-container-left
{
    width: 30%;
    Height: auto;

    display: flex;
    flex-direction: row;
    justify-content: right;
    flex-flow: wrap;
}

/* --------------------------------- Header -----------------------*/

.page-header
{
   width: 100%;
   Height: auto;
   background: #1d1f22;
   padding: 8px;

   display: flex;
   flex-direction: row;
   justify-content: left;
   flex-flow: wrap;
}

/* --------------------------------- Section -----------------------*/
.section
{
  width: 100%;
  background: #2a3d54;
  border-radius: 0px;

  text-align: left;
  padding:6px 6px 6px 16px;
  margin: 10px 0px 10px 0px;
  text-decoration: none;
  color: darkgrey;
  font-family: Arial;
  font-weight: normal;
  font-size: 16px;
}

h1
{
   font: 22px "Arial";
   font-weight: bold;
}

h2
{
   font: 16px "Arial";
   font-weight: normal;
}

h3
{
   font: 14px "Arial";
   font-weight: normal;
}

hh
{
   font: 16px "Arial";
   font-weight: bold;
   text-align: center;
   color: #27435a;
   padding: 5px;
}

.price-tag
{
   width: auto;
   padding: 10px;
   margin: 10px;
   font: 32px "Arial";
   font-weight: normal;
   color: #e4888c;
   background-color: #2f5f83;
   text-align: center;
   align-self: center;
   border-radius: 5px;
}

.buttonLarge
{
  height: 40px;
  width: 200px;
  background: #244e80;
  margin: 10px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 0px;

  display: table-cell;

  text-decoration: none;
  color: darkgrey;
  text-align: center;
  font-family: Arial;
  font-weight: normal;
  font-size: 16px;
}

.button
{
  height: 24px;
  width: auto;
    min-width: 120px;
  background: #244e80;
  margin: 5px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 3px;

  display: table-cell;

  text-decoration: none;
  color: darkgrey;
  text-align: center;
  font-family: Arial;
  font-weight: normal;
  font-size: 12px;
}
.button:hover
{
  background: #c5d285;
   color: #000000;
}

.button-cancel
{
  background: #d7dbda;
  padding: 8px 15px 8px 15px;
  border: 2px #4B99AD;
  color: #4B99AD;
  margin: 10px 10px 10px 10px;
  text-decoration: none;
  font-family: Arial;
  font-weight: normal;
  font-size: 14px;
}

.button-cancel:hover
{
  background: #db9b94;

}

/* --------------   Forms  ------------------------- */

.form-entry
{
  height: auto;
  width: auto;
  background: #2d454b;
  margin: 8px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px #535452;
  border-radius: 0px;

  display: table-cell;

  text-decoration: none;
  color: darkgrey;
  text-align: left;
  box-shadow: 1px 1px 6px #696a6f;
  font: 16px "Lucida Sans Unicode", "Lucida Grande", sans-serif;

}

.form-entry label
{
  color: #dbddd3;
  font-weight:bold;
  font: 12px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.form-style-1 input[type=text],
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
textarea,
select{
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border:1px solid #BEBEBE;
  padding: 7px;
  margin:0px;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  width: 400px;
  min-width: 200px;
}
.form-style-1 input[type=text]:focus,
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 textarea:focus,
.form-style-1 select:focus{
  -moz-box-shadow: 0 0 8px #88D5E9;
  -webkit-box-shadow: 0 0 8px #88D5E9;
  box-shadow: 0 0 8px #88D5E9;
  border: 1px solid #88D5E9;

}
.form-style-1 .field-divided{
  width: 49%;
}

.form-style-1 .field-long{
  width: 100%;
}
.form-style-1 .field-select{
  width: 100%;
}
.form-style-1 .field-textarea{
  height: 100px;
}
.form-style-1 input[type=submit], .form-style-1 input[type=button]{
  background: #4B99AD;
  padding: 8px 15px 8px 15px;
  border: none;
  color: #fff;
  margin: 10px 10px 10px 10px;
}


.form-style-1 input[type=submit]:hover, .form-style-1 input[type=button]:hover{
  background: #6ca4a1;
  box-shadow:none;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  margin: 10px 10px 10px 10px;
}
.form-style-1 .required{
  color:red;
}

/* --------------   Table    ------------------------- */

table {
  border-collapse: collapse;
  width: 98%;
  margin: 16px;
  text-align: left;
  padding: 2px;
  border: 1px solid #171820;
  font: 16px "Lucida Sans Unicode", "Lucida Grande", sans-serif;

}

th
{
  background-color: #1e3042;
  color: #c4d0d1;
}

th, td {
  border: 1px solid #353e4b;
}

.hbar {
  width: 40%;
}

tr:nth-child(odd) {
  background-color: #f0ecdd;
}
tr:nth-child(even) {
  background-color: #fff9fe;
}

/* --------------------------------- Card -----------------------*/

.card
{
   min-width: 200px;
   max-width: 600px;
   position: relative;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-flex-grow: 1;
   flex-grow: 1;
   -webkit-flex-shrink: 1;
   flex-shrink: 1;
   -webkit-flex-basis: 0%;
   flex-basis: 0%;
   -webkit-align-self: auto;
   align-self: auto;
   background-color: transparent;
   background-image: none;
   border: 1px solid #DEDEDE;
   border-radius: 4px;
   margin: 10px 10px 10px 10px;
   padding: 0;
   text-align: center;
   box-shadow: 1px 1px 9px #696969;
   align:center;

}


.card-2
{
    min-width: 600px;
    max-width: 1200px;
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
    -webkit-flex-basis: 0%;
    flex-basis: 0%;
    -webkit-align-self: auto;
    align-self: auto;
    background-color: transparent;
    background-image: none;
    border: 1px solid #DEDEDE;
    border-radius: 4px;
    margin: 10px 10px 10px 10px;
    padding: 0;
    text-align: center;
    box-shadow: 1px 1px 9px #696969;
    align:center;

}