/* ==== Globals ==== */
:root {
  font-family: iransansx;
  --green: #167dae;
  --yellow: #ffcc29;
  --black: #000000;
  --lightgreen1: #e8ffd6;
  --lightgreen2: #f4faee;
  --lightyellow: #1e3163;
  --silver: #f0f0f0;
  --white70: rgba(255, 255, 255, 0.5);
  --shadow: rgb(0 0 0 / 26%) 0px 2px 12px 1px;
}

@font-face {
  font-family: iransans;
  src: url("../fonts/IRANSans\(FaNum\).ttf");
}

body,
h1,
p {
  margin: 0;
  padding: 0;
}

select,
input {
  background: unset;
  outline: none;
}

select {
  cursor: pointer;
}

button {
  transition: 0.5s;
}

footer {
  background-color: var(--lightgreen2);
}

.text-shadow {
  text-shadow: 2px 2px 10px black;
}

/* cusom scroll bar */

/* width */
::-webkit-scrollbar {
  width: 7px;
  padding: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
  float: right;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--green);
  cursor: pointer;
}

.scrollbar-2px ::-webkit-scrollbar {
  width: 2px !important;
  height: 2px;
}

/* ==== Individuals ==== */
.wrapper {
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  text-align: center;
  overflow: hidden;
}

.navbar-div {
  padding: 2rem;
  transition: 0.3s;
}
.navbar-div.scrolled {
  backdrop-filter: blur(6px);
  background-color: rgba(0, 0, 0, 0.3);
  padding: 1rem;
}

.menu li {
  position: relative;
  transition: 0.5s;
}

.menu li:not(.navbar-logo):after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin-top: 2px;
  position: absolute;
  background-color: white;
  transition: 0.5s;
}

.menu li:hover:after,
.menu li.current::after {
  width: 100%;
}

.bf-btn {
  background-color: var(--green);
  padding: 7px;
  color: white;
  border-radius: 4px;
  transition: 0.5s;
  font-size: 14px;
  cursor: pointer;
}

.bf-btn:hover {
  box-shadow: var(--shadow);
}

.selected-page-number {
  background-color: var(--green) !important;
  color: white !important;
}

.next-page-btn.disabled,
.prev-page-btn.disabled {
  background-color: white;
  color: var(--green);
  stroke: var(--green);
  border: solid var(--green) 1px;
  cursor: not-allowed;
}

.footer-list-link {
  font-size: 14px;
}
.footer-list-link:hover{
color: var(--green);
}

.active-tab {
  background-color: var(--lightgreen2);
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical > .swiper-pagination-bullets {
  left: 20px;
  right: unset;
}

.swiper-pagination-bullet {
  background-color: white;
  padding: 10px;
}

.swiper-pagination-bullet-active {
  background-color: var(--green);
}

.pagination a.active {
  background-color: var(--green);
  color: white;
}

.stat {
  position: relative;
  width: 200px;
  height: 130px;
  cursor: pointer;
}

.stat span:has([data-count]) {
  color: var(--green);
}

.stat.active span:has([data-count]) {
  color: white;
}

.stat.active {
  background-color: var(--green);
  color: white !important;
  stroke: white;
  scale: 1.3;
  z-index: 10;
}

/* Map Styles */
.continent {
  transition: 0.5s;
  cursor: pointer;
  fill: var(--green);
}

.continent.active {
  margin: 10px;
  scale: 0.99;
  fill: var(--yellow);
  filter: drop-shadow(3px 3px 0px #ebbc25) drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

/* user panel */

.user-panel side-bar svg {
  fill: white;
  transition: 0.5s;
}

.user-panel side-bar ul a {
  padding: 5px;
  border-radius: 10px;
  transition: 0.5s;
}

.user-panel side-bar ul a:hover,
.user-panel side-bar ul a.active {
  background: white;
  color: var(--green);
}
.user-panel side-bar ul a:hover svg,
.user-panel side-bar ul a.active svg {
  fill: var(--green);
}

.user-panel [form-view] svg {
  stroke: var(--green) !important;
  fill: var(--green) !important;
}