/* Catalog Template CSS */

/**************************************************/
/********** Card Default CSS START ***************/
/*************************************************/
.card-default-custom {min-height: auto !important; padding: 0px .5rem;}
.card-default-custom .content {padding: 15px; background: #fff;}
.card-default-custom .icons {height: 50px; color: #fff;}
.card-default-custom .card-ico-duration {padding: 0px; margin: 1rem; text-align: right; font-size: 16px;}
.card-default-custom .card-ico-duration i {display: inline-block;}
.card-default-custom .catalog-short-desc.empty, .card-default-custom .catalog-short-desc {max-height: 70px; min-height: 120px !important;}
.card-default-custom .catalog-short-desc:not(.empty) {margin-top: 0px !important; min-height: 120px !important;}
.card-default-custom:hover .wcardimg-prog-circle {opacity: 1;  transition-delay: 0.2s; transition-duration: 0.5s;}
.card-default-custom .buttonsfade {opacity: 0; transition-delay: 0.2s; transition-duration: 0.5s;}
.card-default-custom .shordescfade {opacity: 0; transition-delay: 0.2s; transition-duration: 0.5s; width: 100%; min-height: 250px;}
.card-default-custom:hover .buttonsfade {opacity: 1; transition-delay: 0.2s; transition-duration: 0.5s;}
.card-default-custom:hover .shordescfade {opacity: 1; transition-delay: 0.2s; transition-duration: 0.5s; background: #21272a; width: 100%; min-height: 250px;}
.card-default-custom:hover .shordescfade .bcontent .catalog-title {color: #fff !important;}

.card-default-custom:hover .wcardimg-prog-circle {opacity: 1;  transition-delay: 0.2s; transition-duration: 0.5s;}
.card-default-custom .truncate-mutliple-line-2 {display: block; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.card-default-custom .wcardimg {height: 250px !important;}
.card-default-custom .shordescfade .catalog-short-desc {color:#fff !important;}
.card-default-custom .shordescfade .catalog-title {color:#fff !important;}
.card-default-custom .progress-circle-container {margin-top: 60px !important;}
.card-default-custom .border-primary {border-color: #f7b500 !important;}
.card-default-custom .completion-date {min-height: 40px; height: 40px;padding-top: 50px; padding-bottom: 40px;}
.card-default-custom .completion-date svg {margin-top: -4px; color: #24a148;}
/**************************************************/
/*********** Card Default CSS END ****************/
/*************************************************/



/**************************************************/
/******** Card Icon Above Image CSS START ********/
/*************************************************/
.card-icons-above-image-custom .buttonsfade {opacity: 0; transition-delay: 0.2s; transition-duration: 0.5s;}
.card-icons-above-image-custom:hover .buttonsfade {opacity: 1; transition-delay: 0.2s; transition-duration: 0.5s;}

.card-icons-above-image-custom .shordescfade {opacity: 0; transition-delay: 0.2s; transition-duration: 0.5s; width: 100%; min-height: 250px;}
.card-icons-above-image-custom:hover .shordescfade {opacity: 1; transition-delay: 0.2s; transition-duration: 0.5s; background: #21272a; width: 100%; min-height: 250px;}
.card-icons-above-image-custom:hover .shordescfade .bcontent .catalog-title {color: #fff !important;}
.card-icons-above-image-custom .truncate-mutliple-line-2 {display: block; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}

.card-icons-above-image-custom .content {padding: 15px; background: #fff; min-height: 320px;}
.card-icons-above-image-custom .icons {height: 40px; margin-top: 10px; text-align: right;}
.card-icons-above-image-custom .icons .cards-row-container {padding: 0px !important; text-align: left;}
.card-icons-above-image-custom .icons .card-ico-duration {padding: 0px !important; margin: 0px !important;}
.card-icons-above-image-custom .icons .card-ico-duration i {display: none;}

.card-icons-above-image-custom.catalog-card .progress-circle-container {margin-top: 50px;}
.card-icons-above-image-custom .icons-2 {height: 20px; margin-top: 10px; text-align: right; color: #fff !important;}
.card-icons-above-image-custom .icons-2 .card-ico-duration {color: #fff; padding: 0px; margin: 0px; width: 100% !important; max-width: 100% !important; flex: 100%;}
.card-icons-above-image-custom .icons-2 i {color: #fff;}
.card-icons-above-image-custom.catalog-card .progress-circle-container-custom-2 {margin-top: 0px !important;}

.card-icons-above-image-custom.profile:not(.card-no-image), .card-icons-above-image-custom .card-icons.empty {min-height: auto !important;}
.card-icons-above-image-custom {border-radius: 0px !important; padding: 0px .5rem;}
.card-icons-above-image-custom .profile .progress-circle-container {position: inherit !important; margin-top: 50px;}
.card-icons-above-image-custom .profile .progress-circle-container {margin-top: 50px;}
.card-icons-above-image-custom .card-rate {position: absolute; bottom: 10px; width: 100%; padding: 0 10px;}
.card-icons-above-image-custom .truncate-mutliple-line {height: 100px; margin-top: 0px !important;}
.card-icons-above-image-custom .circle-progress-container  .border-primary {border-color: #f7b500 !important; border-width: 6px !important;}
.card-icons-above-image-custom .profile .progress-circle-container {margin-top: 50px !important;}
.progress-circle-container-custom {margin-top: 50px;}
.card-icons-above-image-custom .card-ico-duration {color: #000;}
.card-icons-above-image-custom .profile-buttons a.bx--btn {background: #0f62fe !important; width: 100%; margin-bottom: 1rem;}
.card-icons-above-image-custom .catalog-title-default {font-size: 1.5rem !important;}
.card-icons-above-image-custom .catalog-short-desc.empty, .card-icons-above-image-custom .catalog-short-desc {max-height: 100px; min-height: 0px !important;}
.card-icons-above-image-custom .catalog-short-desc:not(.empty) {margin-top: 0px !important; min-height: 100px !important;}
.card-icons-above-image-custom.catalog-card:not(.card-no-image) {min-height: auto;}
.card-icons-above-image-custom .catalog-card-buttons a {width: 100% !important;}
.card-icons-above-image-custom .bx--row.cards-row-container {margin-left: 0px !important; margin-right: 0px !important; padding-left: 1rem; padding-right: 1rem;}

/**************************************************/
/******** Card Icon Above Image CSS END ********/
/*************************************************/


/**************************************************/
/******** Card Image background CSS Start ********/
/*************************************************/
.card-image-background-custom {border: 0px !important; padding: 0px 1rem;}
.card-image-background-custom .catalog-title {margin: 0px !important; }
.catalog-card.card-image-background-custom {margin: 0px 0px 10px !important;}
.card-image-background-custom .truncate-single-line {height: auto;}
.card-image-background-custom .truncate-mutliple-line > * {color:#fff;}
.card-image-background-custom .catalog-short-desc {margin: 0px;}
.card-image-background-buttons .card-icons span {width: 100% !important; max-width: 100% !important; display: block; flex: 100% !important; text-align: right;}
.card-image-background-custom .catalog-card.card-image-background {min-height: 400px !important;}
.card-image-background-custom .bx--col-lg-12 {width: 100%; flex:100%; max-width: 100% !important;}
.card-image-background-custom .title {padding-top: 70px !important; padding-bottom: 20px; width: 100%; max-width: 100% !important; flex:100% !important;}
.card-image-background-custom .buttons a, .card-image-background-custom .buttons a:hover {width: 100% !important;}
.card-image-background-custom .catalog-title {font-size: 20px; font-weight: bold; text-shadow: none;}
.card-image-background-custom .catalog-short-desc p {font-size: 14px;}

.card-image-background-custom .buttons {min-height:135px !important; text-align: right;}
.card-image-background-custom .catalog-short-desc.empty {height: 70px !important;}
.catalog-card.card-image-background-custom { margin: 0 0 10px !important; padding: 0 .5rem;}
.catalog-card.card-image-background-custom * {text-shadow: none !important; min-height: auto !important;}
.card-image-background-custom .catalog-ratings span.rating-star.active::before, .card-image-background-custom .catalog-ratings[data-enrolled="1"] span.rating-star:hover::before, .card-image-background-custom .catalog-ratings[data-enrolled="1"] span.rating-star:hover ~ span.rating-star::before {color: #fff !important;}
.card-image-background-custom .catalog-ratings span.rating-star::before {content: "\f006" !important;}
.card-image-background-custom .catalog-ratings span.rating-star.active::before {content: "\f005" !important;}
.card-image-background-custom .catalog-ratings[data-enrolled="1"] span.rating-star:hover::before {content: "\f005" !important;}
.card-image-background-custom .catalog-ratings[data-enrolled="1"] span.rating-star:hover ~ span.rating-star::before {content: "\f005" !important;}
.card-image-background-custom .bx--btn--secondary, .card-image-background-custom .bx--btn--primary {background: #6688ff;}
.card-image-background-custom .truncate-mutliple-line {height: 70px !important;}
.card-image-background-custom .truncate-mutliple-line > * {-webkit-line-clamp: 3;}
.card-image-background-custom .catalog-card-buttons {position: absolute; bottom: 10px;right: 0px; width: 80%;}
.card-image-background-custom .catalog-short-desc.empty {min-height: 105px !important;}
.card-image-background-custom .catalog-short-desc:not(.empty) {min-height: 120px !important; height: 0px !important;}

@-moz-document url-prefix() {
  .card-image-background-custom .catalog-short-desc:not(.empty) {
  min-height: 105px !important;
}
}

/*FIXED FEATURED CARD*/
@media (max-width: 1056px) {
.card-image-background-custom .catalog-card-buttons {position: relative; text-align: left;}
.card-image-background-custom .buttons-container {margin: 0 1.5rem !important; padding: 0px !important; width: 100% !important; max-width: 100% !important; flex: 100%;}
}

/*FIXED FEATURED CARD HEIGHT*/
.card-image-background-custom .catalog-short-desc.empty {min-height: 120px!important;}
/*Mozilla Browser*/
@-moz-document url-prefix() {
  .card-image-background-custom .catalog-short-desc:not(.empty) {
  min-height: 120px !important;
}
}

/* Only Safari 10.1+ */
@media not all and (min-resolution:.001dpcm){ @supports (-webkit-appearance:none) {
    .card-image-background-custom .catalog-short-desc.empty {min-height: 105px!important; }
}}

@media (max-width: 412px) {
  .card-image-background-custom .catalog-card-buttons {padding: 0 0 0 8px;}
}

@media (max-width: 1048px) {
   .card-image-background-custom .buttons-container {margin: 0px 1.5rem !important; padding: 0px !important;}
   .card-image-background-custom .catalog-card-buttons {position:relative; text-align:left;}
}

/**************************************************/
/******** Card Image background CSS End ********/
/*************************************************/



/*Not Available TO BE ADDED ON CSS FILE*/
.catalog-card.not-available .catalog-card-buttons {height:58px;}
.catalog-card.not-available .not-available-msg {font-size: 16px; cursor: default; padding: 1rem 0;}


/**************************************************/
/******** Card Buttons background Color CSS Start ********/
/*************************************************/

.catalog-card a.bx--btn--secondary.enrolled-button {background: #002d9c;}
.catalog-card a.bx--btn--secondary.enroll-button {background: #0f62fe;}

/**************************************************/
/******** Card Buttons background Color CSS End ********/
/*************************************************/


/**************************************************/
/******** Catalog Basic Banner CSS Start ********/
/*************************************************/
.basic-banner h1 {margin-bottom: 20px; color: #408bfc; line-height: 2rem !important;
font-size: calc(1.29375rem + 1.5625vw);}

/**************************************************/
/******** Catalog Basic Banner CSS End ********/
/*************************************************/


/**************************************************/
/******** Progress Bar Start **********************/
/*************************************************/
.catalog-page-progress .progress {border-radius:0px; height:.5rem;}
.catalog-page-progress .progress .progress-bar {background-color: #f7b500 !important;}
.progress-bar-course {margin-left:-2rem; margin-right:-2rem;}
/**************************************************/
/******** Progress Bar End **********************/
/*************************************************/


/**************************************************/
/******** Roadmap CSS Start ********/
/*************************************************/


.comprehend-timeline .timeline__items {min-width:100%;}
.catalog_timeline {margin:0px; margin-bottom:50px;}
.comprehend-timeline.timeline {z-index: 1;}
.comprehend-timeline-progress {z-index: 3;}
.comprehend-timeline {padding: 0px; margin: 0px; margin-top: -30px;}
.comprehend-timeline .timeline-nav-button--next:disabled {visibility: hidden;}
.comprehend-timeline .timeline-nav-button--prev:disabled {visibility: hidden;}
.comprehend-timeline .timeline-nav-button--next {right: 10px;}
.comprehend-timeline .timeline-nav-button--prev {left: 10px;}
.comprehend-timeline .timeline-nav-button {padding: 15px; background-color:#0f62fe; border: 0px; height: 20px; width: 20px;}
.comprehend-timeline.add-padding {padding: 0 40px;}
.comprehend-timeline:not(.timeline--mobile) .timeline__item::after {left: 0 !important; margin-top: 0px; margin-left: 13px;}

.comprehend-timeline .timeline__item.completed.timeline__item--bottom {top: 0;}
.comprehend-timeline .timeline__item.enrolled.completed::after {content: "\f00c"!important;}
.comprehend-timeline .timeline__item.enrolled::after {content: "\f111"!important; color: #0f62fe; font-weight: 900; font-family: FontAwesome;  border-color: #0f62fe!important;  background: #fff !important; text-align: center;}
.comprehend-timeline .timeline__item--bottom .timeline__item_progress_percent {margin: -81.5px 0; text-align: center;}

.catalog_timeline .timeline__item--bottom .timeline__item_progress_line {background-color: #0f62fe; padding: 2px; margin: -102px 10px 0 10px;}
.comprehend-timeline.timeline--horizontal .timeline__item {max-width: 25% !important; padding-top: 30px;}
.catalog_timeline.comprehend-timeline.timeline--horizontal .timeline__item {max-width: 25% !important; wwidth: 25% !important; padding-top: 30px; border-top: 2px solid;}
.comprehend-timeline .roadmap-percent {font-size: 14px; color: #747474;}

@media only screen and (max-width: 982px) and (min-width:702px) {
.comprehend-timeline.timeline--horizontal .timeline__item {transform: translateY(100px); padding:0px;}
.comprehend-timeline .timeline__content {padding-top:10px; word-wrap: anywhere;}
.comprehend-timeline.timeline--horizontal .timeline__item--bottom {padding-top: 20px;}
.comprehend-timeline .timeline__items {height: 250px !important;}
}

@media (min-width: 990px) {
  .comprehend-timeline .timeline__content {padding: 0px;}
  .comprehend-timeline.timeline--horizontal .timeline__item::after {top:0;}
  .comprehend-timeline .timeline__item--top {transform: translateY(100px);}
  .comprehend-timeline .timeline__item.completed::after {content: "\f00c"; color: #0f62fe; font-weight: 900; font-family: FontAwesome; border-color:#0f62fe; background: none;}
  .comprehend-timeline .timeline__item.enrolled::after {content: ""; color: #0f62fe; border-color:#0f62fe; background:#0f62fe;}
  .comprehend-timeline.timeline--mobile .timeline__item {padding-bottom: 0px;}
}

.comprehend-timeline.timeline--mobile .timeline__item::after {top:0%;}
.comprehend-timeline.timeline--mobile {padding-left: 0px; margin: 0px; margin-top: 50px; margin-bottom: 50px; margin-left: 30px;}
.comprehend-timeline.timeline--mobile .timeline__wrap {padding-left: 0px; margin-left: 0px; left: -8px;}
.catalog_timeline.comprehend-timeline .timeline__item_progress_line.mobile {display: none; margin: 0px; position: absolute; left: 0; top: 0;}
.comprehend-timeline.timeline--mobile .timeline__item_progress_line.mobile {display: block; margin: 0px; position: absolute; left: 18px; top: 0;}
.catalog_timeline.comprehend-timeline.timeline--mobile .timeline__item {min-height: 100px; padding: 0px; position: relative;}
.comprehend-timeline.timeline--mobile .timeline__item:last-child{min-height: 0px;}
.comprehend-timeline.timeline--mobile .timeline__items {padding-top: 8px;}
.comprehend-timeline.timeline--mobile .timeline__content {padding: 0px; padding-left: 50px !important;}
.comprehend-timeline.timeline--mobile .timeline__item.enrolled::after {background: #fff!important;}
.comprehend-timeline.timeline--mobile .timeline__wrap, .catalog_timeline.comprehend-timeline.timeline--mobile .timeline-divider {margin: 0px; }
.comprehend-timeline .timeline__wrap {padding-left: 0px; padding-right: 0px;}
.comprehend-timeline .timeline__wrap, .comprehend-timeline .timeline-divider {margin: 0px !important;}
.comprehend-timeline.timeline--horizontal .timeline-divider {background: #000 !important; left: 50px; display: none;}
.comprehend-timeline .timeline__item {-webkit-animation-name: fadeIn; animation-name: fadeIn;}
.catalog_timeline .timeline__item.completed.timeline__item--bottom {top:0px !important;}


/*Vertical Button End*/
.comprehend-timeline .timeline-vertical-button {display: none;}
/*.comprehend-timeline.timeline--mobile .timeline-vertical-button {display: block;}*/
.comprehend-timeline .time_line_white, .comprehend-timeline .time_line_white.mobile {display: none;}
.comprehend-timeline .timeline__item.timeline__item_progress_line {display: none;}

.comprehend-timeline .timeline__item:last-child .timeline__item_progress_line {display: block !important;
top: 0; position: absolute; margin: 0; border-top: 2px solid #fff; padding: 0px;}
.comprehend-timeline .timeline__item:last-child {border-top: 2px solid #fff !important; padding: 0px;}

.comprehend-timeline.timeline--mobile .timeline__item .timeline__item_progress_line {display: none;}

.comprehend-timeline .timeline__item:last-child .timeline__item_progress_line.mobile {display:none; top: 0; position: absolute; margin: 0px;}

.timeline--mobile.comprehend-timeline .timeline__item:last-child .timeline__item_progress_line {display:none;}

.comprehend-timeline.timeline--mobile .timeline__wrap {height: 400px; overflow: hidden;}
.comprehend-timeline.comprehend-timeline .timeline__item_progress_line.mobile {display: none;}
.timeline-vertical-button {background-color: #0f62fe; border: 0; border-radius: 100%; z-index: 3; left: -7px; padding: 13px; line-height: .6rem; font-size: 16px;}
.timeline-vertical-button.button-down::before {content: "\f107"; color: #fff; font-weight: 900; font-family: FontAwesome;}
.timeline-vertical-button.button-up::before {content: "\f106"; color: #fff; font-weight: 900; font-family: FontAwesome;}
.timeline-vertical-button.button-down {position: absolute; bottom: -40px;}
.timeline-vertical-button.button-up {position: absolute; top: -40px;}
.comprehend-timeline .mobile-buttons {display: none;}
.comprehend-timeline.timeline--mobile .mobile-buttons {display: block;}

.catalog_timeline.timeline--mobile.timeline:not(.timeline--horizontal)::before {background: #000 !important;}

.comprehend-timeline .timeline-nav-button--next::before {
  content: '\f105';
  position: relative;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  top: 12%;
  border-radius: 50%;
  background-image: none;
  padding: 20px;
  background-position: center;
  background-size: cover;
  background-repeat:no-repeat !important;
  background-image:url('[[pix:theme|arrow-right-blue]]') !important;
}
.comprehend-timeline .timeline-nav-button--next {
  height: 200px;
  border-radius: 0;
  background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
  flex-shrink: 0;
  background-color: inherit !important;
  padding-left: 200px;}

.comprehend-timeline .timeline-nav-button--prev::before {
    content: '\f105';
    position: relative;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    top: 12%;
    border-radius: 50%;
    background-image: none;
    padding: 20px;
    background-position: center;
    background-size: cover;
    background-repeat:no-repeat !important;
    background-image:url('[[pix:theme|arrow-left-blue]]') !important;
  }

.comprehend-timeline .timeline-nav-button--prev {
    height: 200px;
    border-radius: 0;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 100%);
    flex-shrink: 0;
    background-color: inherit !important;
    padding-right: 200px;
  }

  /**************************************************/
  /******** Roadmap CSS End ************************/
  /*************************************************/
