@font-face {
  font-family: Sinkin Sans\400;
  font-weight: 400;
  font-style: normal;
  src: url(/fonts/SinkinSans-400Regular-webfont.eot) format("embedded-opentype"),
    url(/fonts/SinkinSans-400Regular-webfont.svg) format("svg"),
    url(/fonts/SinkinSans-400Regular-webfont.ttf) format("truetype"),
    url(/fonts/SinkinSans-400Regular-webfont.woff) format("woff");
}

@font-face {
  font-family: Sinkin Sans\500;
  font-weight: 400;
  font-style: normal;
  src: url(/fonts/SinkinSans-500Medium-webfont.eot) format("embedded-opentype"),
    url(/fonts/SinkinSans-500Medium-webfont.svg) format("svg"),
    url(/fonts/SinkinSans-500Medium-webfont.ttf) format("truetype"),
    url(/fonts/SinkinSans-500Medium-webfont.woff) format("woff");
}

@font-face {
  font-family: Sinkin Sans\600;
  font-weight: 400;
  font-style: normal;
  src: url(/fonts/SinkinSans-600SemiBold-webfont.eot)
      format("embedded-opentype"),
    url(/fonts/SinkinSans-600SemiBold-webfont.svg) format("svg"),
    url(/fonts/SinkinSans-600SemiBold-webfont.ttf) format("truetype"),
    url(/fonts/SinkinSans-600SemiBold-webfont.woff) format("woff");
}

@font-face {
  font-family: Sinkin Sans\700;
  font-weight: 400;
  font-style: normal;
  src: url(/fonts/SinkinSans-700Bold-webfont.eot) format("embedded-opentype"),
    url(/fonts/SinkinSans-700Bold-webfont.svg) format("svg"),
    url(/fonts/SinkinSans-700Bold-webfont.ttf) format("truetype"),
    url(/fonts/SinkinSans-700Bold-webfont.woff) format("woff");
}

@font-face {
  font-family: Sinkin Sans\800;
  font-weight: 400;
  font-style: normal;
  src: url(/fonts/SinkinSans-800Black-webfont.eot) format("embedded-opentype"),
    url(/fonts/SinkinSans-800Black-webfont.svg) format("svg"),
    url(/fonts/SinkinSans-800Black-webfont.ttf) format("truetype"),
    url(/fonts/SinkinSans-800Black-webfont.woff) format("woff");
}

/* We don't want any links to be underlined. Let's remove that globally */
a {
  text-decoration: none;
}

body {
  font-family: Sinkin Sans\400, Helvetica Neue, Helvetica, Roboto, Arial,
    sans-serif;
  font-weight: 400;
  line-height: 1.5;
}

#head {
  font-family: Sinkin Sans\400, Helvetica Neue, Helvetica, Roboto, Arial,
    sans-serif;
  display: block;
  margin: 2.5%;
}
#head h1.title {
  padding: 0 0 0 20px;
  font-variant: small-caps;
  color: #fff;
}

.white-logo {
  width: 18px;
  height: 18px;
}

.h2-color {
  padding: 0 0 0 20px;
  /*  color: #18293b; */
  color: #2cb397;
}

input {
  font-size: 11px;
}

/* Navbar */

.navbar {
  margin: 2.5%;

  background-color: #18293b;
  display: flex;
  /* let's align the items so everything is nice and centered */
  align-items: center;
  height: 35px;
  font-family: Sinkin Sans\400, Helvetica Neue, Helvetica, Roboto, Arial,
    sans-serif;
  font-weight: 400;
  line-height: 1.5;
}

/* We want all links in the navbar to be #e7e7e7 */

.navbar a {
  color: #e7e7e7;
}
ul {
  margin-left: 10px;
}
li {
  margin-left: 10px;
  list-style-type: none;
}

.navbar ul {
  /* Let's remove the bullet points */
  list-style-type: none;

  /* display the list flex and align the items centered */
  display: flex;
  align-items: center;
}

.navbar .brand {
  /*Let's make the anchor display block.
	   This will ensure when we get the full width of the container.
	*/
  display: block;
  color: #e7e7e7;
  /* Remove padding from top/bottom and add 24px padding right/left */
  padding: 0 24px;
  font-size: 24px;
}

.navbar ul li a {
  color: #e7e7e7;

  /*Let's make the anchor display block.
	   This will ensure when we hover, focus, or is active we get the full width and height 
	    of the container.
	*/
  display: block;
}

/* When a user hovers, focuses or if the link is active change the background */
.navbar ul a:hover,
.navbar ul a:focus,
.navbar ul .active {
  background-color: #272727;
}
/* Footer */

#footer {
  clear: both;
  /* background: url("i/bot_bg.png") center no-repeat;*/
  height: 50px;
  padding: 0 20px 5px 0;
  text-align: right;
  color: #999;
  font-size: 10px;
}
#footer p {
  margin: 0;
  padding: 20px 0 0 0;
}

/* main ceritifcte list table view */

.container {
  display: table;
  width: 90%;
  border-collapse: collapse;
  margin-left: 5%;
  margin-right: 5%;
}

.container-60 {
  display: table;
  width: 60%;
  border-collapse: collapse;
  margin-left: 20%;
  margin-right: 20%;
}

.container-50 {
  display: table;
  width: 50%;
  border-collapse: collapse;
  margin-left: 25%;
  margin-right: 25%;
}

.heading {
  font-weight: bold;
  display: table-row;
  background-color: #18293b;
  text-align: center;
  line-height: 25px;
  font-size: 11px;
  color: #fff;
}
.table-row {
  display: table-row;
  font-size: 10px;
  text-align: center;
}
.form-button {
  display: table-row;
  text-align: center;
  font-size: 10px;
  background-color: #18293b;
  color: #2cb397;
  border-radius: 5px;
  font-weight: bold;
}

.form-button-noborder {
  display: table-row;
  text-align: center;
  font-size: 10px;
  background-color: #18293b;
  color: #2cb397;
  border-radius: 5px;
  font-weight: bold;
  border: 0px solid #ccc;
}

.col {
  display: table-cell;
  border: 1px solid #ccc;
}

.col-left {
  display: table-cell;
  border: 1px solid #ccc;
  text-align: left;
  padding: 3px;
}
.col-nb {
  display: table-cell;
  border: 0px solid #ccc;
  width: 33%;
  font-size: 11px;
}

.col-nb-left {
  display: table-cell;
  border: 0px solid #ccc;
  width: 33%;
  font-size: 11px;
  text-align: left;
}

/* Login form */

div.form {
  display: block;
  text-align: center;
}
.form {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.login {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  border-collapse: collapse;
  font-size: 11px;
}

.login-form-button {
  font-size: 11px;
  background-color: #18293b;
  text-align: center;
  color: #2cb397;
  font-weight: bold;
}

div.disclaimer_form {
  display: block;
  text-align: center;
}
.disclaimer {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
}
.tbutton {
  text-align: center;
}
.disclaim-text {
  padding-left: 20%;
  padding-right: 20%;
  text-align: justify;
  font-size: 12px;
}
.warning {
  padding-left: 30%;
  padding-right: 30%;
  text-align: center;
  font-size: 13px;
  color: red;
}
.message {
  padding-left: 30%;
  padding-right: 30%;
  text-align: center;
  text-justify: inter-word;
  font-size: 13px;
  color: #2cb397;
}

div.search-form {
  display: block;
  text-align: center;
}
.search-form {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  border-collapse: collapse;
  font-size: 11px;
}

.search-form-button {
  font-size: 11px;
  background-color: #18293b;
  text-align: center;
  color: #2cb397;
  font-weight: bold;
  border-radius: 5px;
}
options {
  font-size: 11px;
  background-color: #18293b;
  color: #e8e8e8;
}
select {
  font-size: 11px;
  width: 100%;
  color: #2cb397;
  background: #18293b;
  font-weight: bold;
  border-radius: 5px;
}
/* Banner */

.table-row-banner {
  width: 90%;

  display: table-row;
}

.col-banner {
  display: table-cell;
  border: 0px solid #ccc;
}

.banner {
  color: #000;
  text-align: right;
  font-size: 25px;
}
.drop-down {
  width: 33%;
}