:root {
  --white: #FFF;
  --white-100: #F2F2F2;
  --white-10: #FFFFFF10;
  --gray: #EFEFEF;
  --gray-100: #F7F9FB;
  --gray-300: #C8C8C8;
  --gray-400: #8D8D8D;
  --gray-500: #4F4F4F;
  --gray-600: #666C7B;
  --gray-700: #D9D9D9;
  --gray-800: #BEBEBE;
  --gray-900: #E0E0E0;
  --gray-1000: #E5E7EB;
  --gray-1100: #9E9E9E;
  --gray-1200: #E4E4E4;
  --gray-1300: #D5D5D5;
  --gray-1400: #DFDFDF;
  --gray-1500: #66667E;
  --gray-1600: #828282;
  --gray-1700: #A3AED0;
  --gray-1800: #475367;
  --gray-1900: #98A2B3;
  --gray-50: #7C7C7C50;
  --gray-20: #9BABC520;
  --cyan: rgba(93, 115, 153, 1);
  --blue: #0955E8;
  --blue-100: #0057FF;
  --blue-200: rgba(93, 115, 153, 1);
  --blue-300: #2736BD;
  --blue-400: #1E2CA6;
  --blue-500: #5D7399;
  --blue-600: #9BABC5;
  --blue-700: #2D68FF;
  --dark-blue: rgba(14, 14, 30, 1);
  --dark-blue-100: #191927;
  --dark-blue-300: #15151F;
  --dark-blue-400: #21212F;
  --dark-blue-500: #0A0A15;
  --dark-blue-600: #090914;
  --dark-blue-700: #171728;
  --dark-blue-800: #0E0E1E;
  --dark-blue-900: #181841;
  --dark-blue-80: #17172899;
  --loading: #191c2290;
  --black: #161627;
  --black-100: #171730;
  --black-200: #1D1D2B;
  --black-300: #303046;
  --black-400: #05040C;
  --black-500: #48576A;
  --red: #E34D4D;
  --red-100: #F13C3C;
  --red-200: #ED1316;
  --red-300: #FF6868;
  --green: #86FF68;
  --green-100: #3ED067;
  --green-200: #6CBC6E;
  --green-300: #08C552;
  --green-50: #3ED06750;
  --yellow: #FFDC81;
  --yellow-50: #E49C4650;
  --yellow-100: #F28F1E;
  --purple: #686EFF;
  --purple-100: #2B2B52;
  --purple-200: #8684C7;
  --dark-linear-gradient: linear-gradient(347deg, #0E0E1E -0.69%, #1C1C2F 95.7%);
  --blue-linear-gradient: linear-gradient(201deg, #0057FF -6.66%, #1850BC 101.08%);
  --barlow: "Barlow",
  sans-serif;
  --abel: "Abel",
  sans-serif;
  --inter: "Inter",
  sans-serif;
  --lato: "Lato",
  sans-serif;
  --jakarta: "Plus Jakarta Sans",
  sans-serif;
  --roboto: "Roboto",
  sans-serif;
  --poppins: "Poppins",
  sans-serif;
  --gilroy: "gilroy-medium",
  sans-serif;
  --roobert: "roobert-regular",
  sans-serif;
  --dm:"DM Sans",
  sans-serif;
}
@font-face {
  font-family: "gilroy-medium";
  src: url("/static/fonts/Gilroy-Medium.ttf");
}
@font-face {
  font-family: "roobert-regular";
  src: url("/static/fonts/Roobert-Regular.ttf");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--black-100);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

.pagination-area {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}
.pagination-area .arrow {
  line-height: 1;
  cursor: pointer;
}
.pagination-area .pages {
  display: flex;
  gap: 14px;
  align-items: center;
  color: var(--white);
}
.pagination-area .pages .page-num {
  cursor: pointer;
  line-height: 1;
  font-family: var(--poppins);
  width: 24px;
  height: 24px;
  border-radius: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination-area .pages .page-num.active {
  background-color: var(--dark-blue-800);
}

.wrapper {
  display: flex;
  padding-top: 20px;
  max-width: 100dvw;
}
.wrapper .logout-menu {
  font-family: var(--jakarta);
  padding: 10px;
  position: fixed;
  bottom: 45px;
  cursor: pointer;
  display: none;
  left: 270px;
  z-index: 3;
  background-color: var(--white);
  border-radius: 4px;
  align-items: center;
  gap: 14px;
}
.wrapper .logout-menu.block {
  display: flex;
}
.wrapper .logout-menu .logout {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--inter);
}
.wrapper .rank {
  z-index: 10;
  display: none;
  font-family: var(--jakarta);
  padding: 10px;
  position: fixed;
  bottom: 25px;
  left: 275px;
  background-color: var(--dark-blue-100);
  border-radius: 4px;
}
.wrapper .rank.block {
  display: block;
}
.wrapper .rank .close {
  margin-left: auto;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
}
.wrapper .rank .close img {
  width: 14px;
}
.wrapper .rank .top-three {
  width: -moz-max-content;
  width: max-content;
  display: flex;
  gap: 16px;
  padding: 0 20px;
}
.wrapper .rank .top-three .top-three-person {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wrapper .rank .top-three .top-three-person:nth-child(2n) .img-area-wrapper {
  position: relative;
  margin-bottom: 10px;
}
.wrapper .rank .top-three .top-three-person:nth-child(2n) .img-area-wrapper .profile-rank {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translate(-50%);
  background-color: var(--blue);
  line-height: 1;
  padding: 1px 8px;
  border-radius: 4px;
  font-family: var(--inter);
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  z-index: 2;
}
.wrapper .rank .top-three .top-three-person:nth-child(2n) .img-area-wrapper .img-area {
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--blue);
}
.wrapper .rank .top-three .top-three-person:nth-child(2n) .img-area-wrapper .img-area img {
  width: 85px;
  height: 85px;
}
.wrapper .rank .top-three .top-three-person:not(:nth-child(2n)) {
  margin-top: 18px;
}
.wrapper .rank .top-three .top-three-person:not(:nth-child(2n)) .img-area-wrapper {
  position: relative;
  margin-bottom: 10px;
}
.wrapper .rank .top-three .top-three-person:not(:nth-child(2n)) .img-area-wrapper .profile-rank {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translate(-50%);
  background-color: var(--blue);
  line-height: 1;
  padding: 1px 8px;
  border-radius: 4px;
  font-family: var(--inter);
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  z-index: 2;
}
.wrapper .rank .top-three .top-three-person:not(:nth-child(2n)) .img-area-wrapper .img-area {
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--blue);
}
.wrapper .rank .top-three .top-three-person:not(:nth-child(2n)) .img-area-wrapper .img-area img {
  width: 80px;
  height: 80px;
}
.wrapper .rank .top-three .top-three-person .name {
  color: var(--white);
  font-size: 14px;
  margin-bottom: 2px;
  font-weight: 700;
}
.wrapper .rank .top-three .top-three-person .pts-area {
  display: flex;
  align-items: center;
}
.wrapper .rank .top-three .top-three-person .pts-area .pts {
  color: var(--white);
  margin-left: 3px;
  font-size: 12px;
}
.wrapper .rank .top-three .top-three-person .pts-area .icon {
  line-height: 0;
}
.wrapper .rank .top-three .top-three-person .pts-area .icon img {
  width: 16px;
  height: 12px;
}
.wrapper .rank .rank-list {
  margin-top: 14px;
  max-height: 205px;
  overflow: auto;
}
.wrapper .rank .rank-list::-webkit-scrollbar {
  width: 6px;
  border-radius: 24px;
  background: var(--gray-700);
}
.wrapper .rank .rank-list::-webkit-scrollbar-thumb {
  background: var(--gray-800);
  border-radius: 24px;
}
.wrapper .rank .rank-list .list-item {
  display: flex;
  align-items: center;
  padding: 4px 6px 4px 8px;
  font-size: 14px;
  font-weight: 700;
  background-color: var(--dark-blue);
  border-radius: 4px;
  color: var(--gray-500);
}
.wrapper .rank .rank-list .list-item:not(:last-child) {
  margin-bottom: 4px;
}
.wrapper .rank .rank-list .list-item .pic {
  padding: 0 12px;
  width: -moz-fit-content;
  width: fit-content;
  height: 40px;
  clip-path: circle();
}
.wrapper .rank .rank-list .list-item .pic .your-pic {
  border-radius: 50%;
  border: 2px solid var(--white);
}
.wrapper .rank .rank-list .list-item .pts-area {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.wrapper .rank .rank-list .list-item .pts-area .pts {
  margin-right: 8px;
}
.wrapper .rank .rank-list .list-item.you {
  color: var(--white);
  background-color: var(--blue);
}
.wrapper .rank .rank-list .list-item.you .pts-area .icon svg path {
  stroke: var(--white);
}
.wrapper .sidebar {
  position: fixed;
  border-radius: 10px;
  z-index: 9;
  top: 18px;
  bottom: 18px;
  left: 14px;
  width: 250px;
  padding: 14px 14px 10px;
  background-color: var(--dark-blue);
  display: flex;
  flex-direction: column;
  overflow: auto;
  transition: width 500ms ease-in-out;
}
.wrapper .sidebar.closed {
  width: 76px;
  align-items: center;
}
.wrapper .sidebar.closed .expand-area {
  width: -moz-fit-content;
  width: fit-content;
}
.wrapper .sidebar.closed .expand-area .logo {
  display: none;
}
.wrapper .sidebar.closed .sidebar-menu {
  width: -moz-fit-content;
  width: fit-content;
}
.wrapper .sidebar.closed .sidebar-menu ul {
  padding: unset;
  width: -moz-fit-content;
  width: fit-content;
}
.wrapper .sidebar.closed .sidebar-menu ul li {
  padding: 16px 12px;
}
.wrapper .sidebar.closed .sidebar-menu ul li .desc {
  display: none;
}
.wrapper .sidebar.closed .control-area {
  padding: unset;
  width: -moz-fit-content;
  width: fit-content;
}
.wrapper .sidebar.closed .control-area .control {
  padding: 16px 12px !important;
  width: -moz-fit-content;
  width: fit-content;
}
.wrapper .sidebar.closed .control-area .control .desc,
.wrapper .sidebar.closed .control-area .control .notifications {
  display: none;
  text-decoration: none;
}
.wrapper .sidebar.closed .profile-area {
  border-radius: 10px;
  padding: 24px 0;
  background: none;
  position: relative;
}
.wrapper .sidebar.closed .profile-area .identity,
.wrapper .sidebar.closed .profile-area .more {
  display: none;
}
.wrapper .sidebar .expand-area {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.wrapper .sidebar .expand-area .expand-btn {
  width: 100%;
}
.wrapper .sidebar .expand-area .expand-btn img {
  float: right;
  cursor: pointer;
}
.wrapper .sidebar .expand-area.shrink {
  display: block !important;
}
.wrapper .sidebar .expand-area.shrink .expand-btn {
  display: block !important;
}
.wrapper .sidebar .expand-area.shrink .expand-btn img {
  display: block !important;
}
.wrapper .sidebar .sidebar-menu {
  flex: 1;
}
.wrapper .sidebar .sidebar-menu a {
  text-decoration: none;
}
.wrapper .sidebar .sidebar-menu ul {
  list-style-type: none;
  padding-left: 0;
}
.wrapper .sidebar .sidebar-menu ul li {
  padding: 16px 12px;
  align-items: center;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.wrapper .sidebar .sidebar-menu ul li:hover {
  background-color: rgb(33, 33, 47);
}
.wrapper .sidebar .sidebar-menu ul li:hover .desc {
  color: rgba(255, 255, 255, 0.8) !important;
}
.wrapper .sidebar .sidebar-menu ul li img {
  width: 20px;
  height: 20px;
}
.wrapper .sidebar .sidebar-menu ul li .desc {
  font-size: 13px;
  font-style: unset;
  font-family: var(--barlow);
  font-weight: 600;
  color: var(--gray-1100);
  line-height: normal;
  margin-left: 8px;
}
.wrapper .sidebar .tabs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.wrapper .sidebar .tabs .tab {
  background-color: var(--white);
  padding: 14px;
  border-radius: 4px;
  font-family: var(--inter);
  font-weight: 600;
  color: var(--dark-blue-400);
}
.wrapper .sidebar .tabs .tab.desc {
  padding-right: 24px;
}
.wrapper .sidebar .control-area a {
  text-decoration: none;
}
.wrapper .sidebar .control-area .control {
  padding: 16px 12px;
  display: flex;
  align-items: center;
  border-radius: 10px;
}
.wrapper .sidebar .control-area .control:hover {
  background-color: rgb(33, 33, 47);
}
.wrapper .sidebar .control-area .control .desc {
  font-size: 13px;
  font-family: var(--barlow);
  font-weight: 600;
  color: var(--gray-1100);
  line-height: 1;
  margin-left: 8px;
}
.wrapper .sidebar .control-area .control .notifications {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--barlow);
  font-weight: 600;
  color: var(--white);
  font-size: 12px;
  margin-left: auto;
  padding: 4px 8px;
  background-color: var(--dark-blue-100);
  position: relative;
  text-align: center;
  &.active{
    position: relative;
    &::before{
      content: "";
      position: absolute;
      border-radius: 50%;
      width: 8px;
      height: 8px;
      background-color: red;
      top: -2px;
      left: -2px;
    }
  }
}
.wrapper .sidebar .control-area .control img {
  width: 20px;
}
.wrapper .sidebar .profile-area {
  padding: 24px 12px;
  display: flex;
  align-items: center;
  background-color: var(--dark-blue-100);
  position: relative;
  margin-top: 10px;
}
.wrapper .sidebar .profile-area .pic-wrapper {
  position: relative;
}
.wrapper .sidebar .profile-area .pic-wrapper::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  top: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  background-color: var(--yellow);
}
.wrapper .sidebar .profile-area .pic-wrapper .profile-pic {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
.wrapper .sidebar .profile-area .pic-wrapper .profile-pic img {
  width: 40px;
  height: 40px;
}
.wrapper .sidebar .profile-area .identity {
  font-family: var(--inter);
  font-weight: 600;
  margin-left: 8px;
}
.wrapper .sidebar .profile-area .identity .name {
  color: var(--white);
  font-size: 13px;
  font-family: var(--barlow);
}
.wrapper .sidebar .profile-area .identity .email {
  color: var(--white-100);
  font-size: 12px;
}
.wrapper .sidebar .profile-area .more {
  margin-left: auto;
}
.wrapper .sidebar .profile-area .more .show {
  background-color: red;
}
.wrapper .sidebar .profile-area .more .logout {
  background: red;
}

.radio-container {
  display: block;
  position: relative;
  line-height: 1;
  padding-left: 35px;
  margin-bottom: 12px;
  font-family: var(--roboto);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.switch-area {
  display: flex;
  gap: 100px;
}
.switch-area .form-check {
  padding: unset !important;
  margin: unset !important;
}
.switch-area .form-check .two-dimension {
  margin-right: 3em;
}
.switch-area .form-check .three-dimension {
  margin-left: 10px;
}

.radio-check-area {
  height: 24px;
  padding: 12px 48px 32px 16px;
}
.radio-check-area:not(:last-child) {
  border-bottom: 1px solid var(--gray-1400);
}

.checkmark {
  position: absolute;
  top: -2px;
  left: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 2px solid black;
}

.radio-container input:checked ~ .checkmark {
  border: 2px solid black;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.radio-container input:checked ~ .checkmark:after {
  display: block;
}

.radio-container .checkmark:after {
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: black;
}

.page-header {
  margin: 0 0 10px 0;
  position: relative;
  padding: 10px 30px 10px 0;
  color: rgb(255, 255, 255);
}
.page-header::before {
  content: "";
  position: absolute;
  width: 200vw;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
}
.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4,
.page-header h5,
.page-header h6 {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 1px;
}

.notification-detail {
  background-color: var(--dark-blue-100);
  position: fixed;
  width: 280px;
  left: 0;
  top: 0;
  z-index: 99999;
  padding: 10px;
  border-radius: 5px;
  font-size: 12px;
  display: none;
  max-height: 210px;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    border-radius: 24px;
    background: var(--gray-700);
  }
  &::-webkit-scrollbar-thumb {
    background: var(--gray-800);
    border-radius: 24px;
  }
}
.notification-detail .sidebar-noti {
  background-color: rgba(255, 255, 255, .1);
  color: var(--white);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  margin-bottom: 5px;
  position: relative;
  cursor: pointer;
  &.active{
    &::after{
      content: "";
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: red;
      top: -3px;
      left: -3px;
      z-index: 999999;
    }
  }
}
.notification-detail .sidebar-noti:hover {
  background-color: var(--dark-blue);
  color: #eee;
}
.notification-detail .sidebar-noti.view-all {
  background-color: var(--dark-blue);
  color: #eee;
  display: block;
  padding: 3px;
  border-radius: 3px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}
.notification-detail .sidebar-noti.view-all:hover {
  background-color: rgba(14, 14, 30, 0.9);
}

div:where(.swal2-container) div:where(.swal2-popup) {
  width: auto !important;
  font-size: 12px !important;
  padding: 10px 50px !important;
}

h2.swal2-title {
  font-size: 20px !important;
  font-weight: 500 !important;
}

.header-input {
  color: rgb(255, 255, 255);
  font-size: 13px;
}
.header-input:focus {
  outline: none;
}
.header-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.header-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

aside.sidebar.closed .notifications {
  display: none !important;
}/*# sourceMappingURL=style.css.map */