/* mobe  view styles */


.grid-header.light-mode-bg {
  background-color: rgba(255, 255, 255, 1);
  color: #1d1d1d;
}

.grid-header.dark-mode-bg {
  background-color: rgba(0, 0, 0, 1.0);
  color: white;
}


.k-list-participants {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width:100%;
}

.k-list-participants.light-mode-bg {
  background-color: $bg-color;
  background-color: rgba(255, 255, 255, 1.0);  
  color: #1d1d1d;
}

.k-list-participants.dark-mode-bg-ff {
  background-color: rgba(0, 0, 0, 0.7);
  background-color: $dark-grey;
  color: white;
}

.k-list-participants.dark-mode-bg {
  background-color: rgba(0, 0, 0, 0.4);
  background-color: $dark-grey;
  color: white;
}

.k-list-participants.light-mode-bg-ff {
  background-color: rgba(255, 255, 255, 1.0);
}


.light-mode.text-grey {
  color: $mid-grey;
}

.light-mobile-mode.text-grey {
  color: $mid-grey;
}

.dark-mode.text-grey {
  color: $light-grey;
}

.dark-mobile-mode.text-grey {
  color: $light-grey;
}




.km-scroll {
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding:16px;
  padding-top:0px;
}


.km-flex-list {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  overflow: auto;
}


.k-page-header {
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  padding: 16px;
  padding-bottom: 0px;
  padding-top: 0px;
  font-size: 18px;
  width: 100%;
  outline: 0px solid orange;
  outline-offset: -2px;
}

.k-page-header.light-mode {
  background-color: rgba(255, 255, 255, 1);
  color: $mid-grey;  
}

.k-page-header.dark-mode {
  background-color: $dark-grey;
  color: white;
}


.k-mobile-list, .k-mobile-task-list {
  display: flex;
  flex-direction: column;
  padding-left:16px;
  padding-right: 16px;
  overflow: auto;
  padding-bottom: 10px;
}

.k-mobile-task-list.light-mobile-mode {
  background-color: rgba(255, 255, 255, 0.8);
  color: $mid-grey;  

}


.k-mobile-task-list.dark-mobile-mode {
  background-color: $dark-grey;
  color: white;
}


.k-mobile-list.light-mobile-mode {
  background-color: rgba(255, 255, 255, 1.0);
  color: $mid-grey;  

}


.k-mobile-list.dark-mobile-mode {
  background-color: $dark-grey;
  color: $light-grey;
}


.mobile-nav {
  padding-left:16px;
  padding-right:16px;
  padding-top:16px !important
}

.mobile-content {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;

}


.mobile-grid-wrapper, .mobile-task-wrapper {
  // set margin depending on width of window
  margin: 10px;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  //padding: 5px 10px 10px 10px;
  border-radius: 5px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  outline: 0px solid green;
  // height: 100%;
  outline-offset: -1px;
  overflow: hidden;
}


.mobile-info-wrapper.light-mode   {
  background-color: white;
}


.mobile-grid-wrapper.light-mode,  .mobile-task-wrapper.light-mode {
  background-color: white;
}

.mobile-grid-wrapper.dark-mode {
  background-color: $dark-grey;
}

.mobile-info-wrapper.dark-mode {
  background-color: $dark-grey;
  color:white;
}



.float {
  position: fixed;
  width: 40px;
  height: 40px;
  bottom: 10px;
  right: 10px;
  background-color: white;
  color: $mid-grey;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
}

.my-float {
  margin-top: 13px;
  font-size: 1.2rem;
}