html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}


body {
    background: #26afa3 url(../images/bg.jpg) no-repeat center center fixed;
    font-family: 'Segoe UI','PT Sans','Helvetica Neue','HelveticaNeue-Light',Helvetica,Arial,sans-serif;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


#main {
    PADDING-BOTTOM: 0px;
    BACKGROUND-COLOR: #ffffff;
    MARGIN: auto;
    PADDING-LEFT: 0px;
    WIDTH: 980px;
    PADDING-RIGHT: 0px;
    HEIGHT: auto;
    PADDING-TOP: 0px -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.5);
}

.siteheader {
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    display: table;
    background: #ebb825;
    border-bottom: 1px solid #f4db0e;
    font-size: 0.8em;
}

.subheader {
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
    display: table;
    background: linear-gradient(to right, #fafcfd 0%, #2a899a 100%);
    border-top: 4px solid #97bc13;
    position: relative;
    left: 0;
    z-index: 9;
    font-family: 'Oswald', sans-serif;
}

p {
    padding: 0px;
    margin-left: 0px; /* updated*/
    font-size: 0.8em;
}

.panel {
    /*  background-color: #fff;*/
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    /*  margin-bottom: 20px;*/
    padding: 15px;
}

h1 {
    font-family: 'Oswald', arial, helvetica, sans-serif;
    color: #113366;
    font-size: 2em;
    text-transform: uppercase;
    margin: 8px;
}

h2 {
    font-family: 'Oswald', arial, helvetica, sans-serif;
    color: #113366;
    font-size: 1.5em;
    text-transform: initial;
}

h3 {
    font-family: 'Oswald', arial, helvetica, sans-serif;
    color: #113366;
    font-size: 1.1em;
    line-height: 0.9em;
    text-transform: uppercase;
    margin: 8px;
}

h4 {
    font-family: 'Oswald', arial, helvetica, sans-serif;
    color: #113366;
    font-size: 0.8em;
    line-height: 0.3em;
    text-transform: uppercase;
    margin: 8px;
}


#applicationBox {
    WIDTH: 100%;
    BACKGROUND: #2E577F 0px 0px;
    HEIGHT: 25px;
    COLOR: white;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial, Helvetica, Sans-Serif;
    COLOR: #fff;
    font-size: 14px;
    font-weight: bold;
}

a.applicationLink:link {
    FONT-STYLE: normal;
    FONT-FAMILY: Arial, Helvetica, Sans-Serif;
    COLOR: #fff;
    FONT-WEIGHT: bold;
}

a.applink:link, a.applink:visited {
    color: #fff;
    font:800;
}

#navlist ul {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
}

.listacker li {
    width: 75px;
    height: 115px;
    margin: 0;
    padding: 0;
    display: inline;
    float: left;
    list-style-type: none;
    text-align: center;
    font-size: 0.3em;
    margin-right: 0.9em;
    margin-bottom: 0.3em;
    line-height: 0.8em;
}

#navlist li {
    display: inline;
    list-style-type: none;
}

#navlist a {
    padding: 3px 10px;
    font-family: 'BebasNeue', san-serif;
    text-shadow: 0px 3px 5px rgba(0, 0, 0, 1);
    font-size: 1.6em;
    text-transform: uppercase;
    font-weight: normal;
}

    #navlist a:link, #navlist a:visited {
        color: #fff;
        text-decoration: none;
    }

    #navlist a:hover {
        color: #fddd38;
        text-decoration: none;
    }


UL {
    PADDING-BOTTOM: 0px;
    MARGIN: 0px 0px 0px 20px;
    PADDING-LEFT: 0px;
    PADDING-RIGHT: 0px;
    PADDING-TOP: 0px;
}


/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}


/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

.loader {
    margin: auto;
    border: 20px solid #f3f3f3;
    border-radius: 50%;
    border-top: 15px solid #337ab7;
    border-bottom: 15px solid #337ab7;
    width: 100px;
    height: 100px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.loader-text {
    margin: auto;
    display: inline-block;
    font-size: 15px;
    align-content: center;
    width: 75%;
    font-weight: bold;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.formControlSpacing {
    margin-bottom: 12px !important;
}

.formControlHeight {
    height: 35px;
}

/* Set a style for all buttons */
button {
    color: white;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

.btn-primary {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
    transition-duration: 0.3s;
}

    .btn-primary:hover {
        background-color: #80dfff;
        border-color: #80dfff;
        color: white;
    }

* {
    margin: 0;
}


.logo {
    width: 89px;
    height: 101px;
    margin-left: 25px;
    margin-top: 20px;
    padding: 0;
    background-image: url(../images/DOHlogo-header.png);
    float: left;
    border: 4px solid white;
    background-size: 94px 105px;
    background-position: center;
    background-color: white;
}

.footerLogo {
    width: 53px;
    height: 60px;
    margin-left: 25px;
    margin-top: 0px;
    padding: 0;
    background-image: url('../images/DOHlogo.jpg');
    display: table;
    float: right;
}

a.two:link, a.two:visited {
    color: darkblue;
    font:700;
}

a.three:link, a.three:visited {
    color: black;
    font: 700;
}

table.datatbleStyle > tbody > tr:nth-child(odd) {
    background-color: #EAF3F3;
}

table.dataTable thead th {
    border: 1px solid thin gray;
    background-color: #167F92;
    color: #FFFFFF;
    padding: 1em;
    font-size: 16px;
    font-weight: 300;
}



.row-header {
    border: 1px solid thin gray;
    color: #113366;
    padding: 1em;
    font-size: 14px;
    font-weight: 600;
}


.title {
    FONT-FAMILY: Arial, sans-serif;
    COLOR: #336699 !important;
    FONT-SIZE: 2em;
    FONT-WEIGHT: bold;
}

.subTitle {
    FONT-FAMILY: Arial, sans-serif;
    COLOR: #336699 !important;
    FONT-SIZE: 1.5em;
    FONT-WEIGHT: bold;
}

/*remove arror input number type*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

/*footer*/
#pageBottom {
    TEXT-ALIGN: center;
    WIDTH: auto;
    HEIGHT: auto;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.5);
    font-family: 'Oswald', sans-serif;
    font-size: 1.0em;
    border-bottom: 10px solid #FFF;
    position: relative;
}

.base {
    width: 980px;
    margin: 0;
    padding: 0;
    display: table;
    background: #f78d1d;
}

.sitefooter {
    width: 980px;
    height: 20px;
    margin: 0;
    padding: 0;
    display: table;
    background: #ebb825;
    border-bottom: 1px solid #f4db0e;
    /*font-size: 0.8em;*/
    border-bottom: 4px solid #008598;
}

#footer {
    PADDING-BOTTOM: 3px;
    MARGIN-TOP: 5px;
    PADDING-LEFT: 3px;
    WIDTH: 100%;
    PADDING-RIGHT: 3px;
    HEIGHT: 26px;
    FONT-SIZE: 0.8em;
    PADDING-TOP: 3px;
}

.baseblockleft {
    width: 525px;
    height: 50px;
    margin: 5px;
    padding: 0;
    display: table;
    float: left;
}

.centerlot {
    margin: 0 auto;
    padding: 0;
    display: table;
}

.baseblockright {
    width: 50px;
    height: 50px;
    margin: 5px;
    padding: 0;
    display: table;
    float: right;
}

/*end footer*/

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

/* The Modal Close Button (x) */
.close {
    position: absolute;
    right: 35px;
    top: 15px;
    font-size: 40px;
    font-weight: bold;
    color: #f1f1f1;
}

    .close:hover,
    .close:focus {
        color: #f44336;
        cursor: pointer;
    }

.errorBorder {
    border-color: red;
    /*background-color:red;*/
    border: solid 3px red !important;
}

.required-field{
    color: darkred;
    font-weight:700;
    margin-left:4px;
}

.not-required-field {
    color: lightgray;
    font-weight: bold;
    margin-left: 4px;
}
.text-danger-dark {
    color: darkred;
}

.bootbox .modal-footer .btn-primary {
    min-width: 100px; /* Or any other desired value */
    background-color: #004466;
    min-width: 44px;
    min-height: 44px;
}