* {
  box-sizing: border-box;

  margin: 0;

  padding: 0;
}

img {
  width: 100%;

  pointer-events: none;

  user-select: none;
}

ul {
  list-style-type: none;
}

h1 {
  font-size: clamp(1.9rem, 2vw, 3rem);

  opacity: 0;

  animation: title 1.1s ease 0.3s 1 normal forwards;
}

@keyframes title {
  0% {
    opacity: 0;

    color: #ebeeff;
  }

  100% {
    opacity: 1;

    letter-spacing: 0;

    color: #fff;
  }
}

.hidden {
  display: none;
}

@font-face {
  font-family: iran-sanse;

  src: url(../fonts/farsi-fonts/woff/iransansx-medium.woff);
}

html,
body {
  position: relative;

  height: 100vh;

  width: 100%;

  /* background-image: url(../images/patternDashbord.jpg); */

  /* background-repeat: no-repeat; */

  /* background-size: cover; */

  font-family: 'iran-sanse', sans-serif;
}

.fs-md {
  font-size: 14px !important;
}

.fs-sm {
  font-size: 12px !important;
}

section {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

/* ------------ */

/* ICON STYLES */

.icon-container {
  position: absolute;
  bottom: 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  padding: 10px 30px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 12px;
  z-index: 1;
}

.icon-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  aspect-ratio: 1/1;
  color: #777;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #777;
}


.icon-box:hover {
  transform: scale(1.1);
  border: 1px solid #f1f1f1;
  color: #f1f1f1;
}

/* .about {
  background: rgb(182, 164, 248);

  background: linear-gradient(30deg, rgb(182, 164, 248) 0%, rgb(75, 52, 159) 70%);
}

.testimonial {
  background-color: #f6c66e;

  background-image: linear-gradient(30deg, #f6c66e 0%, rgb(168, 78, 22) 100%);
}

.projects {
  background: rgb(169, 207, 124);

  background: linear-gradient(310deg, rgb(169, 207, 124) 0%, rgb(77, 120, 31) 60%);
}

.game {
  background-color: rgb(224, 129, 157);

  background-image: linear-gradient(340deg, rgb(243, 151, 178) 0%, rgb(147, 20, 58) 100%);
}

.contact {
  background-color: rgb(70, 204, 206);

  background-image: linear-gradient(340deg, rgb(70, 204, 206) 0%, rgb(1, 84, 148) 100%);
}

.dashboard {
  background-color: rgb(120, 125, 125);

  background-image: linear-gradient(340deg, rgb(120, 125, 125) 0%, rgb(32, 41, 41) 100%);
} */

.dashboard-container iframe {
  display: block;
  width: 99%;
  height: 98%;
  margin: 6px auto;
  border-radius: 10px;
}

/* ------- */

/* POPUP */

body.prevent-background-scroll {
  min-height: 100dvh;

  overflow-y: hidden;
}

.prevent-scroll {
  overflow: hidden;
}

.popup {
  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);

  z-index: 20;

  animation: openPopup 0.6s ease-in-out 1 normal;
}

@keyframes openPopup {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.popup-container {
  position: absolute;

  top: 45%;

  left: 50%;

  transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  width: min(900px, 90%);

  background: rgba(133, 133, 133, 0.2);

  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  border: 1px solid rgba(255, 255, 255, 0.6);

  border-radius: 12px;

  color: #fff;

  z-index: 30;

  transition: all 0.5s ease-in-out;
}
.popup-container-medium {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 75%;
  height: 75vh;
  background: rgba(133, 133, 133, 0.2);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  color: #fff;
  z-index: 30;
  transition: all 0.5s ease-in-out;
}
.popup-container-medium-calendar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: min(1000px, 90%);
  background: rgba(133, 133, 133, 0.2);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  color: #fff;
  z-index: 30;
  transition: all 0.5s ease-in-out;
}
.popup-container-big {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 98%;
  height: 98vh;
  background: rgba(133, 133, 133, 0.2);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  color: #fff;
  z-index: 30;
  transition: all 0.5s ease-in-out;
}
/* todolist Style */
.todoListStyle {
  left: unset !important;
  right: 0 !important;
}

.popup-login__container {
  width: min(500px, 90%);
}

.header-logo {
  width: 75px;
}

.dashboard-container {
  width: 95vw;
  height: 90vh;
  top: 50%;
}

.popup-header {
  position: relative;

  display: flex;

  gap: 8px;

  font-weight: 600;

  padding: 15px 20px 10px;

  font-size: 1.2rem;
}

.popup-body {
  color: #f7f7f7;

  height: 70vh;

  overflow-y: auto;

  overflow-x: hidden;

  padding: 30px 50px;
}

.popup-body-chat {
  color: #f7f7f7;

  height: 70vh !important;

  overflow-y: auto;

  overflow-x: hidden;

  padding: 30px 50px;
}
.popup-body-big {
  color: #f7f7f7;

  height: 95% !important;

  overflow-y: auto;

  overflow-x: hidden;

  padding: 30px 50px;
}

.popup.maximized .popup-body {
  height: 100vh;
}

.button-container {
  display: flex;

  align-items: center;

  column-gap: 8px;
}

.circle-btn {
  display: flex;

  justify-content: center;

  align-items: center;

  width: 16px;

  aspect-ratio: 1/1;

  border-radius: 50%;

  border: 0;

  outline: 0;

  cursor: pointer;

  transform: scale(1);

  transition: all 0.2s;
}

.circle-btn i {
  opacity: 0;

  transition: all 0.2s;

  font-size: 0.5rem;

  color: rgb(65, 66, 67);
}

.circle-btn:hover {
  opacity: 1;

  transform: scale(1.03);
}

.button-container:hover i {
  opacity: 1;
}

/* .button-container:hover i:hover,

  .button-container:hover i:hover:nth-child(2),

  .button-container:hover i:hover:nth-child(3) {

    opacity: 1;

  } */

.red {
  background-color: rgb(255, 96, 92);
}

.red i {
  font-size: 0.8rem;
}

.yellow {
  background-color: rgb(255, 189, 68);
}

.yellow i {
  transform: translateY(-3px);
}

.green {
  background-color: rgb(0, 202, 78);
}

.green i {
  transform: rotate(90deg);
}

/* --------- */

/* SCROLLBAR */

.popup-body::-webkit-scrollbar, .notifications-list::-webkit-scrollbar {
  width: 0.7rem !important;
}

.popup-body::-webkit-scrollbar-track, .notifications-list::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.375rem rgb(79, 78, 78) !important;
  border-radius: 0.8rem !important;
}

.popup-body::-webkit-scrollbar-thumb, .notifications-list::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0.375rem rgba(238, 238, 238, 0.9) !important;
  outline: none !important;
  border-radius: 0.8rem !important;
}



.scrollbar {
  scrollbar-color: rgba(0,0,0,0.4) transparent;
  scrollbar-width: thin;
}

/* ------ */

/* ABOUT */

.about-container {
  display: grid;

  grid-template-columns: 40% 50%;

  gap: 30px;

  place-items: center;
}

.about-container h1 {
  margin-bottom: 20px;

  line-height: 1.4;
}

.about-container p {
  line-height: 1.6;

  font-size: 1.1rem;
}

.about-container .img-frame {
  overflow: hidden;
  width: 250px;
  border-radius: 8px;
  box-shadow:
    rgba(62, 63, 168, 0.8) 0px 10px 30px 8px,
    rgba(62, 63, 168, 0.8) 0px 0px 0px 2px;
  position: relative;
  height: 250px;
}

.about-container .img-frame img {
  aspect-ratio: 6/7;
  object-fit: cover;
  transition: transform 1s;
}

.about-container .img-frame:hover img {
  transform: rotate(4deg) scale(1.25);
}

/* ------- */

/* SKILLS */

.skill-list {
  display: flex;

  flex-direction: column;

  margin-bottom: 40px;
}

.skill-list h1 {
  text-align: center;

  margin-bottom: 30px;
}

.skill-list ul {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 12px;

  width: min(100%, 400px);

  margin: 0 auto;
}

.skill-list ul li {
  font-size: 1rem;

  font-weight: 500;

  border-radius: 5px;

  background: linear-gradient(130deg, rgba(162, 234, 55, 0.7) 0%, rgba(46, 152, 74, 0.5) 100%);

  backdrop-filter: blur(30px);

  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

  padding: 8px 12px;
}

/* --------- */

/* PROJECTS */

.project-container h1 {
  text-align: center;

  animation-delay: 0.8s;

  margin: 20px 0;
}

.all-projects {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  place-items: center;

  gap: 30px;

  padding: 30px;
}

.all-projects img {
  width: 100% !important;
  height: 100% !important;
  margin-right: -30px !important;
  margin-top: 0px !important;
  object-fit: fill;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
}

.project-box {
  position: relative;
}

.overlay {
  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  background: rgba(0, 0, 0, 0.5);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border-radius: 12px;

  list-style: none;

  z-index: 1;

  opacity: 0;

  transition: all 0.4s ease-in-out;
}

.overlay:hover {
  opacity: 1;

  backdrop-filter: blur(2px);
}

.overlay h3,
.overlay button {
  opacity: 0;

  transform: translateY(-100%);

  -webkit-transform: translateY(-100%);

  transition: all 0.25s ease;

  -webkit-transition: all 0.25s ease;
}

.overlay:hover h3,
.overlay:hover button {
  transform: translateY(0);

  -webkit-transform: translateY(0);

  opacity: 1;
}

.overlay:hover h3 {
  transition-delay: 0.3s;

  -webkit-transition-delay: 0.3s;
}

.overlay:hover button {
  transition-delay: 0.5s;

  -webkit-transition-delay: 0.5s;
}

.more-btn {
  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 8px 16px;

  border: 1px solid #fff;

  background-color: transparent;

  margin-top: 20px;

  cursor: pointer;
}

.more-btn::before {
  position: absolute;

  content: '';

  bottom: 0;

  left: 0;

  width: 100%;

  height: 0;

  background-color: #fff;

  z-index: -1;

  transition: all 0.4s;
}

.more-btn:hover::before {
  height: 100%;

  top: 0;
}

.more-btn span {
  color: #fff;

  line-height: 1;

  transition: color 0.4s;
}

.more-btn:hover span {
  color: #000;
}

/* ------------- */

/* TESTIMONIALS */

.testimonial-container h1 {
  text-align: center;

  margin-bottom: 40px;

  user-select: none;
}

.slider-container {
  width: 100%;

  position: absolute;

  top: 60%;

  left: 50%;

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);
}

.swiper {
  width: 94%;

  height: 100%;

  padding: 5px 0;
}

.swiper-slide {
  width: 260px;

  height: 250px;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);

  background: rgba(104, 104, 104, 0.5);

  color: #fff;

  outline: 0 solid rgba(225, 193, 88, 0.8);

  border-radius: 15px;

  padding: 20px 30px;

  margin-bottom: 16px;

  cursor: grab;

  user-select: none;

  transition: outline 0.3s linear;
}

.swiper-slide:hover {
  outline: 1px solid rgba(225, 193, 88, 0.8);
}

.user-info {
  display: flex;

  align-items: center;

  column-gap: 20px;
}

.user-info img {
  max-width: 50px;

  aspect-ratio: 1/1;

  border-radius: 50%;

  object-fit: cover;

  margin-bottom: 20px;

  box-shadow:
    rgba(225, 193, 88, 0.8) 0px 10px 30px 0px,
    rgba(225, 193, 88, 0.8) 0px 0px 0px 2px;
}

.user-info h2 {
  font-size: 1.1rem;

  transform: translateY(-5px);
}

.swiper-slide p {
  font-size: 1rem;

  font-weight: 400;

  margin-top: 12px;
}

/* Control Buttons */

.control {
  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

  list-style: none;

  gap: 6px;

  margin-top: 16px;
}

.control li {
  display: flex;

  justify-content: center;

  align-items: center;

  background: rgba(237, 223, 36, 0.8);

  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.4),
    inset 0px 4px 4px rgba(255, 255, 255, 0.2);

  padding: 10px;

  margin: 3px;

  border-radius: 50%;

  cursor: pointer;

  transform: scale(1);

  transition: all 0.4s ease-in;
}

.control li:hover {
  background: rgba(224, 198, 26, 0.8);

  transform: scale(0.98);
}

.arrow {
  font-size: 1.8rem;

  color: #fff;
}

/* -------- */

/* CONTACT */

.contact-container {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  padding: 30px 0;
}

.contact-container h1,
.contact-container p {
  text-align: center;

  margin-bottom: 16px;
}

.contact-container p {
  font-size: 1rem;

  margin-bottom: 30px;
}

form {
  width: min(650px, 95%);
}

.bg-app {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.submit-btn {
  padding: 12px 20px;

  font-size: 1.1rem;

  margin: 10px auto 0;
}

.submit-btn span {
  display: flex;

  gap: 10px;
}

@media (max-width: 900px) {
  .popup-body {
    padding: 30px;
  }
}

@media (max-width: 750px) {
  .about-container {
    grid-template-columns: 1fr;

    grid-template-rows: 1fr 4fr;

    grid-template-areas:
      'img-frame'
      'hero-content';

    padding: 160px 30px 50px;
  }

  .about-container .img-frame {
    grid-area: img-frame;

    width: 230px;

    aspect-ratio: 1/1;
  }

  .hero-content {
    grid-area: hero-content;

    margin-top: 110px;

    text-align: center;
  }

  .about-container h1 {
    margin-bottom: 16px;
  }
}

@media (max-width: 600px) {

  .user-info h2 {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .about-container .img-frame {
    grid-area: img-frame;

    width: 180px;

    aspect-ratio: 1/1;
  }

  .all-projects img {
    height: 180px;
  }
}

#audio-player {
  position: absolute;

  bottom: 20px;

  right: 20px;
}

:root {
  --tagcloud-transition-user-duration: 1250ms;

  --tagcloud-transition-user-ease: ease-in-out;

  --tagcloud-transition-duration: 250ms;

  --tagcloud-transition-ease: ease-out;

  --tagcloud-bg-color-rgb: 0, 0, 0;

  --tagcloud-animation-duration: 25s;

  --tagcloud-animation-direction: normal;

  --tagcloud-animation-play-state: running;

  --tagcloud-diameter: 32rem;

  --tagcloud-start-rotation: 54;

  --tagcloud-controls-diameter: 256rem;

  --tagcloud-control-bg-color: transparent;

  --tagcloud-control-bg-hover-color: transparent;

  --tagcloud-control-bg-checked-color: transparent;

  --tag-diameter: 5.5rem;

  --tag-font-color-rgb: 255, 255, 255;

  --tag-font-family: 'Open Sans', sans-serif;

  --tag-font-size: 1rem;
}

/*

  global

  */

/* @import url(//fonts.googleapis.com/css?family=Open+Sans); */

*,
*::before,
*::after {
  margin: 0;

  padding: 0;

  border: 0;

  box-sizing: border-box;
}

*:focus {
  outline: none;
}

body {
  height: 100vh;
  background-color: rgb(var(--tagcloud-bg-color-rgb));
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/*

  tagcloud

  */

.tagcloud-wrapper {
  --_control-diamater: var(--tagcloud-controls-diameter);

  --_control-radius: calc(var(--_control-diamater) / 2);

  --_diameter: var(--tagcloud-diameter);

  --_radius: calc(calc(var(--_diameter) / 2) - calc(var(--tag-diameter) / 2));

  width: var(--control-diameter);

  aspect-ratio: 1 / 1;

  font-family: var(--tag-font-family);

  font-size: var(--tag-font-size);
}

@media only screen and (max-width: 48rem) {
  .tagcloud-wrapper {
    --_control-diamater: calc(var(--tagcloud-controls-diameter) * 0.5);

    --_diameter: calc(var(--tagcloud-diameter) * 0.88);
  }
}

@media only screen and (max-width: 32rem) {
  .tagcloud-wrapper {
    --_diameter: calc(var(--tagcloud-diameter) * 0.75);
  }
}

.tagcloud-wrapper:has(.tagcloud-rotation:hover) {
  --tagcloud-animation-play-state: paused;
}

.tagcloud-wrapper .tagcloud-tags {
  position: absolute;

  width: var(--_diameter);

  aspect-ratio: 1 / 1;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  list-style-type: none;

  position: relative;

  transform-style: inherit;

  animation: tagcloud-rotation var(--tagcloud-animation-duration) var(--tagcloud-animation-direction) linear infinite
    var(--tagcloud-animation-play-state);
}

@keyframes tagcloud-rotation {
  from {
    transform: translate(-50%, -50%) rotateX(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotateX(360deg);
  }
}

.tagcloud-wrapper .tagcloud-tags:has(.tagcloud-tag div a:hover) .tagcloud-tag:not(:has(div a:hover)) {
  opacity: 0.25;
}

.tagcloud-wrapper .tagcloud-tag {
  --_phi: acos(calc(-1 + (2 * var(--index)) / var(--num-elements)));

  --_theta: calc(sqrt(calc(var(--num-elements) * 3.141592653589793)) * var(--_phi));

  --_x: calc(cos(var(--_theta)) * sin(var(--_phi)));

  --_y: calc(sin(var(--_theta)) * sin(var(--_phi)));

  --_z: calc(cos(var(--_phi)));

  --_vector-length: sqrt(var(--_x) * var(--_x) + var(--_y) * var(--_y) + var(--_z) * var(--_z));

  --_normalized-x: calc(var(--_x) / var(--_vector-length));

  --_normalized-y: calc(var(--_y) / var(--_vector-length));

  --_normalized-z: calc(var(--_z) / var(--_vector-length));

  --_scaled-x: calc(var(--_normalized-x) * var(--_radius));

  --_scaled-y: calc(var(--_normalized-y) * var(--_radius));

  --_scaled-z: calc(var(--_normalized-z) * var(--_radius));

  --_final-x: calc(var(--_scaled-x) + var(--_radius));

  --_final-y: calc(var(--_scaled-y) + var(--_radius));

  --_final-z: var(--_scaled-z);

  pointer-events: none;

  width: var(--tag-diameter);

  height: var(--tag-diameter);

  display: flex;

  align-items: center;

  justify-content: center;

  position: absolute;

  transition: opacity var(--tagcloud-transition-duration) var(--tagcloud-transition-ease);

  transform: translate3d(var(--_final-x), var(--_final-y), var(--_final-z));

  animation: tagcloud-tag-rotation var(--tagcloud-animation-duration) var(--tagcloud-animation-direction) linear
    infinite var(--tagcloud-animation-play-state);
}

@keyframes tagcloud-tag-rotation {
  from {
    transform: translate3d(var(--_final-x), var(--_final-y), var(--_final-z)) rotateX(360deg);
  }

  to {
    transform: translate3d(var(--_final-x), var(--_final-y), var(--_final-z)) rotateX(0deg);
  }
}

.tagcloud-wrapper .tagcloud-tag div {
  transform: rotateZ(calc(var(--_current-rotation) * -1deg));

  transition: transform var(--tagcloud-transition-user-duration) var(--tagcloud-transition-user-ease);
}

.tagcloud-wrapper .tagcloud-tag div a {
  pointer-events: initial;

  color: rgb(var(--tag-font-color-rgb));

  text-decoration: none;

  text-shadow:
    1px 1px 1px rgb(var(--tagcloud-bg-color-rgb)),
    1px -1px 1px rgb(var(--tagcloud-bg-color-rgb)),
    -1px 1px 1px rgb(var(--tagcloud-bg-color-rgb)),
    -1px -1px 1px rgb(var(--tagcloud-bg-color-rgb)),
    0 0 1rem rgb(var(--tagcloud-bg-color-rgb));
  text-wrap: nowrap;
}

.tagcloud-wrapper .tagcloud-controls {
  width: var(--_control-diamater);

  aspect-ratio: 1 / 1;

  position: relative;

  --_current-rotation: var(--tagcloud-start-rotation);

  transform-style: inherit;
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button {
  --_width: var(--_control-radius);

  --_height: calc(var(--_control-diamater) * 3.141592653589793 / var(--num-elements) + 1px);

  --_theta-start: 0;

  --_theta-length: calc(2 * 3.141592653589793);

  --_segment: calc(var(--_theta-start) + var(--index) / var(--num-elements) * var(--_theta-length));

  --_x: calc(var(--_control-radius) * cos(var(--_segment)));

  --_y: calc(var(--_control-radius) * sin(var(--_segment)) + var(--_control-radius) - var(--_height) / 2);

  --_rotation: calc(var(--index) / var(--num-elements) * 360deg);

  position: absolute;

  left: var(--_x);

  top: var(--_y);

  width: var(--_width);

  height: var(--_height);

  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);

  transform-origin: right center;

  transform: rotate(var(--_rotation));

  transition: background-color var(--tagcloud-transition-duration) var(--tagcloud-transition-ease);

  background-color: var(--tagcloud-control-bg-color);
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button input {
  -webkit-appearance: none;

  appearance: none;

  opacity: 0;

  width: 100%;

  height: 100%;
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:checked) {
  background-color: var(--tagcloud-control-bg-checked-color);
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:hover) {
  background-color: var(--tagcloud-control-bg-hover-color);
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(1) input:checked) {
  --_current-rotation: 108;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(2) input:checked) {
  --_current-rotation: 126;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(3) input:checked) {
  --_current-rotation: 144;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(4) input:checked) {
  --_current-rotation: 162;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(5) input:checked) {
  --_current-rotation: 180;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(6) input:checked) {
  --_current-rotation: 198;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(7) input:checked) {
  --_current-rotation: 216;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(8) input:checked) {
  --_current-rotation: 234;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(9) input:checked) {
  --_current-rotation: 252;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(10) input:checked) {
  --_current-rotation: 270;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(11) input:checked) {
  --_current-rotation: 288;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(12) input:checked) {
  --_current-rotation: 306;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(13) input:checked) {
  --_current-rotation: 324;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(14) input:checked) {
  --_current-rotation: 342;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(15) input:checked) {
  --_current-rotation: 0;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(16) input:checked) {
  --_current-rotation: 18;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(17) input:checked) {
  --_current-rotation: 36;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(18) input:checked) {
  --_current-rotation: 54;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(19) input:checked) {
  --_current-rotation: 72;
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(20) input:checked) {
  --_current-rotation: 90;
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:checked) ~ .tagcloud-rotation {
  transform: translate(-50%, -50%) rotate(calc(var(--_current-rotation) * 1deg));
}

.tagcloud-wrapper
  .tagcloud-controls
  .tagcloud-control-button:has(input:checked)
  ~ .tagcloud-rotation
  .tagcloud-tags
  .tagcloud-tag
  div {
  transform: rotateZ(calc(var(--_current-rotation) * -1deg));
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-rotation {
  position: absolute;
  width: var(--_diameter);
  aspect-ratio: 1 / 1;
  perspective: calc(var(--_diameter) * 2);
  transform-style: preserve-3d;
  left: 50%;
  top: 50%;
  background: radial-gradient(
    rgba(var(--tagcloud-bg-color-rgb), 0.75) 15%,
    rgba(var(--tagcloud-bg-color-rgb), 0) calc(75% - var(--tag-diameter))
  );

  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(calc(var(--_current-rotation) * 1deg));
  transition: transform var(--tagcloud-transition-user-duration) var(--tagcloud-transition-user-ease);
}

#audio,
#audio::-webkit-media-controls-enclosure {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  border: none;
  padding: 10px;
  width: 100%;
  height: 50px;
}

.select2.select2-container {
  direction: rtl;
}


.select2-results__option[role='option'][aria-selected='true'] {

  color: #fff;
}
.select2-container--default .select2-results__option .circle { 
  display: inline-block; 
  width: 10px; 
  height: 10px; 
  border-radius: 50%;
  margin-right: 8px; 
} 
.circle-success { 
  background-color: green; 
} 
.circle-info { 
  background-color: blue; 
}

.select2-results__options {
  direction: rtl;
}

.select2-container--default .select2-results__option--highlighted:not([aria-selected='true']) {
  font-weight: 900;

  color: rgb(8, 0, 255);
}

.clockdate-wrapper {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 25px;
    width: 100%;
    text-align: center;
    border-radius: 5px;
    backdrop-filter: blur(5px);
}

#clock {
  background-color: rgba(0, 0, 0, 0.5);

  font-family: sans-serif;

  font-size: 60px;

  text-shadow: 0px 0px 1px #fff;

  color: #fff;
}

#clock span {
  color: #888;

  text-shadow: 0px 0px 1px #333;

  font-size: 50px;

  position: relative;

  top: -5px;

  left: 10px;
}

.popup-body p,
.popup-body span {
  letter-spacing: -1px;
}

#date {
  /* letter-spacing: 3px; */

  font-size: 14px;

  font-family: arial, sans-serif;

  color: #fff;
}

#clock span {
  display: inline-block;

  font-size: 16px;
}

.first-picture {
  aspect-ratio: 6 / 7;
  transition: transform 1s;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

  /* .app {
    height: 100%;
    width: 100%;
  } */

.authBox {
  top: 2rem;
  right: 2rem;
}

.username:focus {
  border: 0 !important;
}

.login-form {
  height: auto;
  min-height: 0;
}

.auth-first,
.auth-second {
  backface-visibility: hidden;
  transition: all 0.5s linear;
}

.perspective-1000 {
  perspective: 1000px;
}

.swal2-popup.swal2-toast .swal2-title {
  font-size: 16px !important;
}

.swal2-popup.swal2-toast .swal2-html-container {
  font-size: 14px !important;
}

.w-48{
  width: 48%;
}

.btn-effect {
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}


.btn-effect__warning:hover {
  box-shadow: 0 5px 20px rgba(255, 230, 0, 0.3) !important;
  border: 2px solid #ffc400 !important;

}

.btn-effect__warning-active {
  box-shadow: 0 5px 20px rgba(255, 230, 0, 0.3) !important;
  border: 2px solid #ffc400 !important;
}

.inNeedOfActionLoader {
  background-color: rgba(0,0,0,0.2);
  backdrop-filter: blur(3px);
  display: flex !important;
  z-index: 999999999999999999999999999999999999;
}

.loaderDashboard,
.loaderTab {
  background-color: rgba(0,0,0,0.8);
  backdrop-filter: blur(3px);
  display: flex;
  z-index: 999999999999999999999999999999999999;
}
.loaderCalendar,
.loaderChat {
  background-color: rgba(0,0,0,0.8);
  backdrop-filter: blur(5px);
  display: flex;
}


.spinner {
  width: 55px;
  height: 55px;
  
  border: 5px solid #c1c1c1;
  border-radius: 50%;
  border-right-color: #ffffff;
  
  animation: spin 1s ease infinite;
}

.user-avatar__img {
    width: 50px;
    height: 50px;
      box-shadow: 0 0 10px rgba(255, 196, 1, 0.3);

}

.icon-buttons i {
  font-size: 25px;
  position: relative;
}

.icon-buttons::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.icon-buttons_hasEffect {
  /*box-shadow: 0 5px 10px rgba(255, 255, 255, 0.5) !important;*/
  backdrop-filter: blur(5px);
  overflow: hidden;
  position: relative;
}

.icon-buttons_hasEffect-large::after {
    content: '';
    width: 20px;
    height: 200px;
    position: absolute;
    transform: translate(-2000%, -50%) rotate(-45deg);
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1;
    left: 50%;
    top: 50%;
    transition: all 1s;
}

.icon-buttons_hasEffect-large:hover::after {
  transform: translate(2000%, -50%) rotate(-45deg);
}

.icon-buttons_hasEffect-small::after {
  content: '';
  width: 20px;
  height: 200px;
  position: absolute;
  transform: translate(-350%, -50%) rotate(-45deg);
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 1;
  left: 50%;
  top: 50%;
  transition: all 0.2s;
}

.icon-buttons_hasEffect-small:hover::after {
transform: translate(200%, -50%) rotate(-45deg);
}

.icon-buttons__active {
  color: #ffd821 !important;
  border: 1px solid #ffd821 !important;
}


.bg-white-transparent {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.counter-container {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  top: -5px;
  left: -5px;
}

.left-sidebar {
  height: 100vh;
  width: 390px;
}

.notification-img {
  flex: 0 0 20%;
  width: 90px;
  height: auto;
}
.notification-content {
  flex: 1;
}

.notification-item {
  width: 100%;
  min-height: 110px;
  backdrop-filter: blur(3px);
  box-shadow: 2px 5px 5px rgba(255, 255, 255, 0.1);
  transition: all .2s;
}

.notification-item:hover {
  box-shadow: 2px 5px 5px rgba(255, 255, 255, 0.2);
}

.notification-content__header {
  font-size: 14px;
}

.notification-content__header,
.notification-content__text {
  width: 200px;
  text-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: all .2s;
}
.close-notification {
  font-size: 30px;
  color: #777;
  transition: all .5s ease;
}

.tooltip-notification__side-limit {
  width: 90px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-content__header-top {
  height: 25px;
}

.close-notification:hover {
  transform: rotate(90deg);
  color: rgb(158, 5, 5) !important;
}

.left-sidebar__footer {
  height: 210px;
}

.tooltip-notification {
  right: -415px;
  top: 50%;
  width: 400px;
  transform: translateY(-50%) scale(0);
  background-color: rgba(0, 0, 0, 0.95);
  text-wrap: auto;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.tooltip-notification__side i {
  font-size: 10px;
  color: rgba(179,184,171,0.56)
}

.tooltip-notification__side small {
  font-size: 10px;
}

.arrow-icon {
  position: absolute;
  top: 50%;
  right: -15px;
  transform: translateY(-50%) scale(0);
  color: #fff;
}

.tooltip-notification h5 {
  font-size: 14px;
}

.notification-item:hover .arrow-icon {
  animation: scale-notification-icon .5s ease;
  transform: translateY(-50%) scale(1);
  transition: all .5s ease .5s;
}

.notification-item:hover .tooltip-notification {
  transform: translateY(-50%) scale(1);
  transition: all .3s ease .6s;

}

.tab-buttons {
  padding: 10px;
  border: 1px solid #777;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  color: #777;
  width: 43px;
  height: 43px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 5px 10px rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  transition: all .2s;
}

.tab-buttons:hover {
  box-shadow: 0 5px 10px rgba(255, 255, 255, 0.4);
  color: #fff;
  border: 1px solid #f1f1f1;
}

.tab-buttons__active {
  box-shadow: 0 5px 10px rgba(255, 255, 255, 0.4);
  color: #fff;
  border: 1px solid #f1f1f1;
}

.tab-Buttons__counter {
  right: 2px;
  bottom: 3px;
  color: #ffc400;
  width: 10px;
  height: 10px;
  font-size: 12px;
}

.tab-buttons::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0);
  width: 5px;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.4);
  z-index: -1;
  transition: all .2s;
}

.tab-buttons:hover::after{
  transform: translate(-50%,-50%) scale(10);
}

/* Icon tooltip : Start */

.icon-tooltip__parent {
  position: relative;
}

.icon-tooltip__parent:hover .icon-tooltip{
  transform: translateX(-50%) scale(1);
}

.icon-tooltip__parent:hover .icon-tooltip__left{
  transform: translateY(-50%) scale(1);
}

.icon-tooltip {
  left: 50%;
  transform: translateX(-50%) scale(0);
  background-color: #333;
  position: absolute;
  padding: 5px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .2s;
}

.icon-tooltip__top {
  top: -50px;
}

.icon-tooltip__bottom {
  bottom: -20px;
}

.icon-tooltip__top::after {
  content: '';
  width: 8px;
  height: 8px;
  background-color: #333;
  transform: rotate(45deg);
  position: absolute;
  bottom: -4px;
}

.icon-tooltip__left {
  left: unset;
  top: 50%;
  right: 125%;
  transform: translateY(-50%) scale(0);
}

.icon-tooltip__left::after {
  content: '';
  width: 8px;
  height: 8px;
  background-color: #333;
  transform: rotate(45deg);
  position: absolute;
  right: -4px;
}

.icon-tooltip__bottom::before {
  content: '';
  width: 8px;
  height: 8px;
  background-color: #333;
  transform: rotate(45deg);
  position: absolute;
  top: -4px;
}


.icon-tooltip__text {
  padding: 5px;
  color: #fff;
  background-color: #000;
  display: inline-block;
  font-size: 10px;
  border-radius: 6px;
  text-wrap: nowrap;
}

.slider-input__checkbox:checked + .slider-label .slider-label__button
{
  transform: translate(28px, -50%);
  background-color: #4245ff;
}

.slider-label {
  width: 100%;
  height: 100%;
  border: 1px solid #c1c1c1;
  border-radius: 15px;
  background-color: #fff;
  transition: all .2s;
}

.slider-input__checkbox:checked + .slider-label {
  border: 1px solid #4245ff;
}

.slider-input {
  width: 50px;
  height: 20px;
  position: relative;
}

.slider-label__button {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 3px;
  background-color: #c1c1c1;
  transition: all .2s;
}

.note-content {
  min-height: 6rem !important;
}

.action-voice-active {
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid #ffffff;
  backdrop-filter: blur(3px);
  width: 50px;
  border-radius: 10px;
  color: #ffffff;
  display: none;
  z-index: 100000000;
}

.action-voice-active span{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ffffff;
  animation: sacle 1s infinite;
}

.accessibility {
  text-align: center;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  inset: 0;
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100000000000000000 ;
}
/* Icon tooltip : End */

@keyframes scale-notification-icon {
  0% {
    transform: translateY(-50%) scale(1);
  }

  25% {
    transform: translateY(-50%) scale(.8);
  }

  50% {
    transform: translateY(-50%) scale(.5);
  }

  75% {
    transform: translateY(-50%) scale(.8);
  }

  100% {
    transform: translateY(-50%) scale(1);
  }
}

@keyframes spin {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(360deg);
  }
}

@keyframes sacle {
  0% {
      transform:  scale(0.5);
  }

  50% {
    transform:  scale(0.8);
  }

  100% {
      transform:  scale(1);
  }
}

.username-skin,
.userRole-skin {
  transition: all .3s;
  text-wrap: nowrap;
}

.mobile  {
  transition: all .3s ease .3s;
}

/* right icon quick access css */
.sahebnazar-toggle-sidebar__style {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  right: -18px;
  top: 51%;
  /* transform: translateY(-50%); */
  background-color: rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3),
    2px 0 10px rgba(255, 196, 0, 0.4);
  color: #fff;
  font-weight: 900;
  font-size: 25px;
  transition:
   all 0.5s, right 0.25s ease-in-out; /* Ensured the right property transition */
  z-index: 99999 !important;
}
.sahebnazar-toggle-sidebar__style-open {
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3),
    -2px 0 10px rgba(255, 196, 0, 0.4);
  /* transform: translateY(-50%); */
  right: 310px;
}

@media only screen and (min-width: 1025px) {
  .toggle-sidebar {
    display: none;
  }
  
  .backdrop-sidebar {
    display: none;
  }
  
  .toggle-sidebar__style {
    display: none;
  }
}

/* Tablet media query */
@media only screen and (max-width: 1024px) {
  .left-sidebar__footer {
    display: none;
  }
  /* .icon-container {
    gap: 15px;
    padding: 10px 20px;
  }

  .left-sidebar {
    width: 320px;
  }

  .notification-content__header,
  .notification-content__text {
    width: 160px;
  }
  
  .icon-box {
    width: 35px;
    font-size: 1.4rem;
  } */

  .left-sidebar {
    width: 390px;
    transform: translateX(-390px);
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 2;
    box-shadow: 2px 0 5px rgba(255, 255, 255, 0.4);
    transition: all .5s ease;
  }
  .right-sidebar {
    width: 390px;
    transform: translateX(-390px);
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 2;
    box-shadow: 2px 0 5px rgba(255, 255, 255, 0.4);
    transition: all .5s ease;
  }

  .left-sidebar__open {
    transform: translate(0);
  }
  .right-sidebar__open {
    transform: translate(0);
  }

  .backdrop-sidebar {
    display: inline-block;
    transform: translateX(200%) scale(0);
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(3px);
    z-index: 1;
    transition: all .5s;
  }

  .backdrop-sidebar__open {
    transform: translateX(0) scale(1);
  }

  .toggle-sidebar__style {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%) ;
    background-color: rgba(0,0,0,0.8);
    box-shadow: inset 0 0 10px rgba(255,255,2550.3),
    2px 0 10px rgba(255, 196, 0, 0.4);
    color: #fff;
    font-weight: 900;
    font-size: 25px;
    transition: all .5s, right .3s ease .5s;
  }

  .toggle-sidebar__style-open {
    box-shadow: inset 0 0 10px rgba(255,255,2550.3),
    -2px 0 10px rgba(255, 196, 0, 0.4);
    transform: translateY(-50%);
    right: -25px;
  }

  .toggle-sidebar__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    transition: all .2s;
  }

  .toggle-sidebar__style-open .toggle-sidebar__icon {
    transform: translate(-50%, -50%) rotate(270deg);
  }

  .sidebar-notication__count {
    font-size: 8px;
    position: absolute;
    top: -5px;
    right: -5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    line-height: 15px;
    text-align: center;
    color: #fff;
    background-color: rgba(255, 22, 22, 0.788);
  }

  .notifications-list {
    overflow-y: auto !important;
    flex-direction: column !important;
    height: 100%;
    padding-bottom: 100px;
  }

  .arrow-icon {
    display: none;
  }

  .tooltip-notification {
    display: none;
  }

  /*.notification-item:hover .notification-content__text,*/
  /*.notification-item:hover .notification-content__header  {*/
    /*width: unset;    */
    /*text-wrap: auto;*/
    /*overflow: visible;*/
    /*text-align: justify;*/
  /*}*/
  
  .notification-item:hover .notification-img{
    /* height: auto; */
    align-self: flex-start;
  }

}

/* Mobile media query */
@media only screen and (max-width: 576px) {
  .sahebnazar-toggle-sidebar__style-open {
    right: 310px;
  }
  .popup-container-mobile {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 95%;
    height: 90vh;
    background: rgba(133, 133, 133, 0.2);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    color: #fff;
    z-index: 30;
    transition: all 0.5s ease-in-out;
  }

  .popup-body-chat-sm {
    height: 100% !important;
  }

  .app-chat-card-md {
    height: 69vh !important;
  }

  .app-chat-card-sm {
    height: 84vh !important;
  }

  .authBox {
    top: 1rem;
    right: 1rem;
  }

  .username-skin {
    font-size: 14px;
    font-weight: 500;
  }

  .userRole-skin {
    font-size: 12px;
    font-weight: 100;
  }
  
  .icon-buttons i {
    font-size: 20px;
  }

  .tab-buttons {
    width: 38px;
    height: 38px;
  }
  
 
  .icon-container {
    gap: 13px;
    padding: 10px 15px;
    bottom: 10dvh;
  }

  /* This scoop for responsive user information and buttons on top right page  */
  .mobile {
    position: relative;
  }

  .icon-button-item:nth-child(1) {
    transition: all .2s ease;
  } 

  .icon-button-item:nth-child(2) {
    transition: all .2s ease;
  }

  .icon-button-item:nth-child(3) {
    transition: all .2s ease;
  }

  .icon-button-item:nth-child(4) {
    transition: all .2s ease;
  }

  .icon-button-item:nth-child(5) {
    transition: all .2s ease;
  }

  .icon-button-item:nth-child(6) {
    transition: all .2s ease;
  } 



  .mobile .icon-button-item__active {
    transform: translateX(100%);
    visibility: hidden;
    opacity: 0;
    z-index: -1;
  }

  /* .mobile .icon-button-item__active:nth-child(1) {
    transform: translateX(calc(1 * 100%)) scale(0);
  }

  .mobile .icon-button-item__active:nth-child(2) {
    transform: translateX(calc(2   * 100%)) scale(0);
  }

  .mobile .icon-button-item__active:nth-child(3) {
    transform: translateX(calc(3 * 100%)) scale(0);
  }

  .mobile .icon-button-item__active:nth-child(4) {
    transform: translateX(calc(4 * 100%)) scale(0);
  }

  .mobile .icon-button-item__active:nth-child(5) {
    transform: translateX(calc(5 * 100%)) scale(0);
  }

  .mobile .icon-button-item__active:nth-child(6) {
    transform: translateX(calc(6 * 100%)) scale(0);
  } */

  .mobile {
   gap: 0 !important;
   flex: 1 !important;
  }

  .mobile__active {
    /*transform: translateX(40%);*/
  }

  .mobile .user-information__active .user-name {
    display: none !important;
  }

  .mobile .user-information__active {
    /* transform: translateX(80%); */
    /* transition: all 0.5s; */
  }

 
  .icon-box {
    width: 36px;
    font-size: 1.3rem;
  }

  .mobile {
    gap: 10px !important;
  } 

  .left-sidebar {
    width: 350px;
    transform: translateX(-350px);
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 2;
    box-shadow: 2px 0 5px rgba(255, 255, 255, 0.4);
    transition: all .5s ease;
  }
  .right-sidebar {
    width: 350px;
    transform: translateX(-350px);
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 2;
    box-shadow: 2px 0 5px rgba(255, 255, 255, 0.4);
    transition: all .5s ease;
  }

  .left-sidebar__open {
    transform: translate(0);
  }
  .right-sidebar__open {
    transform: translate(0);
  }
}

@media only screen and (max-width: 400px) {
  .icon-box {
    width: 30px;
    font-size: 1.2rem;
  }

  .mobile {
    gap: 5px !important;
  }

  .icon-buttons i {
    font-size: 15px;
  }

  .left-sidebar {
    width: 300px;
    transform: translateX(-300px);
  }
  
  .left-sidebar__open {
    transform: translateX(0);
  }
  .right-sidebar__open {
    transform: translateX(0);
  }
}

.report-icons-minimized {
  top: -80px;
  height: 65px;
}

.report-container:hover {
  z-index: 20 !important;
  transition: z-index .5s ease;
}