/* Move down content because we have a fixed navbar that is 50px tall */
@media screen and (max-width: 480px) {
        body {
        padding-top: 90px;
        padding-bottom: 40px;/*Create extra room for the footer on a small screen*/
    }
}

@media screen and (min-width: 481px) {
        body {
        padding-top: 90px;
        padding-bottom: 25px;
    }
}


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

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="email"],
input[type="password"] {
    max-width: 280px;
}

.normal-weight{
    font-weight:normal;
}


@media screen and (max-width: 767px) {
    .CALogo {
        margin-left:15px;
        position:absolute;
         z-index:-1;

    }
}

@media screen and (min-width: 768px) {
        .CALogo {
        position:absolute;
    }
}

.HelpIcon{
    float:right;
    padding-top: 10px;
        padding-left: 20px;
    cursor:pointer;
     z-index:500;
        position: relative;

}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
}

.footer{
    color: #C0C0C0;
    padding-top:5px;
    padding-left:5px;
    min-height: 20px;
}

.navmenu{
        text-transform: uppercase;
}

@media (min-width: 768px) {
    .navmenu {
        margin-top: 50px;
        background-color:   #2d2d30;
        position: absolute;
        margin-left: 170px;
    }
}

.navbar-inverse .navbar-nav > li > a {
    color: #000000;
}

@media (max-width: 767px) {
    .navbar-inverse .navbar-collapse {
        background-color: #2d2d30;
    }
}

  .navbar {
      font-family: Montserrat, sans-serif;
      margin-bottom: 0;
      background-color: #2d2d30;
      border: 0;
      font-size: 11px !important;
      letter-spacing: 2px;
      opacity: 0.9;
  }

    /*Use for same size top bar*/
  .navbar-fixed-top {
     height: 80px;
  }

     /*Used to give a smaller top bar on a small screen*/
  @media screen and (max-width: 767px){
      .navbar-fixed-top {
         /*height: 60px;*/
      }

    .navbar li a, .navbar .navbar-brand {
        padding-left: 20px;
    }
  }

/*Used to give a larger top bar on a large screen
  @media screen and (min-width: 768px){
      .navbar-fixed-top {
         height: 110px;
      }
  }*/

  .navbar li a, .navbar .navbar-brand { 
      color: #d5d5d5 !important;
  }

  .navbar-nav li a:hover {
      color: #fff !important;
  }
  .navbar-nav li.active a {
      color: #29292c !important;
      background-color: #fff !important;
  }

 .navbar-nav li.unactive a {
      /*color: transparent !important;*/
      background-color:  #2d2d30 !important;
    color: #ffffff !important;
  }

  .navbar-default .navbar-toggle {
      border-color: transparent;
  }
  .open .dropdown-toggle {
      color: #fff;
      background-color: #555 !important;
  }

@media (min-width: 768px) {
    .navbar-nav > li > a {
        padding-top: 5px;
        padding-bottom: 5px;
    }
  /*.dropdown-menu li a {
      color: #000 !important;
  }*/

}

.dropdown-menu li a:hover {
      background-color: rgba(255, 0, 0, 0.5) !important;
  }

 .dropdown-menu{
      background-color: #2d2d30;
  }

.sitelistrow-even, .sitelistrow-odd, .sitelistrow-expired, .sitelistrow-blank, .sitelistrow-odd > td, .sitelistrow-even > td, .sitelistrow-expired > td, .sitelistrow-blank > td{
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    cursor:default;
}

.sitelistrow-even{
    background-color: #FFA040;
}

.sitelistrow-even:hover{
    /*background-color: #00b700;*/
    background-color: rgba(255, 160, 64, 0.25);
}

.sitelistrow-odd{
    background-color: rgba(255, 160, 9, 0.45);
}

.sitelistrow-wimviolation{
    background-color: rgba(214, 83, 79, 1);
    color: white;
}
.sitelistrow-wimviolation:hover{
    /*background-color: #00b700;*/
    background-color: rgba(214, 83, 79, 0.8);
    color: white;
}

.sitelistrow-cameraviolation{
    background-color: rgba(214, 83, 79, 1);
    color: white;
}
.sitelistrow-cameraviolation:hover{
    /*background-color: #00b700;*/
    background-color: rgba(214, 83, 79, 0.8);
    color: white;
}

.sitelistrow-odd:hover{
    /*background-color: #00b700;*/
    background-color: rgba(255, 160, 9, 0.25);
}

.sitelistrow-blank{
     background-color: #ffffff !important;
}

.sitelistrow-expired{
    background-color: rgba(255, 0,0, 0.60);
}

/*removes the top border from an empty line*/
.sitelistrow-blank > td{
        border-top: 1px solid #ffffff !important;
}

.sitelistrow-blank > tr:hover td{
     background: aqua !important;
}


.table-hover tbody tr:hover td {
    background: #ffffff ;
}


.datatable {
    text-align: right;
    font-size: 85%;
}

.texttable{
    text-align: center;
    
}

.peaktime {
      /*text-align:center;*/
}

.reportgroupheader{
    text-align:center;
     background-color:rgb(222, 222, 222);
    font-style:normal;
    font-weight:bold;
}

.easytree-container /*overrides the normal one*/
{
	font-family: inherit !important;
	font-size: inherit !important;
	border: 1px solid #cccccc !important;
  border-radius: 4px;
  color:#555555 !important;
}

/* boot strp overrides */
.form-control {
    color:black !important;
}

.radio-inline, .checkbox-inline{
     color:black !important;
}

.btn-default {
    color:black !important;
}

.rowheader{
   /*// background-color:rgba(128, 128, 128, 0.3);*/
     background-color:rgb(222, 222, 222);
    font-style:normal;
    font-weight:bold;
     border-bottom-style:none;
}

.columnheader{
    min-width:60px;
    background-color:rgb(222, 222, 222);
    font-style:normal;
    text-align:center;
    font-weight:bold;
        border-bottom-style:solid;
   border-bottom-width: 1px;
    border-bottom-color:rgb(222, 222, 222);
   
}

.data-split{
    border-bottom-style:solid;
    border-bottom-width: 1px;
    border-bottom-color:rgb(222, 222, 222);
}

.columnheaderlong{
    min-width:80px;
 background-color:rgb(222, 222, 222);
    font-weight:bold;
    text-align:center;
    /*border-bottom-style:solid;
   border-bottom-width: 1px;
    border-bottom-color:darkgray;*/
}

@media (min-width: 1800px) {
    .scrollbutton{
        width:282px;
        padding-left:0;
        padding-right:0;
    }
}

@media (min-width: 1600px) and (max-width: 1799px) {
    .scrollbutton{
        width:222px;
        padding-left:0;
        padding-right:0;
    }
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .scrollbutton{
        width:182px;
        padding-left:0;
        padding-right:0;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .scrollbutton{
        width:132px;
        padding-left:0;
        padding-right:0;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .scrollbutton {
         width:80px;
        padding-left:0;
        padding-right:0;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .scrollbutton {
         width:26px;
        padding-left:0;
        padding-right:0;
    }
}

@media (max-width: 767px) {
    .scrollbutton{
        width:132px;
        padding-left:0;
        padding-right:0;
    }
}

.scrollimage{
    background-color:black;
    float:left;
}

img {
    max-width: 100%;
    height: auto;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.startpagewell{
    height:80px;
}

.global1 {
    background-color:rgba(0, 255, 0, 0.45);
}

.global2 {
    background-color:rgba(0, 255, 0, 0.30);
}

.global3 {
    background-color:rgba(0, 255, 0, 0.15);
}

.local {
    background-color:rgba(208, 0, 208, 0.45);
}

.global1l {
    background-color:rgba(208, 100, 208, 0.45);
}

.global2l {
    background-color:rgba(208, 100, 208, 0.30);
}

.global3l {
    background-color:rgba(208, 100,208, 0.15);
}


.clearDown {
    background-color:rgba(100, 100,100, 0.45);
}

.permissions{
        background-color:rgba(127, 127,127, 0.15);
}

.tree-container
{
	font-family: tahoma, arial, helvetica;
	font-size: 10pt; /* font size should not be too big */
	white-space: nowrap;
	/*padding: 3px;*/
	margin: 0; /* issue 201 */
	background-color: white;
	border: 1px dotted gray;
	overflow: auto;
	height: 100%; /* issue 263 */
}

.GroupUserList{
    list-style:none;
}

.detailsImage{
    max-height: 400px;
    width:auto;
    display: block;
    margin-left: auto; 
    margin-right: auto;
}

@media (min-width: 768px){
.imageWell{
    min-height:460px;
}
}
.detailsText{
    text-align:center;
}

/*Control the height of the map*/
@media (min-width: 992px) {
    .map {
        min-height: 700px;
        height: 0;
        display: block;
        position: static;
    }
}

@media (max-width: 991px) {
    .map {
        min-height: 460px;
        height: 0;
        display: block;
        position: static;
    }
}

/*Extend bootstrap so we can make use of larger screens*/
@media (min-width: 1400px){
.container {
    max-width: 1370px;
}}
@media (min-width: 1600px){
.container {
    max-width: 1570px;
}}
@media (min-width: 1800px){
.container {
    max-width: 1770px;
}}

/*Map Selection Button*/
.mapselectbutton,.mapselectbutton:active{ 
    float:right;
    margin:2px 2px 2px 2px;
        background-color: #FF6600;
    border-color: #FF4400;
}

.mapselectbutton:hover {
     color: #ffffff;
    background-color: #2d2d30;
    border-color: #2d2d30;
}

.datavalues {
    position: relative;
    top: 0;
    left: 0;
    max-width: none;
}

@media (min-width: 992px) {
.datavalues {
    height: 400px;
    width:900px;
}
}

@media (min-width: 768px) and (max-width: 991px) {
    .datavalues {
    height: 300px;
    width: 750px;
}
}

@media (min-width: 768px) and (max-width: 991px)  {
.datavalues {
    height: 300px;
    width: 700px;
}
}

@media (min-width: 540px) and (max-width: 767px)  {
.datavalues {
    height: 300px;
    width: 500px;
}
}

@media (max-width: 539px)  {
.datavalues {
    height: 300px;
    width: 400px;
}
}

.datavaluesselection{
    background-color: yellow;
    float: left;
    opacity:.6;
    position: absolute;top:2px; left:0;
    pointer-events: none; /*make the object not click throughable*/
    max-width: none;
}

.hideconfig{
    display:none;
}

/* Values used by the config selection on the data values screen */
.nav-tabs > li.active > a{
    background-color:#FF8C00 !important;
    color:black !important;
}

.orangewell{
     background-color:#FF8C00;
     border-top-width: 0;
     padding:9px;
     border-radius: 0;
     margin-bottom: 0;
}

@media (min-width: 768px){
.configlistrow{
    padding-left:70px;
    padding-top: 5px;
    padding-bottom: 5px;
}
}

.configlist{
    max-width: 830px;
    font-family: Montserrat, sans-serif;
    margin-bottom: 0;
    background-color: #2d2d30;
    border: 0;
    font-size: 11px !important;
    letter-spacing: 2px;
    opacity: 0.9;
    min-width:280px;
    padding-right:0;
    padding-left:0;
    padding-bottom:0;
}

@media (min-width: 0px){
 .datavaluescontrols, .loadselection{
    padding-left: 70px;
    padding-top: 5px;
    padding-bottom: 5px;
 min-width:280px;
}
}

.SummaryUpdate {
   background-image: url('/Images/wait30trans.gif');
   background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: right center;
}

.ReportUpdate {
    background-image: url('/images/wait30trans.gif');
    background-repeat: no-repeat;
    background-position: center center;
    height:40px;
}

/*Used by the Edit Filter to adjust the Filter Layer labels*/
.label-adjust{
    padding-left: 15px;
    padding-top: 5px;
}
/*Used by the filter title*/
.filter-label{
    padding-top: 7px;
}

.filter-editbox{
    max-width:150px;
} 

.filter-textbox{
   position: absolute;
    left: 150px;
    top: -3px;
}

/* Used by the excel button */
.extraButtonGroup{
    float:right;
}

/* Used by the site details */
.detailsCell{
    width: 50%;
}

/* used by summary info*/
.summary-month-boundary{
   border-bottom: solid; 
   border-bottom-width: 1px;
   border-bottom-color:rgb(222, 222, 222);
}

.summary-month-left{
    text-align:left;
    font-weight:bold;
}

.ol-popup-content{
    background-color: rgba(222,222,222,.85);
    min-width: 220px;
    padding:5px;
    border-radius:4px;
     border: 2px solid rgba(32,32,32,.85);
}

.dataReportContent{
    overflow-y:hidden;
}

@media only screen and (max-width: 767px) {
   /* CSS overrides for mobile here */
.dataReportContainer{
     padding-left: 0;
    padding-right: 0;
}
}

/*Data Calendar*/
.caldaysel
{
    BACKGROUND-COLOR: #FF6600;
    padding: 2px 2px 2px 2px;
    cursor:pointer;
}

.caldayselpart
{
    BACKGROUND-COLOR: Orange;
    padding: 2px 2px 2px 2px;
    cursor:pointer;
}

/* Neutral Data Options */
.caldayselRec
{
    BACKGROUND-COLOR: #FF0000;
    padding: 2px 2px 2px 2px;
    cursor:pointer;
}

.CalendarHeader
{
	background-color: #FFE2CC;
     cursor:pointer;
}

.CalendarDay
{
	background-color: #FFE2CC;
	border-bottom: Solid 1px #000000;
    padding: 1px 2px 1px 2px;
    cursor:pointer;
    width: 16px;
}

.Calendarborderstyle
{
	border: Solid 1px #000000;
    line-height:1.1;
}

.calday
{
	background-color: white;
    padding: 2px 2px 2px 2px;
    cursor:pointer;
}

.calendar
{
    text-align: center;
    max-width: 700px;
    margin-right: auto;
    margin-left: auto;
}

/* Calendar Key*/
.keyList{
    max-width :700px;
    padding-top :20px;
    margin-right: auto;
    margin-left: auto;
    min-height:50px;
}

.keyListMarker{
    float: left; min-width: 20px;
    margin-right:5px;
    margin-top: -3px;
    border: solid 1px black;
}

.keyListItem{
    float:left;
    padding-right: 30px;
    padding-left: 5px; 
    list-style-type: none;
}

/* End of Calendar Section */

/* Footer Section */
.terms{
    float:right;
    cursor:pointer;
    padding-right:10px;
}

.terms:hover{
    color:white;
}

/*Boot Strap Overrides*/
/*Primary Btn*/
.btn-primary {
    color: #ffffff;
    background-color: #FFA040;
    border-color: #2d2d30;
}

.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active {
    background-color: #FFD080;
    border-color: #2d2d30;
}

.btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary{
    background-color: #FFA040;

}

.btn-primary:hover {
    color: #ffffff;
    background-color: #2d2d30;
    border-color: #2d2d30;
}

/*Info Button - map*/
/*.btn-info {
    color: #ffffff;
    background-color: #FFA040;
    border-color: #2d2d30;
}*/

/*.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
    color: #ffffff;
    background-color: #FFD080;
    border-color: #2d2d30;
}*/

.form-control:focus {
    border-color: #FFA040;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 160, 0, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 160, 0, .6);
}

/*Easy Tree Overrides*/
.easytree-container.easytree-focused span.easytree-node.easytree-active, .easytree-container.easytree-focused span.easytree-node.easytree-selected, span.easytree-node.easytree-active:hover, span.easytree-node.easytree-selected:hover {
    background-color: rgba(255, 160, 9, 0.52) !important;
    border-color: #FFA040 !important;

}

span.easytree-node:hover {
    background-color: #FFA040 !important;
    border-color: #FFA040 !important;




}

.easytree-title{
    color: inherit !important;
}

/*AADT Info Section*/
.Value{
    background-color: white;
    color:black;
    text-align:right;
    border-right: 1px solid #dddddd;
}
.NoValue{
    background-color: orangered;
    border-right: 1px solid #dddddd;
}
.NotCalculated, .NotCalculated:hover {
    background-color: gray;
    border-right: 1px solid #dddddd;
}

/*Catalyst Car Park Section*/
.cleardowns{
    text-align: right;
    max-width: 280px;
}

.ClearDownSpace{
        margin-left: 10px;
}

.carParkOccupancyGraph{
   
    min-width:100%;
    margin: 5px 0;
}

.carParkEstimateGraph{
    min-width:100%;
    margin: 5px 0;
}


.number-input{
    max-width:65px;
}

/* Data usage sections*/
.linkEntry{
    background-color:#FFBF7F;
}

.IDSiteEntry{
    background-color:#7fe7ff;
}

.carParkEntry{
        background-color:#3aadff;
}

/* Admin Buttons*/
.adminButtons{
     margin-left: 10px;
}

.summaryTable td:hover{
     background-color:#FFA040;
     cursor:pointer;
}

.selectedResult{
     background-color:#FFBF7F;
     cursor:pointer;
}

.siteTable:hover{
     background-color:#FFA040;
     cursor:pointer;
}

.activityTable tr:hover{
     background-color:#FFFFFF;
     cursor:default;
}



/* VBV Section*/
.vbvSelect:hover{
     background-color:#FFA040 !important;
     cursor:pointer;
}

.vbvBorder{
    margin-bottom:5px;
        padding-bottom: 5px;
        border-bottom: 2px solid #e5e5e5;
}   

.vbvPadding{
    padding-left:5px;
    padding-right:5px;
}


/*Admin Buttons
.adminButtons{
     margin-left: 10px;
}*/


.new_plate {
    animation: glow .8s 1 alternate;
}

@keyframes glow {
    to {
        text-shadow: 0 0 8px darkgreen;
    }
}


/*Work Management*/
.filelist{
    cursor: pointer;
}

.filelist:hover{
    background-color:#FFA040;
}

.task{
     cursor: pointer;
}

.task:hover{
    background-color:#FFA040;
}


.alerts{
    font-size: 26px;
}

.change{
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #000000;
    background-color: #FFFFFF;
    border-color: #000000;
}

.statusWell{
    text-align:center;
    padding: 10px; 
    margin-bottom: 5px; 
}

.canvasHover{
    margin-top: 6px;
}

.canvasHover:Hover{
     background-color: rgba(255, 160, 9, 0.45);
}