.App {
  text-align: center;
  background: linear-gradient(
    20deg,
    rgba(3, 22, 40, 0.55) 0%,
    rgba(0, 52, 85, 0.75) 100%
  );
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

html {
  background-color: rgb(5, 22, 29);
}

.App .MuiPaper-root.MuiDrawer-paper {
  background: linear-gradient(
    45deg,
    rgba(40, 49, 77, 1) 0%,
    rgba(55, 72, 114, 0.81) 47%,
    rgba(24, 33, 56, 1) 100%
  );
}

.App .MuiDrawer-paperAnchorDockedLeft {
  border: none;
}

.motion-person {
  fill: #d7e7d0;
}
.motion-person {
  fill: #d7e7d0;
}

/********************************************/
/*   OPTION FOR OPTION BOX   */
/********************************************/
.app-drawer .MuiDrawer-paperAnchorLeft {
  right: unset;
  left: unset;
  width: 450px;
}

.app-drawer .MuiButton-containedPrimary {
  background-color: #5198ce;
}

/*Title of the option box*/
.app-drawer h1 {
  margin: 5px;
  color: #99a4cf;
}

/*Background of the option box*/
.app-drawer .MuiPaper-root {
  background: linear-gradient(
    45deg,
    rgba(40, 49, 77, 1) 0%,
    rgba(55, 72, 114, 0.81) 47%,
    rgba(24, 33, 56, 1) 100%
  );
  box-shadow: #0c101d 1px 1px 5px;
  padding: 10px;
}

/*Label and boolean selected value */
.app-drawer .MuiTypography-root.MuiTypography-body1.MuiTypography-gutterBottom,
.app-drawer .MuiSlider-thumb {
  color: #88b1d1;
}

/*Boolean unselected value*/
.app-drawer .MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
  background-color: #5198ce;
}

/*Slider value circle*/
.app-drawer .MuiSwitch-colorPrimary.Mui-checked {
  color: #88b1d1;
}

/*Slider bar color*/
.app-drawer .MuiSlider-colorPrimary {
  color: #5198ce;
}

.MuiButtonBase-root.MuiBottomNavigationAction-root.Mui-selected {
  color: #36a8ff;
}

.MuiButtonBase-root.MuiBottomNavigationAction-root {
  color: white;
}

/********************************************/
/*   Outside Weather   */
/********************************************/
#outside-weather {
  position: absolute;
  top: 230px;
  left: 10px;
  width: 280px;
  z-index: 5000;
  text-align: left;
  font-size: 0.9em;
}

#outside-weather img {
  width: 40px;
  height: 40px;
}

#outside-weather .minmaxtemp {
  font-size: 0.8em;
  margin-left: 3px;
  margin-right: 3px;
}

#outside-weather .MuiCardContent-root {
  background-color: #006189;
  background: linear-gradient(
    45deg,
    rgba(40, 49, 77, 1) 0%,
    rgba(55, 72, 114, 0.81) 47%,
    rgba(24, 33, 56, 1) 100%
  );
  box-shadow: #0c101d 1px 1px 5px;
  height: 320px;
  width: 250px;
}

#outside-weather .MuiTypography-colorTextPrimary {
  text-shadow: 2px 2px 4px black;
  padding-bottom: 20px;
  margin-left: -10px;
}

#outside-weather .MuiGrid-root.MuiGrid-item {
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 2px;
}

#outside-weather .temporaryinfo {
  animation-name: rotate;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  margin-left: 10px;
  transform: perspective(500px);
  position: absolute;
  font-size: 0.8em;
  line-height: 26px;
  color: #06b9d1;
}

#outside-weather .now:hover + .temporaryinfo {
  animation-name: rotateHover;
  animation-duration: 200ms;
  animation-iteration-count: 1;
}

@keyframes rotate {
  0%,
  43% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }

  45%,
  55% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  58%,
  100% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
}

@keyframes rotateHover {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

#outside-weather .rotatedInfo {
  animation-duration: 20s;
  animation-iteration-count: infinite;
}

#outside-weather .rotated1 {
  position: absolute;
  animation-name: rotatewithdelay1;
  opacity: 1;
}
#outside-weather .rotated2 {
  position: absolute;
  animation-name: rotatewithdelay2;
  opacity: 0;
}

@keyframes rotatewithdelay1 {
  0%,
  40% {
    opacity: 1;
  }
  50%,
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rotatewithdelay2 {
  0%,
  40% {
    opacity: 0;
  }
  50%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#outside-weather .row-data {
  padding: 0 10px 0 10px;
  height: 50px;
  line-height: 50px;
}