framework-elements.css

/* start framework */
/* start colors / background colors / border-colors */
.transp-cl {
  color: transparent;
}
.transp-cl-bf::before {
  color: transparent;
}
.transp-cl-bf::after {
  color: transparent;
}

.transp-bg {
  background-color: transparent;
}
.transp-bg-bf::before {
  background-color: transparent;
}
.transp-bg-bf::after {
  background-color: transparent;
}

.black-cl {
  color: black;
}
.black-cl-bf::before {
  color: black;
}
.black-cl-bf::after {
  color: black;
}

.black-bg {
  background-color: black;
}
.black-bg-bf::before {
  background-color: black;
}
.black-bg-bf::after {
  background-color: black;
}

.tw-cl {
  color: var(--color-twitter);
}
.tw-cl-bf::before {
  color: var(--color-twitter);
}
.tw-cl-af::after {
  color: var(--color-twitter);
}

.tw-bg {
  background-color: var(--color-twitter);
}
.tw-bg-bf::before {
  background-color: var(--color-twitter);
}
.tw-bg-af::after {
  background-color: var(--color-twitter);
}

.fb-cl {
  color: var(--color-facebook);
}
.fb-cl-bf::before {
  color: var(--color-facebook);
}
.fb-cl-af::after {
  color: var(--color-facebook);
}

.fb-bg {
  background-color: var(--color-facebook);
}
.fb-bg-bf::before {
  background-color: var(--color-facebook);
}
.fb-bg-af::after {
  background-color: var(--color-facebook);
}

.lk-cl {
  color: var(--color-linkedin);
}
.lk-cl-bf::before {
  color: var(--color-linkedin);
}
.lk-cl-af::after {
  color: var(--color-linkedin);
}

.lk-bg {
  background-color: var(--color-linkedin);
}
.lk-bg-bf::before {
  background-color: var(--color-linkedin);
}
.lk-bg-af::after {
  background-color: var(--color-linkedin);
}

.yt-cl {
  color: var(--color-youtube);
}
.yt-cl-bf::before {
  color: var(--color-youtube);
}
.yt-cl-af::after {
  color: var(--color-youtube);
}

.yt-bg {
  background-color: var(--color-youtube);
}
.yt-bg-bf::before {
  background-color: var(--color-youtube);
}
.yt-bg-af::after {
  background-color: var(--color-youtube);
}

.yt-cl-ac {
  color: #bc2f2f;
}

.white-cl {
  color: white;
}
.white-cl-bf::before {
  color: white;
}
.white-cl-af::after {
  color: white;
}

.white-bg {
  background-color: white;
}
.white-bg-bf::before {
  background-color: white;
}
.white-bg-af::after {
  background-color: white;
}

.red-cl {
  color: var(--color-three);
}
.red-cl-bf::before {
  color: var(--color-three);
}
.red-cl-af::after {
  color: var(--color-three);
}

.red-bg {
  background-color: var(--color-three);
}
.red-bg-bf::before {
  background-color: var(--color-three);
}
.red-bg-af::after {
  background-color: var(--color-three);
}

.grey-1-cl {
  color: var(--color-one);
}
.grey-1-cl-bf::before {
  color: var(--color-one);
}
.grey-1-cl-af::after {
  color: var(--color-one);
}

.grey-1-bg {
  background-color: var(--color-one);
}
.grey-1-bg-bf::before {
  background-color: var(--color-one);
}
.grey-1-bg-af::after {
  background-color: var(--color-one);
}

.grey-2-cl {
  color: var(--color-two);
}
.grey-2-cl-bf::before {
  color: var(--color-two);
}
.grey-2-cl-af::after {
  color: var(--color-two);
}

.grey-2-bg {
  background-color: var(--color-two);
}
.grey-2-bg-bf::before {
  background-color: var(--color-two);
}
.grey-2-bg-af::after {
  background-color: var(--color-two);
}

.grey-5-cl {
  color: var(--color-five);
}
.grey-5-cl-bf::before {
  color: var(--color-five);
}
.grey-5-cl-af::after {
  color: var(--color-five);
}

.grey-5-bg {
  background-color: var(--color-five);
}
.grey-5-bg-bf::before {
  background-color: var(--color-five);
}
.grey-5-bg-af::after {
  background-color: var(--color-five);
}

.blue-cl {
  color: var(--color-six);
}
.blue-cl-bf::before {
  color: var(--color-six);
}
.blue-cl-af::after {
  color: var(--color-six);
}

.blue-bg {
  background-color: var(--color-six);
}
.blue-bg-bf::before {
  background-color: var(--color-six);
}
.blue-bg-af::after {
  background-color: var(--color-six);
}

.orange-cl {
  color: var(--color-seven);
}
.orange-cl-bf::before {
  color: var(--color-seven);
}
.orange-cl-af::after {
  color: var(--color-seven);
}

.orange-bg {
  background-color: var(--color-seven);
}
.orange-bg-bf::before {
  background-color: var(--color-seven);
}
.orange-bg-af::after {
  background-color: var(--color-seven);
}

.green-cl {
  color: var(--color-eight);
}
.green-cl-bf::before {
  color: var(--color-eight);
}
.green-cl-af::after {
  color: var(--color-eight);
}

.green-bg {
  background-color: var(--color-eight);
}
.green-bg-bf::before {
  background-color: var(--color-eight);
}
.green-bg-af::after {
  background-color: var(--color-eight);
}
/* end colors */
/* start Font */
/* start Font Weight */
.ft-wg-400 {
  font-family: 'CairoRegular', sans-serif;
}
.ft-wg-400-bf::before {
  font-family: 'CairoRegular', sans-serif;
}
.ft-wg-400-af::after {
  font-family: 'CairoRegular', sans-serif;
}

.ft-wg-600 {
  font-family: 'CairoSemiBold', sans-serif;
}
.ft-wg-600-bf::before {
  font-family: 'CairoSemiBold', sans-serif;
}
.ft-wg-600-af::after {
  font-family: 'CairoSemiBold', sans-serif;
}

.ft-wg-700 {
  font-family: 'CairoBold', sans-serif;
}
.ft-wg-700-bf::before {
  font-family: 'CairoBold', sans-serif;
}
.ft-wg-700-af::after {
  font-family: 'CairoBold', sans-serif;
}
/* end font weight */
/* start font size */
.ft-sz-0-6 {
  font-size: 0.6rem;
}
.ft-sz-0-6-af::after {
  font-size: 0.6rem;
}
.ft-sz-0-6-bf::before {
  font-size: 0.6rem;
}

.ft-sz-0-65 {
  font-size: 0.65rem;
}
.ft-sz-0-65-af::after {
  font-size: 0.65rem;
}
.ft-sz-0-65-bf::before {
  font-size: 0.65rem;
}

.ft-sz-0-7 {
  font-size: 0.7rem;
}
.ft-sz-0-7-af::after {
  font-size: 0.7rem;
}
.ft-sz-0-7-bf::before {
  font-size: 0.7rem;
}

.ft-sz-0-75 {
  font-size: 0.75rem;
}
.ft-sz-0-75-af::after {
  font-size: 0.75rem;
}
.ft-sz-0-75-bf::before {
  font-size: 0.75rem;
}

.ft-sz-0-8 {
  font-size: 0.8rem;
}
.ft-sz-0-8-af::after {
  font-size: 0.8rem;
}
.ft-sz-0-8-bf::before::before {
  font-size: 0.8rem;
}

.ft-sz-0-85 {
  font-size: 0.85rem;
}
.ft-sz-0-85-af::after {
  font-size: 0.85rem;
}
.ft-sz-0-85-bf::before::before {
  font-size: 0.85rem;
}

.ft-sz-0-9 {
  font-size: 0.9rem;
}
.ft-sz-0-9-af::after {
  font-size: 0.9rem;
}
.ft-sz-0-9-bf::before::before {
  font-size: 0.9rem;
}

.ft-sz-1 {
  font-size: 1rem;
}
.ft-sz-1-af::after {
  font-size: 1rem;
}
.ft-sz-1-bf::before::before {
  font-size: 1rem;
}

.ft-sz-1-1 {
  font-size: 1.1rem;
}
.ft-sz-1-1-af::after {
  font-size: 1.1rem;
}
.ft-sz-1-1-bf::before::before {
  font-size: 1.1rem;
}

.ft-sz-1-2 {
  font-size: 1.2rem;
}
.ft-sz-1-2-af::after {
  font-size: 1.2rem;
}
.ft-sz-1-2-bf::before::before {
  font-size: 1.2rem;
}

.ft-sz-1-3 {
  font-size: 1.3rem;
}
.ft-sz-1-3-af::after {
  font-size: 1.3rem;
}
.ft-sz-1-3-bf::before::before {
  font-size: 1.3rem;
}

.ft-sz-1-4 {
  font-size: 1.4rem;
}
.ft-sz-1-4-af::after {
  font-size: 1.4rem;
}
.ft-sz-1-4-bf::before::before {
  font-size: 1.4rem;
}

.ft-sz-2 {
  font-size: 2rem;
}
.ft-sz-2-af::after {
  font-size: 2rem;
}
.ft-sz-2-bf::before::before {
  font-size: 2rem;
}
/* end font size */
/* end Font */
/* Display */
/* start display block */
.dp-bc {
  display: block;
}
.dp-bc-bf::before {
  display: block;
}
.dp-bc-af::after {
  display: block;
}
/* end display block */
/* start display flex  */
.dp-fx {
  display: flex;
}
.dp-fx-bf::before {
  display: flex;
}
.dp-fx-af::after {
  display: flex;
}
/* end display flex  */
/* start display grid  */
.dp-gd {
  display: grid;
}
.dp-gd-bf::before {
  display: grid;
}
.dp-gd-af::after {
  display: grid;
}
/* end display grid  */
.fx-js-bt {
  justify-content: space-between;
}

.fx-js-ct {
  justify-content: center;
}

.fx-js-end {
  justify-content: flex-end;
}

.fx-al-ct {
  align-items: center;
}

.fx-dir-col {
  flex-direction: column;
}

/* start width classes */
.width-10-af::after {
  width: 10%;
}
.width-20-af::after {
  width: 20%;
}
.width-30-af::after {
  width: 30%;
}
.width-40-af::after {
  width: 40%;
}
.width-50-af::after {
  width: 50%;
}
.width-60-af::after {
  width: 60%;
}
.width-70-af::after {
  width: 70%;
}
.width-80-af::after {
  width: 80%;
}
.width-90-af::after {
  width: 90%;
}
.width-100-af::after {
  width: 100%;
}

.width-10-bf::before {
  width: 10%;
}
.width-20-bf::before {
  width: 20%;
}
.width-30-bf::before {
  width: 30%;
}
.width-40-bf::before {
  width: 40%;
}
.width-50-bf::before {
  width: 50%;
}
.width-60-bf::before {
  width: 60%;
}
.width-70-bf::before {
  width: 70%;
}
.width-80-bf::before {
  width: 80%;
}
.width-90-bf::before {
  width: 90%;
}
.width-100-bf::before {
  width: 100%;
}
/* end width classes */
/* start remove outline from input:focus-within */
.remove-outline {
  outline: none;
}
/* start remove default list style */
.remove-lt-style {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* end remove default list style */
/* start position */
.ps-rl {
  position: relative;
}
.ps-rl-bf::before {
  position: relative;
}
.ps-rl-af::after {
  position: relative;
}
/* end position */


/* start text decoration */
.txt-deco-ln-thr {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
/* end text decoration */
/* start Margin */
.margin-0 {
  margin: 0;
}
/* end Margin */
/* start add Switch Toggle */
.toggle > label {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 1.5rem;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle i {
    position: absolute;
    cursor: pointer;
    top: 1px;
    left: 3px;
    right: 0;
    bottom: 0;
    background-color: #ccc;
}

.toggle i:before {
    position: absolute;
    content: '\f057';
    left: 1px;
    top: 2px;
    font-size: 1.22rem;
    color: white;
    transition-duration: 0.4s;
}

.toggle input:checked + i {
  background-color: #2196f3;
}

.toggle input:checked + i:before {
  content: '\f058';
  transform: translateX(35px);
}

.toggle i {
  border-radius: 34px;
}
/* end add Switch Toggle */
/* start Add custom checkbox */

.c-checkbox label {
  position: relative;
  width: 3rem;
  height: 3rem;
  left: 1rem;
}

.c-checkbox input {
  opacity: 0;
  width: 0;
  height: 0;
}

.c-checkbox span.check {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -1rem;
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid;
  border-color: var(--color-five);
  border-radius: 0.2rem;
}

.c-checkbox span.check::before {
  content: '\f00c';
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: scale(0) rotate(90deg);
  transition-duration: 0.2s;
}
.c-checkbox input:checked + span.check {
  border-color: var(--color-six);
}

.c-checkbox input:checked + span.check:before {
  transform: scale(1) rotate(0deg);
  box-shadow: 0px 0 2px 1px var(--color-six);
}

.c-checkbox span.desc {
  margin-left: 0.5rem;
}

.widgets-content .c-checkbox {
  flex-basis: max-content;
}
/* end Add custom checkbox */
/* start Add custom rounded checkbox */

.r-checkbox label {
  position: relative;
  width: 3rem;
  height: 3rem;
  left: 1rem;
}

.r-checkbox input {
  opacity: 0;
  width: 0;
  height: 0;
}

.r-checkbox span.check {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -1rem;
  width: 1rem;
  height: 1rem;
  border: 1px solid;
  border-color: var(--color-five);
  border-radius: 50%;
}

.r-checkbox span.check::before {
  content: '';
  position: absolute;
  width: 70%;
  height: 70%;
  right: 0.15rem;
  top: 0.15rem;
  border-radius: 50%;
  transform: scale(0) rotate(90deg);
  transition-duration: 0.2s;
}

.r-checkbox input:checked + span.check {
  border-color: var(--color-six);
}

.r-checkbox input:checked + span.check:before {
  transform: scale(1) rotate(0deg);
}

.r-checkbox span.desc {
  margin-left: 0.5rem;
}

.backup-date-content .r-checkbox {
  flex-basis: max-content;
}

/* end Add custom rounded checkbox */
/* start special underline 01*/
.special-underline-1::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background-color: black;
  outline: 0.2rem solid white;
  z-index: 1;
}

.special-underline-1::after {
  content: '';
  width: 4rem;
  height: 0.1rem;
  position: absolute;
  top: 2.26rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
}
/* end special underline */
/* start special underline 02 */
.special-underline-2::before {
  content: '';
  position: absolute;
  width: 25%;
  height: 0.1rem;
  background-color: black;
  bottom: 0rem;
  z-index: 2;
}

.special-underline-2::after {
  content: '';
  position: absolute;
  width: 75%;
  height: 0.1rem;
  background-color: white;
  bottom: 0rem;
  left: 0;
  z-index: 1;
}
/* end special underline 02 */
/* start add VIP */
.vip::before {
  content: 'VIP';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
  font-size: 2.8rem;
  opacity: 0.1;
}
/* end add VIP */
/*start FontAwesome Icons as Pseudo-Elements */
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.dashboard::before {
  content: '\f080';
}

.settings::before {
  content: '\f013';
}

.profile::before {
  content: '\f007';
}

.projects::before {
  content: '\f542';
}

.courses::before {
  content: '\f19d';
}

.friends::before {
  content: '\f2bd';
}

.files::before {
  content: '\f15b';
}

.plans::before {
  content: '\f09d';
}

.magnifying-glass::before {
  content: '\f002';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 45%;
  left: 0.5rem;
  transform: translateY(-50%);
  color: #9b9b9b;
}

.dashboard::before,
.settings::before,
.profile::before,
.projects::before,
.courses::before,
.friends::before,
.files::before,
.plans::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: relative;
  left: -0.5rem;
}
/*end FontAwesome Icons as Pseudo-Elements */

/* start notification true */
.notif-true::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  background-color: var(--color-three);
  position: absolute;
  border-radius: 50%;
  top: -0.3rem;
  right: -0.1rem;
}
/* end notification true */
/* start main content card titles */
.title {
  position: relative;
  z-index: 1;
}

.title h2 {
  margin: 0;
  margin-top: -0.5rem;
  font-size: 1.2rem;
}

.title p {
  margin-top: -0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-nine);
}
/* end main content card titles */
/* start default button style */
.def-btn-st {
  border-style: none;
  border-radius: 0.3rem;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
}
/* end button */
/* start add pointer affect */
.pointer-effect {
  cursor: pointer;
}
.pointer-effect-bf::before {
  cursor: pointer;
}
.pointer-effect-af::after {
  cursor: pointer;
}
/* end add pointer affect */
/* start small box rectangle */
.box-rec-small {
  display: flex;
  align-items: center;
  padding: 0rem 0.5rem;
  border-radius: 0.2rem;
  font-size: 0.65rem;
  width: fit-content;
  height: auto;
  text-align: center;
}

.box-rec-small-bf::before {
  display: flex;
  align-items: center;
  padding: 0rem 0.5rem;
  border-radius: 0.2rem;
  font-size: 0.65rem;
  width: fit-content;
  height: auto;
  text-align: center;
}

.box-rec-small-af::after {
  display: flex;
  align-items: center;
  padding: 0rem 0.5rem;
  border-radius: 0.2rem;
  font-size: 0.65rem;
  width: fit-content;
  height: auto;
  text-align: center;
}
/* end small box rectangle */


.project-progress-circle-bf::before {
  content: '';
  position: absolute;
  left: -1.15rem;
  transform: translateX(-50%);
  top: 0.15rem;
  width: 1.3rem;
  height: 1.3rem;
  border: 1px solid var(--color-six);
  border-radius: 50%;
}

.project-progress-circle-af::after {
  content: '';
  position: absolute;
  left: -1.15rem;
  top: 0.15rem;
  transform: translateX(-50%);
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  border: 2px solid white;
}
/* end remove outline from input:focus-within */
.v-hid {
  display: none;
}
/* end framework */