.tt-dashboard {
  --radius--rounded-xs: 4px;
  --radius--rounded-sm: 8px;
  --radius--rounded-md: 12px;
  --radius--rounded-lg: 16px;
  --radius--rounded-xl: 20px;
  --radius--rounded-xxl: 40px;
  --spacing-05: 4px;
  --spacing-10: 8px;
  --spacing-15: 16px;
  --spacing-20: 20px;
  --spacing-30: 28px;
  --spacing-40: 36px;
  --spacing-50: 48px;
  --white: #fff;
  --black: #000;
  --blue: #0C71C3;
  --yellow: #E4A31E;
  --yellow-light: #FEF3DB;
  --yellow-dark: #A67001;
  --lighter-gray: #C6C6C6;
  --light-gray: #737373;
  --dark-gray: #333;
  --gray-bg: #F3F3F3;
  --border-color: #F3F3F3;
  --accent-color: var(--blue, #0C71C3);
  --accent-color-alt: var(--yellow, #e4a31e);
  --card-radius: var(--radius--rounded-sm);
  --card-border-width: 2px;
  --card-bg: var(--gray-bg);
  --card-highlight: var(--accent-color);
  --button-radius: var(--radius--rounded-xs);
  --button-border-style: solid;
  --button-border-width: 2px;
  --button-bg: var(--white);
  --button-text-color: var(--accent-color);
  height: 100%;
  width: 100%;
  font-size: 1rem;
}

.tt-dashboard h1 {
  margin-bottom: 1.5rem;
  color: var(--black);
  font-size: clamp(1.875rem, calc(1.125rem + 2vw), 2.625rem);
  font-weight: 400;
  line-height: 1.1
}

.tt-dashboard .button,
.tt-dashboard button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--button-bg);
  color: var(--button-text-color);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 0.78em 1.71em;
  max-width: max-content;
  transition-timing-function: ease-out;
  border-style: var(--button-border-style);
  border-width: var(--button-border-width);
  border-color: var(--accent-color);
  border-radius: var(--button-radius);
  transition-duration: 0.25s;
  transition-property: color, background-color, box-shadow;
  cursor: pointer
}

.tt-dashboard .button:hover,
.tt-dashboard .button:focus,
.tt-dashboard .button:active,
.tt-dashboard button:hover,
.tt-dashboard button:focus,
.tt-dashboard button:active {
  --button-bg: var(--accent-color);
  --button-text-color: var(--white)
}

.tt-dashboard__resume {
	display: flex;
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	row-gap: 1rem;
    column-gap: 2rem;
}

.tt-dashboard__resume .tt-item__title {
  font-size: 1.375rem;
}

.tt-dashboard__resume .button.button--fill,
.button.button--fill {
  background-color: var(--accent-color) !important;
  color: var(--white) !important;
  box-shadow: transparent 0px 0px 0px 2px inset;
  max-width: max-content;
}
.tt-dashboard__resume .button.button--fill:hover, 
.tt-dashboard__resume .button.button--fill:focus,
.button.button--fill:hover, 
.button.button--fill:focus {
	background-color: #095a9c !important;
	border-color: #095a9c !important;
}

/* Tabs */
.tt-dashboard .section__tabs .empty {
  border: 0;
  border-radius: 12px;
  background: #FFF;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 1.5em
}

.tt-dashboard .section__tabs {
  --tab-button-bg: #fff;
  --tab-button-bg-hover: #fff;
  --tab-button-bg-active: var(--yellow-light);
  --tab-button-text: #333;
  --tab-button-text-active: var(--yellow-dark);
  --tab-button-accent: var(--yellow);
}

.section__tabs .tabs {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-30);
}

.tt-dashboard .section__tabs .tt-section__heading {
  margin: 0;
  padding: 0;
}

.tt-dashboard .section__tabs .tabs__navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  position: relative;
}

.tt-dashboard .section__tabs .tabs__panel__content .tt-loop {
  gap: 1rem;
}

.tt-dashboard .section__tabs .tabs__panel__content .card:not(:last-child) {
  margin-bottom: 2rem;
}

.tt-dashboard .section__tabs .tabs__panel__content:only-child p {
  margin: 20px auto;
}

@media (min-width: 768px) {
  .tt-dashboard .section__tabs .tabs[aria-orientation="vertical"] {
      grid-template-columns: minmax(400px, 1fr) 1fr;
  }
}

.tt-dashboard .section__tabs .tabs[aria-orientation="vertical"] .tabs__navigation {
  flex-direction: column
}

.tt-dashboard .section__tabs .tabs__navigation__item {
  border-style: var(--button-border-style);
  border-width: var(--button-border-width);
  border-color: var(--border-color);
  border-radius: var(--radius--rounded-xxl);
  background-color: var(--tab-button-bg);
  color: var(--tab-button-text);
  box-shadow: none;
  cursor: pointer;
  text-align: center;
  min-height: 2rem;
  min-width: max-content;
  padding: 0.625em 1em;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  transition-property: border-color, background-color, color;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  text-transform: uppercase;
  letter-spacing: 0.7px
}

.tt-dashboard .section__tabs .tabs__navigation__item:hover {
  border-color: var(--tab-button-accent)
}

.tt-dashboard .section__tabs .tabs__navigation__item[aria-selected="true"],
.tt-dashboard .section__tabs .tabs__navigation__item.active {
  background-color: var(--tab-button-bg-active);
  color: var(--tab-button-text-active);
  border-color: var(--tab-button-bg-active)
}

@media (max-width: 900px) {
  .tt-dashboard .section__tabs .tabs__heading {
      flex-direction: column;
      align-items: flex-start;
  }

  .tt-dashboard .section__tabs .tabs__navigation {
      gap: 0.625rem
  }
}

@media (min-width: 769px) {
  .tt-dashboard .section__tabs .tabs__navigation__item {
      padding: 0.78em 1.71em;
  }
}

.tt-course-list__heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.tt-course-list__title {
  padding: 0
}

.tt-course-list__progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
  row-gap: 0.5rem;
  margin-bottom: 0.5rem
}

.tt-course-list__progress__text {
  color: var(--dark-gray);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  min-width: max-content
}

@media (max-width: 600px) {
  .tt-course-list__progress {
      flex-wrap: wrap;
      margin-bottom: 1rem
  }

  .tt-course-list__progress .tt-progress-bar {
      order: 3
  }
}

.tt-course-list .swiper-wrapper{
height: auto;
}

.tt-course-list .swiper-slide{
height: auto;
}


.slider__navigation {
--swiper-navigation-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.4rem;
margin-left: auto;
}

.slider__navigation__arrows {
  display: flex;
  gap: 1rem;
  align-items: center
}

.slider__navigation__arrows .swiper-button-prev:not(.swiper-button-lock),
.slider__navigation__arrows .swiper-button-next:not(.swiper-button-lock) {
  position: unset;
  margin: unset;
  display: inline-flex;
  font-weight: 700;
  background-color: var(--accent-color-alt);
  color: var(--white);
  border-radius: var(--radius--rounded-xs);
  height: 2rem;
  width: 2rem;
  transition: background-color 0.2s ease-in-out
}

.slider__navigation__arrows .swiper-button-prev:not(.swiper-button-lock):hover,
.slider__navigation__arrows .swiper-button-prev:not(.swiper-button-lock):focus,
.slider__navigation__arrows .swiper-button-next:not(.swiper-button-lock):hover,
.slider__navigation__arrows .swiper-button-next:not(.swiper-button-lock):focus {
  background-color: var(--yellow-dark)
}

@media (min-width: 992px) {

  .slider__navigation__arrows .swiper-button-prev:not(.swiper-button-lock),
  .slider__navigation__arrows .swiper-button-next:not(.swiper-button-lock) {
      height: 2.25rem;
      width: 2.25rem
  }
}

.slider__navigation .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}



.tt-section__wrapper {
  max-width: 1128px;
  margin-inline: auto;
  padding: 2.25rem 1.5rem;
}

.tt-section .tt-section__heading {
	color: var(--dark-gray, #333);
	font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.1;
    padding: 0;
}

.tt-section--user-info {
  background: var(--gray-bg)
}
body.admin-bar .tt-section--user-info .tt-section__wrapper {
	padding: 4.125rem 1.5rem 2.25rem;
}

.tt-section--user-info .tt-section__wrapper {
  padding: 2.25rem 1.5rem;
}

.tt-section--user-info .tt-section__content,
.tt-dashboard__textbooks,
.tt-dashboard .section__tabs .tabs__heading {
  display: grid;
  grid-template-columns: 1fr;
  align-items: flex-start;
  gap: 2rem;
}

@media (min-width: 768px) {
	.tt-section--user-info .tt-section__content {
		grid-template-columns: 2fr max-content;
	}
}

@media (min-width: 900px) {
	.tt-dashboard__textbooks, 
	.tt-dashboard .section__tabs .tabs__heading {
    	grid-template-columns: 240px 1fr;
	}
}


.tt-dashboard .section__tabs .tabs__heading {
  align-items: center;
}

/* Texkbooks */

.tt-dashboard__textbooks {
	margin-block: 2.5rem;
}

.tt-dashboard__textbooks__list {
	display: grid;
	grid-template-columns: 1fr 1fr; 
	gap: 1rem;
	
	@media (min-width: 600px) {
		grid-template-columns: repeat(4, 1fr); 
	}
}

.tt-item--textbook.tt-item {
	background-color: #fff;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 5px;
	padding: 12px 20px;
	position: relative;
}

.tt-item--textbook .tt-item__title {
	font-size: 0.875rem;
	text-align: center;
}

/* Dashboard Groups */
/*.tt-dashboard__group {
  background-color: #fff;
  padding: 1rem;
  border-radius: var(--radius--rounded-sm)
}*/

.tt-dashboard__group__item:not(:first-child) {
  margin-top: 0.5rem
}

.tt-dashboard__group__item:not(:last-of-type) {
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px dashed var(--lighter-gray)
}

.tt-dashboard__group__title {
  font-size: 1.375rem;
  color: var(--dark-gray);
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 1rem
}

.tt-dashboard__group p {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.25rem 0;
  line-height: 1.625
}

.tt-dashboard__group__footer {
  margin-top: auto
}

.tt-dashboard__group__footer:not(:only-child) fieldset {
  margin-top: 1rem
}

.tt-dashboard__group__footer fieldset {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.tt-dashboard__group #codeRedeemForm #coupon_code_wrapper input#coupon_code_only {
  margin-bottom: 1rem;
  min-height: 2.25rem;
}

/* Item Card */

.card {
  --card-radius: var(--radius--rounded-md);
  background-color: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--spacing-15) !important;
}

.tt-item__wrapper {
  background-color: #fff;
  position: relative;
  border-style: solid;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-width: var(--card-border-width);
  border-color: var(--card-bg);
  border-radius: var(--card-radius);
  transition-property: border-color;
  transition-timing-function: ease-in-out;
  transition-duration: 0.25s;
}

.badge {
  display: inline-flex;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  background-color: var(--light-gray);
  color: var(--white);
  padding: 0.15em 0.857em;
  border-radius: 0px 6px 6px 0px;
  position: absolute;
  top: 1rem;
  left: 0rem;
  z-index: 1;
  pointer-events: none;
}

.tt-item__image img {
  width: 100%;
  object-fit: contain;
  object-position: center;
}

.tt-item__content {
	padding-bottom: 1rem;
	padding-inline: 1rem;
	padding-block: 1rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.tt-item__content__footer{
	margin-top: auto;
}

.tt-item__title {
  color: var(--dark-gray, #333);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.1;
  padding: 0;
}

.tt-item .tt-item__lessons {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.tt-item .tt-item__lessons .tt-item__icon {
  font-size: 1rem;
  line-height: 1;
}

.tt-dashboard .button,
.tt-dashboard button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--button-bg);
  color: var(--button-text-color);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 0.78em 1.71em;
  max-width: max-content;
  transition-timing-function: ease-out;
  border-style: var(--button-border-style);
  border-width: var(--button-border-width);
  border-color: var(--accent-color);
  border-radius: var(--button-radius);
  transition-duration: 0.25s;
  transition-property: color, background-color, box-shadow;
  cursor: pointer;
}

.tt-item .button--started {
  color: var(--accent-color-alt);
  border-color: var(--accent-color-alt);
}

.tt-item__content__footer .button {
  max-width: 100%;
  width: 100%;
}

.tt-item__wrapper:has(.tt-item__link):hover,
.tt-item__wrapper:has(.tt-item__link):focus-within {
  border-color: var(--card-highlight);
}

.tt-item__wrapper:hover .button,
.tt-item__wrapper:focus-within .button {
  background-color: var(--accent-color) !important;
  color: var(--white) !important;
  box-shadow: transparent 0px 0px 0px 2px inset;
}

.tt-item__wrapper:hover .button--started,
.tt-item__wrapper:focus-within .button--started {
  background-color: var(--accent-color-alt) !important;
}

.badge--completed {
  background-color: var(--accent-color);
}

.badge--started {
  background-color: var(--accent-color-alt);
}

.tt-item--inline .tt-item__image {
  flex: 1 1 47%;
  background-color: var(--dark-gray);
  aspect-ratio: 1.7777777778;
  border-radius: 0;
  border-top-left-radius: calc(var(--card-radius) - 1px);
  border-bottom-left-radius: calc(var(--card-radius) - 1px);
  width: 100%;
  overflow: hidden;
}

.tt-item__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tt-section-course-category {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

/*.tt-section-course-category-selector {
  justify-content: flex-end;
}*/

.tt-course-item .tt-item__lessons .tt-course-list__progress {
  flex-wrap: wrap;
}

.tt-course-item .tt-item__image img {
	border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.tt-course-list .swiper-wrapper {
  opacity: 0;
  transition: linear 2s;
}

.tt-loading-wrapper {
  min-height: 300px;
}

.tt-loading-wrapper .tt-course-list__heading {
  filter: grayscale(1);
  opacity: 0.5;
}

/* loading animation - @see https://codepen.io/h7w/pen/bGGOyyj */
.tt-loading-wrapper::after {
  content:'';
  top:0;
  min-height: 300px;
  transform: translateX(100%);
  width:100%;
  position: absolute;
  z-index:1;
  animation: slide 1s infinite;
  background: #C6C6C6
  /* 
  CSS Gradient - complete browser support from http://www.colorzilla.com/gradient-editor/ 
  */
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(128,186,232,0) 99%, rgba(125,185,232,0) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.8)), color-stop(99%,rgba(128,186,232,0)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* IE10+ */
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
}

@keyframes slide {
  0% {transform:translateX(-100%);}
  100% {transform:translateX(100%);}
}

.tt-loading-wrapper .tt-progress-bar__fill {
  width: 0;
}

.tt-dashboard__group__list:not(.tt-dashboard__group__list--select) {
  max-height: 200px;  
}

.tt-dashboard__group__list .tt-dashboard-group-select {
  width: 100%;
}

.tt-dashboard-group-buttons {
  padding-top: 1rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.tt-dashboard-group-buttons fieldset {
  display: inline
}

.tt-dashboard-group-buttons fieldset a {
    min-width: max-content;
}

.tt-section__content #codeRedeemForm #coupon_code_wrapper .error_div {
  margin-bottom: 20px;
}

.tt-section__content #theme-my-login.tml-redeem .description {
  white-space: nowrap;
}


/* Modal */
@keyframes mmfadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mmfadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes mmslideIn {
  from { transform: translateY(15%); }
  to { transform: translateY(0); }
}

@keyframes mmslideOut {
  from { transform: translateY(0); }
  to { transform: translateY(-10%); }
}

.modal {
  display: none;
}

.modal.is-open {
  display: block;
}

.modal__overlay {
	position: fixed;
	top: 0;
	right: 0; 
	bottom: 0;
	left: 0;
	z-index: 9999999;
	background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(rgba(255, 255, 255, 0.3)), to(rgba(41, 26, 73, 0.3)));
	display: flex;
    justify-content: center;
    align-items: center;
}

.modal__container {
  background: #fff;
  max-width: 400px;
	width: 100%;
  border-radius: 5px;
	padding: 0.5rem;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

.modal .modal__close {
    cursor: pointer;
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 5px;
    border-radius: 100%;
    line-height: 1;
    width: 1.5em;
    height: 1.5em;
    font-size: 20px;
    text-align: center;
    background: #606061;
    color: #fff;
    box-shadow: 1px 1px 3px #000;
}

.modal__btn {
  padding: 0.5rem 1rem;
}


.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}