.icon-svg {
  --icon-width: 1.625rem;
  --icon-height: 1.625rem;
  --icon-img-url: url('/content/images/icons/x.svg');
  --icon-main-color: #fff;
  --icon-reverse-color: transparent;
  --icon-color: var(--icon-main-color);
  --icon-wrapper-width: auto;
  --icon-wrapper-height: auto;
  --icon-wrapper-background-color: var(--icon-reverse-color);
  --icon-wrapper-background-color-hover: var(--icon-main-color);
  --icon-wrapper-border-radius: 0;
  --icon-wrapper-border-width: 0;
  --icon-wrapper-border-style: solid;
  --icon-wrapper-border-color: var(--icon-main-color);
  --icon-wrapper-border-color-hover: var(--icon-reverse-color);
  --icon-scale: 1;

  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-wrapper-width);
  height: var(--icon-wrapper-height);
  min-width: var(--icon-wrapper-width);
  min-height: var(--icon-wrapper-height);
  background: var(--icon-wrapper-background-color);
  border: var(--icon-wrapper-border-width) var(--icon-wrapper-border-style) var(--icon-wrapper-border-color);
  border-radius: var(--icon-wrapper-border-radius);
  padding: 0;
}

.icon-svg.icon-after::after {
  content: '';
  display: block;
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  -webkit-mask-image: var(--icon-img-url);
  mask-image: var(--icon-img-url);
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--icon-color);
  scale: var(--icon-scale, 1);
}

.icon-svg:not(.icon-after)::before {
  content: '';
  display: block;
  min-width: var(--icon-width);
  min-height: var(--icon-height);
  -webkit-mask-image: var(--icon-img-url);
  mask-image: var(--icon-img-url);
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--icon-color);
  scale: var(--icon-scale, 1);
}

.icon-svg.icon-x1-5 {
  --icon-scale: 1.5;
}

.icon-svg.icon-x2 {
  --icon-scale: 2;
}

.icon-svg.icon-x2-2 {
  --icon-scale: 2.2;
}

.icon-svg.icon-red {
  --icon-main-color: var(--brand-red);
}

.icon-svg.icon-blue {
  --icon-main-color: var(--brand-blue-main);
}

.icon-svg.icon-blue-secondary {
  --icon-main-color: var(--brand-blue-secondary);
}

.icon-svg.icon-grey {
  --icon-main-color: var(--brand-grey);
}

.icon-svg.icon-spec-green-fresh {
  --icon-main-color: var(--spec-green-fresh);
}

.icon-svg.icon-dark-blue {
  --icon-main-color: var(--brand-dark-blue);
}

.icon-svg.icon-black {
  --icon-main-color: #000;
}

.icon-svg.card-add {
  --icon-img-url: url('/content/images/icons/card-add.svg');
  --icon-width: 45px;
  --icon-height: 45px;
}

.icon-svg.graduation-cap {
  --icon-img-url: url('/content/images/icons/graduation-cap.svg');
  --icon-width: 21px;
  --icon-height: 22px;
}

.icon-svg.circle-clock {
  --icon-img-url: url('/content/images/icons/circle-clock.svg');
  --icon-width: 1.625rem;
  --icon-height: 1.625rem;
}

.icon-svg.award-medal {
  --icon-img-url: url('/content/images/icons/award-medal.svg');
  --icon-width: 29px;
  --icon-height: 37px;
}

.icon-svg.profile {
  --icon-img-url: url('/content/images/icons/profile.svg');
}

.icon-svg.verified-badge-fill {
  --icon-img-url: url('/content/images/icons/verified-badge-fill.svg');
  --icon-width: 21px;
  --icon-height: 21px;
}

.icon-svg.exclamation-point-circle {
  --icon-img-url: url('/content/images/icons/exclamation-point-circle.svg');
  --icon-width: 20px;
  --icon-height: 20px;
}

.icon-svg.bookmark {
  --icon-img-url: url('/content/images/icons/bookmark.svg');
  --icon-width: 11px;
  --icon-height: 14px;
}

.icon-svg.bookmark-outline {
  --icon-img-url: url('/content/images/icons/bookmark-outline.svg');
  --icon-width: 13px;
  --icon-height: 17px;
}

.icon-svg.play-mini-fill {
  --icon-img-url: url('/content/images/icons/play-mini-fill.svg');
  --icon-width: 1.5rem;
  --icon-height: 1.5rem;
}

.icon-svg.hand-icon {
  --icon-img-url: url('/content/images/icons/hand-icon.svg');
  --icon-width: 18px;
  --icon-height: 17px;
}

.icon-svg.live-icon {
  --icon-img-url: url('/content/images/icons/live-icon.svg');
  --icon-width: 17px;
  --icon-height: 12px;
}

.icon-svg.arrow-line-left {
  --icon-img-url: url('/content/images/icons/arrow-line-left.svg');
  --icon-width: 1rem;
  --icon-height: 1rem;
}

.icon-svg.arrow-line-right {
  --icon-img-url: url('/content/images/icons/arrow-line-right.svg');
  --icon-width: 1rem;
  --icon-height: 1rem;
}

.icon-svg.arrow-right {
  --icon-img-url: url('/content/images/icons/arrow-right.svg');
  --icon-width: 0.5rem;
  --icon-height: 0.75rem;
}

.icon-svg.arrow-left {
  --icon-img-url: url('/content/images/icons/arrow-left.svg');
  --icon-width: 0.5rem;
  --icon-height: 0.75rem;
}

.icon-svg.arrow-up {
  --icon-img-url: url('/content/images/icons/arrow-up.svg');
  --icon-width: 13px;
  --icon-height: 18px;
}

.icon-svg.arrow-thin-up {
  --icon-img-url: url('/content/images/icons/arrow-thin-up.svg');
  --icon-width: 0.625rem;
  --icon-height: 0.375rem;
}

.icon-svg.arrow-thin-down {
  --icon-img-url: url('/content/images/icons/arrow-thin-down.svg');
  --icon-width: 0.625rem;
  --icon-height: 0.375rem;
}

.icon-svg.icon-edit-03 {
  --icon-img-url: url('/content/images/icons/edit-03.svg');
  --icon-width: 1rem;
  --icon-height: 1rem;
}

.icon-svg.icon-edit {
  --icon-img-url: url('/content/images/icons/edit.svg');
  --icon-width: 1.25rem;
  --icon-height: 1.25rem;
}

.icon-svg.icon-x {
  --icon-img-url: url('/content/images/icons/x.svg');
  --icon-width: 0.75rem;
  --icon-height: 0.75rem;
}

.icon-svg.icon-x-circle {
  --icon-img-url: url('/content/images/icons/circle-x.svg');
  --icon-width: 17px;
  --icon-height: 17px;
}

.icon-svg.icon-x-bolder {
  --icon-img-url: url('/content/images/icons/x-bolder.svg');
  --icon-width: 0.75rem;
  --icon-height: 0.75rem;
}

.icon-svg.icon-filter {
  --icon-img-url: url('/content/images/icons/icon-filter.svg');
  --icon-width: 20px;
  --icon-height: 15px;
}

.icon-svg.icon-plus {
  --icon-img-url: url('/content/images/icons/plus-r.svg');
  --icon-width: 14px;
  --icon-height: 14px;
}

.icon-svg.clock-outline {
  --icon-img-url: url('/content/images/icons/clock-outline.svg');
  --icon-width: 24px;
  --icon-height: 25px;
}

.icon-svg.calendar {
  --icon-img-url: url('/content/images/icons/calendar.svg');
  --icon-width: 1.25rem;
  --icon-height: 1.25rem;
}

.icon-svg.calendar-slim {
  --icon-img-url: url('/content/images/icons/calendar-slim.svg');
  --icon-width: 20px;
  --icon-height: 23px;
}

.icon-svg.calendar-slim-1 {
  --icon-img-url: url('/content/images/icons/calendar-slim-1.svg');
  --icon-width: 21px;
  --icon-height: 23px;
}

.icon-svg.calendar-slim-checked {
  --icon-img-url: url('/content/images/icons/calendar-slim-checked.svg');
  --icon-width: 21px;
  --icon-height: 23px;
}

.icon-svg.eye-slash {
  --icon-img-url: url('/content/images/icons/eye-slash.svg');
  --icon-width: 1.5rem;
  --icon-height: 1.5rem;
}

.icon-svg.eye {
  --icon-img-url: url('/content/images/icons/eye.svg');
  --icon-width: 1.5rem;
  --icon-height: 1.5rem;
}

.icon-svg.eye-2 {
  --icon-img-url: url('/content/images/icons/eye-2.svg');
  --icon-width: 1rem;
  --icon-height: 0.75rem;
}

.icon-svg.book-open-2 {
  --icon-img-url: url('/content/images/icons/book-open-2.svg');
  --icon-width: 22px;
  --icon-height: 21px;
}

.icon-svg.search-line {
  --icon-img-url: url('/content/images/icons/search-line.svg');
  --icon-width: 21px;
  --icon-height: 21px;
}

.icon-svg.file-checked {
  --icon-img-url: url('/content/images/icons/file-checked.svg');
  --icon-width: 18px;
  --icon-height: 23px;
}

.icon-svg.tick-circle-outline {
  --icon-img-url: url('/content/images/icons/tick-circle-outline-w.svg');
  --icon-width: 1.125rem;
  --icon-height: 1.125rem;
}

.icon-svg.info-cycle {
  --icon-img-url: url('/content/images/icons/info-cycle.svg');
  --icon-width: 0.75rem;
  --icon-height: 0.75rem;
}

.icon-svg.download {
  --icon-img-url: url('/content/images/icons/download.svg');
  --icon-width: 0.875rem;
  --icon-height: 0.75rem;
}

.icon-svg.download-2 {
  --icon-img-url: url('/content/images/icons/download-2.svg');
  --icon-width: 1rem;
  --icon-height: 1rem;
}

.icon-svg.setting {
  --icon-img-url: url('/content/images/icons/setting.svg');
  --icon-width: 1.25rem;
  --icon-height: 1.25rem;
}

.icon-svg.setting-2 {
  --icon-img-url: url('/content/images/icons/setting-2.svg');
  --icon-width: 0.875rem;
  --icon-height: 0.875rem;
}

.icon-svg.trash {
  --icon-img-url: url('/content/images/icons/trash.svg');
  --icon-width: 0.875rem;
  --icon-height: 0.875rem;
}

.icon-svg.medal-crown {
  --icon-img-url: url('/content/images/icons/medal-crown.svg');
  --icon-width: 1rem;
  --icon-height: 1rem;
}

.icon-svg.medal-star {
  --icon-img-url: url('/content/images/icons/medal-star.svg');
  --icon-width: 1.0625rem;
  --icon-height: 1.0625rem;
}

.icon-svg.medal-star-2 {
  --icon-img-url: url('/content/images/icons/medal-star-2.svg');
  --icon-width: 37px;
  --icon-height: 37px;
}

.icon-svg.medal-free {
  --icon-img-url: url('/content/images/icons/medal-free.svg');
  --icon-width: 1.0625rem;
  --icon-height: 1.0625rem;
}

.icon-svg.check-circle {
  --icon-img-url: url('/content/images/icons/check-circle.svg');
  --icon-width: 23px;
  --icon-height: 23px;
}

.icon-svg.icon-check {
  --icon-img-url: url('/content/images/icons/check-w.svg');
  --icon-width: 10px;
  --icon-height: 7px;
}

.icon-svg.receipt-item {
  --icon-img-url: url('/content/images/icons/receipt-item.svg');
  --icon-width: 37px;
  --icon-height: 38px;
}

.icon-svg.missile {
  --icon-img-url: url('/content/images/icons/missile-w.svg');
  --icon-width: 15px;
  --icon-height: 15px;
}

.icon-svg.bank-card-2-line {
  --icon-img-url: url('/content/images/icons/bank-card-2-line.svg');
  --icon-width: 20px;
  --icon-height: 18px;
}

.icon-svg.upload {
  --icon-img-url: url('/content/images/icons/upload-2-line.svg');
  --icon-width: 0.875rem;
  --icon-height: 0.75rem;
}

.icon-svg.clock {
  --icon-img-url: url('/content/images/icons/blue-clock.svg');
  --icon-width: 0.896rem;
  --icon-height: 0.896rem;
}

.icon-svg.enroll-in-course {
  --icon-img-url: url('/content/images/icons/blue-enroll-in-course.svg');
  --icon-width: 0.669rem;
  --icon-height: 0.777rem;
}

.icon-svg.play-video {
  --icon-img-url: url('/content/images/icons/blue-play-video.svg');
  --icon-width: 0.718rem;
  --icon-height: 0.718rem;
}

.icon-svg.timer {
  --icon-img-url: url('/content/images/icons/blue-timer.svg');
  --icon-width: 0.746rem;
  --icon-height: 0.746rem;
}

.icon-svg.cicrle-cup {
  --icon-img-url: url('/content/images/icons/cicrle-cup.svg');
  --icon-width: 1.75rem;
  --icon-height: 1.75rem;
}

.icon-svg.cup {
  --icon-img-url: url('/content/images/icons/cup.svg');
  --icon-width: 1rem;
  --icon-height: 1rem;
}

.icon-svg.play-media {
  --icon-img-url: url('/content/images/icons/play-media.svg');
  --icon-width: 0.729rem;
  --icon-height: 0.729rem;
}

.icon-svg.folder {
  --icon-img-url: url('/content/images/icons/folder.svg');
  --icon-width: 0.728rem;
  --icon-height: 0.728rem;
}

.icon-svg.calendar-webinar {
  --icon-img-url: url('/content/images/icons/calendar-webinar.svg');
  --icon-width: 0.938rem;
  --icon-height: 1.081rem;
}

.icon-svg.chevron-right {
  --icon-img-url: url('/content/images/icons/chevron-right.svg');
  --icon-width: 0.3rem;
  --icon-height: 1.081rem;
}

.icon-svg.chevron-left {
  --icon-img-url: url('/content/images/icons/chevron-left.svg');
  --icon-width: 0.3rem;
  --icon-height: 1.081rem;
}

.icon-svg.single-file {
  --icon-img-url: url('/content/images/icons/single-file.svg');
  --icon-width: 2.177rem;
  --icon-height: 2.292rem;
}

.icon-svg.download-boder {
  --icon-img-url: url('/content/images/icons/download-boder.svg');
  --icon-width: 0.749rem;
  --icon-height: 0.749rem;
}

.icon-svg.drag-move-fill {
  --icon-img-url: url('/content/images/icons/drag-move-fill.svg');
  --icon-width: 15px;
  --icon-height: 15px;
}

.icon-svg.document-text {
  --icon-img-url: url('/content/images/icons/document-text.svg');
  --icon-width: 26.92px;
  --icon-height: 28.33px;
}

.icon-svg.gallery {
  --icon-img-url: url('/content/images/icons/gallery.svg');
  --icon-width: 29px;
  --icon-height: 29px;
}

.icon-svg.music {
  --icon-img-url: url('/content/images/icons/music.svg');
  --icon-width: 25.19px;
  --icon-height: 28.33px;
}

.icon-svg.note-text {
  --icon-img-url: url('/content/images/icons/note-text.svg');
  --icon-width: 25.5px;
  --icon-height: 29.4px;
}

.icon-svg.t-icon {
  --icon-img-url: url('/content/images/icons/t-icon.svg');
  --icon-width: 17px;
  --icon-height: 15px;
}

.icon-svg.t-bg-icon {
  --icon-img-url: url('/content/images/icons/t-bg-icon.svg');
  --icon-width: 29px;
  --icon-height: 29px;
}

.icon-svg.video-play {
  --icon-img-url: url('/content/images/icons/video-play.svg');
  --icon-width: 29px;
  --icon-height: 29px;
}

.icon-svg.task {
  --icon-img-url: url('/content/images/icons/task.svg');
  --icon-width: 17.64px;
  --icon-height: 16.66px;
}

.icon-svg.arrow-2-ways {
  --icon-img-url: url('/content/images/icons/arrow-2-ways.svg');
  --icon-width: 21.5px;
  --icon-height: 21.5px;
}

.icon-svg.check-question {
  --icon-img-url: url('/content/images/icons/check-white.svg');
  --icon-width: 15px;
  --icon-height: 15px;
}

.icon-svg.star-grey {
  --icon-img-url: url('/content/images/icons/star-grey.svg');
  --icon-width: 24px;
  --icon-height: 24px;
}

.icon-svg.icon-quotes {
  --icon-img-url: url('/content/images/icons/quotes.svg');
  --icon-width: 23px;
  --icon-height: 25px;
}

.icon-svg.shield-tick {
  --icon-img-url: url('/content/images/icons/shield-tick.svg');
  --icon-width: 13.4px;
  --icon-height: 16.5px;
}

.icon-svg.icon-circle-tick {
  --icon-img-url: url('/content/images/icons/circle-tick.svg');
  --icon-width: 14px;
  --icon-height: 14px;
}

.icon-svg.icon-circle-outline-empty {
  --icon-img-url: url('/content/images/icons/circle-outline-empty.svg');
  --icon-width: 14px;
  --icon-height: 14px;
}

.icon-svg.icon-suggest {
  --icon-img-url: url('/content/images/icons/suggest-course.svg');
  --icon-width: 1rem;
  --icon-height: 1rem;
  --icon-main-color: #fdaa05;
}

.icon-svg.icon-bookmark {
  --icon-img-url: url('/content/images/icons/bookmark-suggestion.svg');
  --icon-width: 1rem;
  --icon-height: 1rem;
}

.icon-svg.arrow-line-left {
  --icon-img-url: url('/content/images/icons/arrow-line-left.svg');
  --icon-width: 1rem;
  --icon-height: 1rem;
}

.icon-svg.arrow-line-right {
  --icon-img-url: url('/content/images/icons/arrow-line-right.svg');
  --icon-width: 1rem;
  --icon-height: 1rem;
}

.icon-svg.arrow-up {
  --icon-img-url: url('/content/images/icons/arrow-up.svg');
  --icon-width: 1rem;
  --icon-height: 1rem;
}

.icon-svg.arrow-down {
  --icon-img-url: url('/content/images/icons/arrow-down.svg');
  --icon-width: 1rem;
  --icon-height: 1rem;
}

.icon-svg.arrow-up-s-line {
  --icon-img-url: url('/content/images/icons/arrow-up-s-line.svg');
  --icon-width: 1rem;
  --icon-height: 1rem;
}

.btn-icon-text {
  color: var(--btn-brand-color);
}

.btn-icon {
  --btn-icon-gap: 0;
  gap: var(--btn-icon-gap);
  color: var(--icon-main-color);
}

@media (hover: hover) {
  .btn-icon-text:hover {
    --icon-color: var(--icon-reverse-color);
    transform: none;
    background-color: var(--icon-wrapper-background-color-hover);
    border-color: var(--icon-wrapper-border-color-hover);
  }

  .btn-icon:hover {
    --icon-color: var(--icon-reverse-color);
    transform: none;
    background-color: var(--icon-wrapper-background-color-hover);
    border-color: var(--icon-wrapper-border-color-hover);
  }
}

.icon-course-bookmark {
  --icon-wrapper-width: 35px;
  --icon-wrapper-height: 35px;
  --icon-width: 13px;
  --icon-height: 17px;
  --icon-wrapper-border-radius: 50%;
  backdrop-filter: blur(14px);

  --icon-img-url: url('/content/images/icons/bookmark-outline.svg');
  --icon-main-color: var(--white);
  --icon-reverse-color: var(--white);
  --icon-wrapper-background-color: var(--brand-grey-20);
  transform: unset;
}

.icon-course-bookmark:hover {
  transform: unset;
  --icon-img-url: url('/content/images/icons/bookmark.svg');
  --icon-wrapper-background-color-hover: var(--brand-grey-20);
}

.icon-course-bookmark:focus {
  outline: none;
}

.icon-course-bookmark.save-bookmark:not(:hover) {
  --icon-img-url: url('/content/images/icons/bookmark.svg');
  --icon-main-color: #ffffff;
  --icon-wrapper-background-color: var(--brand-blue-secondary);
  --icon-reverse-color: var(--brand-blue-secondary);
}