/* common styling */

body {
    font-size: 15px;
    margin: 10px;
    background-color:transparent; 
}

a {
	color:#333;
	text-decoration:underline;
}

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

.body-mini {
    font-size: 15px;
    margin: 5px;
}

label {
    font-weight:normal;
}

.form-group {
    margin-right:0 !important;
}

.form-group {
    margin-bottom:0.7em;
}

.underline {
    text-decoration: underline;
}

html, body {
    height: 98%;
}

span#TypeOfHate_cbl > label {
    padding: 0em 0.5em 0em;
}

.ddl-date, .ddl_time {
    display: inline;
    width: auto;
}

.ddl-date-container, .ddl-time-container, .ddl-time-unknown-container {
    height: 2.3em;
    width: 21.2em;
}

.ddl-time-container {
    height: 2.3em;
    width: 17.2em;
}

.ddl-time-unknown-container {
    height: 2.3em;
    width: 9.2em;
}

.ddl-align {
    margin-left: -4px;
}

.unknown {
    display: inline;
    width: 60%;
}

.red {
    color: #F33636;
}

.LargeHeader {
    font-size: 1.4em;
}

.LHAlertText {
    font-size: 0.8em;
}

.MediumHeader {
    font-size: 1.2em;
}

.errorContainer {
    color: #F33636;
}

.counter {
    font-size: 0.8em;
}

#natureCounter {
    line-height: 1em;
}

hr {
    margin-bottom: 10px;
    margin-top: 10px;
}

.input-sm {
    font-size: 15px;
}


.cblWell, .cblWellFull {
    border-radius: 4px;
    padding: 4px;
}

.cblWell {
    width: 100%;
}

.cblWell-Blue {
    border: 1px solid #2072CE;
}

.cblWell-Red {
    border: 1px solid #F33636;
}

.clear {
    clear: both;
}

label {
    font-weight: normal;
}

.show {
    display: block !important;
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

.invisible {
    visibility: hidden;
}


input[type="checkbox"] {
    min-height: 15px;
    width: 1.3em;
}

input[type="radio"] {
    min-height: 15px;
    width: 2em;
}

h1 {
    color: #1b75bb;
    font-size: 170%;
}

h2 {
    font-size: 140%;
}

h3 {
    font-size: 120%;
}

#wrap {
    min-height: 98%;
}

#main {
    overflow: none;
    padding-bottom: 20px;
}

.ErrorHeader {
    color: #f33636;
    margin: 0px 0px 0px 17px;
}

.Error, label.error {
    color: #f33636;
}

#inner {
    margin-left: 5px;
}

.required {
    font-size: small;
    font-style: italic;
}

.bold {
    font-weight: 600;
}

.padl4 {
    padding-left: 4px;
}

.TextIndent {
    display: block;
    margin-bottom: 10px;
    padding-left: 15px;
}

.TextSpacer {
    display: block;
    margin-bottom: 5px;
}

.padding10 {
    padding: 10px;
}

.smaller {
    font-size: 0.8em;
}

.vert-spacer {
    margin-top: 1.2em;
}

.italic {
    font-style: italic;
}

.bread-right {
    float: left !important;
    margin-bottom: 0.2em;
}

.form-group {
    margin-bottom: 0.1em;
}

.example {
    background-color: #deffde;
    margin-bottom: 15px;
    padding-top: 10px;
}

.textbox-top {
    margin-top: 6px;
}

.form-control {
    border: 1px solid #2072CE;
}

/* structure */

.sidenav {
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0;
    background-color: #2455a2; 
    overflow-x: hidden; 
    padding-top: 60px; 
    transition: 0.5s; 
    -ms-overflow-style: none;
    overflow: auto;
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #fff;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    margin-left: 50px;
    position: absolute;
    right: 25px;
    top: 0;
}

.sidenavContent {
    color: #ddd;
    padding-left: 20px;
    padding-right: 20px;
}

#footer {
    background-color: #337ab7;
    border-radius: 4px;
    clear: both;
    color: #fff;    
    margin-top: 0px;
    margin-bottom: 10px;
    padding-top: 20px;
    padding: 2px 0 2px 4px;
    position: relative;
}

#footer a {
    color:#fff;
    text-decoration: underline;
}

#footer a:hover {
    color:#fff;
    text-decoration: none;
}

#footer div {
    font-size: 0.9em;
}

.divNudge {
    margin-bottom: 10px;     
}

#header {
    background-color: #337ab7; 
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.miniHeader {
    font-size:1.18em;
    margin-bottom:2px;
    margin-top:0px;
}

header div img {
    padding-left:5px;
}

		
/* validation summary */

#ValidationSummary a:link {
    color: red;
    text-decoration:underline;
}	

#ValidationSummary a:visited {
    color: red;
    text-decoration: underline;
}	

#ValidationSummary a:hover {
    text-decoration: none;
}		

/* skip navigation */

.SkipNav-visuallyHidden {
    border: 0;
    position: absolute;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
}

.SkipNav-focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto
}

.SkipNav-skip {
    background-color: #ff9;
    color: #333;
    outline: 1px dotted #000;
    left: -9000px;
    position: absolute;
}


/* pop box */
  
  .popover {
      border: 1px solid #1b75bb;
      width: 300px;
  }

  /* Popover Header */
  .popover-title {
      background-color: #2455a2; 
      color: #FFF; 
      font-size: 1.1em;
      text-align:center;
  }
  /* Popover Body */
  .popover-content {
      background-color: #eee;
      color: #000;
      font-size: 0.9em;
      padding: 10px;
  }
  /* Popover Arrow */
  .arrow {
      border-bottom-color: #1b75bb !important;
  }


 

/* first value needs to be smallest */  
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

@media (min-width: 768px) {
     .miniHeader {font-size:1.44em;} 
     .bread-right {float: right !important; }  
     .form-group{ margin-bottom: 0.7em;} 
     .form-group-cluster{ margin-bottom: 1em;} 
}

@media (min-width: 992px) {

     
}
@media (min-width: 1200px) {

     
}