html
{
    font-family: Arial;
    font-size: 14px;
    height:100%;
}

/*****************************************

 Header styling

*****************************************/
body
{
    /*padding-top: 67px;*/
    margin-bottom: 60px;
}

.loading-modal
{
    z-index: 1200;
}

.action-modal
{
    z-index: 1100;
}

.list-modal
{
    /*z-index: 1050;*/
}
.navbar
{
    /*background-color: darkorange;*/
    background-color: #4682B4;
    color: #fff;
    padding: 0rem 0.7rem;
}

div.header .banner
{
    float: left;
}

.nav-link
{
    text-transform: capitalize;
}


div.header .login
{
    float: right;
}

div.header .login .form_label
{
    width: 6em;
}

div.header::after
{
    clear:both;
    float: none;
    content: "";
    display: table;
}


/*div.login .login-fields
{
    float: left;
}

div.login .form-button
{
    float: left;
}
*/

.heading-container
{
    /*background-color: orange;*/
    background-color: #6495ED;
    /*border-bottom: 1px solid darkorange;*/
}

div.header-wrapper
{
    padding-top: 5px;
}

.sticky-top
{
    z-index: 990;
}

.navbar-light .navbar-nav .nav-link
{
    color: rgb(0,0,0);
    color: rgba(0,0,0,.75);
}

/*****************************************
 
 Login styling

*****************************************/
.login-reg-form-container, .register-form-container
{
    padding:10px;
    
}

.login-reg-form, .register-form
{
    background-color: lightgrey;
    border-radius: 10px;
    padding: 20px;
}

.input-group
{
    margin-top: 1rem;
}

.login-reg-form-container .login-reg-form .oi,
.register-form-container .register-form .oi
{
    top: 0px;
    line-height: inherit;
}

.login-reg-button-container
{
    margin-top: 1rem;
}

.login-reg-button, .register-button
{
    width:100%;
}

.register-reg-container, .login-container
{
    margin-top: 3rem;
}


/*****************************************

 Nav styling

*****************************************/

.nav_container
{
    clear: both;
    float: none;
}

.nav_container .left
{
    float: left;
}

.nav_container .right, .menu-header-container .right
{
    float: right;
    margin-left:5px;
}

.nav_container button
{
    margin-bottom: 5px;
}

.nav_container button.left span.btn-icon
{
    /*padding-right: 10px;*/
}

.nav_container button.right span.btn-icon
{
    /*padding-left: 10px;*/
}

.menu-header-containerOLD
{
    width: 100%;
    text-align: center;
}

.menu-header-container h2.menu-heading
{
    margin-left: 5px;
    font-size: 1.5rem;
    padding-top: 5px;
    color: #fff;
}  

.menu-header-container .dropdown-toggle::after
{
    margin-top:15px;
    font-size: 1.5rem;
    color: #fff;
}



.menu-header-container button.right
{
    margin-right: 5px;
}

.progress-bar-container
{
    width: 100%;
    /*background-color: #88300a;*/
}
.progress-bar-status
{
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff; /* #0e84b7; */
    width: 0;
    height: 2px;
    z-index:999;
}

.menu-dropdown-button
{
    padding: 0;
    /* outline: 0; */
    box-shadow: none;
}

.menu-dropdown-button.btn:focus
{
    box-shadow: none;
}

/*****************************************

 Footer styling

*****************************************/

.footer{
    bottom: 0;
    width: 100%;
    flex-shrink: none;
    /*border-top: 1px solid darkorange;*/
    border-top: 1px solid #4682B4;
    /*background: orange;*/
    background-color: #6495ED;
    position: -webkit-sticky; /* Required for Safari */
    position: sticky;
    height: 45px;
    position: fixed;
}

.footer-container
{
    display: flex;
    line-height: 42px;
}

.footer-button-container
{
    /*flex: 2;
    /*padding-bottom: 10px;*/
}

.footer-button
{
    flex: 2;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.footer-button-icon
{
    font-size:1rem;
}

.footer-button-text
{
    font-size:1rem;
    /*display: block;*/
    padding-left: 0.5rem;
}

/*****************************************

 Menu table styling

*****************************************/

body{
    background-color: rgb(245, 245, 247); /*#eee;*/
}
h2
{
    font-size: 2rem;
}

h3
{
    font-size: 1.4rem;
}

h4
{
    font-size: 1.2rem;
}

.content-container
{
    scroll-margin-top: 50px;
    scroll-margin-bottom: 70px;
    padding-bottom: 60px;
}

.has-order-container
{
    margin-left: 10px;
}

span.has-order-container
{
    font-size: 1.5rem;
}

.modal-action-button-text
{
    padding-left: 10px;
}

.menu-heading-container
{
    
}

h2.menu-heading
{
    float: left;
}

.menu-heading-delete
{
    float: right;
}

.menu-container
{
    margin-bottom: 10px;
    float: none;
    clear:both;
}

.menu-day
{
    /*border: 1px solid #bbb;*/
    padding: 5px;
    margin-top:5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #ddd;
    scroll-margin-top: 50px;
}

.menu-day.today
{
    /*border: 3px solid orange;*/
    border: 3px solid #4682B4;
    
}

.meal-wrapper
{
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 0.5rem;
    clear: both;
    cursor: pointer;
}

.hidden{
    display:none;
}

h3.menu-date
{
    float: left;
    margin-top: 0.4rem;
}
.action-buttons
{
    float: right;
}

.action-buttons button.btn:first-child, .list-heading-container button.btn:first-child
{
    margin-right: 5px;
}

.edit-list.list-heading
{
    cursor: pointer;
}

.notes
{
    padding-left:10px;
    background-image:linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%), linear-gradient(to bottom, rgba(0, 226, 255, 1) 0%, rgba(0, 226, 255, 1) 100%);
    background-clip: content-box, padding-box;
    
}

.lunch
{
    padding-left:10px;
    background-image:linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%), linear-gradient(to bottom, rgba(247, 244, 27, 1) 0%, rgba(247, 244, 27, 1) 100%);
    background-clip: content-box, padding-box;
    
}

.dinner
{
    padding-left:10px;
    background-image:linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%), linear-gradient(to bottom, rgba(124, 252, 0, 1) 0%, rgba(124, 252, 0, 1) 100%);
    background-clip: content-box, padding-box;
    
}

.meal
{
    padding-left: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
}


.meal-label
{
    font-weight: bold;
    font-size: 0.6rem;
}

.meal-input-wrapper
{
    clear: both;
    /*display: flex;*/
}

div.meal-input-wrapper::after, div.meal-date::after,
div.action-button-wrapper::after
{
    clear:both;
    float: none;
    content: "";
    display: table;
}

div.meal-date
{
    padding-bottom: 5px;
}

.meal-input-desc
{
    float:left;
    padding-right:5px;
    padding-top: 10px;
}

/*.meal-input-wrapper .display-flex*/
.display-flex
{
    display: flex;
}

.meal-description-input-wrapper, .link-input-wrapper
{
    padding-right: 15px;
}

.menu-day-text-input
{
    float: left;
    flex: 2;
    margin-top: 3px;
    margin-bottom: 3px;
    scroll-margin-top: 70px;
}

.add-link-button, .remove-link-button
{
    float: right;
    margin-left: 10px;
}

.link-input-wrapper
{
    clear: both;
    float: none;
}

a[target="_new"]:after {
    position: relative;
    top: 1px;
    display: inline-block;
    speak: none;
    font-family: 'Icons';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    content: '\e064';
    padding-left: 10px;
    font-size: 0.7em;
}

.button-text
{
    padding-right: 10px;
}

div.table 
{
    display:table;
}

h3.menu
{
    /*float: left;*/
}

div.add-day-button
{
    text-align: center;
    margin-top: 1em;
    width: 100%
}

div.delete-menu-button
{
    float: right;
}

.btn p{
    float: right;
    margin: 0em;
    margin-left: 0.5em;
}

.swap-modal-label
{
    display: block;
    font-weight: bold;
}

.swap-meals-select
{
    width: 100%;
    margin-top: 0.5rem;
}

/*****************************************

 Form styling

*****************************************/

div.form_label
{
    clear: both;
    float: left;
    width: 10em;

}

div.form_input
{
    float: left;
}

div.form_button_group
{
    clear: both;
}

div.form_button
{
    float: left;
    margin:1em;

}

/*****************************************

 Autocomplete styling

*****************************************/

.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  /*display: inline-block;*/
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}


/*****************************************

 List styling

*****************************************/

@media (max-width: 767px) {
    .card-columns {
        column-count: 1;
    }
}
@media (min-width: 767px) {
    .card-columns {
        column-count: 2;
    }
}
@media (min-width: 992px) {
    .card-columns {
        column-count: 3;
    }
}
/*@media (min-width: 1400px) {*/
/*    .card-columns {*/
/*        column-count: 4;*/
/*    }*/
/*}*/


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.archived-list-heading, .settings-heading
{
    margin-top: 0.5rem;
}

.card-columns
{
    margin-top: 0.5rem;
}
.card-columns .card
{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.list-wrapper
{
    background: none;
    border: none;
}

.list-container
{
    background-color: #ddd;
    padding: 0.5em;
    border-radius: 10px;
    margin: 0.2rem;
}

/* LIST BACKGROUND COLOURS */
.list-colour-button
{
    text-transform: capitalize;
}
.list-container-red
{
    background-color: #f28b82 /*#FECEC3*/
}

.list-container-blue
{
    background-color: #C3D4FE;
}

.list-container-green
{
    background-color: #ccff90;
}

.list-container-purple
{
    /*background-color: #F5C3FE;*/
    background-color: #d7aefb;
}

.list-container-pink
{
    background-color: #fdcfe8;
}

.list-container-yellow
{
    background-color: #fff475;
}

.list-container-orange
{
    background-color: #fbbc04;
}

.list-container-teal
{
    background-color: #cbf0f8;
}

.list-container-brown
{
    background-color: #e6c9a8;
}


.add-list-container
{
    background: none;
    text-align: center;
    border: none;
}

.add-list-container .btn span:first-child
{
    margin-right: 10px;
}

.list-action-dropdown-button, 
.list-name-input-container .action-buttons,
.list-modal-close-button
{
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.list-name-button
{
    font-size: 0.8rem;
}

.add-item-container .btn
{
    text-align: left;
    padding-left: 0px;
}
.dropdown-item
{
    padding-right: 1rem;
    padding-left: 1rem;
}

.dropdown-item span:first-child
{
    padding-right: 10px;
}

.edit-list-name-input
{
    /*margin-top: 0.5rem;
    margin-bottom:0.5rem;*/
}

.list-item-set:first-child
{
    margin-bottom: 0.5rem;
}

.active-list-items-container, .inactive-list-items-container
{
    border-radius: 10px;
    background-color: #fff;
    padding: 0.5em; 
    display: block
}

.inactive-list-items-container
{
    /*margin-top: 0.5em;*/
}

.inactive-list-items-container .list-item-container
{
    color: #ccc;
}

.no-active-list-items
{
    font-style: italic;
    font-size: 0.9rem;
}

.list-item-container
{
    
}

.list-item-container, .list-item-input-container
{
    clear: both;
}

.list-item-icon
{
    font-size: 0.5rem;
    padding-top: 0.9rem;
}

.list-item-done-input
{
    margin-top: 0.7rem;
}

.list-item-description
{
    flex: 2;
    padding-top: 5px;
    margin-left:1em;
}
.list-item-button
{
    float: right;
    font-size: 0.8rem;
}

.add-item-icon
{
    font-size: 0.8rem;
}

.add-item-text
{
    margin-left: 0.9rem;
    font-style: italic;
}

.inactive-list-items-container .list-item-description
{
    text-decoration: line-through;
    font-style: italic;
    padding-top: 0px;
}

.inactive-list-items-container .list-item-icon
{
    padding-top: 0.5rem;
}

.inactive-list-items-container .list-item-done-input
{
    margin-top: 5px;
}

.list-item-input-container
{
    margin: 2px;
}
.edit-list-item-input{
    float: left;
    flex: 2;
}

.list-item-drag-span
{
    font-size: 0.75rem;
    margin-top: 10px;
    margin-right: 5px;
    cursor: move;
}

.list-modal .modal-content
{
    background: none;
    border: none;
}

.ticked-list-items
{
    font-style: italic;
    font-size: 0.8rem;
    color: #9E9E9E
}

/*****************************************

 Account Settings styling

*****************************************/

.button-container button span:nth-child(2)
{
    padding-left: 0.5rem;
}

.settings-container .card
{
    border-radius: 1rem;
    margin-top: 1rem;
}

.password-change-input-wrapper
{

}

.password-change-label
{
    flex: 1;
}
.password-change-input-wrapper, .form-buttons
{
    margin-top: 1rem;
}

.password-change-input
{
    flex: 4;
}

.form-buttons .btn span:first-child
{
    padding-right: 0.5rem;
}

/*****************************************

 Ideas table styling

*****************************************/

.ideas-container
{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.meal-toggle-container
{
    text-align: center;
    margin-bottom: 1rem;
}

.ideas-table
{
    width: 100%;
}

.ideas-table th, .ideas-table td
{
    padding: 0.5rem;
}

.ideas-table thead tr
{
    background-color: #a9a9a9;
}

/*.ideas-table tr:nth-child(even) */
/*{*/
/*    background-color: #f2f2f2;*/
/*}*/

/*.ideas-table tbody tr:nth-child(odd) */
/*{*/
/*    background-color: #fff;*/
/*}*/

.ideas-table .col-1
{
    width: 50%;
}

.ideas-table .col-2
{
    width: 25%;
    text-align: center;
}

.ideas-table .col-3
{
    width: 25%;
    text-align: center;
}