:root {
  --c-zinc-50: #fafafa;
  --c-zinc-200: #e4e4e7;
  --c-zinc-800: #27272a;

  --c-1: #a983d8;
  --c-2: #6ab4f1;
  --c-3: #8be59d;
  --c-4: #f9f176;
  --c-5: #ffad85;
  --c-6: #ec8a83;

  --c-primary-500: #a983d8;
  --c-primary-600: #9b69d8;
}


.form-control {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.form-control label {
  font-size: .75rem;
}

.form-control .label-ex {
  font-size: .65rem;
}

.form-control input,
.form-control button {
  background-color: var(--c-zinc-200);
  border: none;

  padding: .5rem 1rem;
  border-radius: .25rem;
}

.form-control input:focus {
  outline: none;
  outline-width: thin;
  outline-color: var(--c-primary-500);
  outline-style: solid;

  color: var(--c-zinc-purple-500);
}


.form-control button {
  background-color: var(--c-primary-500);
  color: var(--c-zinc-50);
}

.form-control button:hover {
  cursor: pointer;
  background-color: var(--c-primary-600);
}

.circular-container {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;

  gap: 1rem;

}

.circular-progress-background {
  content: '';
  height: 12rem;
  width: 12rem;
  display: block;

  position: absolute;
  z-index: 10;
  border-radius: 50%;

  background: conic-gradient(
      var(--c-1) 0% 18.5%,
          var(--c-2) 18.5% 24.9%,
          var(--c-3) 25% 29.9%,
          var(--c-4) 30% 34.9%,
          var(--c-5) 35% 39.9%,
          var(--c-6) 40% 100%);

}

.circular-progress {
  position: relative;
  z-index: 15;
  height: 12rem;
  width: 12rem;
  /* background-color: var(--c-zinc-200); */
  box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;


}

.circular-progress::after {
  content: '';
  /* display: flex; */
  position: absolute;
  z-index: 20;
  height: 80%;
  width: 80%;
  background-color: var(--c-zinc-50);
  box-shadow: rgb(219, 219, 219) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;

  border-radius: 50%;


}

.circular-progress .circular-info {
  /* background-color: red; */
  position: relative;
  z-index: 30;


}

.circular-progress .circular-info .title {
  font-weight: 500;
  font-size: .75rem;
  text-align: center;
}

.circular-progress .circular-info .value {
  font-weight: 800;
}

.user-info {
  display: flex;
  /* align-items: center; */
  /* justify-content: center; */
  gap: 1rem;

}

.graph {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 2rem;

  justify-content: center;
}

.graph .info ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.graph .info ul li {
  margin-left: 2rem;
  margin-top: -1rem;
}

.graph .info ul li::before {
  content: '';
  width: 1rem;
  height: 1rem;
  display: block;
  background-color: red;
  border-radius: 50%;
  position: relative;
  left: -2rem;
  top: 1.25rem;
}

.graph .info ul li:nth-of-type(1)::before {
  background-color: var(--c-1);
}

.graph .info ul li:nth-of-type(2)::before {
  background-color: var(--c-2);
}

.graph .info ul li:nth-of-type(3)::before {
  background-color: var(--c-3);
}

.graph .info ul li:nth-of-type(4)::before {
  background-color: var(--c-4);
}

.graph .info ul li:nth-of-type(5)::before {
  background-color: var(--c-5);
}

.graph .info ul li:nth-of-type(6)::before {
  background-color: var(--c-6);
}

.btn-wsp{
  position:fixed;
  width:60px;
  height:60px;
  line-height: 63px;
  bottom:25px;
  right:25px;
  background:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:35px;
  box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
  z-index:100;
  transition: all 300ms ease;
}
.btn-wsp:hover{
  background: #20ba5a;
}
@media only screen and (min-width:320px) and (max-width:768px){
  .btn-wsp{
      width:63px;
      height:63px;
      line-height: 66px;
}
