@charset "UTF-8";
/*_________________________________VARIABLES______________________________________*/
/*________________________VARIABLES__________________________*/
/*__________COLOR THEME____________*/
/*BLUE-GREENS*/
/*OLIVE-GREENS*/
/*Transparent*/
/*ACCENTS*/
@import url("https://use.typekit.net/jgr8vvt.css");
@import url("../open-iconic/font/css/open-iconic-bootstrap.min.css");
:root {
  --core-color-light-rgb-value: hexToRGB(#48522e);
  --core-color-rgb-value: hexToRGB(#505b33);
  --core-color-medium-rgb-value: hexToRGB(#434c2b);
  --core-color-dark-rgb-value: hexToRGB(#3a4225);
  --primary-color-rgb-value: hexToRGB(#535d65);
  --primary-color-medium-rgb-value: hexToRGB(#434a51);
  --primary-color-dark-rgb-value: hexToRGB(#3e454b);
  --secondary-color-rgb-value: hexToRGB(#b59a46);
  --secondary-color-medium-rgb-value: hexToRGB(#dec583);
  --secondary-color-dark-rgb-value: hexToRGB(#a38a3f);
  --black-color-rgb-value: hexToRGB(#282725);
  --white-color-rgb-value: hexToRGB(#FFFFE2);
  --radial-nav-color-rgb-value: hexToRGB(#5a7d59);
  --radial-nav-color-hover-rgb-value: hexToRGB(#719770);
  --radial-nav-color-dark-rgb-value: hexToRGB(#567755);
  --accent-color-1-rgb-value: hexToRGB(#E6754B);
  --accent-color-1-medium-rgb-value: hexToRGB(#E6754B);
  --accent-color-1-dark-rgb-value: hexToRGB(#e36435);
  --accent-color-2-rgb-value: hexToRGB(#C9581F);
  --accent-color-2-medium-rgb-value: hexToRGB(#c0541e);
  --accent-color-2-dark-rgb-value: hexToRGB(#b34e1c);
  --accent-color-3-rgb-value: hexToRGB(#6C682F);
  --accent-color-4-rgb-value: hexToRGB(#FCD773);
  --accent-color-6-rgb-value: hexToRGB(#70A262);
  --accent-color-6-medium-rgb-value: hexToRGB(#649357);
  --accent-color-6-dark-rgb-value: hexToRGB(#50794A);
  --accent-color-7-rgb-value: hexToRGB(#D99D7B);
  --accent-color-7-light-rgb-value: hexToRGB(#EDD4B6);
  --accent-color-8-rgb-value: hexToRGB(#bc6d00);
  --accent-color-9-rgb-value: hexToRGB(#cb904a);
  --accent-color-10-rgb-value: hexToRGB(#8C862B);
  --accent-color-11-rgb-value: hexToRGB(#768327);
  --accent-color-12-rgb-value: hexToRGB(#6C682F);
  --accent-color-12-medium-rgb-value: hexToRGB(#99933F);
  --neutral-000-rgb-value: hexToRGB(#fff);
  --neutral-100-rgb-value: hexToRGB(#FFFFF3);
  --neutral-200-rgb-value: hexToRGB(#FFFFD6);
  --neutral-300-rgb-value: hexToRGB(#F5F1C7);
  --neutral-400-rgb-value: hexToRGB(#E3CE97);
}

/*DEFAULT*/
:root {
  --core-color: #505b33;
  --core-color-light: #48522e;
  --core-color-medium: #434c2b;
  --core-color-dark: #3a4225;
  --primary-color: #535d65;
  --primary-color-light: #6a7681;
  --primary-color-medium: #434a51;
  --primary-color-dark: #3e454b;
  --secondary-color-lighter: #baa04f;
  --secondary-color: #b59a46;
  --secondary-color-medium: #dec583;
  --secondary-color-dark: #a38a3f;
  --black-color: #282725;
  --white-color: #FFFFE2;
  --radial-nav-color: #5a7d59;
  --radial-nav-color-hover: #719770;
  --radial-nav-color-dark: #567755;
  --accent-color-1: #E6754B;
  --accent-color-1-medium: #E6754B;
  --accent-color-1-dark: #e36435;
  --accent-color-2: #C9581F;
  --accent-color-2-light: #cf5b20;
  --accent-color-2-medium: #c0541e;
  --accent-color-2-dark: #b34e1c;
  --accent-color-3: #6C682F;
  --accent-color-4: #FCD773;
  --accent-color-4-light: #fddf8c;
  --accent-color-6-muted: hsl(107, 26%, 71%);
  --accent-color-6: #70a262;
  --accent-color-6-light: #75a668;
  --accent-color-6-medium: #649357;
  --accent-color-6-dark: #50794A;
  --accent-color-7: #D99D7B;
  --accent-color-7-light: #EDD4B6;
  --accent-color-8: #bc6d00;
  --accent-color-9: #cb904a;
  --accent-color-10: #8C862B;
  --accent-color-11: #768327;
  --accent-color-12: #6C682F;
  --accent-color-12-light: #aaa346;
  --accent-color-12-medium: #99933F;
  --accent-color-12-dark: #595527;
  --accent-color-13: #caceb1;
  --neutral-000: #fff;
  --neutral-100: #FFFFF3;
  --neutral-150: #fafadf;
  --neutral-200: #FFFFD6;
  --neutral-300: #F5F1C7;
  --neutral-350: #f4efbe;
  --neutral-400: #E3CE97;
  --neutral-500: #e8e5c3;
  --neutral-600: rgba(227, 206, 151, 0.66);
  /*shadows and transparent*/
  --default-drop-shadow-color: #ffffff4d;
  --box-shadow-color-1: var(--accent-color-9);
  --box-shadow-color-2: #bb995938;
  --box-shadow-color-3: #5a7d5954;
  --box-shadow-color-4: #be000040;
  --border-color-3: #515c3417;
  /*Table Elements*/
  --table-box-shadow-color: var(--box-shadow-color-2);
  --table-header-background-color: var(--core-color);
  --table-header-border-color: var(--core-color);
  --table-data-text-color: var(--white-color);
  --table-data-top-border-color: #5c68102b;
  --table-hover-color: #515c344a;
  --table-hover-text-color: var(--core-color);
  --table-striped-border-color: var(--neutral-100);
  --table-striped-alternate-background-color: var(--neutral-300);
  --table-light-header-color: ;
  /*Selectable Lists*/
  --selectable-list-item-background-color: ;
  --warning-color: var(--secondary-color);
  --warning-color-medium: var(--secondary-color-medium);
  --warning-color-dark: var(--secondary-color-dark);
  --mild-danger-color: var(--accent-color-1);
  --mild-danger-color-medium: var(--accent-color-1-medium);
  --mild-danger-color-dark: var(--accent-color-1-dark);
  --danger-color: var(--accent-color-2);
  --danger-color-light: var(--accent-color-2-light);
  --danger-color-medium: var(--accent-color-2-medium);
  --danger-color-dark: var(--accent-color-2-dark);
  --success-color: var(--accent-color-6);
  --success-color-light: var(--accent-color-6-light);
  --success-color-medium: var(--accent-color-6-medium);
  --success-color-dark: var(--accent-color-6-dark);
  --super-success-color: var(--core-color);
  --super-success-color-medium: var(--core-color-medium);
  --super-success-color-dark: var(--core-color-dark);
  --info-color: var(--primary-color);
  --light-color: var(--accent-color-1);
  --dark-color: var(--core-color);
  --dark-color-dark: var(--core-color-medium);
  --disabled-color: lightgrey;
  --disabled-color-dark: darkgrey;
  --color-primary-h: 207;
  --color-primary-s: 10%;
  --color-primary-l: 36%;
  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
  --color-dark-h: 77;
  --color-dark-s: 28%;
  --color-dark-l: 28%;
  --color-dark-hsl: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
  /*Background-colors*/
  --light-background-color-lighter: var(--neutral-100);
  --light-background-color: var(--neutral-200);
  --light-background-color-darker: var(--neutral-300);
  --light-background-color-darkest: var(--neutral-600);
  --dark-background-color: var(--core-color);
  --black-background-color: var(--black-color);
  --olive-background-color: var(--accent-color-10);
  --light-pink-background-color: var(--accent-color-7-light);
  --pink-background-color: var(--accent-color-7);
  --olive-1-background-color: var(--accent-color-11);
  --olive-2-background-color: var(--accent-color-6-dark);
  --yellow-background-color: var(--accent-color-4);
  /*text colors*/
  --white-text-color: var(--neutral-000);
  --light-text-color: var(--neutral-200);
  --light-alternate-text-color: var(--accent-color-7-light);
  --dark-text-color: var(--core-color);
  --black-text-color: var(--black-color);
  --muted-text-color: var(--accent-color-10);
  --muted-text-color-darker: var(--accent-color-10-dark);
  --light-pink-text-color: var(--accent-color-7-light);
  --link-color: var(--accent-color-10);
  --heading-font-color: var(--primary-color);
  --body-font-color: var(--primary-color-dark);
  --body-font-color-light: var(--primary-color-medium);
  --visual-link-color: var(--accent-color-11);
  /*--multi-selects*/
  --input-text-color: var(--dark-color);
  --input-text-color: var(--dark-color);
  --input-box-shadow-color: var(--box-shadow-color-3);
  --input-neutral-background-color: var(--neutral-500);
  --input-active-background-color: var(--neutral-300);
  --input-active-text-color: RGBA(var(--core-color-rgb-value) .8);
  --input-autofill-background-color: RGBA(var(--core-color-rgb-value) 57) !important;
  --input-placeholder-text-color: RGBA(var(--core-color-rgb-value), .9);
  --input-autofill-text-color: var(--core-color);
  --checkbox-color: var(--warning-color);
  --checkbox-text-color: var(--light-text-color);
  --radio-checked-color: var(--warning-color);
  --multiselect-background-color: var(--info-color);
  --multiselect-option-checked-color: var(--warning-color);
  --text-area-resizer-color: var(--core-color);
  /*Main App Menu*/
  --radial-menu-background-color: var(--radial-nav-color);
  --radial-menu-background-color-hover: var(--radial-nav-color);
  --radial-menu-notification-background-color: #ff5600;
  --radial-menu-text-color: var(--light-text-color);
  --radial-menu-shadow-color-hover: var(--default-drop-shadow-color);
  --radial-menu-notification-text-color: var(--white-text-color);
  /*Start Menu*/
  --start-menu-link-color: #ffdece;
  --start-menu-hover-underline-color: var(--accent-color-7-light);
  /*Profile*/
  --compact-profile-background-color: var(--accent-color-12-medium);
  /*Core UI*/
  --global-background-color: var(--core-color);
  --scroll-bar-container-color: var(--light-background-color-darker);
  --scroll-bar-color: var(--accent-color-1);
  --header-row-color: var(--neutral-400);
  /*Notification Hub*/
  --notification-hub-background-color: var(--core-color);
  --notification-hub-header-text-color: var(--white-color);
  --notification-hub-background-image-path: url(/images/global/shapes/paper-olive.svg);
  --notification-hub-close-button-color: var(--accent-color-2);
  --notification-hub-close-button-icon-color: var(--white-text-color);
  --notification-hub-unread-message-text-color: var(--white-color);
  --notification-hub-read-message-text-color: var(--black-color);
  --notification-hub-unread-message-color: var(--accent-color-10);
  --notification-hub-unread-message-date-color: var(--accent-color-10);
  --notification-hub-read-message-color: var(--neutral-300);
  --notification-hub-read-message-date-color: var(--neutral-300);
  --notification-hub-unread-invitation-text-color: var(--white-color);
  --notification-hub-read-invitation-text-color: var(--black-color);
  --notification-hub-unread-invitation-color: var(--accent-color-10);
  --notification-hub-unread-invitation-date-color: var(--accent-color-10);
  --notification-hub-read-invitation-color: var(--neutral-300);
  --notification-hub-read-invitation-date-color: var(--neutral-300);
  --notification-hub-empty-background-color: var(--neutral-300);
  /*Avatar*/
  --selected-avatar-color: var(--accent-color-4);
  --avatar-card-background-color: var(--dark-background-color);
  --avatar-card-border-color: var(--warning-color);
  /*Loading*/
  --loading-screen-text-color: var(--light-text-color);
  --loading-screen-text-shadow-color: var(--core-color);
  /*Tiles*/
  --tile-shadow-color: #58582a;
  --tile-accent-box-shadow-color: var(--secondary-color);
  /*Modals*/
  --blazor-modal-background-color: var(--light-background-color);
  --blazor-modal-box-shadow-color: var(--accent-color-9);
  --blazor-close-btn-color: var(--light-color);
  --blazor-modal-header-image-path: url("/images/global/headers/header-retro-forest.svg");
  --blazor-modal-header-color: var(--light-alternate-text-color);
  --modal-close-btn-color: var(--light-color);
  --modal-close-btn-color-hover: var(--accent-color-1-dark);
  --modal-open-btn-color: var(--radial-nav-color);
  --modal-open-btn-color-hover: var(--radial-nav-color-dark);
  --success-modal-shadow-color: var(--accent-color-9);
  --success-modal-text-shadow-color: #2c3840;
  /*Feedback Modal*/
  --feedback-modal-btn-background-color: var(--neutral-300);
  --feedback-modal-btn-text-color: #212529;
  --feedback-modal-btn-border-color: var(--neutral-400);
  --feedback-modal-btn-box-shadow-color: var(--neutral-400);
  --feedback-modal-btn-info-background-color: var(--accent-color-4);
  --feedback-modal-btn-info-active-background-color: var(--accent-color-4-light)
  --feedback-modal-btn-info-border-color: var(--neutral-300);
  --feedback-modal-btn-info-active-box-shadow-color: var(--accent-color-4);
  /*Progress Components*/
  --timer-background-color: var(--light-background-color-darker);
  --card-counter-background-image-path: url(/images/pages/flashcards/flashcards-ribbon-lrg.svg);
  --card-counter-text-color: var(--dark-color);
  --progress-bar-container-background-color: var(--light-background-color);
  --progress-bar-inner-background-color: var(--neutral-300);
  --progress-bar-text-color: var(--accent-color-1);
  --progress-bar-shadow-color: var(--box-shadow-color-4);
  --progress-bar-filled-area-color: #beca59;
  --progress-bar-filled-area-text-color: var(--dark-text-color);
  --progress-bar-icon-color: var(--accent-color-1);
  --progress-bar-icon-border-color: var(--accent-color-1);
  /*Toasts*/
  --toast-default-text-color: var(--white-text-color);
  --toast-info-background-color: var(--info-color);
  --toast-info-text-color: var(--white-text-color);
  --toast-success-background-color: var(--success-color);
  --toast-success-text-color: var(--white-text-color);
  --toast-warning-background-color: var(--accent-color-4);
  --toast-warning-text-color: var(--dark-color);
  --toast-danger-background-color: var(--danger-color);
  --toast-danger-text-color: var(--white-text-color);
  /*Alerts*/
  --alert-default-text-color: var(--white-text-color);
  --alert-primary-text-color: var(--accent-color-7-light);
  --alert-primary-image-path: url("/images/global/headers/header-retro-forest.svg");
  --alert-info-text-color: var(--white-text-color);
  --alert-info-image-path: url("/images/global/headers/header-retro-blue.svg");
  --alert-success-text-color: var(--white-text-color);
  --alert-success-image-path: url("/images/global/headers/header-retro-green.svg");
  --alert-warning-text-color: var(--dark-color);
  --alert-warning-image-path: url("/images/global/headers/header-retro-mustard.svg");
  --alert-danger-text-color: var(--black-text-color);
  --alert-danger-image-path: url("/images/global/headers/header-retro-red.svg");
  --alert-danger-text-color: var(--black-text-color);
  --alert-danger-image-path: url("/images/global/headers/header-retro-red.svg");
  --alert-secondary-text-color: var(--black-text-color);
  --alert-secondary-image-path: url("/images/global/headers/header-retro-olive.svg");
  --alert-light-text-color: var(--dark-text-color);
  --alert-light-image-path: url("/images/global/headers/header-retro-light.svg");
  /*Badges & Pills*/
  --badge-primary-background-color: var(--core-color);
  --badge-primary-text-color: var(--light-text-color);
  --badge-secondary-background-color: var(--accent-color-1);
  --badge-secondary-text-color: var(--light-text-color);
  --badge-success-background-color: var(--success-color);
  --badge-success-text-color: var(--light-text-color);
  --badge-warning-background-color: var(--warning-color);
  --badge-warning-text-color: var(--light-text-color);
  --badge-danger-background-color: var(--danger-color);
  --badge-danger-text-color: var(--light-text-color);
  --badge-info-background-color: var(--info-color);
  --badge-info-text-color: var(--light-text-color);
  --badge-light-background-color: var(--light-color);
  --badge-light-text-color: var(--dark-color);
  --badge-dark-background-color: var(--black-color);
  --badge-dark-text-color: var(--light-text-color);
  /*Alerts*/
  --blazor-error-background-color: var(--light-background-color);
  /*Tabs*/
  --tabs-default-link-color: var(--accent-color-12);
  --tabs-default-link-color-hover: var(--accent-color-12-dark);
  --tabs-default-active-color: var(--accent-color-12-medium);
  --tabs-default-active-hover-color: var(--accent-color-12-light);
  --tabs-default-text-color: var(--black-text-color);
  --animated-tabs-background-color: var(--neutral-100);
  --animated-tabs-active-color: var(--secondary-color);
  /*Nav Brand Area*/
  --cms-navbar-brand-text-color: var(--white-color);
  --cms-navbar-brand-logo-container-image-path: url("/images/global/headers/header-retro-olive.svg");
  /*Account Toggle CMS*/
  --account-toggle-cms-text-color: var(--black-text-color);
  --account-toggle-cms-background-color: var(--secondary-color);
  --account-toggle-cms-background-color-hover: var(--secondary-color-lighter);
  --account-toggle-cms-border-color: var(--black-color);
  --account-toggle-cms-avatar-background-color: var(--core-color-dark);
  --account-toggle-cms-dropdown-background-color: var(--core-color-dark);
  --account-toggle-cms-dropdown-background-color-hover: var(--core-color);
  --account-toggle-cms-dropdown-link-color: var(--secondary-color);
  --account-toggle-cms-dropdown-link-color-hover: var(--white-color);
  --account-toggle-cms-dropdown-logout-color: var(--accent-color-7-light);
  /*CMS Menu*/
  --cms-nav-background-color: var(--core-color-light);
  --cms-nav-background-color-hover: var(--neutral-300);
  --cms-nav-background-color-active: var(--neutral-200);
  --cms-nav-text-color-active: var(--dark-color);
  --cms-nav-shadow-color-hover: var(--default-drop-shadow-color);
  --cms-nav-text-color: var(--light-text-color);
  --cms-nav-text-color-hover: var(--dark-text-color);
  --cms-nav-text-color-active: var(--primary-color);
  --cms-nav-submenu-text-color: var(--core-color);
  --cms-nav-submenu-text-color-hover: var(--white-text-color);
  --cms-nav-submenu-background-color: var(--core-color);
  --cms-nav-mobile-background-color: #363c25;
  /*Help Menu (also used in StyleGuide*/
  --vertical-tabs-nav-background-color: var(--dark-background-color);
  --vertical-tabs-nav-text-color: var(--light-text-color);
  --vertical-tabs-container-background-color: var(--white-color);
  --vertical-tabs-tab-hover-border-color: var(--warning-color);
  --vertical-tabs-active-tab-color: var(--white-color);
  --vertical-tabs-active-tab-text-color: var(--dark-text-color);
  /*Cohorts*/
  --cohort-thumbnail-background-color: var(--light-background-color);
  --cohort-thumbnail-background-color-hover: var(--light-background-color-darker);
  --cohort-thumbnail-border-color: var(--warning-color);
  --cohort-thumbnail-text-color: var(--warning-color);
  --cohort-members-tile-background-color: var(--light-background-color-lighter);
  --cohort-members-tile-border-color: var(--warning-color);
  /*Module Map*/
  --module-popover-background-color: var(--secondary-color);
  --module-popover-shadow-color: var(--accent-color-3);
  --module-popover-heading-color: var(--dark-text-color);
  /*Lessons*/
  --lesson-default-border-color: var(--secondary-color);
  --lesson-optional-border-color: var(--accent-color-8);
  --lesson-inprogress-border-color: var(--accent-color-3);
  --lesson-completed-border-color: var(--success-color);
  --lesson-completed-highlight-color: var(--accent-color-4);
  --lesson-shadow-color: --box-shadow-color-4;
  /*lesson popover descriptions*/
  --lesson-popover-background-color: var(--secondary-color);
  --lesson-popover-shadow-color: var(--accent-color-3);
  /*Activities menu*/
  --activity-complete-checkmark-color: var(--accent-color-4);
  --activity-icon-frame-color: var(--secondary-color);
  --activity-icon-background-color: var(--core-color);
  --activity-menu-ribbon-image-neutral: url(/images/levels/activities/activity-ribbon-neutral.svg);
  --activity-menu-ribbon-image-hover: url(/images/levels/activities/activity-ribbon-hover.svg);
  /*Game Replacements*/
  --match-activity-dropspot-image-path: url(/images/pages/match-game/match-game-leaf-green.svg);
  --match-activity-highlighter-color: var(--accent-color-4);
  --multiple-choice-container-color: var(--light-background-color-darker);
  --multiple-choice-options-container-color: var(--neutral-400);
  --multiple-choice-options-item-color: var(--light-background-color);
  --multiple-choice-option-hover-color: #D3D7DB;
  --multiple-choice-option-active-color: #657F97;
  --multiple-choice-option-active-text-color: var(--light-text-color);
  --multiple-choice-option-correct-color: var(--success-color);
  --multiple-choice-option-correct-text-color: var(--light-text-color);
  --multiple-choice-option-wrong-color: var(--danger-color);
  --multiple-choice-option-wrong-text-color: var(--light-text-color);
  --fill-blanks-container-color: var(--neutral-200);
  --fill-blanks-input-background-color: var(--neutral-300);
  --fill-blanks-input-text-color: var(--dark-text-color);
  --fill-blanks-input-dashes-color: var(--accent-color-1);
  /*Background Images*/
  --background-1-image-path-md: url("/images/global/backgrounds/bg-texture-lines-1000.png");
  --background-1-image-path-lg: url("/images/global/backgrounds/bg-texture-lines-1000.png");
  --background-1-image-path-xl: url("/images/global/backgrounds/bg-texture-lines.svg");
  --background-1-color: var(--core-color);
  --background-2-image-path-md: url("/images/global/backgrounds/bg-texture-v-1000.png");
  --background-2-image-path-lg: url("/images/global/backgrounds/bg-texture-v-1000.png");
  --background-2-image-path-xl: url("/images/global/backgrounds/bg-texture-v.svg");
  --background-2-color: var(--success-color);
  --background-3-image-path-md: url("/images/global/backgrounds/bg-texture-basketweave-1000.png");
  --background-3-image-path-lg: url("/images/global/backgrounds/bg-texture-basketweave-1000.png");
  --background-3-image-path-xl: url("/images/global/backgrounds/bg-texture-basketweave.svg");
  --background-3-color: var(--warning-color);
  --background-4-image-path: url("/images/global/backgrounds/bg-campsite-animated-fire-no-fish.svg");
  --background-4-color: var(--success-color);
  --background-5-image-path-md: url("/images/global/backgrounds/bg-mountains-road-1440x607.png");
  --background-5-image-path-lg: url("/images/global/backgrounds/bg-mountains-road-1920x929.png");
  --background-5-image-path-xl: url("/images/global/backgrounds/bg-mountains-road-2500x1406.png");
  --background-5-image-path-xxl: url("/images/global/backgrounds/bg-mountains-road-bg-mountains-road.svg");
  --background-6-image-path-md: url("/images/global/backgrounds/bg-forest-olive.png");
  --background-6-image-path-short: url("/images/global/backgrounds/bg-forest-olive-1440x607.png");
  --background-6-image-path-lg: url("/images/global/backgrounds/bg-forest-olive-1920x929.png");
  --background-6-image-path-xl: url("/images/global/backgrounds/bg-forest-olive-2500x1406.png");
  --background-6-image-path-xxl: url("/images/global/backgrounds/bg-forest-olive.png");
  --background-7-image-path-md: url("/images/global/backgrounds/bg-mountain-forest-1920x929.png");
  --background-7-image-path-short: url("/images/global/backgrounds/bg-mountain-forest-1440x607.png");
  --background-7-image-path-lg: url("/images/global/backgrounds/bg-mountain-forest-2500x1406.png");
  --background-7-image-path-xl: url("/images/global/backgrounds/bg-mountain-forest.png");
  --background-9a-image-path: url("/images/pages/tutorial/bg-camp-closeup-complete-29052023.svg");
  --background-9b-image-path: url("/images/pages/tutorial/bg-camp-closeup-empty.svg");
  /*Headers*/
  --header-ribbon-default-path: url("/images/global/headers/header-ribbon-yellow.svg");
  --header-ribbon-mustard-image-path: url("/images/global/headers/header-ribbon-mustard.svg");
  --header-ribbon-mustard-text-color: var(--light-text-color);
  --header-ribbon-olive-image-path: url("/images/global/headers/header-ribbon-olive.svg");
  --header-ribbon-olive-text-color: var(--light-text-color);
  --header-ribbon-blue-image-path: url("/images/global/headers/header-ribbon-blue.svg");
  --header-ribbon-blue-text-color: var(light-text-color);
  --header-ribbon-orange-image-path: url("/images/global/headers/header-ribbon-orange.svg");
  --header-ribbon-orange-text-color: var(--light-text-color);
  --header-ribbon-green-image-path: url("/images/global/headers/header-ribbon-green.svg");
  --header-ribbon-green-text-color: var(--light-text-color);
  --header-ribbon-double-left-image-path: url("/images/global/headers/header-ribbon-blue-left.svg");
  --header-ribbon-double-right-image-path: url("/images/global/headers/header-ribbon-blue-right.svg");
  --header-ribbon-double-text-color: var(--light-text-color);
  --header-ribbon-double-left-olive-image-path: url("/images/global/headers/header-ribbon-olive-left.svg");
  --header-ribbon-double-right-olive-image-path: url("/images/global/headers/header-ribbon-olive-right.svg");
  --header-retro-secondary-image-path: url("/images/global/headers/header-retro-olive.svg");
  --header-retro-secondary-image-path: url("/images/global/headers/header-retro-olive.svg");
  /*Flashcards*/
  --flashcard-touch-highlight-color: var(--accent-color-4);
  --flashcard-border-color: var(--core-color);
  --flashcard-btn-color: var(--core-color);
  --flashcard-text-color-hover: var(--)
  /*Charts*/
  --chart-legend-text-color: var(--primary-color-light);
  --chart-axis-title-color: #8E9576;
  --chart-axis-label-color: rgba(13, 13, 18, 0.46);
  --chart-axis-stroke-group-1: #eaf1d7;
  --chart-axis-stroke-group-2: #c1c7b3;
  --chart-tooltip-background-color: #FEFEF2;
  --chart-trackball-color: var(--accent-color-6);
  /*Decorative Elements*/
  --decor-element-tape-color: transparent;
}

/*THEME SETUP*/
/*_____________TYPOGRAPHY_________________*/
/*Google Fonts*/
/*Icon Font*/
/*BODY*/
/*BREAKPOINTS*/
/*_____________Z-INDEX STRUCTURE_________________*/
/*_____________PURE CSS ANIMATIONS_________________*/
.animista [class*=anim-delay-] {
  animation-duration: 0.75s;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-fill-mode: both;
}
.animista.fade-in-bottom [class*=anim-delay-] {
  animation-name: fade-in-bottom;
}
.animista.flip-in-hor-bottom [class*=anim-delay-], .animista.flip-in-hor-bottom[class*=anim-delay-] {
  animation-name: flip-in-hor-bottom;
}
.animista.fade-in-top [class*=anim-delay-] {
  animation-name: fade-in-top;
}
.animista.fade-in-left [class*=anim-delay-] {
  animation-name: fade-in-left;
}
.animista.fade-in-right [class*=anim-delay-] {
  animation-name: fade-in-right;
}
.animista.slide-in-right [class*=anim-delay-] {
  animation-name: slide-in-right;
}
.animista.slide-in-left [class*=anim-delay-] {
  animation-name: slide-in-left;
}
.animista.slide-in-bottom [class*=anim-delay-] {
  animation-name: slide-in-bottom;
}
.animista.slide-in-top [class*=anim-delay-] {
  animation-name: slide-in-top;
}
.animista .anim-delay-1 {
  animation-delay: 0.1s;
}
.animista .anim-delay-2 {
  animation-delay: 0.2s;
}
.animista .anim-delay-3 {
  animation-delay: 0.3s;
}
.animista .anim-delay-4 {
  animation-delay: 0.4s;
}
.animista .anim-delay-5 {
  animation-delay: 0.5s;
}
.animista .anim-delay-6 {
  animation-delay: 0.6s;
}
.animista .anim-delay-7 {
  animation-delay: 0.7s;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-9-22 16:11:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation flip-in-hor-bottom
 * ----------------------------------------
 */
@keyframes flip-in-hor-bottom {
  0% {
    transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation fade-in-top
 * ----------------------------------------
 */
@keyframes fade-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation fade-in-left
 * ----------------------------------------
 */
@keyframes fade-in-left {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation fade-in-right
 * ----------------------------------------
 */
@keyframes fade-in-right {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation slide-in-right
 * ----------------------------------------
 */
@keyframes slide-in-right {
  0% {
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@keyframes slide-in-left {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@keyframes slide-in-bottom {
  0% {
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/**
 * ----------------------------------------
 * animation slide-in-top
 * ----------------------------------------
 */
@keyframes slide-in-top {
  0% {
    transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/**
* ----------------------------------------
* animation scale-up-center
* ----------------------------------------
*/
@keyframes scale-up-center {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2023-1-18 14:3:2
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation scale-in-ver-top
 * ----------------------------------------
 */
@keyframes scale-in-ver-top {
  0% {
    transform: scaleY(0);
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 100% 0%;
    opacity: 1;
  }
}
.cursor-pointer {
  cursor: pointer;
}

.text-underline {
  text-decoration: underline;
}

th.comment-cell {
  width: 25rem;
}

th.sortable-column {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
th.sortable-column.sorted-descending::after {
  content: " \f0de";
  font-family: "Line Awesome Free";
  text-decoration: none;
  font-size: 1.2rem;
  display: inline-block;
}
th.sortable-column.sorted-ascending::after {
  content: " \f0dd";
  font-family: "Line Awesome Free";
  text-decoration: none;
  font-size: 1.2rem;
  display: inline-block;
}

/*This hides something without removing it from the html*/
.visually-hidden {
  position: absolute;
  left: -100vw;
  display: none !important;
}

.balance-text {
  text-wrap: balance;
}

@media (min-width: 1500px) {
  .col-xxl-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
}

@media (min-width: 1500px) {
  .col-xxl-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
}

@media (min-width: 1500px) {
  .col-xxl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media (min-width: 1500px) {
  .col-xxl-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

@media (min-width: 1500px) {
  .col-xxl-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
}

@media (min-width: 1500px) {
  .col-xxl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: 1500px) {
  .col-xxl-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
}

@media (min-width: 1500px) {
  .col-xxl-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
}

@media (min-width: 1500px) {
  .col-xxl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
}

@media (min-width: 1500px) {
  .col-xxl-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
}

@media (min-width: 1500px) {
  .col-xxl-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
}

@media (min-width: 1500px) {
  .col-xxl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/*_____________TYPOGRAPHY_________________*/
html,
body {
  /*.full-width-app,
  .cms-preview,
  .login-form {*/
  font-family: "tgn-soft-round-comp", sans-serif;
  font-weight: 700;
  color: var(--body-font-color);
}

/*}*/
.font-size-xs {
  font-size: 80% !important;
}
@media (max-width: 1499.98px) {
  .font-size-xs {
    font-size: 53.3333333333% !important;
  }
}
@media screen and (max-height: 768px) {
  .font-size-xs {
    font-size: 53.3333333333% !important;
  }
}

.font-size-sm, #notification-menu-container #notifications-list .notification-date, #notification-menu-container #notifications-list .entry-description {
  font-size: 90% !important;
}
@media (max-width: 1499.98px) {
  .font-size-sm, #notification-menu-container #notifications-list .notification-date, #notification-menu-container #notifications-list .entry-description {
    font-size: 60% !important;
  }
}
@media screen and (max-height: 768px) {
  .font-size-sm, #notification-menu-container #notifications-list .notification-date, #notification-menu-container #notifications-list .entry-description {
    font-size: 60% !important;
  }
}

.font-size-md {
  font-size: 120% !important;
}
@media (max-width: 1499.98px) {
  .font-size-md {
    font-size: 80% !important;
  }
}
@media screen and (max-height: 768px) {
  .font-size-md {
    font-size: 80% !important;
  }
}

.font-size-lg {
  font-size: 150% !important;
}
@media (max-width: 1499.98px) {
  .font-size-lg {
    font-size: 100% !important;
  }
}
@media screen and (max-height: 768px) {
  .font-size-lg {
    font-size: 100% !important;
  }
}

.font-size-xl {
  font-size: 200% !important;
}
@media (max-width: 1499.98px) {
  .font-size-xl {
    font-size: 133.3333333333% !important;
  }
}
@media screen and (max-height: 768px) {
  .font-size-xl {
    font-size: 133.3333333333% !important;
  }
}

.full-width-app,
.cms-preview,
.login-form, .cms-layout {
  /*Set body properties on these containers so cms is not affected*/
  /*Text Color Classes*/
  /*Font Family Classes*/
  /*Lists*/
  /*Blockquotes*/
}
.full-width-app .form-group,
.cms-preview .form-group,
.login-form .form-group, .cms-layout .form-group {
  font-family: "tgn-soft-round-comp", sans-serif;
  color: var(--body-font-color);
  font-size: 130%;
}
@media (max-width: 1499.98px) {
  .full-width-app .form-group,
  .cms-preview .form-group,
  .login-form .form-group, .cms-layout .form-group {
    font-size: 1.2rem !important;
  }
  .full-width-app .form-group label,
  .cms-preview .form-group label,
  .login-form .form-group label, .cms-layout .form-group label {
    font-size: 1.2rem !important;
  }
  .full-width-app .form-group li,
  .cms-preview .form-group li,
  .login-form .form-group li, .cms-layout .form-group li {
    font-size: 1.2rem !important;
  }
}
.full-width-app .text-muted,
.cms-preview .text-muted,
.login-form .text-muted, .cms-layout .text-muted {
  color: var(--muted-text-color) !important;
}
.full-width-app .text-white,
.cms-preview .text-white,
.login-form .text-white, .cms-layout .text-white {
  color: var(--light-text-color) !important;
}
.full-width-app .text-disabled,
.cms-preview .text-disabled,
.login-form .text-disabled, .cms-layout .text-disabled {
  color: color-mix(in srgb, var(--primary-color-dark) 50%, var(--white-color) 50%);
}
.full-width-app .text-primary,
.cms-preview .text-primary,
.login-form .text-primary, .cms-layout .text-primary {
  color: var(--primary-color) !important;
}
.full-width-app .text-secondary,
.cms-preview .text-secondary,
.login-form .text-secondary, .cms-layout .text-secondary {
  color: var(--secondary-color) !important;
}
.full-width-app .text-success,
.cms-preview .text-success,
.login-form .text-success, .cms-layout .text-success {
  color: var(--success-color) !important;
}
.full-width-app .text-info,
.cms-preview .text-info,
.login-form .text-info, .cms-layout .text-info {
  color: var(--info-color) !important;
}
.full-width-app .text-warning,
.cms-preview .text-warning,
.login-form .text-warning, .cms-layout .text-warning {
  color: var(--warning-color) !important;
}
.full-width-app .text-danger,
.cms-preview .text-danger,
.login-form .text-danger, .cms-layout .text-danger {
  color: var(--danger-color) !important;
}
.full-width-app .text-mild-danger,
.cms-preview .text-mild-danger,
.login-form .text-mild-danger, .cms-layout .text-mild-danger {
  color: var(--mild-danger-color) !important;
}
.full-width-app .text-light,
.cms-preview .text-light,
.login-form .text-light, .cms-layout .text-light {
  color: var(--white-color) !important;
}
.full-width-app .text-dark,
.cms-preview .text-dark,
.login-form .text-dark, .cms-layout .text-dark {
  color: var(--dark-color) !important;
}
.full-width-app .text-olive,
.cms-preview .text-olive,
.login-form .text-olive, .cms-layout .text-olive {
  color: var(--accent-color-10) !important;
}
.full-width-app .text-pink,
.cms-preview .text-pink,
.login-form .text-pink, .cms-layout .text-pink {
  color: var(--accent-color-7) !important;
}
.full-width-app .text-light-pink,
.cms-preview .text-light-pink,
.login-form .text-light-pink, .cms-layout .text-light-pink {
  color: var(--accent-color-7-light) !important;
}
.full-width-app .text-orange,
.cms-preview .text-orange,
.login-form .text-orange, .cms-layout .text-orange {
  color: var(--accent-color-1) !important;
}
.full-width-app .text-beige,
.cms-preview .text-beige,
.login-form .text-beige, .cms-layout .text-beige {
  color: var(--neutral-300) !important;
}
.full-width-app .orange,
.cms-preview .orange,
.login-form .orange, .cms-layout .orange {
  color: var(--accent-color-1) !important;
}
.full-width-app .green,
.cms-preview .green,
.login-form .green, .cms-layout .green {
  color: var(--accent-color-6) !important;
}
.full-width-app .burnt-orange,
.cms-preview .burnt-orange,
.login-form .burnt-orange, .cms-layout .burnt-orange {
  color: var(--accent-color-8) !important;
}
.full-width-app .dark-green,
.cms-preview .dark-green,
.login-form .dark-green, .cms-layout .dark-green {
  color: var(--accent-color-6-dark) !important;
}
.full-width-app .mossy-green,
.cms-preview .mossy-green,
.login-form .mossy-green, .cms-layout .mossy-green {
  color: var(--accent-color-11) !important;
}
.full-width-app .blue,
.cms-preview .blue,
.login-form .blue, .cms-layout .blue {
  color: var(--info-color) !important;
}
.full-width-app .text-olive,
.cms-preview .text-olive,
.login-form .text-olive, .cms-layout .text-olive {
  color: var(--dark-color) !important;
}
.full-width-app .text-pink,
.cms-preview .text-pink,
.login-form .text-pink, .cms-layout .text-pink {
  color: var(--accent-color-7) !important;
}
.full-width-app .text-light-pink,
.cms-preview .text-light-pink,
.login-form .text-light-pink, .cms-layout .text-light-pink {
  color: var(--light-pink-text-color) !important;
}
.full-width-app .text-beige,
.cms-preview .text-beige,
.login-form .text-beige, .cms-layout .text-beige {
  color: var(--neutral-300) !important;
}
.full-width-app .body-font,
.cms-preview .body-font,
.login-form .body-font, .cms-layout .body-font {
  font-family: "tgn-soft-round-comp", sans-serif !important;
  font-weight: 700;
  font-style: normal;
}
.full-width-app .script-font,
.cms-preview .script-font,
.login-form .script-font, .cms-layout .script-font {
  font-family: fenway-park-jf, sans-serif !important;
  font-weight: 400;
  font-style: normal;
}
.full-width-app .serif-font,
.cms-preview .serif-font,
.login-form .serif-font, .cms-layout .serif-font {
  font-family: gin, serif !important;
  font-weight: 400;
  font-style: normal;
}
.full-width-app .slab-font,
.cms-preview .slab-font,
.login-form .slab-font, .cms-layout .slab-font {
  font-family: henderson-slab-basic, serif !important;
  font-weight: 900;
  font-style: normal;
}
.full-width-app .heading-font,
.cms-preview .heading-font,
.login-form .heading-font, .cms-layout .heading-font {
  font-family: "Cubano", sans-serif !important;
  font-weight: 400;
}
.full-width-app .display-1, .full-width-app .display-2, .full-width-app .display-3, .full-width-app .display-4, .full-width-app .bd-title,
.cms-preview .display-1,
.cms-preview .display-2,
.cms-preview .display-3,
.cms-preview .display-4,
.cms-preview .bd-title,
.login-form .display-1,
.login-form .display-2,
.login-form .display-3,
.login-form .display-4,
.login-form .bd-title, .cms-layout .display-1, .cms-layout .display-2, .cms-layout .display-3, .cms-layout .display-4, .cms-layout .bd-title {
  font-family: henderson-slab-basic, serif;
  color: var(--dark-color);
}
.full-width-app p,
.full-width-app u,
.full-width-app li,
.full-width-app blockquote,
.full-width-app label,
.cms-preview p,
.cms-preview u,
.cms-preview li,
.cms-preview blockquote,
.cms-preview label,
.login-form p,
.login-form u,
.login-form li,
.login-form blockquote,
.login-form label, .cms-layout p,
.cms-layout u,
.cms-layout li,
.cms-layout blockquote,
.cms-layout label {
  font-size: 1.6rem;
  font-family: "tgn-soft-round-comp", sans-serif;
  color: var(--body-font-color-light);
  letter-spacing: 0.1px;
}
@media screen and (max-height: 768px) {
  .full-width-app p,
  .full-width-app u,
  .full-width-app li,
  .full-width-app blockquote,
  .full-width-app label,
  .cms-preview p,
  .cms-preview u,
  .cms-preview li,
  .cms-preview blockquote,
  .cms-preview label,
  .login-form p,
  .login-form u,
  .login-form li,
  .login-form blockquote,
  .login-form label, .cms-layout p,
  .cms-layout u,
  .cms-layout li,
  .cms-layout blockquote,
  .cms-layout label {
    font-size: 1.2rem;
  }
}
.full-width-app a,
.cms-preview a,
.login-form a, .cms-layout a {
  color: var(--link-color);
  letter-spacing: 0.1px;
}
.full-width-app h1,
.full-width-app h2,
.full-width-app h3,
.full-width-app h4,
.full-width-app h5,
.full-width-app h6,
.full-width-app .h1,
.full-width-app .h2,
.full-width-app .h3,
.full-width-app .h4,
.full-width-app .h5,
.full-width-app .h6,
.cms-preview h1,
.cms-preview h2,
.cms-preview h3,
.cms-preview h4,
.cms-preview h5,
.cms-preview h6,
.cms-preview .h1,
.cms-preview .h2,
.cms-preview .h3,
.cms-preview .h4,
.cms-preview .h5,
.cms-preview .h6,
.login-form h1,
.login-form h2,
.login-form h3,
.login-form h4,
.login-form h5,
.login-form h6,
.login-form .h1,
.login-form .h2,
.login-form .h3,
.login-form .h4,
.login-form .h5,
.login-form .h6, .cms-layout h1,
.cms-layout h2,
.cms-layout h3,
.cms-layout h4,
.cms-layout h5,
.cms-layout h6,
.cms-layout .h1,
.cms-layout .h2,
.cms-layout .h3,
.cms-layout .h4,
.cms-layout .h5,
.cms-layout .h6 {
  font-family: "Cubano", sans-serif;
  font-weight: 500;
  color: var(--heading-font-color);
}
.full-width-app h1,
.full-width-app .h1,
.cms-preview h1,
.cms-preview .h1,
.login-form h1,
.login-form .h1, .cms-layout h1,
.cms-layout .h1 {
  font-size: 3.6rem;
}
@media (max-width: 1499.98px) {
  .full-width-app h1,
  .full-width-app .h1,
  .cms-preview h1,
  .cms-preview .h1,
  .login-form h1,
  .login-form .h1, .cms-layout h1,
  .cms-layout .h1 {
    font-size: 3.2rem;
  }
}
@media screen and (max-height: 768px) {
  .full-width-app h1,
  .full-width-app .h1,
  .cms-preview h1,
  .cms-preview .h1,
  .login-form h1,
  .login-form .h1, .cms-layout h1,
  .cms-layout .h1 {
    font-size: 3.2rem;
  }
}
.full-width-app h2,
.full-width-app .h2,
.cms-preview h2,
.cms-preview .h2,
.login-form h2,
.login-form .h2, .cms-layout h2,
.cms-layout .h2 {
  font-size: 3.2rem;
}
@media (max-width: 1499.98px) {
  .full-width-app h2,
  .full-width-app .h2,
  .cms-preview h2,
  .cms-preview .h2,
  .login-form h2,
  .login-form .h2, .cms-layout h2,
  .cms-layout .h2 {
    font-size: 2.8rem;
  }
}
@media screen and (max-height: 768px) {
  .full-width-app h2,
  .full-width-app .h2,
  .cms-preview h2,
  .cms-preview .h2,
  .login-form h2,
  .login-form .h2, .cms-layout h2,
  .cms-layout .h2 {
    font-size: 2.8rem;
  }
}
.full-width-app h3,
.full-width-app .h3,
.cms-preview h3,
.cms-preview .h3,
.login-form h3,
.login-form .h3, .cms-layout h3,
.cms-layout .h3 {
  font-size: 2.8rem;
}
@media (max-width: 1499.98px) {
  .full-width-app h3,
  .full-width-app .h3,
  .cms-preview h3,
  .cms-preview .h3,
  .login-form h3,
  .login-form .h3, .cms-layout h3,
  .cms-layout .h3 {
    font-size: 2.4rem;
  }
}
@media screen and (max-height: 768px) {
  .full-width-app h3,
  .full-width-app .h3,
  .cms-preview h3,
  .cms-preview .h3,
  .login-form h3,
  .login-form .h3, .cms-layout h3,
  .cms-layout .h3 {
    font-size: 2.4rem;
  }
}
.full-width-app h4,
.full-width-app .h4,
.cms-preview h4,
.cms-preview .h4,
.login-form h4,
.login-form .h4, .cms-layout h4,
.cms-layout .h4 {
  font-size: 2.4rem;
}
@media (max-width: 1499.98px) {
  .full-width-app h4,
  .full-width-app .h4,
  .cms-preview h4,
  .cms-preview .h4,
  .login-form h4,
  .login-form .h4, .cms-layout h4,
  .cms-layout .h4 {
    font-size: 2rem;
  }
}
@media screen and (max-height: 768px) {
  .full-width-app h4,
  .full-width-app .h4,
  .cms-preview h4,
  .cms-preview .h4,
  .login-form h4,
  .login-form .h4, .cms-layout h4,
  .cms-layout .h4 {
    font-size: 2rem;
  }
}
.full-width-app h5,
.full-width-app .h5,
.cms-preview h5,
.cms-preview .h5,
.login-form h5,
.login-form .h5, .cms-layout h5,
.cms-layout .h5 {
  font-size: 2rem;
}
@media (max-width: 1499.98px) {
  .full-width-app h5,
  .full-width-app .h5,
  .cms-preview h5,
  .cms-preview .h5,
  .login-form h5,
  .login-form .h5, .cms-layout h5,
  .cms-layout .h5 {
    font-size: 1.6rem;
  }
}
@media screen and (max-height: 768px) {
  .full-width-app h5,
  .full-width-app .h5,
  .cms-preview h5,
  .cms-preview .h5,
  .login-form h5,
  .login-form .h5, .cms-layout h5,
  .cms-layout .h5 {
    font-size: 1.6rem;
  }
}
.full-width-app h6,
.full-width-app .h6,
.cms-preview h6,
.cms-preview .h6,
.login-form h6,
.login-form .h6, .cms-layout h6,
.cms-layout .h6 {
  font-size: 1.6rem;
}
@media (max-width: 1499.98px) {
  .full-width-app h6,
  .full-width-app .h6,
  .cms-preview h6,
  .cms-preview .h6,
  .login-form h6,
  .login-form .h6, .cms-layout h6,
  .cms-layout .h6 {
    font-size: 1.2rem;
  }
}
@media screen and (max-height: 768px) {
  .full-width-app h6,
  .full-width-app .h6,
  .cms-preview h6,
  .cms-preview .h6,
  .login-form h6,
  .login-form .h6, .cms-layout h6,
  .cms-layout .h6 {
    font-size: 1.2rem;
  }
}
.full-width-app .lead, .full-width-app .bd-lead,
.cms-preview .lead,
.cms-preview .bd-lead,
.login-form .lead,
.login-form .bd-lead, .cms-layout .lead, .cms-layout .bd-lead {
  font-size: 2rem;
  font-weight: 300;
}
.full-width-app .display-1,
.cms-preview .display-1,
.login-form .display-1, .cms-layout .display-1 {
  font-size: 6rem;
  font-weight: 300;
}
@media only screen and (max-height: 768px) {
  .full-width-app .display-1,
  .cms-preview .display-1,
  .login-form .display-1, .cms-layout .display-1 {
    font-size: 5rem;
  }
}
@media (max-width: 767.98px) {
  .full-width-app .display-1,
  .cms-preview .display-1,
  .login-form .display-1, .cms-layout .display-1 {
    font-size: 5rem;
  }
}
.full-width-app .display-2,
.cms-preview .display-2,
.login-form .display-2, .cms-layout .display-2 {
  font-size: 5.5rem;
  font-weight: 300;
}
@media only screen and (max-height: 768px) {
  .full-width-app .display-2,
  .cms-preview .display-2,
  .login-form .display-2, .cms-layout .display-2 {
    font-size: 4.5rem;
  }
}
@media (max-width: 767.98px) {
  .full-width-app .display-2,
  .cms-preview .display-2,
  .login-form .display-2, .cms-layout .display-2 {
    font-size: 4.5rem;
  }
}
.full-width-app .display-3,
.cms-preview .display-3,
.login-form .display-3, .cms-layout .display-3 {
  font-size: 4.5rem;
  font-weight: 300;
}
@media only screen and (max-height: 768px) {
  .full-width-app .display-3,
  .cms-preview .display-3,
  .login-form .display-3, .cms-layout .display-3 {
    font-size: 3.5rem;
  }
}
@media (max-width: 767.98px) {
  .full-width-app .display-3,
  .cms-preview .display-3,
  .login-form .display-3, .cms-layout .display-3 {
    font-size: 3.5rem;
  }
}
.full-width-app .display-4, .full-width-app .bd-title,
.cms-preview .display-4,
.cms-preview .bd-title,
.login-form .display-4,
.login-form .bd-title, .cms-layout .display-4, .cms-layout .bd-title {
  font-size: 3.5rem;
  font-weight: 300;
}
.full-width-app hr,
.cms-preview hr,
.login-form hr, .cms-layout hr {
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
  border: none;
  border-top: none;
}
.full-width-app small,
.full-width-app .small,
.cms-preview small,
.cms-preview .small,
.login-form small,
.login-form .small, .cms-layout small,
.cms-layout .small {
  font-size: 75%;
  font-weight: 400;
}
.full-width-app mark,
.full-width-app .mark,
.cms-preview mark,
.cms-preview .mark,
.login-form mark,
.login-form .mark, .cms-layout mark,
.cms-layout .mark {
  padding: 0.2em;
  background-color: var(--header-row-color);
}
.full-width-app .list-boxed li,
.cms-preview .list-boxed li,
.login-form .list-boxed li, .cms-layout .list-boxed li {
  background-color: var(--neutral-300);
  margin: 0.4rem;
  padding: 0.4rem;
  border-radius: 0.4rem;
}
.full-width-app .blockquote-footer,
.cms-preview .blockquote-footer,
.login-form .blockquote-footer, .cms-layout .blockquote-footer {
  font-size: 90%;
  color: var(--muted-text-color);
}

.blockquote {
  width: 50%;
  margin: auto;
  margin-top: 2rem;
  font-style: italic;
  font-size: 180%;
}

.cms-layout {
  /*Set body properties on these containers so cms is not affected*/
}
.cms-layout .form-group {
  font-family: "tgn-soft-round-comp", sans-serif;
  color: var(--body-font-color);
  font-size: 130%;
}
@media (max-width: 1499.98px) {
  .cms-layout .form-group {
    font-size: 1.2rem !important;
  }
  .cms-layout .form-group label {
    font-size: 1.2rem !important;
  }
  .cms-layout .form-group li {
    font-size: 1.2rem !important;
  }
}
.cms-layout p,
.cms-layout u,
.cms-layout li,
.cms-layout blockquote,
.cms-layout label {
  font-size: 1.2rem;
  font-family: "tgn-soft-round-comp", sans-serif;
  color: var(--body-font-color-light);
  letter-spacing: 1px;
}
.cms-layout a {
  color: var(--link-color);
  letter-spacing: 1px;
  font-size: 1.2rem;
}
.cms-layout h1,
.cms-layout .h1 {
  font-size: 3.2rem;
}
.cms-layout h2,
.cms-layout .h2 {
  font-size: 2.8rem;
}
.cms-layout h3,
.cms-layout .h3 {
  font-size: 2.4rem;
}
.cms-layout h4,
.cms-layout .h4 {
  font-size: 2rem;
}
@media (max-width: 1499.98px) {
  .cms-layout h4,
  .cms-layout .h4 {
    font-size: 1.4rem;
  }
}
.cms-layout h5,
.cms-layout .h5 {
  font-size: 1.6rem;
}
.cms-layout h6,
.cms-layout .h6 {
  font-size: 1.2rem;
}
.cms-layout .lead, .cms-layout .bd-lead {
  font-size: 2rem -0.4rem;
  font-weight: 300;
}
.cms-layout .font-size-xs, .cms-layout .font-size-sm, .cms-layout #notification-menu-container #notifications-list .notification-date, #notification-menu-container #notifications-list .cms-layout .notification-date, .cms-layout #notification-menu-container #notifications-list .entry-description, #notification-menu-container #notifications-list .cms-layout .entry-description {
  font-weight: 700;
}
.cms-layout .font-size-xs {
  font-size: 0.9rem !important;
}
@media (max-width: 1499.98px) {
  .cms-layout .font-size-xs {
    font-size: 0.6rem !important;
  }
}
@media screen and (max-height: 768px) {
  .cms-layout .font-size-xs {
    font-size: 0.6rem !important;
  }
}
.cms-layout .font-size-sm, .cms-layout #notification-menu-container #notifications-list .notification-date, #notification-menu-container #notifications-list .cms-layout .notification-date, .cms-layout #notification-menu-container #notifications-list .entry-description, #notification-menu-container #notifications-list .cms-layout .entry-description {
  font-size: 1rem !important;
}
@media (max-width: 1499.98px) {
  .cms-layout .font-size-sm, .cms-layout #notification-menu-container #notifications-list .notification-date, #notification-menu-container #notifications-list .cms-layout .notification-date, .cms-layout #notification-menu-container #notifications-list .entry-description, #notification-menu-container #notifications-list .cms-layout .entry-description {
    font-size: 0.6666666667rem !important;
  }
}
@media screen and (max-height: 768px) {
  .cms-layout .font-size-sm, .cms-layout #notification-menu-container #notifications-list .notification-date, #notification-menu-container #notifications-list .cms-layout .notification-date, .cms-layout #notification-menu-container #notifications-list .entry-description, #notification-menu-container #notifications-list .cms-layout .entry-description {
    font-size: 0.6666666667rem !important;
  }
}
.cms-layout .font-size-md {
  font-size: 1.2rem !important;
}
@media (max-width: 1499.98px) {
  .cms-layout .font-size-md {
    font-size: 0.8rem !important;
  }
}
@media screen and (max-height: 768px) {
  .cms-layout .font-size-md {
    font-size: 0.8rem !important;
  }
}
.cms-layout .font-size-lg {
  font-size: 1.8rem !important;
}
@media (max-width: 1499.98px) {
  .cms-layout .font-size-lg {
    font-size: 1.2rem !important;
  }
}
@media screen and (max-height: 768px) {
  .cms-layout .font-size-lg {
    font-size: 1.2rem !important;
  }
}
.cms-layout .font-size-xl {
  font-size: 3rem !important;
}
@media (max-width: 1499.98px) {
  .cms-layout .font-size-xl {
    font-size: 2rem !important;
  }
}
@media screen and (max-height: 768px) {
  .cms-layout .font-size-xl {
    font-size: 2rem !important;
  }
}

/*___________________________NAVIGATION_______________________________*/
/*________________RADIAL MENU - MAIN APP___________________*/
/*Styles for the main radial menu*/
.radial-menu-container {
  position: fixed;
  bottom: 5rem;
  left: 35px;
  z-index: 2;
}
.radial-menu-container .radial-menu {
  margin-left: 150px;
}
.radial-menu-container .radial-menu .nav-link {
  padding: 0rem;
}
.radial-menu-container .menu-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
}
.radial-menu-container .menu-toggler {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 150px;
  height: 150px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.radial-menu-container .menu-toggler + label {
  width: 150px;
  height: 150px;
  z-index: 1;
  border-radius: 50%;
  background: var(--radial-menu-background-color);
  transition: transform 0.5s top 0.5s;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  transition: all ease-in-out 0.2s;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background-image: url(/images/global/avatars/avatar-frame-default.png);
  background-size: cover;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.radial-menu-container .menu-toggler + label:before {
  width: 60px;
  height: 60px;
  display: block;
  z-index: 1;
  border-radius: 50%;
  background-color: var(--radial-menu-background-color);
  background-image: url(/images/global/gui/icon-hamburger-menu.png);
  background-size: cover;
  transition: transform 0.5s top 0.5s;
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0px;
}
.radial-menu-container .menu-toggler:hover + label {
  box-shadow: 0 0 0 2px var(--cms-nav-shadow-color-hover);
  transition: box-shadow ease-in-out 0.2s;
  animation: pulse;
  animation-duration: 1s;
}
.radial-menu-container .menu-toggler:checked + label {
  transition: transform ease-in-out 0.2s;
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.radial-menu-container .menu-toggler:checked + label:before {
  transform-origin: 50% 50%;
}
.radial-menu-container .menu-toggler:checked ~ ul .menu-item {
  opacity: 1;
}
.radial-menu-container .menu-toggler:checked ~ ul .menu-item a {
  pointer-events: auto;
}
.radial-menu-container .menu-item {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 75px;
  height: 75px;
  opacity: 0;
  transition: 0.5s;
}
.radial-menu-container .menu-item a {
  display: block;
  width: inherit;
  height: inherit;
  color: var(--radial-menu-text-color);
  background: var(--radial-menu-background-color);
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  pointer-events: none;
  transition: 0.2s;
}
.radial-menu-container .menu-item a:hover {
  box-shadow: 0 0 0 2px var(--radial-menu-shadow-color-hover);
  color: var(--white-text-color);
  background: var(--radial-menu-background-color-hover);
  transition: transform ease-in-out 0.2s;
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}
.radial-menu-container .menu-item a:hover + img {
  transition: transform ease-in-out 0.2s;
  transform: scale(1.3, 1.3);
}
.radial-menu-container .menu-notification-item {
  opacity: 1;
  z-index: 6;
  width: 50px;
  height: 50px;
  margin-left: 120px;
  margin-top: 21px;
  cursor: pointer;
  border-radius: 50%;
}
.radial-menu-container .menu-notification-item:hover {
  box-shadow: 0 0 0 2px var(--radial-menu-shadow-color-hover);
  color: var(--white-text-color);
  background: var(--radial-menu-background-color-hover);
  transition: transform ease-in-out 0.2s;
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
  border-radius: 50%;
}
.radial-menu-container .menu-notification-item:hover + img {
  transition: transform ease-in-out 0.2s;
  transform: scale(1.3, 1.3);
}
.radial-menu-container .menu-notification-icon {
  position: absolute;
  width: 50px;
  height: 50px;
}
.radial-menu-container .menu-notification {
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: var(--radial-menu-notification-background-color);
  border-radius: 30px;
  margin-top: -14px;
  margin-left: 16px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
}
.radial-menu-container .menu-notification-text {
  font-size: 16px;
  font-family: "Cubano", sans-serif;
  color: var(--radial-menu-notification-text-color);
  line-height: 1;
  font-weight: 200;
}
.radial-menu-container .menu-icon {
  max-height: 75px;
}

/*__________________________LOGOUT MODAL__________________________*/
/*Creates a modal window that asks the user to confirm they would like to logout and apply main app styles within menu context */
.logout-modal {
  transition: 250ms all;
  z-index: 5;
}
.logout-modal .logout-modal-inner {
  width: 500px;
  box-sizing: border-box;
  padding: 30px 50px 40px;
  background: var(--blazor-modal-background-color);
  border-radius: 0.8rem;
  transition: 250ms all;
  border: 3px var(--blazor-modal-box-shadow-color);
  box-shadow: 5px 4px 0 1px var(--blazor-modal-box-shadow-color);
}
.logout-modal .logout-modal-inner .logout-modal-body h1,
.logout-modal .logout-modal-inner .logout-modal-body h2,
.logout-modal .logout-modal-inner .logout-modal-body h3,
.logout-modal .logout-modal-inner .logout-modal-body h5,
.logout-modal .logout-modal-inner .logout-modal-body h6 {
  font-size: 30px;
  font-family: "Cubano", sans-serif;
  color: var(--dark-text-color);
}
.logout-modal .logout-modal-inner .logout-modal-body h4 {
  font-weight: 500;
  color: var(--light-text-color) !important;
  text-shadow: 4px 2px var(--success-modal-text-shadow-color);
  font-size: 170%;
}
.logout-modal .logout-modal-title {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: var(--accent-color-7-light) !important;
}
.logout-modal .logout-modal-title .modal-close-btn {
  cursor: pointer;
  background: var(--blazor-close-btn-color);
  display: flex;
  justify-content: center;
  color: var(--white-text-color);
  border-radius: 50%;
  height: 40px;
  width: 40px;
  margin: -40px -64px 0px 0px;
}

/*Make the logout button look like the other menu buttons*/
label.logout-modal-toggle {
  width: 75px;
  height: 75px;
  line-height: 75px;
  color: rgba(255, 255, 255, 0.7019607843);
  background: var(--radial-menu-background-color);
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  transition: 0.2s;
  cursor: pointer;
}
label.logout-modal-toggle img {
  height: 75px;
  width: 75px;
  transform: rotate(173deg);
}
label.logout-modal-toggle:hover {
  box-shadow: 0 0 0 2px var(--radial-menu-shadow-color-hover);
  color: var(--light-text-color);
  background: var(--radial-menu-background-color-hover);
  transition: transform ease-in-out 0.2s;
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}
label.logout-modal-toggle:hover + img {
  transition: transform ease-in-out 0.2s;
  transform: scale(1.3, 1.3) rotate(163deg);
}

/*___________________CMS NAV______________________________*?

/*Style CMS, Teacher, Admin and Org Areas Site Nav*/
.account-area ul.navbar-nav {
  flex-direction: row;
}
.account-area ul.navbar-nav li.nav-link:first-child {
  margin-right: 0.5rem;
}
.account-area ul.navbar-nav li.nav-link:first-child a {
  font-family: henderson-slab-basic, serif;
  color: var(--account-toggle-cms-dropdown-link-color);
  font-size: 1rem;
}

.cms-nav {
  background-color: var(--cms-nav-background-color);
  border-bottom-left-radius: 1.2rem;
  border-bottom-right-radius: 1.2rem;
}
@media (max-width: 991.98px) {
  .cms-nav {
    border-radius: 0;
    height: 100vh;
    margin-top: 0.6rem;
  }
}
.cms-nav .account-menu {
  padding: 0 1rem;
}
.cms-nav .nav-item {
  margin-top: 0.5vh;
  width: 105%;
  margin-left: 1px;
  transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.collapse .cms-nav .nav-item {
  width: 124%;
}
.cms-nav .nav-item:last-of-type {
  padding-bottom: 1rem;
}
.cms-nav .nav-item:not(:first-child) {
  margin-top: -6px;
  margin-bottom: -6px;
}
.cms-nav .nav-item a, .cms-nav .nav-item.nav-button .nav-link {
  color: var(--cms-nav-text-color);
  border-radius: 0px;
  height: 3rem;
  display: flex;
  align-items: center;
  line-height: 3rem;
}
.cms-nav .nav-item a.active, .cms-nav .nav-item a:active, .cms-nav .nav-item.nav-button .nav-link.active, .cms-nav .nav-item.nav-button .nav-link:active {
  background-color: var(--cms-nav-background-color-active);
  color: var(--cms-nav-text-color-active);
  border-top-left-radius: 1.8rem;
  border-bottom-left-radius: 1.8rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
@media (max-width: 991.98px) {
  .cms-nav .nav-item a.active, .cms-nav .nav-item a:active, .cms-nav .nav-item.nav-button .nav-link.active, .cms-nav .nav-item.nav-button .nav-link:active {
    background-color: transparent;
    color: var(--cms-nav-text-color);
    width: 100%;
    padding: 0 34px;
  }
}
.cms-nav .nav-item .nav-link {
  background-color: transparent;
  border-top-left-radius: 1.8rem;
  border-bottom-left-radius: 1.8rem;
  border-top-right-radius: 0rem;
  border-bottom-right-radius: 0rem;
  width: 100%;
  float: right;
  color: var(--cms-nav-text-color);
  margin-top: 0.4vh;
  padding-left: 34px;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.cms-nav .nav-item .nav-link:hover, .cms-nav .nav-item .nav-link.hover {
  border-top-left-radius: 1.8rem;
  border-bottom-left-radius: 1.8rem;
  background-color: var(--cms-nav-background-color-hover);
  width: 95%;
  color: var(--cms-nav-text-color-hover);
  padding-left: 1.2vw;
}
.cms-nav .nav-item .nav-link:hover ~ .bottomcorner::before, .cms-nav .nav-item .nav-link:hover ~ .topcorner::before, .cms-nav .nav-item .nav-link.hover ~ .bottomcorner::before, .cms-nav .nav-item .nav-link.hover ~ .topcorner::before {
  box-shadow: 10px 10px 5px 100px var(--cms-nav-background-color-hover);
}
.cms-nav .nav-item .nav-link:hover.active ~ .bottomcorner::before, .cms-nav .nav-item .nav-link:hover.active ~ .topcorner::before, .cms-nav .nav-item .nav-link:hover:active ~ .bottomcorner::before, .cms-nav .nav-item .nav-link:hover:active ~ .topcorner::before, .cms-nav .nav-item .nav-link.hover.active ~ .bottomcorner::before, .cms-nav .nav-item .nav-link.hover.active ~ .topcorner::before, .cms-nav .nav-item .nav-link.hover:active ~ .bottomcorner::before, .cms-nav .nav-item .nav-link.hover:active ~ .topcorner::before {
  box-shadow: 10px 10px 5px 100px var(--cms-nav-background-color-hover);
}
.cms-nav .nav-item .nav-link:active, .cms-nav .nav-item .nav-link.active {
  border-top-left-radius: 1.8rem;
  border-bottom-left-radius: 1.8rem;
  background-color: var(--cms-nav-background-color-active);
  width: 96%;
  float: right;
  color: var(--cms-nav-text-color-active);
  padding-left: 1.4rem;
  margin-left: 1rem;
  transition: width 0.15s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@media (max-width: 991.98px) {
  .cms-nav .nav-item .nav-link:active, .cms-nav .nav-item .nav-link.active {
    background-color: transparent;
    color: var(--cms-nav-text-color);
    width: 100%;
    padding: 34px;
  }
}
.collapse .cms-nav .nav-item .nav-link:active .icon-wrapper, .collapse .cms-nav .nav-item .nav-link.active .icon-wrapper {
  padding-left: 7px;
}
.cms-nav .nav-item .nav-link i {
  font-size: 1.2rem;
  margin-right: 32px;
}
.cms-nav .nav-item .nav-link .icon-wrapper {
  width: 300px;
  overflow: hidden;
  transition: all 0.15s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.collapse .cms-nav .nav-item .nav-link .icon-wrapper {
  width: 32px;
}
.cms-nav .nav-item .nav-link .icon-text {
  font-family: henderson-slab-basic, serif;
  font-weight: 600;
  font-size: 80%;
  white-space: nowrap;
}
.cms-nav .sub-menu {
  background-color: var(--cms-nav-submenu-background-color);
  width: 85%;
  margin-left: 8%;
  margin-bottom: 1rem;
  border-radius: 1.2rem;
  padding: 0.6rem 0rem;
  margin-top: -10px;
  animation: scale-in-ver-top 0.2s ease-in-out;
}
.cms-nav .sub-menu .nav-item {
  width: 90%;
  padding-left: 0;
}
.cms-nav .sub-menu .nav-item:hover {
  width: 90%;
}
.cms-nav .sub-menu .nav-item:first-of-type {
  padding-top: 0;
  margin-top: 0;
}
.cms-nav .sub-menu .nav-item .nav-link:hover, .cms-nav .sub-menu .nav-item .nav-link.hover {
  width: 90%;
  background-color: transparent;
  color: var(--cms-nav-submenu-text-color-hover);
  padding-left: 12px;
}
.cms-nav .sub-menu .nav-item .nav-link .icon-text {
  font-weight: 400;
  font-size: 100%;
  font-family: "tgn-soft-round-comp", sans-serif;
  letter-spacing: 1px;
}
.collapse .cms-nav .sub-menu .nav-item .nav-link {
  padding-left: 25px;
}
.cms-nav .bottomcorner {
  position: relative;
  height: 20px;
  width: 20px;
  float: right;
  overflow: hidden;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 991.98px) {
  .cms-nav .bottomcorner {
    height: 0;
  }
}
.cms-nav .bottomcorner::before {
  content: "";
  position: absolute;
  right: 0px;
  height: 200%;
  width: 200%;
  border-radius: 100%;
  box-shadow: 10px 10px 5px 100px transparent;
  z-index: 2;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.cms-nav .topcorner {
  position: relative;
  height: 20px;
  width: 20px;
  float: right;
  margin-top: -68px;
  overflow: hidden;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 991.98px) {
  .cms-nav .topcorner {
    height: 0;
  }
}
.cms-nav .topcorner::before {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0;
  height: 200%;
  width: 200%;
  border-radius: 100%;
  box-shadow: 10px 10px 5px 100px transparent;
  z-index: 2;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.cms-nav .active ~ .bottomcorner {
  position: relative;
  height: 20px;
  width: 20px;
  float: right;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .cms-nav .active ~ .bottomcorner {
    height: 0;
  }
}
.cms-nav .active ~ .bottomcorner::before {
  content: "";
  position: absolute;
  right: 0px;
  height: 200%;
  width: 200%;
  border-radius: 100%;
  box-shadow: 10px 10px 5px 100px var(--cms-nav-background-color-active);
  z-index: 2;
}
@media (max-width: 991.98px) {
  .cms-nav .active ~ .bottomcorner::before {
    box-shadow: 10px 10px 5px 100px transparent !important;
    height: 0;
  }
}
.cms-nav .active ~ .topcorner {
  position: relative;
  height: 20px;
  width: 20px;
  float: right;
  margin-top: -68px;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .cms-nav .active ~ .topcorner {
    height: 0;
  }
}
.cms-nav .active ~ .topcorner::before {
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0;
  height: 200%;
  width: 200%;
  border-radius: 100%;
  box-shadow: 10px 10px 5px 100px var(--cms-nav-background-color-active);
  z-index: 2;
}
@media (max-width: 991.98px) {
  .cms-nav .active ~ .topcorner::before {
    box-shadow: 10px 10px 5px 100px transparent !important;
    height: 0;
  }
}
.cms-nav .caret:after {
  content: "";
  margin-top: 0rem;
  display: inline-block;
  margin-left: 0.2em;
  vertical-align: 0.2em;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
@media (max-width: 991.98px) {
  .cms-nav {
    background-color: var(--cms-nav-mobile-background-color);
  }
}

@media (max-width: 991.98px) {
  .navbar-sticky {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 !important;
    z-index: 4;
    height: auto;
  }
  .navbar-sticky .navbar {
    justify-content: flex-end;
  }
}
@media (min-width: 992px) {
  .navbar-dark {
    background-color: var(--cms-nav-background-color);
    border-top-left-radius: 1.2rem;
    border-top-right-radius: 1.2rem;
    margin-right: 5%;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .navbar-sticky.closed .navbar-dark {
    margin-right: 20%;
  }
}
.navbar-dark button.navbar-toggler {
  color: var(--cms-nav-text-color);
  border: none;
  background-color: transparent;
}
.navbar-dark button.navbar-toggler:focus, .navbar-dark button.navbar-toggler.focus {
  color: var(--cms-nav-text-color);
  border: none;
  background-color: transparent;
  outline: none;
}

.navbar-sticky {
  height: 100%;
  margin: 0.6rem 0rem 1rem 1rem;
  border-radius: 18px;
  animation: fade-in-top 0.3s ease-in-out;
}

@media (min-width: 992px) {
  .nav.flex-column.cms-nav {
    width: 95%;
    transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .collapse .nav.flex-column.cms-nav {
    width: 80%;
    margin-right: 0;
  }
  .navbar-sticky .collapse:not(.show) {
    display: block;
    height: 10%;
  }
  .main.cms-layout {
    width: 100%;
    transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .navbar-sticky.closed + .main.cms-layout {
    width: 115%;
  }
}
@media (max-width: 991.98px) {
  .navbar-sticky {
    height: 10%;
  }
  .navbar-sticky .collapse:not(.show) {
    display: block;
    height: 10%;
  }
  .navbar-sticky .collapse:not(.show) .nav {
    transform: translate(-100%, 0);
    transition: transform 0.15s cubic-bezier(0.77, 0.2, 0.05, 1);
  }
  .navbar-sticky .collapse {
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(0%, 0);
    transition: transform 0.15s cubic-bezier(0.77, 0.2, 0.05, 1);
  }
}
.navbar-toggler {
  display: block !important;
  background-color: transparent;
  color: var(--cms-nav-text-color);
  border: none;
  padding: 0.75rem;
  outline: none;
}
@media (max-width: 991.98px) {
  .navbar-toggler {
    padding: 0.25rem 0.75rem;
  }
}

/*CMS Account Menu */
.cms-layout .profile-avatar {
  background-color: var(--account-toggle-cms-avatar-background-color);
  margin-right: 8px;
  margin-bottom: 1px;
}
.cms-layout.top-row {
  animation: fade-in-top 0.3s ease-in-out;
}
.cms-layout.top-row a,
.cms-layout.top-row .btn-link {
  white-space: nowrap;
  margin-left: 0.6rem;
}
.cms-layout .dropdown.account-menu .profile-pill {
  padding: 0.1rem 0.3rem;
  border: 2px solid var(--account-toggle-cms-border-color);
  border-radius: 1.8rem;
  padding-left: 0.2rem !important;
  background-color: var(--account-toggle-cms-background-color);
  display: flex;
  align-items: center;
  transition: background-color 0.3s ease;
  cursor: pointer;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  line-height: 1;
}
@media (max-width: 991.98px) {
  .cms-layout .dropdown.account-menu .profile-pill {
    border: none;
    background-color: transparent;
  }
}
.cms-layout .dropdown.account-menu .profile-pill a {
  margin-left: 0.6rem;
  color: var(--account-toggle-cms-text-color);
}
.cms-layout .dropdown.account-menu .profile-pill p {
  color: var(--account-toggle-cms-text-color);
  margin: 0;
}
@media (max-width: 991.98px) {
  .cms-layout .dropdown.account-menu .profile-pill p {
    display: none;
  }
}
.cms-layout .dropdown.account-menu .profile-pill:hover {
  background-color: var(--account-toggle-cms-background-color-hover);
}
.cms-layout .account-menu-dropdown {
  margin-left: 0;
  z-index: 2;
  color: var(--account-toggle-cms-dropdown-link-color);
  border: 2px solid var(--account-toggle-cms-border-color);
  border-radius: 1rem;
  background-color: var(--account-toggle-cms-dropdown-background-color);
  overflow: hidden;
  font-size: 1.1rem;
  margin-top: 0.5vh;
  position: absolute;
  right: 8%;
  animation: growDown 200ms ease-in-out forwards;
  transform-origin: top center;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
}
@keyframes growDown {
  0% {
    transform: scaleY(0);
  }
  80% {
    transform: scaleY(1.1);
  }
  100% {
    transform: scaleY(1);
  }
}
.cms-layout .account-menu-dropdown .dropdown-item {
  color: var(--account-toggle-cms-dropdown-logout-color);
  transition: all 0.3s;
}
.cms-layout .account-menu-dropdown .dropdown-item:focus,
.cms-layout .account-menu-dropdown .dropdown-item:hover {
  color: var(--account-toggle-cms-dropdown-link-color-hover);
  background-color: var(--account-toggle-cms-dropdown-background-color-hover);
}
.cms-layout .account-menu-dropdown .dropdown-item:active,
.cms-layout .account-menu-dropdown .dropdown-item.active {
  color: var(--account-toggle-cms-dropdown-link-color-hover);
  background-color: var(--account-toggle-cms-dropdown-background-color-hover);
}
.cms-layout .account-menu-dropdown .dropdown-divider {
  border-top: 2px solid var(--account-toggle-cms-border-color);
  margin: 0;
}
.cms-layout .account-menu-dropdown a {
  margin-left: 0 !important;
}
.cms-layout .nav-link {
  color: var(--account-toggle-cms-text-color);
}
.cms-layout .cms-dialect-selector {
  float: right;
  margin-top: 8px;
  margin-right: -10px;
}
.cms-layout .cms-organization-selector {
  float: right;
  margin-top: 8px;
  margin-right: 10px;
}

a.navbar-brand {
  color: var(--cms-navbar-brand-text-color);
  font-size: 1.2rem;
  background-image: var(--cms-navbar-brand-logo-container-image-path);
  font-family: henderson-slab-basic, serif;
  justify-content: center;
}
a.navbar-brand h1 {
  font-family: henderson-slab-basic, serif;
  font-size: 1.2rem;
  line-height: 1rem;
  margin-bottom: 0;
}

.account-menu .account-toggle {
  background-color: transparent;
  border: none !important;
  outline: none !important;
  color: var(--account-toggle-cms-text-color);
}
.account-menu .account-toggle .caret:after {
  content: "";
  margin-top: 0rem;
  display: inline-block;
  margin-left: 0em;
  vertical-align: 0.2em;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
@media (max-width: 991.98px) {
  .account-menu {
    display: none;
  }
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  /* Behind the navbar */
  padding: 7.2vh 0 0;
  /* Height of navbar */
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: 0.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  /* Scrollable contents if viewport is shorter than content. */
}

@supports (position: sticky) {
  .sidebar-sticky {
    position: sticky;
  }
}
/*Start Menu*/
.full-width-app .start-menu {
  font-size: clamp(1rem, 4vh, 6rem);
  font-family: henderson-slab-basic, serif;
}
.full-width-app .start-menu .menu-item {
  padding-bottom: clamp(1rem, 4vh, 3rem);
  transform: scale(1);
}
.full-width-app .start-menu .menu-item:first-child {
  transform: rotate(-3deg);
  padding-bottom: clamp(1.275rem, 5vh, 5rem);
}
.full-width-app .start-menu .menu-item:last-child {
  transform: rotate(2deg);
  padding-top: 1rem;
}
.full-width-app .start-menu .menu-item:nth-child(2) {
  transform: rotate(2deg);
}
.full-width-app .start-menu .menu-item:nth-child(3) {
  transform: rotate(-1deg);
}
.full-width-app .start-menu .menu-item:nth-child(4) {
  transform: rotate(-3deg);
}
.full-width-app .start-menu .menu-item:hover {
  transform: scale(1.2);
  padding-left: 2rem;
  transition: all 200ms ease-in-out;
  animation: textani 1s forwards;
}
@keyframes textani {
  0% {
    clip-path: var(--from);
  }
  100% {
    clip-path: var(--to);
    color: var(--color-of-text);
  }
}
.full-width-app .start-menu .menu-item a {
  text-decoration: none;
  color: var(--start-menu-link-color);
  background: linear-gradient(to right, transparent, transparent), linear-gradient(to right, var(--accent-color-7-light), var(--accent-color-7-light));
  background-size: 100% 0.1em, 0 0.1em;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}
.full-width-app .start-menu .menu-item a:hover, .full-width-app .start-menu .menu-item a:focus {
  background-size: 0 0.1em, 100% 0.1em;
}

/*________________________NOTIFICATION HUB (MAIN APP)________________________*/
#notification-menu-container {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 4;
  width: 500px;
  border-radius: 0.8rem;
  padding-bottom: 1.8rem;
  animation: 0.2s ease-in-out fade-in-top;
  background-color: transparent;
  background-image: var(--notification-hub-background-image-path);
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-clip: border-box;
  -o-object-fit: fill;
     object-fit: fill;
}
#notification-menu-container .dotted-line, #notification-menu-container .jumbotron hr, .jumbotron #notification-menu-container hr, #notification-menu-container .full-width-app hr, .full-width-app #notification-menu-container hr,
#notification-menu-container .cms-preview hr,
.cms-preview #notification-menu-container hr,
#notification-menu-container .login-form hr,
.login-form #notification-menu-container hr, #notification-menu-container .cms-layout hr, .cms-layout #notification-menu-container hr {
  width: 90%;
  border-top: none;
}
#notification-menu-container .paper-stack-container {
  margin: 0.75rem;
  padding: 1.5rem 0.5rem;
  padding-bottom: 3rem;
  margin-bottom: -0.5rem;
}
#notification-menu-container #notification-menu-header {
  color: var(--notification-hub-header-text-color);
  font-weight: 600;
  font-size: small;
  padding: 10px;
  padding-left: 15px;
  font-family: henderson-slab-basic, serif;
}
#notification-menu-container #notifications-list {
  list-style: none;
  border-radius: 0.8rem;
  overflow-y: auto;
  max-height: 300px;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  box-shadow: none;
  padding: 0.5rem 0.5rem 0.5rem 0rem;
  scrollbar-width: unset;
}
#notification-menu-container #notifications-list .entry {
  position: relative;
  min-height: 60px;
  cursor: pointer;
  list-style: none;
  line-height: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0.8rem;
  margin: 0.3rem 0rem;
  padding: 0.25rem 0.25rem 0.25rem 0.75rem;
}
#notification-menu-container #notifications-list .entry.message.unread {
  background-color: var(--notification-hub-unread-message-color);
}
#notification-menu-container #notifications-list .entry.message.unread .notification-date {
  background-color: var(--notification-hub-unread-message-date-color);
  color: var(--notification-hub-unread-message-text-color);
}
#notification-menu-container #notifications-list .entry.message.unread .notification-title {
  color: var(--notification-hub-unread-message-text-color);
}
#notification-menu-container #notifications-list .entry.message.read {
  background-color: var(--notification-hub-read-message-color);
}
#notification-menu-container #notifications-list .entry.message.read .notification-date {
  background-color: var(--notification-hub-read-message-date-color);
  color: var(--notification-hub-read-message-text-color);
}
#notification-menu-container #notifications-list .entry.message.read .notification-title {
  color: var(--notification-hub-read-message-text-color);
}
#notification-menu-container #notifications-list .entry.invitation.unread {
  color: var(--notification-hub-invitation-text-color);
  background-color: var(--notification-hub-unread-invitation-color);
}
#notification-menu-container #notifications-list .entry.invitation.unread .notification-date {
  background-color: var(--notification-hub-unread-invitation-date-color);
}
#notification-menu-container #notifications-list .entry.invitation.unread .notification-title {
  color: var(--notification-hub-unread-invitation-text-color);
}
#notification-menu-container #notifications-list .entry.invitation.read {
  background-color: var(--notification-hub-read-invitation-color);
}
#notification-menu-container #notifications-list .entry.invitation.read .notification-date {
  background-color: var(--notification-hub-read-invitation-date-color);
  color: var(--notification-hub-read-invitation-text-color);
}
#notification-menu-container #notifications-list .entry.invitation.read .notification-title {
  color: var(--notification-hub-read-invitation-text-color);
}
#notification-menu-container #notifications-list .entry.empty {
  background-color: var(--notification-hub-empty-background-color);
}
#notification-menu-container #notifications-list .entry.empty p {
  text-align: center;
  padding-top: 0.5rem;
  margin-bottom: 0;
}
#notification-menu-container #notifications-list .entry-title {
  margin: 0;
  padding: 0;
  font-weight: 400;
}
#notification-menu-container #notifications-list .entry-description {
  margin: 0;
  padding: 0;
}
#notification-menu-container #notifications-list .notification-list-date-wrapper {
  position: absolute;
  right: 0;
  margin-right: 5px;
  margin-top: -20px;
}
#notification-menu-container #notifications-list .notification-date {
  background-color: var(--notification-hub-unread-message-color);
  border-radius: 1.2rem;
  padding: 0.15rem 0.5rem;
  margin: 0.05rem;
  font-weight: 700;
}

/* Information breach notification */
.information-breach-container {
  margin: 0 auto;
  width: 70%;
  text-align: center;
  padding-left: 60px;
  padding-right: 60px;
}

.information-breach-icon {
  width: 100px;
  height: 100px;
  position: absolute;
  margin-top: 50px;
  margin-left: 3%;
}

/* Terms of service notification */
.terms-of-service-container {
  margin: 0 auto;
  width: 70%;
  text-align: center;
  padding-left: 60px;
  padding-right: 60px;
}

/* Pin confirmation notification */
.pin-box-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
  width: auto;
}
.pin-box-container .pin-box {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  text-align: center;
  line-height: 40px;
  margin-right: 5px;
}

/*________BACKGROUNDS________*/
.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 200px rgba(0, 0, 0, 0.9) inset;
  z-index: -1;
}

.background {
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: contain;
  background-repeat: repeat;
  background-attachment: fixed;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

.background-1 {
  background: var(--background-1-color);
  background-position: center;
  background-size: contain;
  background-repeat: repeat;
  background-attachment: fixed;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
@media only screen and (max-height: 768px) {
  .background-1 {
    background-image: var(--background-1-image-path-md);
  }
}
@media only screen and (max-width: 1366px) {
  .background-1 {
    background-image: var(--background-1-image-path-lg);
  }
}
@media only screen and (min-width: 1367px) {
  .background-1 {
    background-image: var(--background-1-image-path-xl);
  }
}

.background-2 {
  background: var(--background-2-color);
  background-position: center;
  background-size: contain;
  background-repeat: repeat;
  background-attachment: fixed;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
@media only screen and (max-height: 768px) {
  .background-2 {
    background-image: var(--background-2-image-path-md);
  }
}
@media only screen and (max-width: 1366px) {
  .background-2 {
    background-image: var(--background-2-image-path-lg);
  }
}
@media only screen and (min-width: 1367px) {
  .background-2 {
    background-image: var(--background-2-image-path-xl);
  }
}

.background-3 {
  background: var(--background-3-color);
  background-position: center;
  background-size: contain;
  background-repeat: repeat;
  background-attachment: fixed;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
@media only screen and (max-height: 768px) {
  .background-3 {
    background-image: var(--background-3-image-path-md);
  }
}
@media only screen and (max-width: 1366px) {
  .background-3 {
    background-image: var(--background-3-image-path-lg);
  }
}
@media only screen and (min-width: 1367px) {
  .background-3 {
    background-image: var(--background-3-image-path-xl);
  }
}

.background-4 {
  background: var(--background-4-color);
  background-image: var(--background-4-image-path);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

.background-5 {
  background: var(--light-background-color);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
@media only screen and (max-height: 768px) {
  .background-5 {
    background-image: url("/images/global/backgrounds/bg-mountains-road-1440x607.png");
  }
}
@media only screen and (max-width: 1500px) {
  .background-5 {
    background-image: url("/images/global/backgrounds/bg-mountains-road-1920x929.png");
  }
}
@media only screen and (min-width: 1501px) and (max-width: 2999px) {
  .background-5 {
    background-image: url("/images/global/backgrounds/bg-mountains-road-2500x1406.png");
  }
}
@media only screen and (min-width: 3000px) {
  .background-5 {
    background-image: url("/images/global/backgrounds/bg-mountains-road.svg");
  }
}

.background-6 {
  background: var(--light-background-color);
  background-image: var(--background-6-image-path-md);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
@media only screen and (max-height: 768px) {
  .background-6 {
    background-image: var(--background-6-image-path-short);
  }
}
@media only screen and (max-width: 1500px) {
  .background-6 {
    background-image: var(--background-6-image-path-lg);
  }
}
@media only screen and (min-width: 1501px) and (max-width: 2999px) {
  .background-6 {
    background-image: var(--background-6-image-path-xl);
  }
}
@media only screen and (min-width: 3000px) {
  .background-6 {
    background-image: var(--background-6-image-path-xxl);
  }
}

.background-7 {
  background: var(--light-background-color);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
@media only screen and (max-height: 768px) {
  .background-7 {
    background-image: var(--background-7-image-path-short);
  }
}
@media only screen and (max-width: 1500px) {
  .background-7 {
    background-image: var(--background-7-image-path-md);
  }
}
@media only screen and (min-width: 1501px) and (max-width: 2999px) {
  .background-7 {
    background-image: var(--background-7-image-path-lg);
  }
}
@media only screen and (min-width: 3000px) {
  .background-7 {
    background-image: var(--background-7-image-path-xl);
  }
}

.background-9-a {
  background-image: var(--background-9a-image-path);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

.background-9-b {
  background-image: var(--background-9b-image-path);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

/*_________________________________THEME SETUP______________________________________*/
/*Parent Container Sizing*/
html,
body {
  height: auto;
  width: 100%;
  background-color: var(--global-background-color);
  z-index: -1;
}

.page.main-layout {
  position: relative;
  display: flex;
}
.page.public-layout {
  position: relative;
  display: flex;
}

.main.full-width-app {
  flex: 1;
  overflow-x: hidden;
}

.content {
  padding-top: 0em;
  margin-left: 0em !important;
}

.container-fluid {
  isolation: isolate;
}

.cms-layout .content {
  background-color: var(--light-background-color);
  margin: 0.6rem;
  padding: 2vw;
  border-radius: 1.2rem;
  margin-bottom: 2vh;
  min-height: 85vh;
}

.full-width-app {
  height: auto;
  min-height: 100vh;
  width: 100%;
}

@media (min-width: 641px) {
  .main.full-width-app > div {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
  }
}
/*Hide things from being printed*/
@media print {
  .no-print {
    visibility: hidden;
  }
}
.la, .lab, .lad, .lal, .lar, .las {
  font-size: 1.6rem;
}

.icon-wrapper {
  align-items: center;
  display: flex;
}
.icon-wrapper.padded {
  padding: 3px;
}
.icon-wrapper .icon-text {
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 0;
  padding-right: 3px;
}

/*_________________________________ Styles for the printable layout ______________________________________*/
body:has(.printable-page),
html:has(.printable-page) {
  background-color: var(--neutral-000);
}

/* These styles will display on the page so the user can see what it will look like when printed */
.printable-page {
  background-color: var(--neutral-000);
  font-family: Verdana, "Geneva", Tahoma, sans-serif;
}
.printable-page h1,
.printable-page h2,
.printable-page h3,
.printable-page h4,
.printable-page h5 {
  text-align: center;
}
body:has .printable-page {
  background-color: var(--neutral-000);
}
.printable-page table {
  font-size: 200%;
  color: var(--black-text-color);
  border-radius: 0.8em;
}
.printable-page table.table-sm {
  font-size: 100%;
}

.printable-id-card-sheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 12px 12px;
  grid-auto-flow: row;
  justify-items: center;
  grid-template-areas: ". .";
  width: 100%;
  height: 100%;
  grid-gap: 0px;
}
.printable-id-card-sheet table {
  font-size: inherit;
}
.printable-id-card-sheet .printable-id-card {
  padding: 1rem;
  width: 100%;
}
.printable-id-card-sheet .printable-id-card-inner {
  background-color: var(--white-color);
  border-radius: 0.8rem;
  border: 2px solid var(--muted-text-color);
  padding: 1rem;
}
.printable-id-card-sheet .printable-id-card-header {
  background-image: url(/images/levels/activities/activity-ribbon-hover.svg);
  background-repeat: no-repeat;
  background-size: contain;
  height: 3rem;
  display: flex;
  align-items: center;
}
.printable-id-card-sheet .printable-id-card-icon {
  background-color: var(--dark-color);
  border-radius: 50%;
  height: 4rem;
  width: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1rem;
}
.printable-id-card-sheet .printable-id-card-icon-inner {
  background-image: url(/images/global/brand/generic/generic-logo-circle.svg);
  background-repeat: no-repeat;
  background-clip: border-box;
  height: 3rem;
  width: 3rem;
  background-size: contain;
  margin: 12px;
}
.printable-id-card-sheet .printable-id-card-details {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 6px 6px;
  grid-auto-flow: row;
  justify-items: center;
  grid-template-areas: ". ." ". ." ". ." ". .";
  width: 100%;
  height: 100%;
  padding: 1rem 1.5rem 0rem;
}
.printable-id-card-sheet .printable-id-card-details .printable-domain {
  grid-column: 1/span 2;
}
.printable-id-card-sheet .printable-id-card-details div {
  width: 100%;
  text-align: left;
}
.printable-id-card-sheet .printable-id-card-details div p {
  margin-bottom: 0px;
  font-size: 100%;
  font-family: henderson-slab-basic, serif;
}

@media print {
  body {
    background-color: var(--neutral-000) !important;
  }
  .printable-page {
    background-color: var(--neutral-000);
    font-family: Verdana, "Geneva", Tahoma, sans-serif;
  }
  .printable-page h1,
  .printable-page h2,
  .printable-page h3,
  .printable-page h4,
  .printable-page h5 {
    text-align: center;
  }
  body:has .printable-page {
    background-color: var(--neutral-000);
  }
  .printable-page table {
    font-size: 200%;
    color: var(--black-text-color);
    border-radius: 0.8em;
  }
  .printable-page table.table-sm {
    font-size: 100%;
  }
  .printable-id-card-sheet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 12px 12px;
    grid-auto-flow: row;
    justify-items: center;
    grid-template-areas: ". .";
    width: 100%;
    height: 100%;
    grid-gap: 0px;
  }
  .printable-id-card-sheet table {
    font-size: inherit;
  }
  .printable-id-card-sheet .printable-id-card {
    padding: 1rem;
    width: 100%;
  }
  .printable-id-card-sheet .printable-id-card-inner {
    background-color: var(--white-color);
    border-radius: 0.8rem;
    border: 2px solid var(--muted-text-color);
    padding: 1rem;
  }
  .printable-id-card-sheet .printable-id-card-header {
    background-image: url(/images/levels/activities/activity-ribbon-hover.svg);
    background-repeat: no-repeat;
    background-size: contain;
    height: 3rem;
    display: flex;
    align-items: center;
  }
  .printable-id-card-sheet .printable-id-card-icon {
    background-color: var(--dark-color);
    border-radius: 50%;
    height: 4rem;
    width: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1rem;
  }
  .printable-id-card-sheet .printable-id-card-icon-inner {
    background-image: url(/images/global/brand/generic/generic-logo-circle.svg);
    background-repeat: no-repeat;
    background-clip: border-box;
    height: 3rem;
    width: 3rem;
    background-size: contain;
    margin: 12px;
  }
  .printable-id-card-sheet .printable-id-card-details {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 6px 6px;
    grid-auto-flow: row;
    justify-items: center;
    grid-template-areas: ". ." ". ." ". ." ". .";
    width: 100%;
    height: 100%;
    padding: 1rem 1.5rem 0rem;
  }
  .printable-id-card-sheet .printable-id-card-details .printable-domain {
    grid-column: 1/span 2;
  }
  .printable-id-card-sheet .printable-id-card-details div {
    width: 100%;
    text-align: left;
  }
  .printable-id-card-sheet .printable-id-card-details div p {
    margin-bottom: 0px;
    font-size: 100%;
    font-family: henderson-slab-basic, serif;
  }
}
.fireflies .firefly {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0.4vw;
  height: 0.4vw;
  margin: -0.2vw 0 0 9.8vw;
  animation: ease 200s alternate infinite;
  pointer-events: none;
}

.fireflies .firefly::before,
.fireflies .firefly::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: -10vw;
}

.fireflies .firefly::before {
  background: black;
  opacity: 0.4;
  animation: drift ease alternate infinite;
}

.fireflies .firefly::after {
  background: white;
  opacity: 0;
  box-shadow: 0 0 0vw 0vw yellow;
  animation: drift ease alternate infinite, flash ease infinite;
}

.fireflies .firefly:nth-child(1) {
  animation-name: move1;
}

.fireflies .firefly:nth-child(1):before {
  animation-duration: 13s;
}

.fireflies .firefly:nth-child(1):after {
  animation-duration: 13s, 5592ms;
  animation-delay: 0ms, 1181ms;
}

@keyframes move1 {
  0% {
    transform: translateX(49vw) translateY(4vh) scale(0.1197007481);
  }
  5.2631578947% {
    transform: translateX(2vw) translateY(25vh) scale(0.6982543641);
  }
  10.5263157895% {
    transform: translateX(3vw) translateY(42vh) scale(0.5286783042);
  }
  15.7894736842% {
    transform: translateX(-32vw) translateY(35vh) scale(0.2294264339);
  }
  21.0526315789% {
    transform: translateX(44vw) translateY(20vh) scale(0.1197007481);
  }
  26.3157894737% {
    transform: translateX(-42vw) translateY(-11vh) scale(0.6882793017);
  }
  31.5789473684% {
    transform: translateX(12vw) translateY(48vh) scale(0.3391521197);
  }
  36.8421052632% {
    transform: translateX(28vw) translateY(18vh) scale(0.2294264339);
  }
  42.1052631579% {
    transform: translateX(7vw) translateY(-21vh) scale(0.7481296758);
  }
  47.3684210526% {
    transform: translateX(-17vw) translateY(24vh) scale(0.3790523691);
  }
  52.6315789474% {
    transform: translateX(13vw) translateY(3vh) scale(0.1795511222);
  }
  57.8947368421% {
    transform: translateX(20vw) translateY(-11vh) scale(0.63840399);
  }
  63.1578947368% {
    transform: translateX(-18vw) translateY(20vh) scale(0.5187032419);
  }
  68.4210526316% {
    transform: translateX(-37vw) translateY(25vh) scale(0.6882793017);
  }
  73.6842105263% {
    transform: translateX(17vw) translateY(-31vh) scale(0.6583541147);
  }
  78.9473684211% {
    transform: translateX(-5vw) translateY(-44vh) scale(0.578553616);
  }
  84.2105263158% {
    transform: translateX(48vw) translateY(-44vh) scale(0.6882793017);
  }
  89.4736842105% {
    transform: translateX(-8vw) translateY(14vh) scale(0.1596009975);
  }
  94.7368421053% {
    transform: translateX(46vw) translateY(-40vh) scale(0.1496259352);
  }
  100% {
    transform: translateX(-10vw) translateY(20vh) scale(0.349127182);
  }
}
.fireflies .firefly:nth-child(2) {
  animation-name: move2;
}

.fireflies .firefly:nth-child(2):before {
  animation-duration: 9s;
}

.fireflies .firefly:nth-child(2):after {
  animation-duration: 9s, 6608ms;
  animation-delay: 0ms, 3893ms;
}

@keyframes move2 {
  0% {
    transform: translateX(-27vw) translateY(23vh) scale(0.0798004988);
  }
  4.5454545455% {
    transform: translateX(-6vw) translateY(-25vh) scale(0.5486284289);
  }
  9.0909090909% {
    transform: translateX(16vw) translateY(-20vh) scale(0.1296758105);
  }
  13.6363636364% {
    transform: translateX(-14vw) translateY(-17vh) scale(0.3591022444);
  }
  18.1818181818% {
    transform: translateX(39vw) translateY(41vh) scale(0.2693266833);
  }
  22.7272727273% {
    transform: translateX(-38vw) translateY(-40vh) scale(0.6982543641);
  }
  27.2727272727% {
    transform: translateX(23vw) translateY(29vh) scale(0.2094763092);
  }
  31.8181818182% {
    transform: translateX(-20vw) translateY(-20vh) scale(0.3591022444);
  }
  36.3636363636% {
    transform: translateX(44vw) translateY(50vh) scale(0.1296758105);
  }
  40.9090909091% {
    transform: translateX(-21vw) translateY(9vh) scale(0.2992518703);
  }
  45.4545454545% {
    transform: translateX(4vw) translateY(2vh) scale(0.0399002494);
  }
  50% {
    transform: translateX(39vw) translateY(30vh) scale(0.6683291771);
  }
  54.5454545455% {
    transform: translateX(7vw) translateY(-37vh) scale(0.0897755611);
  }
  59.0909090909% {
    transform: translateX(-43vw) translateY(29vh) scale(0.2094763092);
  }
  63.6363636364% {
    transform: translateX(-34vw) translateY(16vh) scale(0.5486284289);
  }
  68.1818181818% {
    transform: translateX(-8vw) translateY(-14vh) scale(0.4588528678);
  }
  72.7272727273% {
    transform: translateX(32vw) translateY(-41vh) scale(0.3092269327);
  }
  77.2727272727% {
    transform: translateX(-39vw) translateY(29vh) scale(0.4788029925);
  }
  81.8181818182% {
    transform: translateX(18vw) translateY(7vh) scale(0.0897755611);
  }
  86.3636363636% {
    transform: translateX(22vw) translateY(46vh) scale(0.3790523691);
  }
  90.9090909091% {
    transform: translateX(-37vw) translateY(-13vh) scale(0.289276808);
  }
  95.4545454545% {
    transform: translateX(-29vw) translateY(-31vh) scale(0.1596009975);
  }
  100% {
    transform: translateX(24vw) translateY(37vh) scale(0.289276808);
  }
}
.fireflies .firefly:nth-child(3) {
  animation-name: move3;
}

.fireflies .firefly:nth-child(3):before {
  animation-duration: 18s;
}

.fireflies .firefly:nth-child(3):after {
  animation-duration: 18s, 9086ms;
  animation-delay: 0ms, 8018ms;
}

@keyframes move3 {
  0% {
    transform: translateX(6vw) translateY(-47vh) scale(0.1197007481);
  }
  3.5714285714% {
    transform: translateX(-2vw) translateY(48vh) scale(0.6184538653);
  }
  7.1428571429% {
    transform: translateX(1vw) translateY(20vh) scale(0.2693266833);
  }
  10.7142857143% {
    transform: translateX(-41vw) translateY(-17vh) scale(0.578553616);
  }
  14.2857142857% {
    transform: translateX(-36vw) translateY(42vh) scale(0.0199501247);
  }
  17.8571428571% {
    transform: translateX(16vw) translateY(8vh) scale(0.5087281796);
  }
  21.4285714286% {
    transform: translateX(-26vw) translateY(-34vh) scale(0.7481296758);
  }
  25% {
    transform: translateX(30vw) translateY(-27vh) scale(0.5885286783);
  }
  28.5714285714% {
    transform: translateX(-1vw) translateY(-49vh) scale(0.1496259352);
  }
  32.1428571429% {
    transform: translateX(35vw) translateY(25vh) scale(0.7182044888);
  }
  35.7142857143% {
    transform: translateX(-31vw) translateY(-12vh) scale(0.3990024938);
  }
  39.2857142857% {
    transform: translateX(8vw) translateY(43vh) scale(0.3591022444);
  }
  42.8571428571% {
    transform: translateX(15vw) translateY(20vh) scale(0.5386533666);
  }
  46.4285714286% {
    transform: translateX(-31vw) translateY(-16vh) scale(0.5985037406);
  }
  50% {
    transform: translateX(42vw) translateY(16vh) scale(0.6783042394);
  }
  53.5714285714% {
    transform: translateX(-16vw) translateY(-5vh) scale(0.1197007481);
  }
  57.1428571429% {
    transform: translateX(11vw) translateY(36vh) scale(0.1396508728);
  }
  60.7142857143% {
    transform: translateX(-19vw) translateY(35vh) scale(0.0997506234);
  }
  64.2857142857% {
    transform: translateX(-13vw) translateY(10vh) scale(0.0199501247);
  }
  67.8571428571% {
    transform: translateX(37vw) translateY(24vh) scale(0.7082294264);
  }
  71.4285714286% {
    transform: translateX(39vw) translateY(50vh) scale(0.6184538653);
  }
  75% {
    transform: translateX(40vw) translateY(-13vh) scale(0.3291770574);
  }
  78.5714285714% {
    transform: translateX(-45vw) translateY(-10vh) scale(0.1895261845);
  }
  82.1428571429% {
    transform: translateX(-46vw) translateY(27vh) scale(0.0798004988);
  }
  85.7142857143% {
    transform: translateX(-27vw) translateY(27vh) scale(0.3591022444);
  }
  89.2857142857% {
    transform: translateX(-8vw) translateY(-39vh) scale(0.5586034913);
  }
  92.8571428571% {
    transform: translateX(8vw) translateY(39vh) scale(0.6683291771);
  }
  96.4285714286% {
    transform: translateX(7vw) translateY(41vh) scale(0.1197007481);
  }
  100% {
    transform: translateX(-24vw) translateY(-4vh) scale(0.3291770574);
  }
}
.fireflies .firefly:nth-child(4) {
  animation-name: move4;
}

.fireflies .firefly:nth-child(4):before {
  animation-duration: 10s;
}

.fireflies .firefly:nth-child(4):after {
  animation-duration: 10s, 6741ms;
  animation-delay: 0ms, 6204ms;
}

@keyframes move4 {
  0% {
    transform: translateX(-30vw) translateY(16vh) scale(0.2493765586);
  }
  3.5714285714% {
    transform: translateX(-1vw) translateY(-48vh) scale(0.5985037406);
  }
  7.1428571429% {
    transform: translateX(33vw) translateY(-34vh) scale(0.4588528678);
  }
  10.7142857143% {
    transform: translateX(-8vw) translateY(-23vh) scale(0.1995012469);
  }
  14.2857142857% {
    transform: translateX(49vw) translateY(20vh) scale(0.3391521197);
  }
  17.8571428571% {
    transform: translateX(-21vw) translateY(-37vh) scale(0.2593516209);
  }
  21.4285714286% {
    transform: translateX(-49vw) translateY(48vh) scale(0.4189526185);
  }
  25% {
    transform: translateX(-25vw) translateY(0vh) scale(0.1795511222);
  }
  28.5714285714% {
    transform: translateX(-43vw) translateY(-5vh) scale(0.3591022444);
  }
  32.1428571429% {
    transform: translateX(-2vw) translateY(-1vh) scale(0.029925187);
  }
  35.7142857143% {
    transform: translateX(1vw) translateY(-16vh) scale(0.4788029925);
  }
  39.2857142857% {
    transform: translateX(-9vw) translateY(41vh) scale(0.319201995);
  }
  42.8571428571% {
    transform: translateX(-20vw) translateY(-42vh) scale(0.4987531172);
  }
  46.4285714286% {
    transform: translateX(-8vw) translateY(-12vh) scale(0.5286783042);
  }
  50% {
    transform: translateX(-7vw) translateY(-40vh) scale(0.7182044888);
  }
  53.5714285714% {
    transform: translateX(-44vw) translateY(-30vh) scale(0.7381546135);
  }
  57.1428571429% {
    transform: translateX(34vw) translateY(49vh) scale(0.63840399);
  }
  60.7142857143% {
    transform: translateX(38vw) translateY(-19vh) scale(0.63840399);
  }
  64.2857142857% {
    transform: translateX(40vw) translateY(0vh) scale(0.1396508728);
  }
  67.8571428571% {
    transform: translateX(-11vw) translateY(16vh) scale(0.7481296758);
  }
  71.4285714286% {
    transform: translateX(-42vw) translateY(-35vh) scale(0.4688279302);
  }
  75% {
    transform: translateX(36vw) translateY(-49vh) scale(0.4189526185);
  }
  78.5714285714% {
    transform: translateX(15vw) translateY(-23vh) scale(0.6284289277);
  }
  82.1428571429% {
    transform: translateX(-24vw) translateY(22vh) scale(0.2793017456);
  }
  85.7142857143% {
    transform: translateX(-36vw) translateY(47vh) scale(0.3990024938);
  }
  89.2857142857% {
    transform: translateX(30vw) translateY(16vh) scale(0.4887780549);
  }
  92.8571428571% {
    transform: translateX(-48vw) translateY(-37vh) scale(0.2992518703);
  }
  96.4285714286% {
    transform: translateX(47vw) translateY(-14vh) scale(0.5187032419);
  }
  100% {
    transform: translateX(-35vw) translateY(29vh) scale(0.3092269327);
  }
}
.fireflies .firefly:nth-child(5) {
  animation-name: move5;
}

.fireflies .firefly:nth-child(5):before {
  animation-duration: 17s;
}

.fireflies .firefly:nth-child(5):after {
  animation-duration: 17s, 8292ms;
  animation-delay: 0ms, 2332ms;
}

@keyframes move5 {
  0% {
    transform: translateX(19vw) translateY(9vh) scale(0.1895261845);
  }
  3.7037037037% {
    transform: translateX(8vw) translateY(20vh) scale(0.0897755611);
  }
  7.4074074074% {
    transform: translateX(-27vw) translateY(-36vh) scale(0.6583541147);
  }
  11.1111111111% {
    transform: translateX(-39vw) translateY(4vh) scale(0.7481296758);
  }
  14.8148148148% {
    transform: translateX(-5vw) translateY(22vh) scale(0.4089775561);
  }
  18.5185185185% {
    transform: translateX(-4vw) translateY(50vh) scale(0.6483790524);
  }
  22.2222222222% {
    transform: translateX(3vw) translateY(6vh) scale(0.3890274314);
  }
  25.9259259259% {
    transform: translateX(5vw) translateY(-43vh) scale(0.3990024938);
  }
  29.6296296296% {
    transform: translateX(18vw) translateY(-37vh) scale(0.608478803);
  }
  33.3333333333% {
    transform: translateX(-8vw) translateY(34vh) scale(0.4688279302);
  }
  37.037037037% {
    transform: translateX(-15vw) translateY(1vh) scale(0.5386533666);
  }
  40.7407407407% {
    transform: translateX(12vw) translateY(29vh) scale(0.2194513716);
  }
  44.4444444444% {
    transform: translateX(-33vw) translateY(50vh) scale(0.3890274314);
  }
  48.1481481481% {
    transform: translateX(-16vw) translateY(41vh) scale(0.2593516209);
  }
  51.8518518519% {
    transform: translateX(-4vw) translateY(39vh) scale(0.5187032419);
  }
  55.5555555556% {
    transform: translateX(3vw) translateY(36vh) scale(0.6583541147);
  }
  59.2592592593% {
    transform: translateX(-23vw) translateY(2vh) scale(0.0997506234);
  }
  62.962962963% {
    transform: translateX(37vw) translateY(-21vh) scale(0.63840399);
  }
  66.6666666667% {
    transform: translateX(-34vw) translateY(15vh) scale(0.1296758105);
  }
  70.3703703704% {
    transform: translateX(35vw) translateY(-21vh) scale(0.608478803);
  }
  74.0740740741% {
    transform: translateX(-45vw) translateY(-38vh) scale(0.3790523691);
  }
  77.7777777778% {
    transform: translateX(-3vw) translateY(13vh) scale(0.3291770574);
  }
  81.4814814815% {
    transform: translateX(-41vw) translateY(-21vh) scale(0.4688279302);
  }
  85.1851851852% {
    transform: translateX(2vw) translateY(-31vh) scale(0.7182044888);
  }
  88.8888888889% {
    transform: translateX(-9vw) translateY(2vh) scale(0.2094763092);
  }
  92.5925925926% {
    transform: translateX(-1vw) translateY(22vh) scale(0.029925187);
  }
  96.2962962963% {
    transform: translateX(-6vw) translateY(-3vh) scale(0.1396508728);
  }
  100% {
    transform: translateX(-48vw) translateY(30vh) scale(0.5187032419);
  }
}
.fireflies .firefly:nth-child(6) {
  animation-name: move6;
}

.fireflies .firefly:nth-child(6):before {
  animation-duration: 16s;
}

.fireflies .firefly:nth-child(6):after {
  animation-duration: 16s, 10602ms;
  animation-delay: 0ms, 4353ms;
}

@keyframes move6 {
  0% {
    transform: translateX(7vw) translateY(-24vh) scale(0.7381546135);
  }
  5.8823529412% {
    transform: translateX(-48vw) translateY(6vh) scale(0.2992518703);
  }
  11.7647058824% {
    transform: translateX(-17vw) translateY(29vh) scale(0.5187032419);
  }
  17.6470588235% {
    transform: translateX(44vw) translateY(-32vh) scale(0.2992518703);
  }
  23.5294117647% {
    transform: translateX(-30vw) translateY(5vh) scale(0.4788029925);
  }
  29.4117647059% {
    transform: translateX(16vw) translateY(-33vh) scale(0.5685785536);
  }
  35.2941176471% {
    transform: translateX(-15vw) translateY(20vh) scale(0.1296758105);
  }
  41.1764705882% {
    transform: translateX(9vw) translateY(-22vh) scale(0.0698254364);
  }
  47.0588235294% {
    transform: translateX(50vw) translateY(-47vh) scale(0.3391521197);
  }
  52.9411764706% {
    transform: translateX(21vw) translateY(9vh) scale(0.6882793017);
  }
  58.8235294118% {
    transform: translateX(45vw) translateY(10vh) scale(0.1895261845);
  }
  64.7058823529% {
    transform: translateX(-46vw) translateY(12vh) scale(0.2094763092);
  }
  70.5882352941% {
    transform: translateX(-18vw) translateY(48vh) scale(0.5386533666);
  }
  76.4705882353% {
    transform: translateX(-48vw) translateY(20vh) scale(0.5087281796);
  }
  82.3529411765% {
    transform: translateX(-26vw) translateY(-40vh) scale(0.5486284289);
  }
  88.2352941176% {
    transform: translateX(8vw) translateY(24vh) scale(0.0897755611);
  }
  94.1176470588% {
    transform: translateX(26vw) translateY(-6vh) scale(0.1396508728);
  }
  100% {
    transform: translateX(-1vw) translateY(-42vh) scale(0.4389027431);
  }
}
.fireflies .firefly:nth-child(7) {
  animation-name: move7;
}

.fireflies .firefly:nth-child(7):before {
  animation-duration: 13s;
}

.fireflies .firefly:nth-child(7):after {
  animation-duration: 13s, 10934ms;
  animation-delay: 0ms, 7548ms;
}

@keyframes move7 {
  0% {
    transform: translateX(13vw) translateY(34vh) scale(0.2194513716);
  }
  3.7037037037% {
    transform: translateX(16vw) translateY(-13vh) scale(0.4189526185);
  }
  7.4074074074% {
    transform: translateX(-34vw) translateY(-30vh) scale(0.4389027431);
  }
  11.1111111111% {
    transform: translateX(6vw) translateY(29vh) scale(0.63840399);
  }
  14.8148148148% {
    transform: translateX(-29vw) translateY(39vh) scale(0.5685785536);
  }
  18.5185185185% {
    transform: translateX(30vw) translateY(-16vh) scale(0.1197007481);
  }
  22.2222222222% {
    transform: translateX(0vw) translateY(-37vh) scale(0.4887780549);
  }
  25.9259259259% {
    transform: translateX(-36vw) translateY(-48vh) scale(0.4588528678);
  }
  29.6296296296% {
    transform: translateX(0vw) translateY(-28vh) scale(0.2094763092);
  }
  33.3333333333% {
    transform: translateX(-45vw) translateY(8vh) scale(0.5985037406);
  }
  37.037037037% {
    transform: translateX(-5vw) translateY(15vh) scale(0.578553616);
  }
  40.7407407407% {
    transform: translateX(-17vw) translateY(27vh) scale(0.5685785536);
  }
  44.4444444444% {
    transform: translateX(-7vw) translateY(-34vh) scale(0.1097256858);
  }
  48.1481481481% {
    transform: translateX(-24vw) translateY(-8vh) scale(0.1197007481);
  }
  51.8518518519% {
    transform: translateX(31vw) translateY(-3vh) scale(0.1396508728);
  }
  55.5555555556% {
    transform: translateX(-28vw) translateY(-25vh) scale(0.2693266833);
  }
  59.2592592593% {
    transform: translateX(-14vw) translateY(49vh) scale(0.4887780549);
  }
  62.962962963% {
    transform: translateX(-24vw) translateY(28vh) scale(0.1097256858);
  }
  66.6666666667% {
    transform: translateX(10vw) translateY(-28vh) scale(0.1795511222);
  }
  70.3703703704% {
    transform: translateX(9vw) translateY(33vh) scale(0.2394014963);
  }
  74.0740740741% {
    transform: translateX(-48vw) translateY(-22vh) scale(0.1097256858);
  }
  77.7777777778% {
    transform: translateX(3vw) translateY(-31vh) scale(0.6683291771);
  }
  81.4814814815% {
    transform: translateX(-8vw) translateY(27vh) scale(0.319201995);
  }
  85.1851851852% {
    transform: translateX(-10vw) translateY(-22vh) scale(0.2294264339);
  }
  88.8888888889% {
    transform: translateX(-6vw) translateY(-5vh) scale(0.3690773067);
  }
  92.5925925926% {
    transform: translateX(16vw) translateY(-47vh) scale(0.6882793017);
  }
  96.2962962963% {
    transform: translateX(2vw) translateY(0vh) scale(0.4887780549);
  }
  100% {
    transform: translateX(-44vw) translateY(8vh) scale(0.0099750623);
  }
}
.fireflies .firefly:nth-child(8) {
  animation-name: move8;
}

.fireflies .firefly:nth-child(8):before {
  animation-duration: 11s;
}

.fireflies .firefly:nth-child(8):after {
  animation-duration: 11s, 5948ms;
  animation-delay: 0ms, 5151ms;
}

@keyframes move8 {
  0% {
    transform: translateX(-17vw) translateY(8vh) scale(0.63840399);
  }
  4.7619047619% {
    transform: translateX(-45vw) translateY(39vh) scale(0.5286783042);
  }
  9.5238095238% {
    transform: translateX(-39vw) translateY(-39vh) scale(0.0399002494);
  }
  14.2857142857% {
    transform: translateX(44vw) translateY(46vh) scale(0.3890274314);
  }
  19.0476190476% {
    transform: translateX(-11vw) translateY(12vh) scale(0.6783042394);
  }
  23.8095238095% {
    transform: translateX(37vw) translateY(-42vh) scale(0.578553616);
  }
  28.5714285714% {
    transform: translateX(22vw) translateY(-37vh) scale(0.0099750623);
  }
  33.3333333333% {
    transform: translateX(41vw) translateY(-36vh) scale(0.4389027431);
  }
  38.0952380952% {
    transform: translateX(-4vw) translateY(4vh) scale(0.5087281796);
  }
  42.8571428571% {
    transform: translateX(-7vw) translateY(-28vh) scale(0.289276808);
  }
  47.619047619% {
    transform: translateX(22vw) translateY(44vh) scale(0.3092269327);
  }
  52.380952381% {
    transform: translateX(13vw) translateY(-41vh) scale(0.4389027431);
  }
  57.1428571429% {
    transform: translateX(21vw) translateY(10vh) scale(0.608478803);
  }
  61.9047619048% {
    transform: translateX(8vw) translateY(-18vh) scale(0.0199501247);
  }
  66.6666666667% {
    transform: translateX(-34vw) translateY(19vh) scale(0.6483790524);
  }
  71.4285714286% {
    transform: translateX(20vw) translateY(14vh) scale(0.7182044888);
  }
  76.1904761905% {
    transform: translateX(27vw) translateY(41vh) scale(0.1197007481);
  }
  80.9523809524% {
    transform: translateX(-13vw) translateY(35vh) scale(0.1795511222);
  }
  85.7142857143% {
    transform: translateX(-1vw) translateY(43vh) scale(0.1895261845);
  }
  90.4761904762% {
    transform: translateX(28vw) translateY(25vh) scale(0.1995012469);
  }
  95.2380952381% {
    transform: translateX(9vw) translateY(-14vh) scale(0.6882793017);
  }
  100% {
    transform: translateX(-27vw) translateY(50vh) scale(0.6583541147);
  }
}
.fireflies .firefly:nth-child(9) {
  animation-name: move9;
}

.fireflies .firefly:nth-child(9):before {
  animation-duration: 11s;
}

.fireflies .firefly:nth-child(9):after {
  animation-duration: 11s, 6065ms;
  animation-delay: 0ms, 5381ms;
}

@keyframes move9 {
  0% {
    transform: translateX(-14vw) translateY(13vh) scale(0.1895261845);
  }
  3.7037037037% {
    transform: translateX(36vw) translateY(27vh) scale(0.4089775561);
  }
  7.4074074074% {
    transform: translateX(13vw) translateY(-17vh) scale(0.6783042394);
  }
  11.1111111111% {
    transform: translateX(-39vw) translateY(-31vh) scale(0.0399002494);
  }
  14.8148148148% {
    transform: translateX(50vw) translateY(33vh) scale(0.3790523691);
  }
  18.5185185185% {
    transform: translateX(-46vw) translateY(-11vh) scale(0.0099750623);
  }
  22.2222222222% {
    transform: translateX(6vw) translateY(6vh) scale(0.578553616);
  }
  25.9259259259% {
    transform: translateX(-38vw) translateY(3vh) scale(0.0698254364);
  }
  29.6296296296% {
    transform: translateX(21vw) translateY(-15vh) scale(0.0997506234);
  }
  33.3333333333% {
    transform: translateX(-30vw) translateY(41vh) scale(0.3391521197);
  }
  37.037037037% {
    transform: translateX(-3vw) translateY(-28vh) scale(0.0199501247);
  }
  40.7407407407% {
    transform: translateX(24vw) translateY(-13vh) scale(0.2194513716);
  }
  44.4444444444% {
    transform: translateX(-29vw) translateY(38vh) scale(0.5187032419);
  }
  48.1481481481% {
    transform: translateX(11vw) translateY(9vh) scale(0.7381546135);
  }
  51.8518518519% {
    transform: translateX(10vw) translateY(16vh) scale(0.4089775561);
  }
  55.5555555556% {
    transform: translateX(7vw) translateY(38vh) scale(0.4389027431);
  }
  59.2592592593% {
    transform: translateX(-32vw) translateY(-23vh) scale(0.7182044888);
  }
  62.962962963% {
    transform: translateX(46vw) translateY(27vh) scale(0.349127182);
  }
  66.6666666667% {
    transform: translateX(-32vw) translateY(1vh) scale(0.0798004988);
  }
  70.3703703704% {
    transform: translateX(7vw) translateY(-40vh) scale(0.1097256858);
  }
  74.0740740741% {
    transform: translateX(-28vw) translateY(-16vh) scale(0.608478803);
  }
  77.7777777778% {
    transform: translateX(-6vw) translateY(-21vh) scale(0.5087281796);
  }
  81.4814814815% {
    transform: translateX(8vw) translateY(37vh) scale(0.1496259352);
  }
  85.1851851852% {
    transform: translateX(42vw) translateY(-4vh) scale(0.4488778055);
  }
  88.8888888889% {
    transform: translateX(-47vw) translateY(28vh) scale(0.3591022444);
  }
  92.5925925926% {
    transform: translateX(19vw) translateY(42vh) scale(0.5486284289);
  }
  96.2962962963% {
    transform: translateX(-32vw) translateY(43vh) scale(0.6683291771);
  }
  100% {
    transform: translateX(23vw) translateY(5vh) scale(0.3291770574);
  }
}
.fireflies .firefly:nth-child(10) {
  animation-name: move10;
}

.fireflies .firefly:nth-child(10):before {
  animation-duration: 9s;
}

.fireflies .firefly:nth-child(10):after {
  animation-duration: 9s, 10745ms;
  animation-delay: 0ms, 667ms;
}

@keyframes move10 {
  0% {
    transform: translateX(33vw) translateY(43vh) scale(0.2094763092);
  }
  4.5454545455% {
    transform: translateX(-27vw) translateY(-21vh) scale(0.1995012469);
  }
  9.0909090909% {
    transform: translateX(-38vw) translateY(-47vh) scale(0.5985037406);
  }
  13.6363636364% {
    transform: translateX(-1vw) translateY(2vh) scale(0.4089775561);
  }
  18.1818181818% {
    transform: translateX(9vw) translateY(-41vh) scale(0.608478803);
  }
  22.7272727273% {
    transform: translateX(-13vw) translateY(1vh) scale(0.1596009975);
  }
  27.2727272727% {
    transform: translateX(-48vw) translateY(-39vh) scale(0.4389027431);
  }
  31.8181818182% {
    transform: translateX(-7vw) translateY(-2vh) scale(0.6783042394);
  }
  36.3636363636% {
    transform: translateX(-22vw) translateY(10vh) scale(0.1496259352);
  }
  40.9090909091% {
    transform: translateX(-33vw) translateY(11vh) scale(0.5187032419);
  }
  45.4545454545% {
    transform: translateX(36vw) translateY(-21vh) scale(0.6982543641);
  }
  50% {
    transform: translateX(26vw) translateY(-18vh) scale(0.0997506234);
  }
  54.5454545455% {
    transform: translateX(20vw) translateY(-36vh) scale(0.63840399);
  }
  59.0909090909% {
    transform: translateX(-30vw) translateY(8vh) scale(0.7082294264);
  }
  63.6363636364% {
    transform: translateX(8vw) translateY(-27vh) scale(0.3291770574);
  }
  68.1818181818% {
    transform: translateX(45vw) translateY(-16vh) scale(0.0798004988);
  }
  72.7272727273% {
    transform: translateX(45vw) translateY(-38vh) scale(0.3990024938);
  }
  77.2727272727% {
    transform: translateX(-45vw) translateY(13vh) scale(0.029925187);
  }
  81.8181818182% {
    transform: translateX(26vw) translateY(-34vh) scale(0.5386533666);
  }
  86.3636363636% {
    transform: translateX(39vw) translateY(-15vh) scale(0.3990024938);
  }
  90.9090909091% {
    transform: translateX(23vw) translateY(-20vh) scale(0.4389027431);
  }
  95.4545454545% {
    transform: translateX(13vw) translateY(36vh) scale(0.1496259352);
  }
  100% {
    transform: translateX(8vw) translateY(-14vh) scale(0.0099750623);
  }
}
.fireflies .firefly:nth-child(11) {
  animation-name: move11;
}

.fireflies .firefly:nth-child(11):before {
  animation-duration: 13s;
}

.fireflies .firefly:nth-child(11):after {
  animation-duration: 13s, 9350ms;
  animation-delay: 0ms, 2859ms;
}

@keyframes move11 {
  0% {
    transform: translateX(28vw) translateY(42vh) scale(0.1995012469);
  }
  5% {
    transform: translateX(-38vw) translateY(4vh) scale(0.5486284289);
  }
  10% {
    transform: translateX(39vw) translateY(-4vh) scale(0.1695760599);
  }
  15% {
    transform: translateX(-20vw) translateY(37vh) scale(0.1396508728);
  }
  20% {
    transform: translateX(42vw) translateY(-18vh) scale(0.1995012469);
  }
  25% {
    transform: translateX(-27vw) translateY(-27vh) scale(0.0897755611);
  }
  30% {
    transform: translateX(-30vw) translateY(-19vh) scale(0.6982543641);
  }
  35% {
    transform: translateX(10vw) translateY(9vh) scale(0.0798004988);
  }
  40% {
    transform: translateX(-1vw) translateY(49vh) scale(0.0897755611);
  }
  45% {
    transform: translateX(49vw) translateY(-19vh) scale(0.4289276808);
  }
  50% {
    transform: translateX(-18vw) translateY(6vh) scale(0.1197007481);
  }
  55% {
    transform: translateX(10vw) translateY(45vh) scale(0.0897755611);
  }
  60% {
    transform: translateX(-44vw) translateY(33vh) scale(0.1396508728);
  }
  65% {
    transform: translateX(-46vw) translateY(37vh) scale(0.63840399);
  }
  70% {
    transform: translateX(46vw) translateY(32vh) scale(0.7182044888);
  }
  75% {
    transform: translateX(28vw) translateY(26vh) scale(0.4688279302);
  }
  80% {
    transform: translateX(18vw) translateY(-41vh) scale(0.0798004988);
  }
  85% {
    transform: translateX(7vw) translateY(-40vh) scale(0.6583541147);
  }
  90% {
    transform: translateX(-41vw) translateY(-20vh) scale(0.0997506234);
  }
  95% {
    transform: translateX(-19vw) translateY(30vh) scale(0.4089775561);
  }
  100% {
    transform: translateX(28vw) translateY(-29vh) scale(0.0698254364);
  }
}
.fireflies .firefly:nth-child(12) {
  animation-name: move12;
}

.fireflies .firefly:nth-child(12):before {
  animation-duration: 17s;
}

.fireflies .firefly:nth-child(12):after {
  animation-duration: 17s, 6855ms;
  animation-delay: 0ms, 6215ms;
}

@keyframes move12 {
  0% {
    transform: translateX(-46vw) translateY(37vh) scale(0.5087281796);
  }
  4% {
    transform: translateX(25vw) translateY(0vh) scale(0.4289276808);
  }
  8% {
    transform: translateX(13vw) translateY(27vh) scale(0.6882793017);
  }
  12% {
    transform: translateX(31vw) translateY(50vh) scale(0.63840399);
  }
  16% {
    transform: translateX(-35vw) translateY(-48vh) scale(0.6184538653);
  }
  20% {
    transform: translateX(19vw) translateY(42vh) scale(0.5486284289);
  }
  24% {
    transform: translateX(-36vw) translateY(31vh) scale(0.5586034913);
  }
  28% {
    transform: translateX(-45vw) translateY(30vh) scale(0.1795511222);
  }
  32% {
    transform: translateX(0vw) translateY(19vh) scale(0.349127182);
  }
  36% {
    transform: translateX(15vw) translateY(27vh) scale(0.6783042394);
  }
  40% {
    transform: translateX(-31vw) translateY(32vh) scale(0.4987531172);
  }
  44% {
    transform: translateX(36vw) translateY(24vh) scale(0.349127182);
  }
  48% {
    transform: translateX(-17vw) translateY(19vh) scale(0.63840399);
  }
  52% {
    transform: translateX(-31vw) translateY(-25vh) scale(0.1496259352);
  }
  56% {
    transform: translateX(-43vw) translateY(-46vh) scale(0.5187032419);
  }
  60% {
    transform: translateX(-27vw) translateY(18vh) scale(0.2593516209);
  }
  64% {
    transform: translateX(-1vw) translateY(1vh) scale(0.63840399);
  }
  68% {
    transform: translateX(-25vw) translateY(21vh) scale(0.6483790524);
  }
  72% {
    transform: translateX(26vw) translateY(10vh) scale(0.578553616);
  }
  76% {
    transform: translateX(-38vw) translateY(-45vh) scale(0.0598503741);
  }
  80% {
    transform: translateX(-10vw) translateY(-47vh) scale(0.5586034913);
  }
  84% {
    transform: translateX(48vw) translateY(-8vh) scale(0.608478803);
  }
  88% {
    transform: translateX(-25vw) translateY(-17vh) scale(0.4089775561);
  }
  92% {
    transform: translateX(-22vw) translateY(22vh) scale(0.4488778055);
  }
  96% {
    transform: translateX(26vw) translateY(-24vh) scale(0.1695760599);
  }
  100% {
    transform: translateX(-28vw) translateY(5vh) scale(0.1895261845);
  }
}
.fireflies .firefly:nth-child(13) {
  animation-name: move13;
}

.fireflies .firefly:nth-child(13):before {
  animation-duration: 14s;
}

.fireflies .firefly:nth-child(13):after {
  animation-duration: 14s, 9793ms;
  animation-delay: 0ms, 6363ms;
}

@keyframes move13 {
  0% {
    transform: translateX(12vw) translateY(-9vh) scale(0.4887780549);
  }
  4.347826087% {
    transform: translateX(-48vw) translateY(-28vh) scale(0.4389027431);
  }
  8.6956521739% {
    transform: translateX(-47vw) translateY(5vh) scale(0.4588528678);
  }
  13.0434782609% {
    transform: translateX(-13vw) translateY(20vh) scale(0.3092269327);
  }
  17.3913043478% {
    transform: translateX(1vw) translateY(-35vh) scale(0.4389027431);
  }
  21.7391304348% {
    transform: translateX(-8vw) translateY(-16vh) scale(0.6882793017);
  }
  26.0869565217% {
    transform: translateX(31vw) translateY(-5vh) scale(0.0997506234);
  }
  30.4347826087% {
    transform: translateX(29vw) translateY(23vh) scale(0.6882793017);
  }
  34.7826086957% {
    transform: translateX(24vw) translateY(49vh) scale(0.7281795511);
  }
  39.1304347826% {
    transform: translateX(31vw) translateY(-2vh) scale(0.0399002494);
  }
  43.4782608696% {
    transform: translateX(49vw) translateY(-36vh) scale(0.0598503741);
  }
  47.8260869565% {
    transform: translateX(-44vw) translateY(4vh) scale(0.2094763092);
  }
  52.1739130435% {
    transform: translateX(-42vw) translateY(15vh) scale(0.0897755611);
  }
  56.5217391304% {
    transform: translateX(5vw) translateY(41vh) scale(0.4788029925);
  }
  60.8695652174% {
    transform: translateX(-46vw) translateY(-9vh) scale(0.1995012469);
  }
  65.2173913043% {
    transform: translateX(45vw) translateY(27vh) scale(0.3990024938);
  }
  69.5652173913% {
    transform: translateX(-34vw) translateY(-8vh) scale(0.5586034913);
  }
  73.9130434783% {
    transform: translateX(32vw) translateY(7vh) scale(0.1695760599);
  }
  78.2608695652% {
    transform: translateX(-27vw) translateY(-29vh) scale(0.7182044888);
  }
  82.6086956522% {
    transform: translateX(-38vw) translateY(1vh) scale(0.3890274314);
  }
  86.9565217391% {
    transform: translateX(16vw) translateY(-37vh) scale(0.6284289277);
  }
  91.3043478261% {
    transform: translateX(-40vw) translateY(-15vh) scale(0.1097256858);
  }
  95.652173913% {
    transform: translateX(-24vw) translateY(3vh) scale(0.5885286783);
  }
  100% {
    transform: translateX(35vw) translateY(7vh) scale(0.3591022444);
  }
}
.fireflies .firefly:nth-child(14) {
  animation-name: move14;
}

.fireflies .firefly:nth-child(14):before {
  animation-duration: 14s;
}

.fireflies .firefly:nth-child(14):after {
  animation-duration: 14s, 9808ms;
  animation-delay: 0ms, 3952ms;
}

@keyframes move14 {
  0% {
    transform: translateX(-49vw) translateY(33vh) scale(0.6882793017);
  }
  4.347826087% {
    transform: translateX(49vw) translateY(37vh) scale(0.5486284289);
  }
  8.6956521739% {
    transform: translateX(-14vw) translateY(25vh) scale(0.3291770574);
  }
  13.0434782609% {
    transform: translateX(-27vw) translateY(-7vh) scale(0.5586034913);
  }
  17.3913043478% {
    transform: translateX(-5vw) translateY(34vh) scale(0.6783042394);
  }
  21.7391304348% {
    transform: translateX(30vw) translateY(-4vh) scale(0.3391521197);
  }
  26.0869565217% {
    transform: translateX(22vw) translateY(-46vh) scale(0.7381546135);
  }
  30.4347826087% {
    transform: translateX(22vw) translateY(-46vh) scale(0.2693266833);
  }
  34.7826086957% {
    transform: translateX(32vw) translateY(35vh) scale(0.7182044888);
  }
  39.1304347826% {
    transform: translateX(10vw) translateY(-4vh) scale(0.2992518703);
  }
  43.4782608696% {
    transform: translateX(2vw) translateY(-16vh) scale(0.5885286783);
  }
  47.8260869565% {
    transform: translateX(-31vw) translateY(-31vh) scale(0.6583541147);
  }
  52.1739130435% {
    transform: translateX(-4vw) translateY(17vh) scale(0.6683291771);
  }
  56.5217391304% {
    transform: translateX(40vw) translateY(-49vh) scale(0.1296758105);
  }
  60.8695652174% {
    transform: translateX(36vw) translateY(-7vh) scale(0.1795511222);
  }
  65.2173913043% {
    transform: translateX(24vw) translateY(-36vh) scale(0.1995012469);
  }
  69.5652173913% {
    transform: translateX(8vw) translateY(-18vh) scale(0.1795511222);
  }
  73.9130434783% {
    transform: translateX(-35vw) translateY(-46vh) scale(0.1296758105);
  }
  78.2608695652% {
    transform: translateX(-14vw) translateY(5vh) scale(0.6683291771);
  }
  82.6086956522% {
    transform: translateX(19vw) translateY(13vh) scale(0.2793017456);
  }
  86.9565217391% {
    transform: translateX(12vw) translateY(-30vh) scale(0.7082294264);
  }
  91.3043478261% {
    transform: translateX(48vw) translateY(25vh) scale(0.1895261845);
  }
  95.652173913% {
    transform: translateX(-45vw) translateY(24vh) scale(0.0798004988);
  }
  100% {
    transform: translateX(4vw) translateY(14vh) scale(0.4887780549);
  }
}
.fireflies .firefly:nth-child(15) {
  animation-name: move15;
}

.fireflies .firefly:nth-child(15):before {
  animation-duration: 16s;
}

.fireflies .firefly:nth-child(15):after {
  animation-duration: 16s, 7982ms;
  animation-delay: 0ms, 1957ms;
}

@keyframes move15 {
  0% {
    transform: translateX(10vw) translateY(-7vh) scale(0.6483790524);
  }
  3.8461538462% {
    transform: translateX(-8vw) translateY(38vh) scale(0.5187032419);
  }
  7.6923076923% {
    transform: translateX(-40vw) translateY(-11vh) scale(0.4788029925);
  }
  11.5384615385% {
    transform: translateX(-10vw) translateY(-19vh) scale(0.3591022444);
  }
  15.3846153846% {
    transform: translateX(-9vw) translateY(-41vh) scale(0.5087281796);
  }
  19.2307692308% {
    transform: translateX(-2vw) translateY(30vh) scale(0.5586034913);
  }
  23.0769230769% {
    transform: translateX(25vw) translateY(-6vh) scale(0.7281795511);
  }
  26.9230769231% {
    transform: translateX(-30vw) translateY(49vh) scale(0.349127182);
  }
  30.7692307692% {
    transform: translateX(-14vw) translateY(4vh) scale(0.6882793017);
  }
  34.6153846154% {
    transform: translateX(-3vw) translateY(-24vh) scale(0.6882793017);
  }
  38.4615384615% {
    transform: translateX(-24vw) translateY(20vh) scale(0.1795511222);
  }
  42.3076923077% {
    transform: translateX(-5vw) translateY(15vh) scale(0.2593516209);
  }
  46.1538461538% {
    transform: translateX(39vw) translateY(-20vh) scale(0.0399002494);
  }
  50% {
    transform: translateX(32vw) translateY(-1vh) scale(0.4887780549);
  }
  53.8461538462% {
    transform: translateX(-27vw) translateY(28vh) scale(0.4887780549);
  }
  57.6923076923% {
    transform: translateX(-31vw) translateY(-21vh) scale(0.5386533666);
  }
  61.5384615385% {
    transform: translateX(-12vw) translateY(-33vh) scale(0.6982543641);
  }
  65.3846153846% {
    transform: translateX(-28vw) translateY(-2vh) scale(0.1596009975);
  }
  69.2307692308% {
    transform: translateX(22vw) translateY(-8vh) scale(0.0399002494);
  }
  73.0769230769% {
    transform: translateX(34vw) translateY(-32vh) scale(0.4987531172);
  }
  76.9230769231% {
    transform: translateX(32vw) translateY(-17vh) scale(0.7182044888);
  }
  80.7692307692% {
    transform: translateX(25vw) translateY(-37vh) scale(0.289276808);
  }
  84.6153846154% {
    transform: translateX(18vw) translateY(-7vh) scale(0.1197007481);
  }
  88.4615384615% {
    transform: translateX(4vw) translateY(47vh) scale(0.1995012469);
  }
  92.3076923077% {
    transform: translateX(-49vw) translateY(-34vh) scale(0.6483790524);
  }
  96.1538461538% {
    transform: translateX(-36vw) translateY(23vh) scale(0.3790523691);
  }
  100% {
    transform: translateX(20vw) translateY(41vh) scale(0.1097256858);
  }
}
@keyframes drift {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes flash {
  0% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw yellow;
  }
  30% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw yellow;
  }
  100% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw yellow;
  }
  5% {
    opacity: 1;
    box-shadow: 0 0 2vw 0.4vw yellow;
  }
}
/*_____________CONTENT_________________*/
table {
  border-collapse: collapse;
  margin: 25px 0;
  min-width: 400px;
  box-shadow: 0 0 20px var(--table-box-shadow-color);
  border-radius: 1rem;
  overflow: hidden;
}
table.fluid-text thead,
table.fluid-text tbody,
table.fluid-text td,
table.fluid-text tr {
  font-size: clamp(0.25rem, 2vw + 0.25rem, 2.25rem) !important;
}
table.equal-width {
  table-layout: fixed;
  width: 100%;
}
table thead {
  border-bottom: 2px solid var(--table-header-border-color);
}
table thead tr {
  background-color: var(--table-header-background-color);
  color: var(--table-data-text-color);
  text-align: left;
  font-family: henderson-slab-basic, serif;
  font-size: 50%;
  border-bottom: 2px solid var(--table-header-border-color);
}
table th,
table td {
  padding: 12px 15px;
  font-family: henderson-slab-basic, serif;
  font-size: 50%;
}
table tbody.striped tr {
  border-bottom: 1px solid var(--white-color);
}
table tbody.striped tr:nth-of-type(even) {
  background-color: var(--table-striped-alternate-background-color);
}
table tbody.striped tr:last-of-type {
  border-bottom: 2px solid var(--table-striped-border-color);
}
table.table-hover tbody tr:hover {
  color: var(--core-color);
  background-color: var(--table-hover-color);
}
table.table-light thead {
  border-bottom: 2px dashed var(--neutral-300);
}
table.table-light thead tr {
  background-color: var(--light-background-color-lighter);
  color: var(--dark-text-color);
  text-align: left;
  font-family: henderson-slab-basic, serif;
  border-bottom: 2px dashed var(--neutral-300);
}
table.table-light th,
table.table-light td {
  padding: 12px 15px;
}
table.table-light body tr {
  border-bottom: 1px solid var(--white-color);
}
table.table-light body tr:nth-of-type(even) {
  background-color: var(--neutral-300);
}
table.table-light body tr:last-of-type {
  border-bottom: 2px solid var(--secondary-color);
}
table.table-light.table-hover tbody tr:hover {
  color: var(--dark-text-color);
  background-color: var(--table-hover-color);
}

.cms-layout table h6 div.tooltip-container {
  font-size: inherit !important;
}
.cms-layout thead th {
  vertical-align: bottom;
  border-bottom: 2px solid var(--secondary-color);
}
.cms-layout thead th .th-content {
  align-items: center;
  display: flex;
}
.cms-layout th,
.cms-layout td {
  padding: 1.4rem 1rem;
  border-top: 1px solid var(--white-color);
  vertical-align: middle;
  font-size: 1.1rem;
  letter-spacing: 1px;
}
.cms-layout th {
  font-size: 0.8rem;
}
.cms-layout tbody tr {
  border-bottom: 1px solid var(--white-color);
  background-color: var(--light-background-color-lighter);
  padding: 20px 25px;
}
.cms-layout tbody tr.active {
  background-color: #cdcfb2;
}
.cms-layout.table-striped tbody tr {
  border-bottom: 1px solid var(--white-color);
  background-color: var(--light-background-color-lighter);
  padding: 20px 25px;
}
.cms-layout.table-striped tbody tr:nth-of-type(even) {
  background-color: #f9f8e9;
}
.cms-layout.table-striped tbody tr:last-of-type {
  border-bottom: 2px solid var(--secondary-color);
}
.cms-layout.table-sm th {
  padding: 1rem 0.7rem !important;
}
.cms-layout.table-sm td {
  padding: 0.7rem 0.7rem !important;
}
.cms-layout.table-bordered tbody td {
  border: 1px solid var(--border-color-3);
}
.cms-layout.table-bordered th {
  border: 1px solid var(--core-color-dark);
}
.cms-layout.table-hover tbody tr:hover {
  color: var(--dark-text-color);
  background-color: var(--table-hover-color);
}

/*_________Headers and Page Titles_____________*/
.header-ribbon {
  background-image: var(--header-ribbon-default-path);
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  margin: -4vh 1vw 4vh;
  display: flex;
  text-align: center !important;
  align-content: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  padding: 0px 40px;
}
.header-ribbon h1,
.header-ribbon h2,
.header-ribbon h3 {
  font-size: 230%;
}
.header-ribbon.orange-ribbon {
  background-image: var(--header-ribbon-orange-image-path);
  background-size: 100% 100%;
}
.header-ribbon.orange-ribbon h1,
.header-ribbon.orange-ribbon h2,
.header-ribbon.orange-ribbon h3,
.header-ribbon.orange-ribbon h4,
.header-ribbon.orange-ribbon h5,
.header-ribbon.orange-ribbon h6,
.header-ribbon.orange-ribbon p {
  color: var(--header-ribbon-orange-text-color);
  padding-right: 10px;
  margin-top: 4px;
}
.header-ribbon.green-ribbon {
  background-image: var(--header-ribbon-green-image-path);
  background-size: 100% 100%;
}
.header-ribbon.green-ribbon h1,
.header-ribbon.green-ribbon h2,
.header-ribbon.green-ribbon h3,
.header-ribbon.green-ribbon h4,
.header-ribbon.green-ribbon h5,
.header-ribbon.green-ribbon h6,
.header-ribbon.green-ribbon p {
  color: var(--header-ribbon-green-text-color);
  padding-right: 10px;
  margin-top: 4px;
}
.header-ribbon.blue-ribbon {
  background-image: var(--header-ribbon-blue-image-path);
  background-size: 100% 100%;
}
.header-ribbon.blue-ribbon h1,
.header-ribbon.blue-ribbon h2,
.header-ribbon.blue-ribbon h3,
.header-ribbon.blue-ribbon h4,
.header-ribbon.blue-ribbon h5,
.header-ribbon.blue-ribbon h6,
.header-ribbon.blue-ribbon p {
  color: var(--header-ribbon-blue-text-color);
  padding-right: 10px;
  margin-top: 4px;
}
.header-ribbon.olive-ribbon {
  background-image: url("/images/global/headers/header-ribbon-olive.svg");
  background-size: 100% 100%;
}
.header-ribbon.olive-ribbon h1,
.header-ribbon.olive-ribbon h2,
.header-ribbon.olive-ribbon h3,
.header-ribbon.olive-ribbon h4,
.header-ribbon.olive-ribbon h5,
.header-ribbon.olive-ribbon h6,
.header-ribbon.olive-ribbon p {
  color: var(--header-ribbon-olive-text-color);
  padding-right: 10px;
  margin-top: 4px;
}
.header-ribbon.mustard-ribbon {
  background-image: var(--header-ribbon-mustard-image-path);
  background-size: 100% 100%;
}
.header-ribbon.mustard-ribbon h1,
.header-ribbon.mustard-ribbon h2,
.header-ribbon.mustard-ribbon h3,
.header-ribbon.mustard-ribbon h4,
.header-ribbon.mustard-ribbon h5,
.header-ribbon.mustard-ribbon h6,
.header-ribbon.mustard-ribbon p {
  color: var(--header-ribbon-mustard-text-color);
  padding-right: 10px;
  margin-top: 4px;
}
.header-ribbon.double-ribbon-left {
  background-image: var(--header-ribbon-double-left-image-path);
  margin: -1vh 0vw 4vh 4vh;
  z-index: 2;
  padding-right: 0.275vw;
  background-size: 100% 100%;
}
.header-ribbon.double-ribbon-left h1,
.header-ribbon.double-ribbon-left h2,
.header-ribbon.double-ribbon-left h3,
.header-ribbon.double-ribbon-left h4,
.header-ribbon.double-ribbon-left h5,
.header-ribbon.double-ribbon-left h6,
.header-ribbon.double-ribbon-left p {
  color: var(--header-ribbon-double-text-color);
  padding-right: 10px;
  margin-top: 4px;
}
.header-ribbon.double-ribbon-left.olive {
  background-image: var(--header-ribbon-double-left-olive-image-path);
}
.header-ribbon.double-ribbon-right {
  background-image: var(--header-ribbon-double-right-image-path);
  margin: -1vh 4vw 4vh -1vh;
  z-index: 3;
  padding-right: 0.275vw;
  padding-left: 1.5vw;
  background-size: 100% 100%;
}
.header-ribbon.double-ribbon-right h1,
.header-ribbon.double-ribbon-right h2,
.header-ribbon.double-ribbon-right h3,
.header-ribbon.double-ribbon-right h4,
.header-ribbon.double-ribbon-right h5,
.header-ribbon.double-ribbon-right h6,
.header-ribbon.double-ribbon-right p {
  color: var(--header-ribbon-double-text-color);
  padding-right: 10px;
  margin-top: 4px;
}
.header-ribbon.double-ribbon-right.olive {
  background-image: var(--header-ribbon-double-right-olive-image-path);
}
.header-ribbon.module-seq-ribbon-orange {
  background-image: url("/images/levels/modules/module-sequence-ribbon-orange.svg");
  background-repeat: no-repeat;
  background-size: contain;
  padding: 3.4vh 1vh 1vh 1vh;
}

.full-width-app .page-header .alert,
.cms-preview .page-header .alert {
  display: flex;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.5rem 3rem;
}

.page-title-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}
@media (max-width: 991.98px) {
  .page-title-container h1 {
    font-size: 4vw !important;
  }
}

/*_____________BOXES_________________*/
/*Some box styles for you to use anywhere*/
.element-top-center {
  position: absolute;
  top: 0;
  margin: 1rem;
  z-index: 2;
}

.bottom-right-container {
  position: relative;
}

.bottom-right-container::before {
  content: "";
  flex: 1;
}

.container-centered {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: fixed;
}

.logo-img {
  width: 90%;
}

.logo-container {
  display: block;
  margin: auto;
  margin-top: -8em;
  text-align: center;
}

.box {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  width: 25%;
  min-height: 50%;
  min-width: 300px;
  padding: 20px;
  background-color: var(--light-background-color);
  margin: auto;
  border-radius: 0.8rem;
  margin-top: 8em;
}
@media (max-width: 991.98px) {
  .box {
    width: 60%;
  }
}
@media (max-width: 767.98px) {
  .box {
    width: 90%;
  }
}

.full-width-app,
.cms-layout {
  /*This alters the container for game screens*/
  /*Tiles (USE IN PLACE OF DEFAULT BOOTSTRAP CARD*/
}
.full-width-app .container-centered.game-layout,
.cms-layout .container-centered.game-layout {
  height: 100%;
}
.full-width-app .canvas,
.cms-layout .canvas {
  background-color: var(--light-background-color);
  border-radius: 0.8rem;
  padding: 20px;
  z-index: 1;
  position: relative;
}
.full-width-app .canvas.card-gold, .full-width-app .floating-menu-container .canvas.floating-menu, .floating-menu-container .full-width-app .canvas.floating-menu,
.cms-layout .canvas.card-gold,
.cms-layout .floating-menu-container .canvas.floating-menu,
.floating-menu-container .cms-layout .canvas.floating-menu {
  box-shadow: 5px 4px 0px 2px var(--secondary-color);
}
.full-width-app .canvas-centered,
.cms-layout .canvas-centered {
  background-color: var(--light-background-color);
  border-radius: 0.8rem;
  padding: 20px;
  z-index: 1;
  max-height: 75vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.full-width-app .card, .full-width-app .floating-menu-container .floating-menu, .floating-menu-container .full-width-app .floating-menu,
.cms-layout .card,
.cms-layout .floating-menu-container .floating-menu,
.floating-menu-container .cms-layout .floating-menu {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  width: 50%;
  min-height: 50%;
  min-width: 300px;
  background-color: var(--light-background-color);
  border-color: transparent;
  margin: auto;
  border-radius: 0.8rem;
}
.full-width-app .card.card-gold, .full-width-app .floating-menu-container .floating-menu, .floating-menu-container .full-width-app .floating-menu,
.cms-layout .card.card-gold,
.cms-layout .floating-menu-container .floating-menu,
.floating-menu-container .cms-layout .floating-menu {
  box-shadow: 5px 4px 0px 2px var(--secondary-color);
}
@media (max-width: 1199.98px) {
  .full-width-app .card, .full-width-app .floating-menu-container .floating-menu, .floating-menu-container .full-width-app .floating-menu,
  .cms-layout .card,
  .cms-layout .floating-menu-container .floating-menu,
  .floating-menu-container .cms-layout .floating-menu {
    width: 60%;
  }
}
@media (max-width: 991.98px) {
  .full-width-app .card, .full-width-app .floating-menu-container .floating-menu, .floating-menu-container .full-width-app .floating-menu,
  .cms-layout .card,
  .cms-layout .floating-menu-container .floating-menu,
  .floating-menu-container .cms-layout .floating-menu {
    width: 70%;
  }
}
@media (max-width: 767.98px) {
  .full-width-app .card, .full-width-app .floating-menu-container .floating-menu, .floating-menu-container .full-width-app .floating-menu,
  .cms-layout .card,
  .cms-layout .floating-menu-container .floating-menu,
  .floating-menu-container .cms-layout .floating-menu {
    width: 95%;
  }
}
.full-width-app .card .card-content, .full-width-app .floating-menu-container .floating-menu .card-content, .floating-menu-container .full-width-app .floating-menu .card-content,
.cms-layout .card .card-content,
.cms-layout .floating-menu-container .floating-menu .card-content,
.floating-menu-container .cms-layout .floating-menu .card-content {
  max-height: 500px;
  overflow-y: scroll;
  padding: 20px;
}
.full-width-app .card.card-gold, .full-width-app .floating-menu-container .floating-menu, .floating-menu-container .full-width-app .floating-menu,
.cms-layout .card.card-gold,
.cms-layout .floating-menu-container .floating-menu,
.floating-menu-container .cms-layout .floating-menu {
  box-shadow: 5px 4px 0px 2px var(--secondary-color);
}
.full-width-app .card.card-olive, .full-width-app .floating-menu-container .card-olive.floating-menu, .floating-menu-container .full-width-app .card-olive.floating-menu,
.cms-layout .card.card-olive,
.cms-layout .floating-menu-container .card-olive.floating-menu,
.floating-menu-container .cms-layout .card-olive.floating-menu {
  box-shadow: 5px 4px 0px 2px var(--accent-color-11);
}
.full-width-app .card.card-orange, .full-width-app .floating-menu-container .card-orange.floating-menu, .floating-menu-container .full-width-app .card-orange.floating-menu,
.cms-layout .card.card-orange,
.cms-layout .floating-menu-container .card-orange.floating-menu,
.floating-menu-container .cms-layout .card-orange.floating-menu {
  box-shadow: 5px 4px 0px 2px var(--accent-color-1);
}
.full-width-app .mini-card,
.cms-layout .mini-card {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  padding: 20px;
  background-color: var(--light-background-color);
  border-color: transparent;
  margin: auto;
  border-radius: 0.8rem;
}
.full-width-app .mini-card.card-gold, .full-width-app .floating-menu-container .mini-card.floating-menu, .floating-menu-container .full-width-app .mini-card.floating-menu,
.cms-layout .mini-card.card-gold,
.cms-layout .floating-menu-container .mini-card.floating-menu,
.floating-menu-container .cms-layout .mini-card.floating-menu {
  box-shadow: 5px 4px 0px 2px var(--secondary-color);
}
.full-width-app .mini-card.card-olive,
.cms-layout .mini-card.card-olive {
  box-shadow: 5px 4px 0px 2px var(--accent-color-11);
}
.full-width-app .mini-card.card-orange,
.cms-layout .mini-card.card-orange {
  box-shadow: 5px 4px 0px 2px var(--accent-color-1);
}
.full-width-app .break,
.cms-layout .break {
  flex-basis: 100%;
  height: 0;
}
.full-width-app .tile,
.cms-layout .tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--light-background-color);
  background-clip: border-box;
  border-radius: 1.2rem;
  align-items: inherit;
}
.full-width-app .tile .card-header,
.cms-layout .tile .card-header {
  font-family: henderson-slab-basic, serif;
  color: var(--dark-text-color);
  border-radius: 1.2rem 1.2rem 0 0;
}
.bg-primary .full-width-app .tile .card-header,
.bg-primary .cms-layout .tile .card-header {
  color: var(--light-background-color) !important;
}
.full-width-app .tile .card-body,
.cms-layout .tile .card-body {
  padding: min(2vh, 1.25rem);
}
.full-width-app .tile .card-body .card-text label,
.cms-layout .tile .card-body .card-text label {
  letter-spacing: 0.05rem;
  line-height: 1.2;
}
.full-width-app .tile .card-img-top, .full-width-app .tile .tile-header-img,
.cms-layout .tile .card-img-top,
.cms-layout .tile .tile-header-img {
  width: 100%;
  border-top-left-radius: calc(1.2rem - 1px);
  border-top-right-radius: calc(1.2rem - 1px);
}
.full-width-app .tile .tile-header,
.cms-layout .tile .tile-header {
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.full-width-app .tile .tile-header-img,
.cms-layout .tile .tile-header-img {
  z-index: -1;
  filter: blur(3px);
  filter: grayscale(1);
  filter: saturate(0.2);
  filter: hue-rotate(5deg);
}
.full-width-app .tile.tile-gold,
.cms-layout .tile.tile-gold {
  box-shadow: 5px 4px 0px 2px var(--tile-accent-box-shadow-color);
}
.full-width-app .tile.tile-shadowed,
.cms-layout .tile.tile-shadowed {
  box-shadow: 0 0 20px 0px rgba(227, 206, 151, 0.4);
  background-color: var(--light-background-color-lighter);
}
.full-width-app .tile.tile-dark-shadowed,
.cms-layout .tile.tile-dark-shadowed {
  background-color: var(--neutral-500);
  box-shadow: 5px 4px 0px 2px #282725;
  transition: all 0.3s ease-out;
}
.full-width-app .tile.tile-dark-shadowed:hover,
.cms-layout .tile.tile-dark-shadowed:hover {
  box-shadow: 0px 0px 0px 0px;
  transform: translate(5px, 4px);
}
.full-width-app .tile.hover-tile,
.cms-layout .tile.hover-tile {
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease-out;
}
.full-width-app .tile.hover-tile:hover,
.cms-layout .tile.hover-tile:hover {
  transform: translateY(-5px) scale(1.005) translateZ(0);
  box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11), 0 24px 46px rgba(0, 0, 0, 0.08);
  text-decoration: none;
}
.full-width-app .tile.hover-tile a:hover,
.cms-layout .tile.hover-tile a:hover {
  text-decoration: none;
}
.full-width-app .tile.dashed-line,
.cms-layout .tile.dashed-line {
  margin: 1.5rem;
  padding: 1rem;
  border-style: dashed;
  border-width: 0.2rem;
  border-color: var(--light-background-color);
  background-color: inherit;
  flex-grow: 1;
}

.full-width-app .tile-grid [class^=col]:nth-child(6n-5) .tile, .cms-layout .tile-grid [class^=col]:nth-child(6n-5) .tile {
  background-color: var(--accent-color-6-dark);
}
.full-width-app .tile-grid [class^=col]:nth-child(6n-4) .tile, .cms-layout .tile-grid [class^=col]:nth-child(6n-4) .tile {
  background-color: var(--accent-color-10);
}
.full-width-app .tile-grid [class^=col]:nth-child(6n-3) .tile, .cms-layout .tile-grid [class^=col]:nth-child(6n-3) .tile {
  background-color: var(--accent-color-1);
}
.full-width-app .tile-grid [class^=col]:nth-child(6n-2) .tile, .cms-layout .tile-grid [class^=col]:nth-child(6n-2) .tile {
  background-color: var(--primary-color);
}
.full-width-app .tile-grid [class^=col]:nth-child(6n-1) .tile, .cms-layout .tile-grid [class^=col]:nth-child(6n-1) .tile {
  background-color: var(--accent-color-2);
}
.full-width-app .tile-grid [class^=col]:nth-child(6n-0) .tile, .cms-layout .tile-grid [class^=col]:nth-child(6n-0) .tile {
  background-color: var(--secondary-color);
}
.full-width-app .catalog-grid, .cms-layout .catalog-grid {
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 1vw;
}
.full-width-app .catalog-grid-square, .cms-layout .catalog-grid-square {
  padding: 1vw;
  /*@include media-breakpoint-up ("xl") {
      flex: 0 0 25%;
      max-width: 25%;
  }

  @include media-breakpoint-between ("xl", "lg") {
      flex: 0 0 25%;
      max-width: 25%;
  }

  @include media-breakpoint-only ("lg") {
      flex: 0 0 33.33333%;
      max-width: 33.33333%;
  }

  @include media-breakpoint-only ("md") {
      flex: 0 0 50%;
      max-width: 50%;



  @include media-breakpoint-only ("sm") {
      flex: 0 0 100%;
      max-width: 100%;
  }

  @include media-breakpoint-down ("sm") {
      flex: 0 0 100%;
      max-width: 100%;
      }
  */
}
.full-width-app .tile .themed, .cms-layout .tile .themed {
  height: 100% !important;
  background-color: var(--secondary-color); /*add the theme bg color*/
}
.full-width-app .tile .themed .card-body, .cms-layout .tile .themed .card-body {
  display: flex;
  flex-direction: column;
  margin-top: 2vh;
  align-items: start;
}
.full-width-app .tile .themed .card-text, .cms-layout .tile .themed .card-text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  flex-grow: 1;
}
.full-width-app .tile .themed .card-text p, .cms-layout .tile .themed .card-text p {
  color: inherit; /*add the theme text color*/
}
.full-width-app .tile .themed .card-text h6, .cms-layout .tile .themed .card-text h6 {
  color: inherit; /*add the theme text color*/
}

.circle-stamp {
  background-image: url("/images/global/avatars/avatar-circle-stamp.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  background-color: var(--accent-color-1-dark);
  border-radius: 50%;
  height: 140px;
  width: 140px;
  margin: 10px;
  display: flex;
  text-align: center !important;
  align-content: center !important;
  justify-content: center !important;
  flex-direction: column !important;
}
@media (max-width: 1499.98px) {
  .circle-stamp {
    width: 10vw;
    height: 10vw;
  }
}

.circle-stamp-inner {
  font-family: henderson-slab-basic, serif !important;
  color: var(--white-color);
  font-size: 150%;
  line-height: 1.1;
  padding: 2rem;
  display: flex;
  justify-content: center;
}
.circle-stamp-inner img {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  align-self: center;
}

/*Just a basic background box*/
.callout-box {
  margin: auto;
  max-width: 700px;
  background-color: var(--white-color);
  border-radius: 0.8rem;
  padding: 10px 50px;
}

/*Jumbotron*/
.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: var(--core-color);
  border-radius: 1.8rem;
}
.jumbotron h1,
.jumbotron h2,
.jumbotron h3,
.jumbotron h4,
.jumbotron h5,
.jumbotron p,
.jumbotron ul,
.jumbotron ol,
.jumbotron li {
  color: var(light-text-color);
}
.jumbotron hr {
  border: none;
}

/*Team / People Showcase Layout using tiles (replacement for boostrap cards)*/
.team-tile {
  margin: 1vw;
  flex: 1;
  max-width: 20vw;
}
.team-tile .card-title-ribbon {
  background-image: url("/images/levels/modules/module-sequence-ribbon-orange.svg");
  background-repeat: no-repeat;
  background-size: contain;
  padding: 3.4vh 1vh 1vh 1vh;
}
.team-tile .card-title,
.team-tile h5.card-title {
  text-align: center;
  font-family: fenway-park-jf, sans-serif;
  color: var(--light-text-color);
  margin-bottom: 0;
}
.team-tile .card-text {
  text-align: center;
}
.team-tile .card-text p {
  color: var(--muted-text-color);
  font-family: henderson-slab-basic, serif;
  font-size: 1vw;
}
.team-tile .card-img {
  max-height: 30vh;
  overflow: hidden;
  display: flex;
}
.team-tile .card-img img {
  min-height: 0;
  min-width: 0;
}

/*Cool container that looks like a postage stamp*/
.stamp {
  width: 140px;
  height: 140px;
  display: inline-block;
  padding: 10px;
  background: var(--white-color);
  position: relative;
  -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.2));
  background: radial-gradient(transparent 0px, transparent 4px, var(--white-color) 4px, var(--white-color));
  background-size: 20px 20px;
  background-position: -10px -10px;
}
@media (max-width: 1199.98px) {
  .stamp {
    height: 120px;
    width: 120px;
  }
}
.stamp:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  right: 5px;
  bottom: 5px;
  z-index: -1;
}
.stamp .stamp-bg {
  background-color: var(--light-background-color-darker);
  display: flex;
  text-align: center;
  height: 120px;
  width: 120px;
  padding: 12px;
}
@media (max-width: 1199.98px) {
  .stamp .stamp-bg {
    height: 100px;
    width: 100px;
    padding: 0px;
  }
  .stamp .stamp-bg h2, .stamp .stamp-bg h3, .stamp .stamp-bg h4, .stamp .stamp-bg h5, .stamp .stamp-bg h6, .stamp .stamp-bg p {
    font-size: 70% !important;
  }
}
.stamp.stamp-md {
  height: 200px;
  width: 200px;
}
@media screen and (max-height: 800px) {
  .stamp.stamp-md {
    height: 160px;
    width: 160px;
  }
}
.stamp.stamp-md .stamp-bg {
  height: 180px;
  width: 180px;
}
@media screen and (max-height: 800px) {
  .stamp.stamp-md .stamp-bg {
    height: 140px;
    width: 140px;
  }
}
.stamp.stamp-rectangle {
  height: 160px;
  width: 420px;
}
@media screen and (max-height: 800px) {
  .stamp.stamp-rectangle {
    height: 100px;
    width: 320px;
  }
}
.stamp.stamp-rectangle .stamp-bg {
  height: 140px;
  width: 400px;
}
@media screen and (max-height: 800px) {
  .stamp.stamp-rectangle .stamp-bg {
    height: 80px;
    width: 300px;
  }
}

/*A cool container that looks like paper stacked*/
.paper-stack-container {
  background-color: transparent;
  background-image: url(/images/global/shapes/paper-stack.svg);
  background-position: 50% 50%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-clip: border-box;
  -o-object-fit: fill;
     object-fit: fill;
}
.paper-stack-container.book {
  background-image: url(/images/global/shapes/paper-stack-book.svg);
}
.paper-stack-container.book .book-nav .nav-left, .paper-stack-container.book .book-nav .nav-right {
  display: flex;
  flex-direction: row;
}
@media screen and (max-height: 768px) {
  .paper-stack-container.book .book-nav .nav-left, .paper-stack-container.book .book-nav .nav-right {
    width: 20%;
  }
}

/*Borders*/
.border {
  border: 2px solid var(--neutral-400) !important;
}
.border.dashed {
  border: 3px dashed var(--neutral-400) !important;
}

.rounded-pill {
  border-radius: 50rem !important;
}

/*Borders*/
.border-primary {
  border: 2px solid var(--primary-color) !important;
}

.border-secondary {
  border: 2px solid var(--secondary-color) !important;
}

.border-success {
  border: 2px solid var(--success-color) !important;
}

.border-info {
  border: 2px solid var(--info-color) !important;
}

.border-warning {
  border: 2px solid var(--warning-color) !important;
}

.border-danger {
  border: 2px solid var(--danger-color) !important;
}

.border-mild-danger {
  border: 2px solid var(--mild-danger-color) !important;
}

.border-light {
  border: 2px solid var(--white-color) !important;
}

.border-dark {
  border: 2px solid var(--dark-color) !important;
}

.border-olive {
  border: 2px solid var(--accent-color-10) !important;
}

.border-pink {
  border: 2px solid var(--accent-color-7) !important;
}

.border-light-pink {
  border: 2px solid var(--accent-color-7-light) !important;
}

.border-orange {
  border: 2px solid var(--accent-color-1) !important;
}

.border-beige {
  border: 2px solid var(--neutral-300) !important;
}

.border-light {
  border: 2px dashed var(neutral-300) !important;
}

.dotted-line, .full-width-app hr,
.cms-preview hr,
.login-form hr, .cms-layout hr, .jumbotron hr {
  height: 4px;
  width: 100%;
  background-image: linear-gradient(to right, var(--header-row-color) 33%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 12px 1px;
  background-repeat: repeat-x;
  margin: 0.4rem 0rem;
}
@media (min-width: 1200px) {
  .dotted-line, .full-width-app hr,
  .cms-preview hr,
  .login-form hr, .cms-layout hr, .jumbotron hr {
    margin: 1rem 0rem;
  }
}
@media screen and (max-height: 768px) {
  .dotted-line, .full-width-app hr,
  .cms-preview hr,
  .login-form hr, .cms-layout hr, .jumbotron hr {
    margin: 0rem;
  }
}

/*Rounded Border Utility - Override bootstrap radius*/
.rounded {
  border-radius: 1.2rem !important;
}

/*Full circle utility for single character text or icon*/
.circle {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  line-height: 1.4;
}

/*ADDITIONAL WIDTH CLASSES TO SUPPLEMENT DEFAULT BOOTSTRAP CLASSES/*Width utilities to add to the Bootstrap Classes */
.w-30 {
  width: 30% !important;
}
@media (max-width: 1199.98px) {
  .w-30 {
    width: 60% !important;
  }
}
@media screen and (max-height: 768px) {
  .w-30 {
    width: 60% !important;
  }
}

.w-40 {
  width: 40% !important;
}
@media (max-width: 1199.98px) {
  .w-40 {
    width: 60% !important;
  }
}

.w-60 {
  width: 60% !important;
}
@media (max-width: 1199.98px) {
  .w-60 {
    width: 80% !important;
  }
}
@media screen and (max-height: 800px) {
  .w-60 {
    width: 80% !important;
  }
}

.w-70 {
  width: 70% !important;
}
@media (max-width: 1199.98px) {
  .w-70 {
    width: 90% !important;
  }
}
@media screen and (max-height: 800px) {
  .w-70 {
    width: 90% !important;
  }
}

@media screen and (max-height: 800px) {
  .w-75 {
    width: 100% !important;
  }
}

.w-80 {
  width: 80% !important;
}

/*Helper Classes for Positioning */
/*Absolute positioning utilities - Parent container must be positioned relatively*/
.position-top-left {
  position: fixed;
  top: 0;
  margin-top: 4vh;
  left: 100px;
  transform: translateY(-50%);
}

.position-top-right {
  position: fixed;
  top: 0%;
  right: 100px;
  transform: translateY(50%);
  margin-top: 4vh;
}

.position-top-center {
  position: absolute;
  top: 0%;
  right: 42%;
  margin-top: 4vh;
  z-index: 1;
}

.top-position {
  position: absolute;
  top: 10vh;
  z-index: 3;
}
@media screen and (max-height: 768px) {
  .top-position {
    top: 5vh;
  }
}

.position-bottom-left {
  position: fixed;
  bottom: 0;
  margin-top: 4vh;
  left: 100px;
  transform: translateY(-50%);
}

.position-bottom-right {
  position: fixed;
  bottom: 0%;
  right: 100px;
  transform: translateY(50%);
  margin-top: 4vh;
}

.position-bottom-center {
  position: absolute;
  bottom: 0%;
  right: 42%;
  margin-top: 4vh;
  z-index: 1;
}

.bottom-position {
  position: absolute;
  bottom: 10vh;
  z-index: 3;
}
@media screen and (max-height: 768px) {
  .bottom-position {
    bottom: 5vh;
  }
}

.position-fixed.center-fixed {
  left: 50%;
  transform: translate(-50%, 0);
}

.full-screen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background-color: var(--core-color);
}

/*Margins*/
.mt-1 {
  margin-top: min(1vh, 10px) !important;
}

.m-1 {
  margin: min(1vh, 10px) !important;
}

@media (max-width: 767.98px) {
  .mt-sm-1 {
    margin-top: min(1vh, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-sm-1 {
    margin-top: min(1vh, 10px) !important;
  }
}

@media (min-width: 768px) {
  .mt-md-1 {
    margin-top: min(1vh, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-md-1 {
    margin-top: min(1vh, 10px) !important;
  }
}

@media (min-width: 992px) {
  .mt-lg-1 {
    margin-top: min(1vh, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-lg-1 {
    margin-top: min(1vh, 10px) !important;
  }
}

@media (min-width: 1200px) {
  .mt-xl-1 {
    margin-top: min(1vh, 10px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mt-xl-1 {
    margin-top: min(1vh, 10px) !important;
  }
}

@media (min-width: 1500px) {
  .mt-xxl-1 {
    margin-top: min(1vh, 10px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mt-xxl-1 {
    margin-top: min(1vh, 10px) !important;
  }
}

.mt-2 {
  margin-top: min(2vh, 20px) !important;
}

.m-2 {
  margin: min(2vh, 20px) !important;
}

@media (max-width: 767.98px) {
  .mt-sm-2 {
    margin-top: min(2vh, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-sm-2 {
    margin-top: min(2vh, 20px) !important;
  }
}

@media (min-width: 768px) {
  .mt-md-2 {
    margin-top: min(2vh, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-md-2 {
    margin-top: min(2vh, 20px) !important;
  }
}

@media (min-width: 992px) {
  .mt-lg-2 {
    margin-top: min(2vh, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-lg-2 {
    margin-top: min(2vh, 20px) !important;
  }
}

@media (min-width: 1200px) {
  .mt-xl-2 {
    margin-top: min(2vh, 20px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mt-xl-2 {
    margin-top: min(2vh, 20px) !important;
  }
}

@media (min-width: 1500px) {
  .mt-xxl-2 {
    margin-top: min(2vh, 20px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mt-xxl-2 {
    margin-top: min(2vh, 20px) !important;
  }
}

.mt-3 {
  margin-top: min(3vh, 30px) !important;
}

.m-3 {
  margin: min(3vh, 30px) !important;
}

@media (max-width: 767.98px) {
  .mt-sm-3 {
    margin-top: min(3vh, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-sm-3 {
    margin-top: min(3vh, 30px) !important;
  }
}

@media (min-width: 768px) {
  .mt-md-3 {
    margin-top: min(3vh, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-md-3 {
    margin-top: min(3vh, 30px) !important;
  }
}

@media (min-width: 992px) {
  .mt-lg-3 {
    margin-top: min(3vh, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-lg-3 {
    margin-top: min(3vh, 30px) !important;
  }
}

@media (min-width: 1200px) {
  .mt-xl-3 {
    margin-top: min(3vh, 30px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mt-xl-3 {
    margin-top: min(3vh, 30px) !important;
  }
}

@media (min-width: 1500px) {
  .mt-xxl-3 {
    margin-top: min(3vh, 30px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mt-xxl-3 {
    margin-top: min(3vh, 30px) !important;
  }
}

.mt-4 {
  margin-top: min(4vh, 40px) !important;
}

.m-4 {
  margin: min(4vh, 40px) !important;
}

@media (max-width: 767.98px) {
  .mt-sm-4 {
    margin-top: min(4vh, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-sm-4 {
    margin-top: min(4vh, 40px) !important;
  }
}

@media (min-width: 768px) {
  .mt-md-4 {
    margin-top: min(4vh, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-md-4 {
    margin-top: min(4vh, 40px) !important;
  }
}

@media (min-width: 992px) {
  .mt-lg-4 {
    margin-top: min(4vh, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-lg-4 {
    margin-top: min(4vh, 40px) !important;
  }
}

@media (min-width: 1200px) {
  .mt-xl-4 {
    margin-top: min(4vh, 40px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mt-xl-4 {
    margin-top: min(4vh, 40px) !important;
  }
}

@media (min-width: 1500px) {
  .mt-xxl-4 {
    margin-top: min(4vh, 40px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mt-xxl-4 {
    margin-top: min(4vh, 40px) !important;
  }
}

.mt-5 {
  margin-top: min(5vh, 50px) !important;
}

.m-5 {
  margin: min(5vh, 50px) !important;
}

@media (max-width: 767.98px) {
  .mt-sm-5 {
    margin-top: min(5vh, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-sm-5 {
    margin-top: min(5vh, 50px) !important;
  }
}

@media (min-width: 768px) {
  .mt-md-5 {
    margin-top: min(5vh, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-md-5 {
    margin-top: min(5vh, 50px) !important;
  }
}

@media (min-width: 992px) {
  .mt-lg-5 {
    margin-top: min(5vh, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-lg-5 {
    margin-top: min(5vh, 50px) !important;
  }
}

@media (min-width: 1200px) {
  .mt-xl-5 {
    margin-top: min(5vh, 50px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mt-xl-5 {
    margin-top: min(5vh, 50px) !important;
  }
}

@media (min-width: 1500px) {
  .mt-xxl-5 {
    margin-top: min(5vh, 50px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mt-xxl-5 {
    margin-top: min(5vh, 50px) !important;
  }
}

.mt-6 {
  margin-top: min(6vh, 60px) !important;
}

.m-6 {
  margin: min(6vh, 60px) !important;
}

@media (max-width: 767.98px) {
  .mt-sm-6 {
    margin-top: min(6vh, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-sm-6 {
    margin-top: min(6vh, 60px) !important;
  }
}

@media (min-width: 768px) {
  .mt-md-6 {
    margin-top: min(6vh, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-md-6 {
    margin-top: min(6vh, 60px) !important;
  }
}

@media (min-width: 992px) {
  .mt-lg-6 {
    margin-top: min(6vh, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-lg-6 {
    margin-top: min(6vh, 60px) !important;
  }
}

@media (min-width: 1200px) {
  .mt-xl-6 {
    margin-top: min(6vh, 60px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mt-xl-6 {
    margin-top: min(6vh, 60px) !important;
  }
}

@media (min-width: 1500px) {
  .mt-xxl-6 {
    margin-top: min(6vh, 60px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mt-xxl-6 {
    margin-top: min(6vh, 60px) !important;
  }
}

.mt-7 {
  margin-top: min(7vh, 70px) !important;
}

.m-7 {
  margin: min(7vh, 70px) !important;
}

@media (max-width: 767.98px) {
  .mt-sm-7 {
    margin-top: min(7vh, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-sm-7 {
    margin-top: min(7vh, 70px) !important;
  }
}

@media (min-width: 768px) {
  .mt-md-7 {
    margin-top: min(7vh, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-md-7 {
    margin-top: min(7vh, 70px) !important;
  }
}

@media (min-width: 992px) {
  .mt-lg-7 {
    margin-top: min(7vh, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-lg-7 {
    margin-top: min(7vh, 70px) !important;
  }
}

@media (min-width: 1200px) {
  .mt-xl-7 {
    margin-top: min(7vh, 70px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mt-xl-7 {
    margin-top: min(7vh, 70px) !important;
  }
}

@media (min-width: 1500px) {
  .mt-xxl-7 {
    margin-top: min(7vh, 70px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mt-xxl-7 {
    margin-top: min(7vh, 70px) !important;
  }
}

.mt-8 {
  margin-top: min(8vh, 80px) !important;
}

.m-8 {
  margin: min(8vh, 80px) !important;
}

@media (max-width: 767.98px) {
  .mt-sm-8 {
    margin-top: min(8vh, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-sm-8 {
    margin-top: min(8vh, 80px) !important;
  }
}

@media (min-width: 768px) {
  .mt-md-8 {
    margin-top: min(8vh, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-md-8 {
    margin-top: min(8vh, 80px) !important;
  }
}

@media (min-width: 992px) {
  .mt-lg-8 {
    margin-top: min(8vh, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-lg-8 {
    margin-top: min(8vh, 80px) !important;
  }
}

@media (min-width: 1200px) {
  .mt-xl-8 {
    margin-top: min(8vh, 80px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mt-xl-8 {
    margin-top: min(8vh, 80px) !important;
  }
}

@media (min-width: 1500px) {
  .mt-xxl-8 {
    margin-top: min(8vh, 80px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mt-xxl-8 {
    margin-top: min(8vh, 80px) !important;
  }
}

.mt-9 {
  margin-top: min(9vh, 90px) !important;
}

.m-9 {
  margin: min(9vh, 90px) !important;
}

@media (max-width: 767.98px) {
  .mt-sm-9 {
    margin-top: min(9vh, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-sm-9 {
    margin-top: min(9vh, 90px) !important;
  }
}

@media (min-width: 768px) {
  .mt-md-9 {
    margin-top: min(9vh, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-md-9 {
    margin-top: min(9vh, 90px) !important;
  }
}

@media (min-width: 992px) {
  .mt-lg-9 {
    margin-top: min(9vh, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-lg-9 {
    margin-top: min(9vh, 90px) !important;
  }
}

@media (min-width: 1200px) {
  .mt-xl-9 {
    margin-top: min(9vh, 90px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mt-xl-9 {
    margin-top: min(9vh, 90px) !important;
  }
}

@media (min-width: 1500px) {
  .mt-xxl-9 {
    margin-top: min(9vh, 90px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mt-xxl-9 {
    margin-top: min(9vh, 90px) !important;
  }
}

.mt-10 {
  margin-top: min(10vh, 100px) !important;
}

.m-10 {
  margin: min(10vh, 100px) !important;
}

@media (max-width: 767.98px) {
  .mt-sm-10 {
    margin-top: min(10vh, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-sm-10 {
    margin-top: min(10vh, 100px) !important;
  }
}

@media (min-width: 768px) {
  .mt-md-10 {
    margin-top: min(10vh, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-md-10 {
    margin-top: min(10vh, 100px) !important;
  }
}

@media (min-width: 992px) {
  .mt-lg-10 {
    margin-top: min(10vh, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mt-lg-10 {
    margin-top: min(10vh, 100px) !important;
  }
}

@media (min-width: 1200px) {
  .mt-xl-10 {
    margin-top: min(10vh, 100px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mt-xl-10 {
    margin-top: min(10vh, 100px) !important;
  }
}

@media (min-width: 1500px) {
  .mt-xxl-10 {
    margin-top: min(10vh, 100px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mt-xxl-10 {
    margin-top: min(10vh, 100px) !important;
  }
}

.mb-1 {
  margin-bottom: min(1vh, 10px) !important;
}

.m-1 {
  margin: min(1vh, 10px) !important;
}

@media (max-width: 767.98px) {
  .mb-sm-1 {
    margin-bottom: min(1vh, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-sm-1 {
    margin-bottom: min(1vh, 10px) !important;
  }
}

@media (min-width: 768px) {
  .mb-md-1 {
    margin-bottom: min(1vh, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-md-1 {
    margin-bottom: min(1vh, 10px) !important;
  }
}

@media (min-width: 992px) {
  .mb-lg-1 {
    margin-bottom: min(1vh, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-lg-1 {
    margin-bottom: min(1vh, 10px) !important;
  }
}

@media (min-width: 1200px) {
  .mb-xl-1 {
    margin-bottom: min(1vh, 10px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mb-xl-1 {
    margin-bottom: min(1vh, 10px) !important;
  }
}

@media (min-width: 1500px) {
  .mb-xxl-1 {
    margin-bottom: min(1vh, 10px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mb-xxl-1 {
    margin-bottom: min(1vh, 10px) !important;
  }
}

.mb-2 {
  margin-bottom: min(2vh, 20px) !important;
}

.m-2 {
  margin: min(2vh, 20px) !important;
}

@media (max-width: 767.98px) {
  .mb-sm-2 {
    margin-bottom: min(2vh, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-sm-2 {
    margin-bottom: min(2vh, 20px) !important;
  }
}

@media (min-width: 768px) {
  .mb-md-2 {
    margin-bottom: min(2vh, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-md-2 {
    margin-bottom: min(2vh, 20px) !important;
  }
}

@media (min-width: 992px) {
  .mb-lg-2 {
    margin-bottom: min(2vh, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-lg-2 {
    margin-bottom: min(2vh, 20px) !important;
  }
}

@media (min-width: 1200px) {
  .mb-xl-2 {
    margin-bottom: min(2vh, 20px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mb-xl-2 {
    margin-bottom: min(2vh, 20px) !important;
  }
}

@media (min-width: 1500px) {
  .mb-xxl-2 {
    margin-bottom: min(2vh, 20px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mb-xxl-2 {
    margin-bottom: min(2vh, 20px) !important;
  }
}

.mb-3 {
  margin-bottom: min(3vh, 30px) !important;
}

.m-3 {
  margin: min(3vh, 30px) !important;
}

@media (max-width: 767.98px) {
  .mb-sm-3 {
    margin-bottom: min(3vh, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-sm-3 {
    margin-bottom: min(3vh, 30px) !important;
  }
}

@media (min-width: 768px) {
  .mb-md-3 {
    margin-bottom: min(3vh, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-md-3 {
    margin-bottom: min(3vh, 30px) !important;
  }
}

@media (min-width: 992px) {
  .mb-lg-3 {
    margin-bottom: min(3vh, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-lg-3 {
    margin-bottom: min(3vh, 30px) !important;
  }
}

@media (min-width: 1200px) {
  .mb-xl-3 {
    margin-bottom: min(3vh, 30px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mb-xl-3 {
    margin-bottom: min(3vh, 30px) !important;
  }
}

@media (min-width: 1500px) {
  .mb-xxl-3 {
    margin-bottom: min(3vh, 30px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mb-xxl-3 {
    margin-bottom: min(3vh, 30px) !important;
  }
}

.mb-4 {
  margin-bottom: min(4vh, 40px) !important;
}

.m-4 {
  margin: min(4vh, 40px) !important;
}

@media (max-width: 767.98px) {
  .mb-sm-4 {
    margin-bottom: min(4vh, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-sm-4 {
    margin-bottom: min(4vh, 40px) !important;
  }
}

@media (min-width: 768px) {
  .mb-md-4 {
    margin-bottom: min(4vh, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-md-4 {
    margin-bottom: min(4vh, 40px) !important;
  }
}

@media (min-width: 992px) {
  .mb-lg-4 {
    margin-bottom: min(4vh, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-lg-4 {
    margin-bottom: min(4vh, 40px) !important;
  }
}

@media (min-width: 1200px) {
  .mb-xl-4 {
    margin-bottom: min(4vh, 40px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mb-xl-4 {
    margin-bottom: min(4vh, 40px) !important;
  }
}

@media (min-width: 1500px) {
  .mb-xxl-4 {
    margin-bottom: min(4vh, 40px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mb-xxl-4 {
    margin-bottom: min(4vh, 40px) !important;
  }
}

.mb-5 {
  margin-bottom: min(5vh, 50px) !important;
}

.m-5 {
  margin: min(5vh, 50px) !important;
}

@media (max-width: 767.98px) {
  .mb-sm-5 {
    margin-bottom: min(5vh, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-sm-5 {
    margin-bottom: min(5vh, 50px) !important;
  }
}

@media (min-width: 768px) {
  .mb-md-5 {
    margin-bottom: min(5vh, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-md-5 {
    margin-bottom: min(5vh, 50px) !important;
  }
}

@media (min-width: 992px) {
  .mb-lg-5 {
    margin-bottom: min(5vh, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-lg-5 {
    margin-bottom: min(5vh, 50px) !important;
  }
}

@media (min-width: 1200px) {
  .mb-xl-5 {
    margin-bottom: min(5vh, 50px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mb-xl-5 {
    margin-bottom: min(5vh, 50px) !important;
  }
}

@media (min-width: 1500px) {
  .mb-xxl-5 {
    margin-bottom: min(5vh, 50px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mb-xxl-5 {
    margin-bottom: min(5vh, 50px) !important;
  }
}

.mb-6 {
  margin-bottom: min(6vh, 60px) !important;
}

.m-6 {
  margin: min(6vh, 60px) !important;
}

@media (max-width: 767.98px) {
  .mb-sm-6 {
    margin-bottom: min(6vh, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-sm-6 {
    margin-bottom: min(6vh, 60px) !important;
  }
}

@media (min-width: 768px) {
  .mb-md-6 {
    margin-bottom: min(6vh, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-md-6 {
    margin-bottom: min(6vh, 60px) !important;
  }
}

@media (min-width: 992px) {
  .mb-lg-6 {
    margin-bottom: min(6vh, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-lg-6 {
    margin-bottom: min(6vh, 60px) !important;
  }
}

@media (min-width: 1200px) {
  .mb-xl-6 {
    margin-bottom: min(6vh, 60px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mb-xl-6 {
    margin-bottom: min(6vh, 60px) !important;
  }
}

@media (min-width: 1500px) {
  .mb-xxl-6 {
    margin-bottom: min(6vh, 60px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mb-xxl-6 {
    margin-bottom: min(6vh, 60px) !important;
  }
}

.mb-7 {
  margin-bottom: min(7vh, 70px) !important;
}

.m-7 {
  margin: min(7vh, 70px) !important;
}

@media (max-width: 767.98px) {
  .mb-sm-7 {
    margin-bottom: min(7vh, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-sm-7 {
    margin-bottom: min(7vh, 70px) !important;
  }
}

@media (min-width: 768px) {
  .mb-md-7 {
    margin-bottom: min(7vh, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-md-7 {
    margin-bottom: min(7vh, 70px) !important;
  }
}

@media (min-width: 992px) {
  .mb-lg-7 {
    margin-bottom: min(7vh, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-lg-7 {
    margin-bottom: min(7vh, 70px) !important;
  }
}

@media (min-width: 1200px) {
  .mb-xl-7 {
    margin-bottom: min(7vh, 70px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mb-xl-7 {
    margin-bottom: min(7vh, 70px) !important;
  }
}

@media (min-width: 1500px) {
  .mb-xxl-7 {
    margin-bottom: min(7vh, 70px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mb-xxl-7 {
    margin-bottom: min(7vh, 70px) !important;
  }
}

.mb-8 {
  margin-bottom: min(8vh, 80px) !important;
}

.m-8 {
  margin: min(8vh, 80px) !important;
}

@media (max-width: 767.98px) {
  .mb-sm-8 {
    margin-bottom: min(8vh, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-sm-8 {
    margin-bottom: min(8vh, 80px) !important;
  }
}

@media (min-width: 768px) {
  .mb-md-8 {
    margin-bottom: min(8vh, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-md-8 {
    margin-bottom: min(8vh, 80px) !important;
  }
}

@media (min-width: 992px) {
  .mb-lg-8 {
    margin-bottom: min(8vh, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-lg-8 {
    margin-bottom: min(8vh, 80px) !important;
  }
}

@media (min-width: 1200px) {
  .mb-xl-8 {
    margin-bottom: min(8vh, 80px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mb-xl-8 {
    margin-bottom: min(8vh, 80px) !important;
  }
}

@media (min-width: 1500px) {
  .mb-xxl-8 {
    margin-bottom: min(8vh, 80px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mb-xxl-8 {
    margin-bottom: min(8vh, 80px) !important;
  }
}

.mb-9 {
  margin-bottom: min(9vh, 90px) !important;
}

.m-9 {
  margin: min(9vh, 90px) !important;
}

@media (max-width: 767.98px) {
  .mb-sm-9 {
    margin-bottom: min(9vh, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-sm-9 {
    margin-bottom: min(9vh, 90px) !important;
  }
}

@media (min-width: 768px) {
  .mb-md-9 {
    margin-bottom: min(9vh, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-md-9 {
    margin-bottom: min(9vh, 90px) !important;
  }
}

@media (min-width: 992px) {
  .mb-lg-9 {
    margin-bottom: min(9vh, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-lg-9 {
    margin-bottom: min(9vh, 90px) !important;
  }
}

@media (min-width: 1200px) {
  .mb-xl-9 {
    margin-bottom: min(9vh, 90px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mb-xl-9 {
    margin-bottom: min(9vh, 90px) !important;
  }
}

@media (min-width: 1500px) {
  .mb-xxl-9 {
    margin-bottom: min(9vh, 90px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mb-xxl-9 {
    margin-bottom: min(9vh, 90px) !important;
  }
}

.mb-10 {
  margin-bottom: min(10vh, 100px) !important;
}

.m-10 {
  margin: min(10vh, 100px) !important;
}

@media (max-width: 767.98px) {
  .mb-sm-10 {
    margin-bottom: min(10vh, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-sm-10 {
    margin-bottom: min(10vh, 100px) !important;
  }
}

@media (min-width: 768px) {
  .mb-md-10 {
    margin-bottom: min(10vh, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-md-10 {
    margin-bottom: min(10vh, 100px) !important;
  }
}

@media (min-width: 992px) {
  .mb-lg-10 {
    margin-bottom: min(10vh, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mb-lg-10 {
    margin-bottom: min(10vh, 100px) !important;
  }
}

@media (min-width: 1200px) {
  .mb-xl-10 {
    margin-bottom: min(10vh, 100px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mb-xl-10 {
    margin-bottom: min(10vh, 100px) !important;
  }
}

@media (min-width: 1500px) {
  .mb-xxl-10 {
    margin-bottom: min(10vh, 100px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mb-xxl-10 {
    margin-bottom: min(10vh, 100px) !important;
  }
}

.mr-1 {
  margin-right: min(1vw, 10px) !important;
}

.m-1 {
  margin: min(1vw, 10px) !important;
}

@media (max-width: 767.98px) {
  .mr-sm-1 {
    margin-right: min(1vw, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-sm-1 {
    margin-right: min(1vw, 10px) !important;
  }
}

@media (min-width: 768px) {
  .mr-md-1 {
    margin-right: min(1vw, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-md-1 {
    margin-right: min(1vw, 10px) !important;
  }
}

@media (min-width: 992px) {
  .mr-lg-1 {
    margin-right: min(1vw, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-lg-1 {
    margin-right: min(1vw, 10px) !important;
  }
}

@media (min-width: 1200px) {
  .mr-xl-1 {
    margin-right: min(1vw, 10px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mr-xl-1 {
    margin-right: min(1vw, 10px) !important;
  }
}

@media (min-width: 1500px) {
  .mr-xxl-1 {
    margin-right: min(1vw, 10px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mr-xxl-1 {
    margin-right: min(1vw, 10px) !important;
  }
}

.mr-2 {
  margin-right: min(2vw, 20px) !important;
}

.m-2 {
  margin: min(2vw, 20px) !important;
}

@media (max-width: 767.98px) {
  .mr-sm-2 {
    margin-right: min(2vw, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-sm-2 {
    margin-right: min(2vw, 20px) !important;
  }
}

@media (min-width: 768px) {
  .mr-md-2 {
    margin-right: min(2vw, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-md-2 {
    margin-right: min(2vw, 20px) !important;
  }
}

@media (min-width: 992px) {
  .mr-lg-2 {
    margin-right: min(2vw, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-lg-2 {
    margin-right: min(2vw, 20px) !important;
  }
}

@media (min-width: 1200px) {
  .mr-xl-2 {
    margin-right: min(2vw, 20px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mr-xl-2 {
    margin-right: min(2vw, 20px) !important;
  }
}

@media (min-width: 1500px) {
  .mr-xxl-2 {
    margin-right: min(2vw, 20px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mr-xxl-2 {
    margin-right: min(2vw, 20px) !important;
  }
}

.mr-3 {
  margin-right: min(3vw, 30px) !important;
}

.m-3 {
  margin: min(3vw, 30px) !important;
}

@media (max-width: 767.98px) {
  .mr-sm-3 {
    margin-right: min(3vw, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-sm-3 {
    margin-right: min(3vw, 30px) !important;
  }
}

@media (min-width: 768px) {
  .mr-md-3 {
    margin-right: min(3vw, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-md-3 {
    margin-right: min(3vw, 30px) !important;
  }
}

@media (min-width: 992px) {
  .mr-lg-3 {
    margin-right: min(3vw, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-lg-3 {
    margin-right: min(3vw, 30px) !important;
  }
}

@media (min-width: 1200px) {
  .mr-xl-3 {
    margin-right: min(3vw, 30px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mr-xl-3 {
    margin-right: min(3vw, 30px) !important;
  }
}

@media (min-width: 1500px) {
  .mr-xxl-3 {
    margin-right: min(3vw, 30px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mr-xxl-3 {
    margin-right: min(3vw, 30px) !important;
  }
}

.mr-4 {
  margin-right: min(4vw, 40px) !important;
}

.m-4 {
  margin: min(4vw, 40px) !important;
}

@media (max-width: 767.98px) {
  .mr-sm-4 {
    margin-right: min(4vw, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-sm-4 {
    margin-right: min(4vw, 40px) !important;
  }
}

@media (min-width: 768px) {
  .mr-md-4 {
    margin-right: min(4vw, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-md-4 {
    margin-right: min(4vw, 40px) !important;
  }
}

@media (min-width: 992px) {
  .mr-lg-4 {
    margin-right: min(4vw, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-lg-4 {
    margin-right: min(4vw, 40px) !important;
  }
}

@media (min-width: 1200px) {
  .mr-xl-4 {
    margin-right: min(4vw, 40px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mr-xl-4 {
    margin-right: min(4vw, 40px) !important;
  }
}

@media (min-width: 1500px) {
  .mr-xxl-4 {
    margin-right: min(4vw, 40px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mr-xxl-4 {
    margin-right: min(4vw, 40px) !important;
  }
}

.mr-5 {
  margin-right: min(5vw, 50px) !important;
}

.m-5 {
  margin: min(5vw, 50px) !important;
}

@media (max-width: 767.98px) {
  .mr-sm-5 {
    margin-right: min(5vw, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-sm-5 {
    margin-right: min(5vw, 50px) !important;
  }
}

@media (min-width: 768px) {
  .mr-md-5 {
    margin-right: min(5vw, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-md-5 {
    margin-right: min(5vw, 50px) !important;
  }
}

@media (min-width: 992px) {
  .mr-lg-5 {
    margin-right: min(5vw, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-lg-5 {
    margin-right: min(5vw, 50px) !important;
  }
}

@media (min-width: 1200px) {
  .mr-xl-5 {
    margin-right: min(5vw, 50px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mr-xl-5 {
    margin-right: min(5vw, 50px) !important;
  }
}

@media (min-width: 1500px) {
  .mr-xxl-5 {
    margin-right: min(5vw, 50px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mr-xxl-5 {
    margin-right: min(5vw, 50px) !important;
  }
}

.mr-6 {
  margin-right: min(6vw, 60px) !important;
}

.m-6 {
  margin: min(6vw, 60px) !important;
}

@media (max-width: 767.98px) {
  .mr-sm-6 {
    margin-right: min(6vw, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-sm-6 {
    margin-right: min(6vw, 60px) !important;
  }
}

@media (min-width: 768px) {
  .mr-md-6 {
    margin-right: min(6vw, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-md-6 {
    margin-right: min(6vw, 60px) !important;
  }
}

@media (min-width: 992px) {
  .mr-lg-6 {
    margin-right: min(6vw, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-lg-6 {
    margin-right: min(6vw, 60px) !important;
  }
}

@media (min-width: 1200px) {
  .mr-xl-6 {
    margin-right: min(6vw, 60px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mr-xl-6 {
    margin-right: min(6vw, 60px) !important;
  }
}

@media (min-width: 1500px) {
  .mr-xxl-6 {
    margin-right: min(6vw, 60px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mr-xxl-6 {
    margin-right: min(6vw, 60px) !important;
  }
}

.mr-7 {
  margin-right: min(7vw, 70px) !important;
}

.m-7 {
  margin: min(7vw, 70px) !important;
}

@media (max-width: 767.98px) {
  .mr-sm-7 {
    margin-right: min(7vw, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-sm-7 {
    margin-right: min(7vw, 70px) !important;
  }
}

@media (min-width: 768px) {
  .mr-md-7 {
    margin-right: min(7vw, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-md-7 {
    margin-right: min(7vw, 70px) !important;
  }
}

@media (min-width: 992px) {
  .mr-lg-7 {
    margin-right: min(7vw, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-lg-7 {
    margin-right: min(7vw, 70px) !important;
  }
}

@media (min-width: 1200px) {
  .mr-xl-7 {
    margin-right: min(7vw, 70px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mr-xl-7 {
    margin-right: min(7vw, 70px) !important;
  }
}

@media (min-width: 1500px) {
  .mr-xxl-7 {
    margin-right: min(7vw, 70px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mr-xxl-7 {
    margin-right: min(7vw, 70px) !important;
  }
}

.mr-8 {
  margin-right: min(8vw, 80px) !important;
}

.m-8 {
  margin: min(8vw, 80px) !important;
}

@media (max-width: 767.98px) {
  .mr-sm-8 {
    margin-right: min(8vw, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-sm-8 {
    margin-right: min(8vw, 80px) !important;
  }
}

@media (min-width: 768px) {
  .mr-md-8 {
    margin-right: min(8vw, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-md-8 {
    margin-right: min(8vw, 80px) !important;
  }
}

@media (min-width: 992px) {
  .mr-lg-8 {
    margin-right: min(8vw, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-lg-8 {
    margin-right: min(8vw, 80px) !important;
  }
}

@media (min-width: 1200px) {
  .mr-xl-8 {
    margin-right: min(8vw, 80px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mr-xl-8 {
    margin-right: min(8vw, 80px) !important;
  }
}

@media (min-width: 1500px) {
  .mr-xxl-8 {
    margin-right: min(8vw, 80px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mr-xxl-8 {
    margin-right: min(8vw, 80px) !important;
  }
}

.mr-9 {
  margin-right: min(9vw, 90px) !important;
}

.m-9 {
  margin: min(9vw, 90px) !important;
}

@media (max-width: 767.98px) {
  .mr-sm-9 {
    margin-right: min(9vw, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-sm-9 {
    margin-right: min(9vw, 90px) !important;
  }
}

@media (min-width: 768px) {
  .mr-md-9 {
    margin-right: min(9vw, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-md-9 {
    margin-right: min(9vw, 90px) !important;
  }
}

@media (min-width: 992px) {
  .mr-lg-9 {
    margin-right: min(9vw, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-lg-9 {
    margin-right: min(9vw, 90px) !important;
  }
}

@media (min-width: 1200px) {
  .mr-xl-9 {
    margin-right: min(9vw, 90px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mr-xl-9 {
    margin-right: min(9vw, 90px) !important;
  }
}

@media (min-width: 1500px) {
  .mr-xxl-9 {
    margin-right: min(9vw, 90px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mr-xxl-9 {
    margin-right: min(9vw, 90px) !important;
  }
}

.mr-10 {
  margin-right: min(10vw, 100px) !important;
}

.m-10 {
  margin: min(10vw, 100px) !important;
}

@media (max-width: 767.98px) {
  .mr-sm-10 {
    margin-right: min(10vw, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-sm-10 {
    margin-right: min(10vw, 100px) !important;
  }
}

@media (min-width: 768px) {
  .mr-md-10 {
    margin-right: min(10vw, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-md-10 {
    margin-right: min(10vw, 100px) !important;
  }
}

@media (min-width: 992px) {
  .mr-lg-10 {
    margin-right: min(10vw, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .mr-lg-10 {
    margin-right: min(10vw, 100px) !important;
  }
}

@media (min-width: 1200px) {
  .mr-xl-10 {
    margin-right: min(10vw, 100px) !important;
  }
}
@media screen and (max-height: 900px) {
  .mr-xl-10 {
    margin-right: min(10vw, 100px) !important;
  }
}

@media (min-width: 1500px) {
  .mr-xxl-10 {
    margin-right: min(10vw, 100px) !important;
  }
}
@media screen and (min-height: 900px) {
  .mr-xxl-10 {
    margin-right: min(10vw, 100px) !important;
  }
}

.ml-1 {
  margin-left: min(1vw, 10px) !important;
}

.m-1 {
  margin: min(1vw, 10px) !important;
}

@media (max-width: 767.98px) {
  .ml-sm-1 {
    margin-left: min(1vw, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-sm-1 {
    margin-left: min(1vw, 10px) !important;
  }
}

@media (min-width: 768px) {
  .ml-md-1 {
    margin-left: min(1vw, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-md-1 {
    margin-left: min(1vw, 10px) !important;
  }
}

@media (min-width: 992px) {
  .ml-lg-1 {
    margin-left: min(1vw, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-lg-1 {
    margin-left: min(1vw, 10px) !important;
  }
}

@media (min-width: 1200px) {
  .ml-xl-1 {
    margin-left: min(1vw, 10px) !important;
  }
}
@media screen and (max-height: 900px) {
  .ml-xl-1 {
    margin-left: min(1vw, 10px) !important;
  }
}

@media (min-width: 1500px) {
  .ml-xxl-1 {
    margin-left: min(1vw, 10px) !important;
  }
}
@media screen and (min-height: 900px) {
  .ml-xxl-1 {
    margin-left: min(1vw, 10px) !important;
  }
}

.ml-2 {
  margin-left: min(2vw, 20px) !important;
}

.m-2 {
  margin: min(2vw, 20px) !important;
}

@media (max-width: 767.98px) {
  .ml-sm-2 {
    margin-left: min(2vw, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-sm-2 {
    margin-left: min(2vw, 20px) !important;
  }
}

@media (min-width: 768px) {
  .ml-md-2 {
    margin-left: min(2vw, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-md-2 {
    margin-left: min(2vw, 20px) !important;
  }
}

@media (min-width: 992px) {
  .ml-lg-2 {
    margin-left: min(2vw, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-lg-2 {
    margin-left: min(2vw, 20px) !important;
  }
}

@media (min-width: 1200px) {
  .ml-xl-2 {
    margin-left: min(2vw, 20px) !important;
  }
}
@media screen and (max-height: 900px) {
  .ml-xl-2 {
    margin-left: min(2vw, 20px) !important;
  }
}

@media (min-width: 1500px) {
  .ml-xxl-2 {
    margin-left: min(2vw, 20px) !important;
  }
}
@media screen and (min-height: 900px) {
  .ml-xxl-2 {
    margin-left: min(2vw, 20px) !important;
  }
}

.ml-3 {
  margin-left: min(3vw, 30px) !important;
}

.m-3 {
  margin: min(3vw, 30px) !important;
}

@media (max-width: 767.98px) {
  .ml-sm-3 {
    margin-left: min(3vw, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-sm-3 {
    margin-left: min(3vw, 30px) !important;
  }
}

@media (min-width: 768px) {
  .ml-md-3 {
    margin-left: min(3vw, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-md-3 {
    margin-left: min(3vw, 30px) !important;
  }
}

@media (min-width: 992px) {
  .ml-lg-3 {
    margin-left: min(3vw, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-lg-3 {
    margin-left: min(3vw, 30px) !important;
  }
}

@media (min-width: 1200px) {
  .ml-xl-3 {
    margin-left: min(3vw, 30px) !important;
  }
}
@media screen and (max-height: 900px) {
  .ml-xl-3 {
    margin-left: min(3vw, 30px) !important;
  }
}

@media (min-width: 1500px) {
  .ml-xxl-3 {
    margin-left: min(3vw, 30px) !important;
  }
}
@media screen and (min-height: 900px) {
  .ml-xxl-3 {
    margin-left: min(3vw, 30px) !important;
  }
}

.ml-4 {
  margin-left: min(4vw, 40px) !important;
}

.m-4 {
  margin: min(4vw, 40px) !important;
}

@media (max-width: 767.98px) {
  .ml-sm-4 {
    margin-left: min(4vw, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-sm-4 {
    margin-left: min(4vw, 40px) !important;
  }
}

@media (min-width: 768px) {
  .ml-md-4 {
    margin-left: min(4vw, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-md-4 {
    margin-left: min(4vw, 40px) !important;
  }
}

@media (min-width: 992px) {
  .ml-lg-4 {
    margin-left: min(4vw, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-lg-4 {
    margin-left: min(4vw, 40px) !important;
  }
}

@media (min-width: 1200px) {
  .ml-xl-4 {
    margin-left: min(4vw, 40px) !important;
  }
}
@media screen and (max-height: 900px) {
  .ml-xl-4 {
    margin-left: min(4vw, 40px) !important;
  }
}

@media (min-width: 1500px) {
  .ml-xxl-4 {
    margin-left: min(4vw, 40px) !important;
  }
}
@media screen and (min-height: 900px) {
  .ml-xxl-4 {
    margin-left: min(4vw, 40px) !important;
  }
}

.ml-5 {
  margin-left: min(5vw, 50px) !important;
}

.m-5 {
  margin: min(5vw, 50px) !important;
}

@media (max-width: 767.98px) {
  .ml-sm-5 {
    margin-left: min(5vw, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-sm-5 {
    margin-left: min(5vw, 50px) !important;
  }
}

@media (min-width: 768px) {
  .ml-md-5 {
    margin-left: min(5vw, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-md-5 {
    margin-left: min(5vw, 50px) !important;
  }
}

@media (min-width: 992px) {
  .ml-lg-5 {
    margin-left: min(5vw, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-lg-5 {
    margin-left: min(5vw, 50px) !important;
  }
}

@media (min-width: 1200px) {
  .ml-xl-5 {
    margin-left: min(5vw, 50px) !important;
  }
}
@media screen and (max-height: 900px) {
  .ml-xl-5 {
    margin-left: min(5vw, 50px) !important;
  }
}

@media (min-width: 1500px) {
  .ml-xxl-5 {
    margin-left: min(5vw, 50px) !important;
  }
}
@media screen and (min-height: 900px) {
  .ml-xxl-5 {
    margin-left: min(5vw, 50px) !important;
  }
}

.ml-6 {
  margin-left: min(6vw, 60px) !important;
}

.m-6 {
  margin: min(6vw, 60px) !important;
}

@media (max-width: 767.98px) {
  .ml-sm-6 {
    margin-left: min(6vw, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-sm-6 {
    margin-left: min(6vw, 60px) !important;
  }
}

@media (min-width: 768px) {
  .ml-md-6 {
    margin-left: min(6vw, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-md-6 {
    margin-left: min(6vw, 60px) !important;
  }
}

@media (min-width: 992px) {
  .ml-lg-6 {
    margin-left: min(6vw, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-lg-6 {
    margin-left: min(6vw, 60px) !important;
  }
}

@media (min-width: 1200px) {
  .ml-xl-6 {
    margin-left: min(6vw, 60px) !important;
  }
}
@media screen and (max-height: 900px) {
  .ml-xl-6 {
    margin-left: min(6vw, 60px) !important;
  }
}

@media (min-width: 1500px) {
  .ml-xxl-6 {
    margin-left: min(6vw, 60px) !important;
  }
}
@media screen and (min-height: 900px) {
  .ml-xxl-6 {
    margin-left: min(6vw, 60px) !important;
  }
}

.ml-7 {
  margin-left: min(7vw, 70px) !important;
}

.m-7 {
  margin: min(7vw, 70px) !important;
}

@media (max-width: 767.98px) {
  .ml-sm-7 {
    margin-left: min(7vw, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-sm-7 {
    margin-left: min(7vw, 70px) !important;
  }
}

@media (min-width: 768px) {
  .ml-md-7 {
    margin-left: min(7vw, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-md-7 {
    margin-left: min(7vw, 70px) !important;
  }
}

@media (min-width: 992px) {
  .ml-lg-7 {
    margin-left: min(7vw, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-lg-7 {
    margin-left: min(7vw, 70px) !important;
  }
}

@media (min-width: 1200px) {
  .ml-xl-7 {
    margin-left: min(7vw, 70px) !important;
  }
}
@media screen and (max-height: 900px) {
  .ml-xl-7 {
    margin-left: min(7vw, 70px) !important;
  }
}

@media (min-width: 1500px) {
  .ml-xxl-7 {
    margin-left: min(7vw, 70px) !important;
  }
}
@media screen and (min-height: 900px) {
  .ml-xxl-7 {
    margin-left: min(7vw, 70px) !important;
  }
}

.ml-8 {
  margin-left: min(8vw, 80px) !important;
}

.m-8 {
  margin: min(8vw, 80px) !important;
}

@media (max-width: 767.98px) {
  .ml-sm-8 {
    margin-left: min(8vw, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-sm-8 {
    margin-left: min(8vw, 80px) !important;
  }
}

@media (min-width: 768px) {
  .ml-md-8 {
    margin-left: min(8vw, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-md-8 {
    margin-left: min(8vw, 80px) !important;
  }
}

@media (min-width: 992px) {
  .ml-lg-8 {
    margin-left: min(8vw, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-lg-8 {
    margin-left: min(8vw, 80px) !important;
  }
}

@media (min-width: 1200px) {
  .ml-xl-8 {
    margin-left: min(8vw, 80px) !important;
  }
}
@media screen and (max-height: 900px) {
  .ml-xl-8 {
    margin-left: min(8vw, 80px) !important;
  }
}

@media (min-width: 1500px) {
  .ml-xxl-8 {
    margin-left: min(8vw, 80px) !important;
  }
}
@media screen and (min-height: 900px) {
  .ml-xxl-8 {
    margin-left: min(8vw, 80px) !important;
  }
}

.ml-9 {
  margin-left: min(9vw, 90px) !important;
}

.m-9 {
  margin: min(9vw, 90px) !important;
}

@media (max-width: 767.98px) {
  .ml-sm-9 {
    margin-left: min(9vw, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-sm-9 {
    margin-left: min(9vw, 90px) !important;
  }
}

@media (min-width: 768px) {
  .ml-md-9 {
    margin-left: min(9vw, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-md-9 {
    margin-left: min(9vw, 90px) !important;
  }
}

@media (min-width: 992px) {
  .ml-lg-9 {
    margin-left: min(9vw, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-lg-9 {
    margin-left: min(9vw, 90px) !important;
  }
}

@media (min-width: 1200px) {
  .ml-xl-9 {
    margin-left: min(9vw, 90px) !important;
  }
}
@media screen and (max-height: 900px) {
  .ml-xl-9 {
    margin-left: min(9vw, 90px) !important;
  }
}

@media (min-width: 1500px) {
  .ml-xxl-9 {
    margin-left: min(9vw, 90px) !important;
  }
}
@media screen and (min-height: 900px) {
  .ml-xxl-9 {
    margin-left: min(9vw, 90px) !important;
  }
}

.ml-10 {
  margin-left: min(10vw, 100px) !important;
}

.m-10 {
  margin: min(10vw, 100px) !important;
}

@media (max-width: 767.98px) {
  .ml-sm-10 {
    margin-left: min(10vw, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-sm-10 {
    margin-left: min(10vw, 100px) !important;
  }
}

@media (min-width: 768px) {
  .ml-md-10 {
    margin-left: min(10vw, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-md-10 {
    margin-left: min(10vw, 100px) !important;
  }
}

@media (min-width: 992px) {
  .ml-lg-10 {
    margin-left: min(10vw, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .ml-lg-10 {
    margin-left: min(10vw, 100px) !important;
  }
}

@media (min-width: 1200px) {
  .ml-xl-10 {
    margin-left: min(10vw, 100px) !important;
  }
}
@media screen and (max-height: 900px) {
  .ml-xl-10 {
    margin-left: min(10vw, 100px) !important;
  }
}

@media (min-width: 1500px) {
  .ml-xxl-10 {
    margin-left: min(10vw, 100px) !important;
  }
}
@media screen and (min-height: 900px) {
  .ml-xxl-10 {
    margin-left: min(10vw, 100px) !important;
  }
}

/*Negative Margins*/
.nmt-1 {
  margin-top: max(-1vh, -10px) !important;
}

@media (min-width: 1500px) {
  .nmt-xxl-1 {
    margin-top: max(-1vh, -10px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmt-xxl-1 {
    margin-top: max(-1vh, -10px) !important;
  }
}

@media (min-width: 1200px) {
  .nmt-xl-1 {
    margin-top: max(-1vh, -10px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-xl-1 {
    margin-top: max(-1vh, -10px) !important;
  }
}

@media (min-width: 992px) {
  .nmt-lg-1 {
    margin-top: max(-1vh, -10px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-lg-1 {
    margin-top: max(-1vh, -10px) !important;
  }
}

@media (min-width: 768px) {
  .nmt-md-1 {
    margin-top: max(-1vh, -10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmt-md-1 {
    margin-top: max(-1vh, -10px) !important;
  }
}

.nmt-2 {
  margin-top: max(-2vh, -20px) !important;
}

@media (min-width: 1500px) {
  .nmt-xxl-2 {
    margin-top: max(-2vh, -20px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmt-xxl-2 {
    margin-top: max(-2vh, -20px) !important;
  }
}

@media (min-width: 1200px) {
  .nmt-xl-2 {
    margin-top: max(-2vh, -20px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-xl-2 {
    margin-top: max(-2vh, -20px) !important;
  }
}

@media (min-width: 992px) {
  .nmt-lg-2 {
    margin-top: max(-2vh, -20px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-lg-2 {
    margin-top: max(-2vh, -20px) !important;
  }
}

@media (min-width: 768px) {
  .nmt-md-2 {
    margin-top: max(-2vh, -20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmt-md-2 {
    margin-top: max(-2vh, -20px) !important;
  }
}

.nmt-3 {
  margin-top: max(-3vh, -30px) !important;
}

@media (min-width: 1500px) {
  .nmt-xxl-3 {
    margin-top: max(-3vh, -30px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmt-xxl-3 {
    margin-top: max(-3vh, -30px) !important;
  }
}

@media (min-width: 1200px) {
  .nmt-xl-3 {
    margin-top: max(-3vh, -30px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-xl-3 {
    margin-top: max(-3vh, -30px) !important;
  }
}

@media (min-width: 992px) {
  .nmt-lg-3 {
    margin-top: max(-3vh, -30px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-lg-3 {
    margin-top: max(-3vh, -30px) !important;
  }
}

@media (min-width: 768px) {
  .nmt-md-3 {
    margin-top: max(-3vh, -30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmt-md-3 {
    margin-top: max(-3vh, -30px) !important;
  }
}

.nmt-4 {
  margin-top: max(-4vh, -40px) !important;
}

@media (min-width: 1500px) {
  .nmt-xxl-4 {
    margin-top: max(-4vh, -40px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmt-xxl-4 {
    margin-top: max(-4vh, -40px) !important;
  }
}

@media (min-width: 1200px) {
  .nmt-xl-4 {
    margin-top: max(-4vh, -40px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-xl-4 {
    margin-top: max(-4vh, -40px) !important;
  }
}

@media (min-width: 992px) {
  .nmt-lg-4 {
    margin-top: max(-4vh, -40px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-lg-4 {
    margin-top: max(-4vh, -40px) !important;
  }
}

@media (min-width: 768px) {
  .nmt-md-4 {
    margin-top: max(-4vh, -40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmt-md-4 {
    margin-top: max(-4vh, -40px) !important;
  }
}

.nmt-5 {
  margin-top: max(-5vh, -50px) !important;
}

@media (min-width: 1500px) {
  .nmt-xxl-5 {
    margin-top: max(-5vh, -50px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmt-xxl-5 {
    margin-top: max(-5vh, -50px) !important;
  }
}

@media (min-width: 1200px) {
  .nmt-xl-5 {
    margin-top: max(-5vh, -50px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-xl-5 {
    margin-top: max(-5vh, -50px) !important;
  }
}

@media (min-width: 992px) {
  .nmt-lg-5 {
    margin-top: max(-5vh, -50px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-lg-5 {
    margin-top: max(-5vh, -50px) !important;
  }
}

@media (min-width: 768px) {
  .nmt-md-5 {
    margin-top: max(-5vh, -50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmt-md-5 {
    margin-top: max(-5vh, -50px) !important;
  }
}

.nmt-6 {
  margin-top: max(-6vh, -60px) !important;
}

@media (min-width: 1500px) {
  .nmt-xxl-6 {
    margin-top: max(-6vh, -60px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmt-xxl-6 {
    margin-top: max(-6vh, -60px) !important;
  }
}

@media (min-width: 1200px) {
  .nmt-xl-6 {
    margin-top: max(-6vh, -60px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-xl-6 {
    margin-top: max(-6vh, -60px) !important;
  }
}

@media (min-width: 992px) {
  .nmt-lg-6 {
    margin-top: max(-6vh, -60px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-lg-6 {
    margin-top: max(-6vh, -60px) !important;
  }
}

@media (min-width: 768px) {
  .nmt-md-6 {
    margin-top: max(-6vh, -60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmt-md-6 {
    margin-top: max(-6vh, -60px) !important;
  }
}

.nmt-7 {
  margin-top: max(-7vh, -70px) !important;
}

@media (min-width: 1500px) {
  .nmt-xxl-7 {
    margin-top: max(-7vh, -70px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmt-xxl-7 {
    margin-top: max(-7vh, -70px) !important;
  }
}

@media (min-width: 1200px) {
  .nmt-xl-7 {
    margin-top: max(-7vh, -70px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-xl-7 {
    margin-top: max(-7vh, -70px) !important;
  }
}

@media (min-width: 992px) {
  .nmt-lg-7 {
    margin-top: max(-7vh, -70px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-lg-7 {
    margin-top: max(-7vh, -70px) !important;
  }
}

@media (min-width: 768px) {
  .nmt-md-7 {
    margin-top: max(-7vh, -70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmt-md-7 {
    margin-top: max(-7vh, -70px) !important;
  }
}

.nmt-8 {
  margin-top: max(-8vh, -80px) !important;
}

@media (min-width: 1500px) {
  .nmt-xxl-8 {
    margin-top: max(-8vh, -80px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmt-xxl-8 {
    margin-top: max(-8vh, -80px) !important;
  }
}

@media (min-width: 1200px) {
  .nmt-xl-8 {
    margin-top: max(-8vh, -80px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-xl-8 {
    margin-top: max(-8vh, -80px) !important;
  }
}

@media (min-width: 992px) {
  .nmt-lg-8 {
    margin-top: max(-8vh, -80px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-lg-8 {
    margin-top: max(-8vh, -80px) !important;
  }
}

@media (min-width: 768px) {
  .nmt-md-8 {
    margin-top: max(-8vh, -80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmt-md-8 {
    margin-top: max(-8vh, -80px) !important;
  }
}

.nmt-9 {
  margin-top: max(-9vh, -90px) !important;
}

@media (min-width: 1500px) {
  .nmt-xxl-9 {
    margin-top: max(-9vh, -90px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmt-xxl-9 {
    margin-top: max(-9vh, -90px) !important;
  }
}

@media (min-width: 1200px) {
  .nmt-xl-9 {
    margin-top: max(-9vh, -90px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-xl-9 {
    margin-top: max(-9vh, -90px) !important;
  }
}

@media (min-width: 992px) {
  .nmt-lg-9 {
    margin-top: max(-9vh, -90px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-lg-9 {
    margin-top: max(-9vh, -90px) !important;
  }
}

@media (min-width: 768px) {
  .nmt-md-9 {
    margin-top: max(-9vh, -90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmt-md-9 {
    margin-top: max(-9vh, -90px) !important;
  }
}

.nmt-10 {
  margin-top: max(-10vh, -100px) !important;
}

@media (min-width: 1500px) {
  .nmt-xxl-10 {
    margin-top: max(-10vh, -100px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmt-xxl-10 {
    margin-top: max(-10vh, -100px) !important;
  }
}

@media (min-width: 1200px) {
  .nmt-xl-10 {
    margin-top: max(-10vh, -100px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-xl-10 {
    margin-top: max(-10vh, -100px) !important;
  }
}

@media (min-width: 992px) {
  .nmt-lg-10 {
    margin-top: max(-10vh, -100px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmt-lg-10 {
    margin-top: max(-10vh, -100px) !important;
  }
}

@media (min-width: 768px) {
  .nmt-md-10 {
    margin-top: max(-10vh, -100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmt-md-10 {
    margin-top: max(-10vh, -100px) !important;
  }
}

.nmb-1 {
  margin-bottom: max(-1vh, -10px) !important;
}

@media (min-width: 1500px) {
  .nmb-xxl-1 {
    margin-bottom: max(-1vh, -10px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmb-xxl-1 {
    margin-bottom: max(-1vh, -10px) !important;
  }
}

@media (min-width: 1200px) {
  .nmb-xl-1 {
    margin-bottom: max(-1vh, -10px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-xl-1 {
    margin-bottom: max(-1vh, -10px) !important;
  }
}

@media (min-width: 992px) {
  .nmb-lg-1 {
    margin-bottom: max(-1vh, -10px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-lg-1 {
    margin-bottom: max(-1vh, -10px) !important;
  }
}

@media (min-width: 768px) {
  .nmb-md-1 {
    margin-bottom: max(-1vh, -10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmb-md-1 {
    margin-bottom: max(-1vh, -10px) !important;
  }
}

.nmb-2 {
  margin-bottom: max(-2vh, -20px) !important;
}

@media (min-width: 1500px) {
  .nmb-xxl-2 {
    margin-bottom: max(-2vh, -20px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmb-xxl-2 {
    margin-bottom: max(-2vh, -20px) !important;
  }
}

@media (min-width: 1200px) {
  .nmb-xl-2 {
    margin-bottom: max(-2vh, -20px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-xl-2 {
    margin-bottom: max(-2vh, -20px) !important;
  }
}

@media (min-width: 992px) {
  .nmb-lg-2 {
    margin-bottom: max(-2vh, -20px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-lg-2 {
    margin-bottom: max(-2vh, -20px) !important;
  }
}

@media (min-width: 768px) {
  .nmb-md-2 {
    margin-bottom: max(-2vh, -20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmb-md-2 {
    margin-bottom: max(-2vh, -20px) !important;
  }
}

.nmb-3 {
  margin-bottom: max(-3vh, -30px) !important;
}

@media (min-width: 1500px) {
  .nmb-xxl-3 {
    margin-bottom: max(-3vh, -30px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmb-xxl-3 {
    margin-bottom: max(-3vh, -30px) !important;
  }
}

@media (min-width: 1200px) {
  .nmb-xl-3 {
    margin-bottom: max(-3vh, -30px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-xl-3 {
    margin-bottom: max(-3vh, -30px) !important;
  }
}

@media (min-width: 992px) {
  .nmb-lg-3 {
    margin-bottom: max(-3vh, -30px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-lg-3 {
    margin-bottom: max(-3vh, -30px) !important;
  }
}

@media (min-width: 768px) {
  .nmb-md-3 {
    margin-bottom: max(-3vh, -30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmb-md-3 {
    margin-bottom: max(-3vh, -30px) !important;
  }
}

.nmb-4 {
  margin-bottom: max(-4vh, -40px) !important;
}

@media (min-width: 1500px) {
  .nmb-xxl-4 {
    margin-bottom: max(-4vh, -40px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmb-xxl-4 {
    margin-bottom: max(-4vh, -40px) !important;
  }
}

@media (min-width: 1200px) {
  .nmb-xl-4 {
    margin-bottom: max(-4vh, -40px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-xl-4 {
    margin-bottom: max(-4vh, -40px) !important;
  }
}

@media (min-width: 992px) {
  .nmb-lg-4 {
    margin-bottom: max(-4vh, -40px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-lg-4 {
    margin-bottom: max(-4vh, -40px) !important;
  }
}

@media (min-width: 768px) {
  .nmb-md-4 {
    margin-bottom: max(-4vh, -40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmb-md-4 {
    margin-bottom: max(-4vh, -40px) !important;
  }
}

.nmb-5 {
  margin-bottom: max(-5vh, -50px) !important;
}

@media (min-width: 1500px) {
  .nmb-xxl-5 {
    margin-bottom: max(-5vh, -50px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmb-xxl-5 {
    margin-bottom: max(-5vh, -50px) !important;
  }
}

@media (min-width: 1200px) {
  .nmb-xl-5 {
    margin-bottom: max(-5vh, -50px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-xl-5 {
    margin-bottom: max(-5vh, -50px) !important;
  }
}

@media (min-width: 992px) {
  .nmb-lg-5 {
    margin-bottom: max(-5vh, -50px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-lg-5 {
    margin-bottom: max(-5vh, -50px) !important;
  }
}

@media (min-width: 768px) {
  .nmb-md-5 {
    margin-bottom: max(-5vh, -50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmb-md-5 {
    margin-bottom: max(-5vh, -50px) !important;
  }
}

.nmb-6 {
  margin-bottom: max(-6vh, -60px) !important;
}

@media (min-width: 1500px) {
  .nmb-xxl-6 {
    margin-bottom: max(-6vh, -60px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmb-xxl-6 {
    margin-bottom: max(-6vh, -60px) !important;
  }
}

@media (min-width: 1200px) {
  .nmb-xl-6 {
    margin-bottom: max(-6vh, -60px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-xl-6 {
    margin-bottom: max(-6vh, -60px) !important;
  }
}

@media (min-width: 992px) {
  .nmb-lg-6 {
    margin-bottom: max(-6vh, -60px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-lg-6 {
    margin-bottom: max(-6vh, -60px) !important;
  }
}

@media (min-width: 768px) {
  .nmb-md-6 {
    margin-bottom: max(-6vh, -60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmb-md-6 {
    margin-bottom: max(-6vh, -60px) !important;
  }
}

.nmb-7 {
  margin-bottom: max(-7vh, -70px) !important;
}

@media (min-width: 1500px) {
  .nmb-xxl-7 {
    margin-bottom: max(-7vh, -70px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmb-xxl-7 {
    margin-bottom: max(-7vh, -70px) !important;
  }
}

@media (min-width: 1200px) {
  .nmb-xl-7 {
    margin-bottom: max(-7vh, -70px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-xl-7 {
    margin-bottom: max(-7vh, -70px) !important;
  }
}

@media (min-width: 992px) {
  .nmb-lg-7 {
    margin-bottom: max(-7vh, -70px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-lg-7 {
    margin-bottom: max(-7vh, -70px) !important;
  }
}

@media (min-width: 768px) {
  .nmb-md-7 {
    margin-bottom: max(-7vh, -70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmb-md-7 {
    margin-bottom: max(-7vh, -70px) !important;
  }
}

.nmb-8 {
  margin-bottom: max(-8vh, -80px) !important;
}

@media (min-width: 1500px) {
  .nmb-xxl-8 {
    margin-bottom: max(-8vh, -80px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmb-xxl-8 {
    margin-bottom: max(-8vh, -80px) !important;
  }
}

@media (min-width: 1200px) {
  .nmb-xl-8 {
    margin-bottom: max(-8vh, -80px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-xl-8 {
    margin-bottom: max(-8vh, -80px) !important;
  }
}

@media (min-width: 992px) {
  .nmb-lg-8 {
    margin-bottom: max(-8vh, -80px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-lg-8 {
    margin-bottom: max(-8vh, -80px) !important;
  }
}

@media (min-width: 768px) {
  .nmb-md-8 {
    margin-bottom: max(-8vh, -80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmb-md-8 {
    margin-bottom: max(-8vh, -80px) !important;
  }
}

.nmb-9 {
  margin-bottom: max(-9vh, -90px) !important;
}

@media (min-width: 1500px) {
  .nmb-xxl-9 {
    margin-bottom: max(-9vh, -90px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmb-xxl-9 {
    margin-bottom: max(-9vh, -90px) !important;
  }
}

@media (min-width: 1200px) {
  .nmb-xl-9 {
    margin-bottom: max(-9vh, -90px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-xl-9 {
    margin-bottom: max(-9vh, -90px) !important;
  }
}

@media (min-width: 992px) {
  .nmb-lg-9 {
    margin-bottom: max(-9vh, -90px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-lg-9 {
    margin-bottom: max(-9vh, -90px) !important;
  }
}

@media (min-width: 768px) {
  .nmb-md-9 {
    margin-bottom: max(-9vh, -90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmb-md-9 {
    margin-bottom: max(-9vh, -90px) !important;
  }
}

.nmb-10 {
  margin-bottom: max(-10vh, -100px) !important;
}

@media (min-width: 1500px) {
  .nmb-xxl-10 {
    margin-bottom: max(-10vh, -100px) !important;
  }
}
@media screen and (min-height: 900px) {
  .nmb-xxl-10 {
    margin-bottom: max(-10vh, -100px) !important;
  }
}

@media (min-width: 1200px) {
  .nmb-xl-10 {
    margin-bottom: max(-10vh, -100px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-xl-10 {
    margin-bottom: max(-10vh, -100px) !important;
  }
}

@media (min-width: 992px) {
  .nmb-lg-10 {
    margin-bottom: max(-10vh, -100px) !important;
  }
}
@media screen and (min-height: 768px) {
  .nmb-lg-10 {
    margin-bottom: max(-10vh, -100px) !important;
  }
}

@media (min-width: 768px) {
  .nmb-md-10 {
    margin-bottom: max(-10vh, -100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .nmb-md-10 {
    margin-bottom: max(-10vh, -100px) !important;
  }
}

/*Padding*/
.pt-1 {
  padding-top: min(1vh, 10px) !important;
}

.p-1 {
  padding-top: min(1vh, 10px) !important;
}

@media (min-width: 576px) {
  .pt-sm-1 {
    padding-top: min(1vh, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-sm-1 {
    padding-top: min(1vh, 10px) !important;
  }
}

@media (min-width: 768px) {
  .pt-md-1 {
    padding-top: min(1vh, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-md-1 {
    padding-top: min(1vh, 10px) !important;
  }
}

@media (min-width: 992px) {
  .pt-lg-1 {
    padding-top: min(1vh, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-lg-1 {
    padding-top: min(1vh, 10px) !important;
  }
}

@media (min-width: 1200px) {
  .pt-xl-1 {
    padding-top: min(1vh, 10px) !important;
  }
}

@media (min-width: 1500px) {
  .pt-xxl-1 {
    padding-top: min(1vh, 10px) !important;
  }
}

.pt-2 {
  padding-top: min(2vh, 20px) !important;
}

.p-2 {
  padding-top: min(2vh, 20px) !important;
}

@media (min-width: 576px) {
  .pt-sm-2 {
    padding-top: min(2vh, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-sm-2 {
    padding-top: min(2vh, 20px) !important;
  }
}

@media (min-width: 768px) {
  .pt-md-2 {
    padding-top: min(2vh, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-md-2 {
    padding-top: min(2vh, 20px) !important;
  }
}

@media (min-width: 992px) {
  .pt-lg-2 {
    padding-top: min(2vh, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-lg-2 {
    padding-top: min(2vh, 20px) !important;
  }
}

@media (min-width: 1200px) {
  .pt-xl-2 {
    padding-top: min(2vh, 20px) !important;
  }
}

@media (min-width: 1500px) {
  .pt-xxl-2 {
    padding-top: min(2vh, 20px) !important;
  }
}

.pt-3 {
  padding-top: min(3vh, 30px) !important;
}

.p-3 {
  padding-top: min(3vh, 30px) !important;
}

@media (min-width: 576px) {
  .pt-sm-3 {
    padding-top: min(3vh, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-sm-3 {
    padding-top: min(3vh, 30px) !important;
  }
}

@media (min-width: 768px) {
  .pt-md-3 {
    padding-top: min(3vh, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-md-3 {
    padding-top: min(3vh, 30px) !important;
  }
}

@media (min-width: 992px) {
  .pt-lg-3 {
    padding-top: min(3vh, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-lg-3 {
    padding-top: min(3vh, 30px) !important;
  }
}

@media (min-width: 1200px) {
  .pt-xl-3 {
    padding-top: min(3vh, 30px) !important;
  }
}

@media (min-width: 1500px) {
  .pt-xxl-3 {
    padding-top: min(3vh, 30px) !important;
  }
}

.pt-4 {
  padding-top: min(4vh, 40px) !important;
}

.p-4 {
  padding-top: min(4vh, 40px) !important;
}

@media (min-width: 576px) {
  .pt-sm-4 {
    padding-top: min(4vh, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-sm-4 {
    padding-top: min(4vh, 40px) !important;
  }
}

@media (min-width: 768px) {
  .pt-md-4 {
    padding-top: min(4vh, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-md-4 {
    padding-top: min(4vh, 40px) !important;
  }
}

@media (min-width: 992px) {
  .pt-lg-4 {
    padding-top: min(4vh, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-lg-4 {
    padding-top: min(4vh, 40px) !important;
  }
}

@media (min-width: 1200px) {
  .pt-xl-4 {
    padding-top: min(4vh, 40px) !important;
  }
}

@media (min-width: 1500px) {
  .pt-xxl-4 {
    padding-top: min(4vh, 40px) !important;
  }
}

.pt-5 {
  padding-top: min(5vh, 50px) !important;
}

.p-5 {
  padding-top: min(5vh, 50px) !important;
}

@media (min-width: 576px) {
  .pt-sm-5 {
    padding-top: min(5vh, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-sm-5 {
    padding-top: min(5vh, 50px) !important;
  }
}

@media (min-width: 768px) {
  .pt-md-5 {
    padding-top: min(5vh, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-md-5 {
    padding-top: min(5vh, 50px) !important;
  }
}

@media (min-width: 992px) {
  .pt-lg-5 {
    padding-top: min(5vh, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-lg-5 {
    padding-top: min(5vh, 50px) !important;
  }
}

@media (min-width: 1200px) {
  .pt-xl-5 {
    padding-top: min(5vh, 50px) !important;
  }
}

@media (min-width: 1500px) {
  .pt-xxl-5 {
    padding-top: min(5vh, 50px) !important;
  }
}

.pt-6 {
  padding-top: min(6vh, 60px) !important;
}

.p-6 {
  padding-top: min(6vh, 60px) !important;
}

@media (min-width: 576px) {
  .pt-sm-6 {
    padding-top: min(6vh, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-sm-6 {
    padding-top: min(6vh, 60px) !important;
  }
}

@media (min-width: 768px) {
  .pt-md-6 {
    padding-top: min(6vh, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-md-6 {
    padding-top: min(6vh, 60px) !important;
  }
}

@media (min-width: 992px) {
  .pt-lg-6 {
    padding-top: min(6vh, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-lg-6 {
    padding-top: min(6vh, 60px) !important;
  }
}

@media (min-width: 1200px) {
  .pt-xl-6 {
    padding-top: min(6vh, 60px) !important;
  }
}

@media (min-width: 1500px) {
  .pt-xxl-6 {
    padding-top: min(6vh, 60px) !important;
  }
}

.pt-7 {
  padding-top: min(7vh, 70px) !important;
}

.p-7 {
  padding-top: min(7vh, 70px) !important;
}

@media (min-width: 576px) {
  .pt-sm-7 {
    padding-top: min(7vh, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-sm-7 {
    padding-top: min(7vh, 70px) !important;
  }
}

@media (min-width: 768px) {
  .pt-md-7 {
    padding-top: min(7vh, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-md-7 {
    padding-top: min(7vh, 70px) !important;
  }
}

@media (min-width: 992px) {
  .pt-lg-7 {
    padding-top: min(7vh, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-lg-7 {
    padding-top: min(7vh, 70px) !important;
  }
}

@media (min-width: 1200px) {
  .pt-xl-7 {
    padding-top: min(7vh, 70px) !important;
  }
}

@media (min-width: 1500px) {
  .pt-xxl-7 {
    padding-top: min(7vh, 70px) !important;
  }
}

.pt-8 {
  padding-top: min(8vh, 80px) !important;
}

.p-8 {
  padding-top: min(8vh, 80px) !important;
}

@media (min-width: 576px) {
  .pt-sm-8 {
    padding-top: min(8vh, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-sm-8 {
    padding-top: min(8vh, 80px) !important;
  }
}

@media (min-width: 768px) {
  .pt-md-8 {
    padding-top: min(8vh, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-md-8 {
    padding-top: min(8vh, 80px) !important;
  }
}

@media (min-width: 992px) {
  .pt-lg-8 {
    padding-top: min(8vh, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-lg-8 {
    padding-top: min(8vh, 80px) !important;
  }
}

@media (min-width: 1200px) {
  .pt-xl-8 {
    padding-top: min(8vh, 80px) !important;
  }
}

@media (min-width: 1500px) {
  .pt-xxl-8 {
    padding-top: min(8vh, 80px) !important;
  }
}

.pt-9 {
  padding-top: min(9vh, 90px) !important;
}

.p-9 {
  padding-top: min(9vh, 90px) !important;
}

@media (min-width: 576px) {
  .pt-sm-9 {
    padding-top: min(9vh, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-sm-9 {
    padding-top: min(9vh, 90px) !important;
  }
}

@media (min-width: 768px) {
  .pt-md-9 {
    padding-top: min(9vh, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-md-9 {
    padding-top: min(9vh, 90px) !important;
  }
}

@media (min-width: 992px) {
  .pt-lg-9 {
    padding-top: min(9vh, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-lg-9 {
    padding-top: min(9vh, 90px) !important;
  }
}

@media (min-width: 1200px) {
  .pt-xl-9 {
    padding-top: min(9vh, 90px) !important;
  }
}

@media (min-width: 1500px) {
  .pt-xxl-9 {
    padding-top: min(9vh, 90px) !important;
  }
}

.pt-10 {
  padding-top: min(10vh, 100px) !important;
}

.p-10 {
  padding-top: min(10vh, 100px) !important;
}

@media (min-width: 576px) {
  .pt-sm-10 {
    padding-top: min(10vh, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-sm-10 {
    padding-top: min(10vh, 100px) !important;
  }
}

@media (min-width: 768px) {
  .pt-md-10 {
    padding-top: min(10vh, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-md-10 {
    padding-top: min(10vh, 100px) !important;
  }
}

@media (min-width: 992px) {
  .pt-lg-10 {
    padding-top: min(10vh, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pt-lg-10 {
    padding-top: min(10vh, 100px) !important;
  }
}

@media (min-width: 1200px) {
  .pt-xl-10 {
    padding-top: min(10vh, 100px) !important;
  }
}

@media (min-width: 1500px) {
  .pt-xxl-10 {
    padding-top: min(10vh, 100px) !important;
  }
}

.pb-1 {
  padding-bottom: min(1vh, 10px) !important;
}

.p-1 {
  padding-bottom: min(1vh, 10px) !important;
}

@media (min-width: 576px) {
  .pb-sm-1 {
    padding-bottom: min(1vh, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-sm-1 {
    padding-bottom: min(1vh, 10px) !important;
  }
}

@media (min-width: 768px) {
  .pb-md-1 {
    padding-bottom: min(1vh, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-md-1 {
    padding-bottom: min(1vh, 10px) !important;
  }
}

@media (min-width: 992px) {
  .pb-lg-1 {
    padding-bottom: min(1vh, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-lg-1 {
    padding-bottom: min(1vh, 10px) !important;
  }
}

@media (min-width: 1200px) {
  .pb-xl-1 {
    padding-bottom: min(1vh, 10px) !important;
  }
}

@media (min-width: 1500px) {
  .pb-xxl-1 {
    padding-bottom: min(1vh, 10px) !important;
  }
}

.pb-2 {
  padding-bottom: min(2vh, 20px) !important;
}

.p-2 {
  padding-bottom: min(2vh, 20px) !important;
}

@media (min-width: 576px) {
  .pb-sm-2 {
    padding-bottom: min(2vh, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-sm-2 {
    padding-bottom: min(2vh, 20px) !important;
  }
}

@media (min-width: 768px) {
  .pb-md-2 {
    padding-bottom: min(2vh, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-md-2 {
    padding-bottom: min(2vh, 20px) !important;
  }
}

@media (min-width: 992px) {
  .pb-lg-2 {
    padding-bottom: min(2vh, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-lg-2 {
    padding-bottom: min(2vh, 20px) !important;
  }
}

@media (min-width: 1200px) {
  .pb-xl-2 {
    padding-bottom: min(2vh, 20px) !important;
  }
}

@media (min-width: 1500px) {
  .pb-xxl-2 {
    padding-bottom: min(2vh, 20px) !important;
  }
}

.pb-3 {
  padding-bottom: min(3vh, 30px) !important;
}

.p-3 {
  padding-bottom: min(3vh, 30px) !important;
}

@media (min-width: 576px) {
  .pb-sm-3 {
    padding-bottom: min(3vh, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-sm-3 {
    padding-bottom: min(3vh, 30px) !important;
  }
}

@media (min-width: 768px) {
  .pb-md-3 {
    padding-bottom: min(3vh, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-md-3 {
    padding-bottom: min(3vh, 30px) !important;
  }
}

@media (min-width: 992px) {
  .pb-lg-3 {
    padding-bottom: min(3vh, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-lg-3 {
    padding-bottom: min(3vh, 30px) !important;
  }
}

@media (min-width: 1200px) {
  .pb-xl-3 {
    padding-bottom: min(3vh, 30px) !important;
  }
}

@media (min-width: 1500px) {
  .pb-xxl-3 {
    padding-bottom: min(3vh, 30px) !important;
  }
}

.pb-4 {
  padding-bottom: min(4vh, 40px) !important;
}

.p-4 {
  padding-bottom: min(4vh, 40px) !important;
}

@media (min-width: 576px) {
  .pb-sm-4 {
    padding-bottom: min(4vh, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-sm-4 {
    padding-bottom: min(4vh, 40px) !important;
  }
}

@media (min-width: 768px) {
  .pb-md-4 {
    padding-bottom: min(4vh, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-md-4 {
    padding-bottom: min(4vh, 40px) !important;
  }
}

@media (min-width: 992px) {
  .pb-lg-4 {
    padding-bottom: min(4vh, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-lg-4 {
    padding-bottom: min(4vh, 40px) !important;
  }
}

@media (min-width: 1200px) {
  .pb-xl-4 {
    padding-bottom: min(4vh, 40px) !important;
  }
}

@media (min-width: 1500px) {
  .pb-xxl-4 {
    padding-bottom: min(4vh, 40px) !important;
  }
}

.pb-5 {
  padding-bottom: min(5vh, 50px) !important;
}

.p-5 {
  padding-bottom: min(5vh, 50px) !important;
}

@media (min-width: 576px) {
  .pb-sm-5 {
    padding-bottom: min(5vh, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-sm-5 {
    padding-bottom: min(5vh, 50px) !important;
  }
}

@media (min-width: 768px) {
  .pb-md-5 {
    padding-bottom: min(5vh, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-md-5 {
    padding-bottom: min(5vh, 50px) !important;
  }
}

@media (min-width: 992px) {
  .pb-lg-5 {
    padding-bottom: min(5vh, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-lg-5 {
    padding-bottom: min(5vh, 50px) !important;
  }
}

@media (min-width: 1200px) {
  .pb-xl-5 {
    padding-bottom: min(5vh, 50px) !important;
  }
}

@media (min-width: 1500px) {
  .pb-xxl-5 {
    padding-bottom: min(5vh, 50px) !important;
  }
}

.pb-6 {
  padding-bottom: min(6vh, 60px) !important;
}

.p-6 {
  padding-bottom: min(6vh, 60px) !important;
}

@media (min-width: 576px) {
  .pb-sm-6 {
    padding-bottom: min(6vh, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-sm-6 {
    padding-bottom: min(6vh, 60px) !important;
  }
}

@media (min-width: 768px) {
  .pb-md-6 {
    padding-bottom: min(6vh, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-md-6 {
    padding-bottom: min(6vh, 60px) !important;
  }
}

@media (min-width: 992px) {
  .pb-lg-6 {
    padding-bottom: min(6vh, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-lg-6 {
    padding-bottom: min(6vh, 60px) !important;
  }
}

@media (min-width: 1200px) {
  .pb-xl-6 {
    padding-bottom: min(6vh, 60px) !important;
  }
}

@media (min-width: 1500px) {
  .pb-xxl-6 {
    padding-bottom: min(6vh, 60px) !important;
  }
}

.pb-7 {
  padding-bottom: min(7vh, 70px) !important;
}

.p-7 {
  padding-bottom: min(7vh, 70px) !important;
}

@media (min-width: 576px) {
  .pb-sm-7 {
    padding-bottom: min(7vh, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-sm-7 {
    padding-bottom: min(7vh, 70px) !important;
  }
}

@media (min-width: 768px) {
  .pb-md-7 {
    padding-bottom: min(7vh, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-md-7 {
    padding-bottom: min(7vh, 70px) !important;
  }
}

@media (min-width: 992px) {
  .pb-lg-7 {
    padding-bottom: min(7vh, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-lg-7 {
    padding-bottom: min(7vh, 70px) !important;
  }
}

@media (min-width: 1200px) {
  .pb-xl-7 {
    padding-bottom: min(7vh, 70px) !important;
  }
}

@media (min-width: 1500px) {
  .pb-xxl-7 {
    padding-bottom: min(7vh, 70px) !important;
  }
}

.pb-8 {
  padding-bottom: min(8vh, 80px) !important;
}

.p-8 {
  padding-bottom: min(8vh, 80px) !important;
}

@media (min-width: 576px) {
  .pb-sm-8 {
    padding-bottom: min(8vh, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-sm-8 {
    padding-bottom: min(8vh, 80px) !important;
  }
}

@media (min-width: 768px) {
  .pb-md-8 {
    padding-bottom: min(8vh, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-md-8 {
    padding-bottom: min(8vh, 80px) !important;
  }
}

@media (min-width: 992px) {
  .pb-lg-8 {
    padding-bottom: min(8vh, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-lg-8 {
    padding-bottom: min(8vh, 80px) !important;
  }
}

@media (min-width: 1200px) {
  .pb-xl-8 {
    padding-bottom: min(8vh, 80px) !important;
  }
}

@media (min-width: 1500px) {
  .pb-xxl-8 {
    padding-bottom: min(8vh, 80px) !important;
  }
}

.pb-9 {
  padding-bottom: min(9vh, 90px) !important;
}

.p-9 {
  padding-bottom: min(9vh, 90px) !important;
}

@media (min-width: 576px) {
  .pb-sm-9 {
    padding-bottom: min(9vh, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-sm-9 {
    padding-bottom: min(9vh, 90px) !important;
  }
}

@media (min-width: 768px) {
  .pb-md-9 {
    padding-bottom: min(9vh, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-md-9 {
    padding-bottom: min(9vh, 90px) !important;
  }
}

@media (min-width: 992px) {
  .pb-lg-9 {
    padding-bottom: min(9vh, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-lg-9 {
    padding-bottom: min(9vh, 90px) !important;
  }
}

@media (min-width: 1200px) {
  .pb-xl-9 {
    padding-bottom: min(9vh, 90px) !important;
  }
}

@media (min-width: 1500px) {
  .pb-xxl-9 {
    padding-bottom: min(9vh, 90px) !important;
  }
}

.pb-10 {
  padding-bottom: min(10vh, 100px) !important;
}

.p-10 {
  padding-bottom: min(10vh, 100px) !important;
}

@media (min-width: 576px) {
  .pb-sm-10 {
    padding-bottom: min(10vh, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-sm-10 {
    padding-bottom: min(10vh, 100px) !important;
  }
}

@media (min-width: 768px) {
  .pb-md-10 {
    padding-bottom: min(10vh, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-md-10 {
    padding-bottom: min(10vh, 100px) !important;
  }
}

@media (min-width: 992px) {
  .pb-lg-10 {
    padding-bottom: min(10vh, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pb-lg-10 {
    padding-bottom: min(10vh, 100px) !important;
  }
}

@media (min-width: 1200px) {
  .pb-xl-10 {
    padding-bottom: min(10vh, 100px) !important;
  }
}

@media (min-width: 1500px) {
  .pb-xxl-10 {
    padding-bottom: min(10vh, 100px) !important;
  }
}

.pr-1 {
  padding-right: min(1vw, 10px) !important;
}

.p-1 {
  padding-right: min(1vw, 10px) !important;
}

@media (min-width: 576px) {
  .pr-sm-1 {
    padding-right: min(1vw, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-sm-1 {
    padding-right: min(1vw, 10px) !important;
  }
}

@media (min-width: 768px) {
  .pr-md-1 {
    padding-right: min(1vw, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-md-1 {
    padding-right: min(1vw, 10px) !important;
  }
}

@media (min-width: 992px) {
  .pr-lg-1 {
    padding-right: min(1vw, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-lg-1 {
    padding-right: min(1vw, 10px) !important;
  }
}

@media (min-width: 1200px) {
  .pr-xl-1 {
    padding-right: min(1vw, 10px) !important;
  }
}

@media (min-width: 1500px) {
  .pr-xxl-1 {
    padding-right: min(1vw, 10px) !important;
  }
}

.pr-2 {
  padding-right: min(2vw, 20px) !important;
}

.p-2 {
  padding-right: min(2vw, 20px) !important;
}

@media (min-width: 576px) {
  .pr-sm-2 {
    padding-right: min(2vw, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-sm-2 {
    padding-right: min(2vw, 20px) !important;
  }
}

@media (min-width: 768px) {
  .pr-md-2 {
    padding-right: min(2vw, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-md-2 {
    padding-right: min(2vw, 20px) !important;
  }
}

@media (min-width: 992px) {
  .pr-lg-2 {
    padding-right: min(2vw, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-lg-2 {
    padding-right: min(2vw, 20px) !important;
  }
}

@media (min-width: 1200px) {
  .pr-xl-2 {
    padding-right: min(2vw, 20px) !important;
  }
}

@media (min-width: 1500px) {
  .pr-xxl-2 {
    padding-right: min(2vw, 20px) !important;
  }
}

.pr-3 {
  padding-right: min(3vw, 30px) !important;
}

.p-3 {
  padding-right: min(3vw, 30px) !important;
}

@media (min-width: 576px) {
  .pr-sm-3 {
    padding-right: min(3vw, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-sm-3 {
    padding-right: min(3vw, 30px) !important;
  }
}

@media (min-width: 768px) {
  .pr-md-3 {
    padding-right: min(3vw, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-md-3 {
    padding-right: min(3vw, 30px) !important;
  }
}

@media (min-width: 992px) {
  .pr-lg-3 {
    padding-right: min(3vw, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-lg-3 {
    padding-right: min(3vw, 30px) !important;
  }
}

@media (min-width: 1200px) {
  .pr-xl-3 {
    padding-right: min(3vw, 30px) !important;
  }
}

@media (min-width: 1500px) {
  .pr-xxl-3 {
    padding-right: min(3vw, 30px) !important;
  }
}

.pr-4 {
  padding-right: min(4vw, 40px) !important;
}

.p-4 {
  padding-right: min(4vw, 40px) !important;
}

@media (min-width: 576px) {
  .pr-sm-4 {
    padding-right: min(4vw, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-sm-4 {
    padding-right: min(4vw, 40px) !important;
  }
}

@media (min-width: 768px) {
  .pr-md-4 {
    padding-right: min(4vw, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-md-4 {
    padding-right: min(4vw, 40px) !important;
  }
}

@media (min-width: 992px) {
  .pr-lg-4 {
    padding-right: min(4vw, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-lg-4 {
    padding-right: min(4vw, 40px) !important;
  }
}

@media (min-width: 1200px) {
  .pr-xl-4 {
    padding-right: min(4vw, 40px) !important;
  }
}

@media (min-width: 1500px) {
  .pr-xxl-4 {
    padding-right: min(4vw, 40px) !important;
  }
}

.pr-5 {
  padding-right: min(5vw, 50px) !important;
}

.p-5 {
  padding-right: min(5vw, 50px) !important;
}

@media (min-width: 576px) {
  .pr-sm-5 {
    padding-right: min(5vw, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-sm-5 {
    padding-right: min(5vw, 50px) !important;
  }
}

@media (min-width: 768px) {
  .pr-md-5 {
    padding-right: min(5vw, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-md-5 {
    padding-right: min(5vw, 50px) !important;
  }
}

@media (min-width: 992px) {
  .pr-lg-5 {
    padding-right: min(5vw, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-lg-5 {
    padding-right: min(5vw, 50px) !important;
  }
}

@media (min-width: 1200px) {
  .pr-xl-5 {
    padding-right: min(5vw, 50px) !important;
  }
}

@media (min-width: 1500px) {
  .pr-xxl-5 {
    padding-right: min(5vw, 50px) !important;
  }
}

.pr-6 {
  padding-right: min(6vw, 60px) !important;
}

.p-6 {
  padding-right: min(6vw, 60px) !important;
}

@media (min-width: 576px) {
  .pr-sm-6 {
    padding-right: min(6vw, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-sm-6 {
    padding-right: min(6vw, 60px) !important;
  }
}

@media (min-width: 768px) {
  .pr-md-6 {
    padding-right: min(6vw, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-md-6 {
    padding-right: min(6vw, 60px) !important;
  }
}

@media (min-width: 992px) {
  .pr-lg-6 {
    padding-right: min(6vw, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-lg-6 {
    padding-right: min(6vw, 60px) !important;
  }
}

@media (min-width: 1200px) {
  .pr-xl-6 {
    padding-right: min(6vw, 60px) !important;
  }
}

@media (min-width: 1500px) {
  .pr-xxl-6 {
    padding-right: min(6vw, 60px) !important;
  }
}

.pr-7 {
  padding-right: min(7vw, 70px) !important;
}

.p-7 {
  padding-right: min(7vw, 70px) !important;
}

@media (min-width: 576px) {
  .pr-sm-7 {
    padding-right: min(7vw, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-sm-7 {
    padding-right: min(7vw, 70px) !important;
  }
}

@media (min-width: 768px) {
  .pr-md-7 {
    padding-right: min(7vw, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-md-7 {
    padding-right: min(7vw, 70px) !important;
  }
}

@media (min-width: 992px) {
  .pr-lg-7 {
    padding-right: min(7vw, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-lg-7 {
    padding-right: min(7vw, 70px) !important;
  }
}

@media (min-width: 1200px) {
  .pr-xl-7 {
    padding-right: min(7vw, 70px) !important;
  }
}

@media (min-width: 1500px) {
  .pr-xxl-7 {
    padding-right: min(7vw, 70px) !important;
  }
}

.pr-8 {
  padding-right: min(8vw, 80px) !important;
}

.p-8 {
  padding-right: min(8vw, 80px) !important;
}

@media (min-width: 576px) {
  .pr-sm-8 {
    padding-right: min(8vw, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-sm-8 {
    padding-right: min(8vw, 80px) !important;
  }
}

@media (min-width: 768px) {
  .pr-md-8 {
    padding-right: min(8vw, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-md-8 {
    padding-right: min(8vw, 80px) !important;
  }
}

@media (min-width: 992px) {
  .pr-lg-8 {
    padding-right: min(8vw, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-lg-8 {
    padding-right: min(8vw, 80px) !important;
  }
}

@media (min-width: 1200px) {
  .pr-xl-8 {
    padding-right: min(8vw, 80px) !important;
  }
}

@media (min-width: 1500px) {
  .pr-xxl-8 {
    padding-right: min(8vw, 80px) !important;
  }
}

.pr-9 {
  padding-right: min(9vw, 90px) !important;
}

.p-9 {
  padding-right: min(9vw, 90px) !important;
}

@media (min-width: 576px) {
  .pr-sm-9 {
    padding-right: min(9vw, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-sm-9 {
    padding-right: min(9vw, 90px) !important;
  }
}

@media (min-width: 768px) {
  .pr-md-9 {
    padding-right: min(9vw, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-md-9 {
    padding-right: min(9vw, 90px) !important;
  }
}

@media (min-width: 992px) {
  .pr-lg-9 {
    padding-right: min(9vw, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-lg-9 {
    padding-right: min(9vw, 90px) !important;
  }
}

@media (min-width: 1200px) {
  .pr-xl-9 {
    padding-right: min(9vw, 90px) !important;
  }
}

@media (min-width: 1500px) {
  .pr-xxl-9 {
    padding-right: min(9vw, 90px) !important;
  }
}

.pr-10 {
  padding-right: min(10vw, 100px) !important;
}

.p-10 {
  padding-right: min(10vw, 100px) !important;
}

@media (min-width: 576px) {
  .pr-sm-10 {
    padding-right: min(10vw, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-sm-10 {
    padding-right: min(10vw, 100px) !important;
  }
}

@media (min-width: 768px) {
  .pr-md-10 {
    padding-right: min(10vw, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-md-10 {
    padding-right: min(10vw, 100px) !important;
  }
}

@media (min-width: 992px) {
  .pr-lg-10 {
    padding-right: min(10vw, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pr-lg-10 {
    padding-right: min(10vw, 100px) !important;
  }
}

@media (min-width: 1200px) {
  .pr-xl-10 {
    padding-right: min(10vw, 100px) !important;
  }
}

@media (min-width: 1500px) {
  .pr-xxl-10 {
    padding-right: min(10vw, 100px) !important;
  }
}

.pl-1 {
  padding-left: min(1vw, 10px) !important;
}

.p-1 {
  padding-left: min(1vw, 10px) !important;
}

@media (min-width: 576px) {
  .pl-sm-1 {
    padding-left: min(1vw, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-sm-1 {
    padding-left: min(1vw, 10px) !important;
  }
}

@media (min-width: 768px) {
  .pl-md-1 {
    padding-left: min(1vw, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-md-1 {
    padding-left: min(1vw, 10px) !important;
  }
}

@media (min-width: 992px) {
  .pl-lg-1 {
    padding-left: min(1vw, 10px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-lg-1 {
    padding-left: min(1vw, 10px) !important;
  }
}

@media (min-width: 1200px) {
  .pl-xl-1 {
    padding-left: min(1vw, 10px) !important;
  }
}

@media (min-width: 1500px) {
  .pl-xxl-1 {
    padding-left: min(1vw, 10px) !important;
  }
}

.pl-2 {
  padding-left: min(2vw, 20px) !important;
}

.p-2 {
  padding-left: min(2vw, 20px) !important;
}

@media (min-width: 576px) {
  .pl-sm-2 {
    padding-left: min(2vw, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-sm-2 {
    padding-left: min(2vw, 20px) !important;
  }
}

@media (min-width: 768px) {
  .pl-md-2 {
    padding-left: min(2vw, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-md-2 {
    padding-left: min(2vw, 20px) !important;
  }
}

@media (min-width: 992px) {
  .pl-lg-2 {
    padding-left: min(2vw, 20px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-lg-2 {
    padding-left: min(2vw, 20px) !important;
  }
}

@media (min-width: 1200px) {
  .pl-xl-2 {
    padding-left: min(2vw, 20px) !important;
  }
}

@media (min-width: 1500px) {
  .pl-xxl-2 {
    padding-left: min(2vw, 20px) !important;
  }
}

.pl-3 {
  padding-left: min(3vw, 30px) !important;
}

.p-3 {
  padding-left: min(3vw, 30px) !important;
}

@media (min-width: 576px) {
  .pl-sm-3 {
    padding-left: min(3vw, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-sm-3 {
    padding-left: min(3vw, 30px) !important;
  }
}

@media (min-width: 768px) {
  .pl-md-3 {
    padding-left: min(3vw, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-md-3 {
    padding-left: min(3vw, 30px) !important;
  }
}

@media (min-width: 992px) {
  .pl-lg-3 {
    padding-left: min(3vw, 30px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-lg-3 {
    padding-left: min(3vw, 30px) !important;
  }
}

@media (min-width: 1200px) {
  .pl-xl-3 {
    padding-left: min(3vw, 30px) !important;
  }
}

@media (min-width: 1500px) {
  .pl-xxl-3 {
    padding-left: min(3vw, 30px) !important;
  }
}

.pl-4 {
  padding-left: min(4vw, 40px) !important;
}

.p-4 {
  padding-left: min(4vw, 40px) !important;
}

@media (min-width: 576px) {
  .pl-sm-4 {
    padding-left: min(4vw, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-sm-4 {
    padding-left: min(4vw, 40px) !important;
  }
}

@media (min-width: 768px) {
  .pl-md-4 {
    padding-left: min(4vw, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-md-4 {
    padding-left: min(4vw, 40px) !important;
  }
}

@media (min-width: 992px) {
  .pl-lg-4 {
    padding-left: min(4vw, 40px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-lg-4 {
    padding-left: min(4vw, 40px) !important;
  }
}

@media (min-width: 1200px) {
  .pl-xl-4 {
    padding-left: min(4vw, 40px) !important;
  }
}

@media (min-width: 1500px) {
  .pl-xxl-4 {
    padding-left: min(4vw, 40px) !important;
  }
}

.pl-5 {
  padding-left: min(5vw, 50px) !important;
}

.p-5 {
  padding-left: min(5vw, 50px) !important;
}

@media (min-width: 576px) {
  .pl-sm-5 {
    padding-left: min(5vw, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-sm-5 {
    padding-left: min(5vw, 50px) !important;
  }
}

@media (min-width: 768px) {
  .pl-md-5 {
    padding-left: min(5vw, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-md-5 {
    padding-left: min(5vw, 50px) !important;
  }
}

@media (min-width: 992px) {
  .pl-lg-5 {
    padding-left: min(5vw, 50px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-lg-5 {
    padding-left: min(5vw, 50px) !important;
  }
}

@media (min-width: 1200px) {
  .pl-xl-5 {
    padding-left: min(5vw, 50px) !important;
  }
}

@media (min-width: 1500px) {
  .pl-xxl-5 {
    padding-left: min(5vw, 50px) !important;
  }
}

.pl-6 {
  padding-left: min(6vw, 60px) !important;
}

.p-6 {
  padding-left: min(6vw, 60px) !important;
}

@media (min-width: 576px) {
  .pl-sm-6 {
    padding-left: min(6vw, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-sm-6 {
    padding-left: min(6vw, 60px) !important;
  }
}

@media (min-width: 768px) {
  .pl-md-6 {
    padding-left: min(6vw, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-md-6 {
    padding-left: min(6vw, 60px) !important;
  }
}

@media (min-width: 992px) {
  .pl-lg-6 {
    padding-left: min(6vw, 60px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-lg-6 {
    padding-left: min(6vw, 60px) !important;
  }
}

@media (min-width: 1200px) {
  .pl-xl-6 {
    padding-left: min(6vw, 60px) !important;
  }
}

@media (min-width: 1500px) {
  .pl-xxl-6 {
    padding-left: min(6vw, 60px) !important;
  }
}

.pl-7 {
  padding-left: min(7vw, 70px) !important;
}

.p-7 {
  padding-left: min(7vw, 70px) !important;
}

@media (min-width: 576px) {
  .pl-sm-7 {
    padding-left: min(7vw, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-sm-7 {
    padding-left: min(7vw, 70px) !important;
  }
}

@media (min-width: 768px) {
  .pl-md-7 {
    padding-left: min(7vw, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-md-7 {
    padding-left: min(7vw, 70px) !important;
  }
}

@media (min-width: 992px) {
  .pl-lg-7 {
    padding-left: min(7vw, 70px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-lg-7 {
    padding-left: min(7vw, 70px) !important;
  }
}

@media (min-width: 1200px) {
  .pl-xl-7 {
    padding-left: min(7vw, 70px) !important;
  }
}

@media (min-width: 1500px) {
  .pl-xxl-7 {
    padding-left: min(7vw, 70px) !important;
  }
}

.pl-8 {
  padding-left: min(8vw, 80px) !important;
}

.p-8 {
  padding-left: min(8vw, 80px) !important;
}

@media (min-width: 576px) {
  .pl-sm-8 {
    padding-left: min(8vw, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-sm-8 {
    padding-left: min(8vw, 80px) !important;
  }
}

@media (min-width: 768px) {
  .pl-md-8 {
    padding-left: min(8vw, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-md-8 {
    padding-left: min(8vw, 80px) !important;
  }
}

@media (min-width: 992px) {
  .pl-lg-8 {
    padding-left: min(8vw, 80px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-lg-8 {
    padding-left: min(8vw, 80px) !important;
  }
}

@media (min-width: 1200px) {
  .pl-xl-8 {
    padding-left: min(8vw, 80px) !important;
  }
}

@media (min-width: 1500px) {
  .pl-xxl-8 {
    padding-left: min(8vw, 80px) !important;
  }
}

.pl-9 {
  padding-left: min(9vw, 90px) !important;
}

.p-9 {
  padding-left: min(9vw, 90px) !important;
}

@media (min-width: 576px) {
  .pl-sm-9 {
    padding-left: min(9vw, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-sm-9 {
    padding-left: min(9vw, 90px) !important;
  }
}

@media (min-width: 768px) {
  .pl-md-9 {
    padding-left: min(9vw, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-md-9 {
    padding-left: min(9vw, 90px) !important;
  }
}

@media (min-width: 992px) {
  .pl-lg-9 {
    padding-left: min(9vw, 90px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-lg-9 {
    padding-left: min(9vw, 90px) !important;
  }
}

@media (min-width: 1200px) {
  .pl-xl-9 {
    padding-left: min(9vw, 90px) !important;
  }
}

@media (min-width: 1500px) {
  .pl-xxl-9 {
    padding-left: min(9vw, 90px) !important;
  }
}

.pl-10 {
  padding-left: min(10vw, 100px) !important;
}

.p-10 {
  padding-left: min(10vw, 100px) !important;
}

@media (min-width: 576px) {
  .pl-sm-10 {
    padding-left: min(10vw, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-sm-10 {
    padding-left: min(10vw, 100px) !important;
  }
}

@media (min-width: 768px) {
  .pl-md-10 {
    padding-left: min(10vw, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-md-10 {
    padding-left: min(10vw, 100px) !important;
  }
}

@media (min-width: 992px) {
  .pl-lg-10 {
    padding-left: min(10vw, 100px) !important;
  }
}
@media screen and (max-height: 768px) {
  .pl-lg-10 {
    padding-left: min(10vw, 100px) !important;
  }
}

@media (min-width: 1200px) {
  .pl-xl-10 {
    padding-left: min(10vw, 100px) !important;
  }
}

@media (min-width: 1500px) {
  .pl-xxl-10 {
    padding-left: min(10vw, 100px) !important;
  }
}

/*_______________________COLOR___________________________ */
/*Background Alert Colors*/
.bg-primary {
  background-color: var(--primary-color) !important;
}

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

.bg-warning {
  background-color: var(--warning-color) !important;
}

.bg-danger {
  background-color: var(--danger-color) !important;
}

.bg-mild-danger {
  background-color: var(--mild-danger-color) !important;
}

.bg-success {
  background-color: var(--success-color) !important;
}

.bg-success-light {
  background-color: var(--success-color-light) !important;
}

.bg-dark {
  background-color: var(--dark-color) !important;
}

.bg-light {
  background-color: var(--light-background-color) !important;
}

.bg-info {
  background-color: var(--info-color) !important;
}

.bg-olive {
  background-color: var(--olive-background-color) !important;
}

.bg-light-pink {
  background-color: var(--light-pink-background-color) !important;
}

.bg-pink {
  background-color: var(--pink-background-color) !important;
}

.bg-light-beige {
  background-color: var(--neutral-150) !important;
}

.bg-beige {
  background-color: var(--neutral-300) !important;
}

.bg-yellow {
  background-color: var(--yellow-background-color) !important;
}

.bg-light-yellow {
  background-color: var(--neutral-200) !important;
}

.bg-olive-1 {
  background-color: var(--olive-1-background-color) !important;
}

.bg-olive-2 {
  background-color: var(--olive-2-background-color) !important;
}

.bg-white {
  background-color: var(--white-color) !important;
}

.bg-pure-white {
  background-color: var(--neutral-100) !important;
}

.bg-putty {
  background-color: var(--neutral-400) !important;
}

/*Shadows*/
.shadowed {
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}
.shadowed-inset {
  box-shadow: inset 0 0 20px 0px var(--tile-shadow-color);
}

/*_____________UNIVERSAL FLASHCARD STYLES _________________*/
.flashcard {
  width: 18vw;
  height: calc(
        18vw * 1.25
    );
  min-height: 200px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--light-background-color);
  border-radius: 1rem;
  box-shadow: 1px 1px 0px 12px var(--flashcard-border-color);
  color: var(--black-text-color);
  justify-content: space-between;
  align-content: center;
  margin: 2vw;
  backface-visibility: hidden;
  isolation: isolate;
}
@media screen and (min-width: 2557px) {
  .flashcard {
    box-shadow: 1px 1px 0px 26px var(--flashcard-border-color);
    border-radius: 3.6rem;
  }
}
@media screen and (max-height: 768px) {
  .flashcard {
    width: calc(18vw - 2vw);
    height: calc(18vw * 1.25 - 2vw);
  }
}
.flashcard .card-click-area {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 0;
}
.flashcard.card-back {
  background-image: url("/images/pages/flashcards/flashcards-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  border: none;
  backface-visibility: hidden;
}
.flashcard.card-back .card-click-area {
  z-index: 3;
}
.flashcard.card-back .flashcard-text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.flashcard.card-back .flashcard-text h4,
.flashcard.card-back .flashcard-text h5,
.flashcard.card-back .flashcard-text h6,
.flashcard.card-back .flashcard-text p {
  background-color: var(--light-background-color);
  border-radius: 0.2rem;
  line-height: 1rem;
  transform: perspective(10px) rotateX(-1deg);
  padding: 0.8rem 0.8rem;
  align-self: center;
  width: 90%;
  margin: 1rem auto;
}
.flashcard.card-back .flashcard-text h4 {
  padding: 2rem 0.8rem;
  box-shadow: 12px 12px 0px var(--core-color-dark);
  font-size: 200%;
  margin-top: 30px;
  margin-bottom: 0px;
  line-height: 2rem;
}
.flashcard.card-back .flashcard-text h5 {
  box-shadow: 12px 12px 0px var(--core-color-dark);
  font-size: larger;
}
.flashcard.card-back .flashcard-type {
  height: 0%;
}
.flashcard.large .flashcard-img {
  max-height: 22em;
}
.flashcard.large .flashcard-img img {
  max-height: 16em;
}
.flashcard:hover {
  background-color: var(--light-background-color);
  color: var(--black-text-color);
}
@media only screen and (max-width: 1920px) {
  .flashcard .video-btn {
    transform: translate(0.1vw, -0.1vh);
  }
}
@media only screen and (max-width: 1600px) {
  .flashcard .video-btn {
    transform: translate(0.1vw, -0.4vh);
  }
}
@media (max-width: 1499.98px) {
  .flashcard .video-btn {
    transform: translate(0.1vw, -1vh);
  }
}
@media only screen and (max-width: 1920px) {
  .flashcard .audio-btn {
    transform: translate(0.1vw, 0.17vh);
  }
}
@media only screen and (max-width: 1600px) {
  .flashcard .audio-btn {
    transform: translate(0.1vw, 0.1vh);
  }
}
.flashcard .audio-btn,
.flashcard .video-btn {
  background-color: var(--flashcard-btn-color);
  border-top-left-radius: 1.2rem;
  border-bottom-right-radius: 0.8rem;
  border: none;
  transition: background-color ease-in-out 0.1s;
  align-self: flex-end;
  padding: 0;
}
@media screen and (min-width: 3000px) {
  .flashcard .audio-btn,
  .flashcard .video-btn {
    border-bottom-right-radius: 3rem;
  }
}
.flashcard .audio-btn:hover, .flashcard .audio-btn.hover,
.flashcard .video-btn:hover,
.flashcard .video-btn.hover {
  background-color: var(--core-color-light);
}
.flashcard .audio-btn:focus, .flashcard .audio-btn.focus,
.flashcard .video-btn:focus,
.flashcard .video-btn.focus {
  background-color: var(--core-color-light);
  border: none;
  box-shadow: none !important;
}
.flashcard .audio-btn:not(:disabled):not(.disabled):active, .flashcard .audio-btn:not(:disabled):not(.disabled).active,
.flashcard .video-btn:not(:disabled):not(.disabled):active,
.flashcard .video-btn:not(:disabled):not(.disabled).active {
  background-color: var(--core-color-light);
}
.flashcard .audio-btn:empty,
.flashcard .video-btn:empty {
  display: none;
}
.flashcard .audio-btn button,
.flashcard .audio-btn .btn,
.flashcard .video-btn button,
.flashcard .video-btn .btn {
  background-color: transparent;
  border: none;
  transition: background-color ease-in-out 0.1s;
  align-self: flex-end;
  margin-right: 0px;
  padding: 0.8vw 0.6vw 0.6vw 0.8vw;
}
.flashcard .audio-btn button:focus, .flashcard .audio-btn button.focus,
.flashcard .audio-btn .btn:focus,
.flashcard .audio-btn .btn.focus,
.flashcard .video-btn button:focus,
.flashcard .video-btn button.focus,
.flashcard .video-btn .btn:focus,
.flashcard .video-btn .btn.focus {
  box-shadow: none !important;
}
.flashcard .audio-btn .btn-light:not(:disabled):not(.disabled).active,
.flashcard .audio-btn .btn-light:not(:disabled):not(.disabled):active,
.flashcard .audio-btn .show > .btn-light.dropdown-toggle,
.flashcard .video-btn .btn-light:not(:disabled):not(.disabled).active,
.flashcard .video-btn .btn-light:not(:disabled):not(.disabled):active,
.flashcard .video-btn .show > .btn-light.dropdown-toggle {
  background-color: var(--light-background-color-darker);
  border-color: var(--neutral-400);
}
.flashcard .audio-btn .btn-light.focus,
.flashcard .audio-btn .btn-light:focus,
.flashcard .video-btn .btn-light.focus,
.flashcard .video-btn .btn-light:focus {
  box-shadow: 0 0 0 0.2rem var(--light-background-color-darker);
}
.flashcard .video-btn {
  border-bottom-left-radius: 1.2rem;
  border-top-left-radius: 0rem;
  border-top-right-radius: 0.8rem;
  border-bottom-right-radius: 0rem;
  color: var(--light-text-color);
}
@media screen and (min-width: 3000px) {
  .flashcard .video-btn {
    border-top-right-radius: 3rem;
  }
}
.flashcard .video-btn .btn {
  color: var(--light-text-color);
  padding: 0.6vw 0.6vw 0.8vw 0.8vw;
}
.flashcard .journal-btn {
  background-color: var(--secondary-color);
  border-radius: 50%;
  border: none;
  transition: background-color ease-in-out 0.1s;
  align-self: center;
  padding: 0;
  z-index: 9999;
}
.flashcard .journal-btn:hover, .flashcard .journal-btn.hover {
  background-color: var(--secondary-color-lighter);
}
.flashcard .journal-btn:focus, .flashcard .journal-btn.focus {
  background-color: var(--secondary-color-lighter);
  border: none;
  box-shadow: none !important;
}
.flashcard .journal-btn:not(:disabled):not(.disabled):active, .flashcard .journal-btn:not(:disabled):not(.disabled).active {
  background-color: var(--secondary-color-lighter);
}
.flashcard .journal-btn:empty {
  display: none;
}
.flashcard .journal-btn button,
.flashcard .journal-btn .btn {
  background-color: transparent;
  border: none;
  transition: background-color ease-in-out 0.1s;
  align-self: flex-end;
  margin-right: 0px !important;
  padding: 10px;
}
.flashcard .journal-btn button:focus, .flashcard .journal-btn button.focus,
.flashcard .journal-btn .btn:focus,
.flashcard .journal-btn .btn.focus {
  box-shadow: none !important;
}

/*Top of Card*/
.flashcard-top {
  display: flex;
  justify-content: space-between;
  z-index: 2;
}

/*Displays icons to indicate inanimate vs animate vs neutral */
.flashcard-type {
  background-image: url(/images/pages/flashcards/flashcards-ribbon.svg);
  background-repeat: no-repeat;
  background-position: 100%;
  padding: 0 1.2vw 0 0;
  display: flex;
  align-content: center;
  overflow: hidden;
  transform: translate(-1px, 10px);
}
@media screen and (min-width: 1921px) {
  .flashcard-type {
    transform: translate(-0.1vw, 1vh);
    background-size: contain;
  }
}
@media screen and (min-width: 4000px) {
  .flashcard-type {
    transform: translate(-0.3vw, 1vh);
    background-size: contain;
  }
}
.flashcard-type .flashcard-icon img.flashcard-neutral {
  padding-left: min(2vw, 20px);
  padding-right: min(2vw, 20px);
}
@media screen and (max-height: 1399px) {
  .flashcard-type .flashcard-icon img.flashcard-neutral {
    padding-left: 10px;
    padding-right: 18px;
  }
}
@media screen and (min-width: 1400px) {
  .flashcard-type .flashcard-icon img.flashcard-neutral {
    padding-left: min(0.5vw, 20px);
    padding-right: min(0.5vw, 20px);
  }
}
@media screen and (min-width: 1921px) {
  .flashcard-type .flashcard-icon img.flashcard-neutral {
    padding-left: min(0.5vw, 20px);
    padding-right: min(0.5vw, 20px);
    height: 75px;
    width: 75px;
  }
}
@media screen and (min-width: 2557px) {
  .flashcard-type .flashcard-icon img.flashcard-neutral {
    padding-left: min(0.5vw, 20px);
    padding-right: min(0.5vw, 20px);
    height: 100px;
    width: 100px;
  }
}

.flashcard-icon img,
.flashcard-icon svg {
  height: 50px;
  width: 50px;
  padding: 2px;
}

/*Body of Card*/
.flashcard-body {
  flex-direction: column;
  display: flex;
  flex: 0 1 auto;
  flex-shrink: 1;
  min-height: 0;
  min-width: 0;
  padding: 10px;
}

.flashcard-img {
  height: 100%;
  width: auto;
  align-self: center;
  justify-self: center;
  min-height: 0;
  min-width: 0;
  max-width: 18vw;
}

/*Flashcard Text Container*/
.flashcard-text {
  text-align: center;
  word-break: break-word;
}
.flashcard-text h4 {
  font-size: 1.8vw;
  margin-bottom: 0;
}
.flashcard-text h4:empty {
  display: none;
}
.flashcard-text h4.smaller {
  font-size: 1.125vw;
}
.flashcard-text h5 {
  color: var(--dark-text-color);
  font-size: 1.125vw;
  padding-top: 0.4em;
  margin-bottom: 0;
}
.flashcard-text h5:empty {
  display: none;
}
.flashcard-text h5.smaller {
  font-size: 0.9vw;
}
.flashcard-text h6 {
  color: var(--muted-text-color);
  font-size: 0.9vw;
  padding-top: 0em;
}
.flashcard-text h6:empty {
  display: none;
}
.flashcard-text h6.smaller {
  font-size: 0.75vw;
}

/*Bottom of Card*/
.flashcard-bottom {
  display: flex;
  justify-content: flex-end;
  min-height: 4vh;
  z-index: 2;
}

/*Card Flip Animations*/
.front-flip {
  animation: flip-front 0.1s linear;
  backface-visibility: hidden;
  animation-fill-mode: forwards;
}
@keyframes flip-front {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(89.5deg);
  }
}

.back-flip {
  animation: flip-back 0.1s linear;
  backface-visibility: hidden;
  animation-fill-mode: forwards;
}
@keyframes flip-back {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-89.5deg);
  }
}

.none-front {
  animation: flip-none-front 0.1s linear;
  backface-visibility: hidden;
  animation-fill-mode: forwards;
}
@keyframes flip-none-front {
  0% {
    transform: rotateY(-89.5deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.none-back {
  animation: flip-none-back 0.1s linear;
  backface-visibility: hidden;
  animation-fill-mode: forwards;
}
@keyframes flip-none-back {
  0% {
    transform: rotateY(89.5deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.game-layout .label-container {
  width: 100%;
}

.difficulty-container {
  padding: 15px;
}

/*_____________BUTTONS_________________*/
.btn, .button, button {
  border-radius: 1.8rem;
  font-family: "Cubano", sans-serif;
  margin-right: 5px;
  color: var(--light-text-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary {
  color: var(--light-text-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: 5px 4px 0 1px var(--primary-color-dark);
  margin-bottom: 5px;
  transition: all ease 0.3s;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.focus, .btn-primary.active {
  color: var(--neutral-300);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: 2px 2px 0 1px var(--primary-color-dark);
  outline: var(--primary-color);
}
.btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
  color: var(--neutral-300);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: 2px 2px 0 1px var(--primary-color-dark);
  outline: var(--primary-color);
}
.btn-primary:disabled, .btn-primary.disabled {
  color: var(--neutral-300);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  box-shadow: 2px 2px 0 1px var(--primary-color-dark);
  opacity: 78%;
}
.btn-primary.focus, .btn-primary:focus {
  box-shadow: var(--primary-color-dark);
}
.btn-primary.btn-paper {
  border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
}

.btn-secondary {
  color: var(--primary-color);
  background-color: var(--accent-color-7-light);
  border-color: var(--accent-color-7-light);
  box-shadow: 5px 4px 0 1px var(--primary-color);
  margin-bottom: 5px;
  transition: all ease 0.3s;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.focus, .btn-secondary.active {
  color: var(--primary-color);
  background-color: var(--accent-color-7-light);
  border-color: var(--accent-color-7-light);
  box-shadow: 2px 2px 0 1px var(--primary-color);
}
.btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
  color: var(--primary-color);
  background-color: var(--accent-color-7-light);
  border-color: var(--accent-color-7-light);
  box-shadow: 2px 2px 0 1px var(--primary-color);
}
.btn-secondary.focus, .btn-secondary:focus {
  box-shadow: 2px 2px 0 1px var(--primary-color);
}
.btn-secondary.btn-paper {
  border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
}

.btn-success {
  color: var(--light-text-color);
  background-color: var(--success-color);
  border-color: var(--success-color);
  box-shadow: 5px 4px 0 1px var(--success-color-dark);
  margin-bottom: 5px;
  transition: all ease 0.3s;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.focus, .btn-success.active {
  background-color: var(--success-color-medium);
  border-color: var(--success-color-medium);
  box-shadow: 2px 2px 0 1px var(--success-color-dark);
}
.btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle {
  color: var(--light-text-color);
  background-color: var(--success-color);
  border-color: var(--success-color);
  box-shadow: 2px 2px 0 1px var(--success-color-dark);
}
.btn-success:disabled, .btn-success.disabled {
  color: var(--light-text-color);
  background-color: var(--success-color);
  border-color: var(--success-color);
  box-shadow: 2px 2px 0 1px var(--success-color-dark);
  opacity: 78%;
}
.btn-success.focus, .btn-success:focus {
  box-shadow: 2px 2px 0 1px var(--success-color-dark);
}
.btn-success.btn-paper {
  border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
}

.btn-super-success {
  color: var(--light-text-color);
  background-color: var(--super-success-color);
  border-color: var(--super-success-color);
  box-shadow: 5px 4px 0 1px var(--super-success-color-medium);
  margin-bottom: 5px;
  transition: all ease 0.3s;
}
.btn-super-success:hover, .btn-super-success:focus, .btn-super-success:active, .btn-super-success.focus, .btn-super-success.active {
  background-color: var(--super-success-color-medium);
  border-color: var(--super-success-color-medium);
  box-shadow: 2px 2px 0 1px var(--super-success-color-dark);
  color: var(--white-text-color);
}
.btn-super-success:not(:disabled):not(.disabled):active, .show > .btn-super-success.dropdown-toggle {
  color: var(--light-text-color);
  background-color: var(--super-success-color);
  border-color: var(--super-success-color);
  box-shadow: 2px 2px 0 1px var(--success-color-dark);
}
.btn-super-success.focus, .btn-super-success:focus {
  box-shadow: 2px 2px 0 1px var(--success-color-dark);
}
.btn-super-success.btn-paper {
  border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
}
.btn-super-success:disabled, .btn-super-success.disabled {
  color: var(--light-text-color);
  background-color: var(--super-success-color);
  border-color: var(--super-success-color);
  box-shadow: 2px 2px 0 1px var(--success-color-dark);
  opacity: 50%;
}

.btn-danger {
  color: var(--light-text-color);
  background-color: var(--danger-color);
  border-color: var(--danger-color);
  box-shadow: 5px 4px 0 1px var(--danger-color-dark);
  margin-bottom: 5px;
  transition: all ease 0.3s;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.focus, .btn-danger.active {
  background-color: var(--danger-color-medium);
  border-color: var(--danger-color-medium);
  box-shadow: 2px 2px 0 1px var(--danger-color);
}
.btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle {
  color: var(--light-text-color);
  background-color: var(--danger-color-medium);
  border-color: var(--danger-color-medium);
  box-shadow: 2px 2px 0 1px var(--danger-color);
}
.btn-danger.focus, .btn-danger:focus {
  box-shadow: 2px 2px 0 1px var(--danger-color);
}
.btn-danger:disabled, .btn-danger.disabled {
  color: var(--light-text-color);
  background-color: var(--danger-color-medium);
  border-color: var(--danger-color-medium);
  box-shadow: 2px 2px 0 1px var(--danger-color);
  opacity: 50%;
}
.btn-danger.btn-paper {
  border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
}

.btn-mild-danger {
  color: var(--light-text-color);
  background-color: var(--mild-danger-color);
  border-color: var(--mild-danger-color);
  box-shadow: 5px 4px 0 1px var(--mild-danger-color-dark);
  margin-bottom: 5px;
  transition: all ease 0.3s;
}
.btn-mild-danger:hover, .btn-mild-danger:focus, .btn-mild-danger:active, .btn-mild-danger.focus, .btn-mild-danger.active {
  background-color: var(--mild-danger-color-medium);
  border-color: var(--mild-danger-color-medium);
  box-shadow: 2px 2px 0 1px var(--mild-danger-color-dark);
}
.btn-mild-danger:not(:disabled):not(.disabled):active, .show > .btn-mild-danger.dropdown-toggle {
  color: var(--light-text-color);
  background-color: var(--mild-danger-color-medium);
  border-color: var(--mild-danger-color-medium);
  box-shadow: 2px 2px 0 1px var(--mild-danger-color-dark);
}
.btn-mild-danger:disabled, .btn-mild-danger.disabled {
  color: var(--light-text-color);
  background-color: var(--mild-danger-color-medium);
  border-color: var(--mild-danger-color-medium);
  box-shadow: 2px 2px 0 1px var(--mild-danger-color-dark);
  opacity: 50%;
}
.btn-mild-danger.focus, .btn-mild-danger:focus {
  box-shadow: 2px 2px 0 1px var(--mild-danger-color-dark);
}
.btn-mild-danger.btn-paper {
  border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
}

.btn-warning {
  color: var(--light-text-color);
  background-color: var(--warning-color);
  border-color: var(--warning-color);
  box-shadow: 5px 4px 0 1px var(--warning-color-medium);
  margin-bottom: 5px;
  transition: all ease 0.3s;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.focus, .btn-warning.active {
  background-color: var(--warning-color-dark);
  border-color: var(--warning-color-dark);
  box-shadow: 2px 2px 0 1px var(--warning-color-medium);
}
.btn-warning:not(:disabled):not(.disabled):active, .show > .btn-warning.dropdown-toggle {
  color: var(--light-text-color);
  background-color: var(--warning-color-dark);
  border-color: var(--warning-color-dark);
  box-shadow: 2px 2px 0 1px var(--warning-color-medium);
}
.btn-warning:disabled, .btn-warning.disabled {
  color: var(--light-text-color);
  background-color: var(--warning-color-dark);
  border-color: var(--warning-color-dark);
  box-shadow: 2px 2px 0 1px var(--warning-color-medium);
  opacity: 50%;
}
.btn-warning.focus, .btn-warning:focus {
  box-shadow: 2px 2px 0 1px var(--warning-color-medium);
}
.btn-warning.btn-paper {
  border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
}

.btn-info {
  color: var(--accent-color-7-light);
  background-color: var(--info-color);
  border: 2px solid var(--accent-color-7-light);
  box-shadow: 5px 4px 0 1px var(--info-color);
  margin-bottom: 5px;
  transition: all ease 0.3s;
}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.focus, .btn-info.active {
  color: var(--accent-color-7-light);
  background-color: var(--info-color);
  border: 2px solid var(--accent-color-7-light);
  box-shadow: 2px 2px 0 1px var(--info-color);
}
.btn-info:not(:disabled):not(.disabled):active, .show > .btn-info.dropdown-toggle {
  color: var(--accent-color-7-light);
  background-color: var(--info-color);
  border: 2px solid var(--accent-color-7-light);
  box-shadow: 2px 2px 0 1px var(--info-color);
}
.btn-info:disabled, .btn-info.disabled {
  color: var(--accent-color-7-light);
  background-color: var(--info-color);
  border: 2px solid var(--accent-color-7-light);
  box-shadow: 2px 2px 0 1px var(--info-color);
  opacity: 50%;
}
.btn-info.focus, .btn-info:focus {
  box-shadow: 2px 2px 0 1px var(--info-color);
}
.btn-info.btn-paper {
  border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
}

.btn-light {
  color: var(--light-color);
  background-color: var(--neutral-200);
  border: 2px solid var(--light-color);
  box-shadow: 5px 4px 0 1px var(--light-color);
  margin-bottom: 5px;
  transition: all ease 0.3s;
}
.btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.focus, .btn-light.active {
  color: var(--light-color);
  background-color: var(--neutral-300);
  border-color: var(--light-color);
  box-shadow: 2px 2px 0 1px var(--light-color);
}
.btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle {
  color: var(--light-color);
  background-color: var(--accent-color-7-light);
  border-color: var(--light-color);
  box-shadow: 2px 2px 0 1px var(--light-color);
}
.btn-light:disabled, .btn-light.disabled {
  color: var(--light-color);
  background-color: var(--accent-color-7-light);
  border-color: var(--light-color);
  box-shadow: 2px 2px 0 1px var(--light-color);
  opacity: 50%;
}
.btn-light.focus, .btn-light:focus {
  box-shadow: 2px 2px 0 1px var(--light-color);
}
.btn-light.btn-paper {
  border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
}

.btn-dark {
  color: var(--accent-color-7-light);
  background-color: var(--dark-color);
  border: 2px solid var(--accent-color-7-light);
  box-shadow: 5px 4px 0 1px var(--accent-color-7-light);
  margin-bottom: 5px;
  transition: all ease 0.3s;
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.focus, .btn-dark.active {
  color: var(--accent-color-7-light);
  background-color: var(--dark-color-dark);
  border-color: var(--accent-color-7-light);
  box-shadow: 2px 2px 0 1px var(--accent-color-7-light);
}
.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show > .btn-dark.dropdown-toggle {
  color: var(--accent-color-7-light);
  background-color: var(--dark-color-dark);
  border-color: var(--accent-color-7-light);
  box-shadow: 2px 2px 0 1px var(--accent-color-7-light);
}
.btn-dark:disabled, .btn-dark.disabled {
  color: var(--accent-color-7-light);
  background-color: var(--dark-color-dark);
  border-color: var(--accent-color-7-light);
  box-shadow: 2px 2px 0 1px var(--accent-color-7-light);
  opacity: 50%;
}
.btn-dark.focus, .btn-dark:focus {
  box-shadow: 2px 2px 0 1px var(--accent-color-7-light);
}
.btn-dark.btn-paper {
  border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
}

.btn-link,
a.btn-link {
  color: var(--dark-color-dark);
  border-radius: 0rem;
  border: 2px solid transparent;
  transition: all ease 0.3s;
  background-color: transparent;
}
.btn-link:hover, .btn-link:focus, .btn-link:active, .btn-link.focus, .btn-link.active,
a.btn-link:hover,
a.btn-link:focus,
a.btn-link:active,
a.btn-link.focus,
a.btn-link.active {
  text-decoration: none;
  color: var(--dark-color);
  border-radius: 0rem;
  border-bottom: 2px solid var(--dark-color);
  padding-top: 0px;
}
.btn-link:not(:disabled):not(.disabled).active, .btn-link:not(:disabled):not(.disabled):active, .show > .btn-link.dropdown-toggle,
a.btn-link:not(:disabled):not(.disabled).active,
a.btn-link:not(:disabled):not(.disabled):active,
.show > a.btn-link.dropdown-toggle {
  text-decoration: none;
  color: var(--dark-color);
  border-radius: 0rem;
}
.btn-link:disabled, .btn-link.disabled,
a.btn-link:disabled,
a.btn-link.disabled {
  text-decoration: none;
  color: var(--dark-color);
  border-radius: 0rem;
  border-bottom: 2px solid var(--dark-color);
  padding-top: 0px;
  opacity: 50%;
}
.btn-link.focus, .btn-link:focus,
a.btn-link.focus,
a.btn-link:focus {
  border-bottom: 2px solid var(--dark-color);
  border-radius: 0rem;
}

/*Outlined Buttons*/
.btn-outline-primary {
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  box-shadow: 5px 4px 0 1px var(--primary-color);
  margin-bottom: 5px;
  background-color: transparent;
  transition: all ease 0.3s;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.focus, .btn-outline-primary.active {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background-color: transparent;
  box-shadow: 2px 2px 0 1px var(--primary-color);
}
.btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background-color: transparent;
  box-shadow: 2px 2px 0 1px var(--primary-color);
  opacity: 75%;
}
.btn-outline-primary.focus, .btn-outline-primary:focus {
  box-shadow: 2px 2px 0 1px var(--primary-color);
  background-color: transparent;
}

/*Plain Buttons*/
.btn-plain-primary {
  color: var(--dark-color-dark);
  border: 2px solid var(--primary-color);
  background-color: var(--primary-color);
  transition: all ease 0.3s;
}
.btn-plain-primary:hover, .btn-plain-primary:focus, .btn-plain-primary:active, .btn-plain-primary.focus, .btn-plain-primary.active {
  border-color: var(--primary-color);
  background-color: var(var(--primary-color) -light);
}
.btn-plain-primary:not(:disabled):not(.disabled).active, .btn-plain-primary:not(:disabled):not(.disabled):active, .show > .btn-plain-primary.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-primary.focus, .btn-plain-primary:focus {
  background-color: var(--light-color);
}

.btn-plain-secondary {
  color: var(--dark-color-dark);
  border: 2px solid var(--secondary-color);
  background-color: var(--secondary-color);
  transition: all ease 0.3s;
}
.btn-plain-secondary:hover, .btn-plain-secondary:focus, .btn-plain-secondary:active, .btn-plain-secondary.focus, .btn-plain-secondary.active {
  border-color: var(--secondary-color);
  background-color: var(var(--secondary-color) -light);
}
.btn-plain-secondary:not(:disabled):not(.disabled).active, .btn-plain-secondary:not(:disabled):not(.disabled):active, .show > .btn-plain-secondary.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-secondary.focus, .btn-plain-secondary:focus {
  background-color: var(--light-color);
}

.btn-plain-success {
  color: var(--dark-color-dark);
  border: 2px solid var(--success-color);
  background-color: var(--success-color);
  transition: all ease 0.3s;
}
.btn-plain-success:hover, .btn-plain-success:focus, .btn-plain-success:active, .btn-plain-success.focus, .btn-plain-success.active {
  border-color: var(--success-color);
  background-color: var(var(--success-color) -light);
}
.btn-plain-success:not(:disabled):not(.disabled).active, .btn-plain-success:not(:disabled):not(.disabled):active, .show > .btn-plain-success.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-success.focus, .btn-plain-success:focus {
  background-color: var(--light-color);
}

.btn-plain-warning {
  color: var(--dark-color-dark);
  border: 2px solid var(--warning-color);
  background-color: var(--warning-color);
  transition: all ease 0.3s;
}
.btn-plain-warning:hover, .btn-plain-warning:focus, .btn-plain-warning:active, .btn-plain-warning.focus, .btn-plain-warning.active {
  border-color: var(--warning-color);
  background-color: var(var(--warning-color) -light);
}
.btn-plain-warning:not(:disabled):not(.disabled).active, .btn-plain-warning:not(:disabled):not(.disabled):active, .show > .btn-plain-warning.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-warning.focus, .btn-plain-warning:focus {
  background-color: var(--light-color);
}

.btn-plain-info {
  color: var(--dark-color-dark);
  border: 2px solid var(--info-color);
  background-color: var(--info-color);
  transition: all ease 0.3s;
}
.btn-plain-info:hover, .btn-plain-info:focus, .btn-plain-info:active, .btn-plain-info.focus, .btn-plain-info.active {
  border-color: var(--info-color);
  background-color: var(var(--info-color) -light);
}
.btn-plain-info:not(:disabled):not(.disabled).active, .btn-plain-info:not(:disabled):not(.disabled):active, .show > .btn-plain-info.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-info.focus, .btn-plain-info:focus {
  background-color: var(--light-color);
}

.btn-plain-danger {
  color: var(--dark-color-dark);
  border: 2px solid var(--danger-color);
  background-color: var(--danger-color);
  transition: all ease 0.3s;
}
.btn-plain-danger:hover, .btn-plain-danger:focus, .btn-plain-danger:active, .btn-plain-danger.focus, .btn-plain-danger.active {
  border-color: var(--danger-color);
  background-color: var(var(--danger-color) -light);
}
.btn-plain-danger:not(:disabled):not(.disabled).active, .btn-plain-danger:not(:disabled):not(.disabled):active, .show > .btn-plain-danger.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-danger.focus, .btn-plain-danger:focus {
  background-color: var(--light-color);
}

.btn-plain-light {
  color: var(--dark-color-dark);
  border: 2px solid var(--light-color);
  background-color: var(--light-color);
  transition: all ease 0.3s;
}
.btn-plain-light:hover, .btn-plain-light:focus, .btn-plain-light:active, .btn-plain-light.focus, .btn-plain-light.active {
  border-color: var(--light-color);
  background-color: var(var(--light-color) -light);
}
.btn-plain-light:not(:disabled):not(.disabled).active, .btn-plain-light:not(:disabled):not(.disabled):active, .show > .btn-plain-light.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-light.focus, .btn-plain-light:focus {
  background-color: var(--light-color);
}

.btn-plain-dark {
  color: var(--dark-color-dark);
  border: 2px solid var(--dark-color);
  background-color: var(--dark-color);
  transition: all ease 0.3s;
}
.btn-plain-dark:hover, .btn-plain-dark:focus, .btn-plain-dark:active, .btn-plain-dark.focus, .btn-plain-dark.active {
  border-color: var(--dark-color);
  background-color: var(var(--dark-color) -light);
}
.btn-plain-dark:not(:disabled):not(.disabled).active, .btn-plain-dark:not(:disabled):not(.disabled):active, .show > .btn-plain-dark.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-dark.focus, .btn-plain-dark:focus {
  background-color: var(--light-color);
}

.btn-ribbon {
  background-image: url("/images/global/shapes/ribbon-bordered-orange.svg");
  background-position: 50% 50%;
  background-size: contain;
  padding: 1rem 1.75rem;
  background-repeat: no-repeat;
  background-color: transparent;
  border-color: transparent;
  transition: 0.3s;
  font-size: 1.5rem;
  font-family: henderson-slab-basic, serif;
  border-radius: 0%;
  color: var(--light-text-color);
  box-shadow: none !important;
}
.btn-ribbon:hover {
  transform: scale(1.2);
  color: var(--light-text-color);
  background-color: transparent;
  border-color: transparent;
}
.btn-ribbon.focus, .btn-ribbon:focus {
  box-shadow: 0 0 0 0.2rem transparent;
  background-color: transparent;
  border: transparent;
}
.btn-ribbon > span {
  margin: 0em 0.5em;
}
.btn-ribbon.btn-lg {
  padding: 1rem 2rem;
}
.btn-ribbon.btn-green {
  background-image: url("/images/global/shapes/ribbon-bordered-green.svg");
  color: var(--light-text-color);
}
.btn-ribbon.btn-blue {
  background-image: url("/images/global/shapes/ribbon-bordered-blue.svg");
  color: var(--light-text-color);
}
.btn-ribbon.btn-yellow {
  background-image: url("/images/global/shapes/ribbon-bordered-yellow.svg");
  color: var(--body-font-color);
}
.btn-ribbon.btn-yellow:hover {
  color: var(--body-font-color);
}

.btn-ribbon:not(:disabled):not(.disabled).active,
.btn-ribbon:not(:disabled):not(.disabled):active,
.show > .btn-ribbon.dropdown-toggle {
  color: var(--white-text-color);
  background-color: transparent;
  border-color: transparent;
}

.btn-ribbon:not(:disabled):not(.disabled).active:focus,
.btn-ribbon:not(:disabled):not(.disabled):active:focus,
.show > .btn-ribbon.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem transparent;
}

.btn-outline-secondary {
  color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
  box-shadow: 5px 4px 0 1px var(--secondary-color);
  margin-bottom: 5px;
  background-color: transparent;
  transition: all ease 0.3s;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary.focus, .btn-outline-secondary.active {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
  background-color: transparent;
  box-shadow: 2px 2px 0 1px var(--secondary-color);
}
.btn-outline-secondary:not(:disabled):not(.disabled):active, .show > .btn-outline-secondary.dropdown-toggle {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
  background-color: transparent;
  box-shadow: 2px 2px 0 1px var(--secondary-color);
  opacity: 75%;
}
.btn-outline-secondary.focus, .btn-outline-secondary:focus {
  box-shadow: 2px 2px 0 1px var(--secondary-color);
  background-color: transparent;
}

/*Plain Buttons*/
.btn-plain-primary {
  color: var(--dark-color-dark);
  border: 2px solid var(--primary-color);
  background-color: var(--primary-color);
  transition: all ease 0.3s;
}
.btn-plain-primary:hover, .btn-plain-primary:focus, .btn-plain-primary:active, .btn-plain-primary.focus, .btn-plain-primary.active {
  border-color: var(--primary-color);
  background-color: var(var(--primary-color) -light);
}
.btn-plain-primary:not(:disabled):not(.disabled).active, .btn-plain-primary:not(:disabled):not(.disabled):active, .show > .btn-plain-primary.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-primary.focus, .btn-plain-primary:focus {
  background-color: var(--light-color);
}

.btn-plain-secondary {
  color: var(--dark-color-dark);
  border: 2px solid var(--secondary-color);
  background-color: var(--secondary-color);
  transition: all ease 0.3s;
}
.btn-plain-secondary:hover, .btn-plain-secondary:focus, .btn-plain-secondary:active, .btn-plain-secondary.focus, .btn-plain-secondary.active {
  border-color: var(--secondary-color);
  background-color: var(var(--secondary-color) -light);
}
.btn-plain-secondary:not(:disabled):not(.disabled).active, .btn-plain-secondary:not(:disabled):not(.disabled):active, .show > .btn-plain-secondary.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-secondary.focus, .btn-plain-secondary:focus {
  background-color: var(--light-color);
}

.btn-plain-success {
  color: var(--dark-color-dark);
  border: 2px solid var(--success-color);
  background-color: var(--success-color);
  transition: all ease 0.3s;
}
.btn-plain-success:hover, .btn-plain-success:focus, .btn-plain-success:active, .btn-plain-success.focus, .btn-plain-success.active {
  border-color: var(--success-color);
  background-color: var(var(--success-color) -light);
}
.btn-plain-success:not(:disabled):not(.disabled).active, .btn-plain-success:not(:disabled):not(.disabled):active, .show > .btn-plain-success.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-success.focus, .btn-plain-success:focus {
  background-color: var(--light-color);
}

.btn-plain-warning {
  color: var(--dark-color-dark);
  border: 2px solid var(--warning-color);
  background-color: var(--warning-color);
  transition: all ease 0.3s;
}
.btn-plain-warning:hover, .btn-plain-warning:focus, .btn-plain-warning:active, .btn-plain-warning.focus, .btn-plain-warning.active {
  border-color: var(--warning-color);
  background-color: var(var(--warning-color) -light);
}
.btn-plain-warning:not(:disabled):not(.disabled).active, .btn-plain-warning:not(:disabled):not(.disabled):active, .show > .btn-plain-warning.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-warning.focus, .btn-plain-warning:focus {
  background-color: var(--light-color);
}

.btn-plain-info {
  color: var(--dark-color-dark);
  border: 2px solid var(--info-color);
  background-color: var(--info-color);
  transition: all ease 0.3s;
}
.btn-plain-info:hover, .btn-plain-info:focus, .btn-plain-info:active, .btn-plain-info.focus, .btn-plain-info.active {
  border-color: var(--info-color);
  background-color: var(var(--info-color) -light);
}
.btn-plain-info:not(:disabled):not(.disabled).active, .btn-plain-info:not(:disabled):not(.disabled):active, .show > .btn-plain-info.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-info.focus, .btn-plain-info:focus {
  background-color: var(--light-color);
}

.btn-plain-danger {
  color: var(--dark-color-dark);
  border: 2px solid var(--danger-color);
  background-color: var(--danger-color);
  transition: all ease 0.3s;
}
.btn-plain-danger:hover, .btn-plain-danger:focus, .btn-plain-danger:active, .btn-plain-danger.focus, .btn-plain-danger.active {
  border-color: var(--danger-color);
  background-color: var(var(--danger-color) -light);
}
.btn-plain-danger:not(:disabled):not(.disabled).active, .btn-plain-danger:not(:disabled):not(.disabled):active, .show > .btn-plain-danger.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-danger.focus, .btn-plain-danger:focus {
  background-color: var(--light-color);
}

.btn-plain-light {
  color: var(--dark-color-dark);
  border: 2px solid var(--light-color);
  background-color: var(--light-color);
  transition: all ease 0.3s;
}
.btn-plain-light:hover, .btn-plain-light:focus, .btn-plain-light:active, .btn-plain-light.focus, .btn-plain-light.active {
  border-color: var(--light-color);
  background-color: var(var(--light-color) -light);
}
.btn-plain-light:not(:disabled):not(.disabled).active, .btn-plain-light:not(:disabled):not(.disabled):active, .show > .btn-plain-light.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-light.focus, .btn-plain-light:focus {
  background-color: var(--light-color);
}

.btn-plain-dark {
  color: var(--dark-color-dark);
  border: 2px solid var(--dark-color);
  background-color: var(--dark-color);
  transition: all ease 0.3s;
}
.btn-plain-dark:hover, .btn-plain-dark:focus, .btn-plain-dark:active, .btn-plain-dark.focus, .btn-plain-dark.active {
  border-color: var(--dark-color);
  background-color: var(var(--dark-color) -light);
}
.btn-plain-dark:not(:disabled):not(.disabled).active, .btn-plain-dark:not(:disabled):not(.disabled):active, .show > .btn-plain-dark.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-dark.focus, .btn-plain-dark:focus {
  background-color: var(--light-color);
}

.btn-ribbon {
  background-image: url("/images/global/shapes/ribbon-bordered-orange.svg");
  background-position: 50% 50%;
  background-size: contain;
  padding: 1rem 1.75rem;
  background-repeat: no-repeat;
  background-color: transparent;
  border-color: transparent;
  transition: 0.3s;
  font-size: 1.5rem;
  font-family: henderson-slab-basic, serif;
  border-radius: 0%;
  color: var(--light-text-color);
  box-shadow: none !important;
}
.btn-ribbon:hover {
  transform: scale(1.2);
  color: var(--light-text-color);
  background-color: transparent;
  border-color: transparent;
}
.btn-ribbon.focus, .btn-ribbon:focus {
  box-shadow: 0 0 0 0.2rem transparent;
  background-color: transparent;
  border: transparent;
}
.btn-ribbon > span {
  margin: 0em 0.5em;
}
.btn-ribbon.btn-lg {
  padding: 1rem 2rem;
}
.btn-ribbon.btn-green {
  background-image: url("/images/global/shapes/ribbon-bordered-green.svg");
  color: var(--light-text-color);
}
.btn-ribbon.btn-blue {
  background-image: url("/images/global/shapes/ribbon-bordered-blue.svg");
  color: var(--light-text-color);
}
.btn-ribbon.btn-yellow {
  background-image: url("/images/global/shapes/ribbon-bordered-yellow.svg");
  color: var(--body-font-color);
}
.btn-ribbon.btn-yellow:hover {
  color: var(--body-font-color);
}

.btn-ribbon:not(:disabled):not(.disabled).active,
.btn-ribbon:not(:disabled):not(.disabled):active,
.show > .btn-ribbon.dropdown-toggle {
  color: var(--white-text-color);
  background-color: transparent;
  border-color: transparent;
}

.btn-ribbon:not(:disabled):not(.disabled).active:focus,
.btn-ribbon:not(:disabled):not(.disabled):active:focus,
.show > .btn-ribbon.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem transparent;
}

.btn-outline-success {
  color: var(--success-color);
  border: 2px solid var(--success-color);
  box-shadow: 5px 4px 0 1px var(--success-color);
  margin-bottom: 5px;
  background-color: transparent;
  transition: all ease 0.3s;
}
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active, .btn-outline-success.focus, .btn-outline-success.active {
  color: var(--success-color);
  border-color: var(--success-color);
  background-color: transparent;
  box-shadow: 2px 2px 0 1px var(--success-color);
}
.btn-outline-success:not(:disabled):not(.disabled):active, .show > .btn-outline-success.dropdown-toggle {
  color: var(--success-color);
  border-color: var(--success-color);
  background-color: transparent;
  box-shadow: 2px 2px 0 1px var(--success-color);
  opacity: 75%;
}
.btn-outline-success.focus, .btn-outline-success:focus {
  box-shadow: 2px 2px 0 1px var(--success-color);
  background-color: transparent;
}

/*Plain Buttons*/
.btn-plain-primary {
  color: var(--dark-color-dark);
  border: 2px solid var(--primary-color);
  background-color: var(--primary-color);
  transition: all ease 0.3s;
}
.btn-plain-primary:hover, .btn-plain-primary:focus, .btn-plain-primary:active, .btn-plain-primary.focus, .btn-plain-primary.active {
  border-color: var(--primary-color);
  background-color: var(var(--primary-color) -light);
}
.btn-plain-primary:not(:disabled):not(.disabled).active, .btn-plain-primary:not(:disabled):not(.disabled):active, .show > .btn-plain-primary.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-primary.focus, .btn-plain-primary:focus {
  background-color: var(--light-color);
}

.btn-plain-secondary {
  color: var(--dark-color-dark);
  border: 2px solid var(--secondary-color);
  background-color: var(--secondary-color);
  transition: all ease 0.3s;
}
.btn-plain-secondary:hover, .btn-plain-secondary:focus, .btn-plain-secondary:active, .btn-plain-secondary.focus, .btn-plain-secondary.active {
  border-color: var(--secondary-color);
  background-color: var(var(--secondary-color) -light);
}
.btn-plain-secondary:not(:disabled):not(.disabled).active, .btn-plain-secondary:not(:disabled):not(.disabled):active, .show > .btn-plain-secondary.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-secondary.focus, .btn-plain-secondary:focus {
  background-color: var(--light-color);
}

.btn-plain-success {
  color: var(--dark-color-dark);
  border: 2px solid var(--success-color);
  background-color: var(--success-color);
  transition: all ease 0.3s;
}
.btn-plain-success:hover, .btn-plain-success:focus, .btn-plain-success:active, .btn-plain-success.focus, .btn-plain-success.active {
  border-color: var(--success-color);
  background-color: var(var(--success-color) -light);
}
.btn-plain-success:not(:disabled):not(.disabled).active, .btn-plain-success:not(:disabled):not(.disabled):active, .show > .btn-plain-success.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-success.focus, .btn-plain-success:focus {
  background-color: var(--light-color);
}

.btn-plain-warning {
  color: var(--dark-color-dark);
  border: 2px solid var(--warning-color);
  background-color: var(--warning-color);
  transition: all ease 0.3s;
}
.btn-plain-warning:hover, .btn-plain-warning:focus, .btn-plain-warning:active, .btn-plain-warning.focus, .btn-plain-warning.active {
  border-color: var(--warning-color);
  background-color: var(var(--warning-color) -light);
}
.btn-plain-warning:not(:disabled):not(.disabled).active, .btn-plain-warning:not(:disabled):not(.disabled):active, .show > .btn-plain-warning.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-warning.focus, .btn-plain-warning:focus {
  background-color: var(--light-color);
}

.btn-plain-info {
  color: var(--dark-color-dark);
  border: 2px solid var(--info-color);
  background-color: var(--info-color);
  transition: all ease 0.3s;
}
.btn-plain-info:hover, .btn-plain-info:focus, .btn-plain-info:active, .btn-plain-info.focus, .btn-plain-info.active {
  border-color: var(--info-color);
  background-color: var(var(--info-color) -light);
}
.btn-plain-info:not(:disabled):not(.disabled).active, .btn-plain-info:not(:disabled):not(.disabled):active, .show > .btn-plain-info.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-info.focus, .btn-plain-info:focus {
  background-color: var(--light-color);
}

.btn-plain-danger {
  color: var(--dark-color-dark);
  border: 2px solid var(--danger-color);
  background-color: var(--danger-color);
  transition: all ease 0.3s;
}
.btn-plain-danger:hover, .btn-plain-danger:focus, .btn-plain-danger:active, .btn-plain-danger.focus, .btn-plain-danger.active {
  border-color: var(--danger-color);
  background-color: var(var(--danger-color) -light);
}
.btn-plain-danger:not(:disabled):not(.disabled).active, .btn-plain-danger:not(:disabled):not(.disabled):active, .show > .btn-plain-danger.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-danger.focus, .btn-plain-danger:focus {
  background-color: var(--light-color);
}

.btn-plain-light {
  color: var(--dark-color-dark);
  border: 2px solid var(--light-color);
  background-color: var(--light-color);
  transition: all ease 0.3s;
}
.btn-plain-light:hover, .btn-plain-light:focus, .btn-plain-light:active, .btn-plain-light.focus, .btn-plain-light.active {
  border-color: var(--light-color);
  background-color: var(var(--light-color) -light);
}
.btn-plain-light:not(:disabled):not(.disabled).active, .btn-plain-light:not(:disabled):not(.disabled):active, .show > .btn-plain-light.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-light.focus, .btn-plain-light:focus {
  background-color: var(--light-color);
}

.btn-plain-dark {
  color: var(--dark-color-dark);
  border: 2px solid var(--dark-color);
  background-color: var(--dark-color);
  transition: all ease 0.3s;
}
.btn-plain-dark:hover, .btn-plain-dark:focus, .btn-plain-dark:active, .btn-plain-dark.focus, .btn-plain-dark.active {
  border-color: var(--dark-color);
  background-color: var(var(--dark-color) -light);
}
.btn-plain-dark:not(:disabled):not(.disabled).active, .btn-plain-dark:not(:disabled):not(.disabled):active, .show > .btn-plain-dark.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-dark.focus, .btn-plain-dark:focus {
  background-color: var(--light-color);
}

.btn-ribbon {
  background-image: url("/images/global/shapes/ribbon-bordered-orange.svg");
  background-position: 50% 50%;
  background-size: contain;
  padding: 1rem 1.75rem;
  background-repeat: no-repeat;
  background-color: transparent;
  border-color: transparent;
  transition: 0.3s;
  font-size: 1.5rem;
  font-family: henderson-slab-basic, serif;
  border-radius: 0%;
  color: var(--light-text-color);
  box-shadow: none !important;
}
.btn-ribbon:hover {
  transform: scale(1.2);
  color: var(--light-text-color);
  background-color: transparent;
  border-color: transparent;
}
.btn-ribbon.focus, .btn-ribbon:focus {
  box-shadow: 0 0 0 0.2rem transparent;
  background-color: transparent;
  border: transparent;
}
.btn-ribbon > span {
  margin: 0em 0.5em;
}
.btn-ribbon.btn-lg {
  padding: 1rem 2rem;
}
.btn-ribbon.btn-green {
  background-image: url("/images/global/shapes/ribbon-bordered-green.svg");
  color: var(--light-text-color);
}
.btn-ribbon.btn-blue {
  background-image: url("/images/global/shapes/ribbon-bordered-blue.svg");
  color: var(--light-text-color);
}
.btn-ribbon.btn-yellow {
  background-image: url("/images/global/shapes/ribbon-bordered-yellow.svg");
  color: var(--body-font-color);
}
.btn-ribbon.btn-yellow:hover {
  color: var(--body-font-color);
}

.btn-ribbon:not(:disabled):not(.disabled).active,
.btn-ribbon:not(:disabled):not(.disabled):active,
.show > .btn-ribbon.dropdown-toggle {
  color: var(--white-text-color);
  background-color: transparent;
  border-color: transparent;
}

.btn-ribbon:not(:disabled):not(.disabled).active:focus,
.btn-ribbon:not(:disabled):not(.disabled):active:focus,
.show > .btn-ribbon.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem transparent;
}

.btn-outline-warning {
  color: var(--warning-color);
  border: 2px solid var(--warning-color);
  box-shadow: 5px 4px 0 1px var(--warning-color);
  margin-bottom: 5px;
  background-color: transparent;
  transition: all ease 0.3s;
}
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active, .btn-outline-warning.focus, .btn-outline-warning.active {
  color: var(--warning-color);
  border-color: var(--warning-color);
  background-color: transparent;
  box-shadow: 2px 2px 0 1px var(--warning-color);
}
.btn-outline-warning:not(:disabled):not(.disabled):active, .show > .btn-outline-warning.dropdown-toggle {
  color: var(--warning-color);
  border-color: var(--warning-color);
  background-color: transparent;
  box-shadow: 2px 2px 0 1px var(--warning-color);
  opacity: 75%;
}
.btn-outline-warning.focus, .btn-outline-warning:focus {
  box-shadow: 2px 2px 0 1px var(--warning-color);
  background-color: transparent;
}

/*Plain Buttons*/
.btn-plain-primary {
  color: var(--dark-color-dark);
  border: 2px solid var(--primary-color);
  background-color: var(--primary-color);
  transition: all ease 0.3s;
}
.btn-plain-primary:hover, .btn-plain-primary:focus, .btn-plain-primary:active, .btn-plain-primary.focus, .btn-plain-primary.active {
  border-color: var(--primary-color);
  background-color: var(var(--primary-color) -light);
}
.btn-plain-primary:not(:disabled):not(.disabled).active, .btn-plain-primary:not(:disabled):not(.disabled):active, .show > .btn-plain-primary.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-primary.focus, .btn-plain-primary:focus {
  background-color: var(--light-color);
}

.btn-plain-secondary {
  color: var(--dark-color-dark);
  border: 2px solid var(--secondary-color);
  background-color: var(--secondary-color);
  transition: all ease 0.3s;
}
.btn-plain-secondary:hover, .btn-plain-secondary:focus, .btn-plain-secondary:active, .btn-plain-secondary.focus, .btn-plain-secondary.active {
  border-color: var(--secondary-color);
  background-color: var(var(--secondary-color) -light);
}
.btn-plain-secondary:not(:disabled):not(.disabled).active, .btn-plain-secondary:not(:disabled):not(.disabled):active, .show > .btn-plain-secondary.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-secondary.focus, .btn-plain-secondary:focus {
  background-color: var(--light-color);
}

.btn-plain-success {
  color: var(--dark-color-dark);
  border: 2px solid var(--success-color);
  background-color: var(--success-color);
  transition: all ease 0.3s;
}
.btn-plain-success:hover, .btn-plain-success:focus, .btn-plain-success:active, .btn-plain-success.focus, .btn-plain-success.active {
  border-color: var(--success-color);
  background-color: var(var(--success-color) -light);
}
.btn-plain-success:not(:disabled):not(.disabled).active, .btn-plain-success:not(:disabled):not(.disabled):active, .show > .btn-plain-success.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-success.focus, .btn-plain-success:focus {
  background-color: var(--light-color);
}

.btn-plain-warning {
  color: var(--dark-color-dark);
  border: 2px solid var(--warning-color);
  background-color: var(--warning-color);
  transition: all ease 0.3s;
}
.btn-plain-warning:hover, .btn-plain-warning:focus, .btn-plain-warning:active, .btn-plain-warning.focus, .btn-plain-warning.active {
  border-color: var(--warning-color);
  background-color: var(var(--warning-color) -light);
}
.btn-plain-warning:not(:disabled):not(.disabled).active, .btn-plain-warning:not(:disabled):not(.disabled):active, .show > .btn-plain-warning.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-warning.focus, .btn-plain-warning:focus {
  background-color: var(--light-color);
}

.btn-plain-info {
  color: var(--dark-color-dark);
  border: 2px solid var(--info-color);
  background-color: var(--info-color);
  transition: all ease 0.3s;
}
.btn-plain-info:hover, .btn-plain-info:focus, .btn-plain-info:active, .btn-plain-info.focus, .btn-plain-info.active {
  border-color: var(--info-color);
  background-color: var(var(--info-color) -light);
}
.btn-plain-info:not(:disabled):not(.disabled).active, .btn-plain-info:not(:disabled):not(.disabled):active, .show > .btn-plain-info.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-info.focus, .btn-plain-info:focus {
  background-color: var(--light-color);
}

.btn-plain-danger {
  color: var(--dark-color-dark);
  border: 2px solid var(--danger-color);
  background-color: var(--danger-color);
  transition: all ease 0.3s;
}
.btn-plain-danger:hover, .btn-plain-danger:focus, .btn-plain-danger:active, .btn-plain-danger.focus, .btn-plain-danger.active {
  border-color: var(--danger-color);
  background-color: var(var(--danger-color) -light);
}
.btn-plain-danger:not(:disabled):not(.disabled).active, .btn-plain-danger:not(:disabled):not(.disabled):active, .show > .btn-plain-danger.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-danger.focus, .btn-plain-danger:focus {
  background-color: var(--light-color);
}

.btn-plain-light {
  color: var(--dark-color-dark);
  border: 2px solid var(--light-color);
  background-color: var(--light-color);
  transition: all ease 0.3s;
}
.btn-plain-light:hover, .btn-plain-light:focus, .btn-plain-light:active, .btn-plain-light.focus, .btn-plain-light.active {
  border-color: var(--light-color);
  background-color: var(var(--light-color) -light);
}
.btn-plain-light:not(:disabled):not(.disabled).active, .btn-plain-light:not(:disabled):not(.disabled):active, .show > .btn-plain-light.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-light.focus, .btn-plain-light:focus {
  background-color: var(--light-color);
}

.btn-plain-dark {
  color: var(--dark-color-dark);
  border: 2px solid var(--dark-color);
  background-color: var(--dark-color);
  transition: all ease 0.3s;
}
.btn-plain-dark:hover, .btn-plain-dark:focus, .btn-plain-dark:active, .btn-plain-dark.focus, .btn-plain-dark.active {
  border-color: var(--dark-color);
  background-color: var(var(--dark-color) -light);
}
.btn-plain-dark:not(:disabled):not(.disabled).active, .btn-plain-dark:not(:disabled):not(.disabled):active, .show > .btn-plain-dark.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-dark.focus, .btn-plain-dark:focus {
  background-color: var(--light-color);
}

.btn-ribbon {
  background-image: url("/images/global/shapes/ribbon-bordered-orange.svg");
  background-position: 50% 50%;
  background-size: contain;
  padding: 1rem 1.75rem;
  background-repeat: no-repeat;
  background-color: transparent;
  border-color: transparent;
  transition: 0.3s;
  font-size: 1.5rem;
  font-family: henderson-slab-basic, serif;
  border-radius: 0%;
  color: var(--light-text-color);
  box-shadow: none !important;
}
.btn-ribbon:hover {
  transform: scale(1.2);
  color: var(--light-text-color);
  background-color: transparent;
  border-color: transparent;
}
.btn-ribbon.focus, .btn-ribbon:focus {
  box-shadow: 0 0 0 0.2rem transparent;
  background-color: transparent;
  border: transparent;
}
.btn-ribbon > span {
  margin: 0em 0.5em;
}
.btn-ribbon.btn-lg {
  padding: 1rem 2rem;
}
.btn-ribbon.btn-green {
  background-image: url("/images/global/shapes/ribbon-bordered-green.svg");
  color: var(--light-text-color);
}
.btn-ribbon.btn-blue {
  background-image: url("/images/global/shapes/ribbon-bordered-blue.svg");
  color: var(--light-text-color);
}
.btn-ribbon.btn-yellow {
  background-image: url("/images/global/shapes/ribbon-bordered-yellow.svg");
  color: var(--body-font-color);
}
.btn-ribbon.btn-yellow:hover {
  color: var(--body-font-color);
}

.btn-ribbon:not(:disabled):not(.disabled).active,
.btn-ribbon:not(:disabled):not(.disabled):active,
.show > .btn-ribbon.dropdown-toggle {
  color: var(--white-text-color);
  background-color: transparent;
  border-color: transparent;
}

.btn-ribbon:not(:disabled):not(.disabled).active:focus,
.btn-ribbon:not(:disabled):not(.disabled):active:focus,
.show > .btn-ribbon.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem transparent;
}

.btn-outline-info {
  color: var(--info-color);
  border: 2px solid var(--info-color);
  box-shadow: 5px 4px 0 1px var(--info-color);
  margin-bottom: 5px;
  background-color: transparent;
  transition: all ease 0.3s;
}
.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active, .btn-outline-info.focus, .btn-outline-info.active {
  color: var(--info-color);
  border-color: var(--info-color);
  background-color: transparent;
  box-shadow: 2px 2px 0 1px var(--info-color);
}
.btn-outline-info:not(:disabled):not(.disabled):active, .show > .btn-outline-info.dropdown-toggle {
  color: var(--info-color);
  border-color: var(--info-color);
  background-color: transparent;
  box-shadow: 2px 2px 0 1px var(--info-color);
  opacity: 75%;
}
.btn-outline-info.focus, .btn-outline-info:focus {
  box-shadow: 2px 2px 0 1px var(--info-color);
  background-color: transparent;
}

/*Plain Buttons*/
.btn-plain-primary {
  color: var(--dark-color-dark);
  border: 2px solid var(--primary-color);
  background-color: var(--primary-color);
  transition: all ease 0.3s;
}
.btn-plain-primary:hover, .btn-plain-primary:focus, .btn-plain-primary:active, .btn-plain-primary.focus, .btn-plain-primary.active {
  border-color: var(--primary-color);
  background-color: var(var(--primary-color) -light);
}
.btn-plain-primary:not(:disabled):not(.disabled).active, .btn-plain-primary:not(:disabled):not(.disabled):active, .show > .btn-plain-primary.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-primary.focus, .btn-plain-primary:focus {
  background-color: var(--light-color);
}

.btn-plain-secondary {
  color: var(--dark-color-dark);
  border: 2px solid var(--secondary-color);
  background-color: var(--secondary-color);
  transition: all ease 0.3s;
}
.btn-plain-secondary:hover, .btn-plain-secondary:focus, .btn-plain-secondary:active, .btn-plain-secondary.focus, .btn-plain-secondary.active {
  border-color: var(--secondary-color);
  background-color: var(var(--secondary-color) -light);
}
.btn-plain-secondary:not(:disabled):not(.disabled).active, .btn-plain-secondary:not(:disabled):not(.disabled):active, .show > .btn-plain-secondary.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-secondary.focus, .btn-plain-secondary:focus {
  background-color: var(--light-color);
}

.btn-plain-success {
  color: var(--dark-color-dark);
  border: 2px solid var(--success-color);
  background-color: var(--success-color);
  transition: all ease 0.3s;
}
.btn-plain-success:hover, .btn-plain-success:focus, .btn-plain-success:active, .btn-plain-success.focus, .btn-plain-success.active {
  border-color: var(--success-color);
  background-color: var(var(--success-color) -light);
}
.btn-plain-success:not(:disabled):not(.disabled).active, .btn-plain-success:not(:disabled):not(.disabled):active, .show > .btn-plain-success.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-success.focus, .btn-plain-success:focus {
  background-color: var(--light-color);
}

.btn-plain-warning {
  color: var(--dark-color-dark);
  border: 2px solid var(--warning-color);
  background-color: var(--warning-color);
  transition: all ease 0.3s;
}
.btn-plain-warning:hover, .btn-plain-warning:focus, .btn-plain-warning:active, .btn-plain-warning.focus, .btn-plain-warning.active {
  border-color: var(--warning-color);
  background-color: var(var(--warning-color) -light);
}
.btn-plain-warning:not(:disabled):not(.disabled).active, .btn-plain-warning:not(:disabled):not(.disabled):active, .show > .btn-plain-warning.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-warning.focus, .btn-plain-warning:focus {
  background-color: var(--light-color);
}

.btn-plain-info {
  color: var(--dark-color-dark);
  border: 2px solid var(--info-color);
  background-color: var(--info-color);
  transition: all ease 0.3s;
}
.btn-plain-info:hover, .btn-plain-info:focus, .btn-plain-info:active, .btn-plain-info.focus, .btn-plain-info.active {
  border-color: var(--info-color);
  background-color: var(var(--info-color) -light);
}
.btn-plain-info:not(:disabled):not(.disabled).active, .btn-plain-info:not(:disabled):not(.disabled):active, .show > .btn-plain-info.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-info.focus, .btn-plain-info:focus {
  background-color: var(--light-color);
}

.btn-plain-danger {
  color: var(--dark-color-dark);
  border: 2px solid var(--danger-color);
  background-color: var(--danger-color);
  transition: all ease 0.3s;
}
.btn-plain-danger:hover, .btn-plain-danger:focus, .btn-plain-danger:active, .btn-plain-danger.focus, .btn-plain-danger.active {
  border-color: var(--danger-color);
  background-color: var(var(--danger-color) -light);
}
.btn-plain-danger:not(:disabled):not(.disabled).active, .btn-plain-danger:not(:disabled):not(.disabled):active, .show > .btn-plain-danger.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-danger.focus, .btn-plain-danger:focus {
  background-color: var(--light-color);
}

.btn-plain-light {
  color: var(--dark-color-dark);
  border: 2px solid var(--light-color);
  background-color: var(--light-color);
  transition: all ease 0.3s;
}
.btn-plain-light:hover, .btn-plain-light:focus, .btn-plain-light:active, .btn-plain-light.focus, .btn-plain-light.active {
  border-color: var(--light-color);
  background-color: var(var(--light-color) -light);
}
.btn-plain-light:not(:disabled):not(.disabled).active, .btn-plain-light:not(:disabled):not(.disabled):active, .show > .btn-plain-light.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-light.focus, .btn-plain-light:focus {
  background-color: var(--light-color);
}

.btn-plain-dark {
  color: var(--dark-color-dark);
  border: 2px solid var(--dark-color);
  background-color: var(--dark-color);
  transition: all ease 0.3s;
}
.btn-plain-dark:hover, .btn-plain-dark:focus, .btn-plain-dark:active, .btn-plain-dark.focus, .btn-plain-dark.active {
  border-color: var(--dark-color);
  background-color: var(var(--dark-color) -light);
}
.btn-plain-dark:not(:disabled):not(.disabled).active, .btn-plain-dark:not(:disabled):not(.disabled):active, .show > .btn-plain-dark.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-dark.focus, .btn-plain-dark:focus {
  background-color: var(--light-color);
}

.btn-ribbon {
  background-image: url("/images/global/shapes/ribbon-bordered-orange.svg");
  background-position: 50% 50%;
  background-size: contain;
  padding: 1rem 1.75rem;
  background-repeat: no-repeat;
  background-color: transparent;
  border-color: transparent;
  transition: 0.3s;
  font-size: 1.5rem;
  font-family: henderson-slab-basic, serif;
  border-radius: 0%;
  color: var(--light-text-color);
  box-shadow: none !important;
}
.btn-ribbon:hover {
  transform: scale(1.2);
  color: var(--light-text-color);
  background-color: transparent;
  border-color: transparent;
}
.btn-ribbon.focus, .btn-ribbon:focus {
  box-shadow: 0 0 0 0.2rem transparent;
  background-color: transparent;
  border: transparent;
}
.btn-ribbon > span {
  margin: 0em 0.5em;
}
.btn-ribbon.btn-lg {
  padding: 1rem 2rem;
}
.btn-ribbon.btn-green {
  background-image: url("/images/global/shapes/ribbon-bordered-green.svg");
  color: var(--light-text-color);
}
.btn-ribbon.btn-blue {
  background-image: url("/images/global/shapes/ribbon-bordered-blue.svg");
  color: var(--light-text-color);
}
.btn-ribbon.btn-yellow {
  background-image: url("/images/global/shapes/ribbon-bordered-yellow.svg");
  color: var(--body-font-color);
}
.btn-ribbon.btn-yellow:hover {
  color: var(--body-font-color);
}

.btn-ribbon:not(:disabled):not(.disabled).active,
.btn-ribbon:not(:disabled):not(.disabled):active,
.show > .btn-ribbon.dropdown-toggle {
  color: var(--white-text-color);
  background-color: transparent;
  border-color: transparent;
}

.btn-ribbon:not(:disabled):not(.disabled).active:focus,
.btn-ribbon:not(:disabled):not(.disabled):active:focus,
.show > .btn-ribbon.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem transparent;
}

.btn-outline-danger {
  color: var(--danger-color);
  border: 2px solid var(--danger-color);
  box-shadow: 5px 4px 0 1px var(--danger-color);
  margin-bottom: 5px;
  background-color: transparent;
  transition: all ease 0.3s;
}
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active, .btn-outline-danger.focus, .btn-outline-danger.active {
  color: var(--danger-color);
  border-color: var(--danger-color);
  background-color: transparent;
  box-shadow: 2px 2px 0 1px var(--danger-color);
}
.btn-outline-danger:not(:disabled):not(.disabled):active, .show > .btn-outline-danger.dropdown-toggle {
  color: var(--danger-color);
  border-color: var(--danger-color);
  background-color: transparent;
  box-shadow: 2px 2px 0 1px var(--danger-color);
  opacity: 75%;
}
.btn-outline-danger.focus, .btn-outline-danger:focus {
  box-shadow: 2px 2px 0 1px var(--danger-color);
  background-color: transparent;
}

/*Plain Buttons*/
.btn-plain-primary {
  color: var(--dark-color-dark);
  border: 2px solid var(--primary-color);
  background-color: var(--primary-color);
  transition: all ease 0.3s;
}
.btn-plain-primary:hover, .btn-plain-primary:focus, .btn-plain-primary:active, .btn-plain-primary.focus, .btn-plain-primary.active {
  border-color: var(--primary-color);
  background-color: var(var(--primary-color) -light);
}
.btn-plain-primary:not(:disabled):not(.disabled).active, .btn-plain-primary:not(:disabled):not(.disabled):active, .show > .btn-plain-primary.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-primary.focus, .btn-plain-primary:focus {
  background-color: var(--light-color);
}

.btn-plain-secondary {
  color: var(--dark-color-dark);
  border: 2px solid var(--secondary-color);
  background-color: var(--secondary-color);
  transition: all ease 0.3s;
}
.btn-plain-secondary:hover, .btn-plain-secondary:focus, .btn-plain-secondary:active, .btn-plain-secondary.focus, .btn-plain-secondary.active {
  border-color: var(--secondary-color);
  background-color: var(var(--secondary-color) -light);
}
.btn-plain-secondary:not(:disabled):not(.disabled).active, .btn-plain-secondary:not(:disabled):not(.disabled):active, .show > .btn-plain-secondary.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-secondary.focus, .btn-plain-secondary:focus {
  background-color: var(--light-color);
}

.btn-plain-success {
  color: var(--dark-color-dark);
  border: 2px solid var(--success-color);
  background-color: var(--success-color);
  transition: all ease 0.3s;
}
.btn-plain-success:hover, .btn-plain-success:focus, .btn-plain-success:active, .btn-plain-success.focus, .btn-plain-success.active {
  border-color: var(--success-color);
  background-color: var(var(--success-color) -light);
}
.btn-plain-success:not(:disabled):not(.disabled).active, .btn-plain-success:not(:disabled):not(.disabled):active, .show > .btn-plain-success.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-success.focus, .btn-plain-success:focus {
  background-color: var(--light-color);
}

.btn-plain-warning {
  color: var(--dark-color-dark);
  border: 2px solid var(--warning-color);
  background-color: var(--warning-color);
  transition: all ease 0.3s;
}
.btn-plain-warning:hover, .btn-plain-warning:focus, .btn-plain-warning:active, .btn-plain-warning.focus, .btn-plain-warning.active {
  border-color: var(--warning-color);
  background-color: var(var(--warning-color) -light);
}
.btn-plain-warning:not(:disabled):not(.disabled).active, .btn-plain-warning:not(:disabled):not(.disabled):active, .show > .btn-plain-warning.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-warning.focus, .btn-plain-warning:focus {
  background-color: var(--light-color);
}

.btn-plain-info {
  color: var(--dark-color-dark);
  border: 2px solid var(--info-color);
  background-color: var(--info-color);
  transition: all ease 0.3s;
}
.btn-plain-info:hover, .btn-plain-info:focus, .btn-plain-info:active, .btn-plain-info.focus, .btn-plain-info.active {
  border-color: var(--info-color);
  background-color: var(var(--info-color) -light);
}
.btn-plain-info:not(:disabled):not(.disabled).active, .btn-plain-info:not(:disabled):not(.disabled):active, .show > .btn-plain-info.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-info.focus, .btn-plain-info:focus {
  background-color: var(--light-color);
}

.btn-plain-danger {
  color: var(--dark-color-dark);
  border: 2px solid var(--danger-color);
  background-color: var(--danger-color);
  transition: all ease 0.3s;
}
.btn-plain-danger:hover, .btn-plain-danger:focus, .btn-plain-danger:active, .btn-plain-danger.focus, .btn-plain-danger.active {
  border-color: var(--danger-color);
  background-color: var(var(--danger-color) -light);
}
.btn-plain-danger:not(:disabled):not(.disabled).active, .btn-plain-danger:not(:disabled):not(.disabled):active, .show > .btn-plain-danger.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-danger.focus, .btn-plain-danger:focus {
  background-color: var(--light-color);
}

.btn-plain-light {
  color: var(--dark-color-dark);
  border: 2px solid var(--light-color);
  background-color: var(--light-color);
  transition: all ease 0.3s;
}
.btn-plain-light:hover, .btn-plain-light:focus, .btn-plain-light:active, .btn-plain-light.focus, .btn-plain-light.active {
  border-color: var(--light-color);
  background-color: var(var(--light-color) -light);
}
.btn-plain-light:not(:disabled):not(.disabled).active, .btn-plain-light:not(:disabled):not(.disabled):active, .show > .btn-plain-light.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-light.focus, .btn-plain-light:focus {
  background-color: var(--light-color);
}

.btn-plain-dark {
  color: var(--dark-color-dark);
  border: 2px solid var(--dark-color);
  background-color: var(--dark-color);
  transition: all ease 0.3s;
}
.btn-plain-dark:hover, .btn-plain-dark:focus, .btn-plain-dark:active, .btn-plain-dark.focus, .btn-plain-dark.active {
  border-color: var(--dark-color);
  background-color: var(var(--dark-color) -light);
}
.btn-plain-dark:not(:disabled):not(.disabled).active, .btn-plain-dark:not(:disabled):not(.disabled):active, .show > .btn-plain-dark.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-dark.focus, .btn-plain-dark:focus {
  background-color: var(--light-color);
}

.btn-ribbon {
  background-image: url("/images/global/shapes/ribbon-bordered-orange.svg");
  background-position: 50% 50%;
  background-size: contain;
  padding: 1rem 1.75rem;
  background-repeat: no-repeat;
  background-color: transparent;
  border-color: transparent;
  transition: 0.3s;
  font-size: 1.5rem;
  font-family: henderson-slab-basic, serif;
  border-radius: 0%;
  color: var(--light-text-color);
  box-shadow: none !important;
}
.btn-ribbon:hover {
  transform: scale(1.2);
  color: var(--light-text-color);
  background-color: transparent;
  border-color: transparent;
}
.btn-ribbon.focus, .btn-ribbon:focus {
  box-shadow: 0 0 0 0.2rem transparent;
  background-color: transparent;
  border: transparent;
}
.btn-ribbon > span {
  margin: 0em 0.5em;
}
.btn-ribbon.btn-lg {
  padding: 1rem 2rem;
}
.btn-ribbon.btn-green {
  background-image: url("/images/global/shapes/ribbon-bordered-green.svg");
  color: var(--light-text-color);
}
.btn-ribbon.btn-blue {
  background-image: url("/images/global/shapes/ribbon-bordered-blue.svg");
  color: var(--light-text-color);
}
.btn-ribbon.btn-yellow {
  background-image: url("/images/global/shapes/ribbon-bordered-yellow.svg");
  color: var(--body-font-color);
}
.btn-ribbon.btn-yellow:hover {
  color: var(--body-font-color);
}

.btn-ribbon:not(:disabled):not(.disabled).active,
.btn-ribbon:not(:disabled):not(.disabled):active,
.show > .btn-ribbon.dropdown-toggle {
  color: var(--white-text-color);
  background-color: transparent;
  border-color: transparent;
}

.btn-ribbon:not(:disabled):not(.disabled).active:focus,
.btn-ribbon:not(:disabled):not(.disabled):active:focus,
.show > .btn-ribbon.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem transparent;
}

.btn-outline-light {
  color: var(--light-text-color);
  border: 2px solid var(--light-text-color);
  box-shadow: 5px 4px 0 1px var(--light-text-color);
  margin-bottom: 5px;
  background-color: transparent;
  transition: all ease 0.3s;
}
.btn-outline-light:hover, .btn-outline-light:focus, .btn-outline-light:active, .btn-outline-light.focus, .btn-outline-light.active {
  color: var(--light-text-color);
  border-color: var(--light-text-color);
  background-color: transparent;
  box-shadow: 2px 2px 0 1px var(--light-text-color);
}
.btn-outline-light:not(:disabled):not(.disabled):active, .show > .btn-outline-light.dropdown-toggle {
  color: var(--light-text-color);
  border-color: var(--light-text-color);
  background-color: transparent;
  box-shadow: 2px 2px 0 1px var(--light-text-color);
  opacity: 75%;
}
.btn-outline-light.focus, .btn-outline-light:focus {
  box-shadow: 2px 2px 0 1px var(--light-text-color);
  background-color: transparent;
}

/*Plain Buttons*/
.btn-plain-primary {
  color: var(--dark-color-dark);
  border: 2px solid var(--primary-color);
  background-color: var(--primary-color);
  transition: all ease 0.3s;
}
.btn-plain-primary:hover, .btn-plain-primary:focus, .btn-plain-primary:active, .btn-plain-primary.focus, .btn-plain-primary.active {
  border-color: var(--primary-color);
  background-color: var(var(--primary-color) -light);
}
.btn-plain-primary:not(:disabled):not(.disabled).active, .btn-plain-primary:not(:disabled):not(.disabled):active, .show > .btn-plain-primary.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-primary.focus, .btn-plain-primary:focus {
  background-color: var(--light-color);
}

.btn-plain-secondary {
  color: var(--dark-color-dark);
  border: 2px solid var(--secondary-color);
  background-color: var(--secondary-color);
  transition: all ease 0.3s;
}
.btn-plain-secondary:hover, .btn-plain-secondary:focus, .btn-plain-secondary:active, .btn-plain-secondary.focus, .btn-plain-secondary.active {
  border-color: var(--secondary-color);
  background-color: var(var(--secondary-color) -light);
}
.btn-plain-secondary:not(:disabled):not(.disabled).active, .btn-plain-secondary:not(:disabled):not(.disabled):active, .show > .btn-plain-secondary.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-secondary.focus, .btn-plain-secondary:focus {
  background-color: var(--light-color);
}

.btn-plain-success {
  color: var(--dark-color-dark);
  border: 2px solid var(--success-color);
  background-color: var(--success-color);
  transition: all ease 0.3s;
}
.btn-plain-success:hover, .btn-plain-success:focus, .btn-plain-success:active, .btn-plain-success.focus, .btn-plain-success.active {
  border-color: var(--success-color);
  background-color: var(var(--success-color) -light);
}
.btn-plain-success:not(:disabled):not(.disabled).active, .btn-plain-success:not(:disabled):not(.disabled):active, .show > .btn-plain-success.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-success.focus, .btn-plain-success:focus {
  background-color: var(--light-color);
}

.btn-plain-warning {
  color: var(--dark-color-dark);
  border: 2px solid var(--warning-color);
  background-color: var(--warning-color);
  transition: all ease 0.3s;
}
.btn-plain-warning:hover, .btn-plain-warning:focus, .btn-plain-warning:active, .btn-plain-warning.focus, .btn-plain-warning.active {
  border-color: var(--warning-color);
  background-color: var(var(--warning-color) -light);
}
.btn-plain-warning:not(:disabled):not(.disabled).active, .btn-plain-warning:not(:disabled):not(.disabled):active, .show > .btn-plain-warning.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-warning.focus, .btn-plain-warning:focus {
  background-color: var(--light-color);
}

.btn-plain-info {
  color: var(--dark-color-dark);
  border: 2px solid var(--info-color);
  background-color: var(--info-color);
  transition: all ease 0.3s;
}
.btn-plain-info:hover, .btn-plain-info:focus, .btn-plain-info:active, .btn-plain-info.focus, .btn-plain-info.active {
  border-color: var(--info-color);
  background-color: var(var(--info-color) -light);
}
.btn-plain-info:not(:disabled):not(.disabled).active, .btn-plain-info:not(:disabled):not(.disabled):active, .show > .btn-plain-info.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-info.focus, .btn-plain-info:focus {
  background-color: var(--light-color);
}

.btn-plain-danger {
  color: var(--dark-color-dark);
  border: 2px solid var(--danger-color);
  background-color: var(--danger-color);
  transition: all ease 0.3s;
}
.btn-plain-danger:hover, .btn-plain-danger:focus, .btn-plain-danger:active, .btn-plain-danger.focus, .btn-plain-danger.active {
  border-color: var(--danger-color);
  background-color: var(var(--danger-color) -light);
}
.btn-plain-danger:not(:disabled):not(.disabled).active, .btn-plain-danger:not(:disabled):not(.disabled):active, .show > .btn-plain-danger.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-danger.focus, .btn-plain-danger:focus {
  background-color: var(--light-color);
}

.btn-plain-light {
  color: var(--dark-color-dark);
  border: 2px solid var(--light-color);
  background-color: var(--light-color);
  transition: all ease 0.3s;
}
.btn-plain-light:hover, .btn-plain-light:focus, .btn-plain-light:active, .btn-plain-light.focus, .btn-plain-light.active {
  border-color: var(--light-color);
  background-color: var(var(--light-color) -light);
}
.btn-plain-light:not(:disabled):not(.disabled).active, .btn-plain-light:not(:disabled):not(.disabled):active, .show > .btn-plain-light.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-light.focus, .btn-plain-light:focus {
  background-color: var(--light-color);
}

.btn-plain-dark {
  color: var(--dark-color-dark);
  border: 2px solid var(--dark-color);
  background-color: var(--dark-color);
  transition: all ease 0.3s;
}
.btn-plain-dark:hover, .btn-plain-dark:focus, .btn-plain-dark:active, .btn-plain-dark.focus, .btn-plain-dark.active {
  border-color: var(--dark-color);
  background-color: var(var(--dark-color) -light);
}
.btn-plain-dark:not(:disabled):not(.disabled).active, .btn-plain-dark:not(:disabled):not(.disabled):active, .show > .btn-plain-dark.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-dark.focus, .btn-plain-dark:focus {
  background-color: var(--light-color);
}

.btn-ribbon {
  background-image: url("/images/global/shapes/ribbon-bordered-orange.svg");
  background-position: 50% 50%;
  background-size: contain;
  padding: 1rem 1.75rem;
  background-repeat: no-repeat;
  background-color: transparent;
  border-color: transparent;
  transition: 0.3s;
  font-size: 1.5rem;
  font-family: henderson-slab-basic, serif;
  border-radius: 0%;
  color: var(--light-text-color);
  box-shadow: none !important;
}
.btn-ribbon:hover {
  transform: scale(1.2);
  color: var(--light-text-color);
  background-color: transparent;
  border-color: transparent;
}
.btn-ribbon.focus, .btn-ribbon:focus {
  box-shadow: 0 0 0 0.2rem transparent;
  background-color: transparent;
  border: transparent;
}
.btn-ribbon > span {
  margin: 0em 0.5em;
}
.btn-ribbon.btn-lg {
  padding: 1rem 2rem;
}
.btn-ribbon.btn-green {
  background-image: url("/images/global/shapes/ribbon-bordered-green.svg");
  color: var(--light-text-color);
}
.btn-ribbon.btn-blue {
  background-image: url("/images/global/shapes/ribbon-bordered-blue.svg");
  color: var(--light-text-color);
}
.btn-ribbon.btn-yellow {
  background-image: url("/images/global/shapes/ribbon-bordered-yellow.svg");
  color: var(--body-font-color);
}
.btn-ribbon.btn-yellow:hover {
  color: var(--body-font-color);
}

.btn-ribbon:not(:disabled):not(.disabled).active,
.btn-ribbon:not(:disabled):not(.disabled):active,
.show > .btn-ribbon.dropdown-toggle {
  color: var(--white-text-color);
  background-color: transparent;
  border-color: transparent;
}

.btn-ribbon:not(:disabled):not(.disabled).active:focus,
.btn-ribbon:not(:disabled):not(.disabled):active:focus,
.show > .btn-ribbon.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem transparent;
}

.btn-outline-dark {
  color: var(--dark-color);
  border: 2px solid var(--dark-color);
  box-shadow: 5px 4px 0 1px var(--dark-color);
  margin-bottom: 5px;
  background-color: transparent;
  transition: all ease 0.3s;
}
.btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active, .btn-outline-dark.focus, .btn-outline-dark.active {
  color: var(--dark-color);
  border-color: var(--dark-color);
  background-color: transparent;
  box-shadow: 2px 2px 0 1px var(--dark-color);
}
.btn-outline-dark:not(:disabled):not(.disabled):active, .show > .btn-outline-dark.dropdown-toggle {
  color: var(--dark-color);
  border-color: var(--dark-color);
  background-color: transparent;
  box-shadow: 2px 2px 0 1px var(--dark-color);
  opacity: 75%;
}
.btn-outline-dark.focus, .btn-outline-dark:focus {
  box-shadow: 2px 2px 0 1px var(--dark-color);
  background-color: transparent;
}

/*Plain Buttons*/
.btn-plain-primary {
  color: var(--dark-color-dark);
  border: 2px solid var(--primary-color);
  background-color: var(--primary-color);
  transition: all ease 0.3s;
}
.btn-plain-primary:hover, .btn-plain-primary:focus, .btn-plain-primary:active, .btn-plain-primary.focus, .btn-plain-primary.active {
  border-color: var(--primary-color);
  background-color: var(var(--primary-color) -light);
}
.btn-plain-primary:not(:disabled):not(.disabled).active, .btn-plain-primary:not(:disabled):not(.disabled):active, .show > .btn-plain-primary.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-primary.focus, .btn-plain-primary:focus {
  background-color: var(--light-color);
}

.btn-plain-secondary {
  color: var(--dark-color-dark);
  border: 2px solid var(--secondary-color);
  background-color: var(--secondary-color);
  transition: all ease 0.3s;
}
.btn-plain-secondary:hover, .btn-plain-secondary:focus, .btn-plain-secondary:active, .btn-plain-secondary.focus, .btn-plain-secondary.active {
  border-color: var(--secondary-color);
  background-color: var(var(--secondary-color) -light);
}
.btn-plain-secondary:not(:disabled):not(.disabled).active, .btn-plain-secondary:not(:disabled):not(.disabled):active, .show > .btn-plain-secondary.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-secondary.focus, .btn-plain-secondary:focus {
  background-color: var(--light-color);
}

.btn-plain-success {
  color: var(--dark-color-dark);
  border: 2px solid var(--success-color);
  background-color: var(--success-color);
  transition: all ease 0.3s;
}
.btn-plain-success:hover, .btn-plain-success:focus, .btn-plain-success:active, .btn-plain-success.focus, .btn-plain-success.active {
  border-color: var(--success-color);
  background-color: var(var(--success-color) -light);
}
.btn-plain-success:not(:disabled):not(.disabled).active, .btn-plain-success:not(:disabled):not(.disabled):active, .show > .btn-plain-success.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-success.focus, .btn-plain-success:focus {
  background-color: var(--light-color);
}

.btn-plain-warning {
  color: var(--dark-color-dark);
  border: 2px solid var(--warning-color);
  background-color: var(--warning-color);
  transition: all ease 0.3s;
}
.btn-plain-warning:hover, .btn-plain-warning:focus, .btn-plain-warning:active, .btn-plain-warning.focus, .btn-plain-warning.active {
  border-color: var(--warning-color);
  background-color: var(var(--warning-color) -light);
}
.btn-plain-warning:not(:disabled):not(.disabled).active, .btn-plain-warning:not(:disabled):not(.disabled):active, .show > .btn-plain-warning.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-warning.focus, .btn-plain-warning:focus {
  background-color: var(--light-color);
}

.btn-plain-info {
  color: var(--dark-color-dark);
  border: 2px solid var(--info-color);
  background-color: var(--info-color);
  transition: all ease 0.3s;
}
.btn-plain-info:hover, .btn-plain-info:focus, .btn-plain-info:active, .btn-plain-info.focus, .btn-plain-info.active {
  border-color: var(--info-color);
  background-color: var(var(--info-color) -light);
}
.btn-plain-info:not(:disabled):not(.disabled).active, .btn-plain-info:not(:disabled):not(.disabled):active, .show > .btn-plain-info.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-info.focus, .btn-plain-info:focus {
  background-color: var(--light-color);
}

.btn-plain-danger {
  color: var(--dark-color-dark);
  border: 2px solid var(--danger-color);
  background-color: var(--danger-color);
  transition: all ease 0.3s;
}
.btn-plain-danger:hover, .btn-plain-danger:focus, .btn-plain-danger:active, .btn-plain-danger.focus, .btn-plain-danger.active {
  border-color: var(--danger-color);
  background-color: var(var(--danger-color) -light);
}
.btn-plain-danger:not(:disabled):not(.disabled).active, .btn-plain-danger:not(:disabled):not(.disabled):active, .show > .btn-plain-danger.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-danger.focus, .btn-plain-danger:focus {
  background-color: var(--light-color);
}

.btn-plain-light {
  color: var(--dark-color-dark);
  border: 2px solid var(--light-color);
  background-color: var(--light-color);
  transition: all ease 0.3s;
}
.btn-plain-light:hover, .btn-plain-light:focus, .btn-plain-light:active, .btn-plain-light.focus, .btn-plain-light.active {
  border-color: var(--light-color);
  background-color: var(var(--light-color) -light);
}
.btn-plain-light:not(:disabled):not(.disabled).active, .btn-plain-light:not(:disabled):not(.disabled):active, .show > .btn-plain-light.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-light.focus, .btn-plain-light:focus {
  background-color: var(--light-color);
}

.btn-plain-dark {
  color: var(--dark-color-dark);
  border: 2px solid var(--dark-color);
  background-color: var(--dark-color);
  transition: all ease 0.3s;
}
.btn-plain-dark:hover, .btn-plain-dark:focus, .btn-plain-dark:active, .btn-plain-dark.focus, .btn-plain-dark.active {
  border-color: var(--dark-color);
  background-color: var(var(--dark-color) -light);
}
.btn-plain-dark:not(:disabled):not(.disabled).active, .btn-plain-dark:not(:disabled):not(.disabled):active, .show > .btn-plain-dark.dropdown-toggle {
  opacity: 75%;
}
.btn-plain-dark.focus, .btn-plain-dark:focus {
  background-color: var(--light-color);
}

.btn-ribbon {
  background-image: url("/images/global/shapes/ribbon-bordered-orange.svg");
  background-position: 50% 50%;
  background-size: contain;
  padding: 1rem 1.75rem;
  background-repeat: no-repeat;
  background-color: transparent;
  border-color: transparent;
  transition: 0.3s;
  font-size: 1.5rem;
  font-family: henderson-slab-basic, serif;
  border-radius: 0%;
  color: var(--light-text-color);
  box-shadow: none !important;
}
.btn-ribbon:hover {
  transform: scale(1.2);
  color: var(--light-text-color);
  background-color: transparent;
  border-color: transparent;
}
.btn-ribbon.focus, .btn-ribbon:focus {
  box-shadow: 0 0 0 0.2rem transparent;
  background-color: transparent;
  border: transparent;
}
.btn-ribbon > span {
  margin: 0em 0.5em;
}
.btn-ribbon.btn-lg {
  padding: 1rem 2rem;
}
.btn-ribbon.btn-green {
  background-image: url("/images/global/shapes/ribbon-bordered-green.svg");
  color: var(--light-text-color);
}
.btn-ribbon.btn-blue {
  background-image: url("/images/global/shapes/ribbon-bordered-blue.svg");
  color: var(--light-text-color);
}
.btn-ribbon.btn-yellow {
  background-image: url("/images/global/shapes/ribbon-bordered-yellow.svg");
  color: var(--body-font-color);
}
.btn-ribbon.btn-yellow:hover {
  color: var(--body-font-color);
}

.btn-ribbon:not(:disabled):not(.disabled).active,
.btn-ribbon:not(:disabled):not(.disabled):active,
.show > .btn-ribbon.dropdown-toggle {
  color: var(--white-text-color);
  background-color: transparent;
  border-color: transparent;
}

.btn-ribbon:not(:disabled):not(.disabled).active:focus,
.btn-ribbon:not(:disabled):not(.disabled):active:focus,
.show > .btn-ribbon.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem transparent;
}

.scale-on-hover, .lightbox-modal .popup-container .popup-button, .floating-menu-container .lightbox-modal .popup-container .open-close-button, .lightbox-modal .floating-menu-container .popup-button, .lightbox-modal .floating-menu-container .open-close-button {
  transition: 0.3s;
}
.scale-on-hover:hover, .lightbox-modal .popup-container .popup-button:hover, .floating-menu-container .lightbox-modal .popup-container .open-close-button:hover, .lightbox-modal .floating-menu-container .popup-button:hover, .lightbox-modal .floating-menu-container .open-close-button:hover {
  transform: scale(1.2);
}

.raise-on-hover {
  transition: 200ms ease-in-out;
  cursor: pointer;
}
.raise-on-hover:hover {
  transform: translateY(-6px);
}

.rotate-on-hover:hover {
  animation: rotate-right 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}
@keyframes rotate-right {
  0% {
    transform: rotate(0);
    transform-origin: right;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    transform: rotate(3deg);
    transform-origin: right;
    box-shadow: 12px -12px 20px -12px rgba(0, 0, 0, 0.35);
  }
}
.back-button {
  position: absolute;
  top: 0;
  left: 0;
  margin: 1em;
  z-index: 2;
  -webkit-appearance: none;
  background-color: transparent;
  outline: transparent;
  border: transparent;
}
.back-button:focus {
  outline: none;
  outline: none;
}

.feedback-container {
  position: fixed;
  right: 0;
  margin: 1rem;
  bottom: 0;
  z-index: 2;
  display: flex;
}

.btn-icon-primary {
  color: var(--primary-color-dark);
  border: 2px solid var(--primary-color);
  background-color: var(--primary-color);
  transition: all ease 0.3s;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.btn-icon-primary:hover, .btn-icon-primary:focus, .btn-icon-primary:active, .btn-icon-primary.focus, .btn-icon-primary.active {
  border-color: var(--primary-color);
  background-color: var(--primary-color-dark);
}
.btn-icon-primary:not(:disabled):not(.disabled).active, .btn-icon-primary:not(:disabled):not(.disabled):active, .show > .btn-icon-primary.dropdown-toggle {
  opacity: 75%;
}
.btn-icon-primary.focus, .btn-icon-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color)), 0.3;
}
.btn-icon-primary.btn-lg {
  height: 60px;
  width: 60px;
}
.btn-icon-primary.btn-lg i {
  font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
  .btn-icon-primary.btn-lg {
    height: 42px;
    width: 42px;
  }
  .btn-icon-primary.btn-lg i {
    font-size: 1.5rem;
  }
}
.btn-icon-primary.btn-lg.btn-course {
  background-color: #F5F1C7;
  border-color: #768327;
  padding-bottom: 10px;
}
.btn-icon-primary.btn-lg.btn-course.hover, .btn-icon-primary.btn-lg.btn-course:hover {
  background-color: #e7dcaf;
}

.btn-icon-secondary {
  color: var(--secondary-color-dark);
  border: 2px solid var(--secondary-color);
  background-color: var(--secondary-color);
  transition: all ease 0.3s;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.btn-icon-secondary:hover, .btn-icon-secondary:focus, .btn-icon-secondary:active, .btn-icon-secondary.focus, .btn-icon-secondary.active {
  border-color: var(--secondary-color);
  background-color: var(--secondary-color-dark);
}
.btn-icon-secondary:not(:disabled):not(.disabled).active, .btn-icon-secondary:not(:disabled):not(.disabled):active, .show > .btn-icon-secondary.dropdown-toggle {
  opacity: 75%;
}
.btn-icon-secondary.focus, .btn-icon-secondary:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--secondary-color)), 0.3;
}
.btn-icon-secondary.btn-lg {
  height: 60px;
  width: 60px;
}
.btn-icon-secondary.btn-lg i {
  font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
  .btn-icon-secondary.btn-lg {
    height: 42px;
    width: 42px;
  }
  .btn-icon-secondary.btn-lg i {
    font-size: 1.5rem;
  }
}
.btn-icon-secondary.btn-lg.btn-course {
  background-color: #F5F1C7;
  border-color: #768327;
  padding-bottom: 10px;
}
.btn-icon-secondary.btn-lg.btn-course.hover, .btn-icon-secondary.btn-lg.btn-course:hover {
  background-color: #e7dcaf;
}

.btn-icon-success {
  color: var(--success-color-dark);
  border: 2px solid var(--success-color);
  background-color: var(--success-color);
  transition: all ease 0.3s;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.btn-icon-success:hover, .btn-icon-success:focus, .btn-icon-success:active, .btn-icon-success.focus, .btn-icon-success.active {
  border-color: var(--success-color);
  background-color: var(--success-color-dark);
}
.btn-icon-success:not(:disabled):not(.disabled).active, .btn-icon-success:not(:disabled):not(.disabled):active, .show > .btn-icon-success.dropdown-toggle {
  opacity: 75%;
}
.btn-icon-success.focus, .btn-icon-success:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--success-color)), 0.3;
}
.btn-icon-success.btn-lg {
  height: 60px;
  width: 60px;
}
.btn-icon-success.btn-lg i {
  font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
  .btn-icon-success.btn-lg {
    height: 42px;
    width: 42px;
  }
  .btn-icon-success.btn-lg i {
    font-size: 1.5rem;
  }
}
.btn-icon-success.btn-lg.btn-course {
  background-color: #F5F1C7;
  border-color: #768327;
  padding-bottom: 10px;
}
.btn-icon-success.btn-lg.btn-course.hover, .btn-icon-success.btn-lg.btn-course:hover {
  background-color: #e7dcaf;
}

.btn-icon-warning {
  color: var(--warning-color-dark);
  border: 2px solid var(--warning-color);
  background-color: var(--warning-color);
  transition: all ease 0.3s;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.btn-icon-warning:hover, .btn-icon-warning:focus, .btn-icon-warning:active, .btn-icon-warning.focus, .btn-icon-warning.active {
  border-color: var(--warning-color);
  background-color: var(--warning-color-dark);
}
.btn-icon-warning:not(:disabled):not(.disabled).active, .btn-icon-warning:not(:disabled):not(.disabled):active, .show > .btn-icon-warning.dropdown-toggle {
  opacity: 75%;
}
.btn-icon-warning.focus, .btn-icon-warning:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--warning-color)), 0.3;
}
.btn-icon-warning.btn-lg {
  height: 60px;
  width: 60px;
}
.btn-icon-warning.btn-lg i {
  font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
  .btn-icon-warning.btn-lg {
    height: 42px;
    width: 42px;
  }
  .btn-icon-warning.btn-lg i {
    font-size: 1.5rem;
  }
}
.btn-icon-warning.btn-lg.btn-course {
  background-color: #F5F1C7;
  border-color: #768327;
  padding-bottom: 10px;
}
.btn-icon-warning.btn-lg.btn-course.hover, .btn-icon-warning.btn-lg.btn-course:hover {
  background-color: #e7dcaf;
}

.btn-icon-info {
  color: var(--info-color-dark);
  border: 2px solid var(--info-color);
  background-color: var(--info-color);
  transition: all ease 0.3s;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.btn-icon-info:hover, .btn-icon-info:focus, .btn-icon-info:active, .btn-icon-info.focus, .btn-icon-info.active {
  border-color: var(--info-color);
  background-color: var(--info-color-dark);
}
.btn-icon-info:not(:disabled):not(.disabled).active, .btn-icon-info:not(:disabled):not(.disabled):active, .show > .btn-icon-info.dropdown-toggle {
  opacity: 75%;
}
.btn-icon-info.focus, .btn-icon-info:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--info-color)), 0.3;
}
.btn-icon-info.btn-lg {
  height: 60px;
  width: 60px;
}
.btn-icon-info.btn-lg i {
  font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
  .btn-icon-info.btn-lg {
    height: 42px;
    width: 42px;
  }
  .btn-icon-info.btn-lg i {
    font-size: 1.5rem;
  }
}
.btn-icon-info.btn-lg.btn-course {
  background-color: #F5F1C7;
  border-color: #768327;
  padding-bottom: 10px;
}
.btn-icon-info.btn-lg.btn-course.hover, .btn-icon-info.btn-lg.btn-course:hover {
  background-color: #e7dcaf;
}

.btn-icon-danger {
  color: var(--danger-color-dark);
  border: 2px solid var(--danger-color);
  background-color: var(--danger-color);
  transition: all ease 0.3s;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.btn-icon-danger:hover, .btn-icon-danger:focus, .btn-icon-danger:active, .btn-icon-danger.focus, .btn-icon-danger.active {
  border-color: var(--danger-color);
  background-color: var(--danger-color-dark);
}
.btn-icon-danger:not(:disabled):not(.disabled).active, .btn-icon-danger:not(:disabled):not(.disabled):active, .show > .btn-icon-danger.dropdown-toggle {
  opacity: 75%;
}
.btn-icon-danger.focus, .btn-icon-danger:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--danger-color)), 0.3;
}
.btn-icon-danger.btn-lg {
  height: 60px;
  width: 60px;
}
.btn-icon-danger.btn-lg i {
  font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
  .btn-icon-danger.btn-lg {
    height: 42px;
    width: 42px;
  }
  .btn-icon-danger.btn-lg i {
    font-size: 1.5rem;
  }
}
.btn-icon-danger.btn-lg.btn-course {
  background-color: #F5F1C7;
  border-color: #768327;
  padding-bottom: 10px;
}
.btn-icon-danger.btn-lg.btn-course.hover, .btn-icon-danger.btn-lg.btn-course:hover {
  background-color: #e7dcaf;
}

.btn-icon-light {
  color: var(--light-color-dark);
  border: 2px solid var(--light-color);
  background-color: var(--light-color);
  transition: all ease 0.3s;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.btn-icon-light:hover, .btn-icon-light:focus, .btn-icon-light:active, .btn-icon-light.focus, .btn-icon-light.active {
  border-color: var(--light-color);
  background-color: var(--light-color-dark);
}
.btn-icon-light:not(:disabled):not(.disabled).active, .btn-icon-light:not(:disabled):not(.disabled):active, .show > .btn-icon-light.dropdown-toggle {
  opacity: 75%;
}
.btn-icon-light.focus, .btn-icon-light:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--light-color)), 0.3;
}
.btn-icon-light.btn-lg {
  height: 60px;
  width: 60px;
}
.btn-icon-light.btn-lg i {
  font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
  .btn-icon-light.btn-lg {
    height: 42px;
    width: 42px;
  }
  .btn-icon-light.btn-lg i {
    font-size: 1.5rem;
  }
}
.btn-icon-light.btn-lg.btn-course {
  background-color: #F5F1C7;
  border-color: #768327;
  padding-bottom: 10px;
}
.btn-icon-light.btn-lg.btn-course.hover, .btn-icon-light.btn-lg.btn-course:hover {
  background-color: #e7dcaf;
}

.btn-icon-dark {
  color: var(--dark-color-dark);
  border: 2px solid var(--dark-color);
  background-color: var(--dark-color);
  transition: all ease 0.3s;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.btn-icon-dark:hover, .btn-icon-dark:focus, .btn-icon-dark:active, .btn-icon-dark.focus, .btn-icon-dark.active {
  border-color: var(--dark-color);
  background-color: var(--dark-color-dark);
}
.btn-icon-dark:not(:disabled):not(.disabled).active, .btn-icon-dark:not(:disabled):not(.disabled):active, .show > .btn-icon-dark.dropdown-toggle {
  opacity: 75%;
}
.btn-icon-dark.focus, .btn-icon-dark:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--dark-color)), 0.3;
}
.btn-icon-dark.btn-lg {
  height: 60px;
  width: 60px;
}
.btn-icon-dark.btn-lg i {
  font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
  .btn-icon-dark.btn-lg {
    height: 42px;
    width: 42px;
  }
  .btn-icon-dark.btn-lg i {
    font-size: 1.5rem;
  }
}
.btn-icon-dark.btn-lg.btn-course {
  background-color: #F5F1C7;
  border-color: #768327;
  padding-bottom: 10px;
}
.btn-icon-dark.btn-lg.btn-course.hover, .btn-icon-dark.btn-lg.btn-course:hover {
  background-color: #e7dcaf;
}

.btn-icon-dashed-primary {
  color: var(--primary-color-dark);
  border: 2px dashed var(--primary-color);
  background-color: transparent;
  transition: all ease 0.3s;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
@media (max-width: 1199.98px) {
  .btn-icon-dashed-primary {
    height: 20px;
    width: 20px;
  }
  .btn-icon-dashed-primary i {
    font-size: 1.5rem;
  }
}
.btn-icon-dashed-primary.btn-lg {
  height: 60px;
  width: 60px;
}
.btn-icon-dashed-primary.btn-lg i {
  font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
  .btn-icon-dashed-primary.btn-lg {
    height: 42px;
    width: 42px;
  }
  .btn-icon-dashed-primary.btn-lg i {
    font-size: 1.5rem;
  }
}
.btn-icon-dashed-primary:hover, .btn-icon-dashed-primary:focus, .btn-icon-dashed-primary:active, .btn-icon-dashed-primary.focus, .btn-icon-dashed-primary.active {
  border-color: var(--primary-color);
  background-color: transparent;
  transform: scale(1.2);
}
.btn-icon-dashed-primary:not(:disabled):not(.disabled).active, .btn-icon-dashed-primary:not(:disabled):not(.disabled):active, .show > .btn-icon-dashed-primary.dropdown-toggle {
  opacity: 75%;
}
.btn-icon-dashed-primary.focus, .btn-icon-dashed-primary:focus {
  background-color: rgba(var(--primary-color));
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color));
}

.btn-icon-dashed-secondary {
  color: var(--secondary-color-dark);
  border: 2px dashed var(--secondary-color);
  background-color: transparent;
  transition: all ease 0.3s;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
@media (max-width: 1199.98px) {
  .btn-icon-dashed-secondary {
    height: 20px;
    width: 20px;
  }
  .btn-icon-dashed-secondary i {
    font-size: 1.5rem;
  }
}
.btn-icon-dashed-secondary.btn-lg {
  height: 60px;
  width: 60px;
}
.btn-icon-dashed-secondary.btn-lg i {
  font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
  .btn-icon-dashed-secondary.btn-lg {
    height: 42px;
    width: 42px;
  }
  .btn-icon-dashed-secondary.btn-lg i {
    font-size: 1.5rem;
  }
}
.btn-icon-dashed-secondary:hover, .btn-icon-dashed-secondary:focus, .btn-icon-dashed-secondary:active, .btn-icon-dashed-secondary.focus, .btn-icon-dashed-secondary.active {
  border-color: var(--secondary-color);
  background-color: transparent;
  transform: scale(1.2);
}
.btn-icon-dashed-secondary:not(:disabled):not(.disabled).active, .btn-icon-dashed-secondary:not(:disabled):not(.disabled):active, .show > .btn-icon-dashed-secondary.dropdown-toggle {
  opacity: 75%;
}
.btn-icon-dashed-secondary.focus, .btn-icon-dashed-secondary:focus {
  background-color: rgba(var(--secondary-color));
  box-shadow: 0 0 0 0.2rem rgba(var(--secondary-color));
}

.btn-icon-dashed-success {
  color: var(--success-color-dark);
  border: 2px dashed var(--success-color);
  background-color: transparent;
  transition: all ease 0.3s;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
@media (max-width: 1199.98px) {
  .btn-icon-dashed-success {
    height: 20px;
    width: 20px;
  }
  .btn-icon-dashed-success i {
    font-size: 1.5rem;
  }
}
.btn-icon-dashed-success.btn-lg {
  height: 60px;
  width: 60px;
}
.btn-icon-dashed-success.btn-lg i {
  font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
  .btn-icon-dashed-success.btn-lg {
    height: 42px;
    width: 42px;
  }
  .btn-icon-dashed-success.btn-lg i {
    font-size: 1.5rem;
  }
}
.btn-icon-dashed-success:hover, .btn-icon-dashed-success:focus, .btn-icon-dashed-success:active, .btn-icon-dashed-success.focus, .btn-icon-dashed-success.active {
  border-color: var(--success-color);
  background-color: transparent;
  transform: scale(1.2);
}
.btn-icon-dashed-success:not(:disabled):not(.disabled).active, .btn-icon-dashed-success:not(:disabled):not(.disabled):active, .show > .btn-icon-dashed-success.dropdown-toggle {
  opacity: 75%;
}
.btn-icon-dashed-success.focus, .btn-icon-dashed-success:focus {
  background-color: rgba(var(--success-color));
  box-shadow: 0 0 0 0.2rem rgba(var(--success-color));
}

.btn-icon-dashed-warning {
  color: var(--warning-color-dark);
  border: 2px dashed var(--warning-color);
  background-color: transparent;
  transition: all ease 0.3s;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
@media (max-width: 1199.98px) {
  .btn-icon-dashed-warning {
    height: 20px;
    width: 20px;
  }
  .btn-icon-dashed-warning i {
    font-size: 1.5rem;
  }
}
.btn-icon-dashed-warning.btn-lg {
  height: 60px;
  width: 60px;
}
.btn-icon-dashed-warning.btn-lg i {
  font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
  .btn-icon-dashed-warning.btn-lg {
    height: 42px;
    width: 42px;
  }
  .btn-icon-dashed-warning.btn-lg i {
    font-size: 1.5rem;
  }
}
.btn-icon-dashed-warning:hover, .btn-icon-dashed-warning:focus, .btn-icon-dashed-warning:active, .btn-icon-dashed-warning.focus, .btn-icon-dashed-warning.active {
  border-color: var(--warning-color);
  background-color: transparent;
  transform: scale(1.2);
}
.btn-icon-dashed-warning:not(:disabled):not(.disabled).active, .btn-icon-dashed-warning:not(:disabled):not(.disabled):active, .show > .btn-icon-dashed-warning.dropdown-toggle {
  opacity: 75%;
}
.btn-icon-dashed-warning.focus, .btn-icon-dashed-warning:focus {
  background-color: rgba(var(--warning-color));
  box-shadow: 0 0 0 0.2rem rgba(var(--warning-color));
}

.btn-icon-dashed-info {
  color: var(--info-color-dark);
  border: 2px dashed var(--info-color);
  background-color: transparent;
  transition: all ease 0.3s;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
@media (max-width: 1199.98px) {
  .btn-icon-dashed-info {
    height: 20px;
    width: 20px;
  }
  .btn-icon-dashed-info i {
    font-size: 1.5rem;
  }
}
.btn-icon-dashed-info.btn-lg {
  height: 60px;
  width: 60px;
}
.btn-icon-dashed-info.btn-lg i {
  font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
  .btn-icon-dashed-info.btn-lg {
    height: 42px;
    width: 42px;
  }
  .btn-icon-dashed-info.btn-lg i {
    font-size: 1.5rem;
  }
}
.btn-icon-dashed-info:hover, .btn-icon-dashed-info:focus, .btn-icon-dashed-info:active, .btn-icon-dashed-info.focus, .btn-icon-dashed-info.active {
  border-color: var(--info-color);
  background-color: transparent;
  transform: scale(1.2);
}
.btn-icon-dashed-info:not(:disabled):not(.disabled).active, .btn-icon-dashed-info:not(:disabled):not(.disabled):active, .show > .btn-icon-dashed-info.dropdown-toggle {
  opacity: 75%;
}
.btn-icon-dashed-info.focus, .btn-icon-dashed-info:focus {
  background-color: rgba(var(--info-color));
  box-shadow: 0 0 0 0.2rem rgba(var(--info-color));
}

.btn-icon-dashed-danger {
  color: var(--danger-color-dark);
  border: 2px dashed var(--danger-color);
  background-color: transparent;
  transition: all ease 0.3s;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
@media (max-width: 1199.98px) {
  .btn-icon-dashed-danger {
    height: 20px;
    width: 20px;
  }
  .btn-icon-dashed-danger i {
    font-size: 1.5rem;
  }
}
.btn-icon-dashed-danger.btn-lg {
  height: 60px;
  width: 60px;
}
.btn-icon-dashed-danger.btn-lg i {
  font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
  .btn-icon-dashed-danger.btn-lg {
    height: 42px;
    width: 42px;
  }
  .btn-icon-dashed-danger.btn-lg i {
    font-size: 1.5rem;
  }
}
.btn-icon-dashed-danger:hover, .btn-icon-dashed-danger:focus, .btn-icon-dashed-danger:active, .btn-icon-dashed-danger.focus, .btn-icon-dashed-danger.active {
  border-color: var(--danger-color);
  background-color: transparent;
  transform: scale(1.2);
}
.btn-icon-dashed-danger:not(:disabled):not(.disabled).active, .btn-icon-dashed-danger:not(:disabled):not(.disabled):active, .show > .btn-icon-dashed-danger.dropdown-toggle {
  opacity: 75%;
}
.btn-icon-dashed-danger.focus, .btn-icon-dashed-danger:focus {
  background-color: rgba(var(--danger-color));
  box-shadow: 0 0 0 0.2rem rgba(var(--danger-color));
}

.btn-icon-dashed-light {
  color: var(--light-color-dark);
  border: 2px dashed var(--light-text-color);
  background-color: transparent;
  transition: all ease 0.3s;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
@media (max-width: 1199.98px) {
  .btn-icon-dashed-light {
    height: 20px;
    width: 20px;
  }
  .btn-icon-dashed-light i {
    font-size: 1.5rem;
  }
}
.btn-icon-dashed-light.btn-lg {
  height: 60px;
  width: 60px;
}
.btn-icon-dashed-light.btn-lg i {
  font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
  .btn-icon-dashed-light.btn-lg {
    height: 42px;
    width: 42px;
  }
  .btn-icon-dashed-light.btn-lg i {
    font-size: 1.5rem;
  }
}
.btn-icon-dashed-light:hover, .btn-icon-dashed-light:focus, .btn-icon-dashed-light:active, .btn-icon-dashed-light.focus, .btn-icon-dashed-light.active {
  border-color: var(--light-text-color);
  background-color: transparent;
  transform: scale(1.2);
}
.btn-icon-dashed-light:not(:disabled):not(.disabled).active, .btn-icon-dashed-light:not(:disabled):not(.disabled):active, .show > .btn-icon-dashed-light.dropdown-toggle {
  opacity: 75%;
}
.btn-icon-dashed-light.focus, .btn-icon-dashed-light:focus {
  background-color: rgba(var(--light-text-color));
  box-shadow: 0 0 0 0.2rem rgba(var(--light-text-color));
}

.btn-icon-dashed-dark {
  color: var(--dark-color-dark);
  border: 2px dashed var(--dark-color);
  background-color: transparent;
  transition: all ease 0.3s;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
@media (max-width: 1199.98px) {
  .btn-icon-dashed-dark {
    height: 20px;
    width: 20px;
  }
  .btn-icon-dashed-dark i {
    font-size: 1.5rem;
  }
}
.btn-icon-dashed-dark.btn-lg {
  height: 60px;
  width: 60px;
}
.btn-icon-dashed-dark.btn-lg i {
  font-size: 2.5rem;
}
@media (max-width: 1199.98px) {
  .btn-icon-dashed-dark.btn-lg {
    height: 42px;
    width: 42px;
  }
  .btn-icon-dashed-dark.btn-lg i {
    font-size: 1.5rem;
  }
}
.btn-icon-dashed-dark:hover, .btn-icon-dashed-dark:focus, .btn-icon-dashed-dark:active, .btn-icon-dashed-dark.focus, .btn-icon-dashed-dark.active {
  border-color: var(--dark-color);
  background-color: transparent;
  transform: scale(1.2);
}
.btn-icon-dashed-dark:not(:disabled):not(.disabled).active, .btn-icon-dashed-dark:not(:disabled):not(.disabled):active, .show > .btn-icon-dashed-dark.dropdown-toggle {
  opacity: 75%;
}
.btn-icon-dashed-dark.focus, .btn-icon-dashed-dark:focus {
  background-color: rgba(var(--dark-color));
  box-shadow: 0 0 0 0.2rem rgba(var(--dark-color));
}

.hover-link {
  position: relative;
  cursor: pointer;
}
.hover-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 4px;
  background-color: var(--visual-link-color);
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}
.hover-link:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

.label-btn {
  font-family: "Cubano", sans-serif !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
  letter-spacing: inherit !important;
}

.close-modal-button {
  cursor: pointer;
  background: var(--notification-hub-close-button-color) !important;
  display: flex;
  justify-content: center;
  align-content: center;
  font-size: 1.5rem;
  line-height: 0.8rem;
  height: 2.5rem;
  width: 2.5rem;
  color: var(--notification-hub-close-button-icon-color);
  border-radius: 50%;
  margin: -12px -20px 0px 0px;
  transition: 0.3s;
  padding: 0.8rem;
  font-family: "tgn-soft-round-comp", sans-serif;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.45);
}
.close-modal-button:hover {
  color: var(--notification-hub-close-button-icon-color);
}

.restart-button {
  border: 0;
  box-shadow: none;
  background-color: transparent;
  gap: 3px;
  margin-left: -1rem;
  margin-top: -1rem;
  transition: all 200ms;
}
.restart-button i {
  rotate: 0;
  scale: 1;
  transition: all 200ms;
}
.restart-button:hover, .restart-button:active, .restart-button:focus, .restart-button:not(:disabled):not(.disabled):active, .restart-button:not(:disabled):not(.disabled):active:focus {
  box-shadow: none;
}
.restart-button:hover i, .restart-button:active i, .restart-button:focus i, .restart-button:not(:disabled):not(.disabled):active i, .restart-button:not(:disabled):not(.disabled):active:focus i {
  scale: 1.1;
  rotate: -10deg;
}

.step-back-button {
  border: 0;
  box-shadow: none;
  background-color: transparent;
  gap: 3px;
  margin-left: -1rem;
  margin-top: -1rem;
  transition: all 200ms;
}
.step-back-button i {
  scale: 1;
  transition: all 200ms;
}
.step-back-button:hover, .step-back-button:active, .step-back-button:focus, .step-back-button:not(:disabled):not(.disabled):active, .step-back-button:not(:disabled):not(.disabled):active:focus {
  box-shadow: none;
}
.step-back-button:hover i, .step-back-button:active i, .step-back-button:focus i, .step-back-button:not(:disabled):not(.disabled):active i, .step-back-button:not(:disabled):not(.disabled):active:focus i {
  scale: 1.1;
}

.slide-nav {
  display: flex;
  justify-content: end;
  margin: 0.5rem;
}
.slide-nav-spacer {
  flex-grow: 1;
}

.btn-col {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-content: center;
}
.btn-col .btn {
  margin-top: 1rem;
}

.btn-row .equal-width .btn {
  flex: 1;
}
@media (min-width: 576px) {
  .btn-row {
    display: flex;
    justify-content: center;
    align-content: center;
  }
}
.btn-row .btn,
.btn-row button {
  margin: 8px 20px;
}
@media (min-width: 576px) {
  .btn-row .btn,
  .btn-row button {
    margin: 0px 8px 0px 8px;
  }
}
@media (min-width: 576px) {
  .btn-row .btn:first-child,
  .btn-row button:first-child {
    margin-left: 0px;
  }
}
@media (min-width: 576px) {
  .btn-row .btn:last-child,
  .btn-row button:last-child {
    margin-right: 0px;
  }
}

/*_____________ALERTS_________________*/
.card.illustration-card, .floating-menu-container .illustration-card.floating-menu {
  width: 300px !important;
  margin-top: 10px;
  display: block !important;
  background-color: var(--light-background-color);
  border: solid 1px var(--dark-color-light) !important;
  margin: 2rem 0px !important;
}
.card.illustration-card img, .floating-menu-container .illustration-card.floating-menu img {
  padding: 1rem;
  width: inherit;
}
.card.illustration-card .card-body, .floating-menu-container .illustration-card.floating-menu .card-body {
  background-color: var(--light-background-color-darker);
  border-bottom-right-radius: 0.8rem;
  border-bottom-left-radius: 0.8rem;
}

/*_____________ALERTS_________________*/
#blazor-error-ui {
  background: var(--blazor-error-background-color);
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 6;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.alert-info.instructions {
  color: var(--warning-color);
  background-color: var(--light-background-color);
  border-color: var(--light-background-color);
  text-align: center;
  width: 50%;
  margin: 0 auto 2em;
}

.alert {
  background-position: 50% 50%;
  background-size: contain;
  padding: 1rem 3rem;
  background-repeat: no-repeat;
  background-color: transparent;
  border-color: transparent;
  font-size: xx-large;
  color: var(--white-color);
  font-family: fenway-park-jf, sans-serif;
  font-weight: 400;
}
.alert h1,
.alert h2,
.alert h3,
.alert h4,
.alert h5,
.alert h6,
.alert p,
.alert a {
  font-size: xx-large;
  color: var(--white-color);
  font-family: fenway-park-jf, sans-serif;
  font-weight: 400;
}
.navbar .alert {
  align-items: center;
  padding: 1rem 1.6rem 1.2rem 1.6rem;
  margin-top: -0.3rem;
  margin-left: 1vw;
}
.navbar .alert h1.navbar-brand,
.navbar .alert h2.navbar-brand,
.navbar .alert h3.navbar-brand,
.navbar .alert h4.navbar-brand,
.navbar .alert h5.navbar-brand,
.navbar .alert h6.navbar-brand,
.navbar .alert p.navbar-brand,
.navbar .alert a.navbar-brand {
  color: var(--white-color);
}

.alert-primary {
  background-image: var(--alert-primary-image-path);
  color: var(--alert-primary-text-color);
  background-size: 100% 100%;
}
.alert-primary h1,
.alert-primary h2,
.alert-primary h3,
.alert-primary h4,
.alert-primary h5,
.alert-primary h6,
.alert-primary p,
.alert-primary a {
  color: var(--alert-primary-text-color);
}

.alert-success {
  background-image: var(--alert-success-image-path);
  background-size: 100% 100%;
}

.alert-info {
  background-image: var(--alert-info-image-path);
  color: var(--alert-info-text-color);
  background-size: 100% 100%;
}
.alert-info h1,
.alert-info h2,
.alert-info h3,
.alert-info h4,
.alert-info h5,
.alert-info h6,
.alert-info p,
.alert-info a {
  color: var(--alert-info-text-color);
}

.alert-warning {
  background-image: var(--alert-warning-image-path);
  background-size: 100% 100%;
}

.alert-danger {
  background-image: var(--alert-primary-image-path);
  background-size: 100% 100%;
}

.alert-secondary {
  background-image: var(--alert-secondary-image-path);
  background-size: 100% 100%;
}
.alert-secondary h1.slab-font,
.alert-secondary h2.slab-font,
.alert-secondary h3.slab-font,
.alert-secondary h4.slab-font,
.alert-secondary h5.slab-font,
.alert-secondary h6.slab-font,
.alert-secondary p.slab-font,
.alert-secondary a.slab-font {
  font-family: henderson-slab-basic, serif;
}

.alert-light {
  background-image: var(--alert-light-image-path);
  color: var(--alert-light-text-color);
  background-size: 100% 100%;
}
.alert-light h1,
.alert-light h2,
.alert-light h3,
.alert-light h4,
.alert-light h5,
.alert-light h6,
.alert-light p,
.alert-light a {
  font-size: xx-large;
  color: var(--alert-light-text-color);
}
.alert-light h1.slab-font,
.alert-light h2.slab-font,
.alert-light h3.slab-font,
.alert-light h4.slab-font,
.alert-light h5.slab-font,
.alert-light h6.slab-font,
.alert-light p.slab-font,
.alert-light a.slab-font {
  font-family: henderson-slab-basic, serif;
}

/*}*/
/*Style Toast Alerts*/
/*Badges and Pills*/
.badge {
  letter-spacing: 0.5px;
}
.badge.badge-primary {
  color: var(--badge-primary-text-color);
  background-color: var(--badge-primary-background-color);
}
.badge.badge-secondary {
  color: var(--badge-secondary-text-color);
  background-color: var(--badge-secondary-background-color);
}
.badge.badge-success {
  color: var(--badge-success-text-color);
  background-color: var(--badge-success-background-color);
}
.badge.badge-warning {
  color: var(--badge-warning-text-color);
  background-color: var(--badge-warning-background-color);
}
.badge.badge-danger {
  color: var(--badge-danger-text-color);
  background-color: var(--badge-danger-background-color);
}
.badge.badge-light {
  color: var(--badge-light-background-color);
  background-color: var(--badge-light-background-color);
  border: 1px solid var(--badge-light-text-color);
}
.badge.badge-info {
  color: var(--badge-info-text-color);
  background-color: var(--badge-info-background-color);
}
.badge.badge-dark {
  color: var(--badge-dark-text-color);
  background-color: var(--badge-dark-background-color);
}

/*_____________AVATARS_________________*/
.profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}
@media screen and (max-height: 768px) {
  .profile-avatar {
    height: 30px;
    width: 30px;
  }
}

.fade-in {
  visibility: visible;
  opacity: 1;
  transition: opacity 200ms linear;
}

.fade-out {
  visibility: hidden;
  opacity: 0;
  height: 0;
  transition: visibility 0s 0ms, opacity 0ms linear;
  display: none !important;
}

.selected-clan {
  border-radius: 100%;
  box-shadow: 3px 3px 0px 3px var(--dark-color) !important;
  background-color: var(--warning-color) !important;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

.selected-avatar {
  border-radius: 100%;
  box-shadow: 3px 3px 0px 3px var(--selected-avatar-color) !important;
  background-color: var(--selected-avatar-color) !important;
  transform: scale(1.1);
}

/*Clan Badges*/
.clan-badge img {
  width: 18vw;
  max-height: 19vh;
  margin: 4px;
}
@media (max-width: 1499.98px) {
  .clan-badge img {
    width: 14vw;
    max-height: 26vh;
  }
}

/*Style avatar in a card layout*/
.card-avatar {
  background-color: var(--avatar-card-background-color);
  padding: 5px;
  border: 4px dashed var(--avatar-card-border-color);
}

.dialogue-avatar {
  background-color: var(--avatar-card-background-color);
  padding: 5px;
  border: 4px dashed var(--avatar-card-border-color);
  height: 10rem;
  width: 10rem;
  margin-top: -3vh;
  margin-left: -3vw;
}
@media (max-width: 1199.98px) {
  .dialogue-avatar {
    height: 8rem;
    width: 8rem;
  }
}
@media screen and (max-height: 600px) {
  .dialogue-avatar {
    height: 8rem;
    width: 8rem;
  }
}

/*_________Module Selection___________*/
/*Backgrounds of Module Map Themes*/
.module_map {
  z-index: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  top: auto;
  display: flex;
  max-height: none;
  max-width: 80vw;
  margin: auto;
  min-height: 90vh;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  background-image: url(/images/levels/map/map-module-theme-1.svg);
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-clip: border-box;
  -o-object-fit: fill;
  object-fit: fill;
  transform: rotate(2deg);
}
.module_map.theme_2 {
  background-image: url(/images/levels/map/map-module-theme-2.svg);
}
.module_map.theme_3 {
  background-image: url(/images/levels/map/map-module-theme-3.svg);
}
.module_map.theme_4 {
  background-image: url(/images/levels/map/map-module-theme-4.svg);
}

/* Module Badges*/
.modules-select {
  max-width: 1000px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 100vh;
}
@media screen and (max-height: 768px) {
  .modules-select {
    max-width: 800px;
  }
}
.modules-select .nav-link {
  flex: 0 0 auto;
  padding: 0px;
  position: relative;
  transition: all 0.5s;
}
.modules-select .nav-link:hover .module-info {
  z-index: 3;
}
.modules-select .nav-link .module-completed,
.modules-select .nav-link .module-locked,
.modules-select .nav-link .module-unlocked,
.modules-select .nav-link .module-disabled,
.modules-select .nav-link .module-InProgress {
  display: -ms-flexbox;
  background-repeat: no-repeat;
  background-position: 60% 50%;
  height: 180px;
  width: 180px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-end;
  margin-bottom: 50px;
  transition: 0.3s;
  z-index: 3;
  /* Hover ToolTip*/
}
.modules-select .nav-link .module-completed + .module-info,
.modules-select .nav-link .module-locked + .module-info,
.modules-select .nav-link .module-unlocked + .module-info,
.modules-select .nav-link .module-disabled + .module-info,
.modules-select .nav-link .module-InProgress + .module-info {
  z-index: 3;
  visibility: hidden;
  opacity: 0.4;
  background: var(--module-popover-background-color);
  border-radius: 0.4em;
  box-shadow: 5px 4px 0 1px var(--module-popover-shadow-color);
  position: absolute;
  top: -5px;
  left: 9.275vw;
  transform: translateY(9px);
  transition: all 0.3s ease-in-out;
  height: auto;
  min-width: 25vw;
  width: 0px;
}
.modules-select .nav-link .module-completed + .module-info:after,
.modules-select .nav-link .module-locked + .module-info:after,
.modules-select .nav-link .module-unlocked + .module-info:after,
.modules-select .nav-link .module-disabled + .module-info:after,
.modules-select .nav-link .module-InProgress + .module-info:after {
  content: " ";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 15px 0 12.5px;
  border-color: var(--module-popover-background-color) transparent transparent transparent;
  position: absolute;
  top: 40%;
  left: -19px;
  transform: rotate(90deg);
}
.modules-select .nav-link .module-completed + .module-info .module-info-inner,
.modules-select .nav-link .module-locked + .module-info .module-info-inner,
.modules-select .nav-link .module-unlocked + .module-info .module-info-inner,
.modules-select .nav-link .module-disabled + .module-info .module-info-inner,
.modules-select .nav-link .module-InProgress + .module-info .module-info-inner {
  padding: 3vh 3vh;
  font-size: 80%;
}
.modules-select .nav-link .module-completed + .module-info .module-info-inner h2,
.modules-select .nav-link .module-locked + .module-info .module-info-inner h2,
.modules-select .nav-link .module-unlocked + .module-info .module-info-inner h2,
.modules-select .nav-link .module-disabled + .module-info .module-info-inner h2,
.modules-select .nav-link .module-InProgress + .module-info .module-info-inner h2 {
  color: var(--module-popover-heading-color);
}
.modules-select .nav-link .module-completed + .module-info .module-info-inner p,
.modules-select .nav-link .module-locked + .module-info .module-info-inner p,
.modules-select .nav-link .module-unlocked + .module-info .module-info-inner p,
.modules-select .nav-link .module-disabled + .module-info .module-info-inner p,
.modules-select .nav-link .module-InProgress + .module-info .module-info-inner p {
  color: var(--black-text-color);
}
.modules-select .nav-link .module-completed:hover + .module-info,
.modules-select .nav-link .module-locked:hover + .module-info,
.modules-select .nav-link .module-unlocked:hover + .module-info,
.modules-select .nav-link .module-disabled:hover + .module-info,
.modules-select .nav-link .module-InProgress:hover + .module-info {
  visibility: visible;
  transform: translateY(-10px);
  opacity: 1;
  transition: 0.3s linear;
  animation: odsoky 1s ease-in-out infinite alternate;
}
@keyframes odsoky {
  0% {
    transform: translateY(6px);
  }
  100% {
    transform: translateY(1px);
  }
}
.modules-select .nav-link .module-completed.left:hover, .modules-select .nav-link .module-completed.top:hover, .modules-select .nav-link .module-completed.bottom:hover, .modules-select .nav-link .module-completed.right:hover,
.modules-select .nav-link .module-locked.left:hover,
.modules-select .nav-link .module-locked.top:hover,
.modules-select .nav-link .module-locked.bottom:hover,
.modules-select .nav-link .module-locked.right:hover,
.modules-select .nav-link .module-unlocked.left:hover,
.modules-select .nav-link .module-unlocked.top:hover,
.modules-select .nav-link .module-unlocked.bottom:hover,
.modules-select .nav-link .module-unlocked.right:hover,
.modules-select .nav-link .module-disabled.left:hover,
.modules-select .nav-link .module-disabled.top:hover,
.modules-select .nav-link .module-disabled.bottom:hover,
.modules-select .nav-link .module-disabled.right:hover,
.modules-select .nav-link .module-InProgress.left:hover,
.modules-select .nav-link .module-InProgress.top:hover,
.modules-select .nav-link .module-InProgress.bottom:hover,
.modules-select .nav-link .module-InProgress.right:hover {
  transform: translateX(-6px);
}
@media screen and (max-height: 768px) {
  .modules-select .nav-link .module-completed,
  .modules-select .nav-link .module-locked,
  .modules-select .nav-link .module-unlocked,
  .modules-select .nav-link .module-disabled,
  .modules-select .nav-link .module-InProgress {
    height: 150px;
    width: 150px;
    margin-bottom: 30px;
  }
}
.modules-select .nav-link .module-completed:after,
.modules-select .nav-link .module-locked:after,
.modules-select .nav-link .module-unlocked:after,
.modules-select .nav-link .module-disabled:after,
.modules-select .nav-link .module-InProgress:after {
  width: 0%;
}
.modules-select .nav-link .number {
  z-index: 1;
  text-align: center;
  margin-bottom: -26px;
}
.modules-select .nav-link .number p {
  margin: 0px;
  line-height: 55px;
  font-family: fenway-park-jf, sans-serif;
  color: var(--white-color);
  font-weight: 200;
  font-size: 34px;
  font-style: normal;
}
.modules-select .nav-link .number:after {
  background-image: url(/images/levels/modules/module-sequence-ribbon-orange.svg);
  content: " ";
  height: 55px;
  width: 55px;
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  margin-left: -28px;
  margin-top: -64px;
  z-index: -1;
}
.modules-select a {
  text-decoration: none;
}
.modules-select .module-unlocked {
  background-image: url(/images/levels/map/map-module-unlocked.svg);
}
.modules-select .module-completed {
  background-image: url(/images/levels/map/map-module-complete.svg);
}
.modules-select .module-InProgress {
  background-image: url(/images/levels/map/map-module-progressing.svg);
}
.modules-select .module-disabled {
  background-image: url(/images/levels/map/map-module-disabled.svg);
  opacity: 0.7;
}
.modules-select .module-locked {
  background-image: url(/images/levels/map/map-module-locked.svg);
}
.modules-select .module-completed:hover,
.modules-select .module-unlocked:hover,
.modules-select .module-InProgress:hover {
  transform: scale(1.2);
}
.modules-select .module-locked,
.modules-select .module-disabled {
  cursor: default;
}
.modules-select .module-locked .number,
.modules-select .module-disabled .number {
  opacity: 60%;
}

/*Module Content Styles*/
.card.module-content-layout, .floating-menu-container .module-content-layout.floating-menu {
  width: 75%;
}

.full-width-app .card.game-layout, .full-width-app .floating-menu-container .game-layout.floating-menu, .floating-menu-container .full-width-app .game-layout.floating-menu {
  width: -moz-fit-content;
  width: fit-content;
  background-color: rgba(255, 255, 255, 0);
}

.module-content-layout p {
  font-size: 150%;
}

/*Tables that have been included in module timed slides or other user generated content*/
.full-width-app table.e-rte-table,
.cms-preview table.e-rte-table {
  max-width: 50% !important;
  margin: 1em auto;
  border-radius: 0.8rem !important;
  background-color: var(--light-background-color-darker);
  box-shadow: none;
}
.full-width-app table.e-rte-table tr,
.cms-preview table.e-rte-table tr {
  border-radius: 0.8rem !important;
}
.full-width-app table.e-rte-table td,
.cms-preview table.e-rte-table td {
  border: 0px !important;
  padding: 5px 12px 12px 20px !important;
  line-height: 2rem;
}
.full-width-app table.e-rte-table p,
.cms-preview table.e-rte-table p {
  margin: 0 !important;
  padding: 4px 10px !important;
  font-weight: 500 !important;
}

/*_________Lesson and Activities Selection___________*/
/*Lesson Selection areas*/
.lesson-select, .tools-select {
  max-width: 600px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
}
@media (max-width: 1499.98px) {
  .lesson-select, .tools-select {
    margin-top: 5em;
  }
}
@media screen and (max-height: 768px) {
  .lesson-select, .tools-select {
    max-width: 500px;
    margin-top: 4vh;
  }
}
.lesson-select a, .tools-select a {
  text-decoration: none;
}
.lesson-select .nav-link, .tools-select .nav-link {
  flex: 0 0 auto;
  padding: 14px;
  position: relative;
  transition: all 0.5s;
}
.lesson-select .nav-link:hover, .tools-select .nav-link:hover {
  z-index: 3;
}

.lesson-neutral,
.lesson-inprogress,
.lesson-unlocked,
.lesson-locked,
.lesson-completed,
.lesson-optional {
  background-color: var(--light-background-color);
  display: -ms-flexbox;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  height: 90px;
  width: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: flex-end;
  z-index: 0;
  margin-bottom: 50px;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 10px var(--lesson-shadow-color);
  /*hover ToolTip*/
}
@media screen and (max-height: 768px) {
  .lesson-neutral,
  .lesson-inprogress,
  .lesson-unlocked,
  .lesson-locked,
  .lesson-completed,
  .lesson-optional {
    margin-bottom: 0px;
    height: 70px;
    width: 70px;
  }
}
.lesson-neutral:hover,
.lesson-inprogress:hover,
.lesson-unlocked:hover,
.lesson-locked:hover,
.lesson-completed:hover,
.lesson-optional:hover {
  transform: scale(1.2);
}
.lesson-neutral:after,
.lesson-inprogress:after,
.lesson-unlocked:after,
.lesson-locked:after,
.lesson-completed:after,
.lesson-optional:after {
  width: 0%;
}
.lesson-neutral + .module-info,
.lesson-inprogress + .module-info,
.lesson-unlocked + .module-info,
.lesson-locked + .module-info,
.lesson-completed + .module-info,
.lesson-optional + .module-info {
  z-index: 0;
  visibility: hidden;
  opacity: 0.4;
  background: var(--lesson-popover-background-color);
  border-radius: 0.4em;
  box-shadow: 5px 4px 0 1px var(--lesson-popover-shadow-color);
  position: absolute;
  top: 75%;
  left: -8.5vw;
  transform: translateY(9px);
  transition: all 0.3s ease-in-out;
  height: auto;
  min-width: 25vw;
  width: 0px;
}
@media (min-width: 1200px) {
  .lesson-neutral + .module-info,
  .lesson-inprogress + .module-info,
  .lesson-unlocked + .module-info,
  .lesson-locked + .module-info,
  .lesson-completed + .module-info,
  .lesson-optional + .module-info {
    left: -9.5vw;
  }
}
.lesson-neutral + .module-info:after,
.lesson-inprogress + .module-info:after,
.lesson-unlocked + .module-info:after,
.lesson-locked + .module-info:after,
.lesson-completed + .module-info:after,
.lesson-optional + .module-info:after {
  content: " ";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 15px 0 12.5px;
  border-color: var(--lesson-popover-background-color) transparent transparent transparent;
  position: absolute;
  top: -4%;
  left: 47%;
  transform: rotate(180deg);
}
.lesson-neutral + .module-info .module-info-inner,
.lesson-inprogress + .module-info .module-info-inner,
.lesson-unlocked + .module-info .module-info-inner,
.lesson-locked + .module-info .module-info-inner,
.lesson-completed + .module-info .module-info-inner,
.lesson-optional + .module-info .module-info-inner {
  padding: 3vh 3vh;
}
.lesson-neutral + .module-info .module-info-inner h2,
.lesson-inprogress + .module-info .module-info-inner h2,
.lesson-unlocked + .module-info .module-info-inner h2,
.lesson-locked + .module-info .module-info-inner h2,
.lesson-completed + .module-info .module-info-inner h2,
.lesson-optional + .module-info .module-info-inner h2 {
  color: var(--module-popover-header-color);
}
.lesson-neutral + .module-info .module-info-inner p,
.lesson-inprogress + .module-info .module-info-inner p,
.lesson-unlocked + .module-info .module-info-inner p,
.lesson-locked + .module-info .module-info-inner p,
.lesson-completed + .module-info .module-info-inner p,
.lesson-optional + .module-info .module-info-inner p {
  color: var(--black-text-color);
}
.lesson-neutral:hover,
.lesson-inprogress:hover,
.lesson-unlocked:hover,
.lesson-locked:hover,
.lesson-completed:hover,
.lesson-optional:hover {
  z-index: 3 !important;
}
.lesson-neutral:hover + .module-info,
.lesson-inprogress:hover + .module-info,
.lesson-unlocked:hover + .module-info,
.lesson-locked:hover + .module-info,
.lesson-completed:hover + .module-info,
.lesson-optional:hover + .module-info {
  visibility: visible;
  transform: translateY(-10px);
  opacity: 1;
  transition: 0.3s linear;
  animation: floating 1s ease-in-out infinite alternate;
}
@keyframes floating {
  0% {
    transform: translateY(6px);
  }
  100% {
    transform: translateY(1px);
  }
}
.lesson-neutral.left:hover, .lesson-neutral.top:hover, .lesson-neutral.bottom:hover, .lesson-neutral.right:hover,
.lesson-inprogress.left:hover,
.lesson-inprogress.top:hover,
.lesson-inprogress.bottom:hover,
.lesson-inprogress.right:hover,
.lesson-unlocked.left:hover,
.lesson-unlocked.top:hover,
.lesson-unlocked.bottom:hover,
.lesson-unlocked.right:hover,
.lesson-locked.left:hover,
.lesson-locked.top:hover,
.lesson-locked.bottom:hover,
.lesson-locked.right:hover,
.lesson-completed.left:hover,
.lesson-completed.top:hover,
.lesson-completed.bottom:hover,
.lesson-completed.right:hover,
.lesson-optional.left:hover,
.lesson-optional.top:hover,
.lesson-optional.bottom:hover,
.lesson-optional.right:hover {
  transform: translateY(-6px);
}

.lesson-locked {
  background-color: var(--light-background-color);
  opacity: 0.75;
}

.lesson-completed {
  border: 4px solid var(--lesson-completed-highlight-color);
}

.lesson-icon {
  z-index: 2;
  color: var(--lesson-default-border-color);
  border: 2px dashed var(--lesson-default-border-color);
  border-radius: 50%;
  font-family: fenway-park-jf, sans-serif;
  font-weight: 200;
  font-size: 56px;
  font-style: normal;
  width: 80px;
  height: 80px;
  text-align: center;
  animation-name: number;
  animation-timing-function: ease-in-out;
  margin-bottom: 0px;
}
@media screen and (max-height: 768px) {
  .lesson-icon {
    height: 64px;
    width: 64px;
  }
}
.lesson-icon img {
  vertical-align: top;
  padding: 4px;
  width: 100%;
}
.lesson-icon:after {
  background: none;
}
.lesson-icon p {
  margin: 0px;
  line-height: 80px;
}
.lesson-locked .lesson-icon {
  border: 2px dashed var(--lesson-default-border-color);
}
.lesson-completed .lesson-icon {
  color: var(--lesson-completed-border-color);
  border: 2px dashed var(--lesson-completed-border-color);
}
.lesson-neutral .lesson-icon {
  color: var(--lesson-default-border-color);
  border: 2px dashed var(--lesson-default-border-color);
}
.lesson-inprogress .lesson-icon {
  color: var(--lesson-inprogress-border-color);
  border: 2px dashed var(--lesson-inprogress-border-color);
}
.lesson-optional .lesson-icon {
  border: 2px dashed var(--lesson-optional-border-color);
}

/*Positions Lesson and Activity Buttons around the Campfire on The Module Campsite*/
.lesson-select-3 .nav-link:nth-child(2) {
  transform: translate3d(0, -40px, 0);
}

.lesson-select-5 .nav-link:nth-child(2), .lesson-select-5 .nav-link:nth-child(4) {
  transform: translate3d(0, -50px, 0);
}
.lesson-select-5 .nav-link:nth-child(3) {
  transform: translate3d(0, -70px, 0);
}

.lesson-select-7 .nav-link:nth-child(2), .lesson-select-7 .nav-link:nth-child(4) {
  transform: translate3d(0, -50px, 0);
}
.lesson-select-7 .nav-link:nth-child(3) {
  transform: translate3d(0, -70px, 0);
}

.lesson-select-9 .nav-link:nth-child(2), .lesson-select-9 .nav-link:nth-child(4) {
  transform: translate3d(0, -50px, 0);
}
.lesson-select-9 .nav-link:nth-child(3) {
  transform: translate3d(0, -70px, 0);
}
.lesson-select-9 .nav-link:nth-child(7) {
  transform: translate3d(0, -50px, 0);
}
.lesson-select-9 .nav-link:nth-child(8) {
  transform: translate3d(0, -50px, 0);
}

.lesson-select-11 .nav-link:nth-child(2), .lesson-select-11 .nav-link:nth-child(4), .lesson-select-11 .nav-link:nth-child(7), .lesson-select-11 .nav-link:nth-child(9) {
  transform: translate3d(0, -50px, 0);
}
.lesson-select-11 .nav-link:nth-child(3), .lesson-select-11 .nav-link:nth-child(8) {
  transform: translate3d(0, -70px, 0);
}
.lesson-select-11 .nav-link .activity-completed {
  margin-bottom: 0;
}

.lesson-select-13 .nav-link:nth-child(2), .lesson-select-13 .nav-link:nth-child(4), .lesson-select-13 .nav-link:nth-child(7), .lesson-select-13 .nav-link:nth-child(9) {
  transform: translate3d(0, -50px, 0);
}
.lesson-select-13 .nav-link:nth-child(3), .lesson-select-13 .nav-link:nth-child(8) {
  transform: translate3d(0, -70px, 0);
}
.lesson-select-13 .nav-link:nth-child(12) {
  transform: translate3d(0, -50px, 0);
}
.lesson-select-13 .nav-link .activity-completed {
  margin-bottom: 0;
}

.lesson-select-15 .nav-link:nth-child(15) {
  transform: translate3d(0, -70px, 0);
}

.lesson-select-4 .nav-link:nth-child(2) {
  transform: translate3d(0, -40px, 0);
}
.lesson-select-4 .nav-link:nth-child(3) {
  transform: translate3d(0, -40px, 0);
}

.lesson-select-6 .nav-link:nth-child(2), .lesson-select-6 .nav-link:nth-child(4) {
  transform: translate3d(0, -50px, 0);
}
.lesson-select-6 .nav-link:nth-child(3) {
  transform: translate3d(0, -70px, 0);
}

.lesson-select-8 .nav-link:nth-child(2), .lesson-select-8 .nav-link:nth-child(4) {
  transform: translate3d(0, -50px, 0);
}
.lesson-select-8 .nav-link:nth-child(3) {
  transform: translate3d(0, -70px, 0);
}
.lesson-select-8 .nav-link:nth-child(7) {
  transform: translate3d(0, -50px, 0);
}

.lesson-select-10 .nav-link:nth-child(n+11) {
  transform: translate3d(0, -70px, 0);
}
.lesson-select-10 .nav-link:nth-child(2), .lesson-select-10 .nav-link:nth-child(4), .lesson-select-10 .nav-link:nth-child(7), .lesson-select-10 .nav-link:nth-child(9) {
  transform: translate3d(0, -50px, 0);
}
.lesson-select-10 .nav-link:nth-child(3), .lesson-select-10 .nav-link:nth-child(8) {
  transform: translate3d(0, -70px, 0);
}
.lesson-select-10 .nav-link .lesson-completed {
  margin-bottom: 0;
}

.lesson-select-12 .nav-link:nth-child(n+11) {
  transform: translate3d(0, -70px, 0);
}
.lesson-select-12 .nav-link:nth-child(2), .lesson-select-12 .nav-link:nth-child(4), .lesson-select-12 .nav-link:nth-child(7), .lesson-select-12 .nav-link:nth-child(9) {
  transform: translate3d(0, -50px, 0);
}
.lesson-select-12 .nav-link:nth-child(3), .lesson-select-12 .nav-link:nth-child(8) {
  transform: translate3d(0, -70px, 0);
}
.lesson-select-12 .nav-link .lesson-completed {
  margin-bottom: 0;
}

.lesson-select-14 .nav-link:nth-child(n+11) {
  transform: translate3d(0, -70px, 0);
}
.lesson-select-14 .nav-link:nth-child(2), .lesson-select-14 .nav-link:nth-child(4), .lesson-select-14 .nav-link:nth-child(7), .lesson-select-14 .nav-link:nth-child(9) {
  transform: translate3d(0, -50px, 0);
}
.lesson-select-14 .nav-link:nth-child(3), .lesson-select-14 .nav-link:nth-child(8) {
  transform: translate3d(0, -70px, 0);
}
.lesson-select-14 .nav-link:nth-child(12) {
  transform: translate3d(0, -50px, 0);
}
.lesson-select-14 .nav-link:nth-child(11) {
  transform: translate3d(0, -50px, 0);
}
.lesson-select-14 .nav-link .lesson-completed {
  margin-bottom: 0;
}

.lesson-select-6,
.lesson-select-11 {
  max-width: 718px;
}
@media screen and (max-height: 768px) {
  .lesson-select-6,
  .lesson-select-11 {
    max-width: 618px;
  }
}
.lesson-select-6 .nav-link:nth-child(4), .lesson-select-6 .nav-link:nth-child(9),
.lesson-select-11 .nav-link:nth-child(4),
.lesson-select-11 .nav-link:nth-child(9) {
  transform: translate3d(0, -70px, 0);
}
.lesson-select-6 .nav-link:nth-child(5), .lesson-select-6 .nav-link:nth-child(8), .lesson-select-6 .nav-link:nth-child(10),
.lesson-select-11 .nav-link:nth-child(5),
.lesson-select-11 .nav-link:nth-child(8),
.lesson-select-11 .nav-link:nth-child(10) {
  transform: translate3d(0, -50px, 0);
}
.lesson-select-6 .nav-link:nth-child(7), .lesson-select-6 .nav-link:nth-child(11),
.lesson-select-11 .nav-link:nth-child(7),
.lesson-select-11 .nav-link:nth-child(11) {
  transform: translate3d(0, 0px, 0);
}

/*Tool Icons in Headers - Dictionary and Weighted Flashcards*/
@media (max-width: 1499.98px) {
  .tools-select {
    margin-top: 0em;
  }
}
.tools-select .nav-link {
  padding: 0.5rem 0.5rem 1.2rem 0rem;
}
.tools-select .nav-link:last-child {
  margin-right: 2.8rem;
}
.tools-select .nav-link .lesson-neutral {
  margin: 0;
  height: 60px;
  width: 60px;
}
.tools-select .nav-link .lesson-neutral .lesson-icon {
  height: 56px;
  width: 56px;
}
.tools-select .nav-link .lesson-neutral .lesson-icon img {
  padding: 0px;
}
.tools-select .nav-link:nth-child(5n+1) {
  transform: none;
}
.tools-select .nav-link .lesson-neutral + .module-info {
  left: -6.275vw;
  min-width: 15vw;
}
.tools-select .nav-link .lesson-neutral + .module-info .h5 {
  font-size: 1.4rem;
}

/*Activity Selection Menu - Inside Lesson*/
.activity-menu {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}
.activity-menu .activity-item {
  background-image: var(--activity-menu-ribbon-image-neutral);
  width: 98%;
  position: relative;
  color: var(--light-text-color);
  padding: 0.1em 0.1em;
  margin: 0em auto 1.4em;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  margin-top: 1rem;
  margin-bottom: 2.5rem;
  background-size: 100% 100%;
}
.activity-menu .activity-item .activity-icon-frame {
  background-color: var(--activity-icon-background-color);
  border: 2px solid var(--activity-icon-frame-color);
  box-shadow: 0px 0px 0px 3px var(--activity-icon-frame-color);
  height: 80px;
  width: 80px;
  border-radius: 50%;
  position: absolute;
  top: -16px;
  left: 30px;
}
@media (max-width: 1499.98px) {
  .activity-menu .activity-item .activity-icon-frame {
    height: 64px;
    width: 64px;
    top: -6px;
    left: 20px;
  }
}
@media screen and (max-height: 768px) {
  .activity-menu .activity-item .activity-icon-frame {
    height: 60px;
    width: 60px;
    top: -6px;
    left: 20px;
  }
}
.activity-menu .activity-item .activity-icon-frame img {
  height: 78px;
  width: 78px;
  border-radius: 50%;
  position: absolute;
  top: 0px;
  left: 0px;
}
@media (max-width: 1199.98px) {
  .activity-menu .activity-item .activity-icon-frame img {
    height: 60px;
    width: 60px;
    top: -1px;
    left: 1px;
  }
}
@media screen and (max-height: 768px) {
  .activity-menu .activity-item .activity-icon-frame img {
    height: 56px;
    width: 56px;
    top: -1px;
    left: 1px;
  }
}
@media screen and (max-height: 768px) {
  .activity-menu .activity-item {
    margin-bottom: 1.4rem;
  }
}
.activity-menu .activity-item:hover {
  background-image: var(--activity-menu-ribbon-image-hover);
  width: 100%;
}
.activity-menu .activity-item:hover .activity-check path.check-bg {
  fill: var(--core-color);
}
.activity-menu .activity-item:hover .activity-item-body p.flex-grow-1 {
  color: var(--dark-text-color);
}
.activity-menu .activity-item u {
  text-decoration: none;
}
.activity-menu .activity-item.locked {
  opacity: 80%;
  color: var(--light-text-color);
  cursor: default;
}
.activity-menu .activity-item.locked:hover {
  background-image: url(/images/levels/activities/activity-ribbon-neutral.svg);
  width: 98%;
}
.activity-menu .activity-item.locked:hover .activity-check path.check-bg {
  fill: var(--activity-complete-checkmark-color);
}
.activity-menu .activity-item.locked:hover .activity-item-body p.flex-grow-1 {
  color: var(--light-text-color);
}
.activity-menu :last-child .activity-item {
  margin: 0;
}

.activity-item-body {
  padding: 0px 20px;
  display: flex;
  width: 100%;
}
.activity-item-body p.flex-grow-1 {
  margin: 0px;
  line-height: 2;
  margin-left: 120px;
  color: var(--light-text-color);
}
@media (max-width: 1499.98px) {
  .activity-item-body p.flex-grow-1 {
    margin-left: 110px;
  }
}
@media (max-width: 1199.98px) {
  .activity-item-body p.flex-grow-1 {
    margin-left: 80px;
  }
}
@media (max-width: 767.98px) {
  .activity-item-body p.flex-grow-1 {
    margin-left: 70px;
    font-size: 80%;
  }
}

.selectable-item {
  cursor: pointer;
  border-radius: 1.8rem;
  height: -moz-max-content;
  height: max-content;
}
.selectable-item .flashcard {
  transition: 0.2s transform;
}
.selectable-item:hover {
  background: var(--flashcard-touch-highlight-color);
  box-shadow: 1px 1px 9px 5px var(--flashcard-touch-highlight-color);
}
.selectable-item:hover .flashcard {
  transform: scale(1.1) rotateZ(3deg);
}
.selectable-item.selected {
  background: var(--flashcard-touch-highlight-color);
  box-shadow: 1px 1px 9px 5px var(--flashcard-touch-highlight-color);
}
.selectable-item.selected .flashcard {
  transform: scale(1.1);
}

.selectable-drop-area {
  cursor: pointer;
}
.selectable-drop-area .basket-container {
  transition: 0.2s transform;
}
.selectable-drop-area .basket-container:hover {
  transform: scale(1.1) translate(0px, -30px) rotateZ(8deg);
}

.cms-activity-list {
  padding-left: 0;
  margin-bottom: 0;
}
.cms-activity-list .cms-activity-item {
  background-image: url(/images/levels/activities/activity-ribbon-neutral.svg);
  width: 100%;
  position: relative;
  color: var(--light-text-color);
  padding: 0.1em 0.1em;
  margin: 1rem 5rem 1rem 0;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.cms-activity-list .cms-activity-item:hover {
  background-image: url(/images/levels/activities/activity-ribbon-hover.svg);
  width: 102%;
}
.cms-activity-list .cms-activity-item:hover .cms-activity-item-body p.flex-grow-1 {
  color: var(--dark-text-color);
}
.cms-activity-list .cms-activity-item .activity-item-body {
  padding: 0px 20px;
  display: flex;
  width: 100%;
}
.cms-activity-list .cms-activity-item .activity-item-body .activity-icon-frame {
  background-color: var(--activity-icon-background-color);
  border: 2px solid var(--activity-icon-frame-color);
  box-shadow: 0px 0px 0px 3px var(--activity-icon-frame-color);
  height: 80px;
  width: 80px;
  border-radius: 50%;
  position: absolute;
  top: -16px;
  left: 30px;
}
@media (max-width: 1199.98px) {
  .cms-activity-list .cms-activity-item .activity-item-body .activity-icon-frame {
    height: 64px;
    width: 64px;
    top: -6px;
    left: 20px;
  }
}
.cms-activity-list .cms-activity-item .activity-item-body .activity-icon-frame img {
  height: 78px;
  width: 78px;
  border-radius: 50%;
  position: absolute;
  top: 0px;
  left: 0px;
}
@media (max-width: 1199.98px) {
  .cms-activity-list .cms-activity-item .activity-item-body .activity-icon-frame img {
    height: 60px;
    width: 60px;
    top: -1px;
    left: 1px;
  }
}
.cms-activity-list .cms-activity-item .activity-item-body p.activity-title {
  margin: 0px;
  line-height: 2;
  margin-left: 120px;
  color: var(--light-text-color);
  font-size: 1.6rem;
}
@media (max-width: 767.98px) {
  .cms-activity-list .cms-activity-item .activity-item-body p.activity-title {
    margin-left: 60px;
    font-size: 80%;
  }
}
.cms-activity-list :last-child .activity-item {
  margin: 0;
}

.hint-text {
  font-weight: 400;
  font-size: inherit !important;
  width: 100%;
  color: inherit;
  text-align: center;
  padding-top: 2px;
  padding-bottom: 5px;
  overflow-wrap: break-word;
  background-position: center;
  background-size: cover;
}

/*_____________ FORMS _________________*/
.form-group {
  padding: 1vh 1vw;
}

.form-check {
  display: flex;
}

label {
  font-weight: 800;
  margin-bottom: 0.2rem;
}

input[type=checkbox] {
  margin-right: 1.8rem;
  height: inherit;
  display: inline;
  position: relative;
}
input[type=checkbox]:active, input[type=checkbox]:focus {
  box-shadow: none;
}

.input-group input {
  margin-right: 0;
}
.input-group .btn, .input-group button, .input-group .button {
  margin-right: 0;
  display: flex;
  justify-content: center;
}

input[type=checkbox]:after {
  content: "";
  width: 30px;
  height: 30px;
  background-color: var(--checkbox-color);
  border: 2px solid var(--checkbox-color);
  z-index: 1;
  opacity: 100%;
  position: relative;
  display: block;
  margin-top: -50%;
  margin-left: -50%;
  border-radius: 0.5rem;
  transition: all ease 0.3s;
  cursor: pointer;
}

input[type=checkbox]:checked:after {
  content: "✓";
  width: 30px;
  height: 30px;
  background-color: var(--checkbox-color);
  color: var(--checkbox-text-color);
  z-index: 1;
  opacity: 100%;
  position: relative;
  display: block;
  margin-top: -50%;
  margin-left: -50%;
  border-radius: 0.5rem;
  line-height: 1.6rem;
  font-family: "Cubano", sans-serif;
  text-align: center;
  transition: all ease 0.3s;
  cursor: pointer;
}

input[type=checkbox].checkbox-hoverable {
  opacity: 0.2;
}
input[type=checkbox].checkbox-hoverable:hover {
  opacity: 1;
}
input[type=checkbox].checkbox-hoverable:checked {
  opacity: 1;
}

/* A star pin icon (line awesome) used for setting things as favorites*/
.star-pin {
  font-size: 3rem;
  cursor: pointer;
  transition: all 200ms ease-in-out;
  font-weight: 400;
}
.star-pin i {
  font-size: 2.5rem;
}
.star-pin i.lar {
  opacity: 75%;
}
.star-pin i.lar:hover, .star-pin i.lar.hover {
  transform: scale(1.3);
  transition-duration: 200ms;
}

/* Rounded sliders */
.slider.round {
  border-radius: 40px;
}

.slider.round:before {
  border-radius: 50%;
}

.validation-message,
.invalid-feedback {
  color: var(--danger-color);
}

.valid-feedback {
  color: var(--success-color);
}

.invalid {
  outline: none !important;
  border: 3px solid var(--danger-color) !important;
  border-radius: 3rem !important;
}

.valid.modified:not([type=checkbox]):not(.search-bar-input) {
  outline: none !important;
  border: 3px solid var(--success-color-dark) !important;
  border-radius: 3rem !important;
}

.was-validated .form-control.is-valid, .was-validated .bm-content textarea.is-valid, .bm-content .was-validated textarea.is-valid, .was-validated .form-control:valid, .was-validated .bm-content textarea:valid, .bm-content .was-validated textarea:valid,
.was-validated input.is-valid,
.was-validated input:valid {
  border-color: var(--success-color);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("/images/global/gui/icon-checkmark.svg");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  color: var(--success-color-light);
}
form-control .was-validated .form-control.is-invalid, form-control .was-validated .bm-content textarea.is-invalid, .bm-content form-control .was-validated textarea.is-invalid, .was-validated .form-control:invalid, .was-validated .bm-content textarea:invalid, .bm-content .was-validated textarea:invalid,
form-control .was-validated input.is-invalid,
.was-validated input:invalid {
  border-color: var(--danger-color);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("/images/global/gui/icon-warning.svg");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  color: var(--danger-color-light);
}

.form-control, .bm-content textarea,
input {
  display: block;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.4rem 1.2rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--input-text-color);
  background-color: var(--input-neutral-background-color);
  background-clip: padding-box;
  border: 0px;
  border-radius: 3rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control::-moz-placeholder, .bm-content textarea::-moz-placeholder, input::-moz-placeholder {
  opacity: 50%;
  font-weight: 500;
}
.form-control::placeholder, .bm-content textarea::placeholder,
input::placeholder {
  opacity: 50%;
  font-weight: 500;
}
.form-control:focus, .bm-content textarea:focus, .form-control:active, .bm-content textarea:active,
input:focus,
input:active {
  color: var(--input-active-text-color);
  background-color: var(--input-active-background-color);
  border-color: none;
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--input-box-shadow-color);
}
.form-control.is-invalid, .bm-content textarea.is-invalid,
input.is-invalid {
  color: var(--danger-color-light);
  background-image: url("/images/global/gui/icon-warning.svg");
}
.form-control.is-invalid:focus, .bm-content textarea.is-invalid:focus, .form-control.is-invalid:active, .bm-content textarea.is-invalid:active,
input.is-invalid:focus,
input.is-invalid:active {
  box-shadow: 0 0 0 0.2rem;
}
.form-control.is-valid, .bm-content textarea.is-valid,
input.is-valid {
  color: var(--success-color-light);
  background-image: url("/images/global/gui/icon-checkmark.svg");
}
.form-control:disabled, .bm-content textarea:disabled, .form-control[readonly], .bm-content textarea[readonly],
.form-control .disabled,
.bm-content textarea .disabled,
input:disabled,
input[readonly],
input .disabled {
  background-color: var(--neutral-350);
}
.form-control:disabled:focus, .bm-content textarea:disabled:focus, .form-control:disabled:active, .bm-content textarea:disabled:active, .form-control:disabled:focus-visible, .bm-content textarea:disabled:focus-visible, .form-control[readonly]:focus, .bm-content textarea[readonly]:focus, .form-control[readonly]:active, .bm-content textarea[readonly]:active, .form-control[readonly]:focus-visible, .bm-content textarea[readonly]:focus-visible,
.form-control .disabled:focus,
.bm-content textarea .disabled:focus,
.form-control .disabled:active,
.bm-content textarea .disabled:active,
.form-control .disabled:focus-visible,
.bm-content textarea .disabled:focus-visible,
input:disabled:focus,
input:disabled:active,
input:disabled:focus-visible,
input[readonly]:focus,
input[readonly]:active,
input[readonly]:focus-visible,
input .disabled:focus,
input .disabled:active,
input .disabled:focus-visible {
  box-shadow: none;
  outline: none;
}
.form-control:disabled::-moz-placeholder, .bm-content textarea:disabled::-moz-placeholder, .form-control[readonly]::-moz-placeholder, .bm-content textarea[readonly]::-moz-placeholder, .form-control .disabled::-moz-placeholder, .bm-content textarea .disabled::-moz-placeholder, input:disabled::-moz-placeholder, input[readonly]::-moz-placeholder, input .disabled::-moz-placeholder {
  color: var(--input-placeholder-text-color) !important;
  opacity: 1;
}
.form-control:disabled::placeholder, .bm-content textarea:disabled::placeholder, .form-control[readonly]::placeholder, .bm-content textarea[readonly]::placeholder,
.form-control .disabled::placeholder,
.bm-content textarea .disabled::placeholder,
input:disabled::placeholder,
input[readonly]::placeholder,
input .disabled::placeholder {
  color: var(--input-placeholder-text-color) !important;
  opacity: 1;
}
.form-control.form-control-plaintext, .bm-content textarea.form-control-plaintext,
input.form-control-plaintext {
  background-color: transparent;
  padding-bottom: 0px;
}
.form-control::-moz-placeholder, .bm-content textarea::-moz-placeholder, input::-moz-placeholder {
  color: var(--input-placeholder-text-color) !important;
  opacity: 0.5;
}
.form-control::placeholder, .bm-content textarea::placeholder,
input::placeholder {
  color: var(--input-placeholder-text-color) !important;
  opacity: 0.5;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 2px solid var(--input-autofill-text-color);
  -webkit-text-fill-color: var(--input-autofill-text-color);
  -webkit-box-shadow: 0 0 0px 1000px var(--input-autofill-background-color) inset;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

/* Radio Buttons */
input[type=radio] {
  display: inline-block;
  margin-top: 14px;
  height: auto;
}

/* custom radio */
.custom-control.custom-radio.custom-control-inline {
  margin-right: 1rem;
  padding-left: 2.25rem;
}
.custom-control.custom-radio input[type=radio] {
  position: absolute;
  left: -9999px;
}
.custom-control.custom-radio input[type=radio] + label:before {
  content: "";
  background: var(--white-background-color);
  border: 2px solid var(--checkbox-color);
  height: 25px;
  width: 25px;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: -36px;
  cursor: pointer;
}
.custom-control.custom-radio input[type=radio] + label:after {
  content: "";
  background: var(--checkbox-color);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  top: 13px;
  left: -31px;
  opacity: 0;
  transform: scale(2);
  transition: transform 0.3s linear, opacity 0.3s linear;
}
.custom-control.custom-radio input[type=radio]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
.custom-control.custom-radio input[type=radio]:checked + label:before {
  box-shadow: 0 0 0 0.2rem rgba(90, 125, 89, 0.33);
}

.wrap-collapsible {
  margin-bottom: 1.2rem 0;
}
.wrap-collapsible input[type=checkbox] {
  display: none;
}
.wrap-collapsible .lbl-toggle {
  display: block;
  font-weight: bold;
  font-family: henderson-slab-basic, serif;
  font-size: 1.2rem;
  padding: 1rem;
  color: var(--dark-text-color);
  border-bottom: 2px dashed var(--neutral-300);
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.25s ease-out;
}
.wrap-collapsible .lbl-toggle:hover {
  color: #7c5a0b;
}
.wrap-collapsible .lbl-toggle::before {
  content: " ";
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-right: 0.7rem;
  transform: translateY(-2px);
  transition: transform 0.2s ease-out;
}
.wrap-collapsible .toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}
.wrap-collapsible .collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.25s ease-in-out;
}
.wrap-collapsible .toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 100vh;
}
.wrap-collapsible .toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.wrap-collapsible .collapsible-content .content-inner {
  background: rgba(250, 224, 66, 0.2);
  border-bottom: 1px solid rgba(250, 224, 66, 0.45);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: 0.5rem 1rem;
}

/*Password Strength Bar*/
.form-group .progress {
  margin: 10px 20px;
}

.progress-bar.bg-primary {
  background-color: var(--primary-color) !important;
}
.progress-bar.bg-warning {
  background-color: var(--warning-color) !important;
}
.progress-bar.bg-danger {
  background-color: var(--danger-color) !important;
}
.progress-bar.bg-info {
  background-color: var(--info-color) !important;
}

/* Overrides font-family for line awesome icons within options. */
select.select-with-icons {
  font-family: "tgn-soft-round-comp", sans-serif, "Line Awesome Free", sans-serif !important;
}

/*Multi Select*/
select[multiple] {
  margin: 10px;
  padding: 10px;
  border-radius: 1.2rem;
}
select[multiple]:after {
  content: "";
  height: 100%;
  width: 50px;
  background-color: var(--multiselect-background-color);
}
select[multiple]::-webkit-scrollbar {
  width: 15px;
  margin: 20px;
}
select[multiple]::-webkit-scrollbar-track {
  background: var(--scroll-bar-container-color);
  border-top-right-radius: 1.8rem;
  border-bottom-right-radius: 1.8rem;
}
select[multiple]::-webkit-scrollbar-thumb {
  background-color: var(--scroll-bar-color);
  border-radius: 10px;
}
select[multiple]:focus option:checked {
  background: var(--multiselect-option-checked-color) linear-gradient(0deg, var(--multiselect-option-checked-color) 0%, var(--multiselect-option-checked-color) 100%);
  border-radius: 1rem;
}
select[multiple]:focus option:active {
  background: var(--multiselect-option-checked-color) linear-gradient(0deg, var(--multiselect-option-checked-color) 0%, var(--multiselect-option-checked-color) 100%);
  border-radius: 1rem;
}
select[multiple] option {
  padding: 0.1rem 1rem;
}
select[multiple] option:checked {
  background: var(--multiselect-option-checked-color) linear-gradient(0deg, var(--multiselect-option-checked-color) 0%, var(--multiselect-option-checked-color) 100%);
  border-radius: 1rem;
}

textarea.form-control, .bm-content textarea,
textarea {
  border-radius: 1.3rem;
  border-start-end-radius: 5px;
  height: auto;
}

::-webkit-resizer {
  border-width: 8px;
  background-color: var(--text-area-resizer-color);
  border-style: solid;
  border-color: transparent var(--text-area-resizer-color) var(--text-area-resizer-color) transparent;
  border-bottom-right-radius: 1.3rem;
  border-top-left-radius: 0.5rem;
}

select:not([multiple]) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 1.2rem;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--dark-text-color);
  vertical-align: middle;
  background: url("/images/global/gui/icon-chevron.svg");
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: 95% 50%;
  background-color: var(--neutral-300);
  border: none;
  border-radius: 1.8rem;
}
select:not([multiple]):focus, select:not([multiple]):active {
  color: var(--muted-text-color-darker);
  background-color: var(--neutral-300);
  border-color: none;
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--);
}
select:not([multiple]):after {
  display: none;
}
select:not([multiple]).short-control {
  height: calc(1em + 0.75rem + 2px) !important;
  line-height: 1 !important;
}

.custom-file-input:focus ~ .custom-file-label {
  border-color: transparent;
  box-shadow: 0 0 0 0.2rem var(--box-shadow-color-3);
}

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: inherit;
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  color: var(--dark-text-color);
  background-color: var(--neutral-300);
  border: none;
  border-radius: 1.8rem;
}
.custom-file-label:after {
  border-top-right-radius: 1.8rem;
  border-bottom-right-radius: 1.8rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--dark-text-color);
  color: var(--light-background-color);
  border: none;
  font-family: henderson-slab-basic, serif;
  font-size: 90%;
}
.custom-file-label:after:hover {
  background-color: RGBA(var(--dark-background-color), 0.8);
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--light-text-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--dark-background-color);
  border: none;
  border-radius: 1.8rem;
  font-family: henderson-slab-basic, serif;
}

.input-group-append {
  display: flex;
  justify-content: center;
}
.input-group-append .btn, .input-group-append button, .input-group-append .button {
  box-shadow: none;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.input-group-append .btn i, .input-group-append button i, .input-group-append .button i {
  padding-top: 2px;
}

/*Compact Profile Component - Wrap in this Class to use inside tutorial areas*/
.compact-profile .profile-email {
  border-radius: 1.2rem;
  background-color: var(--compact-profile-background-color);
  color: var(--white-text-color);
  font-size: large;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}
.compact-profile .profile-email p {
  color: var(--white-text-color);
  font-size: x-large;
  margin: 1px 2px;
}
.compact-profile .form-group {
  padding-top: 0;
  margin-bottom: 0.4rem;
}
.compact-profile .form-group label {
  font-size: 1.4rem;
  padding-left: 5px;
}

.cms-layout .custom-control.custom-radio.custom-control-inline {
  margin-right: 1rem;
  padding-left: 2.25rem;
}
.cms-layout .custom-control.custom-radio input[type=radio] {
  position: absolute;
  left: -9999px;
}
.cms-layout .custom-control.custom-radio input[type=radio] + label:before {
  content: "";
  top: 3px;
}
.cms-layout .custom-control.custom-radio input[type=radio] + label:after {
  content: "";
  background: var(--radio-checked-color);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: -31px;
  opacity: 0;
  transform: scale(2);
  transition: transform 0.3s linear, opacity 0.3s linear;
}
.cms-layout .custom-control.custom-radio input[type=radio]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
.cms-layout .custom-control.custom-radio input[type=radio]:checked + label:before {
  box-shadow: 0 0 0 0.2rem rgba(90, 125, 89, 0.33);
}

/*Login Area*/
.login-form .nav {
  list-style: none;
}
.login-form .form-control, .login-form .bm-content textarea, .bm-content .login-form textarea {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 3px solid #e3ce97;
  border-radius: 3rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.login-form form {
  padding: 1em;
  display: flex;
  flex-direction: column;
}

.form-container {
  padding: 0em 1em;
}

/*scrollbar Box*/
.scroll-box {
  scroll-behavior: smooth;
  overflow-y: auto;
  overflow-x: auto;
  max-height: 400px;
  padding: 10px 20px;
}
.scroll-box.scroll-box-beige *::-webkit-scrollbar-thumb {
  background-color: #cebe93 !important;
  border-radius: 20px;
}

/*Override Default Scrollbar Styling*/
/* Works on Firefox */
* {
  scrollbar-width: 12px;
  scrollbar-color: var(--scroll-bar-color);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--scroll-bar-container-color);
  border-radius: 0.8rem;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scroll-bar-color);
  border-radius: 20px;
}

/*Rating/Feedback Modal Form*/
/*Change default stars to happy face rating system*/
.rating-btn {
  margin: 0rem 1rem;
}
.rating-btn .label {
  width: 100%;
  margin: auto;
  font-size: 150%;
}
.rating-btn .btn {
  border-radius: 50%;
  padding: 8px 8px;
  margin: 5px;
  background-color: var(--feedback-modal-btn-background-color);
  border: none;
}
.rating-btn .btn.btn-light {
  color: var(--feedback-modal-btn-text-color);
  background-color: var(--feedback-modal-btn-background-color);
  border-color: var(--feedback-modal-btn-background-color);
}
.rating-btn .btn.btn-light:active {
  border: var(--feedback-modal-btn-border-color);
}
.rating-btn .btn.btn-light.focus, .rating-btn .btn.btn-light:focus {
  box-shadow: 5px 4px 0 1px var(--feedback-modal-btn-box-shadow-color);
  border: none;
}
.rating-btn .btn.btn-light:not(:disabled):not(.disabled).active, .rating-btn .btn.btn-light:not(:disabled):not(.disabled):active, .show > .rating-btn .btn.btn-light.dropdown-toggle {
  background-color: var(--feedback-modal-btn-border-color);
  border-color: var(--feedback-modal-btn-border-color);
}
.rating-btn .btn.btn-info {
  background-color: var(--feedback-modal-btn-info-background-color);
}
.rating-btn .btn.btn-info.active, .rating-btn .btn.btn-info:active {
  background-color: var(--light-background-color);
  border-color: var(--neutral-400);
}
.rating-btn .btn.btn-info:not(:disabled):not(.disabled).active, .rating-btn .btn.btn-info:not(:disabled):not(.disabled):active, .show > .rating-btn .btn.btn-info.dropdown-toggle {
  color: #fff;
  background-color: var(--feedback-modal-btn-info-active-background-color) !important;
  border-color: var(--feedback-modal-btn-info-border-color) !important;
  box-shadow: 0 0 0 0.2rem var(--feedback-modal-btn-info-active-box-shadow-color) !important;
}
.rating-btn .btn.btn-info:not(:disabled):not(.disabled).active:focus, .rating-btn .btn.btn-info:not(:disabled):not(.disabled):active:focus, .rating-btn .btn.btn-info.show > .rating-btn .btn.btn-info.btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--feedback-modal-btn-info-active-background-color);
}
.rating-btn .btn.btn-info.focus, .rating-btn .btn.btn-info:focus {
  box-shadow: 0 0 0 0.2rem var(--feedback-modal-btn-info-active-background-color);
}
.rating-btn .btn.btn-info.focus-visible, .rating-btn .btn.btn-info:focus-visible {
  border: 0px;
  outline: none !important;
}

/*Use a png sprite to display happy faces*/
.rating {
  background-image: url("/images/global/gui/icon-rating.png");
  height: 70px;
  width: 70px;
  overflow: hidden;
  background-size: cover;
  background-position: 0 0;
  border: none;
}
.rating.two {
  background-position: 280px 0;
}
.rating.three {
  background-position: 210px 0;
}
.rating.four {
  background-position: 140px 0;
}
.rating.five {
  background-position: 70px 0;
}

.inline-radio-input {
  cursor: pointer;
}
.inline-radio-input:focus {
  box-shadow: none !important;
}

.inline-radio-input-label {
  line-height: 40px;
}

.datalist-component {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 2px;
}

.datalist {
  width: 100%;
  position: absolute;
  background-color: #f5f1c7;
  border-radius: 1.2rem 0 0 1.2rem;
  box-shadow: 0 0 0 0.2rem rgba(90, 125, 89, 0.3294117647);
  z-index: 4;
  max-height: 150px;
  overflow-y: scroll;
  margin-top: 0.3rem;
}

.datalist-item {
  padding: 2px 0 2px 30px;
  border-radius: 3rem;
}
.datalist-item:hover {
  background-color: #e8e5c3;
}

/*________________________LISTS_____________________________*/
ul.list-selectable {
  padding-left: 0;
  list-style: none;
}
ul.list-selectable input[type=checkbox]:after {
  margin-top: -0.8rem;
  margin-left: inherit;
}

/*_________Progress Indicators___________*/
.activity-progress-container {
  background-color: var(--progress-bar-container-background-color);
  justify-content: flex-start;
  margin-top: 5vh;
  margin-bottom: 3vh;
  margin-left: 20px;
  margin-right: 0px;
  max-width: 14rem;
  min-width: 14rem;
  height: 1.7rem;
  padding: 0.22em;
  z-index: 2;
  border-radius: 2rem;
  font-family: "Cubano", sans-serif;
  color: var(--progress-bar-text-color);
  box-shadow: 0 2px 1px --progress-bar-shadow-color;
}
.activity-progress-container .progress-bar.bg-info {
  background-color: var(--progress-bar-filled-area-color) !important;
  color: var(--progress-bar-filled-area-text-color);
  font-size: 2vh;
}
.activity-progress-container .progress-bar.bg-info {
  background-color: var(--progress-bar-filled-area-color) !important;
  color: var(--progress-bar-filled-area-text-color);
  font-size: 2vh;
}
@media screen and (max-height: 768px) {
  .activity-progress-container {
    height: 1.2rem;
  }
}
.activity-progress-container label {
  color: var(--progress-bar-icon-color);
  font-size: 0px;
  width: 50px;
  height: 50px;
  border: 2px dashed var(--progress-bar-icon-border-color);
  border-radius: 50%;
  margin: 5px;
}
.activity-progress-container label svg {
  width: 50px;
  height: 50px;
  margin-top: -3px;
}
@media screen and (max-height: 768px) {
  .activity-progress-container label {
    height: 36px;
    width: 36px;
    border: 1px dashed var(--progress-bar-icon-border-color);
    margin: 2px;
  }
}
.activity-progress-container .progress {
  margin-left: 1rem;
}
.activity-progress-container .progress-bar.bg-info {
  background-color: var(--progress-bar-filled-area-color) !important;
  color: var(--progress-bar-filled-area-text-color);
  font-size: 2vh;
}

.progress-icon {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background-color: var(--progress-bar-container-background-color);
  margin: 2px 0px;
  position: relative;
  top: -42px;
  left: -47px;
  box-shadow: 0 2px 10px var(--progress-bar-shadow-color);
}
@media screen and (max-height: 768px) {
  .progress-icon {
    height: 40px;
    width: 40px;
    top: -28px;
    left: -22px;
  }
}

.progress {
  display: flex;
  height: 1.3rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: var(--progress-bar-inner-background-color);
  z-index: 2;
  border-radius: 0.8rem;
}
@media screen and (max-height: 768px) {
  .progress {
    height: 0.8rem;
  }
}
.progress .progress-label {
  position: absolute;
  width: 12rem;
}
.progress .progress-label p {
  text-align: center;
  line-height: 1.2;
  font-size: 1.2rem;
  font-family: henderson-slab-basic, serif;
  margin-bottom: 0;
  margin-top: 3px;
  color: var(--progress-bar-filled-area-text-color);
  text-align: center;
  padding: 0px 6px;
}

/*Success Box*/
.full-width-app .card.success-card, .full-width-app .floating-menu-container .success-card.floating-menu, .floating-menu-container .full-width-app .success-card.floating-menu,
.success-card {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  max-width: 40vw;
  min-width: 30vw;
  z-index: 5;
  bottom: 0;
  max-height: 70vh;
  min-height: -moz-fit-content;
  min-height: fit-content;
  box-shadow: 5px 4px 0 1px var(--success-modal-shadow-color);
}
.full-width-app .card.success-card h2, .full-width-app .floating-menu-container .success-card.floating-menu h2, .floating-menu-container .full-width-app .success-card.floating-menu h2,
.success-card h2 {
  text-shadow: 4px 2px var(--success-modal-text-shadow-color);
  font-size: 370%;
}
.full-width-app .card.success-card .header-ribbon,
.success-card .header-ribbon {
  position: relative;
  top: -10px;
}

/*Timer*/
.timer-container {
  background-color: var(--timer-background-color);
  border-radius: 1.8rem;
  padding: 0.6rem 1rem 0.5rem 1rem;
  width: -moz-fit-content;
  width: fit-content;
  font-family: "henderson-slab-basic";
  margin-top: 5px;
}

/*Number of Cards Completed Counter with BG Ribbon*/
.card-counter {
  background-image: var(--card-counter-background-image-path);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  margin: -60px 10px 0px;
  display: flex;
  text-align: center !important;
  align-content: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  padding: 0px;
}
.card-counter h3 {
  color: var(--card-counter-text-color);
  font-family: "Cubano", sans-serif;
  padding-top: 22px;
}

.progress-bar {
  background-color: var(--dark-color);
}

.course-content-progress-bar {
  width: 25rem;
  margin-top: -1.5rem;
  margin-bottom: 2.5rem;
}
.course-content-progress-bar .progress {
  height: 2rem;
  border-radius: 10rem;
  border-style: solid;
  border-width: 1px;
  border-color: #2C3840;
  position: relative;
}
.course-content-progress-bar .progress-bar {
  font-size: 1.75rem;
  line-height: 1.4;
  background-color: var(--progress-bar-filled-area-color);
  color: var(--primary-color);
}
.course-content-progress-bar .progress-bar span {
  padding-left: 13px;
}

/*_____________CONTENT_________________*/
.list-group {
  box-shadow: 10px 10px 0 var(core-color);
  border-radius: 1.2rem;
}

.list-group-item {
  color: var(--body-font-color);
  background-color: var(--white-color);
  border: 4px solid var(--accent-color-10);
}
.list-group-item.list-group-item-action {
  border: 4px solid var(--secondary-color);
}
.list-group-item.list-group-item-action.active, .list-group-item.list-group-item-action:active {
  color: var(--white-color);
  border: 4px solid var(--secondary-color);
  background-color: var(--secondary-color);
}
.list-group-item.list-group-item-action.active h1,
.list-group-item.list-group-item-action.active h2,
.list-group-item.list-group-item-action.active h3,
.list-group-item.list-group-item-action.active h4,
.list-group-item.list-group-item-action.active h5,
.list-group-item.list-group-item-action.active h6,
.list-group-item.list-group-item-action.active p,
.list-group-item.list-group-item-action.active a, .list-group-item.list-group-item-action:active h1,
.list-group-item.list-group-item-action:active h2,
.list-group-item.list-group-item-action:active h3,
.list-group-item.list-group-item-action:active h4,
.list-group-item.list-group-item-action:active h5,
.list-group-item.list-group-item-action:active h6,
.list-group-item.list-group-item-action:active p,
.list-group-item.list-group-item-action:active a {
  color: var(--primary-color-dark);
}
.list-group-item.list-group-item-action.hover, .list-group-item.list-group-item-action:hover, .list-group-item.list-group-item-action:focus, .list-group-item.list-group-item-action.focus {
  color: var(--white-color);
  background-color: var(--secondary-color-medium);
  border: 4px solid var(--secondary-color);
}
.list-group-item.list-group-item-action.hover h1,
.list-group-item.list-group-item-action.hover h2,
.list-group-item.list-group-item-action.hover h3,
.list-group-item.list-group-item-action.hover h4,
.list-group-item.list-group-item-action.hover h5,
.list-group-item.list-group-item-action.hover h6,
.list-group-item.list-group-item-action.hover p,
.list-group-item.list-group-item-action.hover a, .list-group-item.list-group-item-action:hover h1,
.list-group-item.list-group-item-action:hover h2,
.list-group-item.list-group-item-action:hover h3,
.list-group-item.list-group-item-action:hover h4,
.list-group-item.list-group-item-action:hover h5,
.list-group-item.list-group-item-action:hover h6,
.list-group-item.list-group-item-action:hover p,
.list-group-item.list-group-item-action:hover a, .list-group-item.list-group-item-action:focus h1,
.list-group-item.list-group-item-action:focus h2,
.list-group-item.list-group-item-action:focus h3,
.list-group-item.list-group-item-action:focus h4,
.list-group-item.list-group-item-action:focus h5,
.list-group-item.list-group-item-action:focus h6,
.list-group-item.list-group-item-action:focus p,
.list-group-item.list-group-item-action:focus a, .list-group-item.list-group-item-action.focus h1,
.list-group-item.list-group-item-action.focus h2,
.list-group-item.list-group-item-action.focus h3,
.list-group-item.list-group-item-action.focus h4,
.list-group-item.list-group-item-action.focus h5,
.list-group-item.list-group-item-action.focus h6,
.list-group-item.list-group-item-action.focus p,
.list-group-item.list-group-item-action.focus a {
  color: var(--black-text-color);
}
.list-group-item.list-group-item-action.disabled, .list-group-item.list-group-item-action:disabled {
  color: var(--secondary-color-medium);
  background-color: var(--light-background-color-darker);
  border: 4px solid var(--dark-color);
}
.list-group-item:first-child {
  border-top-left-radius: 1.2rem;
  border-top-right-radius: 1.2rem;
}
.list-group-item:last-child {
  border-bottom-left-radius: 1.2rem;
  border-bottom-right-radius: 1.2rem;
}

.pagination {
  display: flex;
  border-radius: 50%;
}

.page-link {
  height: 50px;
  width: 50px;
  text-align: center;
  color: var(--dark-color);
  background-color: var(--light-background-color);
  border: none;
  border-radius: 50%;
  margin: 5px;
  font-family: henderson-slab-basic, serif;
  line-height: 1.5;
}
.page-link:hover {
  color: var(--dark-text-color);
  background-color: var(--light-background-color-darkest);
  border: none;
}
.page-link:focus {
  z-index: 2;
  outline: none;
  box-shadow: 5px 5px 0 var(--secondary-color);
}
.page-link.disabled {
  cursor: default;
  background-color: var(--disabled-color);
}

.page-item:first-child .page-link {
  margin-left: 0;
  border-radius: 50%;
}
.page-item:last-child .page-link {
  border-radius: 50%;
}
.page-item.active .page-link {
  color: var(--light-text-color);
  background-color: var(--dark-background-color);
  border: none;
  box-shadow: 5px 5px 0 var(--secondary-color);
}
.page-item.disabled .page-link {
  color: var(--light-background-color-darker);
  pointer-events: none;
  background-color: var(--secondary-color);
  border: none;
}

.pagination-lg .page-link {
  font-size: 150%;
  height: 70px;
  width: 70px;
  padding: 0;
  line-height: 1.9;
}

.pagination-sm .page-link {
  font-size: 80%;
  height: 30px;
  width: 30px;
  padding: 0;
  line-height: 1.6;
}

.cms-layout .breadcrumb {
  padding: 0rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1rem;
}
.cms-layout .breadcrumb li.breadcrumb-item:before {
  color: var(--dark-text-color);
}
.cms-layout .breadcrumb li.breadcrumb-item.active {
  color: var(--black-text-color);
}

/*CF StyleGuide*/
.cf-docs-section {
  padding: 2%;
}

.inner-container {
  padding: 2vw 5vh;
  width: 100%;
}

.swatch {
  margin: 0.5rem 1rem 3rem;
}

.color-swatch {
  height: 10rem;
  border-radius: 1.2rem;
  margin-bottom: 0.5rem;
}

.highlight {
  padding: 0.6rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  background-color: var(--light-background-color-darker);
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

@media (min-width: 576px) {
  .highlight {
    padding: 1rem;
  }
}
.bd-example {
  position: relative;
  padding: 1rem;
  margin: 1rem -15px 0;
  border: 2px solid var(--light-background-color-darker);
  border-width: 0.2rem 0 0;
  margin: 5px;
}

@media (min-width: 576px) {
  .bd-example {
    padding: 1.5rem;
    margin-right: 0;
    margin-left: 0;
    border-width: 0.2rem;
  }
}
figure {
  margin: 0 0 1rem;
}

.bd-clipboard + .highlight {
  margin-top: 0;
}

.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--core-color);
  border-left-width: 0.25rem;
  border-radius: 0.25rem;
}

.bd-callout-warning {
  border-left-color: var(--warning-color);
}
.bd-callout-danger {
  border-left-color: var(--danger-color);
}
.bd-callout-info {
  border-left-color: var(--info-color);
}

pre {
  font-size: 13px;
  line-height: 1.30769231;
  color: var(--dark-color);
  background-color: var(--light-background-color-darker);
  border-radius: 10px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  word-wrap: normal;
}

pre code {
  white-space: inherit;
  padding: 0;
}

/*Breadcrumbs*/
.breadcrumb {
  background-color: transparent;
}

/*Data List - similar to table formatting with more flexible responsive layouts*/
.data-list {
  line-height: normal;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0px;
}
.data-list.table {
  color: var(--core-color-light);
  background-color: var(--neutral-100);
  box-shadow: rgba(0, 0, 0, 0.13) 0px 2px 6px 0px;
  border-radius: 8px;
}
.data-list .data-list-body {
  overflow-y: auto;
  padding: 1rem 0;
}
.data-list .data-list-header-labels {
  margin: 0rem 1rem;
  padding: 0px 22px;
  display: flex;
  margin-bottom: -10px;
}
.data-list .data-list-header-labels p, .data-list .data-list-header-labels label {
  font-size: 0.92rem;
  color: var(--dark-color);
  font-family: henderson-slab-basic, serif;
}
.data-list .select-column-header {
  text-align: center;
  margin-right: 60px;
}
.data-list .select-column {
  text-align: center;
  margin-right: 20px;
}
.data-list-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.data-list-item {
  display: flex;
  align-items: center;
  padding: 8px 20px;
}
.data-list-item .column {
  margin-right: 20px;
}
.data-list-item .column.reorder-column {
  width: 40px;
  text-align: left;
}
.data-list-item:last-child {
  border-radius: 0px 0px 8px 8px;
}
.data-list-item-inner {
  display: flex;
  align-items: center;
  padding: 8px 20px;
}
.data-list.table .data-list-item-inner {
  box-shadow: var(--neutral-100) 0px -1px 0px 0px inset;
  height: 50px;
  padding: 0px 20px;
}
.data-list-item .btn {
  transform: translateY(-4px);
  padding: 0rem 0.5rem;
}
.data-list .column {
  text-align: center;
  margin-right: 20px;
}
.data-list .header-text-wrapper {
  color: var(--dark-text-color);
}

.data-list-item-inner {
  display: table;
  table-layout: fixed;
  transition: none 0.3s ease-out;
  width: 100%;
}
.data-list-item-inner div[class*=col-] {
  display: table-cell;
  position: relative;
  vertical-align: middle;
  word-break: break-word;
}

.data-list-dashed-style .data-list .data-list-header {
  padding: 8px;
  margin-left: 1rem;
  margin-right: 1rem;
  display: flex;
  box-shadow: none;
}
.data-list-dashed-style .data-list .data-list-body {
  background: var(--light-background-color-lighter);
  box-shadow: 0px 0px 20px var(--light-background-color-darkest);
  border-radius: 20px;
}
.data-list-dashed-style .data-list .data-list-body .data-list-item {
  box-sizing: border-box;
  border: 1px dashed var(--neutral-400);
  border-radius: 0.8rem;
  margin: 1rem;
}
.data-list-dashed-style .data-list .data-list-body .data-list-item:first-child {
  margin-top: 0;
}
.data-list-dashed-style .data-list .data-list-body .data-list-item .activity-icon-frame {
  background-color: var(--dark-background-color);
  border: 1px solid var(--warning-color);
  box-shadow: 0px 0px 0px 2px var(--warning-color);
  height: 50px;
  width: 50px;
  border-radius: 50%;
  position: relative;
}
.data-list-dashed-style .data-list .data-list-body .data-list-item .activity-icon-frame img {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  position: absolute;
  top: 0px;
  left: 0px;
}
.data-list-dashed-style .data-list .data-list-body .data-item-number {
  width: 2.5rem;
  line-height: 2.5rem;
  border-radius: 50%;
  text-align: center;
  background-color: var(--warning-color);
  font-size: 1.2rem;
  color: var(--dark-text-color);
  font-family: henderson-slab-basic, serif;
}
.data-list-no-bg .data-list .data-list-body {
  background: transparent;
  box-shadow: none;
  border-radius: 0px;
}

.word-mover-columns .word-mover-divider {
  border: 1px solid var(--neutral-400);
  width: 1px;
  margin-left: 1rem;
  margin-right: 1rem;
}

/*_____________ STYLES FOR CSS MODALS AND BLAZORED MODALS_________________*/
.vimeo-modal {
  display: flex;
  z-index: 5;
  background-color: var(--dark-background-color);
  border-radius: 1.2rem;
  padding: 1rem;
  box-shadow: 10px 10px 0 var(--dark-color-dark);
  font-size: smaller;
  flex-direction: row-reverse;
}
.vimeo-modal .bm-title {
  display: none;
}
.vimeo-modal body.vp-center {
  border-radius: 1.2rem !important;
  box-shadow: 5px 5px 0 var(--dark-color-dark) !important;
}
.vimeo-modal .player .vp-video-wrapper {
  border-radius: 1.2rem !important;
  box-shadow: 5px 5px 0 var(--dark-color-dark) !important;
}
.vimeo-modal .player .vp-player-ui-overlays {
  opacity: 1;
  height: 50% !important;
  font-size: 75% !important;
}
.vimeo-modal .player .vp-controls .play {
  border-radius: 1.2rem;
  color: var(--dark-color);
}
.vimeo-modal .player .vp-controls .play-bar {
  border-radius: 1.2rem;
}
.vimeo-modal .player .vp-controls .vp-progress {
  border-radius: 1.2rem;
  border-color: var(--primary-color);
}
.vimeo-modal button .fill {
  fill: var(--light-background-color);
}
.vimeo-modal button:hover {
  background-color: var(--dark-background-color);
}

/*Pure CSS Popup Box*/
.popup-container, .floating-menu-container {
  display: inline-block;
  display: flex;
  justify-content: flex-end;
  align-content: flex-end;
}
.popup-container .popup-button, .popup-container .floating-menu-container .open-close-button, .floating-menu-container .popup-container .open-close-button, .floating-menu-container .popup-button, .floating-menu-container .open-close-button {
  background: var(--modal-open-btn-color);
  line-height: 34px;
  color: var(--white-text-color);
  padding: 10px 0px;
  text-align: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 150%;
  display: block;
  cursor: pointer;
  font-family: henderson-slab-basic, serif;
  transition: all ease-in-out 0.3s;
}
.popup-container .popup-button:hover, .floating-menu-container .popup-button:hover, .floating-menu-container .open-close-button:hover {
  background: var(--modal-open-btn-color-hover);
}
.popup-container .popup, .floating-menu-container .popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: 250ms all;
}
.popup-container .popup .popup-inner, .floating-menu-container .popup .popup-inner {
  width: 500px;
  box-sizing: border-box;
  padding: 30px 50px 40px;
  background: var(--light-background-color);
  position: absolute;
  left: 50%;
  border-radius: 0.8rem;
  transform: translate(-50%, -50%);
  top: 150%;
  transition: 250ms all;
}
.popup-container .popup .popup-inner .popup-title, .floating-menu-container .popup .popup-inner .popup-title {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}
.popup-container .popup .popup-inner .popup-title h6, .floating-menu-container .popup .popup-inner .popup-title h6 {
  font-size: 18px;
  font-weight: 500;
}
.popup-container .popup .popup-inner .popup-title .popup-close-btn, .floating-menu-container .popup .popup-inner .popup-title .popup-close-btn {
  cursor: pointer;
  background: var(--modal-close-btn-color);
  display: flex;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 2.3rem;
  height: 2.5rem;
  width: 2.5rem;
  color: var(--white-text-color);
  border-radius: 50%;
  margin: -40px -64px 0px 0px;
}
.popup-container .popup .popup-inner .popup-content, .floating-menu-container .popup .popup-inner .popup-content {
  display: flex;
  flex-direction: column;
}
.popup-container .popup .popup-inner .popup-content .popup-scroll, .floating-menu-container .popup .popup-inner .popup-content .popup-scroll {
  scroll-behavior: smooth;
  overflow-y: auto;
  overflow-x: clip;
  max-height: 400px;
  padding: 10px 20px;
}
.popup-container .popup .popup-inner .popup-content ul li, .floating-menu-container .popup .popup-inner .popup-content ul li {
  margin-bottom: 10px;
}
.popup-container .popup .popup-inner .popup-content ul li:last-child, .floating-menu-container .popup .popup-inner .popup-content ul li:last-child {
  margin-bottom: 0;
}
.popup-container .popup .popup-inner .popup-content ul li input, .floating-menu-container .popup .popup-inner .popup-content ul li input,
.popup-container .popup .popup-inner .popup-content ul li input[type=checkbox] {
  width: 100%;
  border: 1px solid var(--white-background-color);
  border-radius: 3px;
  line-height: 34px;
  padding: 0 15px;
  font-size: 14px;
  box-sizing: border-box;
}
.popup-container .popup .popup-inner .popup-content ul li button, .floating-menu-container .popup .popup-inner .popup-content ul li button {
  width: 100%;
  line-height: 34px;
  background: #666;
  color: var(--white-text-color);
  cursor: pointer;
  border-radius: 3px;
  border: none;
  font-size: 14px;
}
.popup-container .popup .popup-inner .popup-content ul li button:hover, .floating-menu-container .popup .popup-inner .popup-content ul li button:hover {
  background: #444;
}
.popup-container .popup .transparent-label, .floating-menu-container .popup .transparent-label {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  cursor: pointer;
}
.popup-container > input[type=checkbox], .floating-menu-container > input[type=checkbox] {
  display: none;
}
.popup-container > input[type=checkbox]:checked + .popup, .floating-menu-container > input[type=checkbox]:checked + .popup {
  opacity: 1;
  visibility: visible;
}
.popup-container > input[type=checkbox]:checked + .popup .popup-inner, .floating-menu-container > input[type=checkbox]:checked + .popup .popup-inner {
  top: 50%;
}
.popup-container > input[type=checkbox]:after, .floating-menu-container > input[type=checkbox]:after {
  display: none;
}
.lightbox-modal .popup-container, .lightbox-modal .floating-menu-container {
  position: absolute;
}
.lightbox-modal .popup-container .popup, .lightbox-modal .floating-menu-container .popup {
  background: transparent;
}
.lightbox-modal .popup-container .popup .popup-inner, .lightbox-modal .floating-menu-container .popup .popup-inner {
  padding: 3vh 3vw 3vh;
}
.lightbox-modal .popup-container .popup-button, .floating-menu-container .lightbox-modal .popup-container .open-close-button, .lightbox-modal .floating-menu-container .popup-button, .lightbox-modal .floating-menu-container .open-close-button {
  font-size: 0;
  background-color: transparent;
  background-image: url(/images/global/gui/icon-magnify.png);
  background-size: contain;
  border-radius: 10%;
}
.lightbox-modal .popup-container .popup-inner, .lightbox-modal .floating-menu-container .popup-inner {
  width: 100%;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
  max-height: 94vh;
}
@media screen and (max-height: 768px) {
  .lightbox-modal .popup-container .popup-inner, .lightbox-modal .floating-menu-container .popup-inner {
    width: 90%;
  }
}
.lightbox-modal .popup-container .popup-inner .popup-content .header-ribbon, .lightbox-modal .floating-menu-container .popup-inner .popup-content .header-ribbon {
  display: inline-flex;
}
.lightbox-modal .popup-container .popup-inner .popup-content .popup-scroll, .lightbox-modal .floating-menu-container .popup-inner .popup-content .popup-scroll {
  scroll-behavior: none;
  overflow: auto;
  max-height: unset;
}

.lightbox-modal {
  position: absolute;
  right: 15% !important;
  bottom: 30% !important;
}

.btn-text {
  line-height: 28px;
}

.popup .header-ribbon {
  margin: -2vh 0vh 2vh;
  align-self: center;
  width: -moz-fit-content;
  width: fit-content;
}
.popup .dotted-line, .popup .full-width-app hr, .full-width-app .popup hr,
.popup .cms-preview hr,
.cms-preview .popup hr,
.popup .login-form hr,
.login-form .popup hr, .popup .cms-layout hr, .cms-layout .popup hr, .popup .jumbotron hr, .jumbotron .popup hr {
  margin: 30px 10px -10px;
}

.popup-container.help-btn, .help-btn.floating-menu-container {
  position: absolute;
  top: 0;
  right: 0;
  margin: 1rem;
  z-index: 2;
}

/*Blazored Modals - Style to Match Pure CSS Modals*/
.bm-container {
  z-index: 5 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.blazored-modal-focus-trap {
  z-index: 5 !important;
}

.bm-custom-modal {
  z-index: 5 !important;
  background-color: var(--light-background-color);
  border-radius: 0.8rem;
  border: 1px solid var(--light-background-color);
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
}

.bm-title {
  font-family: "Cubano", sans-serif;
  color: var(--primary-color);
  font-size: 2.8rem;
}

.bm-container button.bm-close {
  cursor: pointer;
  background: var(--modal-close-btn-color) !important;
  display: flex;
  font-size: 40px;
  justify-content: center;
  font-weight: normal !important;
  color: var(--white-text-color);
  border-radius: 50%;
  height: 40px;
  line-height: 8px;
  width: 40px;
  margin: -40px -44px 0px 0px;
  transition: 0.3s;
  padding: 0.8rem;
}
.bm-container button.bm-close span {
  height: 40px;
  width: 40px;
}
.bm-container button.bm-close:hover {
  transform: scale(1.2);
}
.bm-container button.bm-close:focus, .bm-container button.bm-close.focus {
  outline: none !important;
}
.bm-container .bm-header {
  padding: 0 0 1rem 0;
}
.bm-container .bm-title {
  width: 100%;
  text-align: center;
  background-image: var(--blazor-modal-header-image-path);
  background-position: 50% 50%;
  background-size: contain;
  background-position: 50% 50%;
  background-size: contain;
  padding: 1rem 3rem;
  background-repeat: no-repeat;
  background-color: transparent;
  border-color: transparent;
  font-size: xx-large;
  color: var(--light-alternate-text-color);
  font-family: fenway-park-jf, sans-serif;
  margin: -3rem 1rem 0px 1rem;
}
.bm-container .bm-title h1,
.bm-container .bm-title h2,
.bm-container .bm-title h3,
.bm-container .bm-title h4,
.bm-container .bm-title h5,
.bm-container .bm-title h6,
.bm-container .bm-title p {
  font-size: xx-large;
  color: var(--blazor-modal-header-color);
  font-family: fenway-park-jf, sans-serif;
}

.bm-content {
  font-family: "tgn-soft-round-comp", sans-serif;
  font-size: 1.6rem;
}
.bm-content .cms-layout {
  font-size: 1rem;
}
.bm-content h1, .bm-content h2, .bm-content h3, .bm-content h4, .bm-content h5, .bm-content h6 {
  font-family: "Cubano", sans-serif;
}
.bm-content textarea {
  background-color: var(--light-background-color-darker);
  border-color: var(--light-background-color-darker);
  border-radius: 0.8rem;
}
.bm-content .btn.btn-success {
  border-radius: 1.8rem;
  font-family: "Cubano", sans-serif;
  margin-right: 5px;
  color: var(--light-background-color);
  background-color: var(--success-color);
  border-color: var(--success-color);
  box-shadow: 5px 4px 0 1px var(--success-color-dark);
  transition: all ease 0.3s;
}
.bm-content .btn.btn-success:hover, .bm-content .btn.btn-success:focus, .bm-content .btn.btn-success:active, .bm-content .btn.btn-success.focus, .bm-content .btn.btn-success.active {
  background-color: var(--success-color-medium);
  border-color: var(--success-color-medium);
  box-shadow: 2px 2px 0 1px var(--success-color-dark);
}
.bm-content .btn.btn-success:not(:disabled):not(.disabled).active, .bm-content .btn.btn-success:not(:disabled):not(.disabled):active, .show > .bm-content .btn.btn-success.dropdown-toggle {
  color: var(--light-text-color);
  background-color: var(--success-color);
  border-color: var(--success-color);
  box-shadow: 2px 2px 0 1px var(--success-color-dark);
}
.bm-content .btn.btn-success.focus, .bm-content .btn.btn-success:focus {
  box-shadow: 2px 2px 0 1px var(--success-color-dark);
}

.modal-full-screen .bm-header .bm-title {
  opacity: 0;
  background-image: none;
}
.modal-full-screen .bm-header .bm-title h1 {
  color: transparent;
}
/*PNG Sprites for Icons and Images*/
.activity-icon {
  border: 2px solid var(--secondary-color);
  background-color: var(--core-color-light);
  border-radius: 50%;
  content: " ";
  height: 80px;
  width: 80px;
  margin-left: 20px;
  margin-top: -15px;
  position: absolute;
  box-shadow: 0px 0px 0px 3px var(--secondary-color);
}
@media screen and (max-height: 768px) {
  .activity-icon {
    height: 60px;
    width: 60px;
    margin-top: -4px;
    margin-left: 10px;
  }
}
@media (max-width: 1499.98px) {
  .activity-icon {
    height: 60px;
    width: 60px;
    margin-top: -4px;
    margin-left: 10px;
  }
}
@media (max-width: 991.98px) {
  .activity-icon {
    margin-left: -10px;
    transform: scale(0.9);
  }
}
@media (max-width: 767.98px) {
  .activity-icon {
    margin-left: -20px;
    transform: scale(0.8);
  }
}

.activity-icon-pathwaygreen {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-pathwaygreen:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 0% 0%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-pathwaygreen:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-challengeblue {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-challengeblue:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 25% 0%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-challengeblue:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-challengegreen {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-challengegreen:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 50% 0%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-challengegreen:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-challengered {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-challengered:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 75% 0%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-challengered:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-pathwayred {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-pathwayred:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 100% 0%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-pathwayred:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-challengeyellow {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-challengeyellow:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 0% 33.3333333333%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-challengeyellow:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-dictionaryblue {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-dictionaryblue:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 25% 33.3333333333%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-dictionaryblue:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-dictionarygreen {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-dictionarygreen:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 50% 33.3333333333%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-dictionarygreen:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-dictionaryred {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-dictionaryred:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 75% 33.3333333333%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-dictionaryred:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-pathwayyellow {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-pathwayyellow:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 100% 33.3333333333%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-pathwayyellow:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-dictionaryyellow {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-dictionaryyellow:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 0% 66.6666666667%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-dictionaryyellow:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-pathwaywhite {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-pathwaywhite:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 25% 66.6666666667%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-pathwaywhite:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-lesson {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-lesson:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 50% 66.6666666667%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-lesson:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-cardsblue {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-cardsblue:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 75% 66.6666666667%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-cardsblue:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-Objective {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-Objective:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 100% 100%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-Objective:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-cardsgreen {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-cardsgreen:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 0% 100%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-cardsgreen:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-cardssorange {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-cardssorange:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 25% 100%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-cardssorange:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-cardsyellow {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-cardsyellow:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 50% 100%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-cardsyellow:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-pathwayblue {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-pathwayblue:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 75% 100%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-pathwayblue:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

.activity-icon-Lessonlg {
  line-height: 1;
  vertical-align: middle;
}
.activity-icon-Lessonlg:before {
  background-image: url(/images/levels/activities/icon-sprite.png);
  background-size: 500%;
  width: 80px;
  height: 80px;
  background-position: 100% 100%;
  content: "";
  margin-right: 20px;
  display: inline-block;
  line-height: 80px;
  vertical-align: middle;
}
@media (max-width: 1499.98px) {
  .activity-icon-Lessonlg:before {
    width: calc(80px - 20px);
    height: calc(80px - 20px);
  }
}

/*_________Styles for all Tab components___________*/
.nav.nav-tabs {
  border-bottom: none;
}
.nav.nav-tabs:after {
  content: "";
  height: 4px;
  width: 98%;
  background-image: linear-gradient(to right, #E3CE97 33%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 12px 1px;
  background-repeat: repeat-x;
  margin: 0rem 0.4rem;
}
.no-border .nav.nav-tabs:after {
  content: none !important;
}
.nav.nav-tabs .nav-link {
  background-color: var(--tabs-default-link-color);
  color: var(--white-color);
  font-family: henderson-slab-basic, serif;
  border-radius: 50px;
  border: transparent;
  margin: 0.5rem;
  transition: all 200ms ease-in-out;
}
.nav.nav-tabs .nav-link:active, .nav.nav-tabs .nav-link.active {
  background-color: var(--tabs-default-active-color);
  color: var(--white-text-color);
}
.nav.nav-tabs .nav-link:active:hover, .nav.nav-tabs .nav-link.active:hover {
  background-color: var(--tabs-default-active-hover-color);
  color: var(--neutral-200);
}
.nav.nav-tabs .nav-link:hover {
  background-color: var(--tabs-default-link-color-hover);
  color: var(--neutral-200);
}
.hide-tabs .nav.nav-tabs {
  display: none;
}

.animated-tabs .nav {
  position: relative;
  display: flex;
  height: 3rem;
  width: 55vw;
  background: var(--animated-tabs-background-color);
  box-shadow: 0 0 20px var(--box-shadow-color-2);
  line-height: 3rem;
  border-radius: 50px;
}
.animated-tabs .nav.nav-tabs {
  border-bottom: none;
  margin-top: 0;
}
.animated-tabs .nav.nav-tabs:after {
  content: none;
}
.animated-tabs .nav .nav-item {
  flex: 1;
  width: 100%;
  z-index: 1;
  cursor: pointer;
}
.animated-tabs .nav a.nav-link,
.animated-tabs .nav .nav-link {
  position: relative;
  z-index: 0;
  color: var(--black-text-color);
  font-size: 20px;
  font-weight: 700;
  font-family: "tgn-soft-round-comp", sans-serif;
  text-decoration: none;
  transition: color 0.6s ease;
  background-color: transparent;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0;
  margin: 0;
  text-align: center;
  border: none;
}
.animated-tabs .nav a.nav-link:hover,
.animated-tabs .nav .nav-link:hover {
  background-color: transparent;
  border: none;
  color: var(--black-text-color);
}
.animated-tabs .nav a.nav-link.active, .animated-tabs .nav a.nav-link:active,
.animated-tabs .nav .nav-link.active,
.animated-tabs .nav .nav-link:active {
  background-color: transparent;
  border: none;
  color: inherit;
}
.animated-tabs .nav a.nav-link.active:hover, .animated-tabs .nav a.nav-link:active:hover,
.animated-tabs .nav .nav-link.active:hover,
.animated-tabs .nav .nav-link:active:hover {
  background-color: transparent;
  border: none;
  color: var(--black-text-color);
}
.animated-tabs .nav .tab-highlighter {
  position: absolute;
  height: 100%;
  width: 20%;
  left: 0;
  bottom: 0;
  z-index: 0;
  border-radius: 50px;
  background: var(--animated-tabs-active-color);
  transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.animated-tabs.tabs-1 .nav .tab-highlighter {
  width: 100%;
}
.animated-tabs.tabs-1 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
  left: 0%;
}
.animated-tabs.tabs-2 .nav .tab-highlighter {
  width: 50%;
}
.animated-tabs.tabs-2 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
  left: 0%;
}
.animated-tabs.tabs-2 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
  left: 50%;
}
.animated-tabs.tabs-3 .nav .tab-highlighter {
  width: 33.3333333333%;
}
.animated-tabs.tabs-3 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
  left: 0%;
}
.animated-tabs.tabs-3 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
  left: 33.3333333333%;
}
.animated-tabs.tabs-3 .nav .nav-item.active:nth-of-type(3) ~ .tab-highlighter {
  left: 66.6666666667%;
}
.animated-tabs.tabs-4 .nav .tab-highlighter {
  width: 25%;
}
.animated-tabs.tabs-4 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
  left: 0%;
}
.animated-tabs.tabs-4 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
  left: 25%;
}
.animated-tabs.tabs-4 .nav .nav-item.active:nth-of-type(3) ~ .tab-highlighter {
  left: 50%;
}
.animated-tabs.tabs-4 .nav .nav-item.active:nth-of-type(4) ~ .tab-highlighter {
  left: 75%;
}
.animated-tabs.tabs-5 .nav .tab-highlighter {
  width: 20%;
}
.animated-tabs.tabs-5 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
  left: 0%;
}
.animated-tabs.tabs-5 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
  left: 20%;
}
.animated-tabs.tabs-5 .nav .nav-item.active:nth-of-type(3) ~ .tab-highlighter {
  left: 40%;
}
.animated-tabs.tabs-5 .nav .nav-item.active:nth-of-type(4) ~ .tab-highlighter {
  left: 60%;
}
.animated-tabs.tabs-5 .nav .nav-item.active:nth-of-type(5) ~ .tab-highlighter {
  left: 80%;
}
.animated-tabs.tabs-6 .nav .tab-highlighter {
  width: 16.6666666667%;
}
.animated-tabs.tabs-6 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
  left: 0%;
}
.animated-tabs.tabs-6 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
  left: 16.6666666667%;
}
.animated-tabs.tabs-6 .nav .nav-item.active:nth-of-type(3) ~ .tab-highlighter {
  left: 33.3333333333%;
}
.animated-tabs.tabs-6 .nav .nav-item.active:nth-of-type(4) ~ .tab-highlighter {
  left: 50%;
}
.animated-tabs.tabs-6 .nav .nav-item.active:nth-of-type(5) ~ .tab-highlighter {
  left: 66.6666666667%;
}
.animated-tabs.tabs-6 .nav .nav-item.active:nth-of-type(6) ~ .tab-highlighter {
  left: 83.3333333333%;
}
.animated-tabs.tabs-7 .nav .tab-highlighter {
  width: 14.2857142857%;
}
.animated-tabs.tabs-7 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
  left: 0%;
}
.animated-tabs.tabs-7 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
  left: 14.2857142857%;
}
.animated-tabs.tabs-7 .nav .nav-item.active:nth-of-type(3) ~ .tab-highlighter {
  left: 28.5714285714%;
}
.animated-tabs.tabs-7 .nav .nav-item.active:nth-of-type(4) ~ .tab-highlighter {
  left: 42.8571428571%;
}
.animated-tabs.tabs-7 .nav .nav-item.active:nth-of-type(5) ~ .tab-highlighter {
  left: 57.1428571429%;
}
.animated-tabs.tabs-7 .nav .nav-item.active:nth-of-type(6) ~ .tab-highlighter {
  left: 71.4285714286%;
}
.animated-tabs.tabs-7 .nav .nav-item.active:nth-of-type(7) ~ .tab-highlighter {
  left: 85.7142857143%;
}
.animated-tabs.tabs-8 .nav .tab-highlighter {
  width: 12.5%;
}
.animated-tabs.tabs-8 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
  left: 0%;
}
.animated-tabs.tabs-8 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
  left: 12.5%;
}
.animated-tabs.tabs-8 .nav .nav-item.active:nth-of-type(3) ~ .tab-highlighter {
  left: 25%;
}
.animated-tabs.tabs-8 .nav .nav-item.active:nth-of-type(4) ~ .tab-highlighter {
  left: 37.5%;
}
.animated-tabs.tabs-8 .nav .nav-item.active:nth-of-type(5) ~ .tab-highlighter {
  left: 50%;
}
.animated-tabs.tabs-8 .nav .nav-item.active:nth-of-type(6) ~ .tab-highlighter {
  left: 62.5%;
}
.animated-tabs.tabs-8 .nav .nav-item.active:nth-of-type(7) ~ .tab-highlighter {
  left: 75%;
}
.animated-tabs.tabs-8 .nav .nav-item.active:nth-of-type(8) ~ .tab-highlighter {
  left: 87.5%;
}
.animated-tabs.tabs-9 .nav .tab-highlighter {
  width: 11.1111111111%;
}
.animated-tabs.tabs-9 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
  left: 0%;
}
.animated-tabs.tabs-9 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
  left: 11.1111111111%;
}
.animated-tabs.tabs-9 .nav .nav-item.active:nth-of-type(3) ~ .tab-highlighter {
  left: 22.2222222222%;
}
.animated-tabs.tabs-9 .nav .nav-item.active:nth-of-type(4) ~ .tab-highlighter {
  left: 33.3333333333%;
}
.animated-tabs.tabs-9 .nav .nav-item.active:nth-of-type(5) ~ .tab-highlighter {
  left: 44.4444444444%;
}
.animated-tabs.tabs-9 .nav .nav-item.active:nth-of-type(6) ~ .tab-highlighter {
  left: 55.5555555556%;
}
.animated-tabs.tabs-9 .nav .nav-item.active:nth-of-type(7) ~ .tab-highlighter {
  left: 66.6666666667%;
}
.animated-tabs.tabs-9 .nav .nav-item.active:nth-of-type(8) ~ .tab-highlighter {
  left: 77.7777777778%;
}
.animated-tabs.tabs-9 .nav .nav-item.active:nth-of-type(9) ~ .tab-highlighter {
  left: 88.8888888889%;
}
.animated-tabs.tabs-10 .nav .tab-highlighter {
  width: 10%;
}
.animated-tabs.tabs-10 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
  left: 0%;
}
.animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
  left: 10%;
}
.animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(3) ~ .tab-highlighter {
  left: 20%;
}
.animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(4) ~ .tab-highlighter {
  left: 30%;
}
.animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(5) ~ .tab-highlighter {
  left: 40%;
}
.animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(6) ~ .tab-highlighter {
  left: 50%;
}
.animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(7) ~ .tab-highlighter {
  left: 60%;
}
.animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(8) ~ .tab-highlighter {
  left: 70%;
}
.animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(9) ~ .tab-highlighter {
  left: 80%;
}
.animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(10) ~ .tab-highlighter {
  left: 90%;
}
.animated-tabs.dark-tabs .nav {
  background-color: var(--core-color-dark);
}
.animated-tabs.dark-tabs .tab-highlighter {
  border: 2px solid var(--black-text-color);
}

.nested-tabs .nav.nav-tabs {
  width: 55vw;
}
.nested-tabs .nav {
  background-color: inherit;
  box-shadow: inherit;
  border-bottom: none;
  margin-bottom: 10px;
}
.nested-tabs .nav .tab-highlighter {
  display: none;
}
.nested-tabs .nav .nav-item {
  flex: 1;
  width: 100%;
}
.nested-tabs .nav .nav-link {
  background-color: var(--tabs-default-link-color);
  color: var(--white-text-color);
  border-radius: 50px;
  border: transparent;
  margin: 0.5rem;
  padding: 0.2rem;
  transition: all 200ms ease-in-out;
  font-family: "tgn-soft-round-comp", sans-serif;
  text-align: center;
}
.nested-tabs .nav .nav-link:active, .nested-tabs .nav .nav-link.active {
  background-color: var(--tabs-default-active-color);
  color: var(--light-text-color);
}
.nested-tabs .nav .nav-link:active:hover, .nested-tabs .nav .nav-link.active:hover {
  background-color: var(--tabs-default-active-hover-color);
  color: var(--white-text-color);
}
.nested-tabs .nav .nav-link:hover {
  background-color: var(--tabs-default-link-color);
  color: var(--white-text-color);
}
.nested-tabs .nav .tab-highlighter {
  display: none;
}
.nested-tabs .nav:after {
  display: none;
}
.hide-tabs .nested-tabs .nav {
  display: none;
}

.vertical-tabs {
  display: flex;
  background-color: var(--vertical-tabs-container-background-color);
  border-radius: 1.8rem;
  margin-bottom: 2vh;
}
.vertical-tabs .nav {
  display: flex;
  flex-direction: column;
  background-color: var(--vertical-tabs-nav-background-color);
}
.vertical-tabs .nav-tabs,
.vertical-tabs .nav.nav-tabs {
  border-bottom: none;
  margin-top: 0px;
}
.vertical-tabs .nav-tabs:after,
.vertical-tabs .nav.nav-tabs:after {
  content: none;
}
.vertical-tabs .nav-tabs .nav-item,
.vertical-tabs .nav.nav-tabs .nav-item {
  cursor: pointer;
}
.vertical-tabs .nav-tabs .nav-link,
.vertical-tabs .nav.nav-tabs .nav-link {
  background-color: var(--vertical-tabs-nav-background-color);
  transition: all 0.2s ease-in-out;
  border-top-left-radius: 1.8rem;
  border-bottom-left-radius: 1.8rem;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border: 2px dashed transparent;
  padding-left: 50px;
  margin: 0;
}
.vertical-tabs .nav-tabs .nav-link:hover,
.vertical-tabs .nav.nav-tabs .nav-link:hover {
  border-top-left-radius: 1.8rem;
  border-bottom-left-radius: 1.8rem;
  border: 2px dashed var(--vertical-tabs-tab-hover-border-color);
  border-right: 2px dashed transparent;
}
.vertical-tabs .nav-tabs .nav-link.active,
.vertical-tabs .nav.nav-tabs .nav-link.active {
  background-color: var(--vertical-tabs-active-tab-color);
  border-color: transparent;
  color: var(--vertical-tabs-active-tab-text-color);
  border-top-left-radius: 1.8rem;
  border-bottom-left-radius: 1.8rem;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  margin: 0;
}
.vertical-tabs .nav-item {
  color: var(--light-text-color);
  padding-right: 0px;
  border-top-left-radius: 1.8rem;
  border-bottom-left-radius: 1.8rem;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  margin-left: 0.5rem;
}
.vertical-tabs .breadcrumb {
  padding: 0.5rem 2rem;
  background-color: var(--neutral-300);
  border-radius: 1.8rem;
  font-family: henderson-slab-basic, serif;
}
.vertical-tabs .breadcrumb .breadcrumb-item {
  font-family: henderson-slab-basic, serif;
}
.vertical-tabs .breadcrumb .breadcrumb-item:before {
  color: var(--dark-color);
  font-family: henderson-slab-basic, serif;
}
.vertical-tabs .breadcrumb .breadcrumb-item.active {
  color: var(--dark-color);
}
.vertical-tabs .breadcrumb .breadcrumb-item a {
  font-family: henderson-slab-basic, serif;
  font-size: 1rem;
}

/*_________ColorPicker Component_________*/
.color-picker-component {
  width: 275px;
  height: auto;
  position: absolute;
  background-color: var(--white-color);
  border-radius: 1.8rem;
  border: 3px solid var(--warning-color);
  border-right: 8px solid var(--warning-color);
  border-bottom: 7px solid var(--warning-color);
  padding: 1rem;
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(64, 87, 109, 0.07), 0 2px 12px rgba(53, 71, 90, 0.2);
  transform: translate3d(0px, 10px, 0px);
  will-change: transform;
  transition: all 150ms ease-in-out 0s;
}
.hide .color-picker-component {
  display: none;
  opacity: 0;
}
.show .color-picker-component {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}
.color-picker-component .color-body {
  display: flex;
  flex-wrap: wrap;
}
.color-picker-component .swatch {
  margin: 0.25rem;
  padding: 0.25rem;
  height: 50px;
  width: 50px;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  transform: scale(1);
}
.color-picker-component .swatch:hover {
  transform: scale(0.925);
}
.color-picker-component .swatchPreview {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}

/*_________ColorPicker Component_________*/
.theme-picker-component .iconSelect {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}

.tooltip-container .tooltip-top-right::after, .tooltip-container .tooltip-bottom::after, .tooltip-container .tooltip-top::after, .tooltip-container .tooltip-right::after, .tooltip-container .tooltip-left::after {
  content: " ";
  position: absolute;
  border-width: 5px;
  border-style: solid;
}

.tooltip-container {
  position: relative;
  display: inline-block;
  z-index: 3;
}
.tooltip-container.tooltip-dotted {
  border-bottom: 1px dotted var(--dark-text-color);
}
.tooltip-container .tooltip, .tooltip-container .tooltip-top-right, .tooltip-container .tooltip-bottom, .tooltip-container .tooltip-top, .tooltip-container .tooltip-right, .tooltip-container .tooltip-left {
  visibility: hidden;
  background-color: var(--light-background-color);
  color: var(--body-font-color);
  text-align: center !important;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  width: auto;
  padding: 0.2rem 0.6rem;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip-container .tooltip.tooltip-dark, .tooltip-container .tooltip-dark.tooltip-top-right, .tooltip-container .tooltip-dark.tooltip-bottom, .tooltip-container .tooltip-dark.tooltip-top, .tooltip-container .tooltip-dark.tooltip-right, .tooltip-container .tooltip-dark.tooltip-left {
  background-color: var(--core-color);
  color: var(--light-text-color);
}
.tooltip-container .tooltip-left {
  top: -5px;
  right: 115%;
}
.tooltip-container .tooltip-left::after {
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-color: transparent transparent transparent var(--light-background-color);
}
.tooltip-container .tooltip-left.tooltip-dark::after {
  border-color: transparent transparent transparent var(--core-color);
}
.tooltip-container .tooltip-right {
  top: -5px;
  left: 115%;
}
.tooltip-container .tooltip-right::after {
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-color: transparent var(--light-background-color) transparent transparent;
}
.tooltip-container .tooltip-right.tooltip-dark::after {
  border-color: transparent var(--core-color) transparent transparent;
}
.tooltip-container .tooltip-top {
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
}
.tooltip-container .tooltip-top::after {
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: var(--light-background-color) transparent transparent transparent;
}
.tooltip-container .tooltip-top.tooltip-dark::after {
  border-color: var(--core-color) transparent transparent transparent;
}
.tooltip-container .tooltip-bottom {
  top: 135%;
  left: 50%;
  margin-left: -60px;
}
.tooltip-container .tooltip-bottom::after {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: transparent transparent var(--light-background-color) transparent;
}
.tooltip-container .tooltip-bottom.tooltip-dark::after {
  border-color: transparent transparent var(--core-color) transparent;
}
.tooltip-container .tooltip-top-right {
  bottom: 105%;
  left: 145%;
  margin-left: -60px;
}
.tooltip-container .tooltip-top-right::after {
  top: 100%;
  left: 7%;
  border-width: 6px;
  margin-top: -1px;
  border-color: var(--light-background-color) transparent transparent transparent;
}
.tooltip-container .tooltip-top-right.tooltip-dark::after {
  border-color: var(--core-color) transparent transparent transparent;
}
.tooltip-container:hover .tooltip, .tooltip-container:hover .tooltip-left, .tooltip-container:hover .tooltip-right, .tooltip-container:hover .tooltip-top, .tooltip-container:hover .tooltip-bottom, .tooltip-container:hover .tooltip-top-right {
  visibility: visible;
  opacity: 1;
}

/*_____________STYLES FOR TEACHER ADMIN AREAS__________________*/
/*_______Class Dashboard_______*/
text[id$=_ChartTitle], text[id$=_title] {
  font-family: henderson-slab-basic, serif !important;
  fill: var(--dark-text-color) !important;
}

text[id*=_AxisLabel], text[id*=_datalabel] {
  font-family: "tgn-soft-round-comp", sans-serif;
  letter-spacing: 1px;
  font-size: 110%;
  color: var(--chart-axis-label-color);
}

text[id*=_AxisTitle] {
  font-family: "tgn-soft-round-comp", sans-serif;
  letter-spacing: 1px;
  font-size: 110%;
  color: var(--chart-axis-title-color) !important;
}

text[id*=_chart_legend_text] {
  font-family: "tgn-soft-round-comp", sans-serif;
  font-size: 110%;
  padding-left: 3px;
  color: var(--chart-legend-text-color);
}

g[id$=AxisGroup0Inside] path {
  stroke: var(--chart-axis-stroke-group-1) !important;
}

g[id$=AxisGroup1Inside] path {
  stroke: var(--chart-axis-stroke-group-2);
}

g[id$=bdAxisLabels1] text {
  font-family: "tgn-soft-round-comp", sans-serif !important;
  letter-spacing: 1px !important;
  font-size: 16px !important;
}

g[id$=bdAxisLabels0] text {
  font-family: "Cubano", sans-serif !important;
}

rect[id$=_ChartBorder] {
  padding: 10px;
  border-radius: 1.2rem;
  fill: transparent;
}

rect[id*=_ChartAreaBorder] {
  fill: transparent;
  stroke: transparent;
}

path[id*=_ChartAxisLine] {
  fill: transparent;
}

.chart-tooltip {
  width: 100%;
  border: none;
  background-color: var(--chart-tooltip-background-color);
  box-shadow: 0px 8px 29px -6px rgba(97, 72, 10, 0.16), 0px 1px 5px rgba(97, 72, 10, 0.12), 0px 0px 6px rgba(97, 72, 10, 0.16);
  padding: 10px;
  border-radius: 0.6rem;
  min-width: 175px;
  margin-left: 10px;
}
.chart-tooltip-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.chart-tooltip-header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.chart-tooltip-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0px;
}

.chart-minimal path[id$=AxisLine_0] {
  stroke: transparent !important;
}
.chart-minimal path[id$=AxisLine_1] {
  stroke: #eaf1d7 !important;
}
.chart-minimal ellipse[id$=_Symbol] {
  stroke: var(--neutral-100);
  fill: #50794A;
}
.chart-minimal ellipse[id$=_Symbol1] {
  stroke: var(--neutral-100);
  fill: #B59A46;
}
.chart-minimal ellipse[id$=Trackball_0] {
  stroke: rgba(80, 121, 74, 0.2117647059);
}
.chart-minimal ellipse[id$=Trackball_1] {
  stroke: var(--chart-trackball-color);
}

.toggle-switch-container {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}
.toggle-switch-container input {
  display: none;
}
.toggle-switch-container .slider {
  position: relative;
  display: inline-block;
  background-color: #cfc2a2;
  transition: 0.4s;
  height: 24px;
  width: 48px;
  cursor: pointer;
}
.toggle-switch-container .slider.toggle-disabled {
  background-color: #b4b5b5;
}
.toggle-switch-container .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  bottom: 3px;
  left: 4px;
  background-color: white;
  transition: 0.4s;
}
.toggle-switch-container input {
  /* Rounded sliders */
}
.toggle-switch-container input:checked + .slider {
  background-color: var(--dark-color);
}
.toggle-switch-container input:checked + .slider.toggle-disabled {
  background-color: #b4b5b5;
}
.toggle-switch-container input:focus + .slider {
  box-shadow: 0 0 10px var(--dark-color);
}
.toggle-switch-container input:hover + .slider:before {
  box-shadow: 0 0 20px var(--dark-color);
}
.toggle-switch-container input:checked + .slider:before {
  transform: translateX(22px);
}
.toggle-switch-container input .slider.round {
  border-radius: 40px;
}
.toggle-switch-container input .slider.round:before {
  border-radius: 50%;
}

.floating-menu-container {
  position: fixed;
  z-index: 3;
  top: 2vh;
  right: 0;
  padding: 0.2rem;
  display: flex;
  flex-direction: column;
}
.floating-menu-container .floating-menu {
  display: block;
  background-color: var(--light-background-color-lighter);
  position: absolute;
  padding: 1rem;
  top: 54px;
  right: 100%;
  width: 0px;
  display: block;
  transition: all 0.3s ease;
}
.floating-menu-container .floating-menu.menu-open {
  margin: 5px;
  opacity: 1;
  transform: scale(1);
  transform-origin: top right;
  width: 300px;
  display: block;
  transition: all 0.3s ease;
}
.floating-menu-container .floating-menu.menu-closed {
  transform: scale(0);
  transform-origin: top right;
  opacity: 0;
  display: block;
  transition: all 0.3s ease;
}
.floating-menu-container span {
  padding: 8px 8px 8px 32px;
  color: var(--secondary-color);
  display: block;
  transition: 0.3s;
  text-align: center;
}
.floating-menu-container span:hover {
  color: var(--light-background-color-lighter);
}
.floating-menu-container .open-close-button {
  cursor: pointer;
  color: var(--info-color);
  padding: 2px 0px;
  margin-right: 1vw;
  border: none;
}

.blazored-toast {
  display: flex;
  flex-direction: row;
  animation: fadein 1.5s;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  color: var(--toast-default-text-color);
  width: 100vw;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 40px;
}
.blazored-toast h1, .blazored-toast h2, .blazored-toast h3, .blazored-toast h4, .blazored-toast h5, .blazored-toast h6, .blazored-toast p, .blazored-toast label, .blazored-toast i, .blazored-toast .blazored-toast-icon {
  color: var(--toast-default-text-color);
}
@media (min-width: 576px) {
  .blazored-toast {
    width: 30rem;
    border-radius: 0.25rem;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.blazored-toast.blazored-toast-info {
  background-color: var(--toast-info-background-color);
}
.blazored-toast.blazored-toast-info h1, .blazored-toast.blazored-toast-info h2, .blazored-toast.blazored-toast-info h3, .blazored-toast.blazored-toast-info h4, .blazored-toast.blazored-toast-info h5, .blazored-toast.blazored-toast-info h6, .blazored-toast.blazored-toast-info p, .blazored-toast.blazored-toast-info label, .blazored-toast.blazored-toast-info i {
  color: var(--toast-info-text-color);
}
.blazored-toast.blazored-toast-info .blazored-toast-icon {
  color: var(--toast-info-text-color);
}
.blazored-toast.blazored-toast-success {
  background-color: var(--toast-success-background-color);
}
.blazored-toast.blazored-toast-success h1, .blazored-toast.blazored-toast-success h2, .blazored-toast.blazored-toast-success h3, .blazored-toast.blazored-toast-success h4, .blazored-toast.blazored-toast-success h5, .blazored-toast.blazored-toast-success h6, .blazored-toast.blazored-toast-success p, .blazored-toast.blazored-toast-success label, .blazored-toast.blazored-toast-success i {
  color: var(--toast-success-text-color);
}
.blazored-toast.blazored-toast-success .blazored-toast-icon {
  color: var(--toast-success-text-color);
}
.blazored-toast.blazored-toast-warning {
  background-color: var(--toast-warning-background-color);
}
.blazored-toast.blazored-toast-warning h1, .blazored-toast.blazored-toast-warning h2, .blazored-toast.blazored-toast-warning h3, .blazored-toast.blazored-toast-warning h4, .blazored-toast.blazored-toast-warning h5, .blazored-toast.blazored-toast-warning h6, .blazored-toast.blazored-toast-warning p, .blazored-toast.blazored-toast-warning label, .blazored-toast.blazored-toast-warning i {
  color: var(--toast-warning-text-color);
}
.blazored-toast.blazored-toast-warning .blazored-toast-icon {
  color: var(--toast-warning-text-color);
}
.blazored-toast.blazored-toast-error {
  background-color: var(--toast-danger-background-color);
}
.blazored-toast.blazored-toast-error h1, .blazored-toast.blazored-toast-error h2, .blazored-toast.blazored-toast-error h3, .blazored-toast.blazored-toast-error h4, .blazored-toast.blazored-toast-error h5, .blazored-toast.blazored-toast-error h6, .blazored-toast.blazored-toast-error p, .blazored-toast.blazored-toast-error label, .blazored-toast.blazored-toast-error i {
  color: var(--toast-danger-text-color);
}
.blazored-toast.blazored-toast-error p {
  color: var(--toast-danger-text-color);
}
.blazored-toast.blazored-toast-error .blazored-toast-icon {
  color: var(--toast-danger-text-color);
}
.blazored-toast .blazored-toast-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 1rem 0 0;
  font-size: 2.5rem;
}
.blazored-toast .blazored-toast-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blazored-toast .blazored-toast-body .blazored-toast-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.blazored-toast .blazored-toast-body .blazored-toast-header h1, .blazored-toast .blazored-toast-body .blazored-toast-header h2, .blazored-toast .blazored-toast-body .blazored-toast-header h3, .blazored-toast .blazored-toast-body .blazored-toast-header h4, .blazored-toast .blazored-toast-body .blazored-toast-header h5, .blazored-toast .blazored-toast-body .blazored-toast-header h6, .blazored-toast .blazored-toast-body .blazored-toast-header p, .blazored-toast .blazored-toast-body .blazored-toast-header label, .blazored-toast .blazored-toast-body .blazored-toast-header i {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.3rem;
  margin-bottom: 0;
  line-height: 32px;
}
.blazored-toast .blazored-toast-body .blazored-toast-header .blazored-toast-close {
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  color: inherit;
  font-size: 1.25rem;
}
.blazored-toast .blazored-toast-body p {
  margin-bottom: 0;
  font-size: 1.6rem;
}

.blazored-toast-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 6;
}
.blazored-toast-container.position-topleft, .blazored-toast-container.position-topright, .blazored-toast-container.position-topcenter {
  top: 0;
}
.blazored-toast-container.position-bottomleft, .blazored-toast-container.position-bottomright, .blazored-toast-container.position-bottomcenter {
  bottom: 0;
}
@media (min-width: 576px) {
  .blazored-toast-container.position-topleft {
    top: 2rem;
    left: 2rem;
  }
  .blazored-toast-container.position-topright {
    top: 2rem;
    right: 2rem;
  }
  .blazored-toast-container.position-topcenter {
    top: 2rem;
    left: 50%;
    margin-left: -15rem;
  }
  .blazored-toast-container.position-bottomleft {
    bottom: 2rem;
    left: 2rem;
  }
  .blazored-toast-container.position-bottomright {
    bottom: 2rem;
    right: 2rem;
  }
  .blazored-toast-container.position-bottomcenter {
    bottom: 2rem;
    left: 50%;
    margin-left: -15rem;
  }
}

/*_________Date Picker Styles___________*/
.date-picker .date-picker-display {
  align-items: center;
  display: flex;
  max-width: 460px;
  margin-bottom: 5px;
}
.date-picker .date-picker-display .date-input {
  cursor: pointer;
  margin: 0;
}
.date-picker .date-picker-body {
  position: absolute;
  overflow: auto;
  background-color: var(--light-background-color-lighter);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 3;
  border: 1px solid var(--light-background-color-darker);
  border-radius: 1rem;
}
.date-picker .date-picker-body .row {
  margin-right: 0;
  margin-left: 0;
}
.date-picker .date-picker-body .left-panel {
  float: left;
  margin-top: 10px;
}
.date-picker .date-picker-body .left-panel button.left-navigate {
  left: 8px;
  top: -2px;
  position: relative;
}
.date-picker .date-picker-body .left-panel label.left-month-text {
  position: relative;
  left: 35px;
  top: 4px;
  font-size: 1rem;
}
.date-picker .date-picker-body .right-panel {
  margin-top: 10px;
}
.date-picker .date-picker-body .right-panel button.right-navigate {
  top: -2px;
  position: relative;
  margin: 0 8px 0 27px;
}
.date-picker .date-picker-body .right-panel label.right-month-text {
  position: relative;
  top: 4px;
  font-size: 1rem;
}
.date-picker .date-picker-body table {
  width: 210px;
  font-size: 11px;
  margin: 0 10px 0 10px;
  min-width: 0;
  text-align: center;
}
.date-picker .date-picker-body table thead th {
  font-size: 0.6rem;
  padding-left: 12px;
  padding-top: 12px;
  padding-right: 12px;
  padding-bottom: 12px;
  letter-spacing: normal;
  background-color: var(--core-color);
  color: var(--white-color);
}
.date-picker .date-picker-body table thead th tr {
  background-color: var(--core-color);
  color: var(--white-color);
}
.date-picker .date-picker-body table tbody tr {
  height: 2rem;
  padding: 0;
  line-height: 0;
}
.date-picker .date-picker-body table tbody tr td {
  padding: 0;
  font-size: 0.8rem;
}
.date-picker .date-picker-body .date-picker-cell {
  cursor: pointer;
  font-weight: normal;
}
.date-picker .date-picker-body .date-picker-cell:hover {
  background-color: var(--success-color);
  transition-duration: 200ms;
  color: var(--light-background-color);
}
.date-picker .date-picker-body .date-picker-cell.active {
  background-color: var(--success-color);
  color: var(--white-text-color);
}
.date-picker .date-picker-body .date-picker-cell.disabled {
  color: var(--disabled-color);
}
.date-picker .date-picker-body .date-picker-cell.disabled:hover {
  background-color: inherit;
}
.date-picker .date-picker-body .date-picker-cell.selected {
  background-color: var(--accent-color-6-muted);
}
.date-picker .date-picker-body .date-picker-cell.blocked {
  color: var(--danger-color-light);
}
.date-picker .date-picker-body .date-picker-cell.today {
  font-weight: bold;
  text-decoration: underline;
  color: var(--primary-color-dark);
}
.date-picker .date-picker-body i {
  font-size: 1rem;
}
.date-picker .date-picker-body .date-picker-footer {
  height: 2.5rem;
}
.date-picker .date-picker-body .date-picker-footer button {
  margin-left: 10px;
  margin-right: 10px;
}

/*STYLES FOR THE RICH TEXT EDITOR (NOT THE OUTPUT)*/
.e-control {
  font-family: "tgn-soft-round-comp", sans-serif !important;
}

.e-dropdown-popup ul {
  font-size: 20px !important;
}

.e-richtexteditor {
  min-width: var(--dynamic-min-width);
  max-width: var(--dynamic-max-width);
  min-height: var(--dynamic-min-height);
  max-height: var(--dynamic-max-height);
}
.e-richtexteditor .e-toolbar {
  background-color: var(--neutral-150);
  border-top-right-radius: 1rem !important;
  border-top-left-radius: 1rem !important;
  box-shadow: none;
}
.e-richtexteditor .e-toolbar .e-toolbar-items {
  background-color: var(--neutral-150);
  border-top-right-radius: 1rem !important;
  border-top-left-radius: 1rem !important;
}
.e-richtexteditor .e-toolbar .e-tbar-btn {
  background-color: var(--neutral-150) !important;
}
.e-richtexteditor .e-toolbar .e-tbar-btn:hover {
  background: rgba(181, 154, 70, 0.4705882353);
  border-radius: 0.2rem;
}
.e-richtexteditor .e-toolbar .e-hor-nav.e-expended-nav {
  border-top-right-radius: 1rem;
}
.e-richtexteditor .e-control.e-btn.e-lib.e-dropdown-btn.e-rte-elements.e-tbar-btn.e-rte-fontcolor-dropdown.e-icon-btn:hover, .e-richtexteditor .e-control.e-btn.e-lib.e-dropdown-btn.e-rte-elements.e-tbar-btn.e-rte-backgroundcolor-dropdown.e-icon-btn:hover {
  background: rgba(181, 154, 70, 0.4705882353);
  border-radius: 0.2rem;
}
.e-richtexteditor.e-rte-tb-expand {
  border: 0px solid var(--neutral-300) !important;
  border-top-right-radius: 1rem !important;
  border-top-left-radius: 1rem !important;
  border-bottom-right-radius: 1rem !important;
  border-bottom-left-radius: 1rem !important;
}
.e-richtexteditor.e-rte-tb-expand .e-rte-content {
  border-top: 0px !important;
  border-bottom-right-radius: 0rem !important;
}
.e-richtexteditor.e-rte-resize {
  border: 2px solid var(--neutral-300) !important;
  background: none !important;
}
.e-richtexteditor .e-rte-srctextarea {
  font-size: 140%;
}

/* Styles for Cohort Picker Component */
.cohort-picker-container {
  align-items: center;
  padding: 0.2em;
  margin: 1.6rem;
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
  overflow-y: auto;
}
.cohort-picker-container .cohort-selector {
  display: contents;
}

.cohort-thumbnail {
  color: var(--cohort-thumbnail-text-color);
  padding: 8px 10px 2px 10px;
  background-color: var(--cohort-thumbnail-background-color);
  border: 2px solid var(--cohort-thumbnail-border-color);
  box-shadow: 5px 4px 0 1px var(--cohort-thumbnail-border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  display: flow-root;
}
.cohort-thumbnail:hover {
  background-color: var(--cohort-thumbnail-background-color-hover);
}

.cohort-thumbnail:active, .cohort-thumbnail.active {
  color: var(--secondary-color);
  background-color: var(--danger-color) !important;
  border-color: var(--secondary-color);
  box-shadow: 2px 2px 0 1px var(--secondary-color);
}
.cohort-thumbnail:active .cohort-members, .cohort-thumbnail.active .cohort-members {
  color: var(--light-text-color);
}
.cohort-thumbnail:active .cohort-name, .cohort-thumbnail.active .cohort-name {
  color: var(--light-text-color);
}

.cohort-thumbnail-alt {
  color: var(--dark-color);
  padding: 8px 10px 2px 10px;
  background-color: var(--light-background-color);
  border: 2px solid var(--dark-color);
  box-shadow: 5px 4px 0 1px var(--dark-color);
  border-radius: 10px;
  cursor: pointer;
  margin: 5px 0px;
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flow-root;
}
.cohort-thumbnail-alt.active, .cohort-thumbnail-alt:active {
  background-color: var(--accent-color-10) !important;
  border: 2px solid var(--accent-color-10);
  box-shadow: 2px 2px 0 1px var(--accent-color-10);
}
.cohort-thumbnail-alt.active .cohort-members, .cohort-thumbnail-alt:active .cohort-members {
  color: var(--light-text-color);
}
.cohort-thumbnail-alt.active .cohort-name, .cohort-thumbnail-alt:active .cohort-name {
  color: var(--light-text-color);
}

.cohort-thumbnail:focus,
.cohort-thumbnail.focus,
.cohort-thumbnail-alt:focus,
.cohort-thumbnail-alt.focus {
  color: var(--dark-color);
  background-color: var(--dark-color);
  border-color: var(--dark-color);
  box-shadow: 2px 2px 0 1px var(--dark-color);
}
.cohort-thumbnail:focus .cohort-members,
.cohort-thumbnail.focus .cohort-members,
.cohort-thumbnail-alt:focus .cohort-members,
.cohort-thumbnail-alt.focus .cohort-members {
  color: var(--light-text-color);
}
.cohort-thumbnail:focus .cohort-name,
.cohort-thumbnail.focus .cohort-name,
.cohort-thumbnail-alt:focus .cohort-name,
.cohort-thumbnail-alt.focus .cohort-name {
  color: var(--light-text-color);
}

.cohort-thumbnail .cohort-name,
.cohort-thumbnail-alt .cohort-name {
  float: left;
  position: relative;
  width: 70%;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cohort-thumbnail .cohort-members,
.cohort-thumbnail-alt .cohort-members {
  float: right;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cohort-members-tile {
  background-color: var(--cohort-members-tile-background-color);
  border-radius: 0.75rem !important;
  padding-left: 1rem;
  padding-bottom: 0.2rem;
  padding-right: 1rem;
  padding-top: 0.25rem;
  border: 1px solid var(--cohort-members-tile-border-color);
}

.actions-list-controls {
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}

.cms-layout table.actions-list {
  background-color: #FFFFF3;
  margin-top: 0.25rem;
}
.cms-layout table.actions-list p {
  margin-bottom: 0;
}
.cms-layout table.actions-list thead {
  border-color: var(--neutral-300) !important;
  border-bottom-width: 2px !important;
}
.cms-layout table.actions-list thead th p {
  font-family: henderson-slab-basic, serif;
  color: var(--dark-color);
  font-size: small;
}

/*Data List - similar to table formatting with more flexible responsive layouts*/
/*.actions-list {
    line-height: normal;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0px;
    color: var(--dark-color-light);
    border-radius: 1.2rem;
    overflow-y: auto;

    //match with other similar styled containers such as .tile-shadowed
    box-shadow: 0 0 20px 0px #e3ce9766;
    background-color: #fffff3;

    &-header {
        padding: 0;
        margin-left: 1rem;
        margin-right: 1rem;
        display: box;
        box-shadow: none;
        top: 0;
    }

    // for title of the box
    &-title {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }

    // for the actions buttons 
    &-controls {
        display: flex;
        -webkit-box-pack: justify;
        justify-content: end;
        -webkit-box-align: center;
        align-items: right;
        width: 100%;
        margin-bottom: 10px;
    }

    //styling for when list with actions has a header row similar to a table
    &-header-labels {
        margin: 0rem 1rem;
        padding: 0px 22px;
        display: flex;
        flex-direction: row;
        //justify-content: space-evenly;
        column-gap: 5px;
        text-align: left;
        margin-bottom: -10px;

        position: -webkit-sticky;
        z-index: 2;
        margin-left: 20px !important;

        //TODO this is temporary, it's not good css :)
        .cohort-list & {
                margin-left: 0;
                border-bottom: 1px solid beige;

                .select-column-header input {

                    margin-right: 10px;
                }

                .col-1 {

                }
        }

        p,
        label {
            font-size: medium;
            color: var(--dark-color);
            font-family: $slab-font;
        }

    }

    //add to List with Actions Select/Reorder Column if there's headers
    .select-column-header {
        text-align: left;
    }


    // Wrapper div to style component like a table
    &.table {
        table-layout: fixed;
        column-width: auto;
        overflow-y: scroll;

        // td {
        //     overflow-wrap: normal;
        //     padding: 1fr;
        // }
    }

    &-column-header {
        display: flex;
        //justify-content: space-between;
        text-align: left;
    }

    // Freeze header row on scroll
    &-body {
        overflow-y: auto;
        padding: 1rem 0;

    }



    //add to column that has the actual select/reorder
    .select-column {
        text-align: left;
        margin-right: 20px;
    }


    &-item {

        display: flex;
        -webkit-box-align: left;
        align-items: left;
        padding: 8px 20px;
        //justify-content: space-evenly;

        .column {
            margin-right: 20px;

            &.reorder-column {
                width: 40px;
                text-align: left;
            }
        }

        &:last-child {
            border-radius: 0px 0px 8px 8px;
        }

        &-inner {
            display: flex;
            -webkit-box-align: left;
            align-items: left;
            padding: 8px 20px;
            white-space: wrap;
        }

        .actions-list.table & {
            &-inner {
                box-shadow: #f1efe6 0px -1px 0px 0px inset;
                height: 50px;
                padding: 0px 20px;
            }
        }

        .btn {
            transform: translateY(-4px);
            padding: 0rem .5rem;
        }
    }

    .column {
        text-align: left;
        margin-right: 20px;
    }


    .header-text-wrapper {
        color: var(--dark-color);
    }

}
*/
/*_____________STYLES FOR TABLE-WITH-ACTIONS COMPONENT_________________*/
.cms-layout .table-with-actions {
  margin-top: 1rem;
  z-index: 0;
  position: relative;
}
.cms-layout .table-with-actions .table-title {
  float: left;
  width: 60%;
}
.cms-layout .table-with-actions .table-title :first-child {
  margin-bottom: 0px;
}
.cms-layout .table-with-actions .actions-area {
  float: right;
  margin-bottom: 0.5rem;
}
.cms-layout .table-with-actions .table-container {
  position: relative;
}
.cms-layout .table-with-actions .table-container table {
  margin-top: 0;
  width: 100%;
  overflow: auto;
}
.cms-layout .table-with-actions .table-container table .checkbox-column {
  width: 80px;
}
.cms-layout .table-with-actions .table-container table .reorder-column {
  width: 80px;
}
.cms-layout .table-with-actions .table-container.sticky-header {
  max-height: 80vh;
  overflow: auto;
}
.cms-layout .table-with-actions .table-container.sticky-header table {
  position: relative;
  text-align: left;
}
.cms-layout .table-with-actions .table-container.sticky-header table th {
  position: sticky;
  top: -1px;
  background-color: inherit;
  z-index: 2;
}

.report-container {
  margin: auto;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.report-container .q-summary {
  align-items: center;
  justify-content: center;
  display: inline-flex;
  padding: 1em;
  width: 100%;
  text-align: center;
}
.report-container .time-taken {
  background-color: var(--primary-color-dark);
  color: var(--light-text-color);
  padding: 1em;
  margin: 1rem;
  font-family: "Cubano", sans-serif;
  font-weight: 400;
  width: auto;
  border-radius: 10px;
  box-shadow: 5px 5px 5px #E3CE97;
}
.report-container .report-view-card {
  width: auto;
  max-height: 50%;
  border-color: transparent;
  margin: 0.5rem;
  border-radius: 0.8rem;
  box-shadow: 5px 5px 5px var(--neutral-400);
}
.report-container .report-view-card h1, .report-container .report-view-card h2, .report-container .report-view-card h3, .report-container .report-view-card h4, .report-container .report-view-card h5, .report-container .report-view-card h6 {
  color: var(--light-text-color);
}
.report-container .report-view-card.correct-card {
  background-color: var(--success-color);
}
.report-container .report-view-card.incorrect-card {
  background-color: var(--accent-color-1-dark);
}
@media (max-width: 1199.98px) {
  .report-container .report-view-card {
    width: 60%;
  }
}
@media (max-width: 991.98px) {
  .report-container .report-view-card {
    width: 70%;
  }
}
@media (max-width: 767.98px) {
  .report-container .report-view-card {
    width: 95%;
  }
}
.report-container .report-view-card .card-text-center {
  text-align: center;
}
.report-container .nav-btns {
  vertical-align: middle;
  padding: 0.5em;
}

.user-thumbnail-container {
  width: -moz-fit-content;
  width: fit-content;
  border: 0.2rem dashed #b59a46;
  border-radius: 1rem;
  padding: 0.5rem 0.2rem 0.5rem 0.2rem;
  background-color: #FFFFE2;
}
.user-thumbnail-container p {
  margin-bottom: 0;
}

.spinner-border {
  color: var(--core-color);
  width: 3rem;
  height: 3rem;
  border-width: 0.4rem;
}
.spinner-border.xs {
  width: 1rem;
  height: 1rem;
  border-width: unset;
}
.spinner-border.sm {
  width: 2rem;
  height: 2rem;
  border-width: 0.3rem;
}
.spinner-border.lg {
  width: 4rem;
  height: 4rem;
  border-width: 0.5rem;
}
.spinner-border.xl {
  width: 5rem;
  height: 5rem;
  border-width: 0.6rem;
}

/*________________________LOADING__________________________*/
/*FIREFLY LOADING SCREEN*/
.full-width-app .loading-container {
  max-width: 30em;
  margin-top: 10%;
  background-color: transparent;
}
.full-width-app .loading-container h1 {
  font-size: 520%;
  color: var(--loading-screen-text-color) !important;
  text-shadow: 4px 3px var(--loading-screen-text-shadow-color);
  margin-top: -1.4em;
  text-align: center;
}
.full-width-app .loading-screen h1,
.full-width-app .loading-screen h2,
.full-width-app .loading-screen h3,
.full-width-app .loading-screen h4,
.full-width-app .loading-screen h5,
.full-width-app .loading-screen h6,
.full-width-app .loading-screen p,
.full-width-app .loading-screen label {
  text-align: center;
}
.full-width-app .loading-badge {
  position: absolute;
  width: 70%;
  z-index: -1;
  margin-top: -10em;
}
.full-width-app .loading-ribbon {
  margin-top: 5em;
}

.cms-preview {
  max-width: 1700px;
  width: 100%;
  height: 100%;
  position: relative;
}
.cms-preview .background-1,
.cms-preview .background-2,
.cms-preview .background-3,
.cms-preview .background-4,
.cms-preview .background-5 {
  height: 100%;
  width: auto;
  position: absolute;
}
.cms-preview .container-centered {
  position: relative;
}
.cms-preview .popup-container, .cms-preview .floating-menu-container {
  position: relative;
}
.cms-preview .card, .cms-preview .floating-menu-container .floating-menu, .floating-menu-container .cms-preview .floating-menu {
  background-color: transparent;
  border: none;
}

/* REUSABLE DECORATIVE ELEMENTS */
.ribbon-container {
  background-image: url(/images/global/shapes/ribbon-bordered-yellow.svg);
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
}

/*Tape Accent*/
.tape {
  background-image: url(/images/global/shapes/tape.svg);
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  height: 15vh;
  width: 26vh;
  position: absolute;
  z-index: 3;
  top: -7vh;
  left: -3vw;
  filter: var(--decor-element-tape-color);
}
.tape-bottom {
  bottom: 7vh;
  right: 3vw;
}

/*Pamplet SVG on Tutorial */
.pamphlet {
  transition: all 0.3s linear;
  display: flex;
  margin: auto;
  justify-content: center;
}
.pamphlet img {
  max-height: 60vh;
  cursor: pointer;
}
.pamphlet.hover-action:hover {
  animation: pamphlet 1s ease-in-out infinite alternate;
  transform: scale(1.2);
}
@keyframes pamphlet {
  0% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(1.1) rotate(-6deg);
  }
}

/*Speech Bubble Container*/
.speech-bubble {
  background-image: url("/images/global/shapes/speech-bubble.svg");
  background-color: transparent !important;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  margin: -4vh 1vw 4vh;
  display: flex;
  text-align: center !important;
  align-content: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  padding: 2vh 2vw 2vh 4vw;
  width: -moz-fit-content;
  width: fit-content;
}

/*Stamp Decor*/
.stamps {
  z-index: -1;
}
.stamps-left {
  margin-left: -3rem;
  align-self: end;
}
.stamps-right {
  align-self: end;
}

/*Award Ribbon*/
.award-ribbon {
  background-image: url("/images/global/shapes/certificate-seal.png");
  background-size: contain;
  background-repeat: no-repeat;
  height: 18rem;
  width: 12rem;
  position: absolute;
  top: 1rem;
}

.certificate-border {
  position: relative;
}
.certificate-border .certificate-border-inner {
  background-image: linear-gradient(45deg, var(--neutral-400) 25%, transparent 25%, transparent 75%, var(--neutral-400) 75%, var(--neutral-400)), linear-gradient(-45deg, var(--neutral-400) 25%, transparent 25%, transparent 75%, var(--neutral-400) 75%, var(--neutral-400));
  background-size: 20px 20px;
  background-repeat: round round;
  background-position: -10px -10px;
  display: flex;
  padding: 0.6rem;
  flex-direction: row;
  flex-grow: 1;
}
.certificate-border .certificate-border-inner:after {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  background: var(--neutral-400);
  z-index: -1;
}

/*Owl header*/
.owl-header {
  background-image: url(/images/pages/invitation/letter-head.svg);
  height: 8rem;
  width: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  overflow: visible;
  background-size: contain;
}
@media screen and (max-height: 768px) {
  .owl-header {
    scale: 80%;
    margin-top: -1rem;
    margin-bottom: -2rem;
  }
}

.range-slider {
  width: 100%;
  /* The slider itself */
}
.range-slider .slider-bar {
  -webkit-appearance: none; /* Override default CSS styles */
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 12px;
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */ /* 0.2 seconds transition on hover */
  transition: opacity 0.2s;
  padding-right: 0px;
  padding-left: 0px;
  cursor: pointer;
  /* Mouse-over effects */
  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
}
.range-slider .slider-bar:hover {
  opacity: 1; /* Fully shown on mouse-over */
}
.range-slider .slider-bar:focus {
  box-shadow: 0 0 0 0.1rem rgba(90, 125, 89, 0.3294117647);
}
.range-slider .slider-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 15px;
  background: #50794A;
  cursor: pointer;
}
.range-slider .slider-bar::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 15px;
  background: #50794A;
  cursor: pointer;
}

/* Video Players */
.vimeo-video {
  display: flex;
  justify-content: start;
  margin: 5vh;
  position: relative;
  flex-grow: 1;
}
.vimeo-video iframe {
  position: relative !important;
  display: flex;
  flex-direction: row;
  justify-content: end;
}

/*_________Tag Picker Component_________*/
.tag-picker .tag-picker-menu {
  background-color: var(--white-color);
  border-radius: 1.8rem;
  border: 3px solid var(--dark-color);
  padding: 5px;
}
.tag-picker .removable-tag span {
  padding-right: 0 !important;
}
.tag-picker .removable-tag button {
  cursor: pointer;
  background: transparent;
  margin-right: 3px;
  padding: 0;
  border: none;
  border-radius: 3px;
}
.tag-picker .removable-tag button:hover {
  -webkit-backdrop-filter: brightness(125%);
          backdrop-filter: brightness(125%);
}
.tag-picker .removable-tag button i {
  font-size: 1rem;
}
.tag-picker .tag-collection.tag-list {
  scroll-behavior: smooth;
  overflow-y: auto;
  overflow-x: auto;
  max-height: 25vh;
}
.tag-picker .tag-collection.tag-list .tag-item {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 3px 0 3px 0;
}

/*_________Tag Items_________*/
.tag-collection .tag-item {
  display: inline-block;
  margin: 0 2px 3px 2px;
  border: 2px solid;
  border-radius: 10px;
  border-color: rgba(var(--r), var(--g), var(--b), var(--a));
  background: rgba(var(--r), var(--g), var(--b), 0.5);
}
.tag-collection .tag-item span {
  color: rgba(var(--r), var(--g), var(--b), var(--a));
  filter: brightness(60%);
  padding: 0 0.5rem 0 0.5rem;
}

/*style for virtual keyboard container div at bottom of screen*/
.keyboard-widget {
  margin: auto;
  width: -moz-fit-content;
  width: fit-content;
  align-content: center;
  background-color: #E6754B;
  border-radius: 10px 10px 0 0;
  margin-top: -20px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin-right: auto;
  margin-left: auto;
  animation: slide-out-bottom 0.4s ease-in-out;
  z-index: 1;
}
.keyboard-widget.expanded {
  margin-top: -10px;
  padding-bottom: 30px;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0px 20px 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: slide-in-bottom 0.4s ease-in-out;
}
.keyboard-widget .keyboard-icon i {
  font-size: 32px;
  margin: 10px;
}
.keyboard-widget .keyboard-container {
  width: 100%;
  padding: 0px 10px;
  margin-bottom: -5px;
}
.keyboard-widget .keyboard-container .keyboard-section {
  display: inline-block;
}
.keyboard-widget .keyboard-container .keyboard-section .keyboard-row {
  display: flex;
}
.keyboard-widget .keyboard-container .keyboard-section .keyboard-btn {
  height: 3rem;
  width: 3rem;
  font-size: 1.5rem;
  text-align: center;
  border-radius: 10px;
  box-shadow: none;
}
.keyboard-widget .keyboard-container .keyboard-section .keyboard-btn:hover {
  filter: brightness(0.75);
}
.keyboard-widget .keyboard-container .keyboard-section .keyboard-btn.lg {
  font-size: 2.5rem;
  line-height: 2rem;
}
.keyboard-widget .keyboard-container .keyboard-section .keyboard-btn.modifier-btn {
  background-color: #4a8897;
}
.keyboard-widget .keyboard-container .keyboard-section .keyboard-btn.modifier-btn .superscript {
  color: white;
}
.keyboard-widget .keyboard-container .keyboard-section .keyboard-btn .superscript {
  font-size: 0.7rem;
  width: 0.7rem;
  height: 0.7rem;
  position: relative;
  top: -6px;
  left: -10px;
  color: #5a7d59;
}
.keyboard-widget .keyboard-container .keyboard-section .keyboard-btn .key-text {
  position: relative;
  top: -10px;
}
.keyboard-widget .keyboard-container .keyboard-section .keyboard-btn.btn-primary .superscript {
  filter: brightness(1.5);
}
.keyboard-widget .keyboard-container .keyboard-section .keyboard-btn.disabled {
  cursor: default;
}
.keyboard-widget .keyboard-container .keyboard-section .keyboard-btn.disabled:hover {
  filter: none;
}
.keyboard-widget .keyboard-container .keyboard-section .keyboard-btn-round {
  margin: 0px 8px 5px 8px;
  height: 3rem;
  width: 3rem;
  line-height: 2rem;
  font-size: 2rem;
  text-align: center;
  cursor: pointer;
}
.keyboard-widget .keyboard-container .keyboard-section .keyboard-btn-round.lg {
  font-size: 3rem;
  line-height: 3rem;
  text-align: center;
}
.keyboard-widget .collapse-btn {
  margin-left: auto;
  margin-right: 0;
}
.keyboard-widget .collapse-btn i {
  font-size: 20px;
  padding: 0 10px 0 5px;
  font-weight: bold;
  color: #FFFFE2;
  text-shadow: 1px 1px 1px #ccc;
}

/* animation (fade) */
@keyframes fadeinout {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
/*_____________CONTENT INDEX_________________*/
.index-container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.index-container .content-toggles {
  padding: 0.5em;
}
.index-container .content-toggles .btn {
  margin: 0.5em;
}
.index-container .content-index ul.tree {
  --spacing: 1.5rem;
  --radius: 19px;
  margin-left: -2rem;
  margin-top: 1rem;
  font-family: gin, serif;
}
.index-container .content-index ul.tree ul,
.index-container .content-index ul.tree li,
.index-container .content-index ul.tree summary {
  padding-bottom: 0.5rem;
}
.index-container .content-index ul.tree li {
  display: block;
  position: relative;
  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}
.index-container .content-index ul.tree ul {
  margin-left: calc(var(--radius) - var(--spacing));
  padding-left: 0;
  list-style-type: none;
}
.index-container .content-index ul.tree ul li {
  border-left: 2px solid #ddd;
}
.index-container .content-index ul.tree ul li:last-child {
  border-color: transparent;
}
.index-container .content-index ul.tree ul li::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--spacing) / -4);
  left: -2px;
  width: calc(var(--spacing) + 3px);
  height: calc(var(--spacing) + 2px);
  border: solid #ddd;
  border-width: 0 0 2px 2px;
}
.index-container .content-index ul.tree summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  display: block;
  cursor: pointer;
}
.index-container .content-index ul.tree summary::marker, .index-container .content-index ul.tree summary::-webkit-details-marker {
  display: none;
}
.index-container .content-index ul.tree summary:focus {
  outline: none;
}
.index-container .content-index ul.tree summary:focus-visible {
  outline: 1px dotted #000;
}
.index-container .content-index ul.tree li span .badge,
.index-container .content-index ul.tree summary span .badge {
  display: block;
  position: absolute;
  top: calc(var(--spacing) / 2 - var(--radius) - 2.5);
  left: calc(var(--spacing) - var(--radius) - 1px);
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  padding: 9px;
  border-radius: 55%;
  font-weight: normal;
  z-index: 10;
  text-align: center;
}
.index-container .content-index ul.tree li span .badge.badge-course,
.index-container .content-index ul.tree summary span .badge.badge-course {
  background-color: rgb(83, 16, 16);
  color: white;
}
.index-container .content-index ul.tree li span .badge.badge-assignment,
.index-container .content-index ul.tree summary span .badge.badge-assignment {
  background-color: rgb(17, 56, 106);
  color: white;
}
.index-container .content-index ul.tree li span .badge.badge-module,
.index-container .content-index ul.tree summary span .badge.badge-module {
  background-color: rgb(73, 47, 91);
  color: white;
  /*for building blocks icons*/
  /*for cube icon */
  /*img,
  svg {
      width: 110%;
      margin-left: -0.1em;
      margin-top: -0.1em;
  }*/
}
.index-container .content-index ul.tree li span .badge.badge-module img,
.index-container .content-index ul.tree li span .badge.badge-module svg,
.index-container .content-index ul.tree summary span .badge.badge-module img,
.index-container .content-index ul.tree summary span .badge.badge-module svg {
  width: 130%;
  margin-left: -0.2em;
}
.index-container .content-index ul.tree li span .badge.badge-evaluation,
.index-container .content-index ul.tree summary span .badge.badge-evaluation {
  background-color: rgb(130, 54, 0);
  color: black;
}
.index-container .content-index ul.tree li span .badge.badge-lesson,
.index-container .content-index ul.tree summary span .badge.badge-lesson {
  background-color: rgb(0, 87, 97);
  color: white;
}
.index-container .content-index ul.tree li span .badge.badge-lesson img,
.index-container .content-index ul.tree li span .badge.badge-lesson svg,
.index-container .content-index ul.tree summary span .badge.badge-lesson img,
.index-container .content-index ul.tree summary span .badge.badge-lesson svg {
  width: 100%;
  margin-top: -0.2em;
  margin-left: 0em;
}
.index-container .content-index ul.tree li span .badge.badge-evaluation-section,
.index-container .content-index ul.tree summary span .badge.badge-evaluation-section {
  background-color: lightsalmon;
  color: black;
}
.index-container .content-index ul.tree li.nested-list {
  list-style-type: none;
}
.index-container .content-index ul.tree li.no-children-element {
  list-style-type: none;
  padding-bottom: 1rem;
}
.index-container .content-index ul.tree .badge-activity {
  background-color: #228b2f;
  color: white;
  display: block;
  position: absolute;
  top: calc(var(--spacing) / 2 - var(--radius));
  left: calc(var(--spacing) - var(--radius) - 2px);
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  padding: 9px;
  border-radius: 100%;
  font-weight: normal;
  margin-right: 0.5rem;
  z-index: 10;
  text-align: center;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 0.5rem;
}
.index-container .content-index ul.tree .badge-activity i {
  font-size: 100%;
}
.index-container .content-index ul.tree .badge-activity img,
.index-container .content-index ul.tree .badge-activity svg {
  width: 180%;
  margin-top: -0.5em;
  margin-left: -0.55em;
  filter: brightness(0) invert(100%) sepia(48%) saturate(2389%) hue-rotate(181deg) brightness(122%) contrast(100%);
}
.index-container .content-index ul.tree a,
.index-container .content-index ul.tree a.activity-link {
  padding-left: 1.5rem;
  margin-top: -5px;
  font-size: 1.3rem;
}
.index-container .content-index i {
  font-size: 1.2rem;
  color: var(--accent-color-10);
  margin-left: 0.2em;
}

/*_________ Styles for Class-related UI elements___________*/
.class-name-display {
  background-color: var(--accent-color-1);
  color: var(--white-color);
  border-radius: 6px;
  align-items: center;
  display: flex;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  z-index: 1;
}
.class-name-display text {
  font-size: 2rem !important;
}
.class-name-display i {
  font-size: 3rem !important;
  padding-bottom: 0.2rem;
}

.true-false-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.true-false-container .header-ribbon {
  margin: 1.25rem;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
}
.true-false-container .question-container {
  margin: 0;
  height: auto;
  min-height: 50%;
  max-height: 60%;
  width: 90%;
  border: 0px;
  align-items: normal;
}
.true-false-container .question-container .card-body {
  padding: 0;
}
.true-false-container .question-container .card-body .question-header {
  font-family: "Cubano", sans-serif;
  font-size: 1.6rem;
  color: var(--light-text-color);
  width: 100%;
  font-weight: 500;
  background-color: var(--info-color);
  padding: 1rem 1.25rem;
  border-radius: 0.8rem 0.8rem 0 0;
}
.true-false-container .question-container .card-body .question-text {
  padding: 1em;
  margin: 1rem;
  align-items: center;
  height: 100%;
  overflow-y: auto;
}
.true-false-container .question-container .card-body .question-text p {
  font-size: 1.6rem;
  height: -moz-fit-content;
  height: fit-content;
  max-height: 95%;
}

.restart-finish-activity {
  display: flex;
  flex-grow: 1;
}
.restart-finish-activity .card, .restart-finish-activity .floating-menu-container .floating-menu, .floating-menu-container .restart-finish-activity .floating-menu {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  padding: 1rem;
  max-width: 40vw;
  min-width: 30vw;
  z-index: 5;
  bottom: 0;
  max-height: 70vh;
  min-height: -moz-fit-content;
  min-height: fit-content;
  box-shadow: 5px 4px 0 1px var(--box-shadow-color-1);
}
.restart-finish-activity .card .header-ribbon, .restart-finish-activity .floating-menu-container .floating-menu .header-ribbon, .floating-menu-container .restart-finish-activity .floating-menu .header-ribbon {
  position: relative;
  top: -10px;
  width: auto;
}
.restart-finish-activity .card h2, .restart-finish-activity .floating-menu-container .floating-menu h2, .floating-menu-container .restart-finish-activity .floating-menu h2 {
  text-shadow: 4px 2px var(--primary-color-dark);
  font-size: 370%;
}

.activity-report {
  display: flex;
  flex-grow: 1;
}
.activity-report .card, .activity-report .floating-menu-container .floating-menu, .floating-menu-container .activity-report .floating-menu {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  padding: 1rem;
  max-width: 40vw;
  min-width: 30vw;
  z-index: 5;
  bottom: 0;
  max-height: 70vh;
  min-height: -moz-fit-content;
  min-height: fit-content;
  box-shadow: 5px 4px 0 1px #cb904a;
}
.activity-report .card .header-ribbon, .activity-report .floating-menu-container .floating-menu .header-ribbon, .floating-menu-container .activity-report .floating-menu .header-ribbon {
  position: relative;
  top: -10px;
  width: auto;
}
.activity-report .card h2, .activity-report .floating-menu-container .floating-menu h2, .floating-menu-container .activity-report .floating-menu h2 {
  text-shadow: 4px 2px #2c3840;
  font-size: 370%;
}
.activity-report .score-card {
  text-align: center;
  border-radius: 1rem;
  height: 10vw;
  width: 10vw;
  justify-content: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #FFFFE2;
}
.activity-report .score-card h3, .activity-report .score-card h4, .activity-report .score-card h5, .activity-report .score-card h6 {
  color: inherit;
}

.envelope-instructions {
  position: absolute;
  left: 50vw;
  transform: translate(-50%, -25%);
  top: 35vh;
  height: 22vw;
  width: 40vw;
  text-align: center;
}
.envelope-instructions .instructions-container {
  background-color: rgba(31, 41, 7, 0.6509803922);
  border-radius: 10px;
}
.envelope-instructions p {
  font-family: gin, serif;
  font-weight: normal;
  font-style: italic;
  font-size: 1.6rem;
}
@media (max-width: 991.98px) {
  .envelope-instructions {
    top: 28vh;
    height: 33vw;
    width: 60vw;
  }
  .envelope-instructions p {
    font-size: 1.4rem;
  }
}
.envelope-instructions.opened {
  opacity: 0;
  transition: opacity 1s 0.5s ease;
}

.envelope {
  position: absolute;
  top: 45vh;
  left: 50vw;
  transform: translate(-50%, -25%);
  height: 22vw;
  width: 40vw;
  cursor: pointer;
}
@media (max-width: 991.98px) {
  .envelope {
    top: 45vh;
    height: 33vw;
    width: 60vw;
  }
}
.envelope.opened {
  cursor: default;
}
.envelope .closed-flap {
  position: absolute;
  top: 0;
  z-index: 2;
  transform-origin: top;
  transform: rotateX(0deg);
  transition: transform 1s 1s ease, top 1s 1s;
  width: inherit;
}
.envelope .closed-flap img {
  width: inherit;
}
.envelope .closed-flap.opened {
  transform: rotateX(180deg);
  opacity: 0;
  transition: transform 1s 0.5s ease, opacity 0.6s 0.5s ease;
}
.envelope .open-flap {
  position: absolute;
  top: 0;
  opacity: 0;
  transform-origin: top;
  transition: transform 1s 1s ease;
  width: inherit;
}
.envelope .open-flap img {
  width: inherit;
}
.envelope .open-flap.opened {
  transform: rotateX(180deg);
  top: 10vh;
  transition: transform 1s 0.5s ease, top 2s 1.5s;
  animation: animateOpenFlapOpacity 2.5s;
}
.envelope .envelope-body {
  position: absolute;
  top: 0vh;
  z-index: 1;
  width: inherit;
  height: inherit;
  opacity: 1;
}
.envelope .envelope-body img {
  width: inherit;
}
.envelope .envelope-body.opened {
  opacity: 0;
  top: 10vh;
  transition: opacity 1s 1.5s ease, top 2s 1.5s;
  animation: fade-out 1s 1.5s;
}
.envelope .envelope-back {
  position: absolute;
  top: 0;
  background-color: #e3ce97;
  width: inherit;
  height: 50%;
}
.envelope .envelope-back.opened {
  opacity: 0;
  top: 10vh;
  transition: opacity 1s 1.5s ease, top 2s 1.5s;
  animation: fade-out 1s 1.5s;
}
@keyframes animateOpenFlapOpacity {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.7;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.letter-page {
  position: absolute;
  top: 0;
  width: inherit;
  height: inherit;
  z-index: 0;
  background-image: url(/images/pages/invitation/paper-canvas.svg);
  background-size: cover;
  background-repeat: no-repeat;
}
.letter-page.opened {
  top: -20vh;
  z-index: 3;
  transition: top 2s 1.5s ease, height 2.5s 1.5s ease, z-index 1s 4s;
}
.letter-page .letter-content {
  width: inherit;
  height: inherit;
  overflow-y: hidden;
}
.letter-page .letter-content.opened {
  height: 98%;
  width: inherit;
  margin-top: 1%;
}
.letter-page .letter-content .letter-head {
  width: 60%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.letter-page .letter-content .title {
  text-align: center;
  color: var(--danger-color);
}
.letter-page .letter-content .title.long {
  margin-top: -2vh;
  font-size: 2.5vw;
}
.letter-page .letter-content .greeting {
  text-align: left;
  color: var(--dark-color);
  font-family: fenway-park-jf, sans-serif;
  font-weight: 400;
  font-size: 2rem;
}
.letter-page .letter-content p {
  margin-left: 2vw;
  margin-right: 2vw;
  text-align: left;
  color: var(--dark-color);
  font-family: henderson-slab-basic, serif;
  font-size: 0.92rem;
  font-weight: 400;
}
.letter-page .letter-content .terms-and-conditions {
  overflow-y: auto;
  scroll-behavior: smooth;
  max-height: 20vh;
  background-color: #FFFFE2;
  border-radius: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.letter-page .letter-content .terms-and-conditions li {
  margin-left: 2vw;
  margin-right: 2vw;
  color: var(--dark-color);
  font-family: henderson-slab-basic, serif;
  font-size: 0.92rem;
  font-weight: 400;
}
.letter-page .letter-content .next-button {
  opacity: 0;
  float: right;
  margin-right: 10px;
  margin-bottom: 5px;
}
.letter-page .letter-content .next-button img {
  width: min(100px, 20vw);
}
.letter-page .letter-content .next-button.opened {
  opacity: 1;
  transition: opacity 1s 1.5s ease;
}

.close-letter-outer {
  position: absolute;
  right: 0;
  border: 0;
  margin: -10px -14px 0px 0px !important;
  z-index: 3;
}

.close-letter-inner {
  position: absolute;
  right: 0;
  border: 0;
  margin: 0px 0px 0px 0px !important;
  z-index: 3;
}

div.validation-messages {
  margin: 0.5rem 0;
}
div.validation-messages ul {
  margin: 0;
}
div.validation-messages ul > li {
  color: var(--danger-color);
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 1.5rem;
}

/* TUTORIAL & ONBOARDING AREAS */
.attention-arrow {
  transform: rotate(-25deg);
}

.wobble-hor-bottom, .stump:before {
  animation: wobble-ver-left 0.8s 2s both;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
}

/* ----------------------------------------------
* Generated by Animista on 2022-8-17 10:12:46
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation wobble-ver-left
 * ----------------------------------------
 */
@keyframes wobble-ver-left {
  0%, 100% {
    transform: translateY(0) rotate(0);
    transform-origin: 50% 50%;
  }
  5% {
    transform: translateY(-30px) rotate(-6deg);
  }
  10% {
    transform: translateY(15px) rotate(6deg);
  }
  15% {
    transform: translateY(-15px) rotate(-3.6deg);
  }
  20% {
    transform: translateY(9px) rotate(2.4deg);
  }
  25% {
    transform: translateY(-6px) rotate(-1.2deg);
  }
}
.stump {
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-attachment: fixed;
  isolation: isolate;
}
.stump .stump-bg {
  background-image: url("/images/pages/tutorial/book-stump-neutral.svg");
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 20vh;
  bottom: 0;
  left: 0;
  right: 0;
  background-attachment: fixed;
  transition: all 200ms ease-in-out;
}
.stump:before {
  content: " ";
  height: 28vh;
  width: 27vh;
  background-image: url(/images/global/shapes/arrow-orange.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  transform: none;
  top: 16vh;
  left: 43vw;
  z-index: 2;
}

.travel-guide {
  position: absolute;
  height: 14vh;
  width: 20vh;
  top: 43vh;
  left: 50.5vw;
  transform: skew(300deg, 18deg);
  z-index: 2;
  cursor: pointer;
}
.travel-guide:hover ~ .stump-bg {
  background-image: url("/images/pages/tutorial/book-stump-hover-guide.svg");
}

.trail-map {
  position: absolute;
  height: 18vh;
  width: 41vh;
  top: 47vh;
  left: 48.5vw;
  transform: skew(129deg, 207deg) rotate(172deg);
  z-index: 1;
  cursor: pointer;
}

.attention-arrow {
  transform: rotate(-25deg);
}

.wobble-hor-bottom, .stump:before {
  animation: wobble-ver-left 0.8s 2s both;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
}

/* ----------------------------------------------
* Generated by Animista on 2022-8-17 10:12:46
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
 * ----------------------------------------
 * animation wobble-ver-left
 * ----------------------------------------
 */
@keyframes wobble-ver-left {
  0%, 100% {
    transform: translateY(0) rotate(0);
    transform-origin: 50% 50%;
  }
  5% {
    transform: translateY(-30px) rotate(-6deg);
  }
  10% {
    transform: translateY(15px) rotate(6deg);
  }
  15% {
    transform: translateY(-15px) rotate(-3.6deg);
  }
  20% {
    transform: translateY(9px) rotate(2.4deg);
  }
  25% {
    transform: translateY(-6px) rotate(-1.2deg);
  }
}
/*_____________BASKET GAME STYLES_________________*/
/*make flashcards smaller for basket game*/
.basket-game .flashcard {
  margin-right: 1em;
  margin-left: 1em;
}

.flashcard.basket-card {
  height: 14em;
  width: 11em;
}

.basket-container {
  background-image: url("/images/pages/basket-game/basket-birch-wide.svg");
  width: 13vw;
  height: 10vw;
  background-repeat: no-repeat;
  background-position: center;
  margin: auto;
  flex-grow: 1;
}

.cards-row {
  display: flex;
  flex: 2;
  width: 80%;
  justify-content: center;
}

.basket-row {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  width: 68vw;
  align-content: space-around;
  justify-content: space-around;
}
@media (max-width: 1499.98px) {
  .basket-row {
    max-width: 60vw;
  }
}
.basket-row .drop-container {
  display: flex;
  flex-direction: column;
}

.basket-label {
  color: #ffffd6;
  text-shadow: 5px 4px #C9581F;
  z-index: 1;
  width: 80%;
  margin-left: auto;
  text-align: center;
  vertical-align: middle;
  height: 100%;
  font-family: "cubano";
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  font-size: 3vw;
}
@media (max-width: 1499.98px) {
  .basket-label {
    font-size: 180%;
  }
}
.basket-label p {
  font-size: 2vw;
  align-self: center;
  position: relative;
  top: 1.2em;
  left: 0.75em;
  z-index: 1;
  font-family: "cubano";
  color: #ffffd6;
  text-shadow: 5px 4px #C9581F;
}

/*_____________MATCH ACTIVITY STYLES_________________*/
.drop-area-text {
  font-size: 400%;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 1vh;
  height: 2em;
  line-height: 1.7em;
  color: var(--light-text-color);
  transition: 0.2s all;
}
.drop-area-text.alert.alert-secondary:before {
  background-image: var(--match-activity-dropspot-image-path);
  background-repeat: no-repeat;
  background-position-y: top;
  content: "";
  position: absolute;
  height: clamp(65px, 3.2vw, 90px);
  width: clamp(120px, 4vw, 160px);
  top: -20px;
  left: -50px;
  transform: rotate(-15deg);
}
.drop-area-text.alert.alert-secondary:hover {
  box-shadow: 1px 1px 9px 5px var(--match-activity-highlighter-color);
  background-color: var(--match-activity-highlighter-color);
}

.flex-column .drop-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flex-column .drop-container .drop-area-text {
  height: -moz-fit-content;
  height: fit-content;
  margin: max(2vh, 20px);
}

.flex-row .drop-container {
  display: flex;
  flex-direction: row;
  align-content: center;
}

/*_____________WORD BLANKS ACTIVITY STYLES_________________*/
.fill-blanks {
  font-size: 2.8rem;
  line-height: 1.5;
  color: #001B31;
  background-color: var(--fill-blanks-container-color);
  padding: 2rem 1rem 1rem;
  border-radius: 0.8rem;
}
.fill-blanks .word-blank-input {
  background-color: var(--fill-blanks-container-color);
  border: none;
  padding: 0;
  text-align: left;
  outline: none;
  letter-spacing: 0.39em;
  border-radius: 0.2em;
  padding-left: 0.45em;
  font-family: monospace;
  padding-top: 3px;
  color: var(--fill-blanks-input-text-color);
  font-size: inherit;
  height: inherit;
  display: inherit;
  margin-right: inherit;
}
.fill-blanks .blank-word {
  display: inline-flex;
  margin-left: 1rem;
  margin-right: 1rem;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-max-content;
  width: max-content;
}
.fill-blanks .dash-line {
  border-bottom: none;
  border-left: none;
  border-right: none;
  border-top: 3px solid var(--fill-blanks-input-dashes-color);
  outline: none;
  width: 0.9em;
  float: right;
  margin: 5px 2px 0 2px;
  position: relative;
  top: 0px;
}
.fill-blanks .dash-line-label {
  color: var(--fill-blanks-input-dashes-color);
  text-align: center;
  margin-top: 2px;
  width: 100%;
  line-height: 1em;
  font-family: "cubano";
}
.fill-blanks .label-container {
  width: 100%;
}
.fill-blanks label.letters {
  margin: 0rem 0.2rem;
  font-size: inherit !important;
}
.fill-blanks label.dash-line-label {
  font-size: inherit !important;
}
.fill-blanks textarea {
  background-color: var(--fill-blanks-input-background-color);
  border: none;
  border-radius: 0.5rem;
  margin-top: 5px;
  outline: transparent !important;
}

.cms-preview {
  scale: 75%;
  height: 75vh;
}

.card-preview-row {
  max-width: 100%;
}
.card-preview-row .card-preview {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.card-preview-row .card-preview .card-preview-description {
  margin-left: -10px;
  margin-top: 1rem;
  margin-bottom: 2rem;
  max-width: 50%;
}
.card-preview-row .card-preview .card-preview-image {
  margin-left: -1rem;
  margin-top: -1rem;
}
.card-preview-row .card-preview .card-preview-image .flashcard {
  transform: scale(0.8);
  margin: 0;
}

.multiple-choice-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  min-width: 100%;
}
.multiple-choice-container .card-body {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  border-radius: 0.8rem;
  padding: 0.5rem 1.25rem 0.5rem 1.25rem;
}
.multiple-choice-container p, .multiple-choice-container h6, .multiple-choice-container label {
  color: var(--black-text-color);
}
.full-width-app .multiple-choice-container input[type=checkbox] {
  position: relative;
  top: -0.8rem;
}
.full-width-app .multiple-choice-container input[type=checkbox]:after {
  position: relative;
  top: 1.5rem;
}
.multiple-choice-container .question-container {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  width: 70%;
  min-width: 300px;
  background-color: var(--multiple-choice-container-color);
  border-color: transparent;
  border-radius: 0.8rem;
  margin-top: 1.5rem;
  max-height: 26vh;
  min-height: 15vh;
}
.multiple-choice-container .question-container .card-body {
  display: flex;
  align-items: center;
  justify-content: center;
}
.multiple-choice-container .interaction-container {
  display: flex;
  flex-direction: row;
  height: 60vh;
  width: 100%;
}
.multiple-choice-container .interaction-container .options-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-width: 300px;
  background-color: var(--multiple-choice-options-container-color);
  border-color: transparent;
  margin-top: 1.5rem;
  border-radius: 0.8rem;
  max-height: 90%;
}
.multiple-choice-container .interaction-container .options-container .multiple-choice-option {
  display: flex;
  justify-content: flex-start;
  background-color: var(--multiple-choice-options-item-color);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  padding: 0.8rem 1.4rem;
  border-radius: 0.1rem;
  cursor: pointer;
  width: 100%;
}
.multiple-choice-container .interaction-container .options-container .multiple-choice-option label, .multiple-choice-container .interaction-container .options-container .multiple-choice-option p {
  flex-grow: 1;
  text-align: center;
  cursor: pointer;
  font-weight: 500;
  margin: auto;
}
.multiple-choice-container .interaction-container .options-container .multiple-choice-option:hover {
  background-color: var(--multiple-choice-option-hover-color);
}
.multiple-choice-container .interaction-container .options-container .multiple-choice-option.active {
  background-color: var(--multiple-choice-option-active-color);
}
.multiple-choice-container .interaction-container .options-container .multiple-choice-option.active label, .multiple-choice-container .interaction-container .options-container .multiple-choice-option.active p {
  color: var(--multiple-choice-option-active-text-color);
}
.multiple-choice-container .interaction-container .options-container .multiple-choice-option.correct {
  background-color: var(--multiple-choice-option-correct-color);
}
.multiple-choice-container .interaction-container .options-container .multiple-choice-option.correct label, .multiple-choice-container .interaction-container .options-container .multiple-choice-option.correct p {
  color: var(--multiple-choice-option-correct-text-color);
}
.multiple-choice-container .interaction-container .options-container .multiple-choice-option.wrong {
  background-color: var(--multiple-choice-option-wrong-color);
}
.multiple-choice-container .interaction-container .options-container .multiple-choice-option.wrong label, .multiple-choice-container .interaction-container .options-container .multiple-choice-option.wrong p {
  color: var(--multiple-choice-option-wrong-text-color);
}
.multiple-choice-container .interaction-container .buttons-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 95%;
}

/*_____________CONJUGATOR STYLES_________________*/
.step-selection-container {
  margin-right: min(4vw, 40px) !important;
  margin-left: min(4vw, 40px) !important;
  margin-bottom: min(4vw, 40px) !important;
}

.table-header {
  vertical-align: middle;
  text-align: center;
}

.table-pill-conjugation {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.popular-verb-container {
  gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.conjugator-footer {
  min-width: 100%;
  position: absolute;
  height: -moz-fit-content;
  height: fit-content;
  bottom: 0;
  left: 0;
}

.conjugator-container {
  min-height: 100%;
}

.conjugator-content {
  padding-bottom: 10vh;
}

.word-search-container .word-search-line {
  display: flex;
}
.word-search-container .word-search-line .word-search-cell {
  font-family: "Courier New", Courier, monospace;
  font-weight: 500;
  font-size: 1.4rem;
  text-align: center;
  height: 1.85rem;
  width: 1.85rem;
  cursor: pointer;
}
.word-search-container .word-search-line .word-search-cell.correct {
  background-color: var(--accent-color-6-light);
}
.word-search-container .word-search-line .word-search-cell.highlighted {
  background-color: var(--yellow-background-color);
}
.word-search-container .word-search-line .word-search-cell.overlapped-states {
  background-color: color-mix(in srgb, var(--success-color-light) 50%, var(--yellow-background-color) 50%);
}
.word-search-container .word-search-line .word-search-cell.hinted {
  background-color: var(--accent-color-1);
}
.word-search-container .word-search-line .word-search-cell.default {
  background-color: var(--white-color);
}

.anagram-container {
  display: flex;
}
.anagram-container .anagram-display {
  display: grid;
  grid-template-columns: max-content;
  grid-gap: 1rem;
  margin-right: 2rem;
}
.anagram-container .anagram-display:has(.anagram-item-display:nth-child(n+6)) {
  grid-template-columns: repeat(2, max-content);
}
.anagram-container .anagram-display .anagram-item-display {
  padding: 1rem;
  border: thin solid black;
  border-radius: 5%;
  background-color: var(--disabled-color-dark);
}
.anagram-container .anagram-display .anagram-item-display.focused {
  background-color: #00AFFF;
}
.anagram-container .anagram-display .anagram-item-display.completed {
  background-color: var(--accent-color-6-light);
}
.anagram-container .anagram-display .anagram-item-display.completed-with-solution {
  background-color: var(--accent-color-2);
}
.anagram-container .anagram-display .anagram-item-display .anagram-item {
  display: flex;
  justify-content: center;
}
.anagram-container .anagram-display .anagram-item-display .anagram-item span {
  font-family: "Courier New", Courier, monospace;
  font-weight: 500;
  font-size: 1.4rem;
  text-align: center;
  background-color: var(--white-color);
  border: thin solid black;
  border-radius: 10%;
  padding: 0 0.2rem;
}
.anagram-container .anagram-display .anagram-item-display .anagram-item span.disabled {
  background-color: var(--disabled-color);
}
.anagram-container .anagram-display .anagram-item-display .anagram-item span.hinted {
  background-color: #77b8d2;
}
.anagram-container .anagram-display .anagram-item-display .anagram-item span.completed {
  background-color: var(--accent-color-6-muted);
}
.anagram-container .anagram-display .anagram-item-display .anagram-item span.completed-with-solution {
  background-color: var(--accent-color-1-medium);
}
.anagram-container .anagram-button-container {
  align-self: center;
  width: 10rem;
}
.anagram-container .anagram-button-container .anagram-button {
  display: flex;
  justify-content: center;
  margin-top: 0.2rem;
}
.anagram-container .anagram-image-hint {
  align-self: center;
  width: 20rem;
  height: 20rem;
}
.anagram-container .anagram-image-hint img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.default-content-progress {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0.5rem;
  border-radius: 50px;
}
.default-content-progress .badge {
  height: 1.4rem;
  font-size: 1rem;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.default-content-progress .badge .course-title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 25vw;
  display: inline-block;
  vertical-align: middle;
}
.default-content-progress .badge .default-class-name {
  color: #FFFFE2;
  text-align: start;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 25vw;
}
.default-content-progress .progress {
  height: 1.4rem;
  border-radius: 10rem;
  position: relative;
  margin-right: 1rem;
  margin-left: 0.1rem;
  margin-top: 0.5rem;
  width: 50%;
}
.default-content-progress .progress-bar {
  background-color: var(--progress-bar-filled-area-color);
  color: var(--primary-color);
}
.default-content-progress .progress-bar span {
  padding-left: 10px;
  font-size: 1rem;
}

/*________________________SUNSET THEME________________________*/
/* Fonts */
/*__________Color__________*/
.sunset-theme, body:has(.sunset-theme) {
  --core-color: #302f2d;
  --core-color-medium: #434c2b;
  --core-color-dark: #3a4225;
  --primary-color-light: #f5b642;
  --primary-color: #F2A413;
  --primary-color-dark: #e99b0c;
  --primary-color-darker: #aa7109;
  --secondary-color: #D91122;
  --secondary-color-medium: hsl(2, 60%, 44%);
  --secondary-color-dark: hsl(2, 60%, 40%);
  --black-color: #000;
  --white-color: #FFF;
  --radial-nav-color:#d56707 ;
  --radial-nav-color-dark:#bc5b06 ;
  --accent-color-1: #F05123;
  --accent-color-1-medium: #e46e07;
  --accent-color-1-dark: #d56707;
  --accent-color-2: #d81f27;
  --accent-color-2-medium: #c01b24;
  --accent-color-2-dark: #b31921;
  --accent-color-3: #6C682F;
  --accent-color-4: #FCD773;
  --accent-color-6: #65b150;
  --accent-color-6-medium: #5b874f;
  --accent-color-6-dark: #4c863c;
  --accent-color-7: #F2A413;
  --accent-color-7-light: #ffda75;
  --accent-color-8: #bc6d00;
  --accent-color-9: #466eb4;
  --neutral-100: #FFFFFF;
  --neutral-200: #FFFFD6;
  --neutral-300: #F5F1C7;
  --neutral-400: #E3CE97;
  /*Shadows and transparent*/
  /* Table Elements*/
  /*Selectable Lists*/
  --warning-color: var(--secondary-color);
  --warning-color-medium: var(--secondary-color-medium);
  --warning-color-dark: var(--secondary-color-dark);
  --mild-danger-color: var(--accent-color-1);
  --mild-danger-color-medium: var(--accent-color-1-medium);
  --mild-danger-color-dark: var(--accent-color-1-dark);
  --danger-color: var(--accent-color-2);
  --danger-color-medium: var(--accent-color-2-medium);
  --danger-color-dark: var(--accent-color-2-dark);
  --success-color: var(--accent-color-6);
  --success-color-medium: var(--accent-color-6-medium);
  --success-color-dark: var(--accent-color-6-dark);
  --super-success-color: #3a7441;
  --super-success-color-medium: hsl(127, 33%, 28%);
  --super-success-color-dark: #3a7441;
  --info-color: var(--primary-color);
  --light-color: var(--accent-color-1);
  --dark-color: var(--core-color);
  --dark-color-dark: var(--core-color-medium);
  /*Background-colors*/
  --light-background-color: var(--neutral-200);
  --light-background-color-darker: var(--neutral-300);
  --dark-background-color: var(--core-color);
  --black-background-color: var(--black-color);
  --olive-background-color: var(--accent-color-1);
  --olive-1-background-color: var(--primary-color);
  --olive-2-background-color: var(--accent-color-1-dark);
  --olive-2-background-color: var(--accent-color-1-dark);
  /*text colors*/
  --light-text-color: var(--neutral-000);
  --dark-text-color: var(--core-color);
  --black-text-color: var(--black-color);
  --light-pink-text-color: var(--accent-color-4);
  --white-text-color: var(--neutral-000);
  --light-alternate-text-color: var(--dark-text-color);
  --muted-text-color: var(--accent-color-10);
  --link-color: var(--accent-color-10);
  --heading-font-color: var(--black-text-color);
  --body-font-color: var(--black-text-color);
  --body-font-color-light: var(--primary-color-medium);
  --visual-link-color: var(--accent-color-11);
  /*--multi-selects*/
  /*Date Picker*/
  /*Main App Menu*/
  --radial-menu-background-color: var(--radial-nav-color);
  --radial-menu-background-color-hover: var(--radial-nav-color);
  --radial-menu-notification-background-color: #ff5600;
  --radial-menu-text-color: var(--light-text-color);
  --radial-menu-shadow-color-hover: var(--default-drop-shadow-color);
  /*Start Menu*/
  /*Profile*/
  /*Core UI*/
  --global-background-color: var(--dark-color);
  --scroll-bar-container-color: var(--white-color);
  --scroll-bar-color: var(--primary-color);
  --header-row-color: #c8c8c8;
  /*Notification Hub*/
  /*Avatar*/
  /*Loading*/
  /*Tiles*/
  /*Modals*/
  --blazor-modal-background-color: var(--light-background-color);
  --blazor-modal-box-shadow-color: var(--accent-color-1-dark);
  --blazor-close-btn-color: var(--accent-color-1-dark);
  --blazor-modal-header-image-path: url("/images/global/headers/header-retro-yellow-sunset.svg");
  --blazor-modal-header-color: var(--dark-text-color);
  --modal-close-btn-color: var(--radial-nav-color);
  --modal-close-btn-color-hover: var(--radial-nav-color-dark);
  --modal-open-btn-color: var(--radial-nav-color);
  --modal-open-btn-color-hover: var(--radial-nav-color-dark);
  /*Progress Components*/
  --timer-background-color: var(--light-background-color-darker);
  --card-counter-background-image-path: url(/images/pages/flashcards/flashcards-ribbon-lrg.svg);
  --card-counter-text-color: var(--dark-color);
  --progress-bar-container-background-color: var(--light-background-color);
  --progress-bar-inner-background-color: var(--neutral-300);
  --progress-bar-text-color: var(--accent-color-1);
  --progress-bar-shadow-color: var(--box-shadow-color-4);
  --progress-bar-filled-area-color: #beca59;
  --progress-bar-filled-area-text-color: var(--dark-text-color);
  --progress-bar-icon-color: var(--accent-color-1);
  --progress-bar-icon-border-color: var(--accent-color-1);
  /*Toasts*/
  --toast-default-text-color: var(--black-text-color);
  --toast-info-background-color: var(--accent-color-4);
  --toast-info-text-color: var(--black-text-color);
  --toast-success-background-color: var(--success-color);
  --toast-success-text-color: var(--white-text-color);
  --toast-warning-background-color: var(--info-color);
  --toast-warning-text-color: var(--dark-color);
  --toast-danger-background-color: var(--danger-color);
  --toast-danger-text-color: var(--white-text-color);
  /*Alerts*/
  --alert-default-text-color: var(--white-text-color);
  --alert-primary-text-color: var(--accent-color-7-light);
  --alert-primary-image-path: url("/images/global/headers/header-retro-yellow-sunset.svg");
  --alert-info-text-color: var(--white-text-color);
  --alert-info-image-path: url("/images/global/headers/header-yellow-sunset.svg");
  --alert-success-text-color: var(--white-text-color);
  --alert-success-image-path: url("/images/global/headers/header-yellow-sunset.svg");
  --alert-warning-text-color: var(--dark-color);
  --alert-warning-image-path: url("/images/global/headers/header-retro-yellow-sunset.svg");
  --alert-danger-text-color: var(--black-text-color);
  --alert-danger-image-path: url("/images/global/headers/header-retro-red.svg");
  --alert-danger-text-color: var(--black-text-color);
  --alert-danger-image-path: url("/images/global/headers/header-retro-red.svg");
  --alert-secondary-text-color: var(--black-text-color);
  --alert-secondary-image-path: url("/images/global/headers/header-retro-yellow-sunset.svg");
  --alert-light-text-color: var(--dark-text-color);
  --alert-light-image-path: url("/images/global/headers/header-retro-light.svg");
  /*Badges & Pills*/
  --badge-primary-background-color: var(--core-color);
  --badge-primary-text-color: var(--light-text-color);
  --badge-secondary-background-color: var(--accent-color-1);
  --badge-secondary-text-color: var(--light-text-color);
  --badge-success-background-color: var(--success-color);
  --badge-success-text-color: var(--light-text-color);
  --badge-warning-background-color: var(--primary-color);
  --badge-warning-text-color: var(--light-text-color);
  --badge-danger-background-color: var(--success-color);
  --badge-danger-text-color: var(--light-text-color);
  --badge-info-background-color: var(--info-color);
  --badge-info-text-color: var(--light-text-color);
  --badge-light-background-color: var(--light-color);
  --badge-light-text-color: var(--dark-color);
  --badge-dark-background-color: var(--black-color);
  --badge-dark-text-color: var(--light-text-color);
  /*Forms*/
  --checkbox-color: var(--mild-danger-color)

  /*Borders*/
  --dotted-line-header-row-color: var(--neutral-400);
  /*Help Menu*/
  --vertical-tabs-background-color: var(--dark-background-color);
  /*Tabs*/
  --tab-active-color: var(--accent-color-1-dark);
  --tab-text-color: var(--black-text-color);
  --tabs-default-link-color: RGB(var(--accent-color-12-rgb-value));
  --tabs-default-link-hover: var(--accent-color-12-dark);
  --tabs-default-active-color: RGB(var(--accent-color-1-dark-rgb-value));
  --tabs-default-active-hover-color: var(--accent-color-12-light)
  --tabs-default-text-color: var(--black-text-color);
  --animated-tabs-background-color: var(--neutral-100);
  --animated-tabs-active-color: var(--secondary-color);
  /*Module Map*/
  --module-popover-background-color: var(--primary-color);
  --module-popover-shadow-color: var(--primary-color-darker);
  --module-popover-heading-color: var(--black-text-color);
  /*lesson popover descriptions*/
  --lesson-popover-background-color: var(--primary-color);
  --lesson-popover-shadow-color: var(--primary-color-darker);
  /*Lessons*/
  --lesson-default-border-color: var(--primary-color-dark);
  --lesson-optional-border-color: var(--accent-color-8);
  --lesson-inprogress-border-color: var(--accent-color-3);
  --lesson-completed-border-color: var(--success-color);
  --lesson-completed-highlight-color: var(--accent-color-4);
  --lesson-shadow-color: #be000040;
  /*Activities menu*/
  --activity-complete-checkmark-color: var(--accent-color-4);
  --activity-icon-frame-color: var(--primary-color);
  --activity-icon-background-color: var(--light-background-color-darker);
  --activity-menu-ribbon-image-neutral: url(/images/levels/activities/activity-ribbon-neutral-sunset.svg);
  --activity-menu-ribbon-image-hover: url(/images/levels/activities/activity-ribbon-hover-sunset.svg);
  /*Images*/
  /*Background Image Replacements*/
  --background-1-image-path-md: url("/images/global/backgrounds/bg-texture-lines-dark-1000.png");
  --background-1-image-path-lg: url("/images/global/backgrounds/bg-texture-lines-dark-1000.png");
  --background-1-image-path-xl: url("/images/global/backgrounds/bg-texture-lines-dark.svg");
  --background-2-image-path-md: url("/css/scss/themes/theme-images/wtg-bg-2.svg");
  --background-2-image-path-lg: url("/css/scss/themes/theme-images/wtg-bg-2.svg");
  --background-2-image-path-xl: url("/css/scss/themes/theme-images/wtg-bg-2.svg");
  --background-3-image-path-md: url("/images/global/backgrounds/bg-texture-basketweave-dark-1000.png");
  --background-3-image-path-lg: url("/images/global/backgrounds/bg-texture-basketweave-dark-1000.png");
  --background-3-image-path-xl: url("/images/global/backgrounds/bg-texture-basketweave-dark.svg");
  --background-4-image-path: url("/images/global/backgrounds/bg-campsite-animated-wtg.svg");
  --background-5-image-path-md: url("/images/global/backgrounds/bg-mountains-road-1440x607.png");
  --background-5-image-path-lg: url("/images/global/backgrounds/bg-mountains-road-1920x929.png");
  --background-5-image-path-xl: url("/images/global/backgrounds/bg-mountains-road-2500x1406.png");
  --background-5-image-path-xxl: url("/images/global/backgrounds/bg-mountains-road-bg-mountains-road.svg");
  --background-6-image-path-md: url("/images/global/backgrounds/bg-forest-olive.png");
  --background-6-image-path-short: url("/images/global/backgrounds/bg-forest-olive-1440x607.png");
  --background-6-image-path-lg: url("/images/global/backgrounds/bg-forest-olive-1920x929.png");
  --background-6-image-path-xl: url("/images/global/backgrounds/bg-forest-olive-2500x1406.png");
  --background-6-image-path-xxl: url("/images/global/backgrounds/bg-forest-olive.png");
  --background-7-image-path-md: url("/images/global/backgrounds/bg-mountain-forest-1920x929.png");
  --background-7-image-path-short: url("/images/global/backgrounds/bg-mountain-forest-1440x607.png");
  --background-7-image-path-lg: url("/images/global/backgrounds/bg-mountain-forest-2500x1406.png");
  --background-7-image-path-xl: url("/images/global/backgrounds/bg-mountain-forest.png");
  --background-9a-image-path: url("/images/pages/tutorial/bg-camp-closeup-complete-29052023.svg");
  --background-9b-image-path: url("/images/pages/tutorial/bg-camp-closeup-empty.svg");
  /*Headers*/
  --header-ribbon-default-path: url("/images/global/headers/header-ribbon-yellow-sunset.svg");
  --header-ribbon-mustard-image-path: url("/images/global/headers/header-ribbon-yellow-sunset.svg");
  --header-ribbon-mustard-text-color: var(--black-text-color);
  --header-ribbon-olive-image-path: url("/images/global/headers/header-ribbon-orange-sunset.svg");
  --header-ribbon-olive-text-color: var(--black-text-color);
  --header-ribbon-double-left-image-path: url("/images/global/headers/header-ribbon-left-yellow-sunset.svg");
  --header-ribbon-double-right-image-path: url("/images/global/headers/header-ribbon-right-yellow-sunset.svg");
  --header-ribbon-olive-image-path: url("/images/global/headers/header-ribbon-yellow-sunset.svg");
  --header-ribbon-double-left-olive-image-path: url("/images/global/headers/header-ribbon-left-yellow-sunset.svg");
  --header-ribbon-double-right-olive-image-path: url("/images/global/headers/header-ribbon-right-yellow-sunset.svg");
  --header-ribbon-blue-image-path: url("/images/global/headers/header-ribbon-yellow-sunset.svg");
  --header-retro-secondary-image-path: url("/images/global/headers/header-retro-yellow-sunset.svg");
  /*Flashcards*/
  --flashcard-touch-highlight-color: var(--accent-color-4);
  --flashcard-border-color: var(--accent-color-1-dark);
  --decor-element-tape-color: brightness(100%) sepia(1) hue-rotate(2deg) saturate(300%);
  /*Content Layouts*/
  /*Background Replacements*/
  /*Module Icon Replacement*/
  /*Lesson Icon Replacement*/
  /* True/False Customizations*/
  /*Buttons*/
}
.sunset-theme .header-ribbon.double-ribbon-left h1, body:has(.sunset-theme) .header-ribbon.double-ribbon-left h1 {
  color: var(--dark-color);
}
.sunset-theme .activity-item-body p.flex-grow-1, body:has(.sunset-theme) .activity-item-body p.flex-grow-1 {
  color: var(--dark-text-color) !important;
}
.sunset-theme .slide-card.card, .sunset-theme .floating-menu-container .slide-card.floating-menu, .floating-menu-container .sunset-theme .slide-card.floating-menu, body:has(.sunset-theme) .slide-card.card, body:has(.sunset-theme) .floating-menu-container .slide-card.floating-menu, .floating-menu-container body:has(.sunset-theme) .slide-card.floating-menu {
  height: 90vh;
  width: 80vw;
  overflow: hidden;
  background-color: var(--black-color) !important;
}
@media screen and (max-height: 768px) {
  .sunset-theme .slide-card.card, .sunset-theme .floating-menu-container .slide-card.floating-menu, .floating-menu-container .sunset-theme .slide-card.floating-menu, body:has(.sunset-theme) .slide-card.card, body:has(.sunset-theme) .floating-menu-container .slide-card.floating-menu, .floating-menu-container body:has(.sunset-theme) .slide-card.floating-menu {
    width: 78vw !important;
  }
}
@media (max-width: 991.98px) {
  .sunset-theme .slide-card.card, .sunset-theme .floating-menu-container .slide-card.floating-menu, .floating-menu-container .sunset-theme .slide-card.floating-menu, body:has(.sunset-theme) .slide-card.card, body:has(.sunset-theme) .floating-menu-container .slide-card.floating-menu, .floating-menu-container body:has(.sunset-theme) .slide-card.floating-menu {
    width: 76vw !important;
  }
}
.sunset-theme .slide-card .card-body .scroll-box, body:has(.sunset-theme) .slide-card .card-body .scroll-box {
  max-height: 800px !important;
  height: 100vh;
}
@media (min-width: 1200px) {
  .sunset-theme .slide-card .card-body .scroll-box, body:has(.sunset-theme) .slide-card .card-body .scroll-box {
    max-height: 1000px !important;
  }
}
@media (min-width: 1500px) {
  .sunset-theme .slide-card .card-body .scroll-box, body:has(.sunset-theme) .slide-card .card-body .scroll-box {
    max-height: 100% !important;
  }
}
.sunset-theme .slide-card .scroll-box, body:has(.sunset-theme) .slide-card .scroll-box {
  position: relative;
  overflow-x: hidden;
  padding: 0;
  isolation: isolate;
  margin-bottom: 0 !important;
  overflow-y: auto;
}
.sunset-theme .slide-card .card-body, body:has(.sunset-theme) .slide-card .card-body {
  height: 100%;
  padding: 0;
}
.sunset-theme .slide-card .card-body .dotted-line, .sunset-theme .slide-card .card-body .full-width-app hr, .full-width-app .sunset-theme .slide-card .card-body hr,
.sunset-theme .slide-card .card-body .cms-preview hr,
.cms-preview .sunset-theme .slide-card .card-body hr,
.sunset-theme .slide-card .card-body .login-form hr,
.login-form .sunset-theme .slide-card .card-body hr, .sunset-theme .slide-card .card-body .cms-layout hr, .cms-layout .sunset-theme .slide-card .card-body hr, .sunset-theme .slide-card .card-body .jumbotron hr, .jumbotron .sunset-theme .slide-card .card-body hr, body:has(.sunset-theme) .slide-card .card-body .dotted-line, body:has(.sunset-theme) .slide-card .card-body .full-width-app hr, .full-width-app body:has(.sunset-theme) .slide-card .card-body hr,
body:has(.sunset-theme) .slide-card .card-body .cms-preview hr,
.cms-preview body:has(.sunset-theme) .slide-card .card-body hr,
body:has(.sunset-theme) .slide-card .card-body .login-form hr,
.login-form body:has(.sunset-theme) .slide-card .card-body hr, body:has(.sunset-theme) .slide-card .card-body .cms-layout hr, .cms-layout body:has(.sunset-theme) .slide-card .card-body hr, body:has(.sunset-theme) .slide-card .card-body .jumbotron hr, .jumbotron body:has(.sunset-theme) .slide-card .card-body hr {
  display: none;
}
.sunset-theme .slide-nav, body:has(.sunset-theme) .slide-nav {
  margin-left: 3rem;
}
.sunset-theme .slide-nav button, body:has(.sunset-theme) .slide-nav button {
  margin-right: 1rem;
  margin-bottom: 1rem;
}
.sunset-theme .wtg-logo, body:has(.sunset-theme) .wtg-logo {
  height: 40vh;
  width: 40vh;
  background-image: url("/css/scss/themes/theme-images/WaketheGiant-Logo-01.svg");
  position: relative;
  background-repeat: no-repeat;
}
.sunset-theme .background-3, body:has(.sunset-theme) .background-3 {
  background-image: url("/images/global/backgrounds/bg-texture-basketweave-dark.svg");
  background-color: var(--black-color);
}
.sunset-theme .wtg-bg-gradient, body:has(.sunset-theme) .wtg-bg-gradient {
  background-color: var(--black-background-color);
  background: rgb(241, 181, 33);
  background: linear-gradient(180deg, rgb(241, 181, 33) 0%, rgb(233, 101, 52) 50%, rgb(232, 57, 64) 100%);
}
.sunset-theme .btn-info, body:has(.sunset-theme) .btn-info {
  color: var(--dark-text-color);
  border-color: var(--dark-text-color);
}
.sunset-theme .module-completed, body:has(.sunset-theme) .module-completed {
  background-image: url("/css/scss/themes/theme-images/WaketheGiant-Logo-01.svg");
}
.sunset-theme .lesson-icon img, body:has(.sunset-theme) .lesson-icon img {
  display: none;
}
.sunset-theme .lesson-icon, body:has(.sunset-theme) .lesson-icon {
  background-image: url("/css/scss/themes/theme-images/wtg-pineapple.png");
  background-size: cover;
  background-position: 50% 50%;
}
.sunset-theme .question-container.card, .sunset-theme .floating-menu-container .question-container.floating-menu, .floating-menu-container .sunset-theme .question-container.floating-menu, body:has(.sunset-theme) .question-container.card, body:has(.sunset-theme) .floating-menu-container .question-container.floating-menu, .floating-menu-container body:has(.sunset-theme) .question-container.floating-menu {
  background-color: var(--mild-danger-color);
  max-height: 30%;
  margin-top: 0%;
}
.sunset-theme .question-container.card .card-body .question-text, .sunset-theme .floating-menu-container .question-container.floating-menu .card-body .question-text, .floating-menu-container .sunset-theme .question-container.floating-menu .card-body .question-text, body:has(.sunset-theme) .question-container.card .card-body .question-text, body:has(.sunset-theme) .floating-menu-container .question-container.floating-menu .card-body .question-text, .floating-menu-container body:has(.sunset-theme) .question-container.floating-menu .card-body .question-text {
  justify-content: center;
}
.sunset-theme .question-container.card .question-text p, .sunset-theme .floating-menu-container .question-container.floating-menu .question-text p, .floating-menu-container .sunset-theme .question-container.floating-menu .question-text p, body:has(.sunset-theme) .question-container.card .question-text p, body:has(.sunset-theme) .floating-menu-container .question-container.floating-menu .question-text p, .floating-menu-container body:has(.sunset-theme) .question-container.floating-menu .question-text p {
  color: var(--white-text-color);
  text-align: center;
  font-size: 250%;
  text-wrap: balance;
}
.sunset-theme .activity-menu .activity-item .activity-icon-frame img, body:has(.sunset-theme) .activity-menu .activity-item .activity-icon-frame img {
  filter: brightness(0);
}
.sunset-theme .btn-primary, body:has(.sunset-theme) .btn-primary {
  color: var(--black-text-color);
}
.sunset-theme .btn-primary:not(:disabled):not(.disabled).active:focus, .sunset-theme .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .sunset-theme .btn-primary.dropdown-toggle:focus, body:has(.sunset-theme) .btn-primary:not(:disabled):not(.disabled).active:focus, body:has(.sunset-theme) .btn-primary:not(:disabled):not(.disabled):active:focus, .show > body:has(.sunset-theme) .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem #fbb03c;
}
.sunset-theme .btn-primary:not(:disabled):not(.disabled).active, .sunset-theme .btn-primary:not(:disabled):not(.disabled):active, .show > .sunset-theme .btn-primary.dropdown-toggle, body:has(.sunset-theme) .btn-primary:not(:disabled):not(.disabled).active, body:has(.sunset-theme) .btn-primary:not(:disabled):not(.disabled):active, .show > body:has(.sunset-theme) .btn-primary.dropdown-toggle {
  color: var(--black-text-color);
  background-color: #e99b0c;
  border-color: #e99b0c;
}
.sunset-theme .background-2, body:has(.sunset-theme) .background-2 {
  background-repeat: no-repeat;
  background-size: cover;
}
.sunset-theme .header-ribbon.blue-ribbon h1,
.sunset-theme .header-ribbon.blue-ribbon h2,
.sunset-theme .header-ribbon.blue-ribbon h3,
.sunset-theme .header-ribbon.blue-ribbon h4,
.sunset-theme .header-ribbon.blue-ribbon h5,
.sunset-theme .header-ribbon.blue-ribbon h6,
.sunset-theme .header-ribbon.blue-ribbon p, body:has(.sunset-theme) .header-ribbon.blue-ribbon h1,
body:has(.sunset-theme) .header-ribbon.blue-ribbon h2,
body:has(.sunset-theme) .header-ribbon.blue-ribbon h3,
body:has(.sunset-theme) .header-ribbon.blue-ribbon h4,
body:has(.sunset-theme) .header-ribbon.blue-ribbon h5,
body:has(.sunset-theme) .header-ribbon.blue-ribbon h6,
body:has(.sunset-theme) .header-ribbon.blue-ribbon p {
  color: var(--black-text-color) !important;
}

.slide-layout {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.slide-columns {
  height: 100%;
}

.scroll-text {
  max-height: 400px !important;
  overflow: auto;
  margin: 2rem;
  margin-top: 7rem !important;
  mix-blend-mode: hard-light;
}
.scroll-text:after {
  position: absolute;
  content: "";
  left: -100px;
  top: 60px;
  height: 100%;
  width: 100%;
  background: linear-gradient(transparent, transparent, gray);
  pointer-events: none;
}
@media screen and (max-height: 768px) {
  .scroll-text {
    max-height: 200px !important;
    margin-top: 5rem !important;
  }
}

.slide-rows {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.slide-rows .top {
  height: 60%;
}
.slide-rows .bottom {
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.bg-headers {
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bg-headers h1 {
  padding: 1rem 2rem;
  background-color: var(--white-color);
  color: var(--black-text-color);
  text-align: left !important;
}
@media screen and (max-height: 768px) {
  .bg-headers h1 {
    font-size: 220% !important;
  }
}

.wtg-header {
  padding: 1rem 2rem;
  background-color: var(--white-color);
  text-align: left !important;
  position: absolute;
  z-index: 5;
}
.wtg-header.top {
  top: 6%;
}
.wtg-header.right {
  right: 0;
}

.heart {
  background-image: url("/css/scss/themes/theme-images/WTG-heart.png");
  background-size: contain;
  display: block;
  width: 24vh;
  height: 24vh;
  background-repeat: no-repeat;
}

.wtg-bullets ul {
  list-style-type: none;
}
.wtg-bullets li {
  display: grid;
  grid-template-columns: 20px auto;
  justify-content: start;
  align-items: center;
}
.wtg-bullets li::before {
  content: "➼";
  font-size: x-large;
  color: var(--white-text-color);
  padding-top: 0.5rem;
}

.wtg-speech-bubble {
  background-image: url("/css/scss/themes/theme-images/WTG-speech-bubble.svg");
  display: inline-block;
  background-repeat: no-repeat;
  margin-right: 0.5rem;
}
@media screen and (max-height: 768px) {
  .wtg-speech-bubble p {
    font-size: 90% !important;
  }
}

.wtg-check {
  background-image: url("/css/scss/themes/theme-images/WTG-checkmark.png");
  background-size: contain;
  display: block;
  background-repeat: no-repeat;
  margin-right: 0.5rem;
}

.quotations {
  background-image: url("/css/scss/themes/theme-images/WTG-quotations.png");
  background-size: contain;
  display: block;
  width: 14vh;
  height: 10vh;
  background-repeat: no-repeat;
}

.pointer {
  background-image: url("/css/scss/themes/theme-images/WTG-arrow.png");
  background-size: contain;
  width: 15vh;
  height: 18vh;
  background-repeat: no-repeat;
  transform: rotate(238deg);
  position: absolute;
  left: 20vw;
  top: 4rem;
}

.wtg-arrow-header {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}
.wtg-arrow-header h1 {
  background-color: var(--white-color);
  margin-bottom: 0;
  vertical-align: middle;
  display: table-cell;
}
.wtg-arrow-header-inner {
  display: flex;
  align-items: center;
  background-color: var(--white-color);
  padding: 0rem 1.8rem;
}
.wtg-arrow-header .arrow {
  border-top: 47px solid transparent;
  border-right: 50px solid var(--white-color);
  border-bottom: 47px solid transparent;
  position: relative;
}

.wtg-bg-4, .wtg-bg-1, .wtg-bg-2, .wtg-bg-3, .wtg-bg-5, .wtg-bg-6, .wtg-bg-7, .wtg-bg-8, .wtg-bg-9, .wtg-bg-10, .wtg-bg-11, .wtg-bg-12, .wtg-bg-13, .wtg-bg-14, .wtg-bg-15, .wtg-bg-16, .wtg-bg-17, .wtg-bg-18, .wtg-bg-19, .wtg-bg-20, .wtg-bg-21, .wtg-bg-22, .wtg-bg-23 {
  height: 100vh;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  height: 100%;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: -1;
}
.wtg-bg-1 {
  background-image: url("/css/scss/themes/theme-images/wtg-bg-1.png");
}
.wtg-bg-2 {
  background-image: url("/css/scss/themes/theme-images/wtg-bg-2.png");
  background-size: contain;
}
.wtg-bg-3 {
  background-image: url("/css/scss/themes/theme-images/wtg-bg-3.jpg");
}
.wtg-bg-4 {
  background-image: url("/css/scss/themes/theme-images/wtg-bg-4.jpg");
  background-size: cover;
  overflow: hidden;
  z-index: -1;
  background-repeat: no-repeat;
  background-color: rgb(241, 181, 33);
  background-position: 30% 0%;
}
.wtg-bg-5 {
  background-image: url("https://github.com/legoodyearrr/cfsvg/blob/main/wtg-bg-5.jpg?raw=true");
  background-position: bottom;
}
.wtg-bg-6 {
  background-image: url("/css/scss/themes/theme-images/wtg-bg-6.png");
  background-position: center;
}
.wtg-bg-7 {
  background-image: url("/css/scss/themes/theme-images/wtg-bg-2.svg");
}
.wtg-bg-8 {
  background-image: url("/css/scss/themes/theme-images/wtg-bg-8.png");
  border-radius: 0;
  background-position: 100%;
}
.wtg-bg-8 .question {
  background-image: url("/css/scss/themes/theme-images/wtg-bg-8-b.svg");
  height: 100%;
  width: 100%;
  background-position: 110%;
}
.wtg-bg-9 {
  background-image: url("/css/scss/themes/theme-images/WTG-watchvideo2.png");
  background-size: contain;
}
.wtg-bg-10 {
  background-image: url("/css/scss/themes/theme-images/WTG-studentstheexperience.png");
  background-size: cover;
  background-position: 100% 50%;
}
.wtg-bg-11 {
  background-image: url("/css/scss/themes/theme-images/WTG-students-2.png");
  background-size: cover;
  background-position: left;
  border-radius: 0;
}
.wtg-bg-12 {
  background-image: url("/css/scss/themes/theme-images/WTG-youth.png");
  background-size: cover;
  background-position: 100% 50%;
}
.wtg-bg-13 {
  background-image: url("/css/scss/themes/theme-images/WTG-youth.png");
  background-size: cover;
  background-position: 100% 50%;
}
.wtg-bg-14 {
  background-image: url("/css/scss/themes/theme-images/WTG-watchvideo3.png");
  background-size: contain;
}
.wtg-bg-15 {
  background-image: url("/css/scss/themes/theme-images/WTG-words-bg.png");
  background-size: cover;
}
.wtg-bg-16 {
  background-image: url("/css/scss/themes/theme-images/WTG-values.png");
  background-size: cover;
  background-position: 100% 50%;
}
.wtg-bg-17 {
  background-image: url("/css/scss/themes/theme-images/WTG-participation.png");
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  margin-left: -15px;
}
.wtg-bg-18 {
  background-image: url("/css/scss/themes/theme-images/WTG-dosomething.png");
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  margin-left: -15px;
}
.wtg-bg-19 {
  background-image: url("/css/scss/themes/theme-images/WTG-remember.png");
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
}
.wtg-bg-20 {
  background-image: url("/css/scss/themes/theme-images/WTG-megaphone.png");
  background-size: contain;
  margin: 2rem;
}
.wtg-bg-21 {
  background-image: url("/css/scss/themes/theme-images/WTG-remember2.png");
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.wtg-bg-22 {
  background-image: url("/css/scss/themes/theme-images/WTG-peopletalking.png");
  background-size: contain;
  margin: 2rem;
}
.wtg-bg-23 {
  background-image: url("/css/scss/themes/theme-images/WTG-magnifyingglass.png");
  background-size: cover;
  margin: 2rem;
  background-position: top;
}
.wtg-bg-24 {
  background-image: url("/css/scss/themes/theme-images/WTG-magnifyingglass2.png");
  background-size: cover;
  margin: 2rem;
  background-position: top;
  height: 100%;
}
.wtg-bg-25 {
  background-image: url("/css/scss/themes/theme-images/WTG-magnifyingglass3.png");
  background-size: cover;
  margin: 2rem;
  background-position: top;
  height: 100%;
}
.wtg-bg-26 {
  background-image: url("/css/scss/themes/theme-images/WTG-answer1.png");
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.wtg-bg-27 {
  background-image: url("/css/scss/themes/theme-images/WTG-answer2.png");
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.wtg-bg-28 {
  background-image: url("/css/scss/themes/theme-images/WTG-answer3.png");
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.wtg-bg-29 {
  background-image: url("/css/scss/themes/theme-images/WTG-answer4.png");
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.wtg-bg-30 {
  background-image: url("/css/scss/themes/theme-images/WTG-answer5.png");
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.wtg-bg-31 {
  background-image: url("/css/scss/themes/theme-images/WTG-magnifyingglass4.png");
  background-size: cover;
  margin: 2rem;
  background-position: top;
  height: 100%;
}
.wtg-bg-32 {
  background-image: url("/css/scss/themes/theme-images/WTG-note.png");
  background-size: contain;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  margin: 1vh 14vh;
}
.wtg-bg-33 {
  background-image: url("/css/scss/themes/theme-images/WTG-writing.png");
  background-size: contain;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.wtg-bg-34 {
  background-image: url("/css/scss/themes/theme-images/WTG-laptop.png");
  background-size: contain;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.wtg-bg-35 {
  background-image: url("/css/scss/themes/theme-images/WTG-resources.png");
  height: 50vh;
  max-height: 500px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 100%;
  margin: auto;
}
.wtg-bg-36 {
  background-image: url("/css/scss/themes/theme-images/WTG-glasses.png");
  background-size: contain;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.wtg-bg-37 {
  background-image: url("/css/scss/themes/theme-images/WTG-tv.png");
  background-size: contain;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.wtg-bg-38 {
  background-image: url("/css/scss/themes/theme-images/WTG-openbook.png");
  background-size: contain;
  height: 50%;
  background-repeat: no-repeat;
  background-position: top;
}
.wtg-bg-39 {
  background-image: url("/css/scss/themes/theme-images/WTG-glossary.png");
  background-size: cover;
  background-position: 50% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.wtg-bg-40 {
  background-image: url("/css/scss/themes/theme-images/WTG-harbour.png");
  background-size: cover;
  background-position: 50% 50%;
  height: 100%;
  border-radius: 0;
}
.wtg-bg-41 {
  background-image: url("/css/scss/themes/theme-images/WTG-welcoming.png");
  background-size: cover;
  height: 100%;
  background-position: 100%;
  border-radius: 0;
}
.wtg-bg-42 {
  background-image: url("/css/scss/themes/theme-images/WTG-revival.png");
  background-size: cover;
  background-position: left;
  height: 100%;
  border-right: 10px solid white;
  border-radius: 0;
  margin-right: -15px;
}
.wtg-bg-43 {
  background-image: url("/css/scss/themes/theme-images/WTG-timeline-1.png");
  background-size: contain;
  border-radius: 0;
  height: 83vh;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.wtg-bg-44 {
  background-image: url("/css/scss/themes/theme-images/WTG-timeline-2.png");
  background-size: contain;
  border-radius: 0;
  height: 83vh;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.wtg-bg-45 {
  background-image: url("/css/scss/themes/theme-images/WTG-resources.png");
  background-size: contain;
  border-radius: 0;
  height: 83vh;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.wtg-bg-46 {
  background-image: url("/css/scss/themes/theme-images/WTG-books.png");
  background-size: contain;
  height: 90vh;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.wtg-bg-47 {
  background-image: url("/css/scss/themes/theme-images/WTG-glossary2.png");
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.wtg-bg-48 {
  background-image: url("/css/scss/themes/theme-images/WTG-glossary3.png");
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.wtg-bg-49 {
  background-image: url("/css/scss/themes/theme-images/WTG-glossary4.png");
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.wtg-bg-50 {
  background-image: url("/css/scss/themes/theme-images/WTG-glossary5.png");
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.wtg-bg-51 {
  background-image: url("/css/scss/themes/theme-images/WTG-credits.png");
  background-size: cover;
  background-position: top left;
  height: 100%;
  border-radius: 0;
}

.bg-blue {
  background-color: var(--accent-color-9);
}

.text-blue {
  color: var(--accent-color-9) !important;
}

@media screen and (max-height: 768px) {
  body:has(.sunset-theme) .radial-menu-container {
    scale: 90%;
    bottom: 83px;
    left: 35px;
  }
}