html,
body {
  font-family: 'Roboto', 'Helvetica', sans-serif;
}

a {
  text-decoration: underline;
  color: #00bcd4;
}

.page-splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00bcd4;
  background: radial-gradient(circle, #064750, #00bcd4);
  transition: background 1s ease;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  flex-direction: column;
}

.gradient-changed {
  background: radial-gradient(circle, #3c6267, #00bcd4) !important;
}

#sign-in-button {
  margin-left: 10px;
  color: inherit;
}

.sign-out-button {
  margin: 0 10px 10px 10px;
  color: inherit;
  right: 20px;
  position: absolute;
  background-color: #00bcd4;
}

.sign-span {
  right: 25px;
  position: absolute;
}

.sign-options {
  display: none;
}

#view-source {
  position: fixed;
  display: block;
  right: 0;
  bottom: 0;
  margin-right: 40px;
  margin-bottom: 40px;
  z-index: 900;
}

/* Full height for parent div */
.table-container {
  /* height: 100vh;  */
  display: flex;
  flex-direction: column;
  /* padding: 16px; */
}

/* Table styling */
table {
  width: 100%;
  /* Make the table fill the div */
}

.item-td {
  /* font-size: medium; */
}

.mdl-snackbar {
  z-index: 9999;
}

.mdl-snackbar__cancel-btn {
  color: #fff;
  background-color: #f44336;
  /* Red for cancel button */
  border: none;
  padding: 8px 16px;
  margin-left: 10px;
  cursor: pointer;
}

.mdl-snackbar__cancel-btn:hover {
  background-color: #d32f2f;
  /* Darker red on hover */
}

.mdl-snackbar__action {
  margin-left: 10px;
}

.mdl-card__supporting-text {
  /* width: px !important; */
  /* width: 950px !important; */
   width: 100% !important;
  padding: 10px !important;
}

.view-page-card {
  width: 1000px;

  transition: width 0.3s ease !important;
}

.input-container {
  width: 100%;
  /* Ensure the container takes full width if necessary */
}

.full-width-input {

  width: 100%;
  /* Makes the input take full width of its container */
  box-sizing: border-box;
}

.mdl-cell-nomargin {
  margin: unset !important;
}

.mdl-grid {
  /* margin: unset !important; */
  margin-top: unset !important;
  padding: unset !important;
  /* width: unset !important; */
}

table {
  border: none !important;
}

@media (max-width: 1200px) {
  .view-page-card {
    width: 800px !important;
    transition: width 0.3s ease !important;
  }
}

@media (max-width: 768px) {
  .view-page-card {
    width: unset !important;
    transition: width 0.3s ease !important;
  }
}

/* Optional: Adjusting form padding and input field for small screens */
@media (min-width: 768px) {}

.capitalize-first {
  text-transform: lowercase;
}

.capitalize-first::first-letter {
  text-transform: uppercase;
}

.m-top {
  margin-top: 10px;
}

.naba-avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
}

.naba-avatar-small {
  width: 24px;
  height: 24px;
  border-radius: 24px;
}

.naba-layout .mdl-layout__header .mdl-layout__drawer-button {
  color: rgba(0, 0, 0, 0.54);
}

.mdl-layout__drawer .avatar {
  margin-bottom: 16px;
}

.naba-drawer {
  border: none;
}

/* iOS Safari specific workaround */
.naba-drawer .mdl-menu__container {
  z-index: -1;
}

.naba-drawer .naba-navigation {
  z-index: -2;
}

/* END iOS Safari specific workaround */
.naba-drawer .mdl-menu .mdl-menu__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.naba-drawer-header {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 16px;
  height: 151px;
}

.naba-avatar-dropdown {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}

.naba-navigation {
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.naba-layout .naba-navigation .mdl-navigation__link {
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.56);
  font-weight: 500;
}

.naba-layout .naba-navigation .mdl-navigation__link:hover {
  background-color: #00BCD4;
  color: #37474F;
}

.naba-navigation .mdl-navigation__link .material-icons {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.56);
  margin-right: 32px;
}

.naba-content {
  max-width: 1080px;
}

.naba-charts {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.naba-chart:nth-child(1) {
  color: #ACEC00;
}

.naba-chart:nth-child(2) {
  color: #00BBD6;
}

.naba-chart:nth-child(3) {
  color: #BA65C9;
}

.naba-chart:nth-child(4) {
  color: #EF3C79;
}

.naba-graphs {
  padding: 16px 32px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

/* TODO: Find a proper solution to have the graphs
 * not float around outside their container in IE10/11.
 * Using a browserhacks.com solution for now.
 */
_:-ms-input-placeholder,
:root .naba-graphs {
  min-height: 664px;
}

_:-ms-input-placeholder,
:root .naba-graph {
  max-height: 300px;
}

/* TODO end */
.naba-graph:nth-child(1) {
  color: #00b9d8;
}

.naba-graph:nth-child(2) {
  color: #d9006e;
}

.naba-cards {
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
}

.naba-cards .naba-separator {
  height: 32px;
}

.naba-cards .mdl-card__title.mdl-card__title {
  color: white;
  font-size: 24px;
  font-weight: 400;
}

.naba-cards ul {
  padding: 0;
}

.naba-cards h3 {
  font-size: 1em;
}

.naba-updates .mdl-card__title {
  min-height: 200px;
  background-image: url('/static/images/dog.png');
  background-position: 90% 100%;
  background-repeat: no-repeat;
}

.naba-cards .mdl-card__actions a {
  color: #00BCD4;
  text-decoration: none;
}

.naba-options h3 {
  margin: 0;
}

.naba-options .mdl-checkbox__box-outline {
  border-color: rgba(255, 255, 255, 0.89);
}

.naba-options ul {
  margin: 0;
  list-style-type: none;
}

.naba-options li {
  margin: 4px 0;
}

.naba-options .material-icons {
  color: rgba(255, 255, 255, 0.89);
}

.naba-options .mdl-card__actions {
  height: 64px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}