/* common stylings */
* {
  font-family: "Montserrat", sans-serif;
  background-color: #19110B;
  color: #D68047;
  line-height: 1.2;
}


/* green color system */
/*
background-color: #262C26;
color: #d7f5d8;
buttons: #fff #f0f0f0 (white) #000 (black)
checkbox: 9FD6AE
*/

/* evning rose: */
/*
background-color: #4A4A4A;
color: #DCA1A1
buttons: #DCA1A1 (text) #996666 (back)
checkbox/links: 8E4585
*/

/*
background-color: #19110B;
color: #D68047
buttons: #F2D7C4 (text) #000 (back)
checkbox active: #86471D
button shadows: #5D3A24
input background: #E2A379 (was F2D7C4)
checkbox inactive: #E2A379
links: #F9DCCB
*/


body {
  margin: 10px;
}



.hidden {
  display: none;
}

input {
  background-color: #E2A379;
  color: #19110B;
  letter-spacing: 0px;
}

a {
  color: #F9DCCB;
}

a:hover {
  color: #86471D
}

#tasklist .tabledata {
  color: #E2A379;
}

#tasklist .tabledataheader {
  color: #E2A379;
}

#searchbar {
  width: 75%;
}


/* mobile menu */
.mobile-menu-row {
  padding-left: 30%;
  padding-right: 30%;
  transition: height 0.3s;
  background-color: #19110B;
  color: #D68047;
  width: 150%;
}

.mobile-menu-row a {
  color: #F2D7C4;
}

.mobile-menu-items {
  /* background-color */
  padding: 5%;
  border-top: 3px solid black;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.mobilemenuitem {
  text-decoration: none;
  padding-top: 2%;
  padding-bottom: 2%;
  transition: height 0.1s;
  /* color */
}

.mobilemenuitem :hover {
  color: black;
}

.mobiledrop {
  padding-left:  10%!important;
}







.completed-selection div {
  background-color: #D68047;
  color: #19110B;
}

.overbooklink {
  color: #D68047;
  text-decoration: underline;
  text-decoration-color: white;
}

.tabledata {
  padding-left: 10px;
  padding-right: 10px;
}

.tabledataheader {
  padding-left: 10px;
  padding-right: 10px;
}

.homemenu-item {
  margin-left: 1%;
  margin-right: 1%;
  font-size: 18px;
}

#homefunctionbox {
  padding-top: 20px;
}

.header {
  font-weight: bold;
}




.slightmarginR {
  margin-right: 3%;
}










/* CSS */
.button-50 {
  appearance: button;
  background-color: #000;
  background-image: none;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: #5D3A24 4px 4px 0 0,#000 4px 4px 0 1px;
  box-sizing: border-box;
  color: #D68047;
  cursor: pointer;
  display: inline-block;
  /* font-family: ITCAvantGardeStd-Bk,Arial,sans-serif; */
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin: 0 5px 10px 0;
  overflow: visible;
  padding: 8px 24px;
  text-align: center;
  text-transform: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.button-50:focus {
  text-decoration: none;
}

.button-50:hover {
  text-decoration: none;
}

.button-50:active {
  box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
  outline: 0;
}

.button-50:not([disabled]):active {
  box-shadow: #5D3A24 2px 2px 0 0, #000 2px 2px 0 1px;
  transform: translate(2px, 2px);
}

@media (min-width: 768px) {
  .button-50 {
    padding: 10px 20px;
  }
}

@media screen and (max-width: 426px) {
  .button-50 {
    padding: 8px 14px;
    font-size: 8px;
  }
  /* .button-50-inverted #completetask-button {
    padding: 8px 14px;
    font-size: 8px;
  } */
  .button-50-sm {
    padding: 8px 12px;
    font-size: 8px;
  }
}

/* CSS */
.button-50-sm {
  appearance: button;
  background-color: #000;
  background-image: none;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: #5D3A24 4px 4px 0 0,#000 4px 4px 0 1px;
  box-sizing: border-box;
  color: #D68047;
  cursor: pointer;
  display: inline-block;
  /* font-family: ITCAvantGardeStd-Bk,Arial,sans-serif; */
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  margin: 0 5px 10px 0;
  overflow: visible;
  padding: 8px 18px;
  text-align: center;
  text-transform: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.button-50-sm:focus {
  text-decoration: none;
}

.button-50-sm:hover {
  text-decoration: none;
}

.button-50-sm:active {
  box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
  outline: 0;
}

.button-50-sm:not([disabled]):active {
  box-shadow: #5D3A24 2px 2px 0 0, #000 2px 2px 0 1px;
  transform: translate(2px, 2px);
}

@media (min-width: 768px) {
  .button-50-sm {
    padding: 8px 22px;
  }
}



.button-50-inverted {
  appearance: button;
  background-color: #5D3A24;
  background-image: none;
  border: 1px solid #5D3A24;
  border-radius: 4px;
  box-shadow: black 4px 4px 0 0,black 4px 4px 0 1px;
  box-sizing: border-box;
  color: white;
  cursor: pointer;
  display: inline-block;
  /* font-family: ITCAvantGardeStd-Bk,Arial,sans-serif; */
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin: 0 5px 10px 0;
  overflow: visible;
  padding: 12px 40px;
  text-align: center;
  text-transform: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.button-50-inverted:focus {
  text-decoration: none;
}

.button-50-inverted:hover {
  text-decoration: none;
}

.button-50-inverted:active {
  box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
  outline: 0;
}

.button-50-inverted:not([disabled]):active {
  box-shadow: black 2px 2px 0 0, white 2px 2px 0 1px;
  transform: translate(2px, 2px);
}

@media (min-width: 768px) {
  .button-50-inverted {
    padding: 12px 50px;
  }
}




.button-84 {
  align-items: center;
  background-color: initial;
  background-image: linear-gradient(#464d55, #25292e);
  border-radius: 8px;
  border-width: 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1),0 3px 6px rgba(0, 0, 0, .05);
  box-sizing: border-box;
  color: #D68047;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  font-family: expo-brand-demi,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 18px;
  height: 52px;
  justify-content: center;
  line-height: 1;
  margin: 0;
  outline: none;
  overflow: hidden;
  padding: 0 32px;
  text-align: center;
  text-decoration: none;
  transform: translate3d(0, 0, 0);
  transition: all 150ms;
  vertical-align: baseline;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-84:hover {
  box-shadow: rgba(0, 1, 0, .2) 0 2px 8px;
  opacity: .85;
}

.button-84:active {
  outline: 0;
}

.button-84:focus {
  box-shadow: rgba(0, 0, 0, .5) 0 0 0 3px;
}

@media (max-width: 420px) {
  .button-84 {
    height: 48px;
  }
}

/* <!-- HTML !-->
<button class="button-52" role="button">Button 52</button> */

/* CSS */
.button-52 {
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 1px;
  padding: 13px 20px 13px;
  outline: 0;
  border: 1px solid white;
  cursor: pointer;
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  color: #F2D7C4;
}

.button-52:after {
  content: "";
  background-color: #D68047;
  width: 100%;
  z-index: -1;
  position: absolute;
  height: 100%;
  top: 7px;
  left: 7px;
  transition: 0.2s;
}

.button-52:hover:after {
  top: 0px;
  left: 0px;
}

@media (min-width: 768px) {
  .button-52 {
    padding: 13px 50px 13px;
  }
}












/* <div class="checkbox-wrapper-6">
  <input class="tgl tgl-light" id="cb1-6" type="checkbox"/>
  <label class="tgl-btn" for="cb1-6">
</div> */

.checkbox-wrapper-6 .tgl {
  display: none;
}
.checkbox-wrapper-6 .tgl,
.checkbox-wrapper-6 .tgl:after,
.checkbox-wrapper-6 .tgl:before,
.checkbox-wrapper-6 .tgl *,
.checkbox-wrapper-6 .tgl *:after,
.checkbox-wrapper-6 .tgl *:before,
.checkbox-wrapper-6 .tgl + .tgl-btn {
  box-sizing: border-box;
}
.checkbox-wrapper-6 .tgl::-moz-selection,
.checkbox-wrapper-6 .tgl:after::-moz-selection,
.checkbox-wrapper-6 .tgl:before::-moz-selection,
.checkbox-wrapper-6 .tgl *::-moz-selection,
.checkbox-wrapper-6 .tgl *:after::-moz-selection,
.checkbox-wrapper-6 .tgl *:before::-moz-selection,
.checkbox-wrapper-6 .tgl + .tgl-btn::-moz-selection,
.checkbox-wrapper-6 .tgl::selection,
.checkbox-wrapper-6 .tgl:after::selection,
.checkbox-wrapper-6 .tgl:before::selection,
.checkbox-wrapper-6 .tgl *::selection,
.checkbox-wrapper-6 .tgl *:after::selection,
.checkbox-wrapper-6 .tgl *:before::selection,
.checkbox-wrapper-6 .tgl + .tgl-btn::selection {
  background: none;
}
.checkbox-wrapper-6 .tgl + .tgl-btn {
  outline: 0;
  color: black;
  display: block;
  /* width: 4em; */
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkbox-wrapper-6 .tgl + .tgl-btn:after,
.checkbox-wrapper-6 .tgl + .tgl-btn:before {
  position: relative;
  /* display: block; */
  /* content: ""; */
  width: 50%;
  height: 100%;
}
.checkbox-wrapper-6 .tgl + .tgl-btn:after {
  left: 0;
}
.checkbox-wrapper-6 .tgl + .tgl-btn:before {
  display: none;
}
.checkbox-wrapper-6 .tgl:checked + .tgl-btn:after {
  left: 50%;
}

.checkbox-wrapper-6 .tgl-light + .tgl-btn {
  background: #E2A379;
  border-radius: 2em;
  padding: 2px;
  padding-left: 8px;
  transition: all 0.4s ease;
  min-width: 40px;
}
.checkbox-wrapper-6 .tgl-light + .tgl-btn:after {
  border-radius: 50%;
  background: #86471D;
  color: #F2D7C4;
  transition: all 0.2s ease;
}
.checkbox-wrapper-6 .tgl-light:checked + .tgl-btn {
  background: #86471D;
  color: #F2D7C4;
}
.tgl-btn label {
  margin-left: 10px;
}


.antibutton {
  background: none; /* Remove background color */
  border: none;      /* Remove border */
  padding: 0;        /* Remove padding to make it just the icon size */
  cursor: pointer;   /* Keep the hand cursor */
}

.iconstyling {
  margin: 16px;
}



/*
<div class="checkbox-wrapper-36">
  <input id="toggle-36" type="checkbox">
  <label for="toggle-36"></label>
</div> */
/*
.checkbox-wrapper-36 *,
.checkbox-wrapper-36 *::before,
.checkbox-wrapper-36 *::after {
  box-sizing: border-box;
}

.checkbox-wrapper-36 label {
  background: white;
  border-radius: 12px;
  box-shadow: 0px 50px 20px 0 rgba(0,0,0,0.1);
  display: flex;
  height: 50px;
  padding: 8px;
  position: relative;
  transition: transform 300ms ease, box-shadow 300ms ease;
  width: 116px;
}

.checkbox-wrapper-36 input {
  display: none;
}

.checkbox-wrapper-36 label:after {
  animation: move-left-36 400ms;
  background: #E2E2E2 no-repeat center;
  border-radius: 12px;
  content: '';
  left: 8px;
  outline: none;
  position: absolute;
  transition: background 100ms linear;
  width: 36px;
  height: 36px;
  left: 8px;
  top: 7px;
}

.checkbox-wrapper-36 label:active {
  box-shadow: 0px 10px 20px 0 rgba(0,0,0,0.2);
  transform: scale(1.15);
}

.checkbox-wrapper-36 input:checked + label:after {
  animation: move-right-36 400ms;
  background: #6EB54E no-repeat center;
  left: 72px;
}

@keyframes move-right-36 {
  0% {
    left: 8px;
  }
  75% {
    left: 78px;
  }
  100% {
    left: 72px;
  }
}

@keyframes move-left-36 {
  0% {
    left: 72px;
  }
  75% {
    left: 2px;
  }
  100% {
    left: 8px;
  }
} */














/* add task form */
/* default: hidden*/






/* tasklsit */


/* #tasklist { */
.scrollbar {
  /* Remove default list styling */
  /*text-align: right;*/
  list-style-type: none;
  padding: 25px 0px 0px 0px;
  margin: 25px 0px 0px 0px;
  font-size: 14px; /* Increase font-size */
  text-align: left;
  background-color: #19110B;
}

.scrollbar li .col-1 {
  text-align: right;
}

/* #tasklist li { */
.scrollbar li {
  border-bottom: 1px solid #4b301e;
  width: 93%;
  margin-left: 5%;
  background-color: #19110B;
  margin-bottom: 12px;
  opacity: 90%;
}

/* #tasklist p { */
.scrollbar p {
  width: 70%;
  margin-left: 15%;
  background-color: #19110B;
  opacity: 72%;
  display: none; /*collapsed by default*/
}

.scrollbar::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #19110B;
border-radius: 10px; }

.scrollbar::-webkit-scrollbar {
/* width: 12px; */
background-color: #19110B; }

.scrollbar::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(330deg, #D68047 0%, #F2D7C4 100%);
background-image: linear-gradient(120deg, #D68047 0%, #F2D7C4 100%); }

.square::-webkit-scrollbar-track {
border-radius: 0 !important; }

.square::-webkit-scrollbar-thumb {
border-radius: 0 !important; }

.thin::-webkit-scrollbar {
width: 6px; }

.scroll {
position: relative;
overflow-y: scroll;
height: 711px; }

/* .card-body {
  text-align: right;
  padding-left: 125px;
} */









/* loader */

.lds-ring,
.lds-ring div {
  box-sizing: border-box;
}
.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid currentColor;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: currentColor transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* <div class="lds-ring"><div></div><div></div><div></div><div></div></div> */


/*
background-color: #19110B;
color: #D68047
buttons: #F2D7C4 (text) #000 (back)
checkbox active: #86471D
button shadows: #5D3A24
input background: #E2A379 (was F2D7C4)
checkbox inactive: #E2A379
links: #F9DCCB
*/


.dashchartelem {
  margin-top: 10px;
}

/* chart customization */
#dist_timeXthisweek_table .column {
  --color-1: #D6C847;
  --color-2: #55D647;
  --color-3: #479DD6;
  --color-4: #C847D6;
  --color-5: #9DD647;
  --color-6: #47D680;
  --color-7: #D64755;
  --color-8: #F2C4A9;
  --color-9: #C847D6;
  --color-10: #8A807B;
}


/* #dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 1)  {
  background-color: #8A807B;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 2) {
  background-color: #55D647;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 3) {
  background-color: #479DD6;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 4) {
  background-color: #C847D6;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 5) {
  background-color: #9DD647;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 6) {
  background-color: #47D680;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 7) {
  background-color: #D64755;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 8) {
  background-color: #F2C4A9;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 9) {
  background-color: #C847D6;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 10) {
  background-color: #D6C847;
  color: black;
} */


#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 1)  {
  background-color: black;
  color: white;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 2) {
  background-color: #E19767;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 3) {
  background-color: #E6A277;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 4) {
  background-color: #EAAD88;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 5) {
  background-color: #EEB998;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 6) {
  background-color: #F2C4A9;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 7) {
  background-color: #F5D0BA;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 8) {
  background-color: #F9DCCB;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 9) {
  background-color: #FBE7DC;
  color: black;
}
#dist_timeXthisweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 10) {
  background-color: #FDF3ED;
  color: black;
}


#dist_timeXthisweek_elem .toosmall {
  transition-duration: 0.3s !important;
  color: rgba(0, 0, 0, 0) !important;
}

#dist_timeXthisweek_elem .toosmall:hover {
  transition-duration: 0.3s !important;
  color: rgba(0, 0, 0, 1) !important;
}


#dist_time_weekXweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 1)  {
  background-color: black;
  color: white;
}
#dist_time_weekXweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 2) {
  background-color: #E19767;
  color: black;
}
#dist_time_weekXweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 3) {
  background-color: #E6A277;
  color: black;
}
#dist_time_weekXweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 4) {
  background-color: #EAAD88;
  color: black;
}
#dist_time_weekXweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 5) {
  background-color: #EEB998;
  color: black;
}
#dist_time_weekXweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 6) {
  background-color: #F2C4A9;
  color: black;
}
#dist_time_weekXweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 7) {
  background-color: #F5D0BA;
  color: black;
}
#dist_time_weekXweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 8) {
  background-color: #F9DCCB;
  color: black;
}
#dist_time_weekXweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 9) {
  background-color: #FBE7DC;
  color: black;
}
#dist_time_weekXweek_elem .charts-css.column.multiple tbody tr td:nth-of-type(10n + 10) {
  background-color: #FDF3ED;
  color: black;
}



#hrsXweek_elem .charts-css.column tbody tr td:nth-of-type(10n + 1)  {
  background-color: #E19767;
  color: black;
}
#hrsXweek_elem .charts-css.column tbody tr td:nth-of-type(10n + 2) {
  background-color: #E6A277;
  color: black;
}
#hrsXweek_elem .charts-css.column tbody tr td:nth-of-type(10n + 3) {
  background-color: #EAAD88;
  color: black;
}
#hrsXweek_elem .charts-css.column tbody tr td:nth-of-type(10n + 4) {
  background-color: #EEB998;
  color: black;
}
#hrsXweek_elem .charts-css.column tbody tr td:nth-of-type(10n + 5) {
  background-color: #F2C4A9;
  color: black;
}
#hrsXweek_elem .charts-css.column tbody tr td:nth-of-type(10n + 6) {
  background-color: #F5D0BA;
  color: black;
}
#hrsXweek_elem .charts-css.column tbody tr td:nth-of-type(10n + 7) {
  background-color: #F9DCCB;
  color: black;
}
#hrsXweek_elem .charts-css.column tbody tr td:nth-of-type(10n + 8) {
  background-color: #FBE7DC;
  color: black;
}
#hrsXweek_elem .charts-css.column tbody tr td:nth-of-type(10n + 9) {
  background-color: #FDF3ED;
  color: black;
}
#hrsXweek_elem .charts-css.column tbody tr td:nth-of-type(10n + 10) {
  background-color: #D6C847;
  color: black;
}

#hrsXweek_elem .hrsXweek_elem_label {
  overflow-wrap: anywhere;
  justify-content: start;
  padding-left: 3px;
  font-size: 10px;
}

#prob_cat_elem table {
  /* width: 100%; */
  max-width: 120px;
  max-height: 120px;
  margin: 0 auto;
}

#prob_cat_elem li {
  font-size: 12px;
  list-style-type: none;
}

#prob_cat_elem ul {
  border: none;
  list-style-type: none;
}

#prob_cat_elem .charts-css.pie tbody tr:nth-of-type(10n + 1) {
  --color: #E19767;
}
#prob_cat_elem .charts-css.pie tbody tr:nth-of-type(10n + 2) {
  --color: #FBE7DC;
}
#prob_cat_elem .charts-css.pie tbody tr:nth-of-type(10n + 3) {
  --color: #E6A277;
}
#prob_cat_elem .charts-css.pie tbody tr:nth-of-type(10n + 4) {
  --color: #FDF3ED
}
#prob_cat_elem .charts-css.pie tbody tr:nth-of-type(10n + 5) {
  --color: #EEB998;
}
#prob_cat_elem .charts-css.pie tbody tr:nth-of-type(10n + 6) {
  --color: white;
}
#prob_cat_elem .charts-css.pie tbody tr:nth-of-type(10n + 7) {
  --color: #F5D0BA;
}
#prob_cat_elem .charts-css.pie tbody tr:nth-of-type(10n + 8) {
  --color: #EEB998
}
#prob_cat_elem .charts-css.pie tbody tr:nth-of-type(10n + 9) {
  --color: #FBE7DC;
}
#prob_cat_elem .charts-css.pie tbody tr:nth-of-type(10n + 10) {
  --color: #EAAD88;
}

#prob_cat_elem .legend li:nth-of-type(10n + 1) {
  color: #E19767;
}
#prob_cat_elem .legend li:nth-of-type(10n + 2) {
  color: #FBE7DC;
}
#prob_cat_elem .legend li:nth-of-type(10n + 3) {
  color: #E6A277;
}
#prob_cat_elem .legend li:nth-of-type(10n + 4) {
  color: #FDF3ED;
}
#prob_cat_elem .legend li:nth-of-type(10n + 5) {
  color: #EEB998;
}
#prob_cat_elem .legend li:nth-of-type(10n + 6) {
  color: white;
}
#prob_cat_elem .legend li:nth-of-type(10n + 7) {
  color: #F5D0BA;
}
#prob_cat_elem .legend li:nth-of-type(10n + 8) {
  color: #EEB998;
}
#prob_cat_elem .legend li:nth-of-type(10n + 9) {
  color: #FBE7DC;
}
#prob_cat_elem .legend li:nth-of-type(10n + 10) {
  color: #EAAD88;
}

#prob_cat_elem .charts-css.legend li:nth-child(10n+1)::before {
  background-color: #E19767;
  width: 0.5rem;
  height: 0.5rem;
}
#prob_cat_elem .charts-css.legend li:nth-child(10n+2)::before {
  background-color: #FBE7DC;
  width: 0.5rem;
  height: 0.5rem;
}
#prob_cat_elem .charts-css.legend li:nth-child(10n+3)::before {
  background-color: #E6A277;
  width: 0.5rem;
  height: 0.5rem;
}
#prob_cat_elem .charts-css.legend li:nth-child(10n+4)::before {
  background-color: #FDF3ED;
  width: 0.5rem;
  height: 0.5rem;
}
#prob_cat_elem .charts-css.legend li:nth-child(10n+5)::before {
  background-color: #EEB998;
  width: 0.5rem;
  height: 0.5rem;
}
#prob_cat_elem .charts-css.legend li:nth-child(10n+6)::before {
  background-color: white;
  width: 0.5rem;
  height: 0.5rem;
}
#prob_cat_elem .charts-css.legend li:nth-child(10n+7)::before {
  background-color: #F5D0BA;
  width: 0.5rem;
  height: 0.5rem;
}
#prob_cat_elem .charts-css.legend li:nth-child(10n+8)::before {
  background-color: #EEB998;
  width: 0.5rem;
  height: 0.5rem;
}
#prob_cat_elem .charts-css.legend li:nth-child(10n+9)::before {
  background-color: #FBE7DC;
  width: 0.5rem;
  height: 0.5rem;
}
#prob_cat_elem .charts-css.legend li:nth-child(10n+10)::before {
  background-color: #EAAD88;
  width: 0.5rem;
  height: 0.5rem;
}





/* tablet */
@media screen and (max-width: 769px) {
  #tasklist li {
    font-size: 12px;
  }
  #all-filters {
    font-size: 14px;
  }
  h4 {
    font-size: 16px;
  }
  h3 {
    font-size: 20px;
  }
  h2 {
    font-size: 22px;
  }
  h1 {
    font-size: 24px;
  }
  .charts-css {
    font-size: 12px;
  }
}







/* phone */
@media screen and (max-width: 426px) {
  #tasklist li {
    font-size: 10px;
  }
  #all-filters {
    font-size: 10px;
  }
  input {
    font-size: 12px;
  }
  h4 {
    font-size: 12px;
  }
  h3 {
    font-size: 14px;
  }
  h2 {
    font-size: 16px;
  }
  h1 {
    font-size: 18px;
  }
  .button-50 button {
    font-size: 12px;
  }
  .tabledata {
    padding-left: 2px;
    padding-right: 2px;
  }
  .tabledataheader {
    padding-left: 2px;
    padding-right: 2px;
  }
  #total-containter h4 {
    padding-left: 2px;
    padding-right: 2px;
  }
  .checkbox-wrapper-6 .tgl-light + .tgl-btn {
    padding-left: 3px;
  }
  .button-50-inverted {
    font-size: 12px;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    margin: 0 5px 10px 0;
    overflow: visible;
    padding: 8px 18px;
  }
  .charts-css {
    font-size: 8px;
  }
  #dist_timeXthisweek_table {
    --aspect-ratio: 1 / 1;
  }
}