﻿html {
    
    background-size: cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
     background-repeat: no-repeat;
    background: linear-gradient(to bottom, #d3ceb1 0%,#ece8d4 40%) no-repeat; /* W3C */
    background: -moz-linear-gradient(top, #d3ceb1 0%, #ece8d4 40%) no-repeat; /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3ceb1), color-stop(40%,#ece8d4)) no-repeat center center fixed; /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ebebeb 0%,#ece8d4 40%) no-repeat; /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #d3ceb1 0%,#ece8d4 40%) no-repeat; /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #d3ceb1 0%,#ece8d4 40%) no-repeat; /* IE10+ */
    background-color: #d3ceb1;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3ceb1', endColorstr='#ece8d4',GradientType=0 ) no-repeat; /* IE6-9 */
  
    font-size:100%;
    height:auto;
    min-height:100%;
}





body {
    font:13px arial;
    line-height: 125%;
    color: #323430;
    margin-left: 20px;
    margin-right: 20px;
    padding: 0;
    /*width: auto;*/
    height:auto;
    background: transparent;
}

p {
     line-height: 125%;
}

h1 {
    font:20px arial black; 
    color: #4e5447;
}

h2 {

}

h3 {
font:15px arial; 
color: #4e5447;
font-weight:bold
}

h4 {

}

.center-text {
    text-align:center;
}

.right-justify {
    text-align:right;
}

.small-label {
    font:11px arial;
    /*font-weight:bold;*/
}

.edit-delete-column {
    width:20px;
}
.edipi-column {
    width:30px;
}

.mi-column {
    width:10px;
}

.mos-column {
    width:10px;
}

/*Link styling.*/

a:link {
    color: #4f6834;
    text-decoration: none;
    font-weight:bold;
    border:0;
    border-collapse:collapse;
    
}

a:active {
    
}

a:hover {

    color: #b3b895 !important;
    text-decoration:none;


}


a:visited {
     color: #4f6834;
     border:0;
     text-decoration: none;
}

.breadcrumb {
    font-size:11px;
    height: 15px;
    margin-left:-15px;
    margin-bottom:-10px;
    display:inline-block;
    float:left;
}

.help-breadcrumb {
    font-size:11px;
    height: 15px;
    margin-right:-15px;
    margin-bottom:-10px;
    float:right;
    display:inline-block;
}

image {
    border:0;
}

/*OTHER STYLING*/

.body-wrapper {
    width: 100%;    
    margin-top: 20px;
    margin-bottom: 20px;
}

.box {
    width: 900px;
    border: 1px solid #4e5447;
    padding-right: 30px;
    padding-left: 30px;
    padding-top: 10px;
    padding-bottom: 20px;
    background-color:white;
    margin-left:auto;
    margin-right:auto;
    box-shadow: rgba(0,0,0,.1) 6px 8px;
    /*margin-left:70px;*/
}
.outer-box {
    width:940px;
    background-color:#e9eaea;
    
}
.center-button {
    width: 100px;
    margin-left:auto;
    margin-right:auto;
}
.nav-bar-bar {
    height: 25px;
    /*background-color: gray;*/
    background-image: url('../images/navbarbar.png');
    background-repeat: no-repeat;
    width: 1080px;
    margin-top: 20px;
}

.nav-bar-link {
    /*height: 18px;*/
    border: 1px solid #4e5447;
     background-repeat: no-repeat;
    background: linear-gradient(to bottom, #ffffff 0%,lightgray 40%) no-repeat; /* W3C */
    background: -moz-linear-gradient(top, #ffffff  0%, lightgray 40%) no-repeat; /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff ), color-stop(40%,lightgray)) no-repeat center center fixed; /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ebebeb 0%,lightgray 40%) no-repeat; /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff  0%,lightgray 40%) no-repeat; /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff  0%,lightgray 40%) no-repeat; /* IE10+ */
    background-color:lightgray;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff ', endColorstr='lightgray',GradientType=0 ) no-repeat; /* IE6-9 */
    display:inline-block; 
    /*float:left;*/
    margin-top: -10px;
    margin-left: 1px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
    font: bold 14px arial;
    /*color: #4f6834;*/
    box-shadow: rgba(0,0,0,.2) 2px 4px;

}

.custom-button {
    /*height: 18px;*/
    border: 1px solid #4e5447;
     background-repeat: no-repeat;
    background: linear-gradient(to bottom, #ffffff 0%,lightgray 40%) no-repeat; /* W3C */
    background: -moz-linear-gradient(top, #ffffff  0%, lightgray 40%) no-repeat; /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff ), color-stop(40%,lightgray)) no-repeat center center fixed; /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ebebeb 0%,lightgray 40%) no-repeat; /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff  0%,lightgray 40%) no-repeat; /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff  0%,lightgray 40%) no-repeat; /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff ', endColorstr='lightgray',GradientType=0 ) no-repeat; /* IE6-9 */
    display:inline-block; 
    /*float:left;*/
    margin-top: -10px;
    margin-left: 1px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
    font: bold 14px arial;
    color: #4e5447;
    

}

.report-table {
    margin-left:auto;
    margin-right:auto;
    /*width:780px;*/
}

table {
    margin:20px;
border:1px solid #323430;
border-collapse: collapse;
margin-left:auto;
margin-right:auto;
width:100%;
padding-bottom:5px;
    padding-top:5px;
}

tr {
    background-color:white;
    padding-bottom:5px;
    padding-top:5px;
    border:1px solid #323430;
border-collapse: collapse;
}

th {
    background-color: #f2f2f2;
    font-weight:bold;
}

td{
 padding-left: 10px;
 padding-right: 10px;
     border:1px solid #323430;
border-collapse: collapse;
padding-bottom:5px;
    padding-top:8px;
    text-align:center;
}
tr:nth-child(even) {
    background-color: #f2f2f2;
    
}
/*tr:nth-child(n+2) {
    background-color: white;
    font-weight:bold;
}*/

#fluids tr:nth-child(+1)
{
     background-color: #f2f2f2;
    font-weight:bold;

}
#fluids tr:nth-child(+2) {
    background-color: #f2f2f2;
    font-weight:bold;
}

.email {
    width: 316px;
}

.cell-black {
    background-color: black;
    color: white;
    font-weight:bold;
}

.cell-red {
    background-color: #af1818;
    color: white;
    font-weight:bold;
}

.cell-yellow {
    background-color: #ffea00;
    font-weight:bold;
}

.cell-green {
    background-color: #6ec31c;
    font-weight:bold;
}

.cell-blue {
    background-color: #3053d5;
    color: white;
    font-weight:bold;
}

.cell-grey {
    background-color: #bbbbbc;
    font-weight:bold;
}

.circle-black {
    color: white;
    font-size: 18px;
    justify-content: center;
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    /*width: 100px;
    height: 100px;*/
    background-image: url('/images/circle-black.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    opacity: .8;
    line-height: 110px;
    text-align: center;
}

.circle-red {
    font-size: 18px;
    justify-content: center;
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    /*width: 100px;
    height: 100px;*/
    background-image: url('/images/circle-red.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    opacity: .8;
    line-height: 110px;
    text-align: center;
}

.circle-yellow {
    font-size: 18px;
    justify-content: center;
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    /*width: 100px;
    height: 100px;*/
    background-image: url('/images/circle-yellow.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    opacity: .8;
    line-height: 110px;
    text-align: center;
}

.circle-green {
    font-size: 18px;
    justify-content: center;
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    /*width: 100px;
    height: 100px;*/
    background-image: url('/images/circle-green.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    opacity: .8;
    line-height: 110px;
    text-align: center;
}

.circle-blue {
    font-size: 18px;
    
    justify-content: center;
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    /*width: 100px;
    height: 100px;*/
    background-image: url('/images/circle-blue.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    opacity: .8;
    line-height: 110px;
    text-align: center;
}

.circle-grey {
    font-size: 18px;
    justify-content: center;
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    /*width: 100px;
    height: 100px;*/
    background-image: url('/images/circle-grey.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    opacity: .8;
    line-height: 110px;
    text-align: center;
}

.map-div {
    height: 650px;
    width: 800px;
    border: 1px solid #4e5447;
    margin-left: auto;
    margin-right: auto;
    /*background-size: contain;*/
}

.map-div-special {
    background-size: 20% !important;
    background-position: center;
    background-repeat: no-repeat;
}


.row-line {
    border-bottom: 1px solid gray;
    padding-bottom: 5px;
    padding-top: 5px;
}

.div-navboxes {
    border-radius: 25px;
    border: 1px solid #4e5447;
    width: 300px;
    height: 300px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 20px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 10px 10px rgba(0,0,0,0.1);
    background-color: #d3ceb1;
}

.div-comingsoon {
    width: 258px;
    height: 210px;
    position: absolute;
    cursor: pointer;
    background-color: #bbbbbc;
    vertical-align: middle;
    text-align: center;
    opacity: .5;
}

.div-comingsoontext {
    position: absolute;
    color: black;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    top: 100px;
    left: 20px;
    font-size: 34px;
    transform: rotate(320deg);
}

.div-navboxesTitle {
    text-align: center;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: #4e5447;
}

.div-navboxesMap {
    width: 100%;
    height: 100%;
}

.jumbotron-custom {
    padding: 1rem 1rem;
    margin-bottom: 2rem;
    background-color: #d3ceb1;
    border-radius: 0.3rem;
}

.jumbotron-header {
    padding: .5rem .5rem;
    margin-bottom: .5rem;
    background-color: #d3ceb1;
    border-radius: 0.3rem;
    box-shadow: 10px 10px rgba(0,0,0,0.1);
    border: 1px solid #4e5447;
}

.loading {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: .5;
    background-color: gray;
    vertical-align: middle;
    visibility: hidden;
    z-index: 1100;
}

.spanloading {
    position: relative;
    top: 48%;
    transform: translateY(-48%);
}

.imgloading {
    vertical-align: middle;
    width: 100px;
    height: 100px;
}

.loader {
    left: 50%;
    top: 50%;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #4e5447;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    position: absolute;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#footer {
    bottom: 0;
    width: 1000px;
    height: 2.5rem;
}

.bg-footer {
    background-color: white;
    border-radius: 0px 0px 6px 6px;
    border-left: 1px solid #4e5447;
    border-right: 1px solid #4e5447;
    border-bottom: 1px solid #4e5447;
    box-shadow: rgba(0,0,0,.1) 6px 6px;
    height: 30px;
    color: #4e5447;
    padding: 3px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
}
