body, html {
    height:100%;
    margin:0;
    padding:0;
}

body {
    padding-top: 50px;
    font-family: 'Open Sans', sans-serif;
}

.width100pct {
    width: 100%;
}

.imgCentered {
    margin-left: auto;
    margin-right: auto;
}

.fa.green {
    color:forestgreen;
}

ul.nobullet {
    list-style: none;
    padding-left: 0;
}

.nobullet strong {
    color: #337ab7;
}

.app-icon .thumbnail {
    background: none;
    border: none;
}

#image-credit {
    position:absolute;
    bottom:5px;
    right:5px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 3rem;
}

.pad-top {
    padding-top:10px;
}

.tab-pane {
    margin-top:10px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal.wide dt {
    white-space: normal;
    width: 275px;
    background-color: #ebece9;
    padding-right: 5px;
    color: #6b6969;
    
}

.dl-horizontal.green {
    border-left: 5px solid #16a085;
}

.dl-horizontal.purple {
    border-left: 5px solid #8e44ad;
}

.dl-horizontal.orange {
    border-left: 5px solid #e67e22;
}

.dl-horizontal.wide dd {
    margin-left: 285px;
}




.buttonBuffer {
    margin-top: 10px;
    margin-left: 3px;
}

.buttonBufferBottom {
    margin-bottom: 10px;
}

.no-col-padding {
        padding: 0;
}

a, a:focus, a:hover {
    text-decoration:none;
}

/*Breadcrumbs*/
.breadcrumbs-container {
    
}

/*Home page splash logo*/
#splashLogo {
    margin: auto;
    margin-top: 50px;
}

#splashLogoContainer {
    color: white;
}

/*Layout*/
#compassLogo {
    height: 50px;
}

/*Home page background*/
.backgroundImage {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.homeBackground {
    background-image: url("/Images/bg1-v2.jpg");
}

/* About*/

#aboutMobileTopImage {
    margin-top: 15px;
}

.about-pic {
    height: 306px;
    margin-top: 15px;
}

.about-pic.last {
    margin-bottom: 15px;
}

.about-description {
    font-size: 16px;
}
.bannerImage {
    width: 100%;
}
.iconRowTop {
    margin-top: 30px;
    margin-bottom: 15px;
}
.iconRowBottom {
    margin-bottom: 15px;
    width: 100%!important; /*fix for IE*/
}
#navfacLogo {
    width: 100%!important; /*fix for IE*/
}
/* Project Index */
#projectTable {
    cursor: pointer;
}


/****************/
/*Survey Details*/
/****************/
.searchSortBar {
    padding: 10px 2px;
}
/*Details sections*/
.detailHeaderDiv {
    padding: 10px 0px;
}

/*Observations List Tab*/
#obsSortBtn, #obsSearchForm {
    display: inline-block;
}

/********************/
/* Field Arrangement*/
/********************/

.fieldOrderBox {
    border: 1px solid gray;
    padding: 2px;
    margin: 3px;
    border-radius: 3px;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.fieldOrderBox:active { 
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

/**************/
/*Species List*/
/**************/

.btn-favorite {
    color: #979494;
    background: none;
    border: none;
}

.btn-favorite:hover, .btn-favorite:focus, .btn-favorite.focus {
    color: #FF0;
    text-decoration: none;
}

.favorite i {
    color: #FF0;
}

/*Symbol Picker*/

.black-fill {
    background-color: #000000;
    color: #fff;
}
.black-fill:hover, .black-fill:active, .black-fill.active, .black-fill:hover, .black-fill:focus {
    background-color: #696969;
    color: #fff;
}

.gray-fill {
    background-color: #9d9fa0;
    color: #fff;
}

    .gray-fill:hover, .gray-fill:active, .gray-fill.active, .gray-fill:hover, .gray-fill:focus {
        background-color: #ccc;
        color: #fff;
    }

.red-fill {
    background-color: #ff311c;
    color: #fff;
}
.red-fill:hover, .red-fill:active, .red-fill:focus {
    background-color: #ec301c;
    color: #fff;
}

.blue-fill {
    background-color: #00a4f8;
    color: #fff;
}
.blue-fill:hover, .blue-fill:active, .blue-fill:focus {
    background-color: #0396e2;
    color: #fff;
}

.dkblue-fill {
    background-color: #0026ff;
    color: #fff;
}

.dkblue-fill:hover, .dkblue-fill:active, .dkblue-fill:focus {
    background-color: #687fff;
    color: #fff;
}

.green-fill {
    background-color: #00cf00;
    color: #fff;
}
.green-fill:hover, .green-fill:active, .green-fill:focus {
    background-color: #02bb02;
    color: #fff;
}

.dkgreen-fill {
    background-color: forestgreen;
    color: #fff;
}

.dkgreen-fill:hover, .dkgreen-fill:active, .dkgreen-fill:focus {
    background-color: #2bb62b;
    color: #fff;
}

.orange-fill {
    background-color: #ff8e00;
    color: #fff;
}
    .orange-fill:hover, .orange-fill:active, .orange-fill:focus {
        background-color: #f38700;
        color: #fff;
    }

.purple-fill {
    background-color: #cf25eb;
    color: #fff;
}
    .purple-fill:hover, .purple-fill:active, .purple-fill:focus {
        background-color: #be22d8;
        color: #fff;
    }

.yellow-fill {
    background-color: #efdd17;
    color: #000;
}
    .yellow-fill:hover, .yellow-fill:active, .yellow-fill:focus {
        background-color: #e0cf17;
        color: #000;
    }

#symbologyPickerDiv label.btn.active {
    border: 1px solid #16f3fb;
}

/********************/
/* Map Side Panel*/
/********************/

.title-icon.fa {
    font-size:0.8em;
    color: #d8d6d6;
}

.label-sighting {
    background-color:#16a085;
    color: white;
}
.label-resighting {
    background-color:#c0392b;
}

.label-focalfollow {
    background-color:#bf9393;
}

.observation-list .list-group-item {
    background: #f9f7f7;
    border: 1px solid #bfbdbd;
    color: #5b5f63;
    padding: 5px 10px;
}

.list-group-item:hover {
    background-color: #e0dede;
}

.observation-label {
    color: #9d9fa0;
    font-weight: 100;
}

.observation-status {
    font-weight: 700;
    color: #676060;
    font-size: 0.9em;
}

.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

.sighting-details {
    width: 100%;
}

.detail-top {
    justify-content: space-between;
    display: flex;
    margin-bottom: 3px;
}

.detail-bottom {
    justify-content: space-between;
    display: flex;
}

.common-name {
    font-size: 1.05em;
    font-weight: 700;
    margin-right: 5px;
    color: #676060;   
}

.observation-date {
    color:#9d9fa0;
    font-size: .9em;
}
.scientific-name {
    font-style: italic;
    font-size: .85em;
    color: #5b5f63;
}

.sighting-number {
    border-radius:2px;
    background-color: #5b5f63;
    color: white;
    padding: 6px;
    margin-right: 15px;
}

.sighting-number .text {
    text-transform: uppercase;
    font-size: 10px;
}

.sighting-number .number{
    display: block;
    font-weight: 100;
    line-height: 1;
    font-size: 1em;
}

.label-default {
    background-color: #d8d6d6;
    color: #4e4c4c;
    padding: 5px;
}

/************************/
/*  Observation Details */
/************************/
.section-header {
    background-color: #eeeeee;
    padding: 8px;
    border-radius: 5px;
    
}
 .panel.details {
     border-left: 5px solid #e74c3c;
 }

 .panel.location {
     border-left: 5px solid #e67e22;
 }

 .panel.group {
     border-left: 5px solid #16a085;
 }

 .panel.additional {
     border-left: 5px solid #34495e;
 }

 .panel.related {
     border-left: 5px solid #d86100;
 }

 .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family:'FontAwesome';
    content:"\f077";
    float: right;
    color: inherit;
}
.panel-heading.collapsed .accordion-toggle:after {
    /* symbol for "collapsed" panels */
    content:"\f078";
}

#observation-accordion {
    margin-top: 10px;
}

/*Parent Record Picker*/
.parentRecordRadio {
    margin-top: 25px!important;
}

#observationTypePicker {
    width: 125px;
}
    
/*Edit form*/
.mixedSpeciesDeleteBtn {
    margin-top: 30px;
}

.mixedGroupDiv {
    padding: 8px 0px 0px 5px;
    border-bottom: 1px solid #ccc;
    border-top: 1px #ccc solid;
    background: #f1f1f1;
}
#obsTypeDropdownContainer {
    position: relative;
}
#obsTypeDropdownContainer:after {
    content: "\f0d7";
    font-family: 'FontAwesome';
    position: absolute;
    top: 8px;
    right: 10px;
    display: block;
}

.loader-background {
    display: none;
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: gray;
    opacity: 70%;
    z-index:9;
}

.loader {
    position: absolute;
    z-index: 10;
    right: 50%;
    top: 50%;
    display: none;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

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

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

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