a {cursor: pointer;}  .hover-shadow:hover{box-shadow: #868686 0 0 5px 1px;transition: .7s;}  .ltr {direction: ltr !important;}  .hidden{display: none;}  a, a:hover, a:active, a:focus {color: black;outline: none;text-decoration: none;}  .alert-info{background: #dec4ff;}  @media(max-width:2000px){  html {font-size:18px}}  @media(max-width:1024px){  html {font-size:16px}}  @media(max-width:768px){  html {font-size:15px}}  @media(max-width:425px){  html {font-size:14px}}  @media(max-width:300px){  html {font-size:12px}}  @font-face {  font-family: "Sans";  src: url('../font/IRANSansWeb(FaNum).woff2');  font-weight: normal;  font-style: normal;  }  html *{direction: rtl;font-family: "Sans", serif;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}  body {margin: 0!important;direction: rtl;font-family: "Sans", serif;}  .ltr{direction: ltr;}  .rtl{direction: rtl;}  .dir-auto{unicode-bidi: plaintext; /*For auto direction with bottom line*/text-align: start;}  .fs-7 {font-size: 0.8rem !important;}  .fs-8 {font-size: 0.6rem !important;}  .vertical-center {margin: 0;position: absolute;top: 50%;-ms-transform: translateY(-50%);transform: translateY(-50%);}  .text-justify{text-align: justify;}  .d-flow-root{display: flow-root;}  .w-min{width: max-content;}  h1, h2, h3, h4, h5{font-weight: 800;}  /*//// End added for complete bootstrap*/  :root {--primary-light: #8abdff;--primary: #6d5dfc;--primary-dark: #5b0eeb;--white: #ffffff;--greyLight-1: #e4ebf5;--greyLight-2: #c8d0e7;--greyLight-3: #bec8e4;--greyDark: #9baacf;}  body{background: var(--greyLight-1);}  .shadow{box-shadow: 0.8rem 0.8rem 1.4rem var(--greyLight-2), -0.2rem -0.2rem 1.8rem var(--white);}  .radius{border-radius: 3rem;}  .package{line-height: 200%;}  .search-input {width: 100%;height: 3rem;border: none;border-radius: 1rem;padding: 0.1rem 1rem;box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);background: none;font-family: inherit;color: var(--greyDark);}  .search-input:focus {outline: none;box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);}  input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}  input[type="number"] {-moz-appearance: textfield;}  .btn-primary {border: unset;background: unset;background: var(--primary);box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-light), inset -0.2rem -0.2rem 1rem var(--primary-dark), 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);color: var(--greyLight-1);font-weight: 600;}  .btn-primary:hover {background: var(--primary);color: var(--white);}  .btn-primary:active {box-shadow: inset 0.2rem 0.2rem 1rem var(--primary-dark), inset -0.2rem -0.2rem 1rem var(--primary-light);}  .btn-info{all: unset;border-radius: 1rem;box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);justify-self: center;display: flex;padding: .6rem;align-items: center;justify-content: center;cursor: pointer;transition: 0.3s ease;font-weight: 600;}  .btn-info:hover {background: none;transition: 0.7s;color: var(--primary-dark);}  .btn-info:active {background: none!important;box-shadow: inset 0.2rem 0.2rem 1rem var(--greyLight-1), inset -0.2rem -0.2rem 1rem var(--greyLight-2);}  .circle_bar{margin: 20px auto auto;}  @property --pgPercentage {  syntax: '<number>';  inherits: false;  initial-value: 0;  }  @property --maxValue {  syntax: '<number>';  inherits: false;  initial-value: 100;  }  @keyframes growProgressBar { 0%, 33% { --pgPercentage: 0; } 100% { --pgPercentage: var(--value); } }  div[role="progressbar"] {--size: 10rem;--fg: var(--primary-dark);--bg: var(--greyLight-2);--pgPercentage: var(--value);animation: growProgressBar 2s 1 forwards; /*animation-direction: reverse!important;*/width: var(--size);height: var(--size);border-radius: 50%;display: grid;place-items: center;background: radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0), conic-gradient(var(--bg) calc( 100% - (var(--pgPercentage) / var(--maxValue) * 100) * 1%), var(--fg) 0);font-family: "Sans", serif;font-size: calc(var(--size) / 5);color: var(--fg);}  div[role="progressbar"]::before {counter-reset: percentage var(--value);content: '#' counter(percentage);}  #days_bar{--fg: var(--primary);--bg: var(--greyLight-3);}  #days_bar::before {counter-reset: percentage var(--value);content: counter(percentage) 'روز';}  #uptime_bar{--fg: var(--primary);--bg: var(--greyLight-3);}  #uptime_bar::before {counter-reset: percentage var(--value);content: counter(percentage) '%';}  #bandwidth_bar::before {counter-reset: percentage var(--value);content: counter(percentage) 'mbps';}  /* Loader */  #loader {overflow:hidden;position: relative;bottom:0; left:0; right:0;height: 4px;}  #loader:after {content: "";height: 8px;background: var(--primary-dark);position: absolute;animation: loader 2s;-webkit-animation: loader 2s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;transition-timing-function: linear;-webkit-transition-timing-function: linear;bottom: 0;left:0; width:100%;margin-left: 0;}  @-webkit-keyframes loader { 0% {transform: translateX(-100%);} 100% {transform: translateX(100%);} }  /*  PLAY BUTTON  */  .circle {grid-column: 2/3;grid-row: 4/6;width: 9rem;height: 100%;justify-self: center;border-radius: 1rem;display: grid;grid-template-rows: 1fr;justify-items: center;align-items: center;}  .circle__btn {grid-row: 1/2;grid-column: 1/2;width: 6rem;height: 6rem;display: flex;margin: 0.6rem;justify-content: center;align-items: center;border-radius: 50%;font-size: 3.2rem;color: var(--primary);z-index: 300;background: var(--greyLight-1);box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);cursor: pointer;position: relative;}  .circle__btn.shadow {box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);}  .circle__btn .play {position: absolute;opacity: 0;transition: all 0.2s linear;}  .circle__btn .play.visibility {opacity: 1;}  .circle__btn .pause {position: absolute;transition: all 0.2s linear;}  .circle__btn .pause.visibility {opacity: 0;}  .circle__back-1, .circle__back-2 {grid-row: 1/2;grid-column: 1/2;width: 6rem;height: 6rem;border-radius: 50%;filter: blur(1px);z-index: 100;}  .circle__back-1 {box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2), -0.4rem -0.4rem 0.8rem var(--white);background: linear-gradient(to bottom right, var(--greyLight-2) 0%, var(--white) 100%);-webkit-animation: waves 4s linear infinite;animation: waves 4s linear infinite;}  .circle__back-1.paused {-webkit-animation-play-state: paused;animation-play-state: paused;}  .circle__back-2 {box-shadow: 0.4rem 0.4rem 0.8rem var(--greyLight-2), -0.4rem -0.4rem 0.8rem var(--white);-webkit-animation: waves 4s linear 2s infinite;animation: waves 4s linear 2s infinite;}  .circle__back-2.paused {-webkit-animation-play-state: paused;animation-play-state: paused;}  @-webkit-keyframes waves { 0% {transform: scale(1);opacity: 1;} 50% {opacity: 1;} 100% {transform: scale(2);opacity: 0;} }  @keyframes waves { 0% {transform: scale(1);opacity: 1;} 50% {opacity: 1;} 100% {transform: scale(2);opacity: 0;} }  /*  CLOCK  */  .clock {grid-column: 2/3;grid-row: 1/3;width: 12rem;height: 12rem;justify-self: center;box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);border-radius: 50%;display: flex;justify-content: center;align-items: center;position: relative;}  .clock .hand {position: absolute;transform-origin: bottom;bottom: 6rem;border-radius: 0.2rem;z-index: 200;}  .clock .hours {width: 0.4rem;height: 3.2rem;background: var(--greyLight-3);}  .clock .minutes {width: 0.4rem;height: 4.6rem;background: var(--greyDark);}  .clock .seconds {width: 0.2rem;height: 5.2rem;background: var(--primary);}  .clock .point {position: absolute;width: 0.8rem;height: 0.8rem;border-radius: 50%;background: var(--primary);z-index: 300;}  .clock .marker {width: 95%;height: 95%;border-radius: 50%;position: relative;box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);}  .clock .marker::after {content: "";width: 60%;height: 60%;position: absolute;box-shadow: inset 1px 1px 1px var(--greyLight-2), inset -1px -1px 1px var(--white);border-radius: 50%;top: 20%;left: 20%;filter: blur(1px);}  .clock .marker__1, .clock .marker__2, .clock .marker__3, .clock .marker__4 {position: absolute;border-radius: 0.1rem;box-shadow: inset 1px 1px 1px var(--greyLight-2), inset -1px -1px 1px var(--white);}  .clock .marker__1, .clock .marker__2 {width: 0.2rem;height: 0.6rem;left: 5.6rem;}  .clock .marker__3, .clock .marker__4 {width: 0.6rem;height: 0.2rem;top: 5.6rem;}  .clock .marker__1 {top: 2%;}  .clock .marker__2 {top: 98%;transform: translateY(-0.6rem);}  .clock .marker__3 {left: 2%;}  .clock .marker__4 {left: 98%;transform: translateX(-0.6rem);}  /* /// */  .color-red{color: red;}  .color-blue{color: blue;}  .alert i.fa, .alert i.fab{min-width: 25px;}