@media (min-width: 200px) {

   
    #MobileNavbar{
      display:block;
    }
    #DesktopNavbar{
        display:none;
    } 
}



@media (min-width: 769px) {
    #DesktopNavbar{
        display:block;
    }
    #MobileNavbar{
        display:none;
    }
}


body {
  background-color: #f2ede7;
/*  font-family: "Lucida Console", "Courier New", monospace;*/
font-family: TTNormsPro, Roboto, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;*/
}



main > .container {
  padding: 60px 15px 0;

}

table {
  border-collapse: collapse;
  border: none;
/*  overflow:hidden ;*/
  

  /* this only works on top and bottom of the table */
  overflow:hidden ;
  border-radius: 25px



}

/*tbody tr:last-child {
  content: "";
  height: 2em;
  display: table-row;
  background: blue !important;
  overflow: hidden;
  border-radius: 25px;
  

}
*/
/************* table classes ***********/
/* pseudo content inside t-bodys space them away from their previous sibling */
tbody + tbody::before {
  content: "";
  height: 2em;
  display: table-row;
  /* Be warned that this pseudo content spans the whole table width in Firefox, but not in Chrome. Uncomment the background rule to see: */
/*   background: pink; */
  background: #f2ede7;

}

tbody {
  background-color: #FCFBF9 !important;
   /* makes bubllbes */ 
  /*border-radius: 25px;
  overflow: hidden;*/

}


/* needed because of some weird bootstrap interaction */
.table > :not(caption) > * > * {
  padding: 2em;
  
}


.fa-calendar {
  padding
}

#add-task-modal {
  float: right;

}


.testing-second-file {
  float:right;
}


#username {
  padding-left:10px;
  display: inline;
}
/*}*/

tr.rating {
  background-color: #E5FBE9
}



.login_icons {

  color: #3c3c3c;
  font-size: 40px;
  opacity: 1;

}

.form-errors {
  padding-right:10px;

}



.delete-icon {
  color: #3c3c3c;
  font-size: 20px;
  margin-right: 10px;
  margin-top: 10px;
  opacity: 0.5;
}

.delete-row {
  float:right;
}



#inputIconColor .filter-option-inner-inner {
  color: transparent;
}

.icon {
  font-size: 30px; 
  color: Dodgerblue;
  margin-right: 10px;
  margin-top: 10px;
  float: left;
  opacity: 0.7;
}


.equals-icon {
  font-size: 20px; 
  color: Dodgerblue;
  margin-right: 10px;
  margin-top: 10px;
  float: left;
  opacity: 0.7;
}

.font-awesome .fa {
  font-family: "Font Awesome 5 Free", Open Sans;
  font-weight: 501;
}

.navbar-text {
  color: white;
}


/*#signin-btn {
  margin-right:15px;

}*/

.completed {

    opacity: 1.0;
}



.hidden {
    display:none;

}


#logo {
  font-size: 40px;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;

}





.nav-item {
  font-size: 1.125rem;
  margin-right: 10px;
  margin-left: 10px;
/*  margin-top: 10px;*/
 }

.navbar-brand {
  padding-left: 20px;
  padding-right: 20px;
}

.daily_comments {

background-color: #F8FCDA;
/*best one so far, ivory*/
/* BEST SO FAR  */
/*background-color: #FEFEEC*/
/* just a brighter version than ivory */
/*background-color: #fdfdd8;*/

  /*seashell color, not bad*/
/* background-color: #FFF4EB;*/
/*background-color:#FFF4EB;*/

/*good pale yellow*/
/*background-color: #FFFFEB;*/
/*a good color for other stuff, a type of grey */
/*background-color: #E7E9EE;*/
/*lavender blush, also nice color*/
/*background-color: #FFEBF4*/

}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}
.bd-mode-toggle {
  z-index: 1500;
}