/*Keep footer at bottom of the page*/
html {
        position: relative;
        min-height: 100%;
    }

/*    Make the footer stick to the bottom of the page using position: absolute; bottom: 0;  */
.footer {
   position: absolute;
   bottom: 0;
   background-color: coral;
/*        line-height: 10px;*/
   padding-top: 10px;
   font-size: 15px;
   margin-top: 150px;
}
/*footer links*/
.footer a {
    color: black;
}

/*footer links on hover*/
.footer a:hover {
    color: white;
    text-decoration: none;
}

/*Navbar colour  */
 .navbar{
    background-color: coral;
 }
/*  Notes brand */
#homeLink:hover{
    color: white;
}
/* login link */
.nav-link {
    color: black;
}
/*login link on hover */
.nav-link:hover {
    color: white;
}

/* align logged in as link to the right */
.nav-item{
    margin-left: auto;
}
/* dropdown menu main text */
.dropdown-toggle {
    color: black;
}

/* dropdown menu main text on hover */
.dropdown-toggle:hover {
    color: white;
    text-decoration: none;
}

/*dropdown menu styling  */
.dropdown-menu{
    background-color: coral;
    color: black;
/*    font-size: 14px;*/
/*    border: 1px solid #343a40;*/
/*    margin-right: 5px;*/
    border:none;
/*    line-height: 1;*/
/*    padding: auto 5px 15px 0px;*/
}

.dropdown-item{
/*    line-height: 25px;*/
}

/*links within the dropdown menu*/
.dropdown-item:hover{
    background-color: coral; 
    color: white;
}

/*links within the dropdown menu*/
/*
.dropdown-menu .dropdown-item:active{
    background-color: #343a40; 
    color: white;
}
*/
/*links within the dropdown menu when active */
.dropdown-menu .active{
    background-color: coral; 
/*    background-color: #343a40; */
    color: white;  
/*    padding: auto 40px;*/
/*    height: 50px;*/
}


/*Landing page main jumbotron for heading, description and sign-up button */
#description {
    background-color: transparent;
}

/*Main background colour  */
body{
    background-color:floralwhite;
}

/*div for note tiles and buttons  */
.contents{
/*    width: 400px;*/
    height:auto;
}
/*note divs  */
.note {
/*    display: none;*/
    border: 1px solid coral;
/*    width: 400px;*/
    height: 60px;
    border-radius: 10px;
    background-color: rgba(255,127,80,0.3);
    padding: 5px 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

/*last note div to have a bottom margin. */
/*
.note:last-child {
    margin-bottom: 50px;
}
*/

/*The containing area for the note divs. We want this to be scrollable so all the notes are accessible. */
#notearea{
    overflow-y: scroll;
    max-height: 50vh;
    margin-bottom: 20px;
    margin-top: 20px;
}

/*The note content in the note divs in the list of all notes. Make the three dots if the content is more than one line. */
/*overflow: hidden; makes it flow onto the next line. white-space: nowrap; just makes it go out of the side of the div, the text stops where the padding starts. text-overflow: ellipsis; puts the three dots at the end of the div showing that there is more content in the note. */
.notetext{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*the time and date section of the note div.*/
.timetext{
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*Extra buttons on the notes page that we initially want hidden */
#allnotes, #done, .deletebutton {
    display: none;
}

/*note comment box */
#textArea{
    display: none;
    max-height: 30vh;
    border: 1px solid coral;
    border-radius: 10px;
    background-color: rgba(255,127,80,0.1);
    border-left-width: 20px;
    margin-bottom: 100px;
}

/*forgotten password link on login form. Secondary colour code.  */
#fpLink{
    color: #6c757d;
}

/*forgotten password link on login form on hover  */
#fpLink:hover {
    color: black;
    text-decoration: none;
}

/*tickbox colour - not working*/
#remember:active{
    background-color: black;
}
#remember .active{
    background-color: black;
}


/*paper and pencil edit icon account settings page */
.bi-pencil-square{
    font-size: 18px;
/*    margin: 18px 10px;*/
/*    float: right;*/
}
/* paper and pencil edit icon account settings page Link */
.editLink {
    color: black;
}
/* paper and pencil edit icon account settings page Link on hover */
.editLink:hover {
    color: white;
}

/*font size of prepend input labels for account settings */
.settingInputs{
    font-size: 14px;
}

/* Prepend and append input label styling for account settings */
.settings{
    border: 1px solid coral;
    border-radius: 10px;
    background-color: rgba(255,127,80,0.7);
    color: black;
}

/*User details section of inputs for account settings - middle section */
#passwordInput, #emailInput, #usernameInput{
    background-color: rgba(255,127,80,0.2);
}

/* Warning/success message div */
/*
.alert .alert-danger{
    z-index: 5;
    height: 300px;
    width: 150px;
    position:sticky;
    margin-bottom: 100px;
}
*/



/*    media queries   */


/*Extra Small   */
@media (max-width: 575.99px){
     .footer {
         font-size: 11px;
    }   
    .footer .col{
        margin: 0;
        padding: 0;
    }
}

/*small   */
@media (min-width: 576px) and (max-width: 767.99px) {
     .footer {
         font-size: 13px;
    }   
} 

/*small devices  */
@media (min-device-width: 576px) and (max-device-width: 767.99px) {
     *    Make the footer stick to the bottom of the page using position: absolute; bottom: 0;  */
.footer {
   position: sticky;
}
} 


/*medium  */
@media (min-width:768px) and (max-width: 991.99px) {
     .footer {
         font-size: 14px;
    }
}

/*small up  */
@media (min-width:576px){
    /*The containing area for the note divs. We want this to be scrollable so all the notes are accessible. */
#notearea{
    overflow-y: scroll;
    height: 40vh;
}
}