/*


    CSS for Raleigh GSI Cost Tool
    james.bisese@tetratech.com

    Note: there is lots of borrowed stuff in here, some of which is no longer necessary

 */
html, body{
    height:100%;
    min-height: 100%; /* for firefox */
}
.modal-header {
    display: block;
}

.alert {
    margin-top: 55px;
    margin-bottom: 0;
}

body>.navbar-transparent {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* region cost_tool-loader */
/* Center the cost_tool-loader */
#cost_tool-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1333;
  width: 261px;
  height: 261px;
    margin-top: -76px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: -76px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}




@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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

@keyframes fade_in_show {
     0% {
          opacity: 0;
          transform: scale(0)
     }

     100% {
          opacity: 1;
          transform: scale(1)
     }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}

/* endregion cost_tool-loader */


/* this is a div to push all navbar content below the image and navbar */
#topheader {
    height: 135px;
}

/* this is the visible navigation (navbar) */
#navbarMain {
    position: absolute;
    top: 100px;
    left: 0px;
    width: 100%;
    background: rgba(74,139,44,1);
    z-index: 1000;
}

/* this is customizing the collapsed menu toggle button so it is visible on the image */
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.custom-toggler.navbar-toggler {
    border-color: rgb(255,255,255);
    margin-top: -33px;
}

/* two images on the homepage */
#image_container {
    position:relative;
    text-align:left;
    color: red;
}

.image_container_img {
    width: 282px;
    height: 194px;
    margin-top: 30px;
    margin-left: 75px;
    border-style: solid;
    border-width:10px;
    border-color: rgb(164,194,66);
}
.image_container_text {
    position: absolute;
    bottom: 8px;
    left: 10px;
    margin-left: 75px;
    width: 262px;
    background-color: rgba(0, 50, 67, 0.7);
    font-size: 20px;
}
.image_container_text p {
    padding-left: 7px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

/* this is everything on the top of the pages including the image, and the visible navigation bar */
.navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100px;
    padding: .5rem 1rem;
    background-image: url("../img/Raleigh_skyline_header_smaller.jpg");
    background-position: 33% 50%;
    background-size: 100%;
    background-repeat: no-repeat;
}

@media (min-width: 992px) {
    .navbar {
        height: 135px;
    }
}
/* put the border on the left side of the 'user' item */
#navbarMain ul:nth-child(2) li:nth-child(1){
    border-left: 1px solid #bbb;
}

.navbar-transparent .navbar-nav > .active > a {
    background-color: transparent;
}

.navbar-form {
    margin-right: 0;
}

.navbar-nav > li > a.profile-menu {
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar-nav > .btn{
    margin-top:10px;
    margin-right: 1.7em;
}

.navbar-nav > li > a {
    font-size: 16px;
}

.navbar-nav .nav-link {
    padding-left: 5px;
}

.navbar-brand {
    font-weight: bold;
}

.navbar-brand > img {
    float: left;
    margin-left: 3px;
    height: 60px;
    margin-bottom: 46px;
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link {
    color: white;
    background-color: #004D37;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: white;
    background-color: #004D37;
}

.navbar-light .navbar-nav .nav-link {
    color: rgba(255,255,255,.9);
}

.nav-item {
    background: rgba(74,139,44,.9);
    border-right: 1px solid #bbb;
}

/* blue Signup button on menu if user is not logged in */
.account-signup {
    background-color: #007bff;
}
.account-signup:hover {
    background-color: #00cefffa!important;
}

/* dropdown-menu on 'user' item */
.dropdown-menu {
    left: -55px;
    min-width: 7rem;
    padding: 0;
}

/*.btn-warning {*/
/*    color: #fff;*/
/*}*/

/*#inner {*/
/*    width: 350px;*/
/*    margin: 0 auto 100px;*/
/*    background-clip: border-box;*/
/*    background: lightgray;*/
/*    color:darkgreen*/
/*}*/

.footer {
    /*position: absolute;*/
    /*bottom: 0;*/
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: 40px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: center;
}

.footer a:hover {
    text-decoration: none;
}

.footer p {
    text-align: center;
}

/* this section supports icons on buttons and the Home page home icon (left edge of navbar) */

@import "//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css";

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('https://netdna.bootstrapcdn.com/bootstrap/3.4.1/fonts/glyphicons-halflings-regular.eot');
    src: url('https://netdna.bootstrapcdn.com/bootstrap/3.4.1/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
        url('https://netdna.bootstrapcdn.com/bootstrap/3.4.1/fonts/glyphicons-halflings-regular.woff') format('woff'),
        url('https://netdna.bootstrapcdn.com/bootstrap/3.4.1/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
        url('https://netdna.bootstrapcdn.com/bootstrap/3.4.1/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.glyphicon-home:before {
    content: "\e021";
    padding-right: 2px;
}

.glyphicon-plus:before {
    content: "\2b";
    padding-right: 2px;
}

.glyphicon-minus:before {
    content: "\2212";
    padding-right: 2px;
}

.glyphicon-pencil:before {
    content: "\270f";
    padding-right: 2px;
}

.glyphicon-trash:before {
    content: "\e020";
    padding-right: 2px;
}

.glyphicon-refresh:before {
    content: "\e031";
    padding-right: 2px;
}

.glyphicon-print:before {
    content: "\e045";
    padding-right: 2px;
}

.glyphicon-share:before {
    content: "\e066";
    padding-right: 2px;
}

.glyphicon-download:before {
    content: "\e025";
    padding-right: 2px;
}

.glyphicon-upload:before {
    content: "\e027";
    padding-right: 2px;
}

.glyphicon-copy:before {
    content: "\e205";
    padding-right: 2px;
}
.glyphicon-duplicate:before {
    content: "\e224";
    padding-right: 2px;
}
.glyphicon-zoom-in:before {
    content: "\e015";
    padding-right: 2px;
}
.glyphicon-ok-sign-green:before {
  content: "\e084";
    color: rgba(74,139,44,1);
}
.glyphicon-remove-sign-red:before {
  content: "\e083";
    color: red;
}

/* this is on the help page (not included in menu) */

#mapid { height: 360px; }

#sec1 {
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJklEQVQIW2NkAIILFy78NzAwYATRjCABZEGwAEwFiA1WBlIOUwkA72gTdDIYVO4AAAAASUVORK5CYII=) repeat;
}

/* About page styling /about (not included in menu) */

.corporate-jumbo {
    background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)),
      url("../img/treeroad.jpg");
    background-repeat: no-repeat;
    background-position: 80% center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
    color: #f5f5f5;
    padding: 10em 0;
    margin-bottom: 0;
    height: 100%;
}

.corporate-jumbo .well {
    background-color: rgba(245, 245, 245, .7);
}

.corporate-jumbo p, .corporate-jumbo h1 {
    color: #eee;
    text-shadow: 0px 0px 2px black;
}

.corporate-jumbo p {
    font-weight: 500;
}

.corporate-jumbo .well legend {
    color: #333;
}

.corporate-jumbo > .container {
    display: block;
    position: absolute;
    bottom: 2em;
    left: 15px;
}



/* Profile page styling */
.profile-head {
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJklEQVQIW2NkAIILFy78NzAwYATRjCABZEGwAEwFiA1WBlIOUwkA72gTdDIYVO4AAAAASUVORK5CYII=) repeat;
    padding: 70px 0px 30px 20px;
}
.profile-body {
    padding: 4px 0px;
}

.text-page {
    padding: 0px 0;
}
.text-page h2 {
    color: green;
    text-align: center;
}



/* Authentication forms */
.form-box form,
.form-box .form-message {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}

.form-box form .checkbox {
  margin-bottom: 10px;
}

.form-box form .checkbox {
  font-weight: normal;
}

.form-box form .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}

.form-box form .form-control:focus {
  z-index: 2;
}

/* TODO make the modal movable */
/*#modal-scenario {*/
/*  position: relative;*/
/*}*/

/*.modal-dialog {*/
/*  position: fixed;*/
/*  width: 100%;*/
/*  margin: 0;*/
/*  padding: 10px;*/
/*}*/

.dollar {
    display: inline;
}

/* this supports the loading spinner on one of the tables */
@keyframes spinner {
  to {transform: rotate(360deg);}
}

.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #333;
  animation: spinner .6s linear infinite;
}

.land_unit_cost_money_field {
    margin-left: 10px;
    width: 25%;
}