/* For bootstap navbar: */

.calendar-date {
    text-align: center;
}

.calendar-date.done {
    background-color: lightgreen;
}

.calendar-date.want-to-do {
    background-color: lightblue;
}

.calendar-date.in-progress {
    background-color: yellow;
}

.calendar-date.undecided {
    background-color: pink;
}

.calendar-date.skip {
    background-color: pink;
}

.calendar-date.will-not-do-today {
    background-color: lightgray;
}


@viewport {
	width: device-width;
	zoom: 1.0;
}

* {
    box-sizing: border-box;
}

.navbar-brand img {
   height: 30px;
   width: 100px;
}

.navbar.navbar-expand-lg.navbar-dark.one {
    background-color: #0091ff;
}

.navbar.navbar-expand-lg.navbar-dark.two {
    background-color: #0a1825;
}

/*
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px)  ... 

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px)  ... 

// Medium devices (tablets, less than 992px)
@media (max-width: 991px)  ...
*/


*,
*:before,
*:after {
	box-sizing: inherit;
}


html {
	box-sizing: border-box; 
	display: table;
	margin: auto;
}

body {
	display: table-cell;
	position: relative;
	vertical-align:middle;
	padding-bottom: 6rem;
	min-height: 100%;
	font-family: "Mukta", Arial, sans-serif;
}

html, body {
	width: 100%;
	padding: auto;
	margin: auto;
}
/**
	padding: 0;
	margin: 0;
**/

img{
height: 100%;
width: 100%;
object-fit: contain;
}

.centered-bootstrap {
	margin: auto;
    	width: 90%;
}


.demo {
	margin: 0 auto;
	padding-top: 64px;
	max-width: 640px;
	width: 94%;
}

.all-notes-title {
    font-style: italic;
}

.demo h1 {
	margin-top: 0;
}

.container-fluid {
    transition: all 0.3s ease;
}

.container-fluid.recurringitem {
	text-align: center;
}

.container-fluid.recurringitem, 
.container-fluid.recurringitemleft {
    background-color: black;
    border: 1px solid #000000;
}
/* NOTE: COMMAS MATTER IN CSS FILES (no trailing commas)*/
.tr-done, 
.container-fluid.recurringitem.done, 
.container-fluid.recurringitemleft.done {
	background-color: lightgreen;
}
.tr-want-to-do, 
.container-fluid.recurringitem.want-to-do,
.container-fluid.recurringitemleft.want-to-do {
	background-color: lightblue;
}
.tr-undecided, 
.container-fluid.recurringitem.undecided, 
.container-fluid.recurringitemleft.undecided, 
.tr-skip, 
.container-fluid.recurringitem.skip {
	background-color: pink;
}
.tr-in-progress, 
.container-fluid.recurringitem.in-progress,
.container-fluid.recurringitem.in_progress,
.container-fluid.recurringitemleft.in-progress {
	background-color: yellow;
}
.tr-wont-do-today, 
.container-fluid.recurringitem.wont-do-today,
.container-fluid.recurringitem.will_not_do_today,
.container-fluid.recurringitemleft.wont-do-today {
	background-color: lightgray;
}
.container-fluid.recurringitemleft.ownitem {
	background-color: orange;
}
.tr-incomplete {
	background-color: white;
}
.container-fluid.recurringitem.complete-forever, 
.container-fluid.recurringitemleft.complete-forever {
	background-color: purple;
}
.footer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
	background-color: #efefef;
	text-align: center;
}
/*
.dropdown-menu-right {
    	  right: 0;
	  left: auto;
}
*/
table.dataTable tbody [id="tr-in-progress"] {
background-color: yellow; }
table.dataTable tbody [id="tr-complete"] {
background-color: lightgreen; }
table.dataTable tbody [id="tr-done"] {
background-color: lightgreen; }
table.dataTable tbody [id="tr-skip"] {
background-color: pink; }
table.dataTable tbody [id="tr-want-to-do"] {
background-color: lightblue; }
table.dataTable tbody [id="tr-undecided"] {
background-color: pink; }
table.dataTable tbody [id="tr-incomplete"] {
background-color: pink; }
table.dataTable tbody [id="tr-wont-do-today"] {
background-color: lightgray; }
.left {
    text-align: left;
}
.right {
    text-align: right;
}
.center {
    text-align: center;
}
#id_title {
    margin: auto;
    width: 100%;
    height: 100%;
    max-width: 1200px;
    max-height: 200px;
}
#id_link_if_applicable {
    width: 100%;
    max-width: 600px;
    margin: auto;
}
#id_email, #id_first_name, #id_last_name {
    margin: auto;
    max-width: 500px;
}
.a_href_title {
    font-family: "Mukta", Arial, sans-serif;
    background-color: darkgrey;
}
.one_thing_title { 
    text-align: left;
}
.no-center { 
    text-align: left;
}
.surlesol_calendar {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
}
#id_note_to_save {
    width: 100%;
    max-width: 300px;
    height: 100%;
    max-height: 100%;
}
td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
    border: 1px solid #000000;
    max-width: 401px;
}
td:hover {
  overflow: visible;
  color: white;
  background-color: black;
}

.centerTable {
    margin: 0px auto;
}

#list-for-log-entries {
    height: 100%;
    max-height: 500px;
}


.link_div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 400px;
}

.tr-complete {
    background-color: lightgreen
}

.tooltip-inner {
    white-space: pre-wrap;
}

.problem-days-overdue {
	text-align: center;
	color: red;
	background-color: black;
}

.problem-days-overdue-info {
	text-align: center;
	color: red;
	background-color: black;
}
.problem-days-advice {
	text-align: center;
	color: lightgreen;
	background-color: blue;
}

.dataTables_length {
	text-align: right;
	float: right !important;
}

.dataTables_filter {
	float: left !important;
}
/*
.deferspan:hover {
TODO: Add hover here with help text for what it means
}
*/

/* General Page Styling */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f5f5f5;
    color: #333;
}

a {
    text-decoration: none;
    color: #007bff;
}

a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Navbar Styling */
.navbar-dark {
    background-color: #343a40; /* Dark gray for the nav background */
}

.navbar-brand img {
    width: 120px; /* Smaller logo for cleaner design */
}

.navbar-nav .nav-link {
    color: #fff;
    font-weight: 500;
    padding: 10px 15px;
}

.navbar-nav .nav-link:hover {
    background-color: #495057; /* Hover background color for nav items */
    border-radius: 5px;
}

.nav-item .dropdown-menu {
    background-color: #343a40;
    border: none;
}

.nav-item .dropdown-menu a {
    color: #fff;
}

.nav-item .dropdown-menu a:hover {
    background-color: #495057;
}

/* Button Styling */
.btn {
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* Footer Styling */
footer {
    background-color: #343a40;
    color: #fff;
}

footer p {
    margin: 0;
    font-size: 14px;
}

/* Custom Badges */
.badge-info {
    background-color: #17a2b8;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 12px;
}

/* Spacing for main content */
.container {
    margin-top: 20px;
}

/* Styling for headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
    color: #333;
    margin-bottom: 20px;
}

/* Table Styling */
.table {
    margin-top: 20px;
}

.table th {
    background-color: #343a40;
    color: white;
}

.table td {
    padding: 12px 15px;
    background-color: #fff;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}