:root {
  --mc-color-dark: #7c2f8d;
  --mc-color-light: #9c50ad;
}

.bg-mc {
  background: #dd962a;

  a {
    text-decoration: none;
  }
 }


.mc-px-5 {
  padding-left: 4.2rem !important;
  padding-right: 1rem !important;
}

.Layout_header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0.3rem;
  width: 100%;
}

.sidebarStyleMin {
  position: absolute;
  height: 100vh;
  left: 0;
  background: white;
  top: 0;
}

.mainHeadingMin {
  padding: 10px
}

.listItemMin {
  color: #4d4d4d;
  font-weight: 400;
  padding: 16px;
  font-size: 16px;

  &:hover {
    background-color: rgba(226, 225, 226, 0.72);
    color: var(--mc-color-dark);
    cursor: pointer;
  }
}

.activeMin {
  background-color: rgb(212 189 217 / 42%);
  color: var(--mc-color-dark);
  font-weight: 600;
  padding: 16px;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.activeMin:hover {
  background-color: rgb(212 189 217 / 62%);
  transform: scale(1.1);
}

.activeMin:visited {
  background-color: rgb(212 189 217 / 92%);
}


.sidebarStyle {
  width: 23.75rem !important;

  .menuTitle {
    td {
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 0 5px 10px 13px;
    }
  }
}

.listItem {
  font-size: 16px;
  color: #4d4d4d;
  font-weight: 400;
  padding: 0.5rem;

  &:hover {
    background-color: rgba(28, 168, 195, 0.07);
    color: var(--mc-color-dark);
    cursor: pointer;
  }

  td {
    padding: 10px 5px;
    font-size: 16px;
  }
}

.active {
  color: #1ca8c3;
  font-weight: 600;

  td {
    padding: 10px 2px;
  }
}

.footer-mc {
  font-weight: 500;
}

.footer2 {
  background-color:  #222222;
  color: white;
  min-height: 57px;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  bottom: 0;
}


@media screen and (min-width: 350px) and (max-width: 600px) {
  .sidebarStyle {
    width: 18.75rem !important;
  }
}


.pcontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 190px;
  
}

@keyframes growProgressBar {
  0%, 33% { --pgPercentage: 0; }
  100% { --pgPercentage: var(--value); }
}

@property --pgPercentage {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

div[role="progressbar"] {
  --size: 10rem;
  --fg: #369;
  --bg: #def;
  --pgPercentage: var(--value);
  animation: growProgressBar 1s linear ease-in-out;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border-color: #1570ef;
  display: grid;
  color: #1570ef;
  place-items: center;
  background: 
    radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
    conic-gradient(var(--fg) calc(var(--pgPercentage,0) * 1%), var(--bg) 0)
    ;
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--size) / 5);
  color: var(--fg);
}


 @media print {
	body * {
		display: none;
	}
	.container {
		display: block !important;
	}
}

div[role="progressbar"]::before {
  counter-reset: percentage var(--value, 0);
  content: counter(percentage) ' Mbps';
  color: #1570ef;
}
@keyframes growProgressBar {
  to {
    --size: 16rem;
  }
}


#download {
	text-decoration: none;
	color: #7c2f8d;
}

.card{
	transition: transform 0.25s ease;
}
.card:hover{
	transform: scale(1.022);
}