/* Override default styling values using another file with a <crtedu>_<button> class. */

/* Import that file in the same HTML file. */

/*
  Link https://templates.create-3d-services.com/stye-utils/<crtedu>/<button>.css in the same HTML file.
  Add the data-template-default-stylesheet attribute.
*/

/* Utility Classes */


.crtedu_button .h1,
.crtedu_button.h1 {
  font-family: var(--template-h1-font-family);
  font-size: clamp(var(--template-h1-font-size-min), var(--template-h1-font-size), var(--template-h1-font-size-max));
  font-style: var(--template-h1-font-style);
  font-weight: var(--template-h1-font-weight);
  line-height: var(--template-h1-line-height);
}

.crtedu_button .h2,
.crtedu_button.h2 {
  font-family: var(--template-h2-font-family);
  font-size: clamp(var(--template-h2-font-size-min), var(--template-h2-font-size), var(--template-h2-font-size-max));
  font-style: var(--template-h2-font-style);
  font-weight: var(--template-h2-font-weight);
  line-height: var(--template-h2-line-height);
}

.crtedu_button .h3,
.crtedu_button.h3 {
  font-family: var(--template-h3-font-family);
  font-size: clamp(var(--template-h3-font-size-min), var(--template-h3-font-size), var(--template-h3-font-size-max));
  font-style: var(--template-h3-font-style);
  font-weight: var(--template-h3-font-weight);
  line-height: var(--template-h3-line-height);
}

.crtedu_button .h4,
.crtedu_button.h4 {
  font-family: var(--template-h4-font-family);
  font-size: clamp(var(--template-h4-font-size-min), var(--template-h4-font-size), var(--template-h4-font-size-max));
  font-style: var(--template-h4-font-style);
  font-weight: var(--template-h4-font-weight);
  line-height: var(--template-h4-line-height);
}

.crtedu_button .h5,
.crtedu_button.h5 {
  font-family: var(--template-h5-font-family);
  font-size: clamp(var(--template-h5-font-size-min), var(--template-h5-font-size), var(--template-h5-font-size-max));
  font-style: var(--template-h5-font-style);
  font-weight: var(--template-h5-font-weight);
  line-height: var(--template-h5-line-height);
}

.crtedu_button .h6,
.crtedu_button.h6 {
  font-family: var(--template-h6-font-family);
  font-size: clamp(var(--template-h6-font-size-min), var(--template-h6-font-size), var(--template-h6-font-size-max));
  font-style: var(--template-h6-font-style);
  font-weight: var(--template-h6-font-weight);
  line-height: var(--template-h6-line-height);
}

.crtedu_button .h7,
.crtedu_button.h7 {
  font-family: var(--template-h7-font-family);
  font-size: clamp(var(--template-h7-font-size-min), var(--template-h7-font-size), var(--template-h7-font-size-max));
  font-style: var(--template-h7-font-style);
  font-weight: var(--template-h7-font-weight);
  line-height: var(--template-h7-line-height);
}

.crtedu_button .sh1,
.crtedu_button.sh1 {
  font-family: var(--template-sh1-font-family);
  font-size: clamp(var(--template-sh1-font-size-min), var(--template-sh1-font-size), var(--template-sh1-font-size-max));
  font-style: var(--template-sh1-font-style);
  font-weight: var(--template-sh1-font-weight);
  line-height: var(--template-sh1-line-height);
}

.crtedu_button .sh2,
.crtedu_button.sh2 {
  font-family: var(--template-sh2-font-family);
  font-size: clamp(var(--template-sh2-font-size-min), var(--template-sh2-font-size), var(--template-sh2-font-size-max));
  font-style: var(--template-sh2-font-style);
  font-weight: var(--template-sh2-font-weight);
  line-height: var(--template-sh2-line-height);
}

.crtedu_button .sh3,
.crtedu_button.sh3 {
  font-family: var(--template-sh3-font-family);
  font-size: clamp(var(--template-sh3-font-size-min), var(--template-sh3-font-size), var(--template-sh3-font-size-max));
  font-style: var(--template-sh3-font-style);
  font-weight: var(--template-sh3-font-weight);
  line-height: var(--template-sh3-line-height);
}

.crtedu_button .sh4,
.crtedu_button.sh4 {
  font-family: var(--template-sh4-font-family);
  font-size: clamp(var(--template-sh4-font-size-min), var(--template-sh4-font-size), var(--template-sh4-font-size-max));
  font-style: var(--template-sh4-font-style);
  font-weight: var(--template-sh4-font-weight);
  line-height: var(--template-sh4-line-height);
}

.crtedu_button .sh5,
.crtedu_button.sh5 {
  font-family: var(--template-sh5-font-family);
  font-size: clamp(var(--template-sh5-font-size-min), var(--template-sh5-font-size), var(--template-sh5-font-size-max));
  font-style: var(--template-sh5-font-style);
  font-weight: var(--template-sh5-font-weight);
  line-height: var(--template-sh5-line-height);
}

.crtedu_button .sh6,
.crtedu_button.sh6 {
  font-family: var(--template-sh6-font-family);
  font-size: clamp(var(--template-sh6-font-size-min), var(--template-sh6-font-size), var(--template-sh6-font-size-max));
  font-style: var(--template-sh6-font-style);
  font-weight: var(--template-sh6-font-weight);
  line-height: var(--template-sh6-line-height);
}

.crtedu_button .sh7,
.crtedu_button.sh7 {
  font-family: var(--template-sh7-font-family);
  font-size: clamp(var(--template-sh7-font-size-min), var(--template-sh7-font-size), var(--template-sh7-font-size-max));
  font-style: var(--template-sh7-font-style);
  font-weight: var(--template-sh7-font-weight);
  line-height: var(--template-sh7-line-height);
}

.crtedu_button .p,
.crtedu_button.p {
  font-family: var(--template-p-font-family);
  font-size: clamp(var(--template-p-font-size-min), var(--template-p-font-size), var(--template-p-font-size-max));
  font-style: var(--template-p-font-style);
  font-weight: var(--template-p-font-weight);
  line-height: var(--template-p-line-height);
}

.crtedu_button .p2,
.crtedu_button.p2 {
  font-family: var(--template-p2-font-family);
  font-size: clamp(var(--template-p2-font-size-min), var(--template-p2-font-size), var(--template-p2-font-size-max));
  font-style: var(--template-p2-font-style);
  font-weight: var(--template-p2-font-weight);
  line-height: var(--template-p2-line-height);
}

.crtedu_button .lead,
.crtedu_button.lead {
  font-family: var(--template-lead-font-family);
  font-size: clamp(var(--template-lead-font-size-min), var(--template-lead-font-size), var(--template-lead-font-size-max));
  font-style: var(--template-lead-font-style);
  font-weight: var(--template-lead-font-weight);
  line-height: var(--template-lead-line-height);
}

.crtedu_button .small,
.crtedu_button.small {
  font-family: var(--template-small-font-family);
  font-size: clamp(var(--template-small-font-size-min), var(--template-small-font-size), var(--template-small-font-size-max));
  font-style: var(--template-small-font-style);
  font-weight: var(--template-small-font-weight);
  line-height: var(--template-small-line-height);
}

.crtedu_button .nav,
.crtedu_button.nav,
.crtedu_button .navbar,
.crtedu_button.navbar {
  font-family: var(--template-nav-font-family);
  font-size: clamp(var(--template-nav-font-size-min), var(--template-nav-font-size), var(--template-nav-font-size-max));
  font-style: var(--template-nav-font-style);
  font-weight: var(--template-nav-font-weight);
}

.crtedu_button .btn,
.crtedu_button.btn {
  font-family: var(--template-btn-font-family);
  font-size: clamp(var(--template-btn-font-size-min), var(--template-btn-font-size), var(--template-btn-font-size-max));
  font-style: var(--template-btn-font-style);
  font-weight: var(--template-btn-font-weight);
}

.crtedu_button .btn-primary,
.crtedu_button.btn-primary,
.crtedu_button .btn-secondary,
.crtedu_button.btn-secondary,
.crtedu_button .btn-tertiary,
.crtedu_button.btn-tertiary
{
  border-style: solid;
  cursor: pointer;
  transition: var(--template-btn-state-transition-duration) all;
}

.crtedu_button .btn-primary:focus,
.crtedu_button.btn-primary:focus,
.crtedu_button .btn-secondary:focus,
.crtedu_button.btn-secondary:focus,
.crtedu_button .btn-tertiary:focus,
.crtedu_button.btn-tertiary:focus
{
  box-shadow: none;
}

/* Block: Bootstrap override */
.crtedu_button .btn-primary:not(:disabled):not(.disabled).active:focus,
.crtedu_button .btn-primary:not(:disabled):not(.disabled):active:focus,
.crtedu_button.btn-primary:not(:disabled):not(.disabled).active:focus,
.crtedu_button.btn-primary:not(:disabled):not(.disabled):active:focus,
.crtedu_button .btn-secondary:not(:disabled):not(.disabled).active:focus,
.crtedu_button .btn-secondary:not(:disabled):not(.disabled):active:focus,
.crtedu_button.btn-secondary:not(:disabled):not(.disabled).active:focus,
.crtedu_button.btn-secondary:not(:disabled):not(.disabled):active:focus,
.crtedu_button .btn-tertiary:not(:disabled):not(.disabled).active:focus,
.crtedu_button .btn-tertiary:not(:disabled):not(.disabled):active:focus,
.crtedu_button.btn-tertiary:not(:disabled):not(.disabled).active:focus,
.crtedu_button.btn-tertiary:not(:disabled):not(.disabled):active:focus
{
  box-shadow: none;
}

.crtedu_button .btn-primary::after,
.crtedu_button.btn-primary::after,
.crtedu_button .btn-secondary::after,
.crtedu_button.btn-secondary::after,
.crtedu_button .btn-tertiary::after,
.crtedu_button.btn-tertiary::after
{
  margin-inline-start: 0.5em;
  width: 0.6em;
  height: 0.6em;
  content: '';
  transition: var(--template-btn-state-transition-duration) all;

  -webkit-mask-image: var(--icon-forward-cssFileUrl);
  mask-image: var(--icon-forward-cssFileUrl);  
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.crtedu_button .btn-primary:hover::after,
.crtedu_button .btn-primary.hover::after,
.crtedu_button .btn-primary:focus::after,
.crtedu_button.btn-primary:hover::after,
.crtedu_button.btn-primary.hover::after,
.crtedu_button.btn-primary:focus::after,
.crtedu_button .btn-secondary:hover::after,
.crtedu_button .btn-secondary.hover::after,
.crtedu_button .btn-secondary:focus::after,
.crtedu_button.btn-secondary:hover::after,
.crtedu_button.btn-secondary.hover::after,
.crtedu_button.btn-secondary:focus::after,
.crtedu_button .btn-tertiary:hover::after,
.crtedu_button .btn-tertiary.hover::after,
.crtedu_button .btn-tertiary:focus::after,
.crtedu_button.btn-tertiary:hover::after,
.crtedu_button.btn-tertiary.hover::after,
.crtedu_button.btn-tertiary:focus::after
{
    margin-inline-start: 1em;
}

.crtedu_button .btn-primary,
.crtedu_button.btn-primary
{
    font-family: var(--template-btn-primary-font-family);
    font-size: clamp(var(--template-btn-primary-font-size-min), var(--template-btn-primary-font-size), var(--template-btn-primary-font-size-max));
    font-style: var(--template-btn-primary-font-style);

    font-weight: var(--template-btn-primary-font-weight);
    text-decoration: var(--template-btn-primary-text-decoration);
    text-decoration-color: var(--template-btn-primary-text-decoration-color);

    background: var(--template-btn-primary-background-color);
    border-width: var(--template-btn-primary-border-width);
    border-bottom-width: var(--template-btn-primary-border-bottom-width);
    border-color: var(--template-btn-primary-border-color);
    color: var(--template-btn-primary-text-color);
}

.crtedu_button .btn-primary::after,
.crtedu_button.btn-primary::after
{
  display: var(--template-btn-primary-icon-display);
  background-color: var(--template-btn-primary-text-color);
}

.crtedu_button .btn-primary:hover,
.crtedu_button .btn-primary.hover,
.crtedu_button .btn-primary:focus,
.crtedu_button .btn-primary.focus,
.crtedu_button.btn-primary:hover,
.crtedu_button.btn-primary.hover,
.crtedu_button.btn-primary:focus,
.crtedu_button.btn-primary.focus
{
    text-decoration: var(--template-btn-primary-hover-text-decoration);
    text-decoration-color: var(--template-btn-primary-hover-text-decoration-color);
    font-weight: var(--template-btn-primary-hover-font-weight);
    background: var(--template-btn-primary-hover-background-color);
    border-color: var(--template-btn-primary-hover-border-color);
    color: var(--template-btn-primary-hover-text-color);
}

.crtedu_button .btn-primary:active,
.crtedu_button .btn-primary.active,
.crtedu_button .btn-primary:not(:disabled):not(.disabled):active, /* Bootstrap override */
.crtedu_button .btn-primary:not(:disabled):not(.disabled).active, /* Bootstrap override */
.crtedu_button.btn-primary:active,
.crtedu_button.btn-primary.active,
.crtedu_button.btn-primary:not(:disabled):not(.disabled):active, /* Bootstrap override */
.crtedu_button.btn-primary:not(:disabled):not(.disabled).active /* Bootstrap override */
{
    text-decoration: var(--template-btn-primary-active-text-decoration);
    text-decoration-color: var(--template-btn-primary-active-text-decoration-color);
    font-weight: var(--template-btn-primary-active-font-weight);
    background: var(--template-btn-primary-active-background-color);
    border-color: var(--template-btn-primary-active-border-color);
    color: var(--template-btn-primary-active-text-color);
}

.crtedu_button .btn-secondary,
.crtedu_button.btn-secondary
{
    font-family: var(--template-btn-secondary-font-family);
    font-size: clamp(var(--template-btn-secondary-font-size-min), var(--template-btn-secondary-font-size), var(--template-btn-secondary-font-size-max));
    font-style: var(--template-btn-secondary-font-style);

    font-weight: var(--template-btn-secondary-font-weight);
    text-decoration: var(--template-btn-secondary-text-decoration);
    text-decoration-color: var(--template-btn-secondary-text-decoration-color);

    background: var(--template-btn-secondary-background-color);
    border-width: var(--template-btn-secondary-border-width);
    border-bottom-width: var(--template-btn-secondary-border-bottom-width);
    border-color: var(--template-btn-secondary-border-color);
    color: var(--template-btn-secondary-text-color);
}

.crtedu_button .btn-secondary::after,
.crtedu_button.btn-secondary::after
{
  display: var(--template-btn-secondary-icon-display);
  background-color: var(--template-btn-secondary-text-color);
}

.crtedu_button .btn-secondary:hover,
.crtedu_button .btn-secondary.hover,
.crtedu_button .btn-secondary:focus,
.crtedu_button .btn-secondary.focus,
.crtedu_button.btn-secondary:hover,
.crtedu_button.btn-secondary.hover,
.crtedu_button.btn-secondary:focus,
.crtedu_button.btn-secondary.focus
{
    text-decoration: var(--template-btn-secondary-hover-text-decoration);
    text-decoration-color: var(--template-btn-secondary-hover-text-decoration-color);
    font-weight: var(--template-btn-secondary-hover-font-weight);
    background: var(--template-btn-secondary-hover-background-color);
    border-color: var(--template-btn-secondary-hover-border-color);
    color: var(--template-btn-secondary-hover-text-color);
}

.crtedu_button .btn-secondary:active,
.crtedu_button .btn-secondary.active,
.crtedu_button .btn-secondary:not(:disabled):not(.disabled):active, /* Bootstrap override */
.crtedu_button .btn-secondary:not(:disabled):not(.disabled).active, /* Bootstrap override */
.crtedu_button.btn-secondary:active,
.crtedu_button.btn-secondary.active,
.crtedu_button.btn-secondary:not(:disabled):not(.disabled):active, /* Bootstrap override */
.crtedu_button.btn-secondary:not(:disabled):not(.disabled).active /* Bootstrap override */
{
    text-decoration: var(--template-btn-secondary-active-text-decoration);
    text-decoration-color: var(--template-btn-secondary-active-text-decoration-color);
    font-weight: var(--template-btn-secondary-active-font-weight);
    background: var(--template-btn-secondary-active-background-color);
    border-color: var(--template-btn-secondary-active-border-color);
    color: var(--template-btn-secondary-active-text-color);
}

.crtedu_button .btn-tertiary,
.crtedu_button.btn-tertiary
{
    font-family: var(--template-btn-tertiary-font-family);
    font-size: clamp(var(--template-btn-tertiary-font-size-min), var(--template-btn-tertiary-font-size), var(--template-btn-tertiary-font-size-max));
    font-style: var(--template-btn-tertiary-font-style);

    font-weight: var(--template-btn-tertiary-font-weight);
    text-decoration: var(--template-btn-tertiary-text-decoration);
    text-decoration-color: var(--template-btn-tertiary-text-decoration-color);

    background: var(--template-btn-tertiary-background-color);
    border-width: var(--template-btn-tertiary-border-width);
    border-bottom-width: var(--template-btn-tertiary-border-bottom-width);
    border-color: var(--template-btn-tertiary-border-color);
    color: var(--template-btn-tertiary-text-color);
}

.crtedu_button .btn-tertiary::after,
.crtedu_button.btn-tertiary::after
{
  display: var(--template-btn-tertiary-icon-display);
  background-color: var(--template-btn-tertiary-text-color);
}

.crtedu_button .btn-tertiary:hover,
.crtedu_button .btn-tertiary.hover,
.crtedu_button .btn-tertiary:focus,
.crtedu_button .btn-tertiary.focus,
.crtedu_button.btn-tertiary:hover,
.crtedu_button.btn-tertiary.hover,
.crtedu_button.btn-tertiary:focus,
.crtedu_button.btn-tertiary.focus
{
    text-decoration: var(--template-btn-tertiary-hover-text-decoration);
    text-decoration-color: var(--template-btn-tertiary-hover-text-decoration-color);
    font-weight: var(--template-btn-tertiary-hover-font-weight);
    background: var(--template-btn-tertiary-hover-background-color);
    border-color: var(--template-btn-tertiary-hover-border-color);
    color: var(--template-btn-tertiary-hover-text-color);
}

.crtedu_button .btn-tertiary:active,
.crtedu_button .btn-tertiary.active,
.crtedu_button .btn-tertiary:not(:disabled):not(.disabled):active, /* Bootstrap override */
.crtedu_button .btn-tertiary:not(:disabled):not(.disabled).active, /* Bootstrap override */
.crtedu_button.btn-tertiary:active,
.crtedu_button.btn-tertiary.active,
.crtedu_button.btn-tertiary:not(:disabled):not(.disabled):active, /* Bootstrap override */
.crtedu_button.btn-tertiary:not(:disabled):not(.disabled).active /* Bootstrap override */
{
    text-decoration: var(--template-btn-tertiary-active-text-decoration);
    text-decoration-color: var(--template-btn-tertiary-active-text-decoration-color);
    font-weight: var(--template-btn-tertiary-active-font-weight);
    background: var(--template-btn-tertiary-active-background-color);
    border-color: var(--template-btn-tertiary-active-border-color);
    color: var(--template-btn-tertiary-active-text-color);
}

.crtedu_button .form-label,
.crtedu_button.form-label {
  font-family: var(--template-form-label-font-family);
  font-size: var(--template-form-label-font-size);
  font-style: var(--template-form-label-font-style);
  font-weight: var(--template-form-label-font-weight);
}

.crtedu_button .text-primary,
.crtedu_button.text-primary {
  color: var(--template-text-primary) !important;
}

.crtedu_button a.text-primary:hover,
a.crtedu_button.text-primary:hover,
.crtedu_button a.text-primary:active,
a.crtedu_button.text-primary:active,
.crtedu_button a.text-primary:focus,
a.crtedu_button.text-primary:focus,
.crtedu_button a.text-primary:visited,
a.crtedu_button.text-primary:visited {
  color: var(--template-text-primary) !important;
}

.crtedu_button .text-secondary,
.crtedu_button.text-secondary {
  color: var(--template-text-secondary) !important;
}

.crtedu_button a.text-secondary:hover,
a.crtedu_button.text-secondary:hover,
.crtedu_button a.text-secondary:active,
a.crtedu_button.text-secondary:active,
.crtedu_button a.text-secondary:focus,
a.crtedu_button.text-secondary:focus,
.crtedu_button a.text-secondary:visited,
a.crtedu_button.text-secondary:visited {
  color: var(--template-text-secondary) !important;
}

.crtedu_button .bg-primary,
.crtedu_button.bg-primary {
  background: var(--template-color-primary) !important;
  background-color: var(--template-color-primary) !important;
}

.crtedu_button .bg-secondary,
.crtedu_button.bg-secondary {
  background: var(--template-color-secondary) !important;
  background-color: var(--template-color-secondary) !important;
}

.crtedu_button .bg-detail,
.crtedu_button.bg-detail {
  background: var(--template-color-detail) !important;
  background-color: var(--template-color-detail) !important;
}

.crtedu_button .text-detail,
.crtedu_button.text-detail {
  color: var(--template-color-detail) !important;
}

.crtedu_button .bg-brand-detail,
.crtedu_button.bg-brand-detail {
  background: var(--template-color-brand-detail) !important;
  background-color: var(--template-color-brand-detail) !important;
}

.crtedu_button .text-brand-detail,
.crtedu_button.text-brand-detail {
  color: var(--template-color-brand-detail) !important;
}

.crtedu_button .btn-brand-detail,
.crtedu_button.btn-brand-detail {
  background: var(--template-color-brand-detail);
  background-color: var(--template-color-brand-detail);
  border-color: #ffffff;
  overflow: hidden;
}

.crtedu_button .btn-brand-detail a,
.crtedu_button.btn-brand-detail a,
.crtedu_button .btn-brand-detail a:hover,
.crtedu_button.btn-brand-detail a:hover,
.crtedu_button .btn-brand-detail a:active,
.crtedu_button.btn-brand-detail a:active,
.crtedu_button .btn-brand-detail a:focus,
.crtedu_button.btn-brand-detail a:focus,
.crtedu_button .btn-brand-detail a:visited,
.crtedu_button.btn-brand-detail a:visited {
  text-decoration: none;
  color: inherit;
}

.crtedu_button .btn-brand-detail:hover,
.crtedu_button .btn-brand-detail:active,
.crtedu_button .btn-brand-detail:focus,
.crtedu_button.btn-brand-detail:hover,
.crtedu_button.btn-brand-detail:active,
.crtedu_button.btn-brand-detail:focus {
  background: #ffffff80;
  background-color: #ffffff80;
  border-color: var(--template-color-brand-detail);
}

.crtedu_button .btn-outline-brand-detail,
.crtedu_button.btn-outline-brand-detail {
  background: #ffffff80;
  background-color: #ffffff80;
  border-color: var(--template-color-brand-detail);
  color: inherit;
  text-decoration: none;
}

.crtedu_button .btn-outline-brand-detail a,
.crtedu_button.btn-outline-brand-detail a,
.crtedu_button .btn-outline-brand-detail a:hover,
.crtedu_button.btn-outline-brand-detail a:hover,
.crtedu_button .btn-outline-brand-detail a:active,
.crtedu_button.btn-outline-brand-detail a:active,
.crtedu_button .btn-outline-brand-detail a:focus,
.crtedu_button.btn-outline-brand-detail a:focus,
.crtedu_button .btn-outline-brand-detail a:visited,
.crtedu_button.btn-outline-brand-detail a:visited {
  text-decoration: none;
  color: inherit;
}

.crtedu_button .btn-outline-brand-detail:hover,
.crtedu_button .btn-outline-brand-detail:active,
.crtedu_button .btn-outline-brand-detail:focus,
.crtedu_button.btn-outline-brand-detail:hover,
.crtedu_button.btn-outline-brand-detail:active,
.crtedu_button.btn-outline-brand-detail:focus {
  text-decoration: none;
  background: var(--template-color-brand-detail);
  background-color: var(--template-color-brand-detail);
  border-color: #ffffff;
}

.crtedu_button .btn-outline-brand-detail .btn-right-container,
.crtedu_button.btn-outline-brand-detail .btn-right-container {
  display: inline-block;
  height: 1em;
  width: 1em;
  position: relative;
}

.crtedu_button .btn-outline-cta .btn-right-container img,
.crtedu_button.btn-outline-cta .btn-right-container img {
  width: 100%;
  height: 100%;
  padding: 10%;
  object-fit: contain;
  position: absolute;
  vertical-align: middle;
}

/*Added/Changed since IPOS*/
.crtedu_button .h7,
.crtedu_button.h7 {
  font-family: var(--template-h7-font-family);
  font-size: clamp(var(--template-h7-font-size-min), var(--template-h7-font-size), var(--template-h7-font-size-max));
  font-style: var(--template-h7-font-style);
  font-weight: var(--template-h7-font-weight);
}

.crtedu_button .h8,
.crtedu_button.h8 {
  font-family: var(--template-h8-font-family);
  font-size: clamp(var(--template-h8-font-size-min), var(--template-h8-font-size), var(--template-h8-font-size-max));
  font-style: var(--template-h8-font-style);
  font-weight: var(--template-h8-font-weight);
}

.crtedu_button .small2,
.crtedu_button.small2 {
  font-family: var(--template-small2-font-family);
  font-size: clamp(var(--template-small2-font-size-min), var(--template-small2-font-size), var(--template-small2-font-size-max));
  font-style: var(--template-small2-font-style);
  font-weight: var(--template-small2-font-weight);
}

.crtedu_button .bg-icon-color,
.crtedu_button.bg-icon-color {
  background-color: var(--template-icon-secondary);
}


.crtedu_button .btn-bg,
.crtedu_button.btn-bg {
  background-color: var(--template-icon-secondary);
}

.crtedu_button .btn-border-brand-detail,
.crtedu_button.btn-border-brand-detail {
  border-color: var(--template-color-brand-detail);
  color: inherit;
  text-decoration: none;
}

.crtedu_button .btn-bg,
.crtedu_button.btn-bg {
  background-color: var(--template-color-btn);
}

.crtedu_button .btn-hover:hover,
.crtedu_button.btn-hover:hover {
  background-color: var(--template-icon-secondary);
}

.crtedu_button .icon-transition:hover>.icon-move-right>*,
.crtedu_button.icon-move-right:hover {
  transform: translateX(4px);
}

.crtedu_button .swiper-button-prev::after,
.crtedu_button.swiper-button-prev::after,
.crtedu_button .swiper-button-next::after,
.crtedu_button.swiper-button-next::after {
  content: '' !important;
}

.crtedu_button .swiper-pagination-bullet,
.crtedu_button.swiper-pagination-bullet {
  border-radius: 0%;
  width: 16px;
  background-color: var(--template-color-brand-detail);
  height: 1px;
  padding-left: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
}

.crtedu_button .bg-nav,
.crtedu_button.bg-nav {
  background-color: var(--template-color-nav) !important;
}

/*---------------------------COLOR UPDATE--------------------------- */
.crtedu_button .topic-red,
.crtedu_button.topic-red {
  color: var(--template-topic-red);
}

.crtedu_button .topic-blue,
.crtedu_button.topic-blue {
  color: var(--template-topic-blue);
}

.crtedu_button .topic-green,
.crtedu_button.topic-green {
  color: var(--template-topic-green);
}

.crtedu_button .topic-yellow,
.crtedu_button.topic-yellow {
  color: var(--template-topic-yellow);
}

.crtedu_button .topic-color,
.crtedu_button.topic-color {
  color: var(--template-topic-color);
}