/** General **/

html {
    height: 100%;
}

body {
    font-family: 'Montserrat',system-ui,sans-serif;

    background-color: aliceblue;

    height: 100%;
}

a, a:visited, a:hover {
    color: black;
}

textarea
{
    background-color: bisque;

    min-height: 30px;
    max-height: 30px;
} 

/* Most utlity buttons use the same backgroundcolor and border. Any exceptions set these options explicitly. */
button {
    padding-left: .75rem;
    padding-right: .75rem;
    padding-top: .5rem;
    padding-bottom: .5rem;

    /* border-left-width: 3px; */
    border-right-width: 2px;
    /* border-top-width: 3px; */
    border-bottom-width: 2px;

    border-style: outset;

    border-radius: .25rem;

    background-color: #EFDEB4;

    line-height: 1.25;

    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

/** Bootstrap **/

/*TODO would be nice to be able to affect different popover bodies separately*/
.popover-body {
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;  

    background-color: #E7F3FF;
}

/* Due to some weird Bootstrap behavior, need to use a class that contains 'popover' but isn't exactly 'popover' for buttons within the popover. Otherwise the popover disappears when the buttons are selected.*/ 
.popoverElement {}

.collapsing {
    transition: height .1s;
}

/** Header Rows **/

/* TODO Border Width is stated explicitly more than seems necessary throughout this stylesheet. */
.divHeader {
    /* border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 2px; */

    border-bottom-width: 1px;
    border-bottom-style: outset;
    border-bottom-color: white;

    align-items: center;

    /*TODO This probably shouldn't be absolute*/
    height: 45px; 

    background-color: #333333;
    
    color: white;
    text-shadow: 1px 1px 10px black;
}

#divHomeHeader {
    padding-left: 25px;

    display: flex;
    flex-direction: row;
    justify-content: left;

    font-size: 1.1rem;
}

#buttonHome {
    /* padding-left: 6px;
    padding-top: 6px; */
    
    background-color:inherit;

    color:white;

    -webkit-appearance: none;

    display: flex;
}  /*TODO Unclear why, as a class ruleset, this doesn't take precedence over the 'a' style ruleset, 
    but once the app navigation flow is updated and uses 'buttons' instead of 'a' tags, 
    it should no longer be an issue. */

#buttonSignOut {
    padding-top: 3px;
    padding-bottom: 0px;
    
    background-color:inherit;

    color:white;

    border-width: 0px;
}

#divListTitle {
    padding-left: 10px;
    padding-right: 0px;
    padding-top: 5px;
    padding-bottom: 0px; 
    
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

.divQuantityHeader {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;    

    /* background-color: lavenderblush; */
    background-color: inherit;

    text-align: center;

    font-size: .9rem;
}

/** Item & List Rows **/

#divChecklistBody {
    height: 100%;
}

.divItemRow {
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 1px;
    border-bottom-width: 1px;

    border-color: black;
    border-style: solid;

    background-color: inherit;

    align-items: center;
    justify-content: center;
}

.divItemName {
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 6px;
    padding-bottom: 6px;  
}

/*TODO This should be renamed and re-organized*/
.divListToggleName {
    margin-top: 10px;
    margin-bottom: 10px;
}

.buttonNameToggle {
    padding-left: 5px;
    padding-right: 1px;
    padding-top: 1px;
    padding-bottom: 1px;  

    /* border-color: #4d4d4d; */
    
    text-align: left;
   
    width: 100%;
    height: 30px;

    font-size: 0.9rem;
}

.buttonListToggle {
    border-left-width: 0px;
    border-right-width: 2px;
    border-top-width: 0px;
    border-bottom-width: 2px;
    
    border-style: inset;

    background-color: aliceblue;
}

.buttonListItemToggle {     
    border-left-width: 1px;
    border-right-width: 3px;
    border-top-width: 1px;
    border-bottom-width: 3px;

    border-style: solid;

    background-color: #edf7f7;
}

/** Quantity Toggles **/

.buttonQuantity {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;

    border-width: 1px;
    border-style: ridge;
    border-color: #EFDEB4;

    /* background-color: burlywood; */
    background-color: #EFDEB4;

    text-align: center;
    line-height: normal;

    color: black;

    display: inline-block;
    width: 50%; 

    /* Setting overflow: hidden causes the position of the element to move slightly, which causes more issues in this case than is worth it.
    /* white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; */
}

.buttonClear {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;  
    
    margin: 2px;
}

/** Settings Views **/

.divSettingsWrapper {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;  
    
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 1px;
    border-bottom-width: 0px; 
    
    border-color: black;
    border-style: solid;
}

.divSettingsWrapperRow {
    margin-right: 0px;
}

.divListSettingsWrapperRow {
    justify-content: center;
}

.divEditName {
    padding-left: 25px;
    
    display: flex;
    align-items: center; 
} 

/** Home Screen **/

.buttonNavigateToList {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;   

    border-left-width: 0px;
    border-top-width: 0px;
    
    /*background-color: #EFDEB4; /* rgb(248, 242, 227) is also good */
}

/** New List/Row Section **/

/* The New Item button might be better left centered with a light background */
.newRow {
    /* padding-left: 20px;
    padding-right: 4px; */
    padding-top: 8px;
    padding-bottom: 8px;  

    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 1px;
    border-bottom-width: 1px;

    border-color: black;
    border-style: solid;

    background-color: #333333;

    display: flex;
    justify-content: center;
    margin-left: -15px;

    height: 45px;
}

/** Experimental & In Progress **/

.debugIcon {
    color: #333333;
}

.divListToggleWrapper {
    margin-right: 0px;
    margin-left: 0px;
}

.toggleQuantityHeader {
    /* padding-left: 8px;
    padding-right: 8px; */
    padding-top: 3px;
    /* padding-bottom: 3px;   */

    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 1px;

    border-color: white;
    border-style: outset;
    border-radius: .25rem;

    display: inline-block;
    width:65%;
    height:100%;
}

.toggleSmallIcon {
    padding-top: 8px;
    padding-bottom: 0px;
}

.iconHeader {
    color:white;
}

.iconNewRow {
    color:#333333;
    background-color: white;
    border-radius: 5px;
    font-size: 18px;
}

.divListItemModifier {
    padding-left: 0px;
    padding-right: 0px;
    
    text-align: center;
    line-height: normal;
}

.divListElements {
    /* overflow-y: 'hidden'; */
    overflow: scroll;
    /* max-height: 86.25vh; Temporarily lowering this value for the new (but likely TEMP) debug row. */ 
    max-height: 81.75vh;
    /* max-height: 77.5vh; */
    /* width: 100%;   */
    /* white-space: nowrap; */
}

.buttonNewRow {
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 0px;
    padding-bottom: 0px;  

    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 1px;
    border-color: white;
    
    background-color:inherit;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.debug {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;  

    height: 30px;

    /* text-align: right; */
    /* justify-content: right; */
}

.debug .row {
    justify-content: flex-end;
    margin-right: 0px;

    height: 100%;
}

#versionNumber {
    padding: inherit;

    font-size: .6rem;

    align-self: center;

    text-align: center;
}

.debug button {
    /* padding: inherit; */
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;/*3px;*/

    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;

    background-color:inherit;

    color: green;

    /* align-self: center; */
}

.disallowBrowserRefresh {
    overscroll-behavior-y: contain;
}

#divLoadingScreen {
    display: flex;
    flex-direction: column;
    height: 95%;

    text-align: center;

    justify-content: center;
}

#divDebug {
    display: flex;
    flex-direction: column;
    height: 5%;
}

#divAuthScreen {
    display: flex;
    flex-direction: column;
    height: 95%;

    justify-content: center;
}

#firebaseui-auth-container > .firebaseui-id-page-callback {
    background-color: aliceblue;
    min-height: 0;

    display: flex;
    flex-direction: column;
    width: 50%;

    justify-content: center;
}

#firebaseui-auth-container .firebaseui-callback-indicator-container {
    height: 0;
}