@import url(./responsive.css);




/* =====  Root Variable  ===== */

:root {
  --white-color: #fff;
  --sidebar-bg-color: #f8faff;
  --black-color: #000;
  --bg-color: #dbe6fc;
  --text-color: #B9C0DE;
  --red-color: #FF1010;
  --nav-color: #1657FF;
}



/* =====  SF Font Family  ===== */


@font-face {
  font-family: "sf-light";
  src: url(../fonts/sf/sf-light.otf);
}

@font-face {
  font-family: "sf-regular";
  src: url(../fonts/sf/sf-regular.otf);
}

@font-face {
  font-family: "sf-medium";
  src: url(../fonts/sf/sf-medium.otf);
}

@font-face {
  font-family: "sf-semiBold";
  src: url(../fonts/sf/sf-semibold.otf);
}

@font-face {
  font-family: "sf-bold";
  src: url(../fonts/sf/sf-bold.otf);
}

body {
  font-family: "sf-regular";
}

.main {
  background-color: var(--bg-color);
}


/*=====  Start Sidebar Section  =====*/

.menuBar {
  background-color: transparent;
  position: absolute;
  top: 25px;
  left: 25px;
  font-size: 25px;
  cursor: pointer;
  color: #3c3f88;
}

.sidebar {
  background-color: var(--sidebar-bg-color);
  z-index: 10000;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.activeMenu {
  display: block;
}

nav div {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
  cursor: pointer;
  padding: 16px 0px 16px 18px;
  position: relative;
}

nav div::after {
  content: "";
  transition: all 0.1s;
  position: absolute;
  top: 12px;
  bottom: 0;
  right: 0;
  height: 30px;
}

nav div:hover::after {
  border: 3px solid #1657FF;
  box-shadow: -2px 0px 10px 2px #0037ff56;
  border-radius: 50px;
}

.activeDiv {
  background-color: #E9EFFF;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.activeDiv::after {
  content: "";
  border: 3px solid #1657FF;
  position: absolute;
  top: 12px;
  bottom: 0;
  right: 0;
  height: 30px;
  box-shadow: -2px 0px 10px 2px #0037ff56;
  border-radius: 50px;
}

.activeDiv svg {
  fill: #1657FF;
}

.activeDiv p {
  color: #1657FF;
}

nav div:hover {
  /* border-right: 5px solid var(--nav-color); */
  background-color: #E9EFFF;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

nav div:hover>svg {
  fill: #1657FF;
}

nav div:hover>p {
  color: #1657FF;
}

nav div svg {
  transition: all 0.3s;
}

nav p {
  margin-bottom: 0;
  color: var(--text-color);
  font-size: 15px;
  letter-spacing: 1px;
  transition: all 0.3s;
}

nav p:hover {
  color: var(--nav-color);
}

nav img {
  cursor: pointer;
}

.live {
  font-family: "sf-semiBold";
  font-size: 8px;
  letter-spacing: 0.5px;
  color: var(--white-color);
  background-color: var(--red-color);
  border-radius: 5px;
  padding: 3px 6px;
}

.upgrade-btn {
  transition: all 0.3s;
}

.upgrade-btn:hover {
  background-color: #103aa5;
}

/*=====  End Sidebar Section  =====*/



/*=====  Start Notification Section  =====*/

.activeSearch {
  display: none;
}

.imgPickerDP {
  width: -webkit-fill-available;
}

/*=====  End Notification Section  =====*/



/*=====  Start Statistic Section  =====*/

#chartContainer {
  position: relative;
  width: 200px;
  height: 200px;
}

#chartCenterTitle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  font-size: 24px;
  font-weight: bold;
  color: #000;
  z-index: 10;
}

#chartCenterPercent {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #a0b0d0;
  z-index: 10;
}

.legend {
  margin-top: 13px;
  display: flex;
  gap: 35px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.color-box {
  width: 10px;
  height: 10px;
}

.match-inside-div {
  display: flex;
  align-items: center;
  gap: 40px;
}

/*=====  End Statistic Section  =====*/



/* =====  Start Scrollbar Section  ===== */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #dbe6fc;
}

::-webkit-scrollbar-thumb {
  background-color: #534aa4;
  border-radius: 50px;
  height: 80px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #332a7c;
}

/* =====  End Scrollbar Section  ===== */