:root {
  --blue-alt-color: #0d69d5;
  --blue-color: #0075ff;
  --blue-color-opc-mid: #0077ff76;
  --blue-color-opc-low: #0077ff3a;
  --light-blue-color: #1da1f2;
  --light-blue-color-ops-low: #1da1f233;
  --anth-light-blue-color: #0077b5;
  --orange-color: #f59e0b;
  --orange-color-opc-low: #f59f0b41;
  --green-color: #22c55e;
  --green-alt-color: #16a34a;
  --green-color-opc-low: #22c55e3c;
  --pure-alt-red: #9b111e;
  --pure-red: #ff0000;
  --pure-red-color-ops-mid: #ff000082;
  --pure-red-color-ops-low: #ff000043;
  --purple-color: #7844cc;
  --purple-color-ops-mid: #7844cc7c;
  --purple-color-ops-low: #7844cc4b;
  --grey-color: #888;
  --grey-color-ops-mid: #88888888;
  --grey-color-ops-low: #88888844;
  --white-color: #ffffff;
  --tf-stoner-color: #f6f6f6;
  --stone-color: #d5d2cd;
  --stoner-color: #eeeeee;
  --black-color: #000;
  --black-color-opc-low: #00000044;
  --black-alt-color: #24292f;
  --main-duration: 0.3s;
  --slow-duration: 1s;
  --tenis-bezir: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

* {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

body {
  font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;
  margin: 0;
}

textarea:focus::placeholder,
input:focus::placeholder {
  color: transparent;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
  padding: 0;
}

/* Start scrollbar */
html {
  scroll-behavior: smooth;
}

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

::-webkit-scrollbar-track {
  background-color: white;
}

::-webkit-scrollbar-thumb {
  background-color: var(--blue-color);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--blue-alt-color);
}

/* Start scrollbar */

.page {
  background-color: #f1f5f9;
  min-height: 200vh;
}

/* Start sidebar */

.sidebar {
  box-shadow: 0 0 10px #ddd;
  width: 200px;
  z-index: 10;
}

.sidebar > h3 {
  margin-bottom: 50px;
}

.sidebar > h3::before,
.sidebar > h3::after {
  content: "";
  background-color: black;
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
}

.sidebar > h3::before {
  width: 100px;
  height: 2px;
  bottom: -20px;
}

.sidebar > h3::after {
  bottom: -27px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid white;
}

.sidebar ul li a {
  width: 150px;
  border-radius: 10px;
  transition: var(--main-duration);
  margin-bottom: 5px;
  transition: var(--main-duration);
}

.sidebar ul li a span {
  margin-left: 10px;
  user-select: none;
}

.sidebar ul li a:hover,
.sidebar ul li a.active {
  background-color: var(--tf-stoner-color);
}

@media (max-width: 767px) {
  .sidebar ul li a span {
    display: none;
  }
  .sidebar {
    width: 60px;
    padding: 10px;
  }
  .sidebar i {
    position: relative;
    margin: 0;
    font-size: 1.3rem;
  }
  .sidebar ul li a {
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .sidebar > h3 {
    font-size: 15px;
    position: relative;
    margin-bottom: 50px;
    margin-top: 5px;
  }
  .sidebar > h3::before,
  .sidebar > h3::after {
    left: 50%;
  }
  .sidebar > h3::before {
    width: 40px;
  }
  .sidebar > h3::after {
    width: 10px;
    height: 10px;
  }
}

/* End sidebar */

/* start header */

nav.header {
  height: 70px;
  z-index: 9;
}

.search-box {
  border: 1px solid var(--grey-color-ops-low);
  padding: 5px 10px;
  transition: var(--main-duration);
}

nav.header .search-box i {
  font-size: 13px;
  padding-right: 5px;
  color: var(--grey-color);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
}

.header .search-box input {
  background-color: inherit;
  width: 120px;
  position: relative;
  padding-left: 5px;
  padding-right: 10px;
  right: -15px;
  top: -2px;
  transition: var(--main-duration);
}

.search-box input:focus-within {
  width: 200px;
}

.header .search-box input::placeholder {
  font-size: 12px;
}

nav div .bell {
  padding-right: 10px;
}

nav div .bell span {
  position: absolute;
  border: 5px solid var(--pure-red);
  border-radius: 50%;
  left: 14px;
  top: -13px;
}

nav div img.user {
  width: 32px; /* or height.. because this image is 300px × 300px */
  border: var(--black-color) solid 1px;
  border-radius: 50%;
  transition: var(--main-duration);
  cursor: pointer;
  overflow: hidden;
}

nav div img.user:hover {
  box-shadow: 0 0 2px 1px var(--blue-alt-color);
  transform: scale(1.1);
}

/* End header */

/* Start Dashboard */

/* Start Dashboard Head */
h1.Head {
  width: 150px;
  margin: 20px;
  margin-bottom: 40px;
}

h1.Head::before,
h1.Head::after {
  content: "";
  height: 3px;
  position: absolute;
  bottom: -12px;
  left: 0;
}

h1.Head::after {
  background-color: black;
  animation: HDsbrd-af var(--main-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes HDsbrd-af {
  from {
    width: 0%;
  }
  to {
    width: 25%;
  }
}

h1.Head::before {
  background-color: white;
  animation: HDsbrd-bf var(--main-duration) var(--main-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  width: 25%;
}

@keyframes HDsbrd-bf {
  from {
    width: 25%;
  }
  to {
    width: 75%;
  }
}
/* End Dashboard Head */

/* Start Cards */

.cards {
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  margin: 15px;
}

@media (max-width: 767px) {
  .cards {
    grid-template-columns: minmax(200px, 1fr);
    gap: 10px;
    margin: 10px;
  }
}

.cards .intro > div > h2 {
  margin: 0;
}

/* Start Welc-crd */

.Welc-crd .intro {
  border-radius: 10px 10px 0px 0px;
}

.Welc-crd .intro img.bacgr {
  width: 280px;
}

.Welc-crd .intro img.prf {
  width: 70px;
  top: 185px;
  border: white 4px solid;
}

@media (max-width: 767px) {
  .Welc-crd .intro img.bacgr {
    width: 180px;
  }
  .Welc-crd .intro img.prf {
    display: none;
  }
  .Welc-crd .cnt-welc p {
    font-size: 12px;
  }
  .Welc-crd .cnt-welc h3 {
    font-size: 14px;
  }
}

/* End Welc-crd */

/* Start QCK-DRF-crd */

input.non-bord-inp {
  border: transparent 1px solid;
  width: 100%;
  height: 30px;
  background-color: var(--stoner-color);
  margin-bottom: 20px;
  padding: 0px 10px 0px 10px;
}

.Qck-drf-crd input::placeholder {
  font-size: 14px;
}

textarea.non-bord-texar {
  border: transparent 1px solid;
  width: 100%;
  min-height: 200px;
  padding: 10px;
  background-color: var(--stoner-color);
}

/* End QCK-DRF-crd */

/* Start Yr-Tg-crd */

.Yr-Tg-crd .cnt-yr .progress {
  width: 90%;
}

.type-cont .progress .p-crd::before,
.type-cont .progress .p-crd::after {
  content: "";
  height: 5px;
  position: absolute;
  left: 0px;
  bottom: 5px;
}

.type-cont .progress .p-crd::before {
  width: calc(100% - 15px);
}

.type-cont .progress .p1::after {
  background-color: var(--blue-color);
  width: calc((100% - 15px) * 0.6);
}

.type-cont .progress .p1::before {
  background-color: var(--blue-color-opc-low);
}

.type-cont .progress .p2::after {
  background-color: var(--orange-color);
  width: calc((100% - 15px) * 0.8);
}

.type-cont .progress .p2::before {
  background-color: var(--orange-color-opc-low);
}

.type-cont .progress .p3::after {
  background-color: var(--green-color);
  width: calc((100% - 15px) * 0.4);
}

.type-cont .progress .p3::before {
  background-color: var(--green-color-opc-low);
}

.type-cont .progress .p4::after {
  background-color: var(--purple-color);
  width: calc((100% - 15px) * 0.3);
}

.type-cont .progress .p4::before {
  background-color: var(--purple-color-ops-low);
}

.Yr-Tg-crd .cnt-yr .icon-pr {
  height: 70px;
  width: 80px;
}

.Yr-Tg-crd .cnt-yr .money .icon-pr {
  background-color: var(--blue-color-opc-low);
}

.Yr-Tg-crd .cnt-yr .money .icon-pr i {
  color: var(--blue-color);
}

.Yr-Tg-crd .cnt-yr .code .icon-pr {
  background-color: var(--orange-color-opc-low);
}

.Yr-Tg-crd .cnt-yr .code .icon-pr i {
  color: var(--orange-color);
}

.Yr-Tg-crd .cnt-yr .user .icon-pr {
  background-color: var(--green-color-opc-low);
}

.Yr-Tg-crd .cnt-yr .user .icon-pr i {
  color: var(--green-color);
}

.Yr-Tg-crd .cnt-yr .skill .icon-pr {
  background-color: var(--purple-color-ops-low);
}

.Yr-Tg-crd .cnt-yr .skill .icon-pr i {
  color: var(--purple-color-ops-mid);
}

@media (max-width: 767px) {
  .Yr-Tg-crd .cnt-yr .type-cont {
    flex-direction: column; /* display was already Flex */
    align-items: center;
    text-align: center;
  }
  .Yr-Tg-crd .cnt-yr .progress {
    margin-bottom: 40px;
  }
  .Yr-Tg-crd .cnt-yr .progress p.c-grey {
    margin-top: 15px;
  }
  .type-cont .progress .p-crd::before,
  .type-cont .progress .p-crd::after {
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
  }
  .type-cont .progress p {
    position: relative;
    right: 7px;
  }
}

/* End Yr-Tg-crd */

/* Start Tk-St-crd*/

.Tk-St-crd .cnt-tk {
  grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  gap: 30px;
}

@media (max-width: 767px) {
  .Tk-St-crd .cnt-tk {
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 20px;
    margin: 10px;
  }
}
.Tk-St-crd .cnt-tk .ticket {
  flex-direction: column;
  border: 1px var(--grey-color-ops-mid) solid;
  padding: 30px;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
}

.p-tik.fw-bold {
  font-size: 30px;
}

.cnt-tk .ticket i {
  font-size: 40px;
}

/* End Tk-St-crd*/

/* Start L-News */

.L-Nws-crd .cont-tk .cnt-tk:not(:last-child) {
  padding-bottom: 25px;
  border-bottom: var(--stoner-color) solid 1px;
}

.L-Nws-crd .cont-tk .cnt-tk:not(:nth-child(1)) {
  padding-top: 25px;
}

.L-Nws-crd .cont-tk .days-ago {
  background-color: var(--stoner-color);
  padding: 10px;
  border-radius: 5px;
}

.L-Nws-crd .cont-tk .days-ago p {
  color: var(--black-color);
  text-align: center;
  margin: 0;
  white-space: nowrap;
}

.L-Nws-crd .cont-tk .cnt-tk .cont .cnt-txt img {
  width: 100px;
  border-radius: 5px;
}

.L-Nws-crd .cont-tk .cnt-tk .cont .cnt-txt div {
  margin-left: 15px;
  text-align: start;
}

.L-Nws-crd .cont-tk .cnt-tk .cont .cnt-txt div p,
.L-Nws-crd .cont-tk .cnt-tk .cont .cnt-txt div h3 {
  padding: 0;
  margin: 0;
}

.L-Nws-crd .cont-tk .cnt-tk .cont .cnt-txt div p {
  margin-top: 10px;
}

@media (max-width: 767px) {
  .L-Nws-crd .cont-tk {
    margin-bottom: 40px;
    display: grid;
    gap: 30px;
  }
  .L-Nws-crd .cont-tk .cnt-tk {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .L-Nws-crd .cont-tk .cnt-tk .cont .cnt-txt {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
  }
  .L-Nws-crd .cont-tk .cnt-tk .cont .cnt-txt .txt {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .L-Nws-crd .cont-tk .cnt-tk .cont .cnt-txt img {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
    width: 80%;
  }
}
/* End L-News */

/* Start L-Tasks */

.L-tsk-crd .cont-tk .cnt-tk:not(:last-child) {
  padding-bottom: 20px;
  border-bottom: var(--stoner-color) solid 1px;
}

.L-tsk-crd .cont-tk .cnt-tk {
  margin-bottom: 20px;
}

.L-tsk-crd .cont-tk .cnt-tk .cnt-txt div p {
  margin: 0;
}

.L-tsk-crd .cont-tk .cnt-tk .cnt-txt div p.c-grey {
  margin-top: 10px;
}

.L-tsk-crd .cont-tk .cnt-tk .del-bt i {
  transition: var(--main-duration);
  font-size: 20px;
  padding: 5px;
}

.L-tsk-crd .cont-tk .cnt-tk .del-bt i:last-child:hover {
  color: var(--pure-red);
  cursor: pointer;
}

.L-tsk-crd .cont-tk .cnt-tk .del-bt i:first-child:hover {
  color: var(--green-color);
  cursor: pointer;
}

@media (max-width: 767px) {
  .L-tsk-crd .cont-tk {
    margin-bottom: 40px;
    display: grid;
    gap: 20px;
  }
  .L-tsk-crd .cont-tk .cnt-tk {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
  }
  .L-tsk-crd .cont-tk .cnt-tk .cnt-txt {
    margin-bottom: 20px;
  }
}

/* End L-Tasks */
/* Start T-Search */

.Top-Sch-crd .cont-tk .crd-sch .sch-count {
  background-color: var(--stoner-color);
  border-radius: 5px;
  height: 30px;
  padding: 5px 10px;
  width: fit-content;
}

.Top-Sch-crd .cont-tk .crd-sch .sch-keyword p {
  margin: 0;
}

.Top-Sch-crd .cont-tk .crd-sch:not(:last-child) {
  margin-bottom: 30px;
}

@media (max-width: 767px) {
  .Top-Sch-crd .cont-tk:not(:first-child) {
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 20px;
  }
  .Top-Sch-crd .cont-tk .crd-sch {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 20px;
  }
  .Top-Sch-crd .cont-tk .crd-sch .sch-keyword {
    margin-bottom: 10px;
  }
  .Top-Sch-crd .cont-tk-hd {
    margin-bottom: 0px;
    padding-bottom: 20px;
    border-bottom: var(--stoner-color) solid 1px;
  }
  .Top-Sch-crd .cont-tk-hd .crd-sch {
    flex-direction: column;
    margin-bottom: 10px;
  }
  .Top-Sch-crd .cont-tk-hd .crd-sch .sch-keyword p {
    margin: 0;
    margin-bottom: 10px;
  }
}
/* End T-Search */

/* Start L-Uploads */

.L-Upld-crd .cont-tk .cnt-tk .file-size {
  background-color: var(--stoner-color);
  border-radius: 5px;
  height: 30px;
  padding: 5px 10px;
  width: fit-content;
}

.L-Upld-crd .cont-tk .cnt-tk .file-size p {
  white-space: nowrap;
}

.L-Upld-crd .cont-tk .cnt-tk:not(:last-child) {
  padding-bottom: 10px;
  border-bottom: var(--stoner-color) solid 1px;
}

.L-Upld-crd .cont-tk .cnt-tk:not(:first-child) {
  padding-top: 10px;
}

.L-Upld-crd .cont-tk .cnt-tk .cont .cnt-txt img {
  width: 48px;
}

.L-Upld-crd .cont-tk .cnt-tk .cont .cnt-txt div p:not(:first-child) {
  margin-top: 5px;
}

@media (max-width: 767px) {
  .L-Upld-crd .cont-tk {
    margin-bottom: 40px;
    display: grid;
    gap: 20px;
  }
  .L-Upld-crd .cont-tk .cnt-tk {
    flex-direction: column;
  }
  .L-Upld-crd .cont-tk .cnt-tk:not(:last-child) {
    padding-bottom: 20px;
  }
  .L-Upld-crd .cont-tk .cnt-tk .cont .cnt-txt {
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }
  .L-Upld-crd .cont-tk .cnt-tk .cont .cnt-txt .txt {
    position: relative;
    right: 5px;
  }
  .L-Upld-crd .cont-tk .cnt-tk .cont .cnt-txt img {
    margin-bottom: 20px;
    width: 100px;
    height: 100px;
  }
}

/* End L-Uploads */

/* Start L-Projects */
/* 
.L-Prj-crd .cont-tk .cont-border {
} */

.L-Prj-crd .cont-tk .cont {
  margin: 0px 0px 25px 5px;
}

.L-Prj-crd .cont-tk .cont .cont-circle .crc {
  background-color: var(--blue-color);
  border: var(--white-color) 3px solid;
  box-shadow: 0px 0px 0px 2px var(--blue-color);
  border-radius: 50%;
  position: relative;
  width: 40px;
  height: 40px;
}

.L-Prj-crd .cont-tk .cont .cont-circle .crc::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 30px;
  background-color: var(--blue-alt-color);
  left: 50%;
  top: 38px;
  transform: translateX(-50%);
}

.L-Prj-crd .cont-tk .cont:last-child .cont-circle .crc::after {
  display: none;
}

.L-Prj-crd .cont-tk .cont:nth-child(5) .cont-circle .crc {
  background-color: var(--white-color);
}

/* End L-Projects */

/* Start Reminder */

.Rmnd-crd .cont-tk .cont:not(:last-child) {
  margin-bottom: 20px;
}

.Rmnd-crd .cont-tk .cont .cont-bord {
  padding-right: 15px;
  margin-right: 15px;
  height: 50px;
}

.Rmnd-crd .cont-tk .cont .cont-bord .circ-ul {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.Rmnd-crd .cont-tk .cont:nth-child(1) .cont-bord .circ-ul {
  background-color: var(--blue-color);
}

.Rmnd-crd .cont-tk .cont:nth-child(1) .cont-bord {
  border-right: 3px var(--blue-color) solid;
}

.Rmnd-crd .cont-tk .cont:nth-child(3) .cont-bord .circ-ul {
  background-color: var(--orange-color);
}

.Rmnd-crd .cont-tk .cont:nth-child(3) .cont-bord {
  border-right: var(--orange-color) 3px solid;
}

.Rmnd-crd .cont-tk .cont:nth-child(2) .cont-bord .circ-ul {
  background-color: var(--pure-red);
}

.Rmnd-crd .cont-tk .cont:nth-child(2) .cont-bord {
  border-right: var(--pure-red) 3px solid;
}

.Rmnd-crd .cont-tk .cont:nth-child(4) .cont-bord .circ-ul {
  background-color: var(--purple-color);
}

.Rmnd-crd .cont-tk .cont:nth-child(4) .cont-bord {
  border-right: 3px var(--purple-color) solid;
}

/* End Reminder */

/* Start Post */

.L-Pst-crd .cont-tk .cont-user img {
  width: 50px;
  margin-right: 15px;
}

.L-Pst-crd .cont-tk .cont-reacts .likes:hover {
  color: var(--pure-red);
  transition: var(--main-duration);
}

.L-Pst-crd .cont-tk .cont-reacts .comments:hover {
  color: var(--blue-alt-color);
  transition: var(--main-duration);
}

/* End Post */

/* Start Social */

.Soc-crd .cont-tk .cont-crd:not(:last-child) {
  margin-bottom: 10px;
}

.Soc-crd .cont-tk .cont-crd .cont-soc .cont-icn {
  height: 56px;
  width: 52px;
}

@media (max-width: 767px) {
  .Soc-crd .cont-tk .cont-crd p {
    font-size: 14px;
  }
}

/* Start Social */

/* End Cards */

/* End Dashboard */

/* Start Settings */

/* Start Site control */

.page:has(.Settings) .sidebar ul li a span {
  height: 16px;
  position: relative;
  top: -1px;
}
/* for approximated heights */

.toggle-checkbox {
  -webkit-appearance: none;
  appearance: none;
}

.toggle-switch {
  background-color: #ccc;
  width: 78px;
  height: 32px;
  border-radius: 16px;
  position: relative;
  transition: 0.3s ease;
  cursor: pointer;
}

.toggle-switch::before {
  font-family: var(--fa-style-family-classic);
  content: "\f00d";
  font-weight: 900;
  background-color: white;
  width: 24px;
  height: 24px;
  position: absolute;
  border-radius: 50%;
  left: 4px;
  top: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--grey-color);
  transition: 0.3s ease;
}

.toggle-checkbox:checked + .toggle-switch {
  background-color: var(--blue-color);
}

.toggle-checkbox:checked + .toggle-switch::before {
  color: var(--blue-color);
  left: 50px;
  content: "\f00c";
}

.site-ctrl {
  display: grid;
}

.site-ctrl textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
}

/* End Site control */

/* Start General Info  */

.Gen-inf {
  display: grid;
}

.Gen-inf .inp .gen-inp {
  border: 1px solid var(--grey-color-ops-low);
  transition: var(--main-duration);
  overflow: hidden;
}

.Gen-inf .inp.inp-3 .gen-inp {
  background-color: #f0f4f8;
  color: #bbb;
  width: 85%;
}

.Gen-inf .inp.inp-3 .change-bt {
  width: 15%;
  margin-left: 5px;
}

@media (max-width: 597px) {
  .Gen-inf .inp.inp-3 .change-bt {
    width: 20%;
  }
  .Gen-inf .inp.inp-3 .gen-inp {
    width: 80%;
  }
}

.Gen-inf .inp .gen-inp:focus-within {
  border: 1px var(--blue-color) solid;
}

.Gen-inf .inp .gen-inp input {
  width: 100%;
  position: relative;
  padding: 8px;
}

.Gen-inf .inp.inp-3 .gen-inp input {
  cursor: not-allowed;
}

.Gen-inf .inp .gen-inp input::placeholder {
  font-size: 14px;
  opacity: 80%;
  justify-content: space;
}

/* End General Info  */

/* Start Security */
/* End Security */

/* Start Social Info  */

.Soc-inf {
  display: grid;
}

.cont-soc input {
  border: transparent 1px solid;
  width: 180%;
  font-size: 14px;
}

.cont-soc:focus-within i {
  color: black;
}

.cont-soc i {
  border-radius: 10px 0 0 10px;
  transition: var(--main-duration);
}

.cont-soc {
  border-radius: 10px;
}

/* End */
/* Start */

.widg-ctrl .ctrl-li:not(:last-child) {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.widg-ctrl .widget-checkbox {
  position: absolute;
  opacity: 0;
}

.widg-ctrl .widget-checkbox + label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  user-select: none;
  color: var(--black-color);
  transition: var(--main-duration);
}

.widg-ctrl .widget-checkbox + label::before {
  content: "";
  height: 15px;
  width: 15px;
  border: 2px solid var(--grey-color);
  background: var(--white-color);
  border-radius: 4px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: var(--main-duration);
}

.widg-ctrl .widget-checkbox + label::after {
  content: "\f00c";
  font-family: var(--fa-style-family-classic);
  font-weight: 900;
  font-size: 12px;
  color: var(--white-color);
  position: absolute;
  transform: translateY(-50%) scale(0);
  left: 4.5px;
  top: 52%;
  transition: var(--main-duration);
}

.widg-ctrl .widget-checkbox:checked + label::before {
  background-color: var(--blue-color);
  border-color: var(--blue-color);
}

.widg-ctrl .widget-checkbox:checked + label::after {
  transform: translateY(-50%) scale(1);
}

.widg-ctrl .widget-checkbox + label:hover::before {
  border-color: var(--blue-color);
}

/* End */
/* Start */

.bck-mng .mng-li {
  display: flex;
}

.bck-mng input.bck-radio {
  position: absolute;
  opacity: 0;
}

.bck-mng .bck-radio + label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  user-select: none;
  color: var(--black-color);
  transition: var(--main-duration);
}

.bck-mng .bck-radio + label::before {
  content: "";
  height: 13px;
  width: 13px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: var(--main-duration);
  border: var(--white-color) 3px solid;
  box-shadow: 0 0 0 1px var(--stone-color);
  border-radius: 50%;
}

.bck-mng .bck-radio:checked + label::before {
  background-color: var(--blue-color);
  box-shadow: 0 0 0 2px var(--blue-color);
}

.bck-mng .bck-radio + label:hover::before {
  box-shadow: 0 0 0 2px var(--blue-color);
}

.bck-mng .crd-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.bck-mng .crd-options .mng-bx {
  padding: 20px;
  border: var(--grey-color-ops-mid) 2px solid;
  border-radius: 10px;
  transition: var(--main-duration);
}

.bck-mng .mng-radio + label {
  position: relative;
  text-align: center;
  cursor: pointer;
  user-select: none;
  color: var(--black-color);
  transition: var(--main-duration);
}

.bck-mng input.mng-radio {
  position: absolute;
  opacity: 0;
}

.bck-mng .mng-radio:checked + label {
  color: var(--blue-color);
}

.bck-mng .crd-options .mng-bx:has(.mng-radio:checked) {
  border-color: var(--blue-color);
  /* ":has" is a selector chooses the parent that has..
  ..the child whice is written with in ":has" selector */
}

/* End settings */

/* Start profile */

.prf-page {
  margin: 15px;
}

@media (max-width: 767px) {
  .prf-page {
    gap: 10px;
    margin: 10px;
  }
}

@media (min-width: 768px) {
  .prf-page .user-avatar {
    border-right: 1px solid var(--grey-color-ops-low);
  }
}

.prf-page .user-avatar .p-level::before,
.prf-page .user-avatar .p-level::after {
  content: "";
  height: 6px;
  position: absolute;
  left: 0;
  bottom: -20px;
  border-radius: 5px;
}

.prf-page .user-avatar .p-level::after {
  background-color: var(--blue-color);
  width: 70%;
}

.prf-page .user-avatar .p-level::before {
  background-color: var(--blue-color-opc-low);
  width: 100%;
}

.prf-page .user-avatar .ratings i {
  display: inline-block;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.prf-page .user-avatar .ratings i:hover {
  transform: translateY(-5px);
}

.prf-page .user-avatar img {
  display: inline-block;
  transition: transform 0.3s ease;
}

.prf-page .user-avatar img:hover {
  transform: scale(105%);
}

.wide-toggle .toggle-switch {
  width: 107px;
  height: 28px;
}

.wide-toggle .toggle-switch::before {
  width: 20px;
  height: 20px;
}

.wide-toggle .toggle-checkbox:checked + .toggle-switch::before {
  left: 84px;
}

.prf-page .user-info div.p-20 {
  transition: background-color 0.3s ease;
  border-radius: 5px;
  width: 100%;
}

.prf-page .user-info div.p-20:hover {
  background-color: var(--grey-color-ops-low);
}

/* End profile page */
/* Start Profile cards */

@media (min-width: 1012px) {
  .cards .Skl-crd {
    width: 30%;
  }

  .cards .L-actv-crd {
    width: 70%;
  }
}

.cards .Skl-crd .skl-cont .cont .skl {
  font-size: 13px;
}

.cards .L-actv-crd .actv-cont img {
  width: 64px;
}

@media (min-width: 767px) {
  .cards .L-actv-crd .actv-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cards .L-actv-crd .actv-cont .cont .img {
    margin-right: 10px;
  }
  .cards .L-actv-crd .actv-cont .cont {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 767px) {
  .cards .L-actv-crd,
  .cards .L-actv-crd .actv-cont .cont-date,
  .cards .L-actv-crd .actv-cont .cont .cont-text h4 {
    margin-top: 10px;
  }
  .cards .L-actv-crd .actv-cont .cont .cont-text h4,
  .cards .L-actv-crd .actv-cont .cont .cont-text p {
    margin-bottom: 10px;
  }
  .cards .L-actv-crd .actv-cont p {
    text-align: center;
    display: block;
  }
}

/* End profiles page */

/* Start projects page */

.Project .cards {
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  gap: 20px;
  display: grid;
}

@media (max-width: 767px) {
  .Project .cards {
    grid-template-columns: minmax(100px, 1fr);
    gap: 10px;
  }
}

.Project .cards .prj-crd {
  position: relative;
}

.Project .prj-crd .memb-cont img:nth-child(2) {
  right: 20px;
}

.Project .prj-crd .memb-cont img:nth-child(3) {
  right: 40px;
}

.Project .prj-crd .memb-cont img:nth-child(4) {
  right: 60px;
}

.Project .prj-crd .memb-cont img:nth-child(5) {
  right: 80px;
}

.Project .prj-crd .memb-cont img {
  width: 40px;
  border: white solid 2px;
  border-radius: 50%;
  position: relative;
}

.Project .prj-crd .memb-cont img:hover {
  z-index: 2;
  cursor: pointer;
}

.Project .prj-crd .txt-cont span {
  position: relative;
  bottom: 10px;
  left: 10px;
}

.Project .prj-crd .sec-cont {
  display: flex;
  gap: 5px;
  justify-content: right;
}

@media (max-width: 767px) {
  .Project .prj-crd .sec-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  .Project .prj-crd .sec-cont div {
    width: 30%;
    text-align: center;
    font-size: initial;
  }
}

@media (max-width: 645px) {
  .Project .prj-crd .sec-cont div {
    width: 50%;
  }
}

.Project .prj-crd .thrd-cont {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .Project .prj-crd .thrd-cont {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
  }
}

.Project .prj-crd .thrd-cont .prg-bar-cont {
  width: 70%;
  display: flex;
  align-items: center;
}

.Project .prj-crd .thrd-cont .prg-bar-cont::before,
.Project .prj-crd .thrd-cont .prg-bar-cont::after {
  content: "";
  height: 8px;
  position: absolute;
  border-radius: 5px;
}

.Project .prj-crd.prj-crd-bl .thrd-cont .prg-bar-cont::after {
  background-color: var(--blue-color);
  width: 50%;
}

.Project .prj-crd.prj-crd-bl .thrd-cont .prg-bar-cont::before {
  background-color: var(--blue-color-opc-low);
  width: 100%;
}

.Project .prj-crd.prj-crd-gr .thrd-cont .prg-bar-cont::after {
  background-color: var(--green-color);
  width: 60%;
}

.Project .prj-crd.prj-crd-gr .thrd-cont .prg-bar-cont::before {
  background-color: var(--green-color-opc-low);
  width: 100%;
}

.Project .prj-crd.prj-crd-rd .thrd-cont .prg-bar-cont::after {
  background-color: var(--pure-red);
  width: 70%;
}

.Project .prj-crd.prj-crd-rd .thrd-cont .prg-bar-cont::before {
  background-color: var(--pure-red-color-ops-low);
  width: 100%;
}

/* End Projects */
/* Start Courses */

/* .crs-bck .crs-cnt .head-bt */

.Courses .cards {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

@media (max-width: 767px) {
  .Courses .cards {
    grid-template-columns: minmax(300px, 1fr);
    gap: 10px;
  }
}

.crs-crd .crs-bck {
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}

.crs-crd .crs-bck img {
  border-radius: inherit;
  transition: var(--main-duration);
}

.crs-crd .crs-bck img:hover {
  transform: scale(1.1);
}

.crs-crd .crs-ins img {
  width: 64px;
  border: var(--white-color) solid 3px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
}

.crs-crd .crs-cnt .crs-inf-cont {
  display: flex;
  justify-content: space-between;
  border-top: var(--stoner-color) solid 1px;
}

.crs-crd .crs-cnt .bt-cont {
  width: 96.5px;
}

.crs-crd .crs-cnt .bt-cont .inf-bt {
  position: absolute;
  bottom: 15px;
}

/* End Courses */
/* Start Friends */

.Friends .cards {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

@media (max-width: 767px) {
  .Friends .cards {
    grid-template-columns: minmax(200px, 1fr);
    gap: 10px;
  }
}

.cards .frd-crd .frd-prf .frd-srv {
  width: 70px;
  height: 10px;
  left: -10px;
  top: -10px;
}

.cards .frd-crd .frd-prf .img-cont img,
.cards .frd-crd .frd-prf .frd-srv i {
  transition: var(--main-duration);
}

.cards .frd-crd .frd-prf .img-cont img:hover {
  transform: scale(1.1);
}

.cards .frd-crd .frd-prf .frd-srv i:hover {
  color: var(--white-color);
  background-color: var(--blue-alt-color);
  cursor: pointer;
}

.cards .frd-crd .frd-inf .prg-rmv {
  display: flex;
  gap: 5px;
}
.cards .frd-crd .frd-inf {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* End Friends */
/* Start Files */

.fl-cnt .upld-cnt .upld-inf .upld-crd .upld-nm .icn-cont i {
  width: 40px;
  height: 40px;
}

@media (max-width: 767px) {
  .fl-cnt .upld-cnt .crd-title h2 {
    text-align: center;
  }
}

.fl-cnt .upld-cnt .upld-inf {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fl-cnt .upld-cnt .upld-inf .bt-cont .upld-bt {
  height: 40px;
  user-select: none;
}

.fl-cnt .upld-cnt .upld-inf .bt-cont .upld-bt:hover i {
  position: relative;
  bottom: 0px;
  animation: up-angel 0.5s alternate ease-in-out infinite;
}

@keyframes up-angel {
  from {
    bottom: 0px;
  }
  to {
    bottom: 5px;
  }
}

.fl-cnt .cards {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.fl-crd .fst-cont .icn-cont {
  height: 10px;
}

.fl-cnt {
  grid-auto-flow: column;
  grid-template-columns: 1fr;
}

.fl-cnt .upld-cnt {
  min-width: 260px;
}

@media (max-width: 767px) {
  .fl-cnt {
    grid-auto-flow: row;
    grid-template-rows: 1fr;
  }
  .fl-cnt .cards {
    order: 2;
  }
  .fl-cnt .upld-cnt {
    order: 1;
  }
}

.Plans .cards .plan-crd sup {
  right: 85px;
  top: 12px;
}

.Plans .cards .plan-crd:last-child sup {
  right: 105px;
  top: 12px;
}

.Plans .cards .plan-crd:first-child .price-cont {
  background-color: var(--green-color);
  border: var(--white-color) 2px solid;
  box-shadow: 0px 0px 0px 2px var(--green-color);
  border-radius: 0;
}

.Plans .cards .plan-crd:nth-child(2) .price-cont {
  background-color: var(--blue-color);
  border: var(--white-color) 2px solid;
  box-shadow: 0px 0px 0px 2px var(--blue-color);
  border-radius: 0;
}

.Plans .cards .plan-crd:nth-child(3) .price-cont {
  background-color: var(--orange-color);
  border: var(--white-color) 2px solid;
  box-shadow: 0px 0px 0px 2px var(--orange-color);
  border-radius: 0;
}

.Plans .cards {
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  gap: 20px;
}

@media (max-width: 767px) {
  .Plans .cards {
    grid-template-columns: minmax(250px, 1fr);
    gap: 10px;
  }
}

.Plans .cards .plan-crd .fa-circle-info:hover {
  cursor: pointer;
  color: var(--black-alt-color);
  transition: var(--main-duration);
}

.Plans .cards .plan-crd:nth-child(1) .curn-pln-cond,
.Plans .cards .plan-crd:nth-child(2) .curn-pln-cond,
.Plans .cards .plan-crd:nth-child(3) .join-pln-cond {
  display: none;
}