:root {
  --readycolor: #8dcb1a;
  --maincolor: #33C3F0;
}

.header {
  width: 100%;
  height: 5%;
  transition: 0.15s;
  padding: 1.6rem 2rem;
  box-sizing: border-box;
  display: table;
  z-index: 1;
}

.header-title {
  box-sizing: border-box;
  text-align: left;
  vertical-align: middle;
  margin: 0.35rem 0 0.35rem 0.35rem;
}

/* hover-attributes only used for desktop devices*/
@media(hover: hover) and (pointer: fine) {
  .icon-basic:hover {
    transform: translateY(-3px);
  }
  .darkmodetrigger:hover {
    transform: translateY(-3px);
  }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.readycolor {
  color: var(--readycolor);
}

.copyicon {
  width: 2.4rem;
  height: 2.4rem;
  transition: 0.3s;
  margin-top: 4px;
  margin-left: .4rem;
}

.reloadicon {
  width: 3rem;
  height: 3rem;
}

.navbaricon {
  height: 3.1rem;
  transition: 0.3s;
  box-sizing: border-box;
}

.fadeout {
  transition: 5s;
  color: #ffffff;
}

.estimation {
  color: var(--readycolor);
}


.svgmoon {
  /*color: #34073D;*/
  filter: invert(4%) sepia(50%) saturate(7487%) hue-rotate(286deg) brightness(112%) contrast(99%);
  transition: 1s;
}

.svgsun {
  /*color: #ffd500;*/
  filter: invert(73%) sepia(96%) saturate(543%) hue-rotate(355deg) brightness(100%) contrast(109%);
  transition: 1s;
}

.banner-red {
  color: #ff0000;
  text-align: center;
}

.modal {
  position: fixed;
  z-index: 2;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  overflow: auto; /* Enable scroll if needed */
  border-radius: 4px;
  width: 96%
}

.is-blurred {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

.content {
  transition: filter .75s;
  transition-timing-function: ease;
}

.underlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

@media (min-width: 400px) {
  .modal {
    width: 27%
  }

  .copyicon {
    width: 3rem;
    height: 3rem;
    transition: 0.3s;
    margin-top: 6px;
    margin-left: .8rem;
  }
}

.checkboxContainer {
  box-sizing: border-box;
  width: 19px;
  height: 24px;
  float: left;
  padding: 0 4px 4.5px 0;
}

.isSelf {
	color: #33C3F0;
}