/*---------------------------------------------------------------------------*/

/*

    Module:         site.css

    Author:         Francois Schiettecatte (FS Consulting, LLC.)

    Creation Date:  November 6, 2015

    Purpose:        This is the CSS for the site.

*/

/*---------------------------------------------------------------------------*/


/*
** Bootstrap overrides - For the flush footer
** https://stackoverflow.com/questions/21324395/bootstrap-3-flush-footer-to-bottom-not-fixed
*/
html {
  position: relative;
  min-height: 100%;
}


/*
** Bootstrap overrides - Padding for header and footer
** http://getbootstrap.com/components/#navbar-fixed-top
** http://getbootstrap.com/components/#navbar-fixed-bottom
** http://getbootstrap.com/components/#body-padding-required
*/
body {
    padding-top: 70px;
    padding-bottom: 75px;   /* Set 'padding-bottom' to the height of the flush footer */
}


/*
** Font overrides - use the Bootstrap 4 native fontstack
** https://furbo.org/2018/03/28/system-fonts-in-css/
*/
body {
    font-family: 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI',
        'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
        'Droid Sans', 'Helvetica Neue', 'sans-serif';
}


/*---------------------------------------------------------------------------*/


/*
** PhenoDB specifics
*/

/*
** PhenoDB color and background
*/
.phenodb-color {
    color: #88B0CA;
}

.phenodb-jumbotron-background {
    background: linear-gradient(#A9C5D8, #D4E1EB);
    background: -moz-linear-gradient(#A9C5D8, #D4E1EB);
    background: -webkit-linear-gradient(#A9C5D8, #D4E1EB);
}



/*
** Bottom border for tables, best applied as:
**  <tr {% if forloop.last %}class="phenodb-bottom-border"{% endif %}>
*/
.phenodb-bottom-border {
    border-bottom: 1px solid #DDDDDD;
}


/*
** Used for form groups
*/
.phenodb-bottom-margin {
    margin-bottom: 0px;
}


/*
** Prevent button groups from wrapping
*/
.phenodb-btn-group-no-wrap {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
}



/*
** Alert list background and border
*/
.phenodb-alert-list {
    background: linear-gradient(#F5F5F5, #E9E9E9);
    background: -moz-linear-gradient(#F5F5F5, #E9E9E9);
    background: -webkit-linear-gradient(#F5F5F5, #E9E9E9);
    border-color: #DDDDDD;
}



/*
** Family member affected background
*/
.phenodb-affected-background {
    background-color: #ECF4FA;
}

.phenodb-unknown-background {
    background-color: #F6FEFF;
}

.phenodb-unaffected-background {
}



/*
** Feature indent color features
*/
.phenodb-feature-indent-1-background {
    background-color: #FFFFFF;
}

.phenodb-feature-indent-2-background {
    background-color: #F6FEFF;
}

.phenodb-feature-indent-3-background {
    background-color: #ECF4FA;
}

.phenodb-feature-indent-4-background {
    background-color: #E2EAF0;
}

.phenodb-feature-indent-5-background {
    background-color: #D8E0E6;
}

.phenodb-feature-indent-6-background {
    background-color: #CDD6DD;
}

.phenodb-feature-indent-7-background {
    background-color: #C4CDD2;
}


/*
** Shuffle selected anchors up by 450px to make
** sure '#...' links land in the right place
*/
.phenodb-feature-anchor {
    display: block;
    position: relative;
    top: -350px;
    visibility: hidden;
}



/*
** Flush footer
** https://stackoverflow.com/questions/21324395/bootstrap-3-flush-footer-to-bottom-not-fixed
*/
.phenodb-flush-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Sets the height of the footer */
    height: 75px;
    border-top: 1px solid #88B0CA;
    background: linear-gradient(#FFFFFF, #F8F8F8);
    background: -moz-linear-gradient(#FFFFFF, #F8F8F8);
    background: -webkit-linear-gradient(#FFFFFF, #F8F8F8);
}


/*---------------------------------------------------------------------------*/


/*
** QTip overrides
** http://qtip2.com
*/


/*
** Backgrounds
*/
.phenodb-qtip-yellow {
    background-color: #FEFF9F;
}

.phenodb-qtip-blue {
    background-color: #E5F6FE;
}


/*---------------------------------------------------------------------------*/


/*
** Autocomplete
** https://github.com/devbridge/jQuery-Autocomplete
*/

/* This is the div for the autocomplete data */
.autocomplete {
    font-size: 1.0em;
    line-height: 1em;
    font-weight: normal;
    padding: 0px;
    margin: 0px;
    vertical-align: left;
    position: absolute;
    white-space: nowrap;    /* <= */
}

.autocomplete-suggestions {
    border: 1px solid #999999;
    background: white;
    cursor: default;
    overflow: auto;
/*
    -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
    -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
    box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
 */
}

.autocomplete-suggestions strong {
    font-weight: bold;
    color: #038ACA;
}

.autocomplete-suggestion {
    font-size: 1.0em;
    padding: 5px 5px;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-no-suggestion {
    padding: 5px 5px;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-group {
    padding: 2px 5px;
    font-weight: bold;
    font-size: 16px;
    color: #000;
    display: block;
    border-bottom: 1px solid #000;
}


/*---------------------------------------------------------------------------*/