@import url("https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css");
@import url("https://fonts.googleapis.com/css2?family=Lobster+Two&family=Roboto+Condensed:wght@300;400;700&display=swap");
:root {
  /* COLORS ========= */
  /* Primary - shades and tints */
  --primary: #3884ff;
  --primary-light-1: #4d91ff;
  --primary-light-2: #5c9aff;
  --primary-light-3: #6ba4ff;
  --primary-light-4: #7aadff;
  --primary-dark-1: #357ae9;
  --primary-dark-2: #316fd3;
  --primary-dark-3: #2b64bf;
  --primary-dark-4: #285baf;
  /* Secondary - shades and tints */
  --secondary: #7309b9;
  --secondary-light-1: #7d1fbd;
  --secondary-light-2: #8932c3;
  --secondary-light-3: #9745c9;
  --secondary-light-4: #9f55ce;
  --secondary-dark-1: #6608a6;
  --secondary-dark-2: #600797;
  --secondary-dark-3: #570689;
  --secondary-dark-4: #4d057a;
  /* Accent - shades and tints */
  --accent: #fe822f;
  --accent-light-1: #fe8b3e;
  --accent-light-2: #fe9752;
  --accent-light-3: #fea062;
  --accent-light-4: #fea971;
  --accent-dark-1: #e77127;
  --accent-dark-2: #d06925;
  --accent-dark-3: #bf5e22;
  --accent-dark-4: #ad551f;
  /* Feedback (Success, info, warning, and danger) */
  /* Success - shades and tints */
  --success: #02c59b;
  --success-light-1: #19c8a2;
  --success-light-2: #2eccaa;
  --success-light-3: #41d2b3;
  --success-light-4: #51d6ba;
  --success-dark-1: #02b18b;
  --success-dark-2: #02a27f;
  --success-dark-3: #029273;
  --success-dark-4: #028367;
  /* Info - shades and tints */
  --info: #4d9df9;
  --info-light-1: #5ca6fa;
  --info-light-2: #6baefa;
  --info-light-3: #7ab6fa;
  --info-light-4: #85bbfa;
  --info-dark-1: #468fe2;
  --info-dark-2: #3c80cd;
  --info-dark-3: #3774b9;
  --info-dark-4: #326aa9;
  /* Warning - shades and tints */
  --warning: #fdca3f;
  --warning-light-1: #fdcf4e;
  --warning-light-2: #fdd462;
  --warning-light-3: #fdd76d;
  --warning-light-4: #fddb7c;
  --warning-dark-1: #e5b738;
  --warning-dark-2: #d1a733;
  --warning-dark-3: #c09930;
  --warning-dark-4: #ae8c2d;
  /* Danger - shades and tints */
  --danger: #d72839;
  --danger-light-1: #da3e4e;
  --danger-light-2: #de4f5b;
  --danger-light-3: #e05c69;
  --danger-light-4: #e36d79;
  --danger-dark-1: #c22433;
  --danger-dark-2: #b1202f;
  --danger-dark-3: #9f1d2a;
  --danger-dark-4: #931b27;
  /* Grays - shades and tints */
  --gray: #adb5bd;
  --gray-light-1: #ced4da;
  --gray-light-2: #dee2e6;
  --gray-light-3: #eaedf0;
  --gray-light-4: #f9fafb;
  --gray-dark-1: #6d767e;
  --gray-dark-2: #484f56;
  --gray-dark-3: #353b41;
  --gray-dark-4: #22262a;
  /* Dark - shades and tints */
  --dark: #252422;
  --dark-light-1: #3a3936;
  --dark-light-2: #4b4a48;
  --dark-light-3: #5a5958;
  --dark-light-4: #6a6968;
  --dark-dark-1: #23221f;
  --dark-dark-2: #201f1d;
  --dark-dark-3: #1b1a18;
  --dark-dark-4: #181816;
  /* Body text and background color */
  --global-body-text-color: var(--dark);
  --global-background-color: var(--gray-light-4);
  /* Anchor element <a href="">...</a> */
  --global-link-color: var(--accent);
  --global-link-hover-color: var(--accent-dark-3);
  --global-link-disabled-color: var(--accent-light-4);
  /* Blockquote */
  --blockquote-border-color: var(--accent-light-4);
  /* ==================== LAYOUT ================= */
  /* Container */
  --default-container: 90%;
  --container-50: 50%;
  --container-60: 60%;
  --container-70: 70%;
  --container-80: 80%;
  --container-sm: 87.5rem;
  --container-md: 121.5rem;
  --container-lg: 131.5rem;
  --container-xl: 156rem;
  /* ================================== TYPOGRAPHY ===================================== */
  /* Headings */
  --heading-1-size: 4.883rem;
  --heading-2-size: 3.906rem;
  --heading-3-size: 3.125rem;
  --heading-4-size: 2.5rem;
  --heading-5-size: 2rem;
  --heading-6-size: 1.6rem;
  /* Font weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  /* ================================== TYPOGRAPHY ===================================== */
  --font-05: 0.5rem;
  --font-1: 1rem;
  --font-15: 1.5rem;
  --font-2: 2rem;
  --font-25: 2.5rem;
  --font-3: 3rem;
  --font-35: 3.5rem;
  --font-4: 4rem;
  --font-45: 4.5rem;
  --font-5: 5rem;
  --font-55: 5.5rem;
  --font-6: 6rem;
  --font-65: 6.5rem;
  /* ================================== SPACING ===================================== */
  --spacing-xs: 1.2rem;
  --spacing-sm: 2rem;
  --spacing-md: 3rem;
  --spacing-lg: 4rem;
  --spacing-xl: 5rem;
  --spacing-6: 6rem;
  --spacing-7: 7rem;
  --spacing-8: 8rem;
  --spacing-9: 9rem;
  --spacing-10: 10rem;
  /* ================================== COMPONENTS ===================================== */
  /* Avatar */
  --avatar-default: 5rem;
  --avatar-sm: 4rem;
  --avatar-md: 6rem;
  --avatar-lg: 8rem;
  /* Badges */
  --badge-sm: 0.5rem 1rem;
  --badge-md: 1.5rem 3rem;
  /* Buttons and forms */
  --default-button-input-font-size: 0.85em;
  --default-button-input-padding: 1.4rem;
  --default-button-input-padding-sm: 0.6rem;
  --default-button-input-padding-md: 2rem;
  --default-button-input-padding-lg: 2.6rem;
  /* Form - Sizes (padding) */
  --form-input-left-right-padding: 1.4rem;
  /* Carousel and comparison */
  --carousel-comparison-button-sm: 3.5rem;
  --carousel-comparison-button-md: 4.5rem;
  --carousel-comparison-button-lg: 5rem;
  /* Dot navigations */
  --carousel-dot-default: 1.4rem;
  --carousel-dot-sm: 1.5rem;
  --carousel-dot-md: 1.55rem;
  --carousel-dot-lg: 1.6rem;
  /* ============== Navigation ============= */
  --menu-sidebar-width-default: 25rem;
  --menu-sidebar-width-sm: 28rem;
  --menu-sidebar-width-md: 30rem;
  --menu-sidebar-width-lg: 30rem;
  /* Dropdown menu - Sizes (Width) */
  --dropdown-max-width-default: 20rem;
  --dropdown-max-width-sm: 22rem;
  --dropdown-max-width-md: 20rem;
  --dropdown-max-width-lg: 20rem;
  /* Megamenu - Width (regular) */
  --megamenu-width-default: 80%;
  --megamenu-width-md: 90%;
  --megamenu-width-lg: 90%;
  /* Megamenu - (Height) */
  --megamenu-max-height-default: 100vh;
  --megamenu-max-height-sm: 100vh;
  --megamenu-max-height-md: 45rem;
  --megamenu-max-height-lg: 45rem;
  /* Navbar - Width (regular) */
  --navbar-width-md: 100%;
  --navbar-width-lg: 100%;
  /* Navbar - Width (mobile-toggler) */
  --navbar-mobile-toggler-size-default: 4rem;
  --navbar-mobile-toggler-size-sm: 4rem;
  --navbar-mobile-toggler-size-md: 4rem;
  --navbar-mobile-toggler-size-lg: 4rem;
  /* Navbar - Height */
  --navbar-height-default: 8rem;
  --navbar-height-sm: 8rem;
  --navbar-height-md: 8rem;
  --navbar-height-lg: 8rem;
  /* Modal */
  --modal-width-default: 80%;
  --modal-width-sm: 50rem;
  --modal-width-md: 65rem;
  --modal-width-lg: 60rem;
  /* Tab sizes for vertical */
  --tab-vertical-nav-width-default: 100%;
  --tab-vertical-nav-width-sm: 100%;
  --tab-vertical-nav-width-md: 25rem;
  --tab-vertical-nav-width-lg: 25rem;
  /* Theme for the circular buttons */
  --button-circle-bg-color: var(--accent-light-4);
  --button-circle-size: 3rem;
  --button-circle-icon-color: var(--global-body-text-color);
  --button-circle-icon-size: 2rem;
}

/* ======== Customizing Romans 8's variables and adding new variables ======== */
:root {
  /* Colors */
  --primary: #51a3a3;
  --primary-light-1: #6fb3b3;
  --primary-light-2: #88c0c0;
  --primary-light-3: #9dcbcb;
  --primary-light-4: #aed4d4;
  --primary-dark-1: #438787;
  --primary-dark-2: #377070;
  --primary-dark-3: #2d5d5d;
  --primary-dark-4: #254d4d;
  --secondary: #dd7373;
  --secondary-light-1: #e38c8c;
  --secondary-light-2: #e8a0a0;
  --secondary-light-3: #ecb1b1;
  --secondary-light-4: #f0bebe;
  --secondary-dark-1: #b75f5f;
  --secondary-dark-2: #974e4e;
  --secondary-dark-3: #7d4141;
  --secondary-dark-4: #683636;
  --accent: #274f73;
  --accent-light-1: #4d6e8c;
  --accent-light-2: #6c87a0;
  --accent-light-3: #859cb1;
  --accent-light-4: #9aadbe;
  --accent-dark-1: #20415f;
  --accent-dark-2: #1a364e;
  --accent-dark-3: #162d41;
  --accent-dark-4: #122536;
  --danger: #842722;
  --danger-light-1: #994d48;
  --danger-light-2: #aa6c68;
  --danger-light-3: #b98582;
  --danger-light-4: #c59a97;
  --danger-dark-1: #6d201c;
  --danger-dark-2: #5a1a17;
  --danger-dark-3: #4b1613;
  --danger-dark-4: #3e120f;
  --gray: #d1d1d1;
  --gray-light-1: #d9d9d9;
  --gray-light-2: #dfdfdf;
  --gray-light-3: #e5e5e5;
  --gray-dark-1: #adadad;
  --gray-dark-2: #8f8f8f;
  --gray-dark-3: #767676;
  --gray-dark-4: #616161;
  --footer-bg-color: #0a151e;
  /* Typography */
  --base-root-font-size: 50%;
  --base-root-font-size-sm: 50%;
  --base-root-font-size-md: 56.25%;
  --base-root-font-size-lg: 62.5%;
  --base-root-font-size-xl: 75%;
  /* Card */
  --card-default-max-height: 50rem;
  --card-gallery-max-height: 30rem;
  --card-square-max-height: 15rem;
  /* Hero */
  --default-hero-height: 70rem;
  --default-hero-height-sm: 70rem;
  --default-hero-height-md: 80rem;
  --default-hero-height-lg: 60rem;
  --default-hero-height-xl: 60rem;
  /* Logo width */
  --logo-default-width: 10rem;
  --logo-default-width-sm: 12rem;
  --logo-default-width-md: 12rem;
  --logo-default-width-lg: 15rem;
  --logo-default-width-xl: 15rem;
  /* Spacing */
  --spacing-15: 15rem;
  --spacing-20: 20rem;
  --spacing-25: 25rem;
}

.ro-button-circle::before {
  content: "";
  position: absolute;
  width: 130%;
  height: 130%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
}

.ro-button,
.ro-breadcrumb,
.ro-badge,
.ro-alert__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ro-form__range .ro-form__floating-value {
  /* Floating tracker for both progress bar and range slider */
  background-color: var(--global-body-text-color);
  color: var(--global-background-color);
  font-size: 1.28rem;
  border-radius: 0.6rem;
  padding: 0.6rem;
  position: absolute;
  white-space: nowrap;
  top: -4.2rem;
  left: 80%;
  transform: translateX(-100%);
}
.ro-form__range .ro-form__floating-value::after {
  content: "";
  position: absolute;
  top: 70%;
  right: 0;
  z-index: -1;
  width: 0;
  height: 0;
  border-left: 2rem solid transparent;
  border-right: 0.1rem solid var(--global-body-text-color);
  border-top: 2rem solid var(--global-body-text-color);
}

/*
=================================================
                    CSS RESET
=================================================
*/
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: inherit;
  text-decoration: none;
  list-style: none;
  outline: none;
}

/* Document
 ========================================================================== */
html {
  font-family: sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */
}

/* Sections
 ========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
  margin: 0;
}

/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/* Grouping content
 ========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main {
  /* 1 */
  display: block;
}

/**
* Add the correct margin in IE 8.
*/
figure {
  margin: 1em 40px;
}

a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
  outline-width: 0;
}

/**
* Remove the border on images inside links in IE 10-.
*/
img {
  border-style: none;
}

/* Forms
 ========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
  color: inherit;
}

/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
  /* 1 */
  overflow: visible;
}

/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
  /* 1 */
  text-transform: none;
}

/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
*    controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}

/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
  overflow: auto;
}

/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button {
  cursor: pointer;
  border: 0;
  line-height: 1.5;
}

/* Hidden
 ========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
  display: none;
}

html {
  box-sizing: border-box;
  height: 100%;
  font-size: 62.5%;
  overflow-x: hidden;
}
html.ro-scrollspy {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  width: 100%;
  min-height: 100%;
  background-color: var(--global-background-color);
  color: var(--global-body-text-color);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden !important;
  font-size: 1.6rem;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

a,
i,
span {
  display: inline-block;
}

i {
  color: var(--accent);
  transition: color 0.3s 0s ease-out;
}

a {
  color: var(--global-link-color);
  border: 0.2rem dotted transparent;
  transition: all 0.3s 0s ease-out;
}
a.ro-link-primary {
  /* Link type primary */
  --global-link-color: var(--primary);
  --global-link-disabled-color: var(--primary-light-4);
  --global-link-hover-color: var(--primary-dark-3);
}
a.ro-link-secondary {
  /* Link type secondary */
  --global-link-color: var(--secondary);
  --global-link-disabled-color: var(--secondary-light-4);
  --global-link-hover-color: var(--secondary-dark-3);
}
a.ro-link-success {
  /* Link type success */
  --global-link-color: var(--success);
  --global-link-disabled-color: var(--success-light-4);
  --global-link-hover-color: var(--success-dark-3);
}
a.ro-link-info {
  /* Link type info */
  --global-link-color: var(--info);
  --global-link-disabled-color: var(--info-light-4);
  --global-link-hover-color: var(--info-dark-3);
}
a.ro-link-warning {
  /* Link type warning */
  --global-link-color: var(--warning);
  --global-link-disabled-color: var(--warning-light-4);
  --global-link-hover-color: var(--warning-dark-3);
}
a.ro-link-danger {
  /* Link type danger */
  --global-link-color: var(--danger);
  --global-link-disabled-color: var(--danger-light-4);
  --global-link-hover-color: var(--danger-dark-3);
}
a.ro-link-gray {
  /* Link type gray */
  --global-link-color: var(--gray);
  --global-link-disabled-color: var(--gray-light-1);
  --global-link-hover-color: var(--gray-dark-3);
}
a.ro-link-dark {
  /* Link type dark */
  --global-link-color: var(--dark);
  --global-link-disabled-color: var(--dark-light-4);
  --global-link-hover-color: var(--dark-dark-3);
}
a:hover,
a:focus {
  color: var(--global-link-hover-color);
}
a:focus {
  border-color: var(--global-link-hover-color);
}
a.ro-disabled,
a[data-disabled] {
  color: var(--global-link-disabled-color);
  opacity: 0.8;
}

::selection {
  background-color: var(--accent-light-3);
  color: var(--global-body-text-color);
}

/*
=================================================
                  TYPOGRAPHY
=================================================
*/
.ro-disabled,
[data-disabled] {
  pointer-events: none;
  color: var(--gray-light-1);
  border-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

h1,
.ro-h1,
h2,
.ro-h2,
h3,
.ro-h3,
h4,
.ro-h4,
h5,
.ro-h5,
h6,
.ro-h6 {
  font-family: "Poppins", sans-serif;
  color: inherit;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  margin-bottom: 0;
}

/* h1-h6 */
h1 {
  font-size: var(--heading-1-size);
}

h2 {
  font-size: var(--heading-2-size);
}

h3 {
  font-size: var(--heading-3-size);
}

h4 {
  font-size: var(--heading-4-size);
}

h5 {
  font-size: var(--heading-5-size);
}

h6 {
  font-size: var(--heading-6-size);
}

/* .ro-h1 - .ro-h6 */
.ro-h1 {
  font-size: var(--heading-1-size) !important;
}

.ro-h2 {
  font-size: var(--heading-2-size) !important;
}

.ro-h3 {
  font-size: var(--heading-3-size) !important;
}

.ro-h4 {
  font-size: var(--heading-4-size) !important;
}

.ro-h5 {
  font-size: var(--heading-5-size) !important;
}

.ro-h6 {
  font-size: var(--heading-6-size) !important;
}

p {
  margin-bottom: 1.6rem;
  font-size: 1.6rem;
}
p:last-of-type {
  margin-bottom: 0;
}

.ro-leading-paragraph {
  font-size: 2rem;
  font-weight: var(--font-weight-medium);
}

.ro-silence {
  color: var(--gray-dark-1);
}

.ro-caption,
figcaption {
  font-size: 1.28rem;
  color: var(--gray-dark-2);
  font-style: italic;
}

figure figcaption,
figure .ro-figcaption,
.ro-figure figcaption,
.ro-figure .ro-figcaption {
  text-align: center;
  margin: 1.2rem 0;
}

small,
.ro-small {
  font-size: 1.024rem;
  color: var(--gray-dark-2);
}

mark,
.ro-highlight {
  background-color: var(--accent-light-2);
  padding: 0.2rem 0.4rem;
  border-radius: 0.3rem;
}

.ro-highlight-primary,
.ro-highlight-secondary,
.ro-highlight-success,
.ro-highlight-danger,
.ro-highlight-dark {
  color: var(--gray-light-4);
}

.ro-highlight-primary {
  background-color: var(--primary-light-2);
}

.ro-highlight-secondary {
  background-color: var(--secondary-light-2);
}

.ro-highlight-success {
  background-color: var(--success-light-2);
}

.ro-highlight-warning {
  background-color: var(--warning-light-2);
}

.ro-highlight-info {
  background-color: var(--info-light-2);
}

.ro-highlight-danger {
  background-color: var(--danger-light-2);
}

.ro-highlight-gray {
  background-color: var(--gray-light-2);
}

.ro-highlight-dark {
  background-color: var(--dark-light-2);
}

cite,
.ro-citation {
  font-size: 1.28rem;
  color: var(--gray-dark-2);
  font-style: italic;
  display: block;
}

.ro-footnote {
  font-size: 1.28rem;
  color: var(--gray-dark-2);
}

blockquote,
.ro-blockquote {
  background-color: var(--global-background-color);
  border-radius: 0.6rem;
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
  padding: 2rem;
  font-style: italic;
  border-left: 0.6rem solid var(--blockquote-border-color);
}
blockquote.ro-blockquote-primary,
.ro-blockquote.ro-blockquote-primary {
  border-left-color: var(--primary-light-4);
}
blockquote.ro-blockquote-secondary,
.ro-blockquote.ro-blockquote-secondary {
  border-left-color: var(--secondary-light-4);
}
blockquote.ro-blockquote-success,
.ro-blockquote.ro-blockquote-success {
  border-left-color: var(--success-light-4);
}
blockquote.ro-blockquote-info,
.ro-blockquote.ro-blockquote-info {
  border-left-color: var(--info-light-4);
}
blockquote.ro-blockquote-warning,
.ro-blockquote.ro-blockquote-warning {
  border-left-color: var(--warning-light-4);
}
blockquote.ro-blockquote-danger,
.ro-blockquote.ro-blockquote-danger {
  border-left-color: var(--danger-light-4);
}
blockquote.ro-blockquote-gray,
.ro-blockquote.ro-blockquote-gray {
  border-left-color: var(--gray-light-1);
}
blockquote.ro-blockquote-dark,
.ro-blockquote.ro-blockquote-dark {
  border-left-color: var(--dark-light-4);
}
blockquote cite,
blockquote .ro-citation,
.ro-blockquote cite,
.ro-blockquote .ro-citation {
  margin-top: 0.6rem;
}

.ro-code,
code {
  --code-default-theme: var(--accent);
  font-family: "Source Code Pro", monospace;
  color: var(--code-default-theme);
  font-weight: var(--font-weight-light);
  display: inline-block;
  margin: 0 0.4rem;
}
.ro-code.ro-code-primary,
code.ro-code-primary {
  /* Code type primary */
  --code-default-theme: var(--primary);
}
.ro-code.ro-code-secondary,
code.ro-code-secondary {
  /* Code type secondary */
  --code-default-theme: var(--secondary);
}
.ro-code.ro-code-success,
code.ro-code-success {
  /* Code type success */
  --code-default-theme: var(--success);
}
.ro-code.ro-code-info,
code.ro-code-info {
  /* Code type info */
  --code-default-theme: var(--info);
}
.ro-code.ro-code-warning,
code.ro-code-warning {
  /* Code type warning */
  --code-default-theme: var(--warning);
}
.ro-code.ro-code-danger,
code.ro-code-danger {
  /* Code type danger */
  --code-default-theme: var(--danger);
}
.ro-code.ro-code-gray,
code.ro-code-gray {
  /* Code type gray */
  --code-default-theme: var(--gray);
}
.ro-code.ro-code-dark,
code.ro-code-dark {
  /* Code type dark */
  --code-default-theme: var(--dark);
}
.ro-code.ro-code-gray-light-1,
code.ro-code-gray-light-1 {
  /* Code type gray-light-1 */
  --code-default-theme: var(--gray-light-1);
}
.ro-code.ro-code-gray-light-2,
code.ro-code-gray-light-2 {
  /* Code type gray-light-2 */
  --code-default-theme: var(--gray-light-2);
}
.ro-code.ro-code-gray-light-3,
code.ro-code-gray-light-3 {
  /* Code type gray-light-3 */
  --code-default-theme: var(--gray-light-3);
}
.ro-code.ro-code-gray-light-4,
code.ro-code-gray-light-4 {
  /* Code type gray-light-4 */
  --code-default-theme: var(--gray-light-4);
}
.ro-code.ro-code-gray-dark-1,
code.ro-code-gray-dark-1 {
  /* Code type gray-dark-1 */
  --code-default-theme: var(--gray-dark-1);
}
.ro-code.ro-code-gray-dark-2,
code.ro-code-gray-dark-2 {
  /* Code type gray-dark-2 */
  --code-default-theme: var(--gray-dark-2);
}
.ro-code.ro-code-gray-dark-3,
code.ro-code-gray-dark-3 {
  /* Code type gray-dark-3 */
  --code-default-theme: var(--gray-dark-3);
}
.ro-code.ro-code-gray-dark-4,
code.ro-code-gray-dark-4 {
  /* Code type gray-dark-4 */
  --code-default-theme: var(--gray-dark-4);
}

.ro-list__item {
  background-color: var(--global-background-color);
  padding: var(--spacing-sm);
  border-radius: 0.6rem;
  margin-bottom: var(--spacing-sm);
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
}
.ro-list__item:last-of-type {
  margin-bottom: 0;
}
.ro-list.ro-list-group .ro-list__item {
  margin-bottom: 0;
  box-shadow: none;
  border-radius: 0;
  border: 0.2rem solid var(--gray-light-3);
}
.ro-list.ro-list-group .ro-list__item:not(:last-of-type) {
  border-bottom: 0;
}
.ro-list.ro-list-group .ro-list__item:first-of-type {
  border-radius: 0.6rem 0.6rem 0 0;
}
.ro-list.ro-list-group .ro-list__item:last-of-type {
  border-radius: 0 0 0.6rem 0.6rem;
}

/*
=================================================
                  UTILITIES
=================================================
*/
/* Overflow */
[class*="ro-overflow-"] {
  scrollbar-width: thin;
  scrollbar-color: var(--dark-light-3) transparent;
}
[class*="ro-overflow-"]::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.2rem transparent;
  background: transparent;
  margin: 1.1rem;
}
[class*="ro-overflow-"]::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
  background: transparent;
}
[class*="ro-overflow-"]::-webkit-scrollbar-thumb {
  border-radius: 6rem;
  width: 0.5rem;
  background-color: var(--dark-light-3);
}

/* Aspect ratios */
[class*="ro-aspect-"] {
  position: relative !important;
  overflow: hidden !important;
  height: 100%;
}
[class*="ro-aspect-"] .ro-responsive-embedd {
  position: absolute !important;
  object-fit: cover !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Divider */
[class*="ro-divider"] {
  display: block;
  width: 100%;
  height: 0.2rem;
  background-color: var(--gray-light-3);
  margin: 0 auto;
}
[class*="ro-divider"].ro-divider-dark {
  background-color: var(--dark-light-3);
}

/* Typography */
s {
  text-decoration: line-through !important;
}

/* Icon sizes */
.ro-icon {
  font-size: var(--font-2) !important;
}

/* ===============  Text Style classes ============= */
.ro-text-s-fs-initial {
  font-style: initial !important;
}

.ro-text-s-normal {
  font-style: normal !important;
}

.ro-text-s-italic {
  font-style: italic !important;
}

/* ===============  Flex Wrap classes ============= */
.ro-flex-wrap {
  flex-wrap: wrap !important;
}

.ro-flex-nowrap {
  flex-wrap: nowrap !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-flex-wrap-sm {
    flex-wrap: wrap !important;
  }

  .ro-flex-nowrap-sm {
    flex-wrap: nowrap !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-flex-wrap-md {
    flex-wrap: wrap !important;
  }

  .ro-flex-nowrap-md {
    flex-wrap: nowrap !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-flex-wrap-lg {
    flex-wrap: wrap !important;
  }

  .ro-flex-nowrap-lg {
    flex-wrap: nowrap !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-flex-wrap-xl {
    flex-wrap: wrap !important;
  }

  .ro-flex-nowrap-xl {
    flex-wrap: nowrap !important;
  }
}
/* ===============  Padding - Bottom classes ============= */
.ro-pd-b-0 {
  padding-bottom: 0 !important;
}

.ro-pd-b-1 {
  padding-bottom: var(--spacing-xs) !important;
}

.ro-pd-b-2 {
  padding-bottom: var(--spacing-sm) !important;
}

.ro-pd-b-3 {
  padding-bottom: var(--spacing-md) !important;
}

.ro-pd-b-4 {
  padding-bottom: var(--spacing-lg) !important;
}

.ro-pd-b-5 {
  padding-bottom: var(--spacing-xl) !important;
}

.ro-pd-b-6 {
  padding-bottom: var(--spacing-6) !important;
}

.ro-pd-b-7 {
  padding-bottom: var(--spacing-7) !important;
}

.ro-pd-b-8 {
  padding-bottom: var(--spacing-8) !important;
}

.ro-pd-b-9 {
  padding-bottom: var(--spacing-9) !important;
}

.ro-pd-b-10 {
  padding-bottom: var(--spacing-10) !important;
}

.ro-pd-b-15 {
  padding-bottom: var(--spacing-15) !important;
}

.ro-pd-b-20 {
  padding-bottom: var(--spacing-20) !important;
}

.ro-pd-b-25 {
  padding-bottom: var(--spacing-25) !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-pd-b-0-sm {
    padding-bottom: 0 !important;
  }

  .ro-pd-b-1-sm {
    padding-bottom: var(--spacing-xs) !important;
  }

  .ro-pd-b-2-sm {
    padding-bottom: var(--spacing-sm) !important;
  }

  .ro-pd-b-3-sm {
    padding-bottom: var(--spacing-md) !important;
  }

  .ro-pd-b-4-sm {
    padding-bottom: var(--spacing-lg) !important;
  }

  .ro-pd-b-5-sm {
    padding-bottom: var(--spacing-xl) !important;
  }

  .ro-pd-b-6-sm {
    padding-bottom: var(--spacing-6) !important;
  }

  .ro-pd-b-7-sm {
    padding-bottom: var(--spacing-7) !important;
  }

  .ro-pd-b-8-sm {
    padding-bottom: var(--spacing-8) !important;
  }

  .ro-pd-b-9-sm {
    padding-bottom: var(--spacing-9) !important;
  }

  .ro-pd-b-10-sm {
    padding-bottom: var(--spacing-10) !important;
  }

  .ro-pd-b-15-sm {
    padding-bottom: var(--spacing-15) !important;
  }

  .ro-pd-b-20-sm {
    padding-bottom: var(--spacing-20) !important;
  }

  .ro-pd-b-25-sm {
    padding-bottom: var(--spacing-25) !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-pd-b-0-md {
    padding-bottom: 0 !important;
  }

  .ro-pd-b-1-md {
    padding-bottom: var(--spacing-xs) !important;
  }

  .ro-pd-b-2-md {
    padding-bottom: var(--spacing-sm) !important;
  }

  .ro-pd-b-3-md {
    padding-bottom: var(--spacing-md) !important;
  }

  .ro-pd-b-4-md {
    padding-bottom: var(--spacing-lg) !important;
  }

  .ro-pd-b-5-md {
    padding-bottom: var(--spacing-xl) !important;
  }

  .ro-pd-b-6-md {
    padding-bottom: var(--spacing-6) !important;
  }

  .ro-pd-b-7-md {
    padding-bottom: var(--spacing-7) !important;
  }

  .ro-pd-b-8-md {
    padding-bottom: var(--spacing-8) !important;
  }

  .ro-pd-b-9-md {
    padding-bottom: var(--spacing-9) !important;
  }

  .ro-pd-b-10-md {
    padding-bottom: var(--spacing-10) !important;
  }

  .ro-pd-b-15-md {
    padding-bottom: var(--spacing-15) !important;
  }

  .ro-pd-b-20-md {
    padding-bottom: var(--spacing-20) !important;
  }

  .ro-pd-b-25-md {
    padding-bottom: var(--spacing-25) !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-pd-b-0-lg {
    padding-bottom: 0 !important;
  }

  .ro-pd-b-1-lg {
    padding-bottom: var(--spacing-xs) !important;
  }

  .ro-pd-b-2-lg {
    padding-bottom: var(--spacing-sm) !important;
  }

  .ro-pd-b-3-lg {
    padding-bottom: var(--spacing-md) !important;
  }

  .ro-pd-b-4-lg {
    padding-bottom: var(--spacing-lg) !important;
  }

  .ro-pd-b-5-lg {
    padding-bottom: var(--spacing-xl) !important;
  }

  .ro-pd-b-6-lg {
    padding-bottom: var(--spacing-6) !important;
  }

  .ro-pd-b-7-lg {
    padding-bottom: var(--spacing-7) !important;
  }

  .ro-pd-b-8-lg {
    padding-bottom: var(--spacing-8) !important;
  }

  .ro-pd-b-9-lg {
    padding-bottom: var(--spacing-9) !important;
  }

  .ro-pd-b-10-lg {
    padding-bottom: var(--spacing-10) !important;
  }

  .ro-pd-b-15-lg {
    padding-bottom: var(--spacing-15) !important;
  }

  .ro-pd-b-20-lg {
    padding-bottom: var(--spacing-20) !important;
  }

  .ro-pd-b-25-lg {
    padding-bottom: var(--spacing-25) !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-pd-b-0-xl {
    padding-bottom: 0 !important;
  }

  .ro-pd-b-1-xl {
    padding-bottom: var(--spacing-xs) !important;
  }

  .ro-pd-b-2-xl {
    padding-bottom: var(--spacing-sm) !important;
  }

  .ro-pd-b-3-xl {
    padding-bottom: var(--spacing-md) !important;
  }

  .ro-pd-b-4-xl {
    padding-bottom: var(--spacing-lg) !important;
  }

  .ro-pd-b-5-xl {
    padding-bottom: var(--spacing-xl) !important;
  }

  .ro-pd-b-6-xl {
    padding-bottom: var(--spacing-6) !important;
  }

  .ro-pd-b-7-xl {
    padding-bottom: var(--spacing-7) !important;
  }

  .ro-pd-b-8-xl {
    padding-bottom: var(--spacing-8) !important;
  }

  .ro-pd-b-9-xl {
    padding-bottom: var(--spacing-9) !important;
  }

  .ro-pd-b-10-xl {
    padding-bottom: var(--spacing-10) !important;
  }

  .ro-pd-b-15-xl {
    padding-bottom: var(--spacing-15) !important;
  }

  .ro-pd-b-20-xl {
    padding-bottom: var(--spacing-20) !important;
  }

  .ro-pd-b-25-xl {
    padding-bottom: var(--spacing-25) !important;
  }
}
/* ===============  Padding - Top classes ============= */
.ro-pd-t-0 {
  padding-top: 0 !important;
}

.ro-pd-t-1 {
  padding-top: var(--spacing-xs) !important;
}

.ro-pd-t-2 {
  padding-top: var(--spacing-sm) !important;
}

.ro-pd-t-3 {
  padding-top: var(--spacing-md) !important;
}

.ro-pd-t-4 {
  padding-top: var(--spacing-lg) !important;
}

.ro-pd-t-5 {
  padding-top: var(--spacing-xl) !important;
}

.ro-pd-t-6 {
  padding-top: var(--spacing-6) !important;
}

.ro-pd-t-7 {
  padding-top: var(--spacing-7) !important;
}

.ro-pd-t-8 {
  padding-top: var(--spacing-8) !important;
}

.ro-pd-t-9 {
  padding-top: var(--spacing-9) !important;
}

.ro-pd-t-10 {
  padding-top: var(--spacing-10) !important;
}

.ro-pd-t-15 {
  padding-top: var(--spacing-15) !important;
}

.ro-pd-t-20 {
  padding-top: var(--spacing-20) !important;
}

.ro-pd-t-25 {
  padding-top: var(--spacing-25) !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-pd-t-0-sm {
    padding-top: 0 !important;
  }

  .ro-pd-t-1-sm {
    padding-top: var(--spacing-xs) !important;
  }

  .ro-pd-t-2-sm {
    padding-top: var(--spacing-sm) !important;
  }

  .ro-pd-t-3-sm {
    padding-top: var(--spacing-md) !important;
  }

  .ro-pd-t-4-sm {
    padding-top: var(--spacing-lg) !important;
  }

  .ro-pd-t-5-sm {
    padding-top: var(--spacing-xl) !important;
  }

  .ro-pd-t-6-sm {
    padding-top: var(--spacing-6) !important;
  }

  .ro-pd-t-7-sm {
    padding-top: var(--spacing-7) !important;
  }

  .ro-pd-t-8-sm {
    padding-top: var(--spacing-8) !important;
  }

  .ro-pd-t-9-sm {
    padding-top: var(--spacing-9) !important;
  }

  .ro-pd-t-10-sm {
    padding-top: var(--spacing-10) !important;
  }

  .ro-pd-t-15-sm {
    padding-top: var(--spacing-15) !important;
  }

  .ro-pd-t-20-sm {
    padding-top: var(--spacing-20) !important;
  }

  .ro-pd-t-25-sm {
    padding-top: var(--spacing-25) !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-pd-t-0-md {
    padding-top: 0 !important;
  }

  .ro-pd-t-1-md {
    padding-top: var(--spacing-xs) !important;
  }

  .ro-pd-t-2-md {
    padding-top: var(--spacing-sm) !important;
  }

  .ro-pd-t-3-md {
    padding-top: var(--spacing-md) !important;
  }

  .ro-pd-t-4-md {
    padding-top: var(--spacing-lg) !important;
  }

  .ro-pd-t-5-md {
    padding-top: var(--spacing-xl) !important;
  }

  .ro-pd-t-6-md {
    padding-top: var(--spacing-6) !important;
  }

  .ro-pd-t-7-md {
    padding-top: var(--spacing-7) !important;
  }

  .ro-pd-t-8-md {
    padding-top: var(--spacing-8) !important;
  }

  .ro-pd-t-9-md {
    padding-top: var(--spacing-9) !important;
  }

  .ro-pd-t-10-md {
    padding-top: var(--spacing-10) !important;
  }

  .ro-pd-t-15-md {
    padding-top: var(--spacing-15) !important;
  }

  .ro-pd-t-20-md {
    padding-top: var(--spacing-20) !important;
  }

  .ro-pd-t-25-md {
    padding-top: var(--spacing-25) !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-pd-t-0-lg {
    padding-top: 0 !important;
  }

  .ro-pd-t-1-lg {
    padding-top: var(--spacing-xs) !important;
  }

  .ro-pd-t-2-lg {
    padding-top: var(--spacing-sm) !important;
  }

  .ro-pd-t-3-lg {
    padding-top: var(--spacing-md) !important;
  }

  .ro-pd-t-4-lg {
    padding-top: var(--spacing-lg) !important;
  }

  .ro-pd-t-5-lg {
    padding-top: var(--spacing-xl) !important;
  }

  .ro-pd-t-6-lg {
    padding-top: var(--spacing-6) !important;
  }

  .ro-pd-t-7-lg {
    padding-top: var(--spacing-7) !important;
  }

  .ro-pd-t-8-lg {
    padding-top: var(--spacing-8) !important;
  }

  .ro-pd-t-9-lg {
    padding-top: var(--spacing-9) !important;
  }

  .ro-pd-t-10-lg {
    padding-top: var(--spacing-10) !important;
  }

  .ro-pd-t-15-lg {
    padding-top: var(--spacing-15) !important;
  }

  .ro-pd-t-20-lg {
    padding-top: var(--spacing-20) !important;
  }

  .ro-pd-t-25-lg {
    padding-top: var(--spacing-25) !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-pd-t-0-xl {
    padding-top: 0 !important;
  }

  .ro-pd-t-1-xl {
    padding-top: var(--spacing-xs) !important;
  }

  .ro-pd-t-2-xl {
    padding-top: var(--spacing-sm) !important;
  }

  .ro-pd-t-3-xl {
    padding-top: var(--spacing-md) !important;
  }

  .ro-pd-t-4-xl {
    padding-top: var(--spacing-lg) !important;
  }

  .ro-pd-t-5-xl {
    padding-top: var(--spacing-xl) !important;
  }

  .ro-pd-t-6-xl {
    padding-top: var(--spacing-6) !important;
  }

  .ro-pd-t-7-xl {
    padding-top: var(--spacing-7) !important;
  }

  .ro-pd-t-8-xl {
    padding-top: var(--spacing-8) !important;
  }

  .ro-pd-t-9-xl {
    padding-top: var(--spacing-9) !important;
  }

  .ro-pd-t-10-xl {
    padding-top: var(--spacing-10) !important;
  }

  .ro-pd-t-15-xl {
    padding-top: var(--spacing-15) !important;
  }

  .ro-pd-t-20-xl {
    padding-top: var(--spacing-20) !important;
  }

  .ro-pd-t-25-xl {
    padding-top: var(--spacing-25) !important;
  }
}
/* ===============  Border Radius classes ============= */
.ro-border-r-25 {
  border-radius: 25rem !important;
}

.ro-border-r-50 {
  border-radius: 50rem !important;
}

.ro-border-r-0 {
  border-radius: 0 !important;
}

.ro-border-r-3 {
  border-radius: 0.3rem !important;
}

.ro-border-r-4 {
  border-radius: 0.45rem !important;
}

.ro-border-r-6 {
  border-radius: 0.6rem !important;
}

.ro-border-r-8 {
  border-radius: 0.8rem !important;
}

.ro-border-r-10 {
  border-radius: 1rem !important;
}

.ro-border-r-30 {
  border-radius: 3rem !important;
}

.ro-border-r-circle {
  border-radius: 50% !important;
}

/* ===============  Overflow classes ============= */
.ro-overflow-auto {
  overflow: auto !important;
}

.ro-overflow-visible {
  overflow: visible !important;
}

.ro-overflow-hidden {
  overflow: hidden !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-overflow-auto-sm {
    overflow: auto !important;
  }

  .ro-overflow-visible-sm {
    overflow: visible !important;
  }

  .ro-overflow-hidden-sm {
    overflow: hidden !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-overflow-auto-md {
    overflow: auto !important;
  }

  .ro-overflow-visible-md {
    overflow: visible !important;
  }

  .ro-overflow-hidden-md {
    overflow: hidden !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-overflow-auto-lg {
    overflow: auto !important;
  }

  .ro-overflow-visible-lg {
    overflow: visible !important;
  }

  .ro-overflow-hidden-lg {
    overflow: hidden !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-overflow-auto-xl {
    overflow: auto !important;
  }

  .ro-overflow-visible-xl {
    overflow: visible !important;
  }

  .ro-overflow-hidden-xl {
    overflow: hidden !important;
  }
}
/* ===============  Dividers classes ============= */
.ro-divider-50 {
  width: 50% !important;
}

.ro-divider-60 {
  width: 60% !important;
}

.ro-divider-70 {
  width: 70% !important;
}

.ro-divider-80 {
  width: 80% !important;
}

.ro-divider-90 {
  width: 90% !important;
}

/* ===============  Box Shadow classes ============= */
.ro-bxs-none {
  box-shadow: none !important;
}

.ro-bxs-xs {
  box-shadow: 0 0 0.21rem rgba(0, 0, 0, 0.14) !important;
}

.ro-bxs-sm {
  box-shadow: 0 0 0.31rem rgba(0, 0, 0, 0.15) !important;
}

.ro-bxs-md {
  box-shadow: 0 0 0.41rem rgba(0, 0, 0, 0.16) !important;
}

.ro-bxs-lg {
  box-shadow: 0 0 0.51rem rgba(0, 0, 0, 0.17) !important;
}

.ro-bxs-xl {
  box-shadow: 0 0 0.61rem rgba(0, 0, 0, 0.18) !important;
}

/* ===============  Border Width classes ============= */
.ro-border-w-0 {
  border-width: 0 !important;
}

.ro-border-w-1 {
  border-width: 0.1rem !important;
}

.ro-border-w-2 {
  border-width: 0.2rem !important;
}

.ro-border-w-4 {
  border-width: 0.4rem !important;
}

.ro-border-w-6 {
  border-width: 0.6rem !important;
}

.ro-border-w-8 {
  border-width: 0.8rem !important;
}

/* ===============  Border Style classes ============= */
.ro-border-solid {
  border-style: solid !important;
}

.ro-border-dotted {
  border-style: dotted !important;
}

.ro-border-dashed {
  border-style: dashed !important;
}

/* ===============  Border Color classes ============= */
.ro-border-clr-primary {
  border-color: var(--primary) !important;
}

.ro-border-clr-secondary {
  border-color: var(--secondary) !important;
}

.ro-border-clr-accent {
  border-color: var(--accent) !important;
}

.ro-border-clr-success {
  border-color: var(--success) !important;
}

.ro-border-clr-info {
  border-color: var(--info) !important;
}

.ro-border-clr-warning {
  border-color: var(--warning) !important;
}

.ro-border-clr-danger {
  border-color: var(--danger) !important;
}

.ro-border-clr-gray {
  border-color: var(--gray) !important;
}

.ro-border-clr-dark {
  border-color: var(--dark) !important;
}

/* ===============  Aspect Ratio classes ============= */
.ro-aspect-1-1 {
  padding-top: 100% !important;
}

.ro-aspect-16-9 {
  padding-top: 56.25% !important;
}

.ro-aspect-4-3 {
  padding-top: 75% !important;
}

.ro-aspect-3-2 {
  padding-top: 66.6666666667% !important;
}

.ro-aspect-8-5 {
  padding-top: 62.5% !important;
}

/* ===============  Text Alignment classes ============= */
.ro-text-left {
  text-align: left !important;
}

.ro-text-center {
  text-align: center !important;
}

.ro-text-right {
  text-align: right !important;
}

.ro-text-justify {
  text-align: justify !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-text-left-sm {
    text-align: left !important;
  }

  .ro-text-center-sm {
    text-align: center !important;
  }

  .ro-text-right-sm {
    text-align: right !important;
  }

  .ro-text-justify-sm {
    text-align: justify !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-text-left-md {
    text-align: left !important;
  }

  .ro-text-center-md {
    text-align: center !important;
  }

  .ro-text-right-md {
    text-align: right !important;
  }

  .ro-text-justify-md {
    text-align: justify !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-text-left-lg {
    text-align: left !important;
  }

  .ro-text-center-lg {
    text-align: center !important;
  }

  .ro-text-right-lg {
    text-align: right !important;
  }

  .ro-text-justify-lg {
    text-align: justify !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-text-left-xl {
    text-align: left !important;
  }

  .ro-text-center-xl {
    text-align: center !important;
  }

  .ro-text-right-xl {
    text-align: right !important;
  }

  .ro-text-justify-xl {
    text-align: justify !important;
  }
}
/* ===============  Text Transform classes ============= */
.ro-text-t-none {
  text-transform: none !important;
}

.ro-text-t-lowercase {
  text-transform: lowercase !important;
}

.ro-text-t-capitalize {
  text-transform: capitalize !important;
}

.ro-text-t-uppercase {
  text-transform: uppercase !important;
}

/* ===============  Text Decoration classes ============= */
.ro-text-d-underline {
  text-decoration: underline !important;
}

.ro-text-d-line-through {
  text-decoration: line-through !important;
}

/* ===============  Font Weights classes ============= */
.ro-fw-light {
  font-weight: var(--font-weight-light) !important;
}

.ro-fw-regular {
  font-weight: var(--font-weight-regular) !important;
}

.ro-fw-medium {
  font-weight: var(--font-weight-medium) !important;
}

.ro-fw-bold {
  font-weight: var(--font-weight-bold) !important;
}

/* ===============  Font Sizes classes ============= */
.ro-fs-05 {
  font-size: var(--font-05) !important;
}

.ro-fs-1 {
  font-size: var(--font-1) !important;
}

.ro-fs-15 {
  font-size: var(--font-15) !important;
}

.ro-fs-2 {
  font-size: var(--font-2) !important;
}

.ro-fs-25 {
  font-size: var(--font-25) !important;
}

.ro-fs-3 {
  font-size: var(--font-3) !important;
}

.ro-fs-35 {
  font-size: var(--font-35) !important;
}

.ro-fs-4 {
  font-size: var(--font-4) !important;
}

.ro-fs-45 {
  font-size: var(--font-45) !important;
}

.ro-fs-5 {
  font-size: var(--font-5) !important;
}

.ro-fs-55 {
  font-size: var(--font-55) !important;
}

.ro-fs-6 {
  font-size: var(--font-6) !important;
}

.ro-fs-65 {
  font-size: var(--font-65) !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-fs-05-sm {
    font-size: var(--font-05) !important;
  }

  .ro-fs-1-sm {
    font-size: var(--font-1) !important;
  }

  .ro-fs-15-sm {
    font-size: var(--font-15) !important;
  }

  .ro-fs-2-sm {
    font-size: var(--font-2) !important;
  }

  .ro-fs-25-sm {
    font-size: var(--font-25) !important;
  }

  .ro-fs-3-sm {
    font-size: var(--font-3) !important;
  }

  .ro-fs-35-sm {
    font-size: var(--font-35) !important;
  }

  .ro-fs-4-sm {
    font-size: var(--font-4) !important;
  }

  .ro-fs-45-sm {
    font-size: var(--font-45) !important;
  }

  .ro-fs-5-sm {
    font-size: var(--font-5) !important;
  }

  .ro-fs-55-sm {
    font-size: var(--font-55) !important;
  }

  .ro-fs-6-sm {
    font-size: var(--font-6) !important;
  }

  .ro-fs-65-sm {
    font-size: var(--font-65) !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-fs-05-md {
    font-size: var(--font-05) !important;
  }

  .ro-fs-1-md {
    font-size: var(--font-1) !important;
  }

  .ro-fs-15-md {
    font-size: var(--font-15) !important;
  }

  .ro-fs-2-md {
    font-size: var(--font-2) !important;
  }

  .ro-fs-25-md {
    font-size: var(--font-25) !important;
  }

  .ro-fs-3-md {
    font-size: var(--font-3) !important;
  }

  .ro-fs-35-md {
    font-size: var(--font-35) !important;
  }

  .ro-fs-4-md {
    font-size: var(--font-4) !important;
  }

  .ro-fs-45-md {
    font-size: var(--font-45) !important;
  }

  .ro-fs-5-md {
    font-size: var(--font-5) !important;
  }

  .ro-fs-55-md {
    font-size: var(--font-55) !important;
  }

  .ro-fs-6-md {
    font-size: var(--font-6) !important;
  }

  .ro-fs-65-md {
    font-size: var(--font-65) !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-fs-05-lg {
    font-size: var(--font-05) !important;
  }

  .ro-fs-1-lg {
    font-size: var(--font-1) !important;
  }

  .ro-fs-15-lg {
    font-size: var(--font-15) !important;
  }

  .ro-fs-2-lg {
    font-size: var(--font-2) !important;
  }

  .ro-fs-25-lg {
    font-size: var(--font-25) !important;
  }

  .ro-fs-3-lg {
    font-size: var(--font-3) !important;
  }

  .ro-fs-35-lg {
    font-size: var(--font-35) !important;
  }

  .ro-fs-4-lg {
    font-size: var(--font-4) !important;
  }

  .ro-fs-45-lg {
    font-size: var(--font-45) !important;
  }

  .ro-fs-5-lg {
    font-size: var(--font-5) !important;
  }

  .ro-fs-55-lg {
    font-size: var(--font-55) !important;
  }

  .ro-fs-6-lg {
    font-size: var(--font-6) !important;
  }

  .ro-fs-65-lg {
    font-size: var(--font-65) !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-fs-05-xl {
    font-size: var(--font-05) !important;
  }

  .ro-fs-1-xl {
    font-size: var(--font-1) !important;
  }

  .ro-fs-15-xl {
    font-size: var(--font-15) !important;
  }

  .ro-fs-2-xl {
    font-size: var(--font-2) !important;
  }

  .ro-fs-25-xl {
    font-size: var(--font-25) !important;
  }

  .ro-fs-3-xl {
    font-size: var(--font-3) !important;
  }

  .ro-fs-35-xl {
    font-size: var(--font-35) !important;
  }

  .ro-fs-4-xl {
    font-size: var(--font-4) !important;
  }

  .ro-fs-45-xl {
    font-size: var(--font-45) !important;
  }

  .ro-fs-5-xl {
    font-size: var(--font-5) !important;
  }

  .ro-fs-55-xl {
    font-size: var(--font-55) !important;
  }

  .ro-fs-6-xl {
    font-size: var(--font-6) !important;
  }

  .ro-fs-65-xl {
    font-size: var(--font-65) !important;
  }
}
/* ===============  Position classes ============= */
.ro-ps-initial {
  position: initial !important;
}

.ro-ps-relative {
  position: relative !important;
}

.ro-ps-absolute {
  position: absolute !important;
}

.ro-ps-fixed {
  position: fixed !important;
}

.ro-ps-sticky {
  position: sticky !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-ps-initial-sm {
    position: initial !important;
  }

  .ro-ps-relative-sm {
    position: relative !important;
  }

  .ro-ps-absolute-sm {
    position: absolute !important;
  }

  .ro-ps-fixed-sm {
    position: fixed !important;
  }

  .ro-ps-sticky-sm {
    position: sticky !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-ps-initial-md {
    position: initial !important;
  }

  .ro-ps-relative-md {
    position: relative !important;
  }

  .ro-ps-absolute-md {
    position: absolute !important;
  }

  .ro-ps-fixed-md {
    position: fixed !important;
  }

  .ro-ps-sticky-md {
    position: sticky !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-ps-initial-lg {
    position: initial !important;
  }

  .ro-ps-relative-lg {
    position: relative !important;
  }

  .ro-ps-absolute-lg {
    position: absolute !important;
  }

  .ro-ps-fixed-lg {
    position: fixed !important;
  }

  .ro-ps-sticky-lg {
    position: sticky !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-ps-initial-xl {
    position: initial !important;
  }

  .ro-ps-relative-xl {
    position: relative !important;
  }

  .ro-ps-absolute-xl {
    position: absolute !important;
  }

  .ro-ps-fixed-xl {
    position: fixed !important;
  }

  .ro-ps-sticky-xl {
    position: sticky !important;
  }
}
/* ===============  Z-Index classes ============= */
.ro-zindex-n-1 {
  z-index: -1 !important;
}

.ro-zindex-1 {
  z-index: 1 !important;
}

.ro-zindex-100 {
  z-index: 100 !important;
}

.ro-zindex-200 {
  z-index: 200 !important;
}

.ro-zindex-300 {
  z-index: 300 !important;
}

.ro-zindex-400 {
  z-index: 400 !important;
}

.ro-zindex-500 {
  z-index: 500 !important;
}

.ro-zindex-600 {
  z-index: 600 !important;
}

.ro-zindex-700 {
  z-index: 700 !important;
}

.ro-zindex-800 {
  z-index: 800 !important;
}

.ro-zindex-900 {
  z-index: 900 !important;
}

.ro-zindex-1000 {
  z-index: 1000 !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-zindex-n-1-sm {
    z-index: -1 !important;
  }

  .ro-zindex-1-sm {
    z-index: 1 !important;
  }

  .ro-zindex-100-sm {
    z-index: 100 !important;
  }

  .ro-zindex-200-sm {
    z-index: 200 !important;
  }

  .ro-zindex-300-sm {
    z-index: 300 !important;
  }

  .ro-zindex-400-sm {
    z-index: 400 !important;
  }

  .ro-zindex-500-sm {
    z-index: 500 !important;
  }

  .ro-zindex-600-sm {
    z-index: 600 !important;
  }

  .ro-zindex-700-sm {
    z-index: 700 !important;
  }

  .ro-zindex-800-sm {
    z-index: 800 !important;
  }

  .ro-zindex-900-sm {
    z-index: 900 !important;
  }

  .ro-zindex-1000-sm {
    z-index: 1000 !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-zindex-n-1-md {
    z-index: -1 !important;
  }

  .ro-zindex-1-md {
    z-index: 1 !important;
  }

  .ro-zindex-100-md {
    z-index: 100 !important;
  }

  .ro-zindex-200-md {
    z-index: 200 !important;
  }

  .ro-zindex-300-md {
    z-index: 300 !important;
  }

  .ro-zindex-400-md {
    z-index: 400 !important;
  }

  .ro-zindex-500-md {
    z-index: 500 !important;
  }

  .ro-zindex-600-md {
    z-index: 600 !important;
  }

  .ro-zindex-700-md {
    z-index: 700 !important;
  }

  .ro-zindex-800-md {
    z-index: 800 !important;
  }

  .ro-zindex-900-md {
    z-index: 900 !important;
  }

  .ro-zindex-1000-md {
    z-index: 1000 !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-zindex-n-1-lg {
    z-index: -1 !important;
  }

  .ro-zindex-1-lg {
    z-index: 1 !important;
  }

  .ro-zindex-100-lg {
    z-index: 100 !important;
  }

  .ro-zindex-200-lg {
    z-index: 200 !important;
  }

  .ro-zindex-300-lg {
    z-index: 300 !important;
  }

  .ro-zindex-400-lg {
    z-index: 400 !important;
  }

  .ro-zindex-500-lg {
    z-index: 500 !important;
  }

  .ro-zindex-600-lg {
    z-index: 600 !important;
  }

  .ro-zindex-700-lg {
    z-index: 700 !important;
  }

  .ro-zindex-800-lg {
    z-index: 800 !important;
  }

  .ro-zindex-900-lg {
    z-index: 900 !important;
  }

  .ro-zindex-1000-lg {
    z-index: 1000 !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-zindex-n-1-xl {
    z-index: -1 !important;
  }

  .ro-zindex-1-xl {
    z-index: 1 !important;
  }

  .ro-zindex-100-xl {
    z-index: 100 !important;
  }

  .ro-zindex-200-xl {
    z-index: 200 !important;
  }

  .ro-zindex-300-xl {
    z-index: 300 !important;
  }

  .ro-zindex-400-xl {
    z-index: 400 !important;
  }

  .ro-zindex-500-xl {
    z-index: 500 !important;
  }

  .ro-zindex-600-xl {
    z-index: 600 !important;
  }

  .ro-zindex-700-xl {
    z-index: 700 !important;
  }

  .ro-zindex-800-xl {
    z-index: 800 !important;
  }

  .ro-zindex-900-xl {
    z-index: 900 !important;
  }

  .ro-zindex-1000-xl {
    z-index: 1000 !important;
  }
}
/* ===============  Flexbox and Block classes ============= */
.ro-d-block {
  display: block !important;
}

.ro-d-in-block {
  display: inline-block !important;
}

.ro-d-flex {
  display: flex !important;
}

.ro-d-in-flex {
  display: inline-flex !important;
}

.ro-d-none {
  display: none !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-d-block-sm {
    display: block !important;
  }

  .ro-d-in-block-sm {
    display: inline-block !important;
  }

  .ro-d-flex-sm {
    display: flex !important;
  }

  .ro-d-in-flex-sm {
    display: inline-flex !important;
  }

  .ro-d-none-sm {
    display: none !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-d-block-md {
    display: block !important;
  }

  .ro-d-in-block-md {
    display: inline-block !important;
  }

  .ro-d-flex-md {
    display: flex !important;
  }

  .ro-d-in-flex-md {
    display: inline-flex !important;
  }

  .ro-d-none-md {
    display: none !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-d-block-lg {
    display: block !important;
  }

  .ro-d-in-block-lg {
    display: inline-block !important;
  }

  .ro-d-flex-lg {
    display: flex !important;
  }

  .ro-d-in-flex-lg {
    display: inline-flex !important;
  }

  .ro-d-none-lg {
    display: none !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-d-block-xl {
    display: block !important;
  }

  .ro-d-in-block-xl {
    display: inline-block !important;
  }

  .ro-d-flex-xl {
    display: flex !important;
  }

  .ro-d-in-flex-xl {
    display: inline-flex !important;
  }

  .ro-d-none-xl {
    display: none !important;
  }
}
/* ===============  Flexbox Direction classes ============= */
.ro-d-row {
  flex-direction: row !important;
}

.ro-d-row-reverse {
  flex-direction: row-reverse !important;
}

.ro-d-column {
  flex-direction: column !important;
}

.ro-d-column-reverse {
  flex-direction: column-reverse !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-d-row-sm {
    flex-direction: row !important;
  }

  .ro-d-row-reverse-sm {
    flex-direction: row-reverse !important;
  }

  .ro-d-column-sm {
    flex-direction: column !important;
  }

  .ro-d-column-reverse-sm {
    flex-direction: column-reverse !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-d-row-md {
    flex-direction: row !important;
  }

  .ro-d-row-reverse-md {
    flex-direction: row-reverse !important;
  }

  .ro-d-column-md {
    flex-direction: column !important;
  }

  .ro-d-column-reverse-md {
    flex-direction: column-reverse !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-d-row-lg {
    flex-direction: row !important;
  }

  .ro-d-row-reverse-lg {
    flex-direction: row-reverse !important;
  }

  .ro-d-column-lg {
    flex-direction: column !important;
  }

  .ro-d-column-reverse-lg {
    flex-direction: column-reverse !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-d-row-xl {
    flex-direction: row !important;
  }

  .ro-d-row-reverse-xl {
    flex-direction: row-reverse !important;
  }

  .ro-d-column-xl {
    flex-direction: column !important;
  }

  .ro-d-column-reverse-xl {
    flex-direction: column-reverse !important;
  }
}
/* ===============  Flexbox - Justify Content classes ============= */
.ro-justify-stretch {
  justify-content: stretch !important;
}

.ro-justify-start {
  justify-content: flex-start !important;
}

.ro-justify-end {
  justify-content: flex-end !important;
}

.ro-justify-evenly {
  justify-content: space-evenly !important;
}

.ro-justify-around {
  justify-content: space-around !important;
}

.ro-justify-between {
  justify-content: space-between !important;
}

.ro-justify-center {
  justify-content: center !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-justify-stretch-sm {
    justify-content: stretch !important;
  }

  .ro-justify-start-sm {
    justify-content: flex-start !important;
  }

  .ro-justify-end-sm {
    justify-content: flex-end !important;
  }

  .ro-justify-evenly-sm {
    justify-content: space-evenly !important;
  }

  .ro-justify-around-sm {
    justify-content: space-around !important;
  }

  .ro-justify-between-sm {
    justify-content: space-between !important;
  }

  .ro-justify-center-sm {
    justify-content: center !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-justify-stretch-md {
    justify-content: stretch !important;
  }

  .ro-justify-start-md {
    justify-content: flex-start !important;
  }

  .ro-justify-end-md {
    justify-content: flex-end !important;
  }

  .ro-justify-evenly-md {
    justify-content: space-evenly !important;
  }

  .ro-justify-around-md {
    justify-content: space-around !important;
  }

  .ro-justify-between-md {
    justify-content: space-between !important;
  }

  .ro-justify-center-md {
    justify-content: center !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-justify-stretch-lg {
    justify-content: stretch !important;
  }

  .ro-justify-start-lg {
    justify-content: flex-start !important;
  }

  .ro-justify-end-lg {
    justify-content: flex-end !important;
  }

  .ro-justify-evenly-lg {
    justify-content: space-evenly !important;
  }

  .ro-justify-around-lg {
    justify-content: space-around !important;
  }

  .ro-justify-between-lg {
    justify-content: space-between !important;
  }

  .ro-justify-center-lg {
    justify-content: center !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-justify-stretch-xl {
    justify-content: stretch !important;
  }

  .ro-justify-start-xl {
    justify-content: flex-start !important;
  }

  .ro-justify-end-xl {
    justify-content: flex-end !important;
  }

  .ro-justify-evenly-xl {
    justify-content: space-evenly !important;
  }

  .ro-justify-around-xl {
    justify-content: space-around !important;
  }

  .ro-justify-between-xl {
    justify-content: space-between !important;
  }

  .ro-justify-center-xl {
    justify-content: center !important;
  }
}
/* ===============  Flexbox - Align Items classes ============= */
.ro-align-stretch {
  align-items: stretch !important;
}

.ro-align-start {
  align-items: flex-start !important;
}

.ro-align-end {
  align-items: flex-end !important;
}

.ro-align-center {
  align-items: center !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-align-stretch-sm {
    align-items: stretch !important;
  }

  .ro-align-start-sm {
    align-items: flex-start !important;
  }

  .ro-align-end-sm {
    align-items: flex-end !important;
  }

  .ro-align-center-sm {
    align-items: center !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-align-stretch-md {
    align-items: stretch !important;
  }

  .ro-align-start-md {
    align-items: flex-start !important;
  }

  .ro-align-end-md {
    align-items: flex-end !important;
  }

  .ro-align-center-md {
    align-items: center !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-align-stretch-lg {
    align-items: stretch !important;
  }

  .ro-align-start-lg {
    align-items: flex-start !important;
  }

  .ro-align-end-lg {
    align-items: flex-end !important;
  }

  .ro-align-center-lg {
    align-items: center !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-align-stretch-xl {
    align-items: stretch !important;
  }

  .ro-align-start-xl {
    align-items: flex-start !important;
  }

  .ro-align-end-xl {
    align-items: flex-end !important;
  }

  .ro-align-center-xl {
    align-items: center !important;
  }
}
/* ===============  Flexbox - Ordering classes ============= */
.ro-order-n-1 {
  order: -1 !important;
}

.ro-order-0 {
  order: 0 !important;
}

.ro-order-1 {
  order: 1 !important;
}

.ro-order-2 {
  order: 2 !important;
}

.ro-order-3 {
  order: 3 !important;
}

.ro-order-4 {
  order: 4 !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-order-n-1-sm {
    order: -1 !important;
  }

  .ro-order-0-sm {
    order: 0 !important;
  }

  .ro-order-1-sm {
    order: 1 !important;
  }

  .ro-order-2-sm {
    order: 2 !important;
  }

  .ro-order-3-sm {
    order: 3 !important;
  }

  .ro-order-4-sm {
    order: 4 !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-order-n-1-md {
    order: -1 !important;
  }

  .ro-order-0-md {
    order: 0 !important;
  }

  .ro-order-1-md {
    order: 1 !important;
  }

  .ro-order-2-md {
    order: 2 !important;
  }

  .ro-order-3-md {
    order: 3 !important;
  }

  .ro-order-4-md {
    order: 4 !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-order-n-1-lg {
    order: -1 !important;
  }

  .ro-order-0-lg {
    order: 0 !important;
  }

  .ro-order-1-lg {
    order: 1 !important;
  }

  .ro-order-2-lg {
    order: 2 !important;
  }

  .ro-order-3-lg {
    order: 3 !important;
  }

  .ro-order-4-lg {
    order: 4 !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-order-n-1-xl {
    order: -1 !important;
  }

  .ro-order-0-xl {
    order: 0 !important;
  }

  .ro-order-1-xl {
    order: 1 !important;
  }

  .ro-order-2-xl {
    order: 2 !important;
  }

  .ro-order-3-xl {
    order: 3 !important;
  }

  .ro-order-4-xl {
    order: 4 !important;
  }
}
/* ===============  Flexbox - Basis classes ============= */
.ro-flex-1 {
  flex: 1 !important;
}

.ro-flex-2 {
  flex: 2 !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-flex-1-sm {
    flex: 1 !important;
  }

  .ro-flex-2-sm {
    flex: 2 !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-flex-1-md {
    flex: 1 !important;
  }

  .ro-flex-2-md {
    flex: 2 !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-flex-1-lg {
    flex: 1 !important;
  }

  .ro-flex-2-lg {
    flex: 2 !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-flex-1-xl {
    flex: 1 !important;
  }

  .ro-flex-2-xl {
    flex: 2 !important;
  }
}
/* ===============  Flexbox - Basis - Auto classes ============= */
.ro-flex-auto {
  flex: 0 0 auto !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-flex-auto-sm {
    flex: 0 0 auto !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-flex-auto-md {
    flex: 0 0 auto !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-flex-auto-lg {
    flex: 0 0 auto !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-flex-auto-xl {
    flex: 0 0 auto !important;
  }
}
/* ===============  Margin - All Around classes ============= */
.ro-mg-auto {
  margin: auto !important;
}

.ro-mg-0 {
  margin: 0 !important;
}

.ro-mg-1 {
  margin: var(--spacing-xs) !important;
}

.ro-mg-2 {
  margin: var(--spacing-sm) !important;
}

.ro-mg-3 {
  margin: var(--spacing-md) !important;
}

.ro-mg-4 {
  margin: var(--spacing-lg) !important;
}

.ro-mg-5 {
  margin: var(--spacing-xl) !important;
}

.ro-mg-6 {
  margin: var(--spacing-6) !important;
}

.ro-mg-7 {
  margin: var(--spacing-7) !important;
}

.ro-mg-8 {
  margin: var(--spacing-8) !important;
}

.ro-mg-9 {
  margin: var(--spacing-9) !important;
}

.ro-mg-10 {
  margin: var(--spacing-10) !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-mg-auto-sm {
    margin: auto !important;
  }

  .ro-mg-0-sm {
    margin: 0 !important;
  }

  .ro-mg-1-sm {
    margin: var(--spacing-xs) !important;
  }

  .ro-mg-2-sm {
    margin: var(--spacing-sm) !important;
  }

  .ro-mg-3-sm {
    margin: var(--spacing-md) !important;
  }

  .ro-mg-4-sm {
    margin: var(--spacing-lg) !important;
  }

  .ro-mg-5-sm {
    margin: var(--spacing-xl) !important;
  }

  .ro-mg-6-sm {
    margin: var(--spacing-6) !important;
  }

  .ro-mg-7-sm {
    margin: var(--spacing-7) !important;
  }

  .ro-mg-8-sm {
    margin: var(--spacing-8) !important;
  }

  .ro-mg-9-sm {
    margin: var(--spacing-9) !important;
  }

  .ro-mg-10-sm {
    margin: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-mg-auto-md {
    margin: auto !important;
  }

  .ro-mg-0-md {
    margin: 0 !important;
  }

  .ro-mg-1-md {
    margin: var(--spacing-xs) !important;
  }

  .ro-mg-2-md {
    margin: var(--spacing-sm) !important;
  }

  .ro-mg-3-md {
    margin: var(--spacing-md) !important;
  }

  .ro-mg-4-md {
    margin: var(--spacing-lg) !important;
  }

  .ro-mg-5-md {
    margin: var(--spacing-xl) !important;
  }

  .ro-mg-6-md {
    margin: var(--spacing-6) !important;
  }

  .ro-mg-7-md {
    margin: var(--spacing-7) !important;
  }

  .ro-mg-8-md {
    margin: var(--spacing-8) !important;
  }

  .ro-mg-9-md {
    margin: var(--spacing-9) !important;
  }

  .ro-mg-10-md {
    margin: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-mg-auto-lg {
    margin: auto !important;
  }

  .ro-mg-0-lg {
    margin: 0 !important;
  }

  .ro-mg-1-lg {
    margin: var(--spacing-xs) !important;
  }

  .ro-mg-2-lg {
    margin: var(--spacing-sm) !important;
  }

  .ro-mg-3-lg {
    margin: var(--spacing-md) !important;
  }

  .ro-mg-4-lg {
    margin: var(--spacing-lg) !important;
  }

  .ro-mg-5-lg {
    margin: var(--spacing-xl) !important;
  }

  .ro-mg-6-lg {
    margin: var(--spacing-6) !important;
  }

  .ro-mg-7-lg {
    margin: var(--spacing-7) !important;
  }

  .ro-mg-8-lg {
    margin: var(--spacing-8) !important;
  }

  .ro-mg-9-lg {
    margin: var(--spacing-9) !important;
  }

  .ro-mg-10-lg {
    margin: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-mg-auto-xl {
    margin: auto !important;
  }

  .ro-mg-0-xl {
    margin: 0 !important;
  }

  .ro-mg-1-xl {
    margin: var(--spacing-xs) !important;
  }

  .ro-mg-2-xl {
    margin: var(--spacing-sm) !important;
  }

  .ro-mg-3-xl {
    margin: var(--spacing-md) !important;
  }

  .ro-mg-4-xl {
    margin: var(--spacing-lg) !important;
  }

  .ro-mg-5-xl {
    margin: var(--spacing-xl) !important;
  }

  .ro-mg-6-xl {
    margin: var(--spacing-6) !important;
  }

  .ro-mg-7-xl {
    margin: var(--spacing-7) !important;
  }

  .ro-mg-8-xl {
    margin: var(--spacing-8) !important;
  }

  .ro-mg-9-xl {
    margin: var(--spacing-9) !important;
  }

  .ro-mg-10-xl {
    margin: var(--spacing-10) !important;
  }
}
/* ===============  Margin - Top classes ============= */
.ro-mg-t-auto {
  margin-top: auto !important;
}

.ro-mg-t-0 {
  margin-top: 0 !important;
}

.ro-mg-t-1 {
  margin-top: var(--spacing-xs) !important;
}

.ro-mg-t-2 {
  margin-top: var(--spacing-sm) !important;
}

.ro-mg-t-3 {
  margin-top: var(--spacing-md) !important;
}

.ro-mg-t-4 {
  margin-top: var(--spacing-lg) !important;
}

.ro-mg-t-5 {
  margin-top: var(--spacing-xl) !important;
}

.ro-mg-t-6 {
  margin-top: var(--spacing-6) !important;
}

.ro-mg-t-7 {
  margin-top: var(--spacing-7) !important;
}

.ro-mg-t-8 {
  margin-top: var(--spacing-8) !important;
}

.ro-mg-t-9 {
  margin-top: var(--spacing-9) !important;
}

.ro-mg-t-10 {
  margin-top: var(--spacing-10) !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-mg-t-auto-sm {
    margin-top: auto !important;
  }

  .ro-mg-t-0-sm {
    margin-top: 0 !important;
  }

  .ro-mg-t-1-sm {
    margin-top: var(--spacing-xs) !important;
  }

  .ro-mg-t-2-sm {
    margin-top: var(--spacing-sm) !important;
  }

  .ro-mg-t-3-sm {
    margin-top: var(--spacing-md) !important;
  }

  .ro-mg-t-4-sm {
    margin-top: var(--spacing-lg) !important;
  }

  .ro-mg-t-5-sm {
    margin-top: var(--spacing-xl) !important;
  }

  .ro-mg-t-6-sm {
    margin-top: var(--spacing-6) !important;
  }

  .ro-mg-t-7-sm {
    margin-top: var(--spacing-7) !important;
  }

  .ro-mg-t-8-sm {
    margin-top: var(--spacing-8) !important;
  }

  .ro-mg-t-9-sm {
    margin-top: var(--spacing-9) !important;
  }

  .ro-mg-t-10-sm {
    margin-top: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-mg-t-auto-md {
    margin-top: auto !important;
  }

  .ro-mg-t-0-md {
    margin-top: 0 !important;
  }

  .ro-mg-t-1-md {
    margin-top: var(--spacing-xs) !important;
  }

  .ro-mg-t-2-md {
    margin-top: var(--spacing-sm) !important;
  }

  .ro-mg-t-3-md {
    margin-top: var(--spacing-md) !important;
  }

  .ro-mg-t-4-md {
    margin-top: var(--spacing-lg) !important;
  }

  .ro-mg-t-5-md {
    margin-top: var(--spacing-xl) !important;
  }

  .ro-mg-t-6-md {
    margin-top: var(--spacing-6) !important;
  }

  .ro-mg-t-7-md {
    margin-top: var(--spacing-7) !important;
  }

  .ro-mg-t-8-md {
    margin-top: var(--spacing-8) !important;
  }

  .ro-mg-t-9-md {
    margin-top: var(--spacing-9) !important;
  }

  .ro-mg-t-10-md {
    margin-top: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-mg-t-auto-lg {
    margin-top: auto !important;
  }

  .ro-mg-t-0-lg {
    margin-top: 0 !important;
  }

  .ro-mg-t-1-lg {
    margin-top: var(--spacing-xs) !important;
  }

  .ro-mg-t-2-lg {
    margin-top: var(--spacing-sm) !important;
  }

  .ro-mg-t-3-lg {
    margin-top: var(--spacing-md) !important;
  }

  .ro-mg-t-4-lg {
    margin-top: var(--spacing-lg) !important;
  }

  .ro-mg-t-5-lg {
    margin-top: var(--spacing-xl) !important;
  }

  .ro-mg-t-6-lg {
    margin-top: var(--spacing-6) !important;
  }

  .ro-mg-t-7-lg {
    margin-top: var(--spacing-7) !important;
  }

  .ro-mg-t-8-lg {
    margin-top: var(--spacing-8) !important;
  }

  .ro-mg-t-9-lg {
    margin-top: var(--spacing-9) !important;
  }

  .ro-mg-t-10-lg {
    margin-top: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-mg-t-auto-xl {
    margin-top: auto !important;
  }

  .ro-mg-t-0-xl {
    margin-top: 0 !important;
  }

  .ro-mg-t-1-xl {
    margin-top: var(--spacing-xs) !important;
  }

  .ro-mg-t-2-xl {
    margin-top: var(--spacing-sm) !important;
  }

  .ro-mg-t-3-xl {
    margin-top: var(--spacing-md) !important;
  }

  .ro-mg-t-4-xl {
    margin-top: var(--spacing-lg) !important;
  }

  .ro-mg-t-5-xl {
    margin-top: var(--spacing-xl) !important;
  }

  .ro-mg-t-6-xl {
    margin-top: var(--spacing-6) !important;
  }

  .ro-mg-t-7-xl {
    margin-top: var(--spacing-7) !important;
  }

  .ro-mg-t-8-xl {
    margin-top: var(--spacing-8) !important;
  }

  .ro-mg-t-9-xl {
    margin-top: var(--spacing-9) !important;
  }

  .ro-mg-t-10-xl {
    margin-top: var(--spacing-10) !important;
  }
}
/* ===============  Margin - Right classes ============= */
.ro-mg-r-auto {
  margin-right: auto !important;
}

.ro-mg-r-0 {
  margin-right: 0 !important;
}

.ro-mg-r-1 {
  margin-right: var(--spacing-xs) !important;
}

.ro-mg-r-2 {
  margin-right: var(--spacing-sm) !important;
}

.ro-mg-r-3 {
  margin-right: var(--spacing-md) !important;
}

.ro-mg-r-4 {
  margin-right: var(--spacing-lg) !important;
}

.ro-mg-r-5 {
  margin-right: var(--spacing-xl) !important;
}

.ro-mg-r-6 {
  margin-right: var(--spacing-6) !important;
}

.ro-mg-r-7 {
  margin-right: var(--spacing-7) !important;
}

.ro-mg-r-8 {
  margin-right: var(--spacing-8) !important;
}

.ro-mg-r-9 {
  margin-right: var(--spacing-9) !important;
}

.ro-mg-r-10 {
  margin-right: var(--spacing-10) !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-mg-r-auto-sm {
    margin-right: auto !important;
  }

  .ro-mg-r-0-sm {
    margin-right: 0 !important;
  }

  .ro-mg-r-1-sm {
    margin-right: var(--spacing-xs) !important;
  }

  .ro-mg-r-2-sm {
    margin-right: var(--spacing-sm) !important;
  }

  .ro-mg-r-3-sm {
    margin-right: var(--spacing-md) !important;
  }

  .ro-mg-r-4-sm {
    margin-right: var(--spacing-lg) !important;
  }

  .ro-mg-r-5-sm {
    margin-right: var(--spacing-xl) !important;
  }

  .ro-mg-r-6-sm {
    margin-right: var(--spacing-6) !important;
  }

  .ro-mg-r-7-sm {
    margin-right: var(--spacing-7) !important;
  }

  .ro-mg-r-8-sm {
    margin-right: var(--spacing-8) !important;
  }

  .ro-mg-r-9-sm {
    margin-right: var(--spacing-9) !important;
  }

  .ro-mg-r-10-sm {
    margin-right: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-mg-r-auto-md {
    margin-right: auto !important;
  }

  .ro-mg-r-0-md {
    margin-right: 0 !important;
  }

  .ro-mg-r-1-md {
    margin-right: var(--spacing-xs) !important;
  }

  .ro-mg-r-2-md {
    margin-right: var(--spacing-sm) !important;
  }

  .ro-mg-r-3-md {
    margin-right: var(--spacing-md) !important;
  }

  .ro-mg-r-4-md {
    margin-right: var(--spacing-lg) !important;
  }

  .ro-mg-r-5-md {
    margin-right: var(--spacing-xl) !important;
  }

  .ro-mg-r-6-md {
    margin-right: var(--spacing-6) !important;
  }

  .ro-mg-r-7-md {
    margin-right: var(--spacing-7) !important;
  }

  .ro-mg-r-8-md {
    margin-right: var(--spacing-8) !important;
  }

  .ro-mg-r-9-md {
    margin-right: var(--spacing-9) !important;
  }

  .ro-mg-r-10-md {
    margin-right: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-mg-r-auto-lg {
    margin-right: auto !important;
  }

  .ro-mg-r-0-lg {
    margin-right: 0 !important;
  }

  .ro-mg-r-1-lg {
    margin-right: var(--spacing-xs) !important;
  }

  .ro-mg-r-2-lg {
    margin-right: var(--spacing-sm) !important;
  }

  .ro-mg-r-3-lg {
    margin-right: var(--spacing-md) !important;
  }

  .ro-mg-r-4-lg {
    margin-right: var(--spacing-lg) !important;
  }

  .ro-mg-r-5-lg {
    margin-right: var(--spacing-xl) !important;
  }

  .ro-mg-r-6-lg {
    margin-right: var(--spacing-6) !important;
  }

  .ro-mg-r-7-lg {
    margin-right: var(--spacing-7) !important;
  }

  .ro-mg-r-8-lg {
    margin-right: var(--spacing-8) !important;
  }

  .ro-mg-r-9-lg {
    margin-right: var(--spacing-9) !important;
  }

  .ro-mg-r-10-lg {
    margin-right: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-mg-r-auto-xl {
    margin-right: auto !important;
  }

  .ro-mg-r-0-xl {
    margin-right: 0 !important;
  }

  .ro-mg-r-1-xl {
    margin-right: var(--spacing-xs) !important;
  }

  .ro-mg-r-2-xl {
    margin-right: var(--spacing-sm) !important;
  }

  .ro-mg-r-3-xl {
    margin-right: var(--spacing-md) !important;
  }

  .ro-mg-r-4-xl {
    margin-right: var(--spacing-lg) !important;
  }

  .ro-mg-r-5-xl {
    margin-right: var(--spacing-xl) !important;
  }

  .ro-mg-r-6-xl {
    margin-right: var(--spacing-6) !important;
  }

  .ro-mg-r-7-xl {
    margin-right: var(--spacing-7) !important;
  }

  .ro-mg-r-8-xl {
    margin-right: var(--spacing-8) !important;
  }

  .ro-mg-r-9-xl {
    margin-right: var(--spacing-9) !important;
  }

  .ro-mg-r-10-xl {
    margin-right: var(--spacing-10) !important;
  }
}
/* ===============  Margin - Bottom classes ============= */
.ro-mg-b-auto {
  margin-bottom: auto !important;
}

.ro-mg-b-0 {
  margin-bottom: 0 !important;
}

.ro-mg-b-1 {
  margin-bottom: var(--spacing-xs) !important;
}

.ro-mg-b-2 {
  margin-bottom: var(--spacing-sm) !important;
}

.ro-mg-b-3 {
  margin-bottom: var(--spacing-md) !important;
}

.ro-mg-b-4 {
  margin-bottom: var(--spacing-lg) !important;
}

.ro-mg-b-5 {
  margin-bottom: var(--spacing-xl) !important;
}

.ro-mg-b-6 {
  margin-bottom: var(--spacing-6) !important;
}

.ro-mg-b-7 {
  margin-bottom: var(--spacing-7) !important;
}

.ro-mg-b-8 {
  margin-bottom: var(--spacing-8) !important;
}

.ro-mg-b-9 {
  margin-bottom: var(--spacing-9) !important;
}

.ro-mg-b-10 {
  margin-bottom: var(--spacing-10) !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-mg-b-auto-sm {
    margin-bottom: auto !important;
  }

  .ro-mg-b-0-sm {
    margin-bottom: 0 !important;
  }

  .ro-mg-b-1-sm {
    margin-bottom: var(--spacing-xs) !important;
  }

  .ro-mg-b-2-sm {
    margin-bottom: var(--spacing-sm) !important;
  }

  .ro-mg-b-3-sm {
    margin-bottom: var(--spacing-md) !important;
  }

  .ro-mg-b-4-sm {
    margin-bottom: var(--spacing-lg) !important;
  }

  .ro-mg-b-5-sm {
    margin-bottom: var(--spacing-xl) !important;
  }

  .ro-mg-b-6-sm {
    margin-bottom: var(--spacing-6) !important;
  }

  .ro-mg-b-7-sm {
    margin-bottom: var(--spacing-7) !important;
  }

  .ro-mg-b-8-sm {
    margin-bottom: var(--spacing-8) !important;
  }

  .ro-mg-b-9-sm {
    margin-bottom: var(--spacing-9) !important;
  }

  .ro-mg-b-10-sm {
    margin-bottom: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-mg-b-auto-md {
    margin-bottom: auto !important;
  }

  .ro-mg-b-0-md {
    margin-bottom: 0 !important;
  }

  .ro-mg-b-1-md {
    margin-bottom: var(--spacing-xs) !important;
  }

  .ro-mg-b-2-md {
    margin-bottom: var(--spacing-sm) !important;
  }

  .ro-mg-b-3-md {
    margin-bottom: var(--spacing-md) !important;
  }

  .ro-mg-b-4-md {
    margin-bottom: var(--spacing-lg) !important;
  }

  .ro-mg-b-5-md {
    margin-bottom: var(--spacing-xl) !important;
  }

  .ro-mg-b-6-md {
    margin-bottom: var(--spacing-6) !important;
  }

  .ro-mg-b-7-md {
    margin-bottom: var(--spacing-7) !important;
  }

  .ro-mg-b-8-md {
    margin-bottom: var(--spacing-8) !important;
  }

  .ro-mg-b-9-md {
    margin-bottom: var(--spacing-9) !important;
  }

  .ro-mg-b-10-md {
    margin-bottom: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-mg-b-auto-lg {
    margin-bottom: auto !important;
  }

  .ro-mg-b-0-lg {
    margin-bottom: 0 !important;
  }

  .ro-mg-b-1-lg {
    margin-bottom: var(--spacing-xs) !important;
  }

  .ro-mg-b-2-lg {
    margin-bottom: var(--spacing-sm) !important;
  }

  .ro-mg-b-3-lg {
    margin-bottom: var(--spacing-md) !important;
  }

  .ro-mg-b-4-lg {
    margin-bottom: var(--spacing-lg) !important;
  }

  .ro-mg-b-5-lg {
    margin-bottom: var(--spacing-xl) !important;
  }

  .ro-mg-b-6-lg {
    margin-bottom: var(--spacing-6) !important;
  }

  .ro-mg-b-7-lg {
    margin-bottom: var(--spacing-7) !important;
  }

  .ro-mg-b-8-lg {
    margin-bottom: var(--spacing-8) !important;
  }

  .ro-mg-b-9-lg {
    margin-bottom: var(--spacing-9) !important;
  }

  .ro-mg-b-10-lg {
    margin-bottom: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-mg-b-auto-xl {
    margin-bottom: auto !important;
  }

  .ro-mg-b-0-xl {
    margin-bottom: 0 !important;
  }

  .ro-mg-b-1-xl {
    margin-bottom: var(--spacing-xs) !important;
  }

  .ro-mg-b-2-xl {
    margin-bottom: var(--spacing-sm) !important;
  }

  .ro-mg-b-3-xl {
    margin-bottom: var(--spacing-md) !important;
  }

  .ro-mg-b-4-xl {
    margin-bottom: var(--spacing-lg) !important;
  }

  .ro-mg-b-5-xl {
    margin-bottom: var(--spacing-xl) !important;
  }

  .ro-mg-b-6-xl {
    margin-bottom: var(--spacing-6) !important;
  }

  .ro-mg-b-7-xl {
    margin-bottom: var(--spacing-7) !important;
  }

  .ro-mg-b-8-xl {
    margin-bottom: var(--spacing-8) !important;
  }

  .ro-mg-b-9-xl {
    margin-bottom: var(--spacing-9) !important;
  }

  .ro-mg-b-10-xl {
    margin-bottom: var(--spacing-10) !important;
  }
}
/* ===============  Margin - Left classes ============= */
.ro-mg-l-auto {
  margin-left: auto !important;
}

.ro-mg-l-0 {
  margin-left: 0 !important;
}

.ro-mg-l-1 {
  margin-left: var(--spacing-xs) !important;
}

.ro-mg-l-2 {
  margin-left: var(--spacing-sm) !important;
}

.ro-mg-l-3 {
  margin-left: var(--spacing-md) !important;
}

.ro-mg-l-4 {
  margin-left: var(--spacing-lg) !important;
}

.ro-mg-l-5 {
  margin-left: var(--spacing-xl) !important;
}

.ro-mg-l-6 {
  margin-left: var(--spacing-6) !important;
}

.ro-mg-l-7 {
  margin-left: var(--spacing-7) !important;
}

.ro-mg-l-8 {
  margin-left: var(--spacing-8) !important;
}

.ro-mg-l-9 {
  margin-left: var(--spacing-9) !important;
}

.ro-mg-l-10 {
  margin-left: var(--spacing-10) !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-mg-l-auto-sm {
    margin-left: auto !important;
  }

  .ro-mg-l-0-sm {
    margin-left: 0 !important;
  }

  .ro-mg-l-1-sm {
    margin-left: var(--spacing-xs) !important;
  }

  .ro-mg-l-2-sm {
    margin-left: var(--spacing-sm) !important;
  }

  .ro-mg-l-3-sm {
    margin-left: var(--spacing-md) !important;
  }

  .ro-mg-l-4-sm {
    margin-left: var(--spacing-lg) !important;
  }

  .ro-mg-l-5-sm {
    margin-left: var(--spacing-xl) !important;
  }

  .ro-mg-l-6-sm {
    margin-left: var(--spacing-6) !important;
  }

  .ro-mg-l-7-sm {
    margin-left: var(--spacing-7) !important;
  }

  .ro-mg-l-8-sm {
    margin-left: var(--spacing-8) !important;
  }

  .ro-mg-l-9-sm {
    margin-left: var(--spacing-9) !important;
  }

  .ro-mg-l-10-sm {
    margin-left: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-mg-l-auto-md {
    margin-left: auto !important;
  }

  .ro-mg-l-0-md {
    margin-left: 0 !important;
  }

  .ro-mg-l-1-md {
    margin-left: var(--spacing-xs) !important;
  }

  .ro-mg-l-2-md {
    margin-left: var(--spacing-sm) !important;
  }

  .ro-mg-l-3-md {
    margin-left: var(--spacing-md) !important;
  }

  .ro-mg-l-4-md {
    margin-left: var(--spacing-lg) !important;
  }

  .ro-mg-l-5-md {
    margin-left: var(--spacing-xl) !important;
  }

  .ro-mg-l-6-md {
    margin-left: var(--spacing-6) !important;
  }

  .ro-mg-l-7-md {
    margin-left: var(--spacing-7) !important;
  }

  .ro-mg-l-8-md {
    margin-left: var(--spacing-8) !important;
  }

  .ro-mg-l-9-md {
    margin-left: var(--spacing-9) !important;
  }

  .ro-mg-l-10-md {
    margin-left: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-mg-l-auto-lg {
    margin-left: auto !important;
  }

  .ro-mg-l-0-lg {
    margin-left: 0 !important;
  }

  .ro-mg-l-1-lg {
    margin-left: var(--spacing-xs) !important;
  }

  .ro-mg-l-2-lg {
    margin-left: var(--spacing-sm) !important;
  }

  .ro-mg-l-3-lg {
    margin-left: var(--spacing-md) !important;
  }

  .ro-mg-l-4-lg {
    margin-left: var(--spacing-lg) !important;
  }

  .ro-mg-l-5-lg {
    margin-left: var(--spacing-xl) !important;
  }

  .ro-mg-l-6-lg {
    margin-left: var(--spacing-6) !important;
  }

  .ro-mg-l-7-lg {
    margin-left: var(--spacing-7) !important;
  }

  .ro-mg-l-8-lg {
    margin-left: var(--spacing-8) !important;
  }

  .ro-mg-l-9-lg {
    margin-left: var(--spacing-9) !important;
  }

  .ro-mg-l-10-lg {
    margin-left: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-mg-l-auto-xl {
    margin-left: auto !important;
  }

  .ro-mg-l-0-xl {
    margin-left: 0 !important;
  }

  .ro-mg-l-1-xl {
    margin-left: var(--spacing-xs) !important;
  }

  .ro-mg-l-2-xl {
    margin-left: var(--spacing-sm) !important;
  }

  .ro-mg-l-3-xl {
    margin-left: var(--spacing-md) !important;
  }

  .ro-mg-l-4-xl {
    margin-left: var(--spacing-lg) !important;
  }

  .ro-mg-l-5-xl {
    margin-left: var(--spacing-xl) !important;
  }

  .ro-mg-l-6-xl {
    margin-left: var(--spacing-6) !important;
  }

  .ro-mg-l-7-xl {
    margin-left: var(--spacing-7) !important;
  }

  .ro-mg-l-8-xl {
    margin-left: var(--spacing-8) !important;
  }

  .ro-mg-l-9-xl {
    margin-left: var(--spacing-9) !important;
  }

  .ro-mg-l-10-xl {
    margin-left: var(--spacing-10) !important;
  }
}
/* ===============  Margin - Left and Right classes ============= */
.ro-mg-x-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.ro-mg-x-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.ro-mg-x-1 {
  margin-left: var(--spacing-xs) !important;
  margin-right: var(--spacing-xs) !important;
}

.ro-mg-x-2 {
  margin-left: var(--spacing-sm) !important;
  margin-right: var(--spacing-sm) !important;
}

.ro-mg-x-3 {
  margin-left: var(--spacing-md) !important;
  margin-right: var(--spacing-md) !important;
}

.ro-mg-x-4 {
  margin-left: var(--spacing-lg) !important;
  margin-right: var(--spacing-lg) !important;
}

.ro-mg-x-5 {
  margin-left: var(--spacing-xl) !important;
  margin-right: var(--spacing-xl) !important;
}

.ro-mg-x-6 {
  margin-left: var(--spacing-6) !important;
  margin-right: var(--spacing-6) !important;
}

.ro-mg-x-7 {
  margin-left: var(--spacing-7) !important;
  margin-right: var(--spacing-7) !important;
}

.ro-mg-x-8 {
  margin-left: var(--spacing-8) !important;
  margin-right: var(--spacing-8) !important;
}

.ro-mg-x-9 {
  margin-left: var(--spacing-9) !important;
  margin-right: var(--spacing-9) !important;
}

.ro-mg-x-10 {
  margin-left: var(--spacing-10) !important;
  margin-right: var(--spacing-10) !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-mg-x-auto-sm {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ro-mg-x-0-sm {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .ro-mg-x-1-sm {
    margin-left: var(--spacing-xs) !important;
    margin-right: var(--spacing-xs) !important;
  }

  .ro-mg-x-2-sm {
    margin-left: var(--spacing-sm) !important;
    margin-right: var(--spacing-sm) !important;
  }

  .ro-mg-x-3-sm {
    margin-left: var(--spacing-md) !important;
    margin-right: var(--spacing-md) !important;
  }

  .ro-mg-x-4-sm {
    margin-left: var(--spacing-lg) !important;
    margin-right: var(--spacing-lg) !important;
  }

  .ro-mg-x-5-sm {
    margin-left: var(--spacing-xl) !important;
    margin-right: var(--spacing-xl) !important;
  }

  .ro-mg-x-6-sm {
    margin-left: var(--spacing-6) !important;
    margin-right: var(--spacing-6) !important;
  }

  .ro-mg-x-7-sm {
    margin-left: var(--spacing-7) !important;
    margin-right: var(--spacing-7) !important;
  }

  .ro-mg-x-8-sm {
    margin-left: var(--spacing-8) !important;
    margin-right: var(--spacing-8) !important;
  }

  .ro-mg-x-9-sm {
    margin-left: var(--spacing-9) !important;
    margin-right: var(--spacing-9) !important;
  }

  .ro-mg-x-10-sm {
    margin-left: var(--spacing-10) !important;
    margin-right: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-mg-x-auto-md {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ro-mg-x-0-md {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .ro-mg-x-1-md {
    margin-left: var(--spacing-xs) !important;
    margin-right: var(--spacing-xs) !important;
  }

  .ro-mg-x-2-md {
    margin-left: var(--spacing-sm) !important;
    margin-right: var(--spacing-sm) !important;
  }

  .ro-mg-x-3-md {
    margin-left: var(--spacing-md) !important;
    margin-right: var(--spacing-md) !important;
  }

  .ro-mg-x-4-md {
    margin-left: var(--spacing-lg) !important;
    margin-right: var(--spacing-lg) !important;
  }

  .ro-mg-x-5-md {
    margin-left: var(--spacing-xl) !important;
    margin-right: var(--spacing-xl) !important;
  }

  .ro-mg-x-6-md {
    margin-left: var(--spacing-6) !important;
    margin-right: var(--spacing-6) !important;
  }

  .ro-mg-x-7-md {
    margin-left: var(--spacing-7) !important;
    margin-right: var(--spacing-7) !important;
  }

  .ro-mg-x-8-md {
    margin-left: var(--spacing-8) !important;
    margin-right: var(--spacing-8) !important;
  }

  .ro-mg-x-9-md {
    margin-left: var(--spacing-9) !important;
    margin-right: var(--spacing-9) !important;
  }

  .ro-mg-x-10-md {
    margin-left: var(--spacing-10) !important;
    margin-right: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-mg-x-auto-lg {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ro-mg-x-0-lg {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .ro-mg-x-1-lg {
    margin-left: var(--spacing-xs) !important;
    margin-right: var(--spacing-xs) !important;
  }

  .ro-mg-x-2-lg {
    margin-left: var(--spacing-sm) !important;
    margin-right: var(--spacing-sm) !important;
  }

  .ro-mg-x-3-lg {
    margin-left: var(--spacing-md) !important;
    margin-right: var(--spacing-md) !important;
  }

  .ro-mg-x-4-lg {
    margin-left: var(--spacing-lg) !important;
    margin-right: var(--spacing-lg) !important;
  }

  .ro-mg-x-5-lg {
    margin-left: var(--spacing-xl) !important;
    margin-right: var(--spacing-xl) !important;
  }

  .ro-mg-x-6-lg {
    margin-left: var(--spacing-6) !important;
    margin-right: var(--spacing-6) !important;
  }

  .ro-mg-x-7-lg {
    margin-left: var(--spacing-7) !important;
    margin-right: var(--spacing-7) !important;
  }

  .ro-mg-x-8-lg {
    margin-left: var(--spacing-8) !important;
    margin-right: var(--spacing-8) !important;
  }

  .ro-mg-x-9-lg {
    margin-left: var(--spacing-9) !important;
    margin-right: var(--spacing-9) !important;
  }

  .ro-mg-x-10-lg {
    margin-left: var(--spacing-10) !important;
    margin-right: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-mg-x-auto-xl {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ro-mg-x-0-xl {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .ro-mg-x-1-xl {
    margin-left: var(--spacing-xs) !important;
    margin-right: var(--spacing-xs) !important;
  }

  .ro-mg-x-2-xl {
    margin-left: var(--spacing-sm) !important;
    margin-right: var(--spacing-sm) !important;
  }

  .ro-mg-x-3-xl {
    margin-left: var(--spacing-md) !important;
    margin-right: var(--spacing-md) !important;
  }

  .ro-mg-x-4-xl {
    margin-left: var(--spacing-lg) !important;
    margin-right: var(--spacing-lg) !important;
  }

  .ro-mg-x-5-xl {
    margin-left: var(--spacing-xl) !important;
    margin-right: var(--spacing-xl) !important;
  }

  .ro-mg-x-6-xl {
    margin-left: var(--spacing-6) !important;
    margin-right: var(--spacing-6) !important;
  }

  .ro-mg-x-7-xl {
    margin-left: var(--spacing-7) !important;
    margin-right: var(--spacing-7) !important;
  }

  .ro-mg-x-8-xl {
    margin-left: var(--spacing-8) !important;
    margin-right: var(--spacing-8) !important;
  }

  .ro-mg-x-9-xl {
    margin-left: var(--spacing-9) !important;
    margin-right: var(--spacing-9) !important;
  }

  .ro-mg-x-10-xl {
    margin-left: var(--spacing-10) !important;
    margin-right: var(--spacing-10) !important;
  }
}
/* ===============  Margin - Top and Bottom classes ============= */
.ro-mg-y-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.ro-mg-y-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ro-mg-y-1 {
  margin-top: var(--spacing-xs) !important;
  margin-bottom: var(--spacing-xs) !important;
}

.ro-mg-y-2 {
  margin-top: var(--spacing-sm) !important;
  margin-bottom: var(--spacing-sm) !important;
}

.ro-mg-y-3 {
  margin-top: var(--spacing-md) !important;
  margin-bottom: var(--spacing-md) !important;
}

.ro-mg-y-4 {
  margin-top: var(--spacing-lg) !important;
  margin-bottom: var(--spacing-lg) !important;
}

.ro-mg-y-5 {
  margin-top: var(--spacing-xl) !important;
  margin-bottom: var(--spacing-xl) !important;
}

.ro-mg-y-6 {
  margin-top: var(--spacing-6) !important;
  margin-bottom: var(--spacing-6) !important;
}

.ro-mg-y-7 {
  margin-top: var(--spacing-7) !important;
  margin-bottom: var(--spacing-7) !important;
}

.ro-mg-y-8 {
  margin-top: var(--spacing-8) !important;
  margin-bottom: var(--spacing-8) !important;
}

.ro-mg-y-9 {
  margin-top: var(--spacing-9) !important;
  margin-bottom: var(--spacing-9) !important;
}

.ro-mg-y-10 {
  margin-top: var(--spacing-10) !important;
  margin-bottom: var(--spacing-10) !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-mg-y-auto-sm {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .ro-mg-y-0-sm {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .ro-mg-y-1-sm {
    margin-top: var(--spacing-xs) !important;
    margin-bottom: var(--spacing-xs) !important;
  }

  .ro-mg-y-2-sm {
    margin-top: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-sm) !important;
  }

  .ro-mg-y-3-sm {
    margin-top: var(--spacing-md) !important;
    margin-bottom: var(--spacing-md) !important;
  }

  .ro-mg-y-4-sm {
    margin-top: var(--spacing-lg) !important;
    margin-bottom: var(--spacing-lg) !important;
  }

  .ro-mg-y-5-sm {
    margin-top: var(--spacing-xl) !important;
    margin-bottom: var(--spacing-xl) !important;
  }

  .ro-mg-y-6-sm {
    margin-top: var(--spacing-6) !important;
    margin-bottom: var(--spacing-6) !important;
  }

  .ro-mg-y-7-sm {
    margin-top: var(--spacing-7) !important;
    margin-bottom: var(--spacing-7) !important;
  }

  .ro-mg-y-8-sm {
    margin-top: var(--spacing-8) !important;
    margin-bottom: var(--spacing-8) !important;
  }

  .ro-mg-y-9-sm {
    margin-top: var(--spacing-9) !important;
    margin-bottom: var(--spacing-9) !important;
  }

  .ro-mg-y-10-sm {
    margin-top: var(--spacing-10) !important;
    margin-bottom: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-mg-y-auto-md {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .ro-mg-y-0-md {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .ro-mg-y-1-md {
    margin-top: var(--spacing-xs) !important;
    margin-bottom: var(--spacing-xs) !important;
  }

  .ro-mg-y-2-md {
    margin-top: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-sm) !important;
  }

  .ro-mg-y-3-md {
    margin-top: var(--spacing-md) !important;
    margin-bottom: var(--spacing-md) !important;
  }

  .ro-mg-y-4-md {
    margin-top: var(--spacing-lg) !important;
    margin-bottom: var(--spacing-lg) !important;
  }

  .ro-mg-y-5-md {
    margin-top: var(--spacing-xl) !important;
    margin-bottom: var(--spacing-xl) !important;
  }

  .ro-mg-y-6-md {
    margin-top: var(--spacing-6) !important;
    margin-bottom: var(--spacing-6) !important;
  }

  .ro-mg-y-7-md {
    margin-top: var(--spacing-7) !important;
    margin-bottom: var(--spacing-7) !important;
  }

  .ro-mg-y-8-md {
    margin-top: var(--spacing-8) !important;
    margin-bottom: var(--spacing-8) !important;
  }

  .ro-mg-y-9-md {
    margin-top: var(--spacing-9) !important;
    margin-bottom: var(--spacing-9) !important;
  }

  .ro-mg-y-10-md {
    margin-top: var(--spacing-10) !important;
    margin-bottom: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-mg-y-auto-lg {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .ro-mg-y-0-lg {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .ro-mg-y-1-lg {
    margin-top: var(--spacing-xs) !important;
    margin-bottom: var(--spacing-xs) !important;
  }

  .ro-mg-y-2-lg {
    margin-top: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-sm) !important;
  }

  .ro-mg-y-3-lg {
    margin-top: var(--spacing-md) !important;
    margin-bottom: var(--spacing-md) !important;
  }

  .ro-mg-y-4-lg {
    margin-top: var(--spacing-lg) !important;
    margin-bottom: var(--spacing-lg) !important;
  }

  .ro-mg-y-5-lg {
    margin-top: var(--spacing-xl) !important;
    margin-bottom: var(--spacing-xl) !important;
  }

  .ro-mg-y-6-lg {
    margin-top: var(--spacing-6) !important;
    margin-bottom: var(--spacing-6) !important;
  }

  .ro-mg-y-7-lg {
    margin-top: var(--spacing-7) !important;
    margin-bottom: var(--spacing-7) !important;
  }

  .ro-mg-y-8-lg {
    margin-top: var(--spacing-8) !important;
    margin-bottom: var(--spacing-8) !important;
  }

  .ro-mg-y-9-lg {
    margin-top: var(--spacing-9) !important;
    margin-bottom: var(--spacing-9) !important;
  }

  .ro-mg-y-10-lg {
    margin-top: var(--spacing-10) !important;
    margin-bottom: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-mg-y-auto-xl {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .ro-mg-y-0-xl {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .ro-mg-y-1-xl {
    margin-top: var(--spacing-xs) !important;
    margin-bottom: var(--spacing-xs) !important;
  }

  .ro-mg-y-2-xl {
    margin-top: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-sm) !important;
  }

  .ro-mg-y-3-xl {
    margin-top: var(--spacing-md) !important;
    margin-bottom: var(--spacing-md) !important;
  }

  .ro-mg-y-4-xl {
    margin-top: var(--spacing-lg) !important;
    margin-bottom: var(--spacing-lg) !important;
  }

  .ro-mg-y-5-xl {
    margin-top: var(--spacing-xl) !important;
    margin-bottom: var(--spacing-xl) !important;
  }

  .ro-mg-y-6-xl {
    margin-top: var(--spacing-6) !important;
    margin-bottom: var(--spacing-6) !important;
  }

  .ro-mg-y-7-xl {
    margin-top: var(--spacing-7) !important;
    margin-bottom: var(--spacing-7) !important;
  }

  .ro-mg-y-8-xl {
    margin-top: var(--spacing-8) !important;
    margin-bottom: var(--spacing-8) !important;
  }

  .ro-mg-y-9-xl {
    margin-top: var(--spacing-9) !important;
    margin-bottom: var(--spacing-9) !important;
  }

  .ro-mg-y-10-xl {
    margin-top: var(--spacing-10) !important;
    margin-bottom: var(--spacing-10) !important;
  }
}
/* ===============  Padding - All Around classes ============= */
.ro-pd-0 {
  padding: 0 !important;
}

.ro-pd-1 {
  padding: var(--spacing-xs) !important;
}

.ro-pd-2 {
  padding: var(--spacing-sm) !important;
}

.ro-pd-3 {
  padding: var(--spacing-md) !important;
}

.ro-pd-4 {
  padding: var(--spacing-lg) !important;
}

.ro-pd-5 {
  padding: var(--spacing-xl) !important;
}

.ro-pd-6 {
  padding: var(--spacing-6) !important;
}

.ro-pd-7 {
  padding: var(--spacing-7) !important;
}

.ro-pd-8 {
  padding: var(--spacing-8) !important;
}

.ro-pd-9 {
  padding: var(--spacing-9) !important;
}

.ro-pd-10 {
  padding: var(--spacing-10) !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-pd-0-sm {
    padding: 0 !important;
  }

  .ro-pd-1-sm {
    padding: var(--spacing-xs) !important;
  }

  .ro-pd-2-sm {
    padding: var(--spacing-sm) !important;
  }

  .ro-pd-3-sm {
    padding: var(--spacing-md) !important;
  }

  .ro-pd-4-sm {
    padding: var(--spacing-lg) !important;
  }

  .ro-pd-5-sm {
    padding: var(--spacing-xl) !important;
  }

  .ro-pd-6-sm {
    padding: var(--spacing-6) !important;
  }

  .ro-pd-7-sm {
    padding: var(--spacing-7) !important;
  }

  .ro-pd-8-sm {
    padding: var(--spacing-8) !important;
  }

  .ro-pd-9-sm {
    padding: var(--spacing-9) !important;
  }

  .ro-pd-10-sm {
    padding: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-pd-0-md {
    padding: 0 !important;
  }

  .ro-pd-1-md {
    padding: var(--spacing-xs) !important;
  }

  .ro-pd-2-md {
    padding: var(--spacing-sm) !important;
  }

  .ro-pd-3-md {
    padding: var(--spacing-md) !important;
  }

  .ro-pd-4-md {
    padding: var(--spacing-lg) !important;
  }

  .ro-pd-5-md {
    padding: var(--spacing-xl) !important;
  }

  .ro-pd-6-md {
    padding: var(--spacing-6) !important;
  }

  .ro-pd-7-md {
    padding: var(--spacing-7) !important;
  }

  .ro-pd-8-md {
    padding: var(--spacing-8) !important;
  }

  .ro-pd-9-md {
    padding: var(--spacing-9) !important;
  }

  .ro-pd-10-md {
    padding: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-pd-0-lg {
    padding: 0 !important;
  }

  .ro-pd-1-lg {
    padding: var(--spacing-xs) !important;
  }

  .ro-pd-2-lg {
    padding: var(--spacing-sm) !important;
  }

  .ro-pd-3-lg {
    padding: var(--spacing-md) !important;
  }

  .ro-pd-4-lg {
    padding: var(--spacing-lg) !important;
  }

  .ro-pd-5-lg {
    padding: var(--spacing-xl) !important;
  }

  .ro-pd-6-lg {
    padding: var(--spacing-6) !important;
  }

  .ro-pd-7-lg {
    padding: var(--spacing-7) !important;
  }

  .ro-pd-8-lg {
    padding: var(--spacing-8) !important;
  }

  .ro-pd-9-lg {
    padding: var(--spacing-9) !important;
  }

  .ro-pd-10-lg {
    padding: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-pd-0-xl {
    padding: 0 !important;
  }

  .ro-pd-1-xl {
    padding: var(--spacing-xs) !important;
  }

  .ro-pd-2-xl {
    padding: var(--spacing-sm) !important;
  }

  .ro-pd-3-xl {
    padding: var(--spacing-md) !important;
  }

  .ro-pd-4-xl {
    padding: var(--spacing-lg) !important;
  }

  .ro-pd-5-xl {
    padding: var(--spacing-xl) !important;
  }

  .ro-pd-6-xl {
    padding: var(--spacing-6) !important;
  }

  .ro-pd-7-xl {
    padding: var(--spacing-7) !important;
  }

  .ro-pd-8-xl {
    padding: var(--spacing-8) !important;
  }

  .ro-pd-9-xl {
    padding: var(--spacing-9) !important;
  }

  .ro-pd-10-xl {
    padding: var(--spacing-10) !important;
  }
}
/* ===============  Padding - Right classes ============= */
.ro-pd-r-0 {
  padding-right: 0 !important;
}

.ro-pd-r-1 {
  padding-right: var(--spacing-xs) !important;
}

.ro-pd-r-2 {
  padding-right: var(--spacing-sm) !important;
}

.ro-pd-r-3 {
  padding-right: var(--spacing-md) !important;
}

.ro-pd-r-4 {
  padding-right: var(--spacing-lg) !important;
}

.ro-pd-r-5 {
  padding-right: var(--spacing-xl) !important;
}

.ro-pd-r-6 {
  padding-right: var(--spacing-6) !important;
}

.ro-pd-r-7 {
  padding-right: var(--spacing-7) !important;
}

.ro-pd-r-8 {
  padding-right: var(--spacing-8) !important;
}

.ro-pd-r-9 {
  padding-right: var(--spacing-9) !important;
}

.ro-pd-r-10 {
  padding-right: var(--spacing-10) !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-pd-r-0-sm {
    padding-right: 0 !important;
  }

  .ro-pd-r-1-sm {
    padding-right: var(--spacing-xs) !important;
  }

  .ro-pd-r-2-sm {
    padding-right: var(--spacing-sm) !important;
  }

  .ro-pd-r-3-sm {
    padding-right: var(--spacing-md) !important;
  }

  .ro-pd-r-4-sm {
    padding-right: var(--spacing-lg) !important;
  }

  .ro-pd-r-5-sm {
    padding-right: var(--spacing-xl) !important;
  }

  .ro-pd-r-6-sm {
    padding-right: var(--spacing-6) !important;
  }

  .ro-pd-r-7-sm {
    padding-right: var(--spacing-7) !important;
  }

  .ro-pd-r-8-sm {
    padding-right: var(--spacing-8) !important;
  }

  .ro-pd-r-9-sm {
    padding-right: var(--spacing-9) !important;
  }

  .ro-pd-r-10-sm {
    padding-right: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-pd-r-0-md {
    padding-right: 0 !important;
  }

  .ro-pd-r-1-md {
    padding-right: var(--spacing-xs) !important;
  }

  .ro-pd-r-2-md {
    padding-right: var(--spacing-sm) !important;
  }

  .ro-pd-r-3-md {
    padding-right: var(--spacing-md) !important;
  }

  .ro-pd-r-4-md {
    padding-right: var(--spacing-lg) !important;
  }

  .ro-pd-r-5-md {
    padding-right: var(--spacing-xl) !important;
  }

  .ro-pd-r-6-md {
    padding-right: var(--spacing-6) !important;
  }

  .ro-pd-r-7-md {
    padding-right: var(--spacing-7) !important;
  }

  .ro-pd-r-8-md {
    padding-right: var(--spacing-8) !important;
  }

  .ro-pd-r-9-md {
    padding-right: var(--spacing-9) !important;
  }

  .ro-pd-r-10-md {
    padding-right: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-pd-r-0-lg {
    padding-right: 0 !important;
  }

  .ro-pd-r-1-lg {
    padding-right: var(--spacing-xs) !important;
  }

  .ro-pd-r-2-lg {
    padding-right: var(--spacing-sm) !important;
  }

  .ro-pd-r-3-lg {
    padding-right: var(--spacing-md) !important;
  }

  .ro-pd-r-4-lg {
    padding-right: var(--spacing-lg) !important;
  }

  .ro-pd-r-5-lg {
    padding-right: var(--spacing-xl) !important;
  }

  .ro-pd-r-6-lg {
    padding-right: var(--spacing-6) !important;
  }

  .ro-pd-r-7-lg {
    padding-right: var(--spacing-7) !important;
  }

  .ro-pd-r-8-lg {
    padding-right: var(--spacing-8) !important;
  }

  .ro-pd-r-9-lg {
    padding-right: var(--spacing-9) !important;
  }

  .ro-pd-r-10-lg {
    padding-right: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-pd-r-0-xl {
    padding-right: 0 !important;
  }

  .ro-pd-r-1-xl {
    padding-right: var(--spacing-xs) !important;
  }

  .ro-pd-r-2-xl {
    padding-right: var(--spacing-sm) !important;
  }

  .ro-pd-r-3-xl {
    padding-right: var(--spacing-md) !important;
  }

  .ro-pd-r-4-xl {
    padding-right: var(--spacing-lg) !important;
  }

  .ro-pd-r-5-xl {
    padding-right: var(--spacing-xl) !important;
  }

  .ro-pd-r-6-xl {
    padding-right: var(--spacing-6) !important;
  }

  .ro-pd-r-7-xl {
    padding-right: var(--spacing-7) !important;
  }

  .ro-pd-r-8-xl {
    padding-right: var(--spacing-8) !important;
  }

  .ro-pd-r-9-xl {
    padding-right: var(--spacing-9) !important;
  }

  .ro-pd-r-10-xl {
    padding-right: var(--spacing-10) !important;
  }
}
/* ===============  Padding - Left classes ============= */
.ro-pd-l-0 {
  padding-left: 0 !important;
}

.ro-pd-l-1 {
  padding-left: var(--spacing-xs) !important;
}

.ro-pd-l-2 {
  padding-left: var(--spacing-sm) !important;
}

.ro-pd-l-3 {
  padding-left: var(--spacing-md) !important;
}

.ro-pd-l-4 {
  padding-left: var(--spacing-lg) !important;
}

.ro-pd-l-5 {
  padding-left: var(--spacing-xl) !important;
}

.ro-pd-l-6 {
  padding-left: var(--spacing-6) !important;
}

.ro-pd-l-7 {
  padding-left: var(--spacing-7) !important;
}

.ro-pd-l-8 {
  padding-left: var(--spacing-8) !important;
}

.ro-pd-l-9 {
  padding-left: var(--spacing-9) !important;
}

.ro-pd-l-10 {
  padding-left: var(--spacing-10) !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-pd-l-0-sm {
    padding-left: 0 !important;
  }

  .ro-pd-l-1-sm {
    padding-left: var(--spacing-xs) !important;
  }

  .ro-pd-l-2-sm {
    padding-left: var(--spacing-sm) !important;
  }

  .ro-pd-l-3-sm {
    padding-left: var(--spacing-md) !important;
  }

  .ro-pd-l-4-sm {
    padding-left: var(--spacing-lg) !important;
  }

  .ro-pd-l-5-sm {
    padding-left: var(--spacing-xl) !important;
  }

  .ro-pd-l-6-sm {
    padding-left: var(--spacing-6) !important;
  }

  .ro-pd-l-7-sm {
    padding-left: var(--spacing-7) !important;
  }

  .ro-pd-l-8-sm {
    padding-left: var(--spacing-8) !important;
  }

  .ro-pd-l-9-sm {
    padding-left: var(--spacing-9) !important;
  }

  .ro-pd-l-10-sm {
    padding-left: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-pd-l-0-md {
    padding-left: 0 !important;
  }

  .ro-pd-l-1-md {
    padding-left: var(--spacing-xs) !important;
  }

  .ro-pd-l-2-md {
    padding-left: var(--spacing-sm) !important;
  }

  .ro-pd-l-3-md {
    padding-left: var(--spacing-md) !important;
  }

  .ro-pd-l-4-md {
    padding-left: var(--spacing-lg) !important;
  }

  .ro-pd-l-5-md {
    padding-left: var(--spacing-xl) !important;
  }

  .ro-pd-l-6-md {
    padding-left: var(--spacing-6) !important;
  }

  .ro-pd-l-7-md {
    padding-left: var(--spacing-7) !important;
  }

  .ro-pd-l-8-md {
    padding-left: var(--spacing-8) !important;
  }

  .ro-pd-l-9-md {
    padding-left: var(--spacing-9) !important;
  }

  .ro-pd-l-10-md {
    padding-left: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-pd-l-0-lg {
    padding-left: 0 !important;
  }

  .ro-pd-l-1-lg {
    padding-left: var(--spacing-xs) !important;
  }

  .ro-pd-l-2-lg {
    padding-left: var(--spacing-sm) !important;
  }

  .ro-pd-l-3-lg {
    padding-left: var(--spacing-md) !important;
  }

  .ro-pd-l-4-lg {
    padding-left: var(--spacing-lg) !important;
  }

  .ro-pd-l-5-lg {
    padding-left: var(--spacing-xl) !important;
  }

  .ro-pd-l-6-lg {
    padding-left: var(--spacing-6) !important;
  }

  .ro-pd-l-7-lg {
    padding-left: var(--spacing-7) !important;
  }

  .ro-pd-l-8-lg {
    padding-left: var(--spacing-8) !important;
  }

  .ro-pd-l-9-lg {
    padding-left: var(--spacing-9) !important;
  }

  .ro-pd-l-10-lg {
    padding-left: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-pd-l-0-xl {
    padding-left: 0 !important;
  }

  .ro-pd-l-1-xl {
    padding-left: var(--spacing-xs) !important;
  }

  .ro-pd-l-2-xl {
    padding-left: var(--spacing-sm) !important;
  }

  .ro-pd-l-3-xl {
    padding-left: var(--spacing-md) !important;
  }

  .ro-pd-l-4-xl {
    padding-left: var(--spacing-lg) !important;
  }

  .ro-pd-l-5-xl {
    padding-left: var(--spacing-xl) !important;
  }

  .ro-pd-l-6-xl {
    padding-left: var(--spacing-6) !important;
  }

  .ro-pd-l-7-xl {
    padding-left: var(--spacing-7) !important;
  }

  .ro-pd-l-8-xl {
    padding-left: var(--spacing-8) !important;
  }

  .ro-pd-l-9-xl {
    padding-left: var(--spacing-9) !important;
  }

  .ro-pd-l-10-xl {
    padding-left: var(--spacing-10) !important;
  }
}
/* ===============  Padding - Left and Right classes ============= */
.ro-pd-x-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.ro-pd-x-1 {
  padding-left: var(--spacing-xs) !important;
  padding-right: var(--spacing-xs) !important;
}

.ro-pd-x-2 {
  padding-left: var(--spacing-sm) !important;
  padding-right: var(--spacing-sm) !important;
}

.ro-pd-x-3 {
  padding-left: var(--spacing-md) !important;
  padding-right: var(--spacing-md) !important;
}

.ro-pd-x-4 {
  padding-left: var(--spacing-lg) !important;
  padding-right: var(--spacing-lg) !important;
}

.ro-pd-x-5 {
  padding-left: var(--spacing-xl) !important;
  padding-right: var(--spacing-xl) !important;
}

.ro-pd-x-6 {
  padding-left: var(--spacing-6) !important;
  padding-right: var(--spacing-6) !important;
}

.ro-pd-x-7 {
  padding-left: var(--spacing-7) !important;
  padding-right: var(--spacing-7) !important;
}

.ro-pd-x-8 {
  padding-left: var(--spacing-8) !important;
  padding-right: var(--spacing-8) !important;
}

.ro-pd-x-9 {
  padding-left: var(--spacing-9) !important;
  padding-right: var(--spacing-9) !important;
}

.ro-pd-x-10 {
  padding-left: var(--spacing-10) !important;
  padding-right: var(--spacing-10) !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-pd-x-0-sm {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ro-pd-x-1-sm {
    padding-left: var(--spacing-xs) !important;
    padding-right: var(--spacing-xs) !important;
  }

  .ro-pd-x-2-sm {
    padding-left: var(--spacing-sm) !important;
    padding-right: var(--spacing-sm) !important;
  }

  .ro-pd-x-3-sm {
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
  }

  .ro-pd-x-4-sm {
    padding-left: var(--spacing-lg) !important;
    padding-right: var(--spacing-lg) !important;
  }

  .ro-pd-x-5-sm {
    padding-left: var(--spacing-xl) !important;
    padding-right: var(--spacing-xl) !important;
  }

  .ro-pd-x-6-sm {
    padding-left: var(--spacing-6) !important;
    padding-right: var(--spacing-6) !important;
  }

  .ro-pd-x-7-sm {
    padding-left: var(--spacing-7) !important;
    padding-right: var(--spacing-7) !important;
  }

  .ro-pd-x-8-sm {
    padding-left: var(--spacing-8) !important;
    padding-right: var(--spacing-8) !important;
  }

  .ro-pd-x-9-sm {
    padding-left: var(--spacing-9) !important;
    padding-right: var(--spacing-9) !important;
  }

  .ro-pd-x-10-sm {
    padding-left: var(--spacing-10) !important;
    padding-right: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-pd-x-0-md {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ro-pd-x-1-md {
    padding-left: var(--spacing-xs) !important;
    padding-right: var(--spacing-xs) !important;
  }

  .ro-pd-x-2-md {
    padding-left: var(--spacing-sm) !important;
    padding-right: var(--spacing-sm) !important;
  }

  .ro-pd-x-3-md {
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
  }

  .ro-pd-x-4-md {
    padding-left: var(--spacing-lg) !important;
    padding-right: var(--spacing-lg) !important;
  }

  .ro-pd-x-5-md {
    padding-left: var(--spacing-xl) !important;
    padding-right: var(--spacing-xl) !important;
  }

  .ro-pd-x-6-md {
    padding-left: var(--spacing-6) !important;
    padding-right: var(--spacing-6) !important;
  }

  .ro-pd-x-7-md {
    padding-left: var(--spacing-7) !important;
    padding-right: var(--spacing-7) !important;
  }

  .ro-pd-x-8-md {
    padding-left: var(--spacing-8) !important;
    padding-right: var(--spacing-8) !important;
  }

  .ro-pd-x-9-md {
    padding-left: var(--spacing-9) !important;
    padding-right: var(--spacing-9) !important;
  }

  .ro-pd-x-10-md {
    padding-left: var(--spacing-10) !important;
    padding-right: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-pd-x-0-lg {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ro-pd-x-1-lg {
    padding-left: var(--spacing-xs) !important;
    padding-right: var(--spacing-xs) !important;
  }

  .ro-pd-x-2-lg {
    padding-left: var(--spacing-sm) !important;
    padding-right: var(--spacing-sm) !important;
  }

  .ro-pd-x-3-lg {
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
  }

  .ro-pd-x-4-lg {
    padding-left: var(--spacing-lg) !important;
    padding-right: var(--spacing-lg) !important;
  }

  .ro-pd-x-5-lg {
    padding-left: var(--spacing-xl) !important;
    padding-right: var(--spacing-xl) !important;
  }

  .ro-pd-x-6-lg {
    padding-left: var(--spacing-6) !important;
    padding-right: var(--spacing-6) !important;
  }

  .ro-pd-x-7-lg {
    padding-left: var(--spacing-7) !important;
    padding-right: var(--spacing-7) !important;
  }

  .ro-pd-x-8-lg {
    padding-left: var(--spacing-8) !important;
    padding-right: var(--spacing-8) !important;
  }

  .ro-pd-x-9-lg {
    padding-left: var(--spacing-9) !important;
    padding-right: var(--spacing-9) !important;
  }

  .ro-pd-x-10-lg {
    padding-left: var(--spacing-10) !important;
    padding-right: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-pd-x-0-xl {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ro-pd-x-1-xl {
    padding-left: var(--spacing-xs) !important;
    padding-right: var(--spacing-xs) !important;
  }

  .ro-pd-x-2-xl {
    padding-left: var(--spacing-sm) !important;
    padding-right: var(--spacing-sm) !important;
  }

  .ro-pd-x-3-xl {
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
  }

  .ro-pd-x-4-xl {
    padding-left: var(--spacing-lg) !important;
    padding-right: var(--spacing-lg) !important;
  }

  .ro-pd-x-5-xl {
    padding-left: var(--spacing-xl) !important;
    padding-right: var(--spacing-xl) !important;
  }

  .ro-pd-x-6-xl {
    padding-left: var(--spacing-6) !important;
    padding-right: var(--spacing-6) !important;
  }

  .ro-pd-x-7-xl {
    padding-left: var(--spacing-7) !important;
    padding-right: var(--spacing-7) !important;
  }

  .ro-pd-x-8-xl {
    padding-left: var(--spacing-8) !important;
    padding-right: var(--spacing-8) !important;
  }

  .ro-pd-x-9-xl {
    padding-left: var(--spacing-9) !important;
    padding-right: var(--spacing-9) !important;
  }

  .ro-pd-x-10-xl {
    padding-left: var(--spacing-10) !important;
    padding-right: var(--spacing-10) !important;
  }
}
/* ===============  Padding - Top and Bottom classes ============= */
.ro-pd-y-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.ro-pd-y-1 {
  padding-top: var(--spacing-xs) !important;
  padding-bottom: var(--spacing-xs) !important;
}

.ro-pd-y-2 {
  padding-top: var(--spacing-sm) !important;
  padding-bottom: var(--spacing-sm) !important;
}

.ro-pd-y-3 {
  padding-top: var(--spacing-md) !important;
  padding-bottom: var(--spacing-md) !important;
}

.ro-pd-y-4 {
  padding-top: var(--spacing-lg) !important;
  padding-bottom: var(--spacing-lg) !important;
}

.ro-pd-y-5 {
  padding-top: var(--spacing-xl) !important;
  padding-bottom: var(--spacing-xl) !important;
}

.ro-pd-y-6 {
  padding-top: var(--spacing-6) !important;
  padding-bottom: var(--spacing-6) !important;
}

.ro-pd-y-7 {
  padding-top: var(--spacing-7) !important;
  padding-bottom: var(--spacing-7) !important;
}

.ro-pd-y-8 {
  padding-top: var(--spacing-8) !important;
  padding-bottom: var(--spacing-8) !important;
}

.ro-pd-y-9 {
  padding-top: var(--spacing-9) !important;
  padding-bottom: var(--spacing-9) !important;
}

.ro-pd-y-10 {
  padding-top: var(--spacing-10) !important;
  padding-bottom: var(--spacing-10) !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-pd-y-0-sm {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .ro-pd-y-1-sm {
    padding-top: var(--spacing-xs) !important;
    padding-bottom: var(--spacing-xs) !important;
  }

  .ro-pd-y-2-sm {
    padding-top: var(--spacing-sm) !important;
    padding-bottom: var(--spacing-sm) !important;
  }

  .ro-pd-y-3-sm {
    padding-top: var(--spacing-md) !important;
    padding-bottom: var(--spacing-md) !important;
  }

  .ro-pd-y-4-sm {
    padding-top: var(--spacing-lg) !important;
    padding-bottom: var(--spacing-lg) !important;
  }

  .ro-pd-y-5-sm {
    padding-top: var(--spacing-xl) !important;
    padding-bottom: var(--spacing-xl) !important;
  }

  .ro-pd-y-6-sm {
    padding-top: var(--spacing-6) !important;
    padding-bottom: var(--spacing-6) !important;
  }

  .ro-pd-y-7-sm {
    padding-top: var(--spacing-7) !important;
    padding-bottom: var(--spacing-7) !important;
  }

  .ro-pd-y-8-sm {
    padding-top: var(--spacing-8) !important;
    padding-bottom: var(--spacing-8) !important;
  }

  .ro-pd-y-9-sm {
    padding-top: var(--spacing-9) !important;
    padding-bottom: var(--spacing-9) !important;
  }

  .ro-pd-y-10-sm {
    padding-top: var(--spacing-10) !important;
    padding-bottom: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-pd-y-0-md {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .ro-pd-y-1-md {
    padding-top: var(--spacing-xs) !important;
    padding-bottom: var(--spacing-xs) !important;
  }

  .ro-pd-y-2-md {
    padding-top: var(--spacing-sm) !important;
    padding-bottom: var(--spacing-sm) !important;
  }

  .ro-pd-y-3-md {
    padding-top: var(--spacing-md) !important;
    padding-bottom: var(--spacing-md) !important;
  }

  .ro-pd-y-4-md {
    padding-top: var(--spacing-lg) !important;
    padding-bottom: var(--spacing-lg) !important;
  }

  .ro-pd-y-5-md {
    padding-top: var(--spacing-xl) !important;
    padding-bottom: var(--spacing-xl) !important;
  }

  .ro-pd-y-6-md {
    padding-top: var(--spacing-6) !important;
    padding-bottom: var(--spacing-6) !important;
  }

  .ro-pd-y-7-md {
    padding-top: var(--spacing-7) !important;
    padding-bottom: var(--spacing-7) !important;
  }

  .ro-pd-y-8-md {
    padding-top: var(--spacing-8) !important;
    padding-bottom: var(--spacing-8) !important;
  }

  .ro-pd-y-9-md {
    padding-top: var(--spacing-9) !important;
    padding-bottom: var(--spacing-9) !important;
  }

  .ro-pd-y-10-md {
    padding-top: var(--spacing-10) !important;
    padding-bottom: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-pd-y-0-lg {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .ro-pd-y-1-lg {
    padding-top: var(--spacing-xs) !important;
    padding-bottom: var(--spacing-xs) !important;
  }

  .ro-pd-y-2-lg {
    padding-top: var(--spacing-sm) !important;
    padding-bottom: var(--spacing-sm) !important;
  }

  .ro-pd-y-3-lg {
    padding-top: var(--spacing-md) !important;
    padding-bottom: var(--spacing-md) !important;
  }

  .ro-pd-y-4-lg {
    padding-top: var(--spacing-lg) !important;
    padding-bottom: var(--spacing-lg) !important;
  }

  .ro-pd-y-5-lg {
    padding-top: var(--spacing-xl) !important;
    padding-bottom: var(--spacing-xl) !important;
  }

  .ro-pd-y-6-lg {
    padding-top: var(--spacing-6) !important;
    padding-bottom: var(--spacing-6) !important;
  }

  .ro-pd-y-7-lg {
    padding-top: var(--spacing-7) !important;
    padding-bottom: var(--spacing-7) !important;
  }

  .ro-pd-y-8-lg {
    padding-top: var(--spacing-8) !important;
    padding-bottom: var(--spacing-8) !important;
  }

  .ro-pd-y-9-lg {
    padding-top: var(--spacing-9) !important;
    padding-bottom: var(--spacing-9) !important;
  }

  .ro-pd-y-10-lg {
    padding-top: var(--spacing-10) !important;
    padding-bottom: var(--spacing-10) !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-pd-y-0-xl {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .ro-pd-y-1-xl {
    padding-top: var(--spacing-xs) !important;
    padding-bottom: var(--spacing-xs) !important;
  }

  .ro-pd-y-2-xl {
    padding-top: var(--spacing-sm) !important;
    padding-bottom: var(--spacing-sm) !important;
  }

  .ro-pd-y-3-xl {
    padding-top: var(--spacing-md) !important;
    padding-bottom: var(--spacing-md) !important;
  }

  .ro-pd-y-4-xl {
    padding-top: var(--spacing-lg) !important;
    padding-bottom: var(--spacing-lg) !important;
  }

  .ro-pd-y-5-xl {
    padding-top: var(--spacing-xl) !important;
    padding-bottom: var(--spacing-xl) !important;
  }

  .ro-pd-y-6-xl {
    padding-top: var(--spacing-6) !important;
    padding-bottom: var(--spacing-6) !important;
  }

  .ro-pd-y-7-xl {
    padding-top: var(--spacing-7) !important;
    padding-bottom: var(--spacing-7) !important;
  }

  .ro-pd-y-8-xl {
    padding-top: var(--spacing-8) !important;
    padding-bottom: var(--spacing-8) !important;
  }

  .ro-pd-y-9-xl {
    padding-top: var(--spacing-9) !important;
    padding-bottom: var(--spacing-9) !important;
  }

  .ro-pd-y-10-xl {
    padding-top: var(--spacing-10) !important;
    padding-bottom: var(--spacing-10) !important;
  }
}
/* ===============  Width classes ============= */
.ro-w-auto {
  width: auto !important;
}

.ro-w-5 {
  width: 5rem !important;
}

.ro-w-10 {
  width: 10rem !important;
}

.ro-w-15 {
  width: 15rem !important;
}

.ro-w-20 {
  width: 20rem !important;
}

.ro-w-25 {
  width: 25rem !important;
}

.ro-w-30 {
  width: 30rem !important;
}

.ro-w-35 {
  width: 35rem !important;
}

.ro-w-40 {
  width: 40rem !important;
}

.ro-w-45 {
  width: 45rem !important;
}

.ro-w-50r {
  width: 50rem !important;
}

.ro-w-55 {
  width: 55rem !important;
}

.ro-w-60 {
  width: 60rem !important;
}

.ro-w-50 {
  width: 50% !important;
}

.ro-w-100 {
  width: 100% !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-w-auto-sm {
    width: auto !important;
  }

  .ro-w-5-sm {
    width: 5rem !important;
  }

  .ro-w-10-sm {
    width: 10rem !important;
  }

  .ro-w-15-sm {
    width: 15rem !important;
  }

  .ro-w-20-sm {
    width: 20rem !important;
  }

  .ro-w-25-sm {
    width: 25rem !important;
  }

  .ro-w-30-sm {
    width: 30rem !important;
  }

  .ro-w-35-sm {
    width: 35rem !important;
  }

  .ro-w-40-sm {
    width: 40rem !important;
  }

  .ro-w-45-sm {
    width: 45rem !important;
  }

  .ro-w-50r-sm {
    width: 50rem !important;
  }

  .ro-w-55-sm {
    width: 55rem !important;
  }

  .ro-w-60-sm {
    width: 60rem !important;
  }

  .ro-w-50-sm {
    width: 50% !important;
  }

  .ro-w-100-sm {
    width: 100% !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-w-auto-md {
    width: auto !important;
  }

  .ro-w-5-md {
    width: 5rem !important;
  }

  .ro-w-10-md {
    width: 10rem !important;
  }

  .ro-w-15-md {
    width: 15rem !important;
  }

  .ro-w-20-md {
    width: 20rem !important;
  }

  .ro-w-25-md {
    width: 25rem !important;
  }

  .ro-w-30-md {
    width: 30rem !important;
  }

  .ro-w-35-md {
    width: 35rem !important;
  }

  .ro-w-40-md {
    width: 40rem !important;
  }

  .ro-w-45-md {
    width: 45rem !important;
  }

  .ro-w-50r-md {
    width: 50rem !important;
  }

  .ro-w-55-md {
    width: 55rem !important;
  }

  .ro-w-60-md {
    width: 60rem !important;
  }

  .ro-w-50-md {
    width: 50% !important;
  }

  .ro-w-100-md {
    width: 100% !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-w-auto-lg {
    width: auto !important;
  }

  .ro-w-5-lg {
    width: 5rem !important;
  }

  .ro-w-10-lg {
    width: 10rem !important;
  }

  .ro-w-15-lg {
    width: 15rem !important;
  }

  .ro-w-20-lg {
    width: 20rem !important;
  }

  .ro-w-25-lg {
    width: 25rem !important;
  }

  .ro-w-30-lg {
    width: 30rem !important;
  }

  .ro-w-35-lg {
    width: 35rem !important;
  }

  .ro-w-40-lg {
    width: 40rem !important;
  }

  .ro-w-45-lg {
    width: 45rem !important;
  }

  .ro-w-50r-lg {
    width: 50rem !important;
  }

  .ro-w-55-lg {
    width: 55rem !important;
  }

  .ro-w-60-lg {
    width: 60rem !important;
  }

  .ro-w-50-lg {
    width: 50% !important;
  }

  .ro-w-100-lg {
    width: 100% !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-w-auto-xl {
    width: auto !important;
  }

  .ro-w-5-xl {
    width: 5rem !important;
  }

  .ro-w-10-xl {
    width: 10rem !important;
  }

  .ro-w-15-xl {
    width: 15rem !important;
  }

  .ro-w-20-xl {
    width: 20rem !important;
  }

  .ro-w-25-xl {
    width: 25rem !important;
  }

  .ro-w-30-xl {
    width: 30rem !important;
  }

  .ro-w-35-xl {
    width: 35rem !important;
  }

  .ro-w-40-xl {
    width: 40rem !important;
  }

  .ro-w-45-xl {
    width: 45rem !important;
  }

  .ro-w-50r-xl {
    width: 50rem !important;
  }

  .ro-w-55-xl {
    width: 55rem !important;
  }

  .ro-w-60-xl {
    width: 60rem !important;
  }

  .ro-w-50-xl {
    width: 50% !important;
  }

  .ro-w-100-xl {
    width: 100% !important;
  }
}
/* ===============  Max Width classes ============= */
.ro-mw-5 {
  max-width: 5rem !important;
}

.ro-mw-10 {
  max-width: 10rem !important;
}

.ro-mw-15 {
  max-width: 15rem !important;
}

.ro-mw-20 {
  max-width: 20rem !important;
}

.ro-mw-25 {
  max-width: 25rem !important;
}

.ro-mw-30 {
  max-width: 30rem !important;
}

.ro-mw-35 {
  max-width: 35rem !important;
}

.ro-mw-40 {
  max-width: 40rem !important;
}

.ro-mw-45 {
  max-width: 45rem !important;
}

.ro-mw-50r {
  max-width: 50rem !important;
}

.ro-mw-55 {
  max-width: 55rem !important;
}

.ro-mw-60 {
  max-width: 60rem !important;
}

.ro-mw-50 {
  max-width: 50% !important;
}

.ro-mw-100 {
  max-width: 100% !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-mw-5-sm {
    max-width: 5rem !important;
  }

  .ro-mw-10-sm {
    max-width: 10rem !important;
  }

  .ro-mw-15-sm {
    max-width: 15rem !important;
  }

  .ro-mw-20-sm {
    max-width: 20rem !important;
  }

  .ro-mw-25-sm {
    max-width: 25rem !important;
  }

  .ro-mw-30-sm {
    max-width: 30rem !important;
  }

  .ro-mw-35-sm {
    max-width: 35rem !important;
  }

  .ro-mw-40-sm {
    max-width: 40rem !important;
  }

  .ro-mw-45-sm {
    max-width: 45rem !important;
  }

  .ro-mw-50r-sm {
    max-width: 50rem !important;
  }

  .ro-mw-55-sm {
    max-width: 55rem !important;
  }

  .ro-mw-60-sm {
    max-width: 60rem !important;
  }

  .ro-mw-50-sm {
    max-width: 50% !important;
  }

  .ro-mw-100-sm {
    max-width: 100% !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-mw-5-md {
    max-width: 5rem !important;
  }

  .ro-mw-10-md {
    max-width: 10rem !important;
  }

  .ro-mw-15-md {
    max-width: 15rem !important;
  }

  .ro-mw-20-md {
    max-width: 20rem !important;
  }

  .ro-mw-25-md {
    max-width: 25rem !important;
  }

  .ro-mw-30-md {
    max-width: 30rem !important;
  }

  .ro-mw-35-md {
    max-width: 35rem !important;
  }

  .ro-mw-40-md {
    max-width: 40rem !important;
  }

  .ro-mw-45-md {
    max-width: 45rem !important;
  }

  .ro-mw-50r-md {
    max-width: 50rem !important;
  }

  .ro-mw-55-md {
    max-width: 55rem !important;
  }

  .ro-mw-60-md {
    max-width: 60rem !important;
  }

  .ro-mw-50-md {
    max-width: 50% !important;
  }

  .ro-mw-100-md {
    max-width: 100% !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-mw-5-lg {
    max-width: 5rem !important;
  }

  .ro-mw-10-lg {
    max-width: 10rem !important;
  }

  .ro-mw-15-lg {
    max-width: 15rem !important;
  }

  .ro-mw-20-lg {
    max-width: 20rem !important;
  }

  .ro-mw-25-lg {
    max-width: 25rem !important;
  }

  .ro-mw-30-lg {
    max-width: 30rem !important;
  }

  .ro-mw-35-lg {
    max-width: 35rem !important;
  }

  .ro-mw-40-lg {
    max-width: 40rem !important;
  }

  .ro-mw-45-lg {
    max-width: 45rem !important;
  }

  .ro-mw-50r-lg {
    max-width: 50rem !important;
  }

  .ro-mw-55-lg {
    max-width: 55rem !important;
  }

  .ro-mw-60-lg {
    max-width: 60rem !important;
  }

  .ro-mw-50-lg {
    max-width: 50% !important;
  }

  .ro-mw-100-lg {
    max-width: 100% !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-mw-5-xl {
    max-width: 5rem !important;
  }

  .ro-mw-10-xl {
    max-width: 10rem !important;
  }

  .ro-mw-15-xl {
    max-width: 15rem !important;
  }

  .ro-mw-20-xl {
    max-width: 20rem !important;
  }

  .ro-mw-25-xl {
    max-width: 25rem !important;
  }

  .ro-mw-30-xl {
    max-width: 30rem !important;
  }

  .ro-mw-35-xl {
    max-width: 35rem !important;
  }

  .ro-mw-40-xl {
    max-width: 40rem !important;
  }

  .ro-mw-45-xl {
    max-width: 45rem !important;
  }

  .ro-mw-50r-xl {
    max-width: 50rem !important;
  }

  .ro-mw-55-xl {
    max-width: 55rem !important;
  }

  .ro-mw-60-xl {
    max-width: 60rem !important;
  }

  .ro-mw-50-xl {
    max-width: 50% !important;
  }

  .ro-mw-100-xl {
    max-width: 100% !important;
  }
}
/* ===============  Height classes ============= */
.ro-h-auto {
  height: auto !important;
}

.ro-h-5 {
  height: 5rem !important;
}

.ro-h-10 {
  height: 10rem !important;
}

.ro-h-15 {
  height: 15rem !important;
}

.ro-h-20 {
  height: 20rem !important;
}

.ro-h-25 {
  height: 25rem !important;
}

.ro-h-30 {
  height: 30rem !important;
}

.ro-h-35 {
  height: 35rem !important;
}

.ro-h-40 {
  height: 40rem !important;
}

.ro-h-45 {
  height: 45rem !important;
}

.ro-h-50r {
  height: 50rem !important;
}

.ro-h-55 {
  height: 55rem !important;
}

.ro-h-60 {
  height: 60rem !important;
}

.ro-h-50 {
  height: 50% !important;
}

.ro-h-100 {
  height: 100% !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-h-auto-sm {
    height: auto !important;
  }

  .ro-h-5-sm {
    height: 5rem !important;
  }

  .ro-h-10-sm {
    height: 10rem !important;
  }

  .ro-h-15-sm {
    height: 15rem !important;
  }

  .ro-h-20-sm {
    height: 20rem !important;
  }

  .ro-h-25-sm {
    height: 25rem !important;
  }

  .ro-h-30-sm {
    height: 30rem !important;
  }

  .ro-h-35-sm {
    height: 35rem !important;
  }

  .ro-h-40-sm {
    height: 40rem !important;
  }

  .ro-h-45-sm {
    height: 45rem !important;
  }

  .ro-h-50r-sm {
    height: 50rem !important;
  }

  .ro-h-55-sm {
    height: 55rem !important;
  }

  .ro-h-60-sm {
    height: 60rem !important;
  }

  .ro-h-50-sm {
    height: 50% !important;
  }

  .ro-h-100-sm {
    height: 100% !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-h-auto-md {
    height: auto !important;
  }

  .ro-h-5-md {
    height: 5rem !important;
  }

  .ro-h-10-md {
    height: 10rem !important;
  }

  .ro-h-15-md {
    height: 15rem !important;
  }

  .ro-h-20-md {
    height: 20rem !important;
  }

  .ro-h-25-md {
    height: 25rem !important;
  }

  .ro-h-30-md {
    height: 30rem !important;
  }

  .ro-h-35-md {
    height: 35rem !important;
  }

  .ro-h-40-md {
    height: 40rem !important;
  }

  .ro-h-45-md {
    height: 45rem !important;
  }

  .ro-h-50r-md {
    height: 50rem !important;
  }

  .ro-h-55-md {
    height: 55rem !important;
  }

  .ro-h-60-md {
    height: 60rem !important;
  }

  .ro-h-50-md {
    height: 50% !important;
  }

  .ro-h-100-md {
    height: 100% !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-h-auto-lg {
    height: auto !important;
  }

  .ro-h-5-lg {
    height: 5rem !important;
  }

  .ro-h-10-lg {
    height: 10rem !important;
  }

  .ro-h-15-lg {
    height: 15rem !important;
  }

  .ro-h-20-lg {
    height: 20rem !important;
  }

  .ro-h-25-lg {
    height: 25rem !important;
  }

  .ro-h-30-lg {
    height: 30rem !important;
  }

  .ro-h-35-lg {
    height: 35rem !important;
  }

  .ro-h-40-lg {
    height: 40rem !important;
  }

  .ro-h-45-lg {
    height: 45rem !important;
  }

  .ro-h-50r-lg {
    height: 50rem !important;
  }

  .ro-h-55-lg {
    height: 55rem !important;
  }

  .ro-h-60-lg {
    height: 60rem !important;
  }

  .ro-h-50-lg {
    height: 50% !important;
  }

  .ro-h-100-lg {
    height: 100% !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-h-auto-xl {
    height: auto !important;
  }

  .ro-h-5-xl {
    height: 5rem !important;
  }

  .ro-h-10-xl {
    height: 10rem !important;
  }

  .ro-h-15-xl {
    height: 15rem !important;
  }

  .ro-h-20-xl {
    height: 20rem !important;
  }

  .ro-h-25-xl {
    height: 25rem !important;
  }

  .ro-h-30-xl {
    height: 30rem !important;
  }

  .ro-h-35-xl {
    height: 35rem !important;
  }

  .ro-h-40-xl {
    height: 40rem !important;
  }

  .ro-h-45-xl {
    height: 45rem !important;
  }

  .ro-h-50r-xl {
    height: 50rem !important;
  }

  .ro-h-55-xl {
    height: 55rem !important;
  }

  .ro-h-60-xl {
    height: 60rem !important;
  }

  .ro-h-50-xl {
    height: 50% !important;
  }

  .ro-h-100-xl {
    height: 100% !important;
  }
}
/* ===============  Max Height classes ============= */
.ro-mh-5 {
  max-height: 5rem !important;
}

.ro-mh-10 {
  max-height: 10rem !important;
}

.ro-mh-15 {
  max-height: 15rem !important;
}

.ro-mh-20 {
  max-height: 20rem !important;
}

.ro-mh-25 {
  max-height: 25rem !important;
}

.ro-mh-30 {
  max-height: 30rem !important;
}

.ro-mh-35 {
  max-height: 35rem !important;
}

.ro-mh-40 {
  max-height: 40rem !important;
}

.ro-mh-45 {
  max-height: 45rem !important;
}

.ro-mh-50r {
  max-height: 50rem !important;
}

.ro-mh-55 {
  max-height: 55rem !important;
}

.ro-mh-60 {
  max-height: 60rem !important;
}

.ro-mh-50 {
  max-height: 50% !important;
}

.ro-mh-100 {
  max-height: 100% !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-mh-5-sm {
    max-height: 5rem !important;
  }

  .ro-mh-10-sm {
    max-height: 10rem !important;
  }

  .ro-mh-15-sm {
    max-height: 15rem !important;
  }

  .ro-mh-20-sm {
    max-height: 20rem !important;
  }

  .ro-mh-25-sm {
    max-height: 25rem !important;
  }

  .ro-mh-30-sm {
    max-height: 30rem !important;
  }

  .ro-mh-35-sm {
    max-height: 35rem !important;
  }

  .ro-mh-40-sm {
    max-height: 40rem !important;
  }

  .ro-mh-45-sm {
    max-height: 45rem !important;
  }

  .ro-mh-50r-sm {
    max-height: 50rem !important;
  }

  .ro-mh-55-sm {
    max-height: 55rem !important;
  }

  .ro-mh-60-sm {
    max-height: 60rem !important;
  }

  .ro-mh-50-sm {
    max-height: 50% !important;
  }

  .ro-mh-100-sm {
    max-height: 100% !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-mh-5-md {
    max-height: 5rem !important;
  }

  .ro-mh-10-md {
    max-height: 10rem !important;
  }

  .ro-mh-15-md {
    max-height: 15rem !important;
  }

  .ro-mh-20-md {
    max-height: 20rem !important;
  }

  .ro-mh-25-md {
    max-height: 25rem !important;
  }

  .ro-mh-30-md {
    max-height: 30rem !important;
  }

  .ro-mh-35-md {
    max-height: 35rem !important;
  }

  .ro-mh-40-md {
    max-height: 40rem !important;
  }

  .ro-mh-45-md {
    max-height: 45rem !important;
  }

  .ro-mh-50r-md {
    max-height: 50rem !important;
  }

  .ro-mh-55-md {
    max-height: 55rem !important;
  }

  .ro-mh-60-md {
    max-height: 60rem !important;
  }

  .ro-mh-50-md {
    max-height: 50% !important;
  }

  .ro-mh-100-md {
    max-height: 100% !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-mh-5-lg {
    max-height: 5rem !important;
  }

  .ro-mh-10-lg {
    max-height: 10rem !important;
  }

  .ro-mh-15-lg {
    max-height: 15rem !important;
  }

  .ro-mh-20-lg {
    max-height: 20rem !important;
  }

  .ro-mh-25-lg {
    max-height: 25rem !important;
  }

  .ro-mh-30-lg {
    max-height: 30rem !important;
  }

  .ro-mh-35-lg {
    max-height: 35rem !important;
  }

  .ro-mh-40-lg {
    max-height: 40rem !important;
  }

  .ro-mh-45-lg {
    max-height: 45rem !important;
  }

  .ro-mh-50r-lg {
    max-height: 50rem !important;
  }

  .ro-mh-55-lg {
    max-height: 55rem !important;
  }

  .ro-mh-60-lg {
    max-height: 60rem !important;
  }

  .ro-mh-50-lg {
    max-height: 50% !important;
  }

  .ro-mh-100-lg {
    max-height: 100% !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-mh-5-xl {
    max-height: 5rem !important;
  }

  .ro-mh-10-xl {
    max-height: 10rem !important;
  }

  .ro-mh-15-xl {
    max-height: 15rem !important;
  }

  .ro-mh-20-xl {
    max-height: 20rem !important;
  }

  .ro-mh-25-xl {
    max-height: 25rem !important;
  }

  .ro-mh-30-xl {
    max-height: 30rem !important;
  }

  .ro-mh-35-xl {
    max-height: 35rem !important;
  }

  .ro-mh-40-xl {
    max-height: 40rem !important;
  }

  .ro-mh-45-xl {
    max-height: 45rem !important;
  }

  .ro-mh-50r-xl {
    max-height: 50rem !important;
  }

  .ro-mh-55-xl {
    max-height: 55rem !important;
  }

  .ro-mh-60-xl {
    max-height: 60rem !important;
  }

  .ro-mh-50-xl {
    max-height: 50% !important;
  }

  .ro-mh-100-xl {
    max-height: 100% !important;
  }
}
/* ===============  Viewport Width classes ============= */
.ro-w-50vw {
  width: 50vw !important;
}

.ro-w-100vw {
  width: 100vw !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-w-50vw-sm {
    width: 50vw !important;
  }

  .ro-w-100vw-sm {
    width: 100vw !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-w-50vw-md {
    width: 50vw !important;
  }

  .ro-w-100vw-md {
    width: 100vw !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-w-50vw-lg {
    width: 50vw !important;
  }

  .ro-w-100vw-lg {
    width: 100vw !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-w-50vw-xl {
    width: 50vw !important;
  }

  .ro-w-100vw-xl {
    width: 100vw !important;
  }
}
/* ===============  Viewport Max Width classes ============= */
.ro-mw-50vw {
  max-width: 50vw !important;
}

.ro-mw-100vw {
  max-width: 100vw !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-mw-50vw-sm {
    max-width: 50vw !important;
  }

  .ro-mw-100vw-sm {
    max-width: 100vw !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-mw-50vw-md {
    max-width: 50vw !important;
  }

  .ro-mw-100vw-md {
    max-width: 100vw !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-mw-50vw-lg {
    max-width: 50vw !important;
  }

  .ro-mw-100vw-lg {
    max-width: 100vw !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-mw-50vw-xl {
    max-width: 50vw !important;
  }

  .ro-mw-100vw-xl {
    max-width: 100vw !important;
  }
}
/* ===============  Viewport Height classes ============= */
.ro-h-50vh {
  height: 50vh !important;
}

.ro-h-60vh {
  height: 60vh !important;
}

.ro-h-70vh {
  height: 70vh !important;
}

.ro-h-80vh {
  height: 80vh !important;
}

.ro-h-90vh {
  height: 90vh !important;
}

.ro-h-100vh {
  height: 100vh !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-h-50vh-sm {
    height: 50vh !important;
  }

  .ro-h-60vh-sm {
    height: 60vh !important;
  }

  .ro-h-70vh-sm {
    height: 70vh !important;
  }

  .ro-h-80vh-sm {
    height: 80vh !important;
  }

  .ro-h-90vh-sm {
    height: 90vh !important;
  }

  .ro-h-100vh-sm {
    height: 100vh !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-h-50vh-md {
    height: 50vh !important;
  }

  .ro-h-60vh-md {
    height: 60vh !important;
  }

  .ro-h-70vh-md {
    height: 70vh !important;
  }

  .ro-h-80vh-md {
    height: 80vh !important;
  }

  .ro-h-90vh-md {
    height: 90vh !important;
  }

  .ro-h-100vh-md {
    height: 100vh !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-h-50vh-lg {
    height: 50vh !important;
  }

  .ro-h-60vh-lg {
    height: 60vh !important;
  }

  .ro-h-70vh-lg {
    height: 70vh !important;
  }

  .ro-h-80vh-lg {
    height: 80vh !important;
  }

  .ro-h-90vh-lg {
    height: 90vh !important;
  }

  .ro-h-100vh-lg {
    height: 100vh !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-h-50vh-xl {
    height: 50vh !important;
  }

  .ro-h-60vh-xl {
    height: 60vh !important;
  }

  .ro-h-70vh-xl {
    height: 70vh !important;
  }

  .ro-h-80vh-xl {
    height: 80vh !important;
  }

  .ro-h-90vh-xl {
    height: 90vh !important;
  }

  .ro-h-100vh-xl {
    height: 100vh !important;
  }
}
/* ===============  Viewport Max Height classes ============= */
.ro-mh-50vh {
  max-height: 50vh !important;
}

.ro-mh-60vh {
  max-height: 60vh !important;
}

.ro-mh-70vh {
  max-height: 70vh !important;
}

.ro-mh-80vh {
  max-height: 80vh !important;
}

.ro-mh-90vh {
  max-height: 90vh !important;
}

.ro-mh-100vh {
  max-height: 100vh !important;
}

@media screen and (min-width: 34.5625em) {
  .ro-mh-50vh-sm {
    max-height: 50vh !important;
  }

  .ro-mh-60vh-sm {
    max-height: 60vh !important;
  }

  .ro-mh-70vh-sm {
    max-height: 70vh !important;
  }

  .ro-mh-80vh-sm {
    max-height: 80vh !important;
  }

  .ro-mh-90vh-sm {
    max-height: 90vh !important;
  }

  .ro-mh-100vh-sm {
    max-height: 100vh !important;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-mh-50vh-md {
    max-height: 50vh !important;
  }

  .ro-mh-60vh-md {
    max-height: 60vh !important;
  }

  .ro-mh-70vh-md {
    max-height: 70vh !important;
  }

  .ro-mh-80vh-md {
    max-height: 80vh !important;
  }

  .ro-mh-90vh-md {
    max-height: 90vh !important;
  }

  .ro-mh-100vh-md {
    max-height: 100vh !important;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-mh-50vh-lg {
    max-height: 50vh !important;
  }

  .ro-mh-60vh-lg {
    max-height: 60vh !important;
  }

  .ro-mh-70vh-lg {
    max-height: 70vh !important;
  }

  .ro-mh-80vh-lg {
    max-height: 80vh !important;
  }

  .ro-mh-90vh-lg {
    max-height: 90vh !important;
  }

  .ro-mh-100vh-lg {
    max-height: 100vh !important;
  }
}
@media screen and (min-width: 90em) {
  .ro-mh-50vh-xl {
    max-height: 50vh !important;
  }

  .ro-mh-60vh-xl {
    max-height: 60vh !important;
  }

  .ro-mh-70vh-xl {
    max-height: 70vh !important;
  }

  .ro-mh-80vh-xl {
    max-height: 80vh !important;
  }

  .ro-mh-90vh-xl {
    max-height: 90vh !important;
  }

  .ro-mh-100vh-xl {
    max-height: 100vh !important;
  }
}
/* ================================ ANIMATIONS ================================== */
@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 15rem);
  }
  95% {
    opacity: 0.8;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}
@keyframes fadeSlideLeft {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateX(5rem);
  }
  95% {
    opacity: 0.8;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}
@keyframes buttonShake {
  10%,
  90% {
    transform: translate3d(-0.1rem, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(0.2rem, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-0.4rem, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(0.4rem, 0, 0);
  }
}
@keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
/*
=================================================
                  LAYOUT AND GRID
=================================================
*/
.ro-container,
[class*="ro-container-"] {
  width: var(--default-container);
  margin: 0 auto;
}

/* FLUID WIDTH CONTAINER */
@media screen and (min-width: 34.5625em) {
  .ro-container-fluid-50 {
    max-width: var(--container-50);
  }

  .ro-container-fluid-60 {
    max-width: var(--container-60);
  }

  .ro-container-fluid-70 {
    max-width: var(--container-70);
  }

  .ro-container-fluid-80 {
    max-width: var(--container-80);
  }
}
/* FIXED WIDTH CONTAINERS */
@media screen and (min-width: 34.5625em) {
  .ro-container-fixed-sm {
    max-width: var(--container-sm);
  }
}

@media screen and (min-width: 56.3125em) {
  .ro-container-fixed-md {
    max-width: var(--container-md);
  }
}

@media screen and (min-width: 80.0625em) {
  .ro-container-fixed-lg {
    max-width: var(--container-lg);
  }
}

@media screen and (min-width: 90em) {
  .ro-container-fixed-xl {
    max-width: var(--container-xl);
  }
}

.ro-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.ro-row > [class*="ro-flex-"] {
  width: 100%;
  max-width: 100%;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  min-height: 0.1rem;
}
.ro-row.ro-gutter-none,
.ro-row.ro-gutter-none .ro-row {
  margin-left: 0;
  margin-right: 0;
}
.ro-row.ro-gutter-none > [class*="ro-flex-"],
.ro-row.ro-gutter-none .ro-row > [class*="ro-flex-"] {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}
.ro-row.ro-gutter-sm:not(.ro-row.ro-gutter-sm .ro-row),
.ro-row.ro-gutter-sm .ro-inherit-gutter,
.ro-row.ro-gutter-sm .ro-gutter-sm {
  /* Gutter size sm - 1.2rem */
  margin-left: -1.2rem;
  margin-right: -1.2rem;
}
.ro-row.ro-gutter-sm:not(.ro-row.ro-gutter-sm .ro-row) > [class*="ro-flex-"],
.ro-row.ro-gutter-sm .ro-inherit-gutter > [class*="ro-flex-"],
.ro-row.ro-gutter-sm .ro-gutter-sm > [class*="ro-flex-"] {
  /* Gutter size sm - 1.2rem */
  padding-right: 1.2rem;
  padding-left: 1.2rem;
}
.ro-row.ro-gutter-md:not(.ro-row.ro-gutter-md .ro-row),
.ro-row.ro-gutter-md .ro-inherit-gutter,
.ro-row.ro-gutter-md .ro-gutter-md {
  /* Gutter size md - 1.8rem */
  margin-left: -1.8rem;
  margin-right: -1.8rem;
}
.ro-row.ro-gutter-md:not(.ro-row.ro-gutter-md .ro-row) > [class*="ro-flex-"],
.ro-row.ro-gutter-md .ro-inherit-gutter > [class*="ro-flex-"],
.ro-row.ro-gutter-md .ro-gutter-md > [class*="ro-flex-"] {
  /* Gutter size md - 1.8rem */
  padding-right: 1.8rem;
  padding-left: 1.8rem;
}
.ro-row.ro-gutter-lg:not(.ro-row.ro-gutter-lg .ro-row),
.ro-row.ro-gutter-lg .ro-inherit-gutter,
.ro-row.ro-gutter-lg .ro-gutter-lg {
  /* Gutter size lg - 2.2rem */
  margin-left: -2.2rem;
  margin-right: -2.2rem;
}
.ro-row.ro-gutter-lg:not(.ro-row.ro-gutter-lg .ro-row) > [class*="ro-flex-"],
.ro-row.ro-gutter-lg .ro-inherit-gutter > [class*="ro-flex-"],
.ro-row.ro-gutter-lg .ro-gutter-lg > [class*="ro-flex-"] {
  /* Gutter size lg - 2.2rem */
  padding-right: 2.2rem;
  padding-left: 2.2rem;
}
@media screen and (min-width: 34.5625em) {
  .ro-row .ro-flex-sm-1 {
    flex: 0 0 calc(100% / (12 / 1));
    max-width: calc(100% / (12 / 1));
  }
  .ro-row .ro-flex-sm-2 {
    flex: 0 0 calc(100% / (12 / 2));
    max-width: calc(100% / (12 / 2));
  }
  .ro-row .ro-flex-sm-3 {
    flex: 0 0 calc(100% / (12 / 3));
    max-width: calc(100% / (12 / 3));
  }
  .ro-row .ro-flex-sm-4 {
    flex: 0 0 calc(100% / (12 / 4));
    max-width: calc(100% / (12 / 4));
  }
  .ro-row .ro-flex-sm-5 {
    flex: 0 0 calc(100% / (12 / 5));
    max-width: calc(100% / (12 / 5));
  }
  .ro-row .ro-flex-sm-6 {
    flex: 0 0 calc(100% / (12 / 6));
    max-width: calc(100% / (12 / 6));
  }
  .ro-row .ro-flex-sm-7 {
    flex: 0 0 calc(100% / (12 / 7));
    max-width: calc(100% / (12 / 7));
  }
  .ro-row .ro-flex-sm-8 {
    flex: 0 0 calc(100% / (12 / 8));
    max-width: calc(100% / (12 / 8));
  }
  .ro-row .ro-flex-sm-9 {
    flex: 0 0 calc(100% / (12 / 9));
    max-width: calc(100% / (12 / 9));
  }
  .ro-row .ro-flex-sm-10 {
    flex: 0 0 calc(100% / (12 / 10));
    max-width: calc(100% / (12 / 10));
  }
  .ro-row .ro-flex-sm-11 {
    flex: 0 0 calc(100% / (12 / 11));
    max-width: calc(100% / (12 / 11));
  }
  .ro-row .ro-flex-sm-12 {
    flex: 0 0 calc(100% / (12 / 12));
    max-width: calc(100% / (12 / 12));
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-row .ro-flex-md-1 {
    flex: 0 0 calc(100% / (12 / 1));
    max-width: calc(100% / (12 / 1));
  }
  .ro-row .ro-flex-md-2 {
    flex: 0 0 calc(100% / (12 / 2));
    max-width: calc(100% / (12 / 2));
  }
  .ro-row .ro-flex-md-3 {
    flex: 0 0 calc(100% / (12 / 3));
    max-width: calc(100% / (12 / 3));
  }
  .ro-row .ro-flex-md-4 {
    flex: 0 0 calc(100% / (12 / 4));
    max-width: calc(100% / (12 / 4));
  }
  .ro-row .ro-flex-md-5 {
    flex: 0 0 calc(100% / (12 / 5));
    max-width: calc(100% / (12 / 5));
  }
  .ro-row .ro-flex-md-6 {
    flex: 0 0 calc(100% / (12 / 6));
    max-width: calc(100% / (12 / 6));
  }
  .ro-row .ro-flex-md-7 {
    flex: 0 0 calc(100% / (12 / 7));
    max-width: calc(100% / (12 / 7));
  }
  .ro-row .ro-flex-md-8 {
    flex: 0 0 calc(100% / (12 / 8));
    max-width: calc(100% / (12 / 8));
  }
  .ro-row .ro-flex-md-9 {
    flex: 0 0 calc(100% / (12 / 9));
    max-width: calc(100% / (12 / 9));
  }
  .ro-row .ro-flex-md-10 {
    flex: 0 0 calc(100% / (12 / 10));
    max-width: calc(100% / (12 / 10));
  }
  .ro-row .ro-flex-md-11 {
    flex: 0 0 calc(100% / (12 / 11));
    max-width: calc(100% / (12 / 11));
  }
  .ro-row .ro-flex-md-12 {
    flex: 0 0 calc(100% / (12 / 12));
    max-width: calc(100% / (12 / 12));
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-row .ro-flex-lg-1 {
    flex: 0 0 calc(100% / (12 / 1));
    max-width: calc(100% / (12 / 1));
  }
  .ro-row .ro-flex-lg-2 {
    flex: 0 0 calc(100% / (12 / 2));
    max-width: calc(100% / (12 / 2));
  }
  .ro-row .ro-flex-lg-3 {
    flex: 0 0 calc(100% / (12 / 3));
    max-width: calc(100% / (12 / 3));
  }
  .ro-row .ro-flex-lg-4 {
    flex: 0 0 calc(100% / (12 / 4));
    max-width: calc(100% / (12 / 4));
  }
  .ro-row .ro-flex-lg-5 {
    flex: 0 0 calc(100% / (12 / 5));
    max-width: calc(100% / (12 / 5));
  }
  .ro-row .ro-flex-lg-6 {
    flex: 0 0 calc(100% / (12 / 6));
    max-width: calc(100% / (12 / 6));
  }
  .ro-row .ro-flex-lg-7 {
    flex: 0 0 calc(100% / (12 / 7));
    max-width: calc(100% / (12 / 7));
  }
  .ro-row .ro-flex-lg-8 {
    flex: 0 0 calc(100% / (12 / 8));
    max-width: calc(100% / (12 / 8));
  }
  .ro-row .ro-flex-lg-9 {
    flex: 0 0 calc(100% / (12 / 9));
    max-width: calc(100% / (12 / 9));
  }
  .ro-row .ro-flex-lg-10 {
    flex: 0 0 calc(100% / (12 / 10));
    max-width: calc(100% / (12 / 10));
  }
  .ro-row .ro-flex-lg-11 {
    flex: 0 0 calc(100% / (12 / 11));
    max-width: calc(100% / (12 / 11));
  }
  .ro-row .ro-flex-lg-12 {
    flex: 0 0 calc(100% / (12 / 12));
    max-width: calc(100% / (12 / 12));
  }
}
@media screen and (min-width: 90em) {
  .ro-row .ro-flex-xl-1 {
    flex: 0 0 calc(100% / (12 / 1));
    max-width: calc(100% / (12 / 1));
  }
  .ro-row .ro-flex-xl-2 {
    flex: 0 0 calc(100% / (12 / 2));
    max-width: calc(100% / (12 / 2));
  }
  .ro-row .ro-flex-xl-3 {
    flex: 0 0 calc(100% / (12 / 3));
    max-width: calc(100% / (12 / 3));
  }
  .ro-row .ro-flex-xl-4 {
    flex: 0 0 calc(100% / (12 / 4));
    max-width: calc(100% / (12 / 4));
  }
  .ro-row .ro-flex-xl-5 {
    flex: 0 0 calc(100% / (12 / 5));
    max-width: calc(100% / (12 / 5));
  }
  .ro-row .ro-flex-xl-6 {
    flex: 0 0 calc(100% / (12 / 6));
    max-width: calc(100% / (12 / 6));
  }
  .ro-row .ro-flex-xl-7 {
    flex: 0 0 calc(100% / (12 / 7));
    max-width: calc(100% / (12 / 7));
  }
  .ro-row .ro-flex-xl-8 {
    flex: 0 0 calc(100% / (12 / 8));
    max-width: calc(100% / (12 / 8));
  }
  .ro-row .ro-flex-xl-9 {
    flex: 0 0 calc(100% / (12 / 9));
    max-width: calc(100% / (12 / 9));
  }
  .ro-row .ro-flex-xl-10 {
    flex: 0 0 calc(100% / (12 / 10));
    max-width: calc(100% / (12 / 10));
  }
  .ro-row .ro-flex-xl-11 {
    flex: 0 0 calc(100% / (12 / 11));
    max-width: calc(100% / (12 / 11));
  }
  .ro-row .ro-flex-xl-12 {
    flex: 0 0 calc(100% / (12 / 12));
    max-width: calc(100% / (12 / 12));
  }
}

.ro-offset-1 {
  /* Offset 1 */
  margin-left: calc(100% / (12 / 1));
  flex: 0 0 calc(100% * ((12 - 1) / 12));
  max-width: calc(100% * ((12 - 1) / 12));
}

.ro-offset-2 {
  /* Offset 2 */
  margin-left: calc(100% / (12 / 2));
  flex: 0 0 calc(100% * ((12 - 2) / 12));
  max-width: calc(100% * ((12 - 2) / 12));
}

.ro-offset-3 {
  /* Offset 3 */
  margin-left: calc(100% / (12 / 3));
  flex: 0 0 calc(100% * ((12 - 3) / 12));
  max-width: calc(100% * ((12 - 3) / 12));
}

.ro-offset-4 {
  /* Offset 4 */
  margin-left: calc(100% / (12 / 4));
  flex: 0 0 calc(100% * ((12 - 4) / 12));
  max-width: calc(100% * ((12 - 4) / 12));
}

.ro-offset-5 {
  /* Offset 5 */
  margin-left: calc(100% / (12 / 5));
  flex: 0 0 calc(100% * ((12 - 5) / 12));
  max-width: calc(100% * ((12 - 5) / 12));
}

.ro-offset-6 {
  /* Offset 6 */
  margin-left: calc(100% / (12 / 6));
  flex: 0 0 calc(100% * ((12 - 6) / 12));
  max-width: calc(100% * ((12 - 6) / 12));
}

.ro-offset-7 {
  /* Offset 7 */
  margin-left: calc(100% / (12 / 7));
  flex: 0 0 calc(100% * ((12 - 7) / 12));
  max-width: calc(100% * ((12 - 7) / 12));
}

.ro-offset-8 {
  /* Offset 8 */
  margin-left: calc(100% / (12 / 8));
  flex: 0 0 calc(100% * ((12 - 8) / 12));
  max-width: calc(100% * ((12 - 8) / 12));
}

.ro-offset-9 {
  /* Offset 9 */
  margin-left: calc(100% / (12 / 9));
  flex: 0 0 calc(100% * ((12 - 9) / 12));
  max-width: calc(100% * ((12 - 9) / 12));
}

.ro-offset-10 {
  /* Offset 10 */
  margin-left: calc(100% / (12 / 10));
  flex: 0 0 calc(100% * ((12 - 10) / 12));
  max-width: calc(100% * ((12 - 10) / 12));
}

.ro-offset-11 {
  /* Offset 11 */
  margin-left: calc(100% / (12 / 11));
  flex: 0 0 calc(100% * ((12 - 11) / 12));
  max-width: calc(100% * ((12 - 11) / 12));
}

.ro-offset-12 {
  /* Offset 12 */
  margin-left: 0;
  flex: 0 0 100%;
  max-width: 100%;
}

@media screen and (min-width: 34.5625em) {
  .ro-offset-sm-1 {
    /* Offset 1 */
    margin-left: calc(100% / (12 / 1));
    flex: 0 0 calc(100% * ((12 - 1) / 12));
    max-width: calc(100% * ((12 - 1) / 12));
  }

  .ro-offset-sm-2 {
    /* Offset 2 */
    margin-left: calc(100% / (12 / 2));
    flex: 0 0 calc(100% * ((12 - 2) / 12));
    max-width: calc(100% * ((12 - 2) / 12));
  }

  .ro-offset-sm-3 {
    /* Offset 3 */
    margin-left: calc(100% / (12 / 3));
    flex: 0 0 calc(100% * ((12 - 3) / 12));
    max-width: calc(100% * ((12 - 3) / 12));
  }

  .ro-offset-sm-4 {
    /* Offset 4 */
    margin-left: calc(100% / (12 / 4));
    flex: 0 0 calc(100% * ((12 - 4) / 12));
    max-width: calc(100% * ((12 - 4) / 12));
  }

  .ro-offset-sm-5 {
    /* Offset 5 */
    margin-left: calc(100% / (12 / 5));
    flex: 0 0 calc(100% * ((12 - 5) / 12));
    max-width: calc(100% * ((12 - 5) / 12));
  }

  .ro-offset-sm-6 {
    /* Offset 6 */
    margin-left: calc(100% / (12 / 6));
    flex: 0 0 calc(100% * ((12 - 6) / 12));
    max-width: calc(100% * ((12 - 6) / 12));
  }

  .ro-offset-sm-7 {
    /* Offset 7 */
    margin-left: calc(100% / (12 / 7));
    flex: 0 0 calc(100% * ((12 - 7) / 12));
    max-width: calc(100% * ((12 - 7) / 12));
  }

  .ro-offset-sm-8 {
    /* Offset 8 */
    margin-left: calc(100% / (12 / 8));
    flex: 0 0 calc(100% * ((12 - 8) / 12));
    max-width: calc(100% * ((12 - 8) / 12));
  }

  .ro-offset-sm-9 {
    /* Offset 9 */
    margin-left: calc(100% / (12 / 9));
    flex: 0 0 calc(100% * ((12 - 9) / 12));
    max-width: calc(100% * ((12 - 9) / 12));
  }

  .ro-offset-sm-10 {
    /* Offset 10 */
    margin-left: calc(100% / (12 / 10));
    flex: 0 0 calc(100% * ((12 - 10) / 12));
    max-width: calc(100% * ((12 - 10) / 12));
  }

  .ro-offset-sm-11 {
    /* Offset 11 */
    margin-left: calc(100% / (12 / 11));
    flex: 0 0 calc(100% * ((12 - 11) / 12));
    max-width: calc(100% * ((12 - 11) / 12));
  }

  .ro-offset-sm-12 {
    /* Offset 12 */
    margin-left: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-offset-md-1 {
    /* Offset 1 */
    margin-left: calc(100% / (12 / 1));
    flex: 0 0 calc(100% * ((12 - 1) / 12));
    max-width: calc(100% * ((12 - 1) / 12));
  }

  .ro-offset-md-2 {
    /* Offset 2 */
    margin-left: calc(100% / (12 / 2));
    flex: 0 0 calc(100% * ((12 - 2) / 12));
    max-width: calc(100% * ((12 - 2) / 12));
  }

  .ro-offset-md-3 {
    /* Offset 3 */
    margin-left: calc(100% / (12 / 3));
    flex: 0 0 calc(100% * ((12 - 3) / 12));
    max-width: calc(100% * ((12 - 3) / 12));
  }

  .ro-offset-md-4 {
    /* Offset 4 */
    margin-left: calc(100% / (12 / 4));
    flex: 0 0 calc(100% * ((12 - 4) / 12));
    max-width: calc(100% * ((12 - 4) / 12));
  }

  .ro-offset-md-5 {
    /* Offset 5 */
    margin-left: calc(100% / (12 / 5));
    flex: 0 0 calc(100% * ((12 - 5) / 12));
    max-width: calc(100% * ((12 - 5) / 12));
  }

  .ro-offset-md-6 {
    /* Offset 6 */
    margin-left: calc(100% / (12 / 6));
    flex: 0 0 calc(100% * ((12 - 6) / 12));
    max-width: calc(100% * ((12 - 6) / 12));
  }

  .ro-offset-md-7 {
    /* Offset 7 */
    margin-left: calc(100% / (12 / 7));
    flex: 0 0 calc(100% * ((12 - 7) / 12));
    max-width: calc(100% * ((12 - 7) / 12));
  }

  .ro-offset-md-8 {
    /* Offset 8 */
    margin-left: calc(100% / (12 / 8));
    flex: 0 0 calc(100% * ((12 - 8) / 12));
    max-width: calc(100% * ((12 - 8) / 12));
  }

  .ro-offset-md-9 {
    /* Offset 9 */
    margin-left: calc(100% / (12 / 9));
    flex: 0 0 calc(100% * ((12 - 9) / 12));
    max-width: calc(100% * ((12 - 9) / 12));
  }

  .ro-offset-md-10 {
    /* Offset 10 */
    margin-left: calc(100% / (12 / 10));
    flex: 0 0 calc(100% * ((12 - 10) / 12));
    max-width: calc(100% * ((12 - 10) / 12));
  }

  .ro-offset-md-11 {
    /* Offset 11 */
    margin-left: calc(100% / (12 / 11));
    flex: 0 0 calc(100% * ((12 - 11) / 12));
    max-width: calc(100% * ((12 - 11) / 12));
  }

  .ro-offset-md-12 {
    /* Offset 12 */
    margin-left: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-offset-lg-1 {
    /* Offset 1 */
    margin-left: calc(100% / (12 / 1));
    flex: 0 0 calc(100% * ((12 - 1) / 12));
    max-width: calc(100% * ((12 - 1) / 12));
  }

  .ro-offset-lg-2 {
    /* Offset 2 */
    margin-left: calc(100% / (12 / 2));
    flex: 0 0 calc(100% * ((12 - 2) / 12));
    max-width: calc(100% * ((12 - 2) / 12));
  }

  .ro-offset-lg-3 {
    /* Offset 3 */
    margin-left: calc(100% / (12 / 3));
    flex: 0 0 calc(100% * ((12 - 3) / 12));
    max-width: calc(100% * ((12 - 3) / 12));
  }

  .ro-offset-lg-4 {
    /* Offset 4 */
    margin-left: calc(100% / (12 / 4));
    flex: 0 0 calc(100% * ((12 - 4) / 12));
    max-width: calc(100% * ((12 - 4) / 12));
  }

  .ro-offset-lg-5 {
    /* Offset 5 */
    margin-left: calc(100% / (12 / 5));
    flex: 0 0 calc(100% * ((12 - 5) / 12));
    max-width: calc(100% * ((12 - 5) / 12));
  }

  .ro-offset-lg-6 {
    /* Offset 6 */
    margin-left: calc(100% / (12 / 6));
    flex: 0 0 calc(100% * ((12 - 6) / 12));
    max-width: calc(100% * ((12 - 6) / 12));
  }

  .ro-offset-lg-7 {
    /* Offset 7 */
    margin-left: calc(100% / (12 / 7));
    flex: 0 0 calc(100% * ((12 - 7) / 12));
    max-width: calc(100% * ((12 - 7) / 12));
  }

  .ro-offset-lg-8 {
    /* Offset 8 */
    margin-left: calc(100% / (12 / 8));
    flex: 0 0 calc(100% * ((12 - 8) / 12));
    max-width: calc(100% * ((12 - 8) / 12));
  }

  .ro-offset-lg-9 {
    /* Offset 9 */
    margin-left: calc(100% / (12 / 9));
    flex: 0 0 calc(100% * ((12 - 9) / 12));
    max-width: calc(100% * ((12 - 9) / 12));
  }

  .ro-offset-lg-10 {
    /* Offset 10 */
    margin-left: calc(100% / (12 / 10));
    flex: 0 0 calc(100% * ((12 - 10) / 12));
    max-width: calc(100% * ((12 - 10) / 12));
  }

  .ro-offset-lg-11 {
    /* Offset 11 */
    margin-left: calc(100% / (12 / 11));
    flex: 0 0 calc(100% * ((12 - 11) / 12));
    max-width: calc(100% * ((12 - 11) / 12));
  }

  .ro-offset-lg-12 {
    /* Offset 12 */
    margin-left: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 90em) {
  .ro-offset-xl-1 {
    /* Offset 1 */
    margin-left: calc(100% / (12 / 1));
    flex: 0 0 calc(100% * ((12 - 1) / 12));
    max-width: calc(100% * ((12 - 1) / 12));
  }

  .ro-offset-xl-2 {
    /* Offset 2 */
    margin-left: calc(100% / (12 / 2));
    flex: 0 0 calc(100% * ((12 - 2) / 12));
    max-width: calc(100% * ((12 - 2) / 12));
  }

  .ro-offset-xl-3 {
    /* Offset 3 */
    margin-left: calc(100% / (12 / 3));
    flex: 0 0 calc(100% * ((12 - 3) / 12));
    max-width: calc(100% * ((12 - 3) / 12));
  }

  .ro-offset-xl-4 {
    /* Offset 4 */
    margin-left: calc(100% / (12 / 4));
    flex: 0 0 calc(100% * ((12 - 4) / 12));
    max-width: calc(100% * ((12 - 4) / 12));
  }

  .ro-offset-xl-5 {
    /* Offset 5 */
    margin-left: calc(100% / (12 / 5));
    flex: 0 0 calc(100% * ((12 - 5) / 12));
    max-width: calc(100% * ((12 - 5) / 12));
  }

  .ro-offset-xl-6 {
    /* Offset 6 */
    margin-left: calc(100% / (12 / 6));
    flex: 0 0 calc(100% * ((12 - 6) / 12));
    max-width: calc(100% * ((12 - 6) / 12));
  }

  .ro-offset-xl-7 {
    /* Offset 7 */
    margin-left: calc(100% / (12 / 7));
    flex: 0 0 calc(100% * ((12 - 7) / 12));
    max-width: calc(100% * ((12 - 7) / 12));
  }

  .ro-offset-xl-8 {
    /* Offset 8 */
    margin-left: calc(100% / (12 / 8));
    flex: 0 0 calc(100% * ((12 - 8) / 12));
    max-width: calc(100% * ((12 - 8) / 12));
  }

  .ro-offset-xl-9 {
    /* Offset 9 */
    margin-left: calc(100% / (12 / 9));
    flex: 0 0 calc(100% * ((12 - 9) / 12));
    max-width: calc(100% * ((12 - 9) / 12));
  }

  .ro-offset-xl-10 {
    /* Offset 10 */
    margin-left: calc(100% / (12 / 10));
    flex: 0 0 calc(100% * ((12 - 10) / 12));
    max-width: calc(100% * ((12 - 10) / 12));
  }

  .ro-offset-xl-11 {
    /* Offset 11 */
    margin-left: calc(100% / (12 / 11));
    flex: 0 0 calc(100% * ((12 - 11) / 12));
    max-width: calc(100% * ((12 - 11) / 12));
  }

  .ro-offset-xl-12 {
    /* Offset 12 */
    margin-left: 0;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* =====================================================================
                               COMPONENTS
=========================================================================*/
/* ====================== Accordion ====================== */
.ro-accordion-primary {
  /* Theme primary */
  --button-circle-bg-color: var(--primary-light-4);
  /* Icon color */
  --button-circle-icon-color: var(--gray-light-4);
}

.ro-accordion-secondary {
  /* Theme secondary */
  --button-circle-bg-color: var(--secondary-light-4);
  /* Icon color */
  --button-circle-icon-color: var(--gray-light-4);
}

.ro-accordion-success {
  /* Theme success */
  --button-circle-bg-color: var(--success-light-4);
  /* Icon color */
  --button-circle-icon-color: var(--gray-light-4);
}

.ro-accordion-info {
  /* Theme info */
  --button-circle-bg-color: var(--info-light-4);
  /* Icon color */
  --button-circle-icon-color: var(--gray-light-4);
}

.ro-accordion-warning {
  /* Theme warning */
  --button-circle-bg-color: var(--warning-light-4);
  /* Icon color */
  --button-circle-icon-color: var(--dark);
}

.ro-accordion-danger {
  /* Theme danger */
  --button-circle-bg-color: var(--danger-light-4);
  /* Icon color */
  --button-circle-icon-color: var(--gray-light-4);
}

.ro-accordion-gray {
  /* Theme gray */
  --button-circle-bg-color: var(--gray-light-1);
  /* Icon color */
  --button-circle-icon-color: var(--dark);
}

.ro-accordion-dark {
  /* Theme dark */
  --button-circle-bg-color: var(--dark-light-4);
  /* Icon color */
  --button-circle-icon-color: var(--gray-light-4);
}

.ro-accordion {
  --accordion-default-bg: var(--global-background-color);
  --accordion-default-body-bg: var(--gray-light-3);
  overflow: hidden;
  border-radius: 0.6rem;
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
}
.ro-accordion__child {
  background-color: var(--accordion-default-bg);
  box-shadow: none;
  border-bottom: 0.2rem solid var(--gray-light-1);
}
.ro-accordion__child:last-of-type {
  border-bottom: 0;
}
.ro-accordion__header {
  /* Accordion header */
  padding: var(--spacing-sm);
  border-radius: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: border-radius 0.3s 0s ease-out;
}
.ro-accordion__title {
  /* Accordion title */
  margin-right: 2rem;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.ro-accordion__button i {
  /* Accordion button */
  opacity: 0;
  visibility: hidden;
}
.ro-accordion__button.state-closed .open {
  opacity: 1;
  visibility: visible;
}
.ro-accordion__button.state-opened .close {
  opacity: 1;
  visibility: visible;
}
.ro-accordion__body {
  /* Accordion body */
  background-color: var(--accordion-default-body-bg);
  border-left: 0.4rem solid var(--button-circle-bg-color);
  padding: 0 var(--spacing-sm);
  height: 0;
  max-height: 30rem;
  overflow-y: auto;
  position: relative;
  z-index: 1;
  transition: all 0.3s 0s ease-out;
  scrollbar-width: thin;
  scrollbar-color: var(--dark-light-3) transparent;
}
.ro-accordion__body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.2rem transparent;
  background: transparent;
  margin: 1.1rem;
}
.ro-accordion__body::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
  background: transparent;
}
.ro-accordion__body::-webkit-scrollbar-thumb {
  border-radius: 6rem;
  width: 0.5rem;
  background-color: var(--dark-light-3);
}
.ro-accordion__body.ro-active {
  padding: var(--spacing-sm);
  height: auto;
}

/* ====================== Alerts ====================== */
.ro-alert {
  --alert-border-color: transparent;
  --alert-feedback-default-bg: transparent;
  --alert-feedback-icon-color: transparent;
  position: relative;
  background-color: var(--global-background-color);
  padding: var(--spacing-sm) calc(var(--spacing-sm) * 2.5) var(--spacing-sm)
    var(--spacing-sm);
  border-radius: 0.6rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  border-left: 0.4rem solid var(--alert-border-color);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s 0s ease-out;
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
}
.ro-alert.ro-alert-success {
  /* Alert type success */
  --alert-border-color: var(--success);
  --alert-feedback-icon-color: var(--success-dark-4);
}
.ro-alert.ro-alert-info {
  /* Alert type info */
  --alert-border-color: var(--info);
  --alert-feedback-icon-color: var(--info-dark-4);
}
.ro-alert.ro-alert-warning {
  /* Alert type warning */
  --alert-border-color: var(--warning);
  --alert-feedback-icon-color: var(--warning-dark-4);
}
.ro-alert.ro-alert-danger {
  /* Alert type danger */
  --alert-border-color: var(--danger);
  --alert-feedback-icon-color: var(--danger-dark-4);
}
.ro-alert.ro-alert-success {
  /* Alert type success */
  --alert-feedback-default-bg: #bdefe5;
}
.ro-alert.ro-alert-info {
  /* Alert type info */
  --alert-feedback-default-bg: #b1d4fc;
}
.ro-alert.ro-alert-warning {
  /* Alert type warning */
  --alert-feedback-default-bg: #fee9af;
}
.ro-alert.ro-alert-danger {
  /* Alert type danger */
  --alert-feedback-default-bg: #f2bac0;
}
.ro-alert.ro-is-hidden {
  display: none;
}
.ro-alert.ro-active {
  opacity: 1;
  visibility: visible;
}
.ro-alert__icon {
  /* Alert icon indicator */
  width: 4rem;
  height: 4rem;
  background-color: var(--alert-feedback-default-bg);
  border-radius: 0.6rem;
}
.ro-alert__icon i {
  font-size: 2rem;
  color: var(--alert-feedback-icon-color);
}
.ro-alert__content {
  flex: auto;
}
.ro-alert__option {
  position: absolute;
  top: 2rem;
  right: 2rem;
}
.ro-alert__close {
  --button-circle-size: 2.5rem;
  --button-circle-icon-size: 1.5rem;
}
.ro-alert__close i {
  /* Alert close */
  opacity: 1;
  visibility: visible;
}
.ro-alert__progress {
  /* Progress bar */
  position: absolute;
  overflow: hidden;
  z-index: 5;
  top: 0;
  left: var(--spacing-sm);
  width: calc(100% - (var(--spacing-sm) * 2));
  height: 0.4rem;
}
.ro-alert__progress .time {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: var(--alert-border-color);
}
.ro-alert__progress .time.animate {
  animation: progress 1s ease-in-out forwards;
}

/* ====================== Avatars ====================== */
.ro-avatar::before {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ro-avatar {
  --avatar-default-theme: var(--accent);
  --avatar-size: var(--avatar-default);
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
}
.ro-avatar.ro-avatar-sm {
  /* Avatar size sm */
  --avatar-size: var(--avatar-sm);
}
.ro-avatar.ro-avatar-md {
  /* Avatar size md */
  --avatar-size: var(--avatar-md);
}
.ro-avatar.ro-avatar-lg {
  /* Avatar size lg */
  --avatar-size: var(--avatar-lg);
}
.ro-avatar.ro-avatar-theme-primary {
  /* Avatar type primary */
  --avatar-default-theme: var(--primary);
}
.ro-avatar.ro-avatar-theme-secondary {
  /* Avatar type secondary */
  --avatar-default-theme: var(--secondary);
}
.ro-avatar.ro-avatar-theme-success {
  /* Avatar type success */
  --avatar-default-theme: var(--success);
}
.ro-avatar.ro-avatar-theme-info {
  /* Avatar type info */
  --avatar-default-theme: var(--info);
}
.ro-avatar.ro-avatar-theme-warning {
  /* Avatar type warning */
  --avatar-default-theme: var(--warning);
}
.ro-avatar.ro-avatar-theme-danger {
  /* Avatar type danger */
  --avatar-default-theme: var(--danger);
}
.ro-avatar.ro-avatar-theme-gray {
  /* Avatar type gray */
  --avatar-default-theme: var(--gray);
}
.ro-avatar.ro-avatar-theme-dark {
  /* Avatar type dark */
  --avatar-default-theme: var(--dark);
}
.ro-avatar.ro-avatar-theme::before,
.ro-avatar[class*="ro-avatar-theme-"]::before {
  border: 0.3rem solid var(--avatar-default-theme);
}
.ro-avatar.ro-avatar-circle {
  border-radius: 50%;
}
.ro-avatar.ro-avatar-circle .ro-avatar__img {
  border-radius: 50%;
}
.ro-avatar.ro-avatar-circle::before {
  border-radius: 50%;
}
.ro-avatar.ro-avatar-square {
  border-radius: 0.6rem;
}
.ro-avatar.ro-avatar-square .ro-avatar__img {
  border-radius: 0.6rem;
}
.ro-avatar.ro-avatar-square::before {
  border-radius: 0.6rem;
}
.ro-avatar__img {
  /* Avatar image */
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
}

/* ====================== Badges ====================== */
.ro-badge {
  --badge-default-theme: var(--accent);
  --badge-default-padding: 1rem var(--spacing-sm);
  --badge-default-color: var(--global-body-text-color);
  display: inline-flex;
  color: var(--badge-default-color);
  padding: var(--badge-default-padding);
  background-color: var(--badge-default-theme);
  font-size: 0.9em;
  border-radius: 0.6rem;
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
}
.ro-badge.ro-badge-sm {
  /* Badge size sm */
  --badge-default-padding: var(--badge-sm);
}
.ro-badge.ro-badge-md {
  /* Badge size md */
  --badge-default-padding: var(--badge-md);
}
.ro-badge.ro-badge-primary {
  /* Badge type primary */
  --badge-default-theme: var(--primary);
  --badge-default-color: var(--gray-light-4);
}
.ro-badge.ro-badge-secondary {
  /* Badge type secondary */
  --badge-default-theme: var(--secondary);
  --badge-default-color: var(--gray-light-4);
}
.ro-badge.ro-badge-success {
  /* Badge type success */
  --badge-default-theme: var(--success);
  --badge-default-color: var(--gray-light-4);
}
.ro-badge.ro-badge-info {
  /* Badge type info */
  --badge-default-theme: var(--info);
  --badge-default-color: var(--gray-light-4);
}
.ro-badge.ro-badge-warning {
  /* Badge type warning */
  --badge-default-theme: var(--warning);
  --badge-default-color: var(--gray-light-4);
}
.ro-badge.ro-badge-danger {
  /* Badge type danger */
  --badge-default-theme: var(--danger);
  --badge-default-color: var(--gray-light-4);
}
.ro-badge.ro-badge-gray {
  /* Badge type gray */
  --badge-default-theme: var(--gray);
  --badge-default-color: var(--dark);
}
.ro-badge.ro-badge-dark {
  /* Badge type dark */
  --badge-default-theme: var(--dark);
  --badge-default-color: var(--gray-light-4);
}
.ro-badge.ro-badge-pill {
  border-radius: 25rem;
}
.ro-badge.ro-badge-circle {
  overflow: hidden;
  font-size: 1.4rem;
  padding: 0;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
}
.ro-badge.ro-badge-circle.ro-badge-xs {
  width: 1.5rem;
  height: 1.5rem;
}
.ro-badge.ro-badge-circle.ro-badge-sm {
  width: 2.5rem;
  height: 2.5rem;
}
.ro-badge.ro-badge-circle.ro-badge-md {
  width: 3.5rem;
  height: 3.5rem;
}

/* ====================== Breadcrumb ====================== */
.ro-breadcrumb {
  display: inline-flex;
  flex-wrap: wrap;
}
.ro-breadcrumb span {
  margin: 0 0.6rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.ro-breadcrumb__current {
  color: var(--gray-dark-1);
  pointer-events: none;
}

/* ====================== Buttons ====================== */
.ro-button {
  --button-default-theme: var(--accent);
  --button-default-text-color: var(--gray-light-4);
  --button-default-3d-color: var(--accent-dark-4);
  --button-link-default-color: var(--accent);
  --button-group-default-border-color: var(--accent-dark-4);
  --button-default-padding: var(--default-button-input-padding) 2.8rem;
  position: relative;
  display: inline-flex;
  text-transform: uppercase;
  background-color: var(--button-default-theme);
  color: var(--button-default-text-color);
  padding: var(--button-default-padding);
  border-radius: 0.6rem;
  font-size: var(--default-button-input-font-size);
  line-height: 1.5;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  border: 0.2rem solid transparent;
  transition: all 0.3s 0s ease-out;
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
}
.ro-button.ro-button-sm {
  /* Button size sm */
  --button-default-padding: var(--default-button-input-padding-sm) 1.2rem;
}
.ro-button.ro-button-md {
  /* Button size md */
  --button-default-padding: var(--default-button-input-padding-md) 4rem;
}
.ro-button.ro-button-lg {
  /* Button size lg */
  --button-default-padding: var(--default-button-input-padding-lg) 5.2rem;
}
.ro-button.ro-button-primary {
  /* Button type primary */
  --button-default-3d-color: var(--primary-dark-4);
  --button-default-theme: var(--primary);
  --button-link-default-color: var(--primary);
  --button-group-default-border-color: var(--primary-dark-4);
}
.ro-button.ro-button-secondary {
  /* Button type secondary */
  --button-default-3d-color: var(--secondary-dark-4);
  --button-default-theme: var(--secondary);
  --button-link-default-color: var(--secondary);
  --button-group-default-border-color: var(--secondary-dark-4);
}
.ro-button.ro-button-success {
  /* Button type success */
  --button-default-3d-color: var(--success-dark-4);
  --button-default-theme: var(--success);
  --button-link-default-color: var(--success);
  --button-group-default-border-color: var(--success-dark-4);
}
.ro-button.ro-button-info {
  /* Button type info */
  --button-default-3d-color: var(--info-dark-4);
  --button-default-theme: var(--info);
  --button-link-default-color: var(--info);
  --button-group-default-border-color: var(--info-dark-4);
}
.ro-button.ro-button-warning {
  /* Button type warning */
  --button-default-text-color: var(--dark);
  --button-default-3d-color: var(--warning-dark-4);
  --button-default-theme: var(--warning);
  --button-link-default-color: var(--warning);
  --button-group-default-border-color: var(--warning-dark-4);
}
.ro-button.ro-button-danger {
  /* Button type danger */
  --button-default-3d-color: var(--danger-dark-4);
  --button-default-theme: var(--danger);
  --button-link-default-color: var(--danger);
  --button-group-default-border-color: var(--danger-dark-4);
}
.ro-button.ro-button-gray {
  /* Button type gray */
  --button-default-text-color: var(--dark);
  --button-default-3d-color: var(--gray-dark-4);
  --button-default-theme: var(--gray);
  --button-link-default-color: var(--gray);
  --button-group-default-border-color: var(--gray-dark-4);
}
.ro-button.ro-button-dark {
  /* Button type dark */
  --button-default-3d-color: var(--dark-light-4);
  --button-default-theme: var(--dark);
  --button-link-default-color: var(--dark);
  --button-group-default-border-color: var(--dark-dark-4);
}
.ro-button i,
.ro-button .ro-icon {
  color: var(--button-default-text-color);
}
.ro-button.ro-button-link {
  /* Link text */
  padding: 0;
  color: var(--button-link-default-color);
  background-color: transparent;
  border: 0;
  border-bottom: 0.2rem solid transparent;
  border-radius: 0;
  box-shadow: none;
}
.ro-button.ro-button-link i,
.ro-button.ro-button-link .ro-icon {
  color: var(--button-link-default-color);
}
.ro-button.ro-button-link::before {
  display: none;
}
.ro-button.ro-button-link:hover,
.ro-button.ro-button-link:focus {
  color: var(--button-link-default-color);
  border-bottom-color: var(--button-link-default-color);
}
.ro-button:hover,
.ro-button:focus,
.ro-button:active {
  /* Hovering and focusing */
  color: var(--button-default-text-color);
  border-color: transparent;
  transform: translateY(-0.4rem);
}
.ro-button.ro-button-pill {
  border-radius: 25rem;
}
.ro-button.ro-button-transparent {
  background-color: transparent;
  box-shadow: none;
  color: var(--button-default-theme);
  border: 0.2rem solid var(--button-default-theme);
}
.ro-button.ro-button-transparent i,
.ro-button.ro-button-transparent .ro-icon {
  color: var(--button-default-theme);
}
.ro-button.ro-button-transparent:hover,
.ro-button.ro-button-transparent:focus,
.ro-button.ro-button-transparent:active {
  background-color: var(--button-default-theme);
  color: var(--button-default-text-color);
}
.ro-button.ro-button-transparent:hover i,
.ro-button.ro-button-transparent:hover .ro-icon,
.ro-button.ro-button-transparent:focus i,
.ro-button.ro-button-transparent:focus .ro-icon,
.ro-button.ro-button-transparent:active i,
.ro-button.ro-button-transparent:active .ro-icon {
  color: var(--button-default-text-color);
}
.ro-button.ro-button-3d {
  box-shadow: 0 0.35rem 0 var(--button-default-3d-color);
}
.ro-button.ro-button-3d.ro-button-transparent {
  /* 3D option not available for transparent buttons */
  box-shadow: none;
}
.ro-button-group {
  /* Button group */
  display: inline-flex;
  position: relative;
}
.ro-button-group .ro-button {
  border-radius: 0;
  border: 0;
  border-right: 0.2rem solid var(--button-group-default-border-color);
}
.ro-button-group .ro-button:not(.ro-button-3d) {
  box-shadow: none;
}
.ro-button-group .ro-button:last-of-type {
  border-right: 0;
}
.ro-button-group .ro-button:first-of-type {
  border-radius: 0.6rem 0 0 0.6rem;
}
.ro-button-group .ro-button:last-of-type {
  border-radius: 0 0.6rem 0.6rem 0;
}
.ro-button-group .ro-button.ro-button-pill:first-of-type {
  border-radius: 25rem 0 0 25rem;
}
.ro-button-group .ro-button.ro-button-pill:last-of-type {
  border-radius: 0 25rem 25rem 0;
}
.ro-button-group .ro-button.ro-button-transparent {
  border: 0.2rem solid var(--button-default-theme);
  border-right: 0;
}
.ro-button-group .ro-button.ro-button-transparent:not(:first-of-type) {
  border-left-color: var(--button-group-default-border-color);
}
.ro-button-group .ro-button.ro-button-transparent:last-of-type {
  border-right: 0.2rem solid var(--button-default-theme);
}
.ro-button-group .ro-button.ro-button-transparent:focus:last-of-type,
.ro-button-group .ro-button.ro-button-transparent:active:last-of-type,
.ro-button-group .ro-button.ro-button-transparent.ro-active:last-of-type {
  border-color: var(--button-group-default-border-color);
}
.ro-button-group .ro-button:hover {
  transform: none;
}
.ro-button-group .ro-button:focus,
.ro-button-group .ro-button:active,
.ro-button-group .ro-button.ro-active {
  transform: none;
  background-color: var(--button-group-default-border-color);
  color: var(--button-default-text-color);
  border-color: var(--button-group-default-border-color);
}
.ro-button-group .ro-button:focus i,
.ro-button-group .ro-button:focus .ro-icon,
.ro-button-group .ro-button:active i,
.ro-button-group .ro-button:active .ro-icon,
.ro-button-group .ro-button.ro-active i,
.ro-button-group .ro-button.ro-active .ro-icon {
  color: var(--button-default-text-color);
}
.ro-button-group .ro-button.ro-button-warning:focus,
.ro-button-group .ro-button.ro-button-warning:active,
.ro-button-group .ro-button.ro-button-warning.ro-active,
.ro-button-group .ro-button.ro-button-gray:focus,
.ro-button-group .ro-button.ro-button-gray:active,
.ro-button-group .ro-button.ro-button-gray.ro-active {
  color: var(--global-background-color);
}
.ro-button-group .ro-button.ro-button-warning:focus i,
.ro-button-group .ro-button.ro-button-warning:focus .ro-icon,
.ro-button-group .ro-button.ro-button-warning:active i,
.ro-button-group .ro-button.ro-button-warning:active .ro-icon,
.ro-button-group .ro-button.ro-button-warning.ro-active i,
.ro-button-group .ro-button.ro-button-warning.ro-active .ro-icon,
.ro-button-group .ro-button.ro-button-gray:focus i,
.ro-button-group .ro-button.ro-button-gray:focus .ro-icon,
.ro-button-group .ro-button.ro-button-gray:active i,
.ro-button-group .ro-button.ro-button-gray:active .ro-icon,
.ro-button-group .ro-button.ro-button-gray.ro-active i,
.ro-button-group .ro-button.ro-button-gray.ro-active .ro-icon {
  color: var(--global-background-color);
}
.ro-button-group .ro-button.ro-button-disabled {
  border-top-color: var(--gray-light-1);
  border-bottom-color: var(--gray-light-1);
}
.ro-button-group.ro-button-group-vertical {
  flex-direction: column;
}
.ro-button-group.ro-button-group-vertical .ro-button {
  border-radius: 0;
  border: 0;
  border-right: 0;
  border-bottom: 0.2rem solid var(--button-group-default-border-color);
}
.ro-button-group.ro-button-group-vertical .ro-button:not(.ro-button-3d) {
  box-shadow: none;
}
.ro-button-group.ro-button-group-vertical .ro-button:last-of-type {
  border-bottom: 0;
}
.ro-button-group.ro-button-group-vertical .ro-button:first-of-type {
  border-radius: 0.6rem 0.6rem 0 0;
}
.ro-button-group.ro-button-group-vertical .ro-button:last-of-type {
  border-radius: 0 0 0.6rem 0.6rem;
}
.ro-button-group.ro-button-group-vertical .ro-button.ro-button-transparent {
  border: 0.2rem solid var(--button-default-theme);
  border-bottom-color: var(--button-group-default-border-color);
}
.ro-button-group.ro-button-group-vertical
  .ro-button.ro-button-transparent:last-of-type {
  border-bottom-color: var(--button-default-theme);
}
.ro-button-group.ro-button-group-vertical
  .ro-button.ro-button-transparent:last-of-type:focus,
.ro-button-group.ro-button-group-vertical
  .ro-button.ro-button-transparent:last-of-type:active,
.ro-button-group.ro-button-group-vertical
  .ro-button.ro-button-transparent:last-of-type.ro-active {
  border-bottom-color: var(--button-group-default-border-color);
}
.ro-button-group.ro-button-group-vertical
  .ro-button.ro-button-transparent:not(:first-of-type) {
  border-top: 0;
}
.ro-button-group.ro-button-group-vertical .ro-button:focus,
.ro-button-group.ro-button-group-vertical .ro-button:active,
.ro-button-group.ro-button-group-vertical .ro-button.ro-active {
  border-color: var(--button-group-default-border-color);
}
.ro-button-group.ro-button-group-vertical .ro-button.ro-button-disabled {
  border-color: var(--gray-light-1);
}
.ro-button.ro-button-disabled {
  /* Disabled button */
  pointer-events: none;
  color: var(--gray-light-3);
  background-color: var(--gray-light-1);
  border-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.ro-button.ro-button-disabled i,
.ro-button.ro-button-disabled .ro-icon {
  color: var(--gray-light-3);
}
.ro-button.ro-button-disabled.ro-button-3d {
  box-shadow: 0 0.35rem 0 var(--gray-dark-1);
}

/* Circle buttons */
.ro-button-circle {
  border-radius: 50%;
  position: relative;
  width: var(--button-circle-size);
  height: var(--button-circle-size);
  background-color: var(--button-circle-bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ro-button-circle i {
  color: var(--button-circle-icon-color);
  font-size: var(--button-circle-icon-size);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s 0s ease-out;
}
.ro-button-circle::before {
  border: 0.2rem solid var(--button-circle-bg-color);
  transition: transform 0.3s 0s ease-out;
}
.ro-button-circle:hover::before,
.ro-button-circle:focus::before {
  transform: translate(-50%, -50%) scale(1);
}

/* ====================== Cards ====================== */
.ro-card {
  --card-default-theme: var(--accent-light-4);
  background-color: var(--global-background-color);
  border-radius: 2rem;
  position: relative;
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
}
.ro-card.ro-card-primary {
  /* Card type primary */
  --card-default-theme: var(--primary-light-4);
}
.ro-card.ro-card-secondary {
  /* Card type secondary */
  --card-default-theme: var(--secondary-light-4);
}
.ro-card.ro-card-success {
  /* Card type success */
  --card-default-theme: var(--success-light-4);
}
.ro-card.ro-card-info {
  /* Card type info */
  --card-default-theme: var(--info-light-4);
}
.ro-card.ro-card-warning {
  /* Card type warning */
  --card-default-theme: var(--warning-light-4);
}
.ro-card.ro-card-danger {
  /* Card type danger */
  --card-default-theme: var(--danger-light-4);
}
.ro-card.ro-card-gray {
  /* Card type gray */
  --card-default-theme: var(--gray-light-1);
}
.ro-card.ro-card-dark {
  /* Card type dark */
  --card-default-theme: var(--dark-light-4);
}
.ro-card::before {
  content: "";
  position: absolute;
  border-radius: 2rem;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  transform: translateY(1rem);
  background-color: var(--card-default-theme);
}
.ro-card.ro-card-plain {
  box-shadow: none;
}
.ro-card.ro-card-plain::before {
  display: none;
}
.ro-card__header {
  position: relative;
  padding: 2rem;
  border-radius: 2rem;
}
.ro-card__header--image {
  /* If card header has image, we will set a height and max height */
  overflow: hidden;
  height: 34rem;
  max-height: 34rem;
}
.ro-card__image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.ro-card__body {
  padding: 2rem;
}
.ro-card__footer {
  padding: 0 2rem 2rem;
}

/* ====================== Carousel ====================== */
.ro-carousel {
  --carousel-height: auto;
  --carousel-dot-size: var(--carousel-dot-default);
  position: relative;
  width: 100%;
  height: var(--carousel-height);
  overflow: hidden;
  background-color: var(--global-background-color);
  border-radius: 2rem;
  transform-style: preserve-3d;
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
}
@media screen and (min-width: 34.5625em) {
  .ro-carousel {
    --button-circle-size: var(--carousel-comparison-button-sm);
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-carousel {
    --button-circle-size: var(--carousel-comparison-button-md);
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-carousel {
    --button-circle-size: var(--carousel-comparison-button-lg);
  }
}
@media screen and (min-width: 90em) {
  .ro-carousel {
    --button-circle-size: var(--carousel-comparison-button-lg);
  }
}
@media screen and (min-width: 34.5625em) {
  .ro-carousel {
    --carousel-dot-size: var(--carousel-dot-sm);
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-carousel {
    --carousel-dot-size: var(--carousel-dot-md);
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-carousel {
    --carousel-dot-size: var(--carousel-dot-lg);
  }
}
@media screen and (min-width: 90em) {
  .ro-carousel {
    --carousel-dot-size: var(--carousel-dot-lg);
  }
}
.ro-carousel.ro-carousel-primary {
  /* Carousel type primary */
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--primary-light-4);
}
.ro-carousel.ro-carousel-secondary {
  /* Carousel type secondary */
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--secondary-light-4);
}
.ro-carousel.ro-carousel-success {
  /* Carousel type success */
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--success-light-4);
}
.ro-carousel.ro-carousel-info {
  /* Carousel type info */
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--info-light-4);
}
.ro-carousel.ro-carousel-warning {
  /* Carousel type warning */
  --button-circle-icon-color: var(--dark);
  --button-circle-bg-color: var(--warning-light-4);
}
.ro-carousel.ro-carousel-danger {
  /* Carousel type danger */
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--danger-light-4);
}
.ro-carousel.ro-carousel-gray {
  /* Carousel type gray */
  --button-circle-icon-color: var(--dark);
  --button-circle-bg-color: var(--gray-light-1);
}
.ro-carousel.ro-carousel-dark {
  /* Carousel type dark */
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--dark-light-4);
}
.ro-carousel:focus {
  border: 0.1rem dotted var(--global-body-text-color);
}
.ro-carousel.ro-adaptive-height .ro-carousel__track {
  max-height: 0;
}
.ro-carousel__track {
  /* Track */
  position: relative;
  display: flex;
  height: 100%;
  transition: all 0.3s 0s ease-out;
}
.ro-carousel__slide {
  /* Individual slide */
  padding: 0;
  flex-shrink: 0;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ro-carousel__image {
  /* Carousel image */
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
}
.ro-carousel__nav .ro-carousel__arrow {
  /* Arrows navigation */
  position: absolute;
  z-index: 15;
  top: 50%;
  transform: translateY(-50%);
}
.ro-carousel__nav .ro-carousel__arrow[data-arrow-direction="right"] {
  right: var(--spacing-sm);
}
.ro-carousel__nav .ro-carousel__arrow[data-arrow-direction="left"] {
  left: var(--spacing-sm);
}
.ro-carousel__nav--dots {
  /* Dots navigation */
  position: absolute;
  z-index: 15;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: var(--spacing-sm);
  left: 50%;
  transform: translateX(-50%);
}
.ro-carousel [data-arrow-direction] {
  transition: all 0.3s 0s ease-out;
  color: var(--button-circle-icon-color);
  font-size: 2.15rem;
}
.ro-carousel [data-arrow-direction].ro-disabled {
  background-color: var(--gray-light-1);
}
.ro-carousel [data-arrow-direction].ro-disabled::before {
  border-color: var(--gray-light-1);
}
.ro-carousel [data-arrow-direction].ro-disabled i,
.ro-carousel [data-arrow-direction].ro-disabled .ro-icon {
  color: var(--gray-light-3);
}
.ro-carousel__dot {
  /* Individual arrow */
  width: var(--carousel-dot-size);
  height: var(--carousel-dot-size);
  margin-right: 1.2rem;
}
.ro-carousel__dot:last-of-type {
  margin-right: 0;
}
.ro-carousel__dot::before {
  width: 160%;
  height: 160%;
}
.ro-carousel__dot.ro-active::before {
  transform: translate(-50%, -50%) scale(1);
}
.ro-carousel.ro-carousel-crossfade .ro-carousel__track {
  /* Track */
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}
.ro-carousel.ro-carousel-crossfade .ro-carousel__slide {
  /* Individual slide */
  top: 0;
  left: 0;
  height: 100%;
  z-index: 10;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s 0s ease-out;
}
.ro-carousel.ro-carousel-crossfade .ro-carousel__slide.ro-active {
  /* Once active */
  opacity: 1;
  visibility: visible;
  top: 0;
  z-index: 12;
}
.ro-carousel__track.touchdown {
  cursor: grab;
}
.ro-carousel.ro-carousel-draggable .ro-carousel__slide {
  -webkit-user-select: none;
  user-select: none;
}
.ro-carousel.ro-carousel-draggable .ro-carousel__track {
  touch-action: pan-y;
}

/* ====================== Dropdown ====================== */
.ro-dropdown {
  --dropdown-default-theme: var(--accent-light-4);
  --dropdown-max-width: var(--dropdown-max-width-default);
  position: absolute;
  top: 120%;
  left: 0;
  z-index: 600;
  border-radius: 0.6rem;
  min-width: var(--dropdown-max-width);
  max-width: var(--dropdown-max-width);
  border-top: 0.4rem solid var(--dropdown-default-theme);
  overflow: hidden;
  background-color: var(--global-background-color);
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s 0s ease-out;
  scrollbar-width: thin;
  scrollbar-color: var(--dark-light-3) transparent;
}
@media screen and (min-width: 34.5625em) {
  .ro-dropdown {
    --dropdown-max-width: var(--dropdown-max-width-sm);
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-dropdown {
    --dropdown-max-width: var(--dropdown-max-width-md);
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-dropdown {
    --dropdown-max-width: var(--dropdown-max-width-lg);
  }
}
@media screen and (min-width: 90em) {
  .ro-dropdown {
    --dropdown-max-width: var(--dropdown-max-width-lg);
  }
}
.ro-dropdown.ro-dropdown-primary {
  /* Dropdown type primary */
  --dropdown-default-theme: var(--primary-light-4);
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--primary-light-4);
}
.ro-dropdown.ro-dropdown-secondary {
  /* Dropdown type secondary */
  --dropdown-default-theme: var(--secondary-light-4);
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--secondary-light-4);
}
.ro-dropdown.ro-dropdown-success {
  /* Dropdown type success */
  --dropdown-default-theme: var(--success-light-4);
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--success-light-4);
}
.ro-dropdown.ro-dropdown-info {
  /* Dropdown type info */
  --dropdown-default-theme: var(--info-light-4);
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--info-light-4);
}
.ro-dropdown.ro-dropdown-warning {
  /* Dropdown type warning */
  --dropdown-default-theme: var(--warning-light-4);
  --button-circle-icon-color: var(--dark);
  --button-circle-bg-color: var(--warning-light-1);
}
.ro-dropdown.ro-dropdown-danger {
  /* Dropdown type danger */
  --dropdown-default-theme: var(--danger-light-4);
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--danger-light-4);
}
.ro-dropdown.ro-dropdown-gray {
  /* Dropdown type gray */
  --dropdown-default-theme: var(--gray-light-1);
  --button-circle-icon-color: var(--dark);
  --button-circle-bg-color: var(--gray-light-1);
}
.ro-dropdown.ro-dropdown-dark {
  /* Dropdown type dark */
  --dropdown-default-theme: var(--dark-light-4);
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--dark-light-4);
}
.ro-dropdown::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.2rem transparent;
  background: transparent;
  margin: 1.1rem;
}
.ro-dropdown::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
  background: transparent;
}
.ro-dropdown::-webkit-scrollbar-thumb {
  border-radius: 6rem;
  width: 0.5rem;
  background-color: var(--dark-light-3);
}
.ro-dropdown.ro-active {
  /* Showing */
  opacity: 1;
  height: auto;
  visibility: visible;
}
.ro-dropdown__track {
  /* Track to slide other sub dropdown menu */
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  transform: translateX(0);
  transition: transform 0.3s 0s ease-out;
}
.ro-dropdown__nav {
  /* Holds dropdown items */
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  max-height: 45rem;
  overflow: hidden;
  overflow-y: auto;
  border-radius: 0.6rem;
  visibility: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--dark-light-3) transparent;
}
.ro-dropdown__nav::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.2rem transparent;
  background: transparent;
  margin: 1.1rem;
}
.ro-dropdown__nav::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
  background: transparent;
}
.ro-dropdown__nav::-webkit-scrollbar-thumb {
  border-radius: 6rem;
  width: 0.5rem;
  background-color: var(--dark-light-3);
}
.ro-dropdown__nav.ro-active {
  visibility: visible;
}
.ro-dropdown__list {
  /* Dropdown list */
  padding: 0;
}
.ro-dropdown__list:not(:last-of-type) {
  margin-bottom: 0.06rem;
}
.ro-dropdown__list .ro-dropdown__link {
  /* Anchor element */
  border: 0;
  padding: 1.2rem;
  width: 100%;
  color: var(--global-body-text-color);
  font-size: 0.9em;
  border-left: 0.3rem solid transparent;
  border-radius: 0.6rem;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.ro-dropdown-sub-link {
  /* Links that point to another dropdown menu (sub dropdown menu) */
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.ro-dropdown-sub-link i,
.ro-dropdown-sub-link .ro-icon {
  color: var(--dropdown-default-theme);
}
.ro-dropdown__close {
  position: sticky;
  top: 0;
}
.ro-dropdown__list:hover > a,
.ro-dropdown__list > a:focus {
  /* Hovering and focusing on the anchor element <a href>...</a> */
  background-color: var(--gray-light-3);
}
.ro-dropdown__list.ro-active > a {
  /* Active on the anchor element <a href>...</a> */
  background-color: var(--gray-light-2);
  border-color: var(--dropdown-default-theme);
}
.ro-dropdown.ro-dropdown-absolute {
  /* Remains absolute and fixed width on every screen size */
  position: absolute;
  min-width: var(--dropdown-max-width);
  max-width: var(--dropdown-max-width);
  top: 130%;
}
.ro-dropdown.ro-dropdown-top {
  /* Direction for main dropdown menu - Top */
  top: auto;
  left: 0;
  bottom: 130%;
}
.ro-dropdown.ro-dropdown-right {
  /* Direction for main dropdown menu - Right */
  top: 0;
  left: 110%;
}
.ro-dropdown.ro-dropdown-left {
  /* Direction for main dropdown menu - Left */
  top: 0;
  left: auto;
  right: 110%;
}
.ro-dropdown.ro-dropdown-left-top {
  /* Direction for main dropdown menu - Left and top */
  top: auto;
  left: auto;
  right: 110%;
  bottom: 0;
}
.ro-dropdown.ro-dropdown-right-top {
  /* Direction for main dropdown menu - Right */
  top: auto;
  left: 110%;
  bottom: 0;
}
.ro-dropdown.ro-dropdown-abs-left {
  /* Absolute left positioning */
  left: 0;
  right: auto;
}
.ro-dropdown.ro-dropdown-abs-center {
  /* Absolute center positioning */
  left: 50%;
  transform: translateX(-50%);
}
.ro-dropdown.ro-dropdown-abs-right {
  /* Absolute right positioning */
  left: auto;
  right: 0;
}
@media screen and (min-width: 34.5625em) {
  .ro-dropdown.ro-dropdown-abs-left-sm {
    /* Absolute left positioning */
    left: 0;
    right: auto;
    transform: translateX(0);
  }
}
@media screen and (min-width: 34.5625em) {
  .ro-dropdown.ro-dropdown-abs-center-sm {
    /* Absolute center positioning */
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 34.5625em) {
  .ro-dropdown.ro-dropdown-abs-right-sm {
    /* Absolute right positioning */
    left: auto;
    right: 0;
    transform: translateX(0);
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-dropdown.ro-dropdown-abs-left-md {
    /* Absolute left positioning */
    left: 0;
    right: auto;
    transform: translateX(0);
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-dropdown.ro-dropdown-abs-center-md {
    /* Absolute center positioning */
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-dropdown.ro-dropdown-abs-right-md {
    /* Absolute right positioning */
    left: auto;
    right: 0;
    transform: translateX(0);
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-dropdown.ro-dropdown-abs-left-lg {
    /* Absolute left positioning */
    left: 0;
    right: auto;
    transform: translateX(0);
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-dropdown.ro-dropdown-abs-center-lg {
    /* Absolute center positioning */
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-dropdown.ro-dropdown-abs-right-lg {
    /* Absolute right positioning */
    left: auto;
    right: 0;
    transform: translateX(0);
  }
}
@media screen and (min-width: 90em) {
  .ro-dropdown.ro-dropdown-abs-left-xl {
    /* Absolute left positioning */
    left: 0;
    right: auto;
    transform: translateX(0);
  }
}
@media screen and (min-width: 90em) {
  .ro-dropdown.ro-dropdown-abs-center-xl {
    /* Absolute center positioning */
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 90em) {
  .ro-dropdown.ro-dropdown-abs-right-xl {
    /* Absolute right positioning */
    left: auto;
    right: 0;
    transform: translateX(0);
  }
}

/* ====================== Modal ====================== */
/* Modal Backdrop */
.ro-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  padding: 10rem 0;
  background-color: rgba(37, 36, 34, 0.8);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s 0s ease-out;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-light-4) transparent;
}
.ro-modal-backdrop::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.2rem transparent;
  background: transparent;
  margin: 1.1rem;
}
.ro-modal-backdrop::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
  background: transparent;
}
.ro-modal-backdrop::-webkit-scrollbar-thumb {
  border-radius: 6rem;
  width: 0.5rem;
  background-color: var(--gray-light-4);
}
.ro-modal-backdrop.ro-modal-backdrop-none {
  background-color: transparent;
}
.ro-modal-backdrop.ro-active {
  /* Showing */
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.ro-modal {
  --modal-width: var(--modal-width-default);
  width: var(--modal-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background-color: var(--global-background-color);
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
}
@media screen and (min-width: 34.5625em) {
  .ro-modal {
    --modal-width: var(--modal-width-sm);
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-modal {
    --modal-width: var(--modal-width-md);
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-modal {
    --modal-width: var(--modal-width-lg);
  }
}
@media screen and (min-width: 90em) {
  .ro-modal {
    --modal-width: var(--modal-width-lg);
  }
}
.ro-modal.ro-modal-primary {
  /* Modal type primary */
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--primary-light-4);
}
.ro-modal.ro-modal-secondary {
  /* Modal type secondary */
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--secondary-light-4);
}
.ro-modal.ro-modal-success {
  /* Modal type success */
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--success-light-4);
}
.ro-modal.ro-modal-info {
  /* Modal type info */
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--info-light-4);
}
.ro-modal.ro-modal-warning {
  /* Modal type warning */
  --button-circle-icon-color: var(--dark);
  --button-circle-bg-color: var(--warning-light-4);
}
.ro-modal.ro-modal-danger {
  /* Modal type danger */
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--danger-light-4);
}
.ro-modal.ro-modal-gray {
  /* Modal type gray */
  --button-circle-icon-color: var(--dark);
  --button-circle-bg-color: var(--gray-light-1);
}
.ro-modal.ro-modal-dark {
  /* Modal type dark */
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--dark-light-4);
}
.ro-modal__header {
  /* Modal header */
  padding: var(--spacing-sm);
  background-color: var(--gray-light-3);
  display: flex;
  justify-content: space-between;
}
.ro-modal__title {
  /* Modal title */
  -webkit-hyphens: auto;
  hyphens: auto;
  margin-right: 2rem;
}
.ro-modal__body {
  /* Modal body */
  padding: var(--spacing-sm);
}
.ro-modal__body.ro-modal__body--max-height {
  /* Gives max height of 40rem to the body */
  max-height: 40rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--dark-light-3) transparent;
}
.ro-modal__body.ro-modal__body--max-height::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.2rem transparent;
  background: transparent;
  margin: 1.1rem;
}
.ro-modal__body.ro-modal__body--max-height::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
  background: transparent;
}
.ro-modal__body.ro-modal__body--max-height::-webkit-scrollbar-thumb {
  border-radius: 6rem;
  width: 0.5rem;
  background-color: var(--dark-light-3);
}
.ro-modal__body.ro-modal__body--max-height .ro-modal__footer {
  /* Gives little bit of space on the top for the footer */
  padding-top: 1rem;
}
.ro-modal__footer {
  padding: var(--spacing-sm);
}

/* ====================== HEADER NAVBAR ====================== */
.ro-header__navitems {
  /* Header navitems for both regular header and offcanvas */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 800;
  width: var(--navbar-sidebar-width-default);
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--global-background-color);
  border-radius: 0 0.6rem 0.6rem 0;
  padding: var(--spacing-sm) 0;
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
  scrollbar-width: thin;
  scrollbar-color: var(--dark-light-3) transparent;
  transition: all 0.3s 0s ease-out;
}
.ro-header__navitems::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.2rem transparent;
  background: transparent;
  margin: 1.1rem;
}
.ro-header__navitems::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
  background: transparent;
}
.ro-header__navitems::-webkit-scrollbar-thumb {
  border-radius: 6rem;
  width: 0.5rem;
  background-color: var(--dark-light-3);
}

.ro-header__list .ro-header__link {
  /* Header list anchor element <a href>...</a> for both regular header and offcanvas */
  padding: 1.2rem 1.5rem;
  font-size: 1em;
  border: 0;
  width: 100%;
  border-radius: 0.6rem 0 0 0.6rem;
  border-left: 0.3rem solid transparent;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.ro-header .has-dropdown .ro-dropdown:not(.ro-dropdown-absolute) {
  /* Actual dropdown menu for both regular header and offcanvas */
  position: relative;
  min-width: var(--navbar-width-default);
  max-width: var(--navbar-width-default);
  border-color: var(--navbar-default-menu-active-border);
  top: 140%;
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.ro-header {
  --navbar-default-theme: var(--accent);
  --navbar-default-menu-active-border: var(--accent-light-4);
  --navbar-color-link: var(--global-body-text-color);
  --navbar-active-color-link: var(--accent-light-4);
  --navbar-bg-link-color: transparent;
  --navbar-width-default: var(--menu-sidebar-width-default);
  --navbar-sidebar-width-default: var(--menu-sidebar-width-default);
  --navbar-default-height: var(--navbar-height-default);
  --mobile-toggler-size-default: var(--navbar-mobile-toggler-size-default);
  --navbar-sidebar-max-height-default: 100vh;
  position: relative;
  width: 100%;
  height: auto;
  background-color: var(--global-background-color);
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
}
@media screen and (min-width: 34.5625em) {
  .ro-header {
    --navbar-width-default: var(--menu-sidebar-width-sm);
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-header {
    --navbar-width-default: var(--navbar-width-md);
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-header {
    --navbar-width-default: var(--navbar-width-lg);
  }
}
@media screen and (min-width: 90em) {
  .ro-header {
    --navbar-width-default: var(--navbar-width-lg);
  }
}
@media screen and (min-width: 34.5625em) {
  .ro-header {
    --navbar-sidebar-width-default: var(--menu-sidebar-width-sm);
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-header {
    --navbar-sidebar-width-default: var(--menu-sidebar-width-md);
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-header {
    --navbar-sidebar-width-default: var(--menu-sidebar-width-lg);
  }
}
@media screen and (min-width: 90em) {
  .ro-header {
    --navbar-sidebar-width-default: var(--menu-sidebar-width-lg);
  }
}
@media screen and (min-width: 34.5625em) {
  .ro-header {
    --navbar-default-height: var(--navbar-height-sm);
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-header {
    --navbar-default-height: calc(var(--navbar-height-md) + 0.4rem);
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-header {
    --navbar-default-height: var(--navbar-height-lg);
  }
}
@media screen and (min-width: 90em) {
  .ro-header {
    --navbar-default-height: var(--navbar-height-lg);
  }
}
@media screen and (min-width: 34.5625em) {
  .ro-header {
    --mobile-toggler-size-default: calc(
      var(--navbar-mobile-toggler-size-sm) + 0.5rem
    );
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-header {
    --mobile-toggler-size-default: calc(
      var(--navbar-mobile-toggler-size-md) + 0.5rem
    );
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-header {
    --mobile-toggler-size-default: calc(
      var(--navbar-mobile-toggler-size-lg) + 0.5rem
    );
  }
}
@media screen and (min-width: 90em) {
  .ro-header {
    --mobile-toggler-size-default: calc(
      var(--navbar-mobile-toggler-size-lg) + 0.5rem
    );
  }
}
.ro-header.ro-header-primary {
  /* Navbar type primary */
  --navbar-default-menu-active-border: var(--primary-light-4);
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--primary-light-4);
  --navbar-default-theme: var(--primary);
}
.ro-header.ro-header-secondary {
  /* Navbar type secondary */
  --navbar-default-menu-active-border: var(--secondary-light-4);
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--secondary-light-4);
  --navbar-default-theme: var(--secondary);
}
.ro-header.ro-header-success {
  /* Navbar type success */
  --navbar-default-menu-active-border: var(--success-light-4);
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--success-light-4);
  --navbar-default-theme: var(--success);
}
.ro-header.ro-header-info {
  /* Navbar type info */
  --navbar-default-menu-active-border: var(--info-light-4);
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--info-light-4);
  --navbar-default-theme: var(--info);
}
.ro-header.ro-header-warning {
  /* Navbar type warning */
  --navbar-default-menu-active-border: var(--warning-light-4);
  --button-circle-icon-color: var(--dark);
  --button-circle-bg-color: var(--warning-light-1);
  --navbar-default-theme: var(--warning);
}
.ro-header.ro-header-danger {
  /* Navbar type danger */
  --navbar-default-menu-active-border: var(--danger-light-4);
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--danger-light-4);
  --navbar-default-theme: var(--danger);
}
.ro-header.ro-header-gray {
  /* Navbar type gray */
  --navbar-default-menu-active-border: var(--gray-light-1);
  --button-circle-icon-color: var(--dark);
  --button-circle-bg-color: var(--gray-light-1);
  --navbar-default-theme: var(--gray);
}
.ro-header.ro-header-dark {
  /* Navbar type dark */
  --navbar-default-menu-active-border: var(--dark-light-4);
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--dark-light-4);
  --navbar-default-theme: var(--dark);
}
.ro-header__nav {
  height: var(--navbar-default-height);
}
.ro-header__brand {
  /* Brand containing the logo */
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.ro-header__brand a {
  width: 100%;
  height: 100%;
}
.ro-header__brand .ro-header__logo {
  /* Logo */
  width: 6rem;
}
.ro-header__navitems {
  /* Hiding navitems */
  transform: translateX(-100%);
  pointer-events: none;
  opacity: 0;
}
.ro-header__navitems.ro-active {
  /* Showing navitems */
  transform: translateX(0);
  pointer-events: all;
  opacity: 1;
}
.ro-header__list {
  padding: 0;
}
.ro-header__list:not(:last-of-type) {
  margin-bottom: 0.06rem;
}
.ro-header__list .ro-header__link i,
.ro-header__list .ro-header__link .ro-icon {
  color: var(--navbar-default-theme);
  transition: all 0.3s 0s ease-out;
}
.ro-header__list:hover > .ro-header__link,
.ro-header__list > .ro-header__link:focus,
.ro-header__list.ro-active > .ro-header__link {
  /* Hovering, focusing, and active for the <a href>...</a> inside the ro-header__list */
  --navbar-bg-link-color: var(--gray-light-3);
  background-color: var(--navbar-bg-link-color);
  border-color: var(--navbar-default-menu-active-border);
}
.ro-header__list > .ro-header__link:focus,
.ro-header__list.ro-active > .ro-header__link {
  /* Focusing and being active for the <a href>...</a> inside the ro-header__list */
  font-weight: var(--font-weight-medium);
}
.ro-header__extra {
  flex: 1;
}
.ro-header__mobile {
  order: 1;
}
.ro-header__mobile--toggler {
  /* Mobile menu icon */
  width: var(--mobile-toggler-size-default);
  height: var(--mobile-toggler-size-default);
  background-color: transparent;
  transition: transform 0.3s 0s ease-out;
}
.ro-header__mobile--toggler i {
  font-size: 2.3rem;
  color: var(--navbar-default-theme);
}
.ro-header__mobile--toggler::before {
  display: none;
}
.ro-header__mobile--toggler:hover,
.ro-header__mobile--toggler:focus {
  /* Hovering, focusing, and being active */
  transform: rotate(90deg);
}
.ro-header .has-dropdown {
  position: relative;
}
.ro-header .has-dropdown.ro-header__list {
  margin-bottom: 0.04rem;
}
.ro-header
  .has-dropdown.ro-header__list.ro-dropdown-is-active
  .ro-header__link {
  border-radius: 0.6rem 0 0 0;
}
.ro-header
  .has-dropdown.ro-header__list.ro-dropdown-is-active
  .ro-header__link
  i,
.ro-header
  .has-dropdown.ro-header__list.ro-dropdown-is-active
  .ro-header__link
  .ro-icon {
  transform: rotate(90deg);
}
.ro-header .has-dropdown .ro-dropdown {
  --dropdown-default-theme: var(--navbar-default-theme);
  border-top-color: var(--navbar-default-menu-active-border);
}
.ro-header .has-dropdown .ro-dropdown:not(.ro-dropdown-absolute) {
  --navbar-bg-link-color: var(--gray-light-3);
  box-shadow: none;
  background-color: var(--navbar-bg-link-color);
  border-top: 0.1rem solid #ccd4db;
  border-bottom: 0.1rem solid #ccd4db;
  border-left: 0.3rem solid var(--navbar-default-menu-active-border);
}
.ro-header
  .has-dropdown
  .ro-dropdown
  .ro-dropdown__list:hover
  > .ro-dropdown__link,
.ro-header
  .has-dropdown
  .ro-dropdown
  .ro-dropdown__list
  > .ro-dropdown__link:focus,
.ro-header
  .has-dropdown
  .ro-dropdown
  .ro-dropdown__list.ro-active
  > .ro-dropdown__link {
  /* Hovering, focusing, and active for the <a href>...</a> inside the .ro-dropdown__list */
  background-color: var(--gray-light-2);
  border-color: var(--navbar-default-menu-active-border);
}
.ro-header .ro-megamenu__menu {
  /* Actual megamenu */
  border-top-color: var(--navbar-default-menu-active-border);
}
.ro-header .ro-megamenu__menu .ro-megamenu__list:hover > .ro-megamenu__link,
.ro-header .ro-megamenu__menu .ro-megamenu__list > .ro-megamenu__link:focus,
.ro-header
  .ro-megamenu__menu
  .ro-megamenu__list.ro-active
  > .ro-megamenu__link {
  /* Hovering, focusing, and active for the <a href>...</a> inside the ro-megamenu__list */
  border-color: var(--navbar-default-menu-active-border);
}

/* ======================= Expanding header navbar on different screen sizes ======================= */
@media screen and (min-width: 34.5625em) {
  .ro-header.ro-header-expand-sm .ro-header__mobile {
    display: none;
  }
}
@media screen and (min-width: 34.5625em) {
  .ro-header.ro-header-expand-sm .ro-header-foldable {
    /* Making the header responsive from "Small" size and up */
    /* Navitems containing the menu items */
    position: initial;
    padding: 0;
    width: 100%;
    height: auto;
    background-color: transparent;
    box-shadow: none;
    overflow: visible;
    transform: translateX(0);
    pointer-events: all;
    opacity: 1;
    z-index: 1;
    display: flex;
    align-items: center;
  }
  .ro-header.ro-header-expand-sm .ro-header-foldable .ro-header__list {
    margin-bottom: 0;
  }
  .ro-header.ro-header-expand-sm
    .ro-header-foldable
    .ro-header__list
    .ro-header__link {
    --navbar-bg-link-color: transparent;
    background-color: var(--navbar-bg-link-color);
    border: 0;
  }
  .ro-header.ro-header-expand-sm
    .ro-header-foldable
    .ro-header__list:hover
    > .ro-header__link,
  .ro-header.ro-header-expand-sm
    .ro-header-foldable
    .ro-header__list
    > .ro-header__link:focus,
  .ro-header.ro-header-expand-sm
    .ro-header-foldable
    .ro-header__list.ro-active
    > .ro-header__link {
    /* Hovering, focusing, and active for the <a href>...</a> inside the ro-header__list */
    --navbar-bg-link-color: transparent;
    --navbar-active-color-link: var(--navbar-default-menu-active-border);
    background-color: var(--navbar-bg-link-color);
    color: var(--navbar-active-color-link);
  }
  .ro-header.ro-header-expand-sm
    .ro-header-foldable
    .has-dropdown
    .ro-dropdown {
    /* Dropdown menu */
    position: absolute;
    min-width: var(--dropdown-max-width);
    max-width: var(--dropdown-max-width);
    padding-left: 0;
    padding-right: 0;
    box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
    background-color: var(--global-background-color);
    border-radius: 0.6rem;
    border-left: 0;
    border-bottom: 0;
    border-top: 0.4rem solid var(--navbar-default-menu-active-border);
  }
  .ro-header.ro-header-expand-sm
    .ro-header-foldable
    .has-dropdown.ro-header__list {
    margin-bottom: 0;
  }
  .ro-header.ro-header-expand-sm
    .ro-header-foldable
    .ro-header__list:hover
    .ro-megamenu-link
    i,
  .ro-header.ro-header-expand-sm
    .ro-header-foldable
    .ro-header__list:hover
    .ro-megamenu-link
    .ro-icon,
  .ro-header.ro-header-expand-sm
    .ro-header-foldable
    .ro-header__list
    .ro-megamenu-link:focus
    i,
  .ro-header.ro-header-expand-sm
    .ro-header-foldable
    .ro-header__list
    .ro-megamenu-link:focus
    .ro-icon {
    transform: rotate(90deg);
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-header.ro-header-expand-md .ro-header__mobile {
    display: none;
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-header.ro-header-expand-md .ro-header-foldable {
    /* Making the header responsive from "Small" size and up */
    /* Navitems containing the menu items */
    position: initial;
    padding: 0;
    width: 100%;
    height: auto;
    background-color: transparent;
    box-shadow: none;
    overflow: visible;
    transform: translateX(0);
    pointer-events: all;
    opacity: 1;
    z-index: 1;
    display: flex;
    align-items: center;
  }
  .ro-header.ro-header-expand-md .ro-header-foldable .ro-header__list {
    margin-bottom: 0;
  }
  .ro-header.ro-header-expand-md
    .ro-header-foldable
    .ro-header__list
    .ro-header__link {
    --navbar-bg-link-color: transparent;
    background-color: var(--navbar-bg-link-color);
    border: 0;
  }
  .ro-header.ro-header-expand-md
    .ro-header-foldable
    .ro-header__list:hover
    > .ro-header__link,
  .ro-header.ro-header-expand-md
    .ro-header-foldable
    .ro-header__list
    > .ro-header__link:focus,
  .ro-header.ro-header-expand-md
    .ro-header-foldable
    .ro-header__list.ro-active
    > .ro-header__link {
    /* Hovering, focusing, and active for the <a href>...</a> inside the ro-header__list */
    --navbar-bg-link-color: transparent;
    --navbar-active-color-link: var(--navbar-default-menu-active-border);
    background-color: var(--navbar-bg-link-color);
    color: var(--navbar-active-color-link);
  }
  .ro-header.ro-header-expand-md
    .ro-header-foldable
    .has-dropdown
    .ro-dropdown {
    /* Dropdown menu */
    position: absolute;
    min-width: var(--dropdown-max-width);
    max-width: var(--dropdown-max-width);
    padding-left: 0;
    padding-right: 0;
    box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
    background-color: var(--global-background-color);
    border-radius: 0.6rem;
    border-left: 0;
    border-bottom: 0;
    border-top: 0.4rem solid var(--navbar-default-menu-active-border);
  }
  .ro-header.ro-header-expand-md
    .ro-header-foldable
    .has-dropdown.ro-header__list {
    margin-bottom: 0;
  }
  .ro-header.ro-header-expand-md
    .ro-header-foldable
    .ro-header__list:hover
    .ro-megamenu-link
    i,
  .ro-header.ro-header-expand-md
    .ro-header-foldable
    .ro-header__list:hover
    .ro-megamenu-link
    .ro-icon,
  .ro-header.ro-header-expand-md
    .ro-header-foldable
    .ro-header__list
    .ro-megamenu-link:focus
    i,
  .ro-header.ro-header-expand-md
    .ro-header-foldable
    .ro-header__list
    .ro-megamenu-link:focus
    .ro-icon {
    transform: rotate(90deg);
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-header.ro-header-expand-lg .ro-header__mobile {
    display: none;
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-header.ro-header-expand-lg .ro-header-foldable {
    /* Making the header responsive from "Small" size and up */
    /* Navitems containing the menu items */
    position: initial;
    padding: 0;
    width: 100%;
    height: auto;
    background-color: transparent;
    box-shadow: none;
    overflow: visible;
    transform: translateX(0);
    pointer-events: all;
    opacity: 1;
    z-index: 1;
    display: flex;
    align-items: center;
  }
  .ro-header.ro-header-expand-lg .ro-header-foldable .ro-header__list {
    margin-bottom: 0;
  }
  .ro-header.ro-header-expand-lg
    .ro-header-foldable
    .ro-header__list
    .ro-header__link {
    --navbar-bg-link-color: transparent;
    background-color: var(--navbar-bg-link-color);
    border: 0;
  }
  .ro-header.ro-header-expand-lg
    .ro-header-foldable
    .ro-header__list:hover
    > .ro-header__link,
  .ro-header.ro-header-expand-lg
    .ro-header-foldable
    .ro-header__list
    > .ro-header__link:focus,
  .ro-header.ro-header-expand-lg
    .ro-header-foldable
    .ro-header__list.ro-active
    > .ro-header__link {
    /* Hovering, focusing, and active for the <a href>...</a> inside the ro-header__list */
    --navbar-bg-link-color: transparent;
    --navbar-active-color-link: var(--navbar-default-menu-active-border);
    background-color: var(--navbar-bg-link-color);
    color: var(--navbar-active-color-link);
  }
  .ro-header.ro-header-expand-lg
    .ro-header-foldable
    .has-dropdown
    .ro-dropdown {
    /* Dropdown menu */
    position: absolute;
    min-width: var(--dropdown-max-width);
    max-width: var(--dropdown-max-width);
    padding-left: 0;
    padding-right: 0;
    box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
    background-color: var(--global-background-color);
    border-radius: 0.6rem;
    border-left: 0;
    border-bottom: 0;
    border-top: 0.4rem solid var(--navbar-default-menu-active-border);
  }
  .ro-header.ro-header-expand-lg
    .ro-header-foldable
    .has-dropdown.ro-header__list {
    margin-bottom: 0;
  }
  .ro-header.ro-header-expand-lg
    .ro-header-foldable
    .ro-header__list:hover
    .ro-megamenu-link
    i,
  .ro-header.ro-header-expand-lg
    .ro-header-foldable
    .ro-header__list:hover
    .ro-megamenu-link
    .ro-icon,
  .ro-header.ro-header-expand-lg
    .ro-header-foldable
    .ro-header__list
    .ro-megamenu-link:focus
    i,
  .ro-header.ro-header-expand-lg
    .ro-header-foldable
    .ro-header__list
    .ro-megamenu-link:focus
    .ro-icon {
    transform: rotate(90deg);
  }
}
@media screen and (min-width: 90em) {
  .ro-header.ro-header-expand-xl .ro-header__mobile {
    display: none;
  }
}
@media screen and (min-width: 90em) {
  .ro-header.ro-header-expand-xl .ro-header-foldable {
    /* Making the header responsive from "Small" size and up */
    /* Navitems containing the menu items */
    position: initial;
    padding: 0;
    width: 100%;
    height: auto;
    background-color: transparent;
    box-shadow: none;
    overflow: visible;
    transform: translateX(0);
    pointer-events: all;
    opacity: 1;
    z-index: 1;
    display: flex;
    align-items: center;
  }
  .ro-header.ro-header-expand-xl .ro-header-foldable .ro-header__list {
    margin-bottom: 0;
  }
  .ro-header.ro-header-expand-xl
    .ro-header-foldable
    .ro-header__list
    .ro-header__link {
    --navbar-bg-link-color: transparent;
    background-color: var(--navbar-bg-link-color);
    border: 0;
  }
  .ro-header.ro-header-expand-xl
    .ro-header-foldable
    .ro-header__list:hover
    > .ro-header__link,
  .ro-header.ro-header-expand-xl
    .ro-header-foldable
    .ro-header__list
    > .ro-header__link:focus,
  .ro-header.ro-header-expand-xl
    .ro-header-foldable
    .ro-header__list.ro-active
    > .ro-header__link {
    /* Hovering, focusing, and active for the <a href>...</a> inside the ro-header__list */
    --navbar-bg-link-color: transparent;
    --navbar-active-color-link: var(--navbar-default-menu-active-border);
    background-color: var(--navbar-bg-link-color);
    color: var(--navbar-active-color-link);
  }
  .ro-header.ro-header-expand-xl
    .ro-header-foldable
    .has-dropdown
    .ro-dropdown {
    /* Dropdown menu */
    position: absolute;
    min-width: var(--dropdown-max-width);
    max-width: var(--dropdown-max-width);
    padding-left: 0;
    padding-right: 0;
    box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
    background-color: var(--global-background-color);
    border-radius: 0.6rem;
    border-left: 0;
    border-bottom: 0;
    border-top: 0.4rem solid var(--navbar-default-menu-active-border);
  }
  .ro-header.ro-header-expand-xl
    .ro-header-foldable
    .has-dropdown.ro-header__list {
    margin-bottom: 0;
  }
  .ro-header.ro-header-expand-xl
    .ro-header-foldable
    .ro-header__list:hover
    .ro-megamenu-link
    i,
  .ro-header.ro-header-expand-xl
    .ro-header-foldable
    .ro-header__list:hover
    .ro-megamenu-link
    .ro-icon,
  .ro-header.ro-header-expand-xl
    .ro-header-foldable
    .ro-header__list
    .ro-megamenu-link:focus
    i,
  .ro-header.ro-header-expand-xl
    .ro-header-foldable
    .ro-header__list
    .ro-megamenu-link:focus
    .ro-icon {
    transform: rotate(90deg);
  }
}

/* ======================= Sidebar navbar on different screen sizes ======================= */
@media screen and (min-width: 34.5625em) {
  .ro-header-sidebar-sm-1 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 1));
    max-width: calc(100% / (12 / 1));
  }

  .ro-header-sidebar-sm-2 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 2));
    max-width: calc(100% / (12 / 2));
  }

  .ro-header-sidebar-sm-3 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 3));
    max-width: calc(100% / (12 / 3));
  }

  .ro-header-sidebar-sm-4 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 4));
    max-width: calc(100% / (12 / 4));
  }

  .ro-header-sidebar-sm-5 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 5));
    max-width: calc(100% / (12 / 5));
  }

  .ro-header-sidebar-sm-6 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 6));
    max-width: calc(100% / (12 / 6));
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-header-sidebar-md-1 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 1));
    max-width: calc(100% / (12 / 1));
  }

  .ro-header-sidebar-md-2 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 2));
    max-width: calc(100% / (12 / 2));
  }

  .ro-header-sidebar-md-3 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 3));
    max-width: calc(100% / (12 / 3));
  }

  .ro-header-sidebar-md-4 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 4));
    max-width: calc(100% / (12 / 4));
  }

  .ro-header-sidebar-md-5 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 5));
    max-width: calc(100% / (12 / 5));
  }

  .ro-header-sidebar-md-6 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 6));
    max-width: calc(100% / (12 / 6));
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-header-sidebar-lg-1 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 1));
    max-width: calc(100% / (12 / 1));
  }

  .ro-header-sidebar-lg-2 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 2));
    max-width: calc(100% / (12 / 2));
  }

  .ro-header-sidebar-lg-3 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 3));
    max-width: calc(100% / (12 / 3));
  }

  .ro-header-sidebar-lg-4 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 4));
    max-width: calc(100% / (12 / 4));
  }

  .ro-header-sidebar-lg-5 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 5));
    max-width: calc(100% / (12 / 5));
  }

  .ro-header-sidebar-lg-6 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 6));
    max-width: calc(100% / (12 / 6));
  }
}
@media screen and (min-width: 90em) {
  .ro-header-sidebar-xl-1 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 1));
    max-width: calc(100% / (12 / 1));
  }

  .ro-header-sidebar-xl-2 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 2));
    max-width: calc(100% / (12 / 2));
  }

  .ro-header-sidebar-xl-3 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 3));
    max-width: calc(100% / (12 / 3));
  }

  .ro-header-sidebar-xl-4 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 4));
    max-width: calc(100% / (12 / 4));
  }

  .ro-header-sidebar-xl-5 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 5));
    max-width: calc(100% / (12 / 5));
  }

  .ro-header-sidebar-xl-6 {
    /* Sidebar menu width */
    transform: translate(0);
    opacity: 1;
    pointer-events: all;
    width: calc(100% / (12 / 6));
    max-width: calc(100% / (12 / 6));
  }
}
/* ======================= Floating megamenu ======================= */
.ro-megamenu.ro-active .ro-megamenu__menu.ro-megamenu-floating {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.ro-megamenu__menu.ro-megamenu-floating {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
}
@media screen and (min-width: 34.5625em) {
  .ro-megamenu__menu.ro-megamenu-floating-sm {
    top: 0;
    left: var(--navbar-sidebar-width-default);
    margin: 0 1.2rem;
    border-radius: 0.6rem;
    width: auto;
    max-width: 90rem;
    height: auto;
    max-height: 100vh;
    border-top: 0;
    border-left: 0.3rem solid var(--navbar-default-menu-active-border);
    opacity: 0;
    visibility: hidden;
    transform: translateX(5rem);
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-megamenu__menu.ro-megamenu-floating-md {
    top: 0;
    left: var(--navbar-sidebar-width-default);
    margin: 0 1.2rem;
    border-radius: 0.6rem;
    width: auto;
    max-width: 90rem;
    height: auto;
    max-height: 100vh;
    border-top: 0;
    border-left: 0.3rem solid var(--navbar-default-menu-active-border);
    opacity: 0;
    visibility: hidden;
    transform: translateX(5rem);
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-megamenu__menu.ro-megamenu-floating-lg {
    top: 0;
    left: var(--navbar-sidebar-width-default);
    margin: 0 1.2rem;
    border-radius: 0.6rem;
    width: auto;
    max-width: 90rem;
    height: auto;
    max-height: 100vh;
    border-top: 0;
    border-left: 0.3rem solid var(--navbar-default-menu-active-border);
    opacity: 0;
    visibility: hidden;
    transform: translateX(5rem);
  }
}
@media screen and (min-width: 90em) {
  .ro-megamenu__menu.ro-megamenu-floating-xl {
    top: 0;
    left: var(--navbar-sidebar-width-default);
    margin: 0 1.2rem;
    border-radius: 0.6rem;
    width: auto;
    max-width: 90rem;
    height: auto;
    max-height: 100vh;
    border-top: 0;
    border-left: 0.3rem solid var(--navbar-default-menu-active-border);
    opacity: 0;
    visibility: hidden;
    transform: translateX(5rem);
  }
}
@media screen and (min-width: 34.5625em) {
  .ro-megamenu.ro-active .ro-megamenu__menu.ro-megamenu-floating-sm {
    /* Showing megamenu */
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-megamenu.ro-active .ro-megamenu__menu.ro-megamenu-floating-md {
    /* Showing megamenu */
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-megamenu.ro-active .ro-megamenu__menu.ro-megamenu-floating-lg {
    /* Showing megamenu */
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}
@media screen and (min-width: 90em) {
  .ro-megamenu.ro-active .ro-megamenu__menu.ro-megamenu-floating-xl {
    /* Showing megamenu */
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

/* ====================== Paginations ====================== */
.ro-pagination {
  --pagination-default-theme: var(--accent);
  --pagination-default-border-active: var(--accent-dark-1);
  --pagination-active-color: var(--global-body-text-color);
  display: inline-flex;
  width: auto;
  align-items: center;
  background-color: var(--global-background-color);
}
.ro-pagination.ro-pagination-primary {
  /* Pagination type primary */
  --pagination-active-color: var(--gray-light-4);
  --pagination-default-border-active: var(--primary-dark-1);
  --pagination-default-theme: var(--primary);
}
.ro-pagination.ro-pagination-secondary {
  /* Pagination type secondary */
  --pagination-active-color: var(--gray-light-4);
  --pagination-default-border-active: var(--secondary-dark-1);
  --pagination-default-theme: var(--secondary);
}
.ro-pagination.ro-pagination-success {
  /* Pagination type success */
  --pagination-active-color: var(--gray-light-4);
  --pagination-default-border-active: var(--success-dark-1);
  --pagination-default-theme: var(--success);
}
.ro-pagination.ro-pagination-info {
  /* Pagination type info */
  --pagination-active-color: var(--gray-light-4);
  --pagination-default-border-active: var(--info-dark-1);
  --pagination-default-theme: var(--info);
}
.ro-pagination.ro-pagination-warning {
  /* Pagination type warning */
  --pagination-active-color: var(--dark);
  --pagination-default-border-active: var(--warning-dark-1);
  --pagination-default-theme: var(--warning);
}
.ro-pagination.ro-pagination-danger {
  /* Pagination type danger */
  --pagination-active-color: var(--gray-light-4);
  --pagination-default-border-active: var(--danger-dark-1);
  --pagination-default-theme: var(--danger);
}
.ro-pagination.ro-pagination-gray {
  /* Pagination type gray */
  --pagination-active-color: var(--dark);
  --pagination-default-border-active: var(--gray-dark-1);
  --pagination-default-theme: var(--gray);
}
.ro-pagination.ro-pagination-dark {
  /* Pagination type dark */
  --pagination-active-color: var(--gray-light-4);
  --pagination-default-border-active: var(--dark-dark-1);
  --pagination-default-theme: var(--dark);
}
.ro-pagination__button,
.ro-pagination__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 0.2rem solid var(--gray);
}
.ro-pagination__button:focus,
.ro-pagination__number:focus {
  border-color: var(--pagination-default-theme);
}
.ro-pagination__button {
  color: var(--pagination-default-theme);
  font-size: 1.4rem;
}
.ro-pagination__button--previous {
  border-radius: 0.6rem 0 0 0.6rem;
  border-right-width: 0.1rem;
}
.ro-pagination__button--next {
  border-radius: 0 0.6rem 0.6rem 0;
  border-left-width: 0.1rem;
}
.ro-pagination__button i {
  font-size: 1.4rem;
  color: var(--pagination-default-theme);
}
.ro-pagination__button:hover,
.ro-pagination__button:focus {
  color: var(--pagination-default-theme);
}
.ro-pagination__number {
  font-size: 1.4rem;
  color: var(--global-body-text-color);
  cursor: pointer;
  border-left-width: 0.1rem;
  border-right-width: 0.1rem;
}
.ro-pagination__number:hover,
.ro-pagination__number:focus {
  color: var(--pagination-default-theme);
}
.ro-pagination__number--more {
  position: relative;
}
.ro-pagination__number--more:hover .ro-pagination__dropdown {
  opacity: 1;
  visibility: visible;
}
.ro-pagination__number.ro-active {
  background-color: var(--pagination-default-theme);
  border-color: var(--pagination-default-border-active);
  color: var(--pagination-active-color);
}
.ro-pagination__dropdown {
  position: absolute;
  bottom: 120%;
  background-color: var(--global-background-color);
  border-radius: 0.6rem;
  min-width: 10rem;
  max-width: 15rem;
  display: flex;
  flex-wrap: wrap;
  z-index: 25;
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
  transition: all 0.3s 0s ease-out;
  opacity: 0;
  visibility: hidden;
}
.ro-pagination__dropdown span {
  flex: 0 0 calc(100% / (12 / 4));
  max-width: calc(100% / (12 / 4));
}
.ro-pagination__dropdown .ro-pagination__number {
  width: auto;
  height: auto;
  padding: 0.5rem;
  border: 0;
}
.ro-pagination-text {
  width: auto;
  padding: 0 1.2rem;
}
.ro-pagination .ro-disabled,
.ro-pagination.ro-disabled {
  pointer-events: none;
  color: var(--global-body-text-color);
  background-color: var(--gray-light-1);
  -webkit-user-select: none;
  user-select: none;
  border-color: var(--gray-dark-1);
}
.ro-pagination .ro-disabled i,
.ro-pagination .ro-disabled .ro-icon,
.ro-pagination.ro-disabled i,
.ro-pagination.ro-disabled .ro-icon {
  color: var(--global-body-text-color);
}
.ro-pagination.ro-disabled {
  border-radius: 0.6rem;
}
.ro-pagination.ro-disabled .ro-pagination__button,
.ro-pagination.ro-disabled .ro-pagination__number {
  background-color: var(--gray-light-1);
  color: var(--global-body-text-color);
}
.ro-pagination.ro-pagination-fullwidth {
  display: flex;
  justify-content: space-between;
}
.ro-pagination.ro-pagination-fullwidth .ro-pagination__list {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ro-pagination.ro-pagination-fullwidth
  .ro-pagination__number:first-of-type:not(
    .ro-pagination__number--more,
    .ro-pagination__number--more .ro-pagination__number
  ) {
  border-left-width: 0.2rem;
}
.ro-pagination.ro-pagination-fullwidth
  .ro-pagination__number:last-of-type:not(
    .ro-pagination__number--more,
    .ro-pagination__number--more .ro-pagination__number
  ) {
  border-right-width: 0.2rem;
}
.ro-pagination.ro-pagination-fullwidth .ro-pagination__button--previous {
  border-right-width: 0.2rem;
}
.ro-pagination.ro-pagination-fullwidth .ro-pagination__button--next {
  border-left-width: 0.2rem;
}
.ro-pagination.ro-pagination-transparent {
  background-color: transparent;
}
.ro-pagination.ro-pagination-transparent .ro-pagination__button,
.ro-pagination.ro-pagination-transparent .ro-pagination__number {
  background-color: transparent;
  border-color: transparent;
}
.ro-pagination.ro-pagination-transparent .ro-pagination__button--previous {
  padding-left: 0;
}
.ro-pagination.ro-pagination-transparent .ro-pagination__button--next {
  padding-right: 0;
}
.ro-pagination.ro-pagination-transparent .ro-pagination__number.ro-active {
  color: var(--pagination-default-theme);
  font-size: calc(1.4rem + 0.4rem);
}
.ro-pagination.ro-pagination-pill .ro-pagination__button--previous {
  border-radius: 25rem 0 0 25rem;
}
.ro-pagination.ro-pagination-pill .ro-pagination__button--next {
  border-radius: 0 25rem 25rem 0;
}

/* ====================== Scroll progress indicator ====================== */
.ro-scroll-indicator {
  --scroll-progress-default-theme: var(--accent-light-4);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.8rem;
  z-index: 200;
}
.ro-scroll-indicator.ro-scroll-indicator-primary {
  /* Scroll progress type primary */
  --scroll-progress-default-theme: var(--primary-light-4);
}
.ro-scroll-indicator.ro-scroll-indicator-secondary {
  /* Scroll progress type secondary */
  --scroll-progress-default-theme: var(--secondary-light-4);
}
.ro-scroll-indicator.ro-scroll-indicator-success {
  /* Scroll progress type success */
  --scroll-progress-default-theme: var(--success-light-4);
}
.ro-scroll-indicator.ro-scroll-indicator-info {
  /* Scroll progress type info */
  --scroll-progress-default-theme: var(--info-light-4);
}
.ro-scroll-indicator.ro-scroll-indicator-warning {
  /* Scroll progress type warning */
  --scroll-progress-default-theme: var(--warning-light-4);
}
.ro-scroll-indicator.ro-scroll-indicator-danger {
  /* Scroll progress type danger */
  --scroll-progress-default-theme: var(--danger-light-4);
}
.ro-scroll-indicator.ro-scroll-indicator-gray {
  /* Scroll progress type gray */
  --scroll-progress-default-theme: var(--gray-light-1);
}
.ro-scroll-indicator.ro-scroll-indicator-dark {
  /* Scroll progress type dark */
  --scroll-progress-default-theme: var(--dark-light-4);
}
.ro-scroll-indicator__slide {
  height: 100%;
  width: 0;
  background-color: var(--scroll-progress-default-theme);
}
.ro-scroll-indicator.ro-scroll-indicator-right,
.ro-scroll-indicator.ro-scroll-indicator-left {
  width: 0.8rem;
  height: 100%;
}
.ro-scroll-indicator.ro-scroll-indicator-right .ro-scroll-indicator__slide,
.ro-scroll-indicator.ro-scroll-indicator-left .ro-scroll-indicator__slide {
  width: 100%;
  height: 0;
}
.ro-scroll-indicator.ro-scroll-indicator-right {
  left: auto;
  right: 0;
}
.ro-scroll-indicator.ro-scroll-indicator-bottom {
  top: auto;
  bottom: 0;
}

/* ====================== Table ====================== */
.ro-table {
  --table-default-body-text-color: var(--dark);
  --table-default-border-color: var(--gray-light-2);
  --table-row-default-alt-bg-color: var(--gray-light-3);
  --table-row-default-active-bg-color: var(--gray-dark-2);
  width: 100%;
  background-color: var(--global-background-color);
  border-radius: 0.6rem;
  overflow: hidden;
  border-collapse: collapse;
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
}
.ro-table.ro-table-primary {
  /* Table type primary */
  --table-row-default-alt-bg-color: var(--primary-light-4);
  /* Table type primary */
  --table-row-default-alt-bg-color: var(--primary-light-3);
  --table-default-body-text-color: var(--gray-light-4);
  --table-default-border-color: var(--primary-light-3);
  --table-row-default-active-bg-color: var(--primary-dark-2);
}
.ro-table.ro-table-secondary {
  /* Table type secondary */
  --table-row-default-alt-bg-color: var(--secondary-light-4);
  /* Table type secondary */
  --table-row-default-alt-bg-color: var(--secondary-light-3);
  --table-default-body-text-color: var(--gray-light-4);
  --table-default-border-color: var(--secondary-light-3);
  --table-row-default-active-bg-color: var(--secondary-dark-2);
}
.ro-table.ro-table-success {
  /* Table type success */
  --table-row-default-alt-bg-color: var(--success-light-3);
  --table-default-body-text-color: var(--gray-light-4);
  --table-default-border-color: var(--success-light-3);
  --table-row-default-active-bg-color: var(--success-dark-2);
}
.ro-table.ro-table-info {
  /* Table type info */
  --table-row-default-alt-bg-color: var(--info-light-3);
  --table-default-body-text-color: var(--gray-light-4);
  --table-default-border-color: var(--info-light-3);
  --table-row-default-active-bg-color: var(--info-dark-2);
}
.ro-table.ro-table-warning {
  /* Table type warning */
  --table-default-body-text-color: var(--dark);
  /* Table type warning */
  --table-row-default-alt-bg-color: var(--warning-light-3);
  --table-default-body-text-color: var(--gray-light-4);
  --table-default-border-color: var(--warning-light-3);
  --table-row-default-active-bg-color: var(--warning-dark-2);
}
.ro-table.ro-table-danger {
  /* Table type danger */
  --table-row-default-alt-bg-color: var(--danger-light-3);
  --table-default-body-text-color: var(--gray-light-4);
  --table-default-border-color: var(--danger-light-3);
  --table-row-default-active-bg-color: var(--danger-dark-2);
}
.ro-table.ro-table-dark {
  /* Table type dark */
  --table-row-default-alt-bg-color: var(--dark-light-4);
  /* Table type dark */
  --table-row-default-alt-bg-color: var(--dark-light-3);
  --table-default-body-text-color: var(--gray-light-4);
  --table-default-border-color: var(--dark-light-3);
  --table-row-default-active-bg-color: var(--dark-dark-2);
}
.ro-table.ro-table-accent {
  /* Table type accent */
  --table-default-body-text-color: var(--dark);
  /* Table type accent */
  --table-row-default-alt-bg-color: var(--accent-light-4);
  /* Table type accent */
  --table-row-default-alt-bg-color: var(--accent-light-3);
  --table-default-body-text-color: var(--gray-light-4);
  --table-default-border-color: var(--accent-light-3);
  --table-row-default-active-bg-color: var(--accent-dark-2);
}
.ro-table__header .ro-table__head {
  /* thead th */
  font-weight: var(--font-weight-bold);
  padding: 2rem;
  font-size: 1.6rem;
}
.ro-table.ro-table-border .ro-table__head,
.ro-table.ro-table-border .ro-table__data {
  /* thead th and tbody td */
  border-right: 0.1rem solid var(--table-default-border-color);
  border-bottom: 0.1rem solid var(--table-default-border-color);
}
.ro-table.ro-table-border .ro-table__head:last-of-type,
.ro-table.ro-table-border .ro-table__data:last-of-type {
  border-right: 0;
}
.ro-table.ro-table-border .ro-table__row:last-of-type .ro-table__data {
  border-bottom: 0;
}
.ro-table.ro-table-border-header-head .ro-table__header .ro-table__head {
  /* Only table header (th) inside table head */
  border-right: 0.1rem solid var(--table-default-border-color);
  border-bottom: 0.1rem solid var(--table-default-border-color);
}
.ro-table.ro-table-border-header-head
  .ro-table__header
  .ro-table__head:last-of-type {
  border-right: 0;
}
.ro-table.ro-table-border-body-row .ro-table__body .ro-table__row {
  /* Only table rows inside table body */
  border-top: 0.1rem solid var(--table-default-border-color);
}
.ro-table.ro-table-border-body-data .ro-table__body .ro-table__data {
  /* Only table data (td) inside table body */
  border-right: 0.1rem solid var(--table-default-border-color);
  border-top: 0.1rem solid var(--table-default-border-color);
}
.ro-table.ro-table-border-body-data
  .ro-table__body
  .ro-table__data:last-of-type {
  border-right: 0;
}
.ro-table.ro-table-striped .ro-table__body .ro-table__row:nth-child(even) {
  background-color: var(--table-row-default-alt-bg-color);
  color: var(--table-default-body-text-color);
}
.ro-table.ro-table-striped.ro-table-striped-odd
  .ro-table__body
  .ro-table__row:nth-child(even) {
  background-color: transparent;
  color: var(--table-default-body-text-color);
}
.ro-table.ro-table-striped.ro-table-striped-odd
  .ro-table__body
  .ro-table__row:nth-child(odd) {
  background-color: var(--table-row-default-alt-bg-color);
  color: var(--table-default-body-text-color);
}
.ro-table.ro-table-striped .ro-table__body .ro-table__row.ro-table-active,
.ro-table__body .ro-table__row.ro-table-active {
  /* Active tbody tr */
  background-color: var(--table-row-default-active-bg-color);
  color: var(--global-background-color);
  font-weight: var(--font-weight-medium);
}
.ro-table__head,
.ro-table__data {
  /* th and td */
  text-align: left;
  white-space: nowrap;
}
.ro-table-hovered
  .ro-table__row:not(.ro-table-hovered .ro-table__header .ro-table__row) {
  /* Only works on the tbody tr */
  transition: box-shadow 0.3s 0s ease-out;
}
.ro-table-hovered
  .ro-table__row:not(.ro-table-hovered .ro-table__header .ro-table__row):hover {
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
}
.ro-table__data {
  /* td */
  padding: 1.5rem;
}

[class*="ro-overflow-"] {
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
  border-radius: 0.6rem;
}
[class*="ro-overflow-"] .ro-table {
  box-shadow: none;
}

/* ====================== Tooltip ====================== */
.ro-tooltip {
  --tooltip-default-theme: var(--dark);
  --tooltip-default-text-color: var(--gray-light-4);
  position: relative;
  border-bottom: 0.1rem dotted currentColor;
  cursor: help;
}
.ro-tooltip.ro-tooltip-primary {
  /* Tooltip type primary */
  --tooltip-default-theme: var(--primary);
}
.ro-tooltip.ro-tooltip-secondary {
  /* Tooltip type secondary */
  --tooltip-default-theme: var(--secondary);
}
.ro-tooltip.ro-tooltip-success {
  /* Tooltip type success */
  --tooltip-default-theme: var(--success-light-4);
}
.ro-tooltip.ro-tooltip-info {
  /* Tooltip type info */
  --tooltip-default-theme: var(--info);
}
.ro-tooltip.ro-tooltip-warning {
  /* Tooltip type warning */
  --tooltip-default-text-color: var(--dark);
  --tooltip-default-theme: var(--warning);
}
.ro-tooltip.ro-tooltip-danger {
  /* Tooltip type danger */
  --tooltip-default-theme: var(--danger);
}
.ro-tooltip.ro-tooltip-accent {
  /* Tooltip type accent */
  --tooltip-default-theme: var(--accent);
}
.ro-tooltip.ro-tooltip-gray {
  /* Tooltip type gray */
  --tooltip-default-text-color: var(--dark);
  --tooltip-default-theme: var(--gray);
}
.ro-tooltip:not(a) {
  /* Not affecting anchor elements */
  color: var(--tooltip-default-theme);
}
.ro-tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  top: -150%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  padding: 0.6rem 1.2rem;
  font-size: 0.8em;
  background-color: var(--tooltip-default-theme);
  color: var(--tooltip-default-text-color);
  white-space: nowrap;
  border-radius: 0.45rem;
}
.ro-tooltip::before {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s 0s ease-out;
}
.ro-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
}
.ro-tooltip.ro-tooltip-right::before {
  top: 50%;
  left: 120%;
  transform: translate(0, -50%);
}
.ro-tooltip.ro-tooltip-bottom::before {
  top: 120%;
}
.ro-tooltip.ro-tooltip-left::before {
  top: 50%;
  left: -100%;
  transform: translate(0, -50%);
}

/* ====================== Form inputs ====================== */
.ro-form__checkbox-label,
.ro-form__radio-label {
  /* Label for custom radio button and checkbox */
  display: inline-flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.ro-form__checkbox-label .ro-form__checkbox,
.ro-form__radio-label .ro-form__radio {
  /* Custom radio button and checkbox */
  position: relative;
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
  border-radius: 50%;
  border: 0.2rem solid var(--form-input-default-theme);
}
.ro-form__checkbox-label .ro-form__checkbox::before,
.ro-form__radio-label .ro-form__radio::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background-color: var(--form-input-default-theme);
  transition: transform 0.3s 0s ease-out;
}

.ro-form {
  --form-input-default-theme: var(--accent-light-4);
  --form-input-default-padding: var(--default-button-input-padding);
  --form-input-pre-append-bg: var(--gray-light-3);
  --form-input-pre-append-color: var(--global-body-text-color);
  --form-input-switch-thumb-bg: var(--accent-dark-1);
  --form-input-number-default-height: 5.08rem;
  position: relative;
  width: 100%;
}
.ro-form.ro-form-sm,
.ro-form .ro-form__input--sm {
  /* Form input size sm */
  --form-input-default-padding: var(--default-button-input-padding-sm)
    var(--form-input-left-right-padding);
  --form-input-number-default-height: 3.48rem;
}
.ro-form.ro-form-md,
.ro-form .ro-form__input--md {
  /* Form input size md */
  --form-input-default-padding: var(--default-button-input-padding-md)
    var(--form-input-left-right-padding);
  --form-input-number-default-height: 6.28rem;
}
.ro-form.ro-form-lg,
.ro-form .ro-form__input--lg {
  /* Form input size lg */
  --form-input-default-padding: var(--default-button-input-padding-lg)
    var(--form-input-left-right-padding);
  --form-input-number-default-height: 7.48rem;
}
.ro-form .ro-form__group--valid .ro-form__icon {
  color: var(--success);
}
.ro-form .ro-form__input--valid,
.ro-form .ro-form__input--valid:focus {
  border-color: var(--success);
}
.ro-form .ro-form__feedback--valid {
  color: var(--success);
}
.ro-form .ro-form__group--info .ro-form__icon {
  color: var(--info);
}
.ro-form .ro-form__input--info,
.ro-form .ro-form__input--info:focus {
  border-color: var(--info);
}
.ro-form .ro-form__feedback--info {
  color: var(--info);
}
.ro-form .ro-form__group--warn .ro-form__icon {
  color: var(--warning);
}
.ro-form .ro-form__input--warn,
.ro-form .ro-form__input--warn:focus {
  border-color: var(--warning);
}
.ro-form .ro-form__feedback--warn {
  color: var(--warning);
}
.ro-form .ro-form__group--error .ro-form__icon {
  color: var(--danger);
}
.ro-form .ro-form__input--error,
.ro-form .ro-form__input--error:focus {
  border-color: var(--danger);
}
.ro-form .ro-form__feedback--error {
  color: var(--danger);
}
.ro-form.ro-form-primary,
.ro-form .ro-form__input--primary {
  /* Form input type primary */
  --form-input-default-theme: var(--primary-light-4);
  --form-input-switch-thumb-bg: var(--primary-dark-1);
  --form-input-pre-append-color: var(--gray-light-4);
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--primary-light-4);
}
.ro-form.ro-form-secondary,
.ro-form .ro-form__input--secondary {
  /* Form input type secondary */
  --form-input-default-theme: var(--secondary-light-4);
  --form-input-switch-thumb-bg: var(--secondary-dark-1);
  --form-input-pre-append-color: var(--gray-light-4);
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--secondary-light-4);
}
.ro-form.ro-form-gray,
.ro-form .ro-form__input--gray {
  /* Form input type gray */
  --form-input-default-theme: var(--gray-dark-1);
  --form-input-switch-thumb-bg: var(--gray-dark-2);
  --button-circle-icon-color: var(--dark);
  --button-circle-bg-color: var(--gray-light-4);
}
.ro-form.ro-form-dark,
.ro-form .ro-form__input--dark {
  /* Form input type dark */
  --form-input-default-theme: var(--dark-light-4);
  --form-input-switch-thumb-bg: var(--dark-dark-1);
  --form-input-pre-append-color: var(--gray-light-4);
  --button-circle-icon-color: var(--gray-light-4);
  --button-circle-bg-color: var(--dark-light-4);
}
.ro-form__group {
  position: relative;
  width: 100%;
}
.ro-form__input {
  /* Individual input field */
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.6rem;
  background-color: var(--global-background-color);
  padding: var(--form-input-default-padding);
  font-size: var(--default-button-input-font-size);
  border: 0.2rem solid var(--gray-light-2);
  transition: all 0.3s 0s ease-out;
}
.ro-form__input ~ .ro-form__label {
  font-size: 1.3rem;
  font-weight: var(--font-weight-regular);
  margin: 0;
  position: absolute;
  top: 50%;
  left: var(--form-input-left-right-padding);
  transform: translateY(-50%);
  pointer-events: none;
}
.ro-form__label {
  /* Form label */
  display: inline-block;
  font-size: 1.4rem;
  margin-bottom: var(--spacing-xs);
  font-weight: var(--font-weight-medium);
  color: var(--global-body-text-color);
  transition: all 0.3s 0s ease-out;
}
.ro-form__input:focus {
  /* Focusing */
  border-color: var(--form-input-default-theme);
}
.ro-form__input:hover ~ .ro-form__label,
.ro-form__input:focus ~ .ro-form__label,
.ro-form__input.ro-input-not-empty ~ .ro-form__label {
  /* Hovering and focusing on the input field or when it has value */
  pointer-events: all;
  font-size: 1.15rem;
  top: 1.1rem;
}
.ro-form__input--error:not(
    .ro-form__input--error.ro-form__textarea,
    .ro-form__input--error.ro-input-not-empty,
    .ro-form__input--error:hover,
    .ro-form__input--error:focus
  )
  ~ .ro-form__label {
  top: 33.55%;
}
.ro-form__group--icon
  .ro-form-has-feedback.ro-form__input--valid.ro-input-not-empty
  ~ .ro-form__icon,
.ro-form__group--icon
  .ro-form-has-feedback.ro-form__input--valid
  ~ .ro-form__icon,
.ro-form__group--icon
  .ro-form-has-feedback.ro-form__input--error.ro-input-not-empty
  ~ .ro-form__icon,
.ro-form__group--icon
  .ro-form-has-feedback.ro-form__input--error
  ~ .ro-form__icon,
.ro-form__group--icon
  .ro-form-has-feedback.ro-form__input--warn.ro-input-not-empty
  ~ .ro-form__icon,
.ro-form__group--icon
  .ro-form-has-feedback.ro-form__input--warn
  ~ .ro-form__icon,
.ro-form__group--icon
  .ro-form-has-feedback.ro-form__input--info.ro-input-not-empty
  ~ .ro-form__icon,
.ro-form__group--icon
  .ro-form-has-feedback.ro-form__input--info
  ~ .ro-form__icon {
  top: 35%;
}
.ro-form__input[type="number"] {
  -moz-appearance: textfield;
}
.ro-form__input[type="number"]::-webkit-inner-spin-button,
.ro-form__input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ro-form__input[type="number"] ~ .ro-form__label {
  left: calc(var(--form-input-left-right-padding) * 6);
}
.ro-form__number {
  display: flex;
}
.ro-form__number .ro-form__input {
  padding-top: 0;
  padding-bottom: 0;
  height: var(--form-input-number-default-height);
  border-radius: 0;
}
.ro-form__button {
  background-color: transparent;
  color: var(--global-body-text-color);
  font-size: calc(var(--default-button-input-font-size) * 1.8);
  height: var(--form-input-number-default-height);
  line-height: 0;
  border: 0.2rem solid var(--gray-light-2);
  transition: all 0.3s 0s ease-out;
}
.ro-form__button span {
  width: var(--form-input-number-default-height);
}
.ro-form__button--increment {
  border-left-width: 0.1rem;
  border-radius: 0 0.6rem 0.6rem 0;
}
.ro-form__button--decrement {
  border-right-width: 0.1rem;
  border-radius: 0.6rem 0 0 0.6rem;
}
.ro-form__button:hover,
.ro-form__button:focus {
  border-color: var(--button-circle-bg-color);
  color: var(--button-circle-bg-color);
}
.ro-form__textarea {
  /* Textarea */
  height: 20rem;
  line-height: 1.4;
  transition-property: border-color;
  scrollbar-width: thin;
  scrollbar-color: var(--dark-light-3) transparent;
  resize: none;
}
.ro-form__textarea::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.2rem transparent;
  background: transparent;
  margin: 1.1rem;
}
.ro-form__textarea::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
  background: transparent;
}
.ro-form__textarea::-webkit-scrollbar-thumb {
  border-radius: 6rem;
  width: 0.5rem;
  background-color: var(--dark-light-3);
}
.ro-form__textarea ~ .ro-form__label {
  /* Label next to the textarea field */
  top: calc(var(--form-input-left-right-padding) + 1rem);
}
.ro-form__feedback {
  /* Message for user for form fields - valid or error messages */
  font-size: 1.3rem;
  margin-top: 1rem;
  display: none;
}
.ro-form__feedback.ro-active {
  /* Showing */
  display: block;
}
.ro-disabled .ro-form__input,
.ro-form__button.ro-disabled,
.ro-form :disabled {
  /* Disabled input fields */
  background-color: var(--gray-light-1);
  color: var(--dark-light-3);
  border-color: transparent;
}
.ro-form .ro-readonly {
  /* Read-only */
  background-color: var(--gray-light-2);
}
.ro-form .ro-readonly:focus,
.ro-form .ro-readonly.ro-plain-text:focus {
  /* Focusing */
  border-color: var(--gray-light-2);
  padding: var(--form-input-default-padding);
}
.ro-form .ro-readonly:focus ~ .ro-form__label,
.ro-form .ro-readonly.ro-plain-text:focus ~ .ro-form__label {
  left: var(--form-input-left-right-padding);
}
.ro-form .ro-readonly.ro-disabled,
.ro-form .ro-readonly :disabled,
.ro-form .ro-readonly.ro-plain-text.ro-disabled,
.ro-form .ro-readonly.ro-plain-text:disabled {
  /* Read-only and disabled */
  color: var(--global-body-text-color);
}
.ro-form .ro-readonly.ro-plain-text {
  /* Read-only and plain simple text */
  background-color: transparent;
  border-color: transparent;
  padding-left: 0;
}
.ro-form .ro-readonly.ro-plain-text ~ .ro-form__label {
  left: 0;
  padding: 0;
}
.ro-form__file-uploader {
  /* Wrapper for the custom file uploader */
  display: inline-flex;
  width: auto;
  align-items: center;
}
.ro-form__file-uploader input[type="file"],
.ro-form__file-uploader .ro-form__file {
  display: none;
}
.ro-form__file-uploader .ro-form__file-name {
  /* Holds the name of the uploaded file */
  margin-left: 2rem;
}
.ro-form__color-picker {
  /* Wrapper for the custom color picker */
  display: inline-flex;
  flex-direction: column;
  width: auto;
  align-items: flex-start;
}
.ro-form__color-picker input[type="color"],
.ro-form__color-picker .ro-form__color {
  /* Actual input field */
  display: none;
}
.ro-form__color-picker .ro-form__label {
  /* Label */
  top: 0;
  position: initial;
  padding: 0;
}
.ro-form__color-picker .ro-form__color-button {
  /* Button for color picker */
  background-color: var(--global-background-color);
  position: relative;
  border: 0.4rem solid var(--form-input-default-theme);
}
.ro-form__color-picker .ro-form__color-button:hover,
.ro-form__color-picker .ro-form__color-button:focus {
  transform: translateY(0) scale(1.1);
}
.ro-disabled .ro-form__color-button,
:disabled ~ .ro-form__color-button {
  /* Disabled color picker button */
  background-color: var(--gray-light-1);
  border-color: var(--gray-light-2);
  box-shadow: none;
}
.ro-form__group--icon .ro-form__input {
  /* Input field */
  padding-right: calc(var(--form-input-left-right-padding) + 2rem + 0.6rem);
}
.ro-form__group--icon .ro-form__input:focus ~ .ro-form__icon {
  /* Changing color on focusing */
  color: var(--form-input-default-theme);
}
.ro-form__group--icon .ro-form__icon {
  /* Icon */
  font-size: 2rem;
  color: var(--gray-light-2);
  position: absolute;
  top: 50%;
  right: var(--form-input-left-right-padding);
  transform: translateY(-50%);
}
.ro-form__group--icon.ro-form__left-icon .ro-form__input {
  /* Input field for icon on the left */
  padding-right: var(--form-input-left-right-padding);
  padding-left: calc(var(--form-input-left-right-padding) + 2rem + 0.6rem);
}
.ro-form__group--icon.ro-form__left-icon .ro-form__input ~ .ro-form__label {
  /* Label for icon on the left */
  left: calc(var(--form-input-left-right-padding) + 2rem + 0.6rem);
}
.ro-form__group--icon.ro-form__left-icon .ro-form__icon {
  /* Icon on the left */
  right: auto;
  left: var(--form-input-left-right-padding);
}
.ro-form .ro-form-group-flex {
  display: flex;
  flex-wrap: wrap;
}
.ro-form .ro-form-group-flex > .ro-form__input {
  flex: 1 1 auto;
  width: 1%;
  height: auto;
}
.ro-form__addition {
  /* All element, either append or prepend */
  padding: var(--form-input-default-padding);
  display: flex;
  align-items: center;
  color: var(--global-body-text-color);
  background-color: var(--gray-light-3);
  font-size: var(--default-button-input-font-size);
  border-radius: 0.6rem;
  transition: all 0.3s 0s ease-out;
  border: 0.2rem solid var(--gray-light-2);
}
.ro-form__group--append > .ro-form__input {
  /* Input fields inside */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ro-form__group--prepend > .ro-form__input {
  /* Input fields inside */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ro-form__group--both > .ro-form__input {
  /* Input fields inside */
  border-radius: 0;
}
.ro-form__group .ro-form__prepend {
  order: -1;
}
.ro-form .ro-form__prepend {
  /* Prepend*/
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0.1rem solid var(--gray-light-2);
}
.ro-form .ro-form__append {
  /* Append */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0.1rem solid var(--gray-light-2);
}
.ro-form__group--append .ro-form__input:focus ~ .ro-form__addition,
.ro-form__group--prepend .ro-form__input:focus ~ .ro-form__addition,
.ro-form__group--both .ro-form__input:focus ~ .ro-form__addition {
  /* Focus state */
  border-color: var(--form-input-default-theme);
}
.ro-form .ro-form-input-inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.ro-form .ro-form-input-stacked {
  display: inline-flex;
  flex-direction: column;
  gap: 2rem;
}
.ro-form__radio-label .ro-form__radio-input {
  /* Input field for custom radio button */
  display: none;
}
.ro-form__radio-label .ro-form__radio-input:checked + .ro-form__radio::before {
  /* Activating the radio button when checked */
  transform: translate(-50%, -50%) scale(1);
}
.ro-form__radio-label.ro-disabled .ro-form__radio,
.ro-form__radio-label :disabled + .ro-form__radio {
  /* Disabled on the custom radio button */
  border-color: var(--gray-light-1);
}
.ro-form__radio-label.ro-disabled .ro-form__radio::before,
.ro-form__radio-label :disabled + .ro-form__radio::before {
  /* Disabled on the custom radio button */
  background-color: var(--gray-light-1);
}
.ro-form__checkbox-label .ro-form__checkbox-input {
  /* Input field for custom checkbox */
  display: none;
}
.ro-form__checkbox-label .ro-form__checkbox {
  border-radius: 0.6rem;
}
.ro-form__checkbox-label .ro-form__checkbox::before {
  /* Creating the checkmark */
  width: 70%;
  height: 50%;
  background-color: transparent;
  border-bottom: 0.2rem solid var(--form-input-default-theme);
  border-left: 0.2rem solid var(--form-input-default-theme);
  border-radius: 0;
  transform-origin: top center;
  transform: translate(-75%, -60%) rotate(-45deg) scale(0);
}
.ro-form__checkbox-label .ro-form__checkbox-input:checked + .ro-form__checkbox {
  /* Changing bg */
  background-color: var(--form-input-default-theme);
}
.ro-form__checkbox-label
  .ro-form__checkbox-input:checked
  + .ro-form__checkbox::before {
  /* Activating the checkbox when checked */
  transform: translate(-75%, -60%) rotate(-45deg) scale(1);
  border-color: var(--form-input-pre-append-color);
}
.ro-form__checkbox-label.ro-disabled .ro-form__checkbox,
.ro-form__checkbox-label :disabled + .ro-form__checkbox {
  /* Disabled on the custom checkbox */
  border-color: var(--gray-light-1);
}
.ro-form__checkbox-label.ro-disabled
  .ro-form__checkbox-input:checked
  + .ro-form__checkbox {
  /* Disabled on the custom checkbox when it's checked */
  background-color: var(--gray-light-1);
}
.ro-form__switch-label .ro-form__switch {
  /* Track */
  width: 5rem;
  height: 2rem;
  border: 0;
  background-color: var(--gray-light-2);
  border-radius: 2rem;
  transition: all 0.3s 0s ease-out;
}
.ro-form__switch-label .ro-form__switch::before {
  display: none;
}
.ro-form__switch-label .ro-form__switch::after {
  /* Sliding thumb */
  content: "";
  width: 3rem;
  height: 3rem;
  background-color: var(--form-input-switch-thumb-bg);
  border-radius: 50%;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  position: absolute;
  transition: all 0.3s 0s ease-out;
}
.ro-form__switch-label .ro-form__switch-input:checked + .ro-form__switch {
  /* Changing bg */
  background-color: var(--form-input-default-theme);
}
.ro-form__switch-label
  .ro-form__switch-input:checked
  + .ro-form__switch::after {
  /* Activating the switch when checked */
  left: calc(5rem - 3rem);
}
.ro-form__switch-label.ro-disabled
  .ro-form__switch-input:checked
  + .ro-form__switch::after,
.ro-form__switch-label.ro-disabled .ro-form__switch::after,
.ro-form__switch-label :disabled + .ro-form__switch::after {
  /* Disabled on the custom switch when it's checked or unchecked */
  background-color: var(--gray-dark-1);
}

/* ==================== Range Slider =================== */
.ro-form__custom-range {
  position: relative;
}
.ro-form__range {
  position: relative;
  width: 100%;
}
.ro-form__range--range[type="range"] {
  /* Actual range input element */
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  height: 0.6rem;
  width: 100%;
  position: relative;
  z-index: 5;
  background-color: transparent;
}
.ro-form__range--range[type="range"]::-webkit-slider-runnable-track {
  /* Track */
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-radius: 2rem;
}
.ro-form__range--range[type="range"]::-webkit-slider-thumb {
  /* Thumb to be slide */
  height: 2rem;
  width: 2rem;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--form-input-default-theme);
  cursor: pointer;
  -webkit-appearance: none;
  border: 0.2rem solid transparent;
  -webkit-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}
.ro-form__range--range[type="range"]::-webkit-slider-thumb:hover {
  background-color: var(--global-background-color);
  border-color: var(--form-input-default-theme);
}
.ro-form__range--range[type="range"]:active::-webkit-slider-thumb {
  background-color: var(--global-background-color);
  border-color: var(--form-input-default-theme);
}
.ro-form__range--range[type="range"]:focus::-webkit-slider-runnable-track {
  background: transparent;
}
.ro-form__range--range[type="range"]::-moz-range-track {
  /* Track */
  width: 100%;
  height: 0.6rem;
  cursor: pointer;
  background: transparent;
  border-radius: 2rem;
}
.ro-form__range--range[type="range"]::-moz-range-thumb {
  /* Thumb to be slide */
  height: 2rem;
  width: 2rem;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--form-input-default-theme);
  cursor: pointer;
  border: 0.2rem solid transparent;
  -moz-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}
.ro-form__range--range[type="range"]::-moz-range-thumb:hover {
  background-color: var(--global-background-color);
  border-color: var(--form-input-default-theme);
}
.ro-form__range--range[type="range"]:active::-moz-range-thumb {
  background-color: var(--global-background-color);
  border-color: var(--form-input-default-theme);
}
.ro-form__range .ro-range-fill {
  /* Wrapper for the fill */
  position: absolute;
  background-color: var(--gray-light-2);
  z-index: 1;
  height: 0.6rem;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border-radius: 2rem;
  overflow: hidden;
}
.ro-form__range .ro-range-fill .ro-fill {
  /* Show progress for the range */
  position: absolute;
  display: block;
  height: 100%;
  width: 0%;
  background-color: var(--form-input-default-theme);
}
.ro-form__range .ro-form__floating-value {
  left: 0%;
  transition: opacity 0.3s 0s ease-out;
}
.ro-form__range-values {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.6rem;
}
.ro-form__range-values .ro-value {
  font-size: 1.4rem;
  font-weight: var(--font-weight-medium);
}

/* ==================== Select box =================== */
.ro-form__select {
  position: relative;
}
.ro-form__select-header {
  /* Box to hold the selected value */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.6rem;
  cursor: pointer;
}
.ro-form__select-header .ro-form__select-value {
  /* For the placeholder and selected value */
  font-size: 1.4rem;
  font-weight: var(--font-weight-medium);
  margin-right: 2rem;
  overflow: hidden;
}
.ro-form__select-header .ro-arrow {
  border: solid var(--form-input-default-theme);
  border-width: 0 0.2rem 0.2rem 0;
  padding: 0.4rem;
  margin-top: -0.5rem;
  transform: rotate(45deg);
}
.ro-form__options {
  /* Holds the options */
  background-color: var(--global-background-color);
  border-radius: 0.6rem;
  max-height: 24rem;
  min-width: 15rem;
  width: 100%;
  max-width: 100%;
  position: absolute;
  left: 0;
  top: calc(100% + var(--spacing-sm));
  z-index: 700;
  overflow: hidden;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 0 0.55rem rgba(0, 0, 0, 0.14);
  scrollbar-width: thin;
  scrollbar-color: var(--dark-light-3) transparent;
  transition: all 0.3s 0s ease-out;
}
.ro-form__options::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.2rem transparent;
  background: transparent;
  margin: 1.1rem;
}
.ro-form__options::-webkit-scrollbar {
  height: 0.5rem;
  width: 0.5rem;
  background: transparent;
}
.ro-form__options::-webkit-scrollbar-thumb {
  border-radius: 6rem;
  width: 0.5rem;
  background-color: var(--dark-light-3);
}
.ro-form__options.ro-active {
  /* Showing */
  opacity: 1;
  visibility: visible;
}
.ro-form__options .ro-form__option {
  display: none;
}
.ro-form__option-label {
  /* Individual option */
  padding: 1.6rem var(--spacing-sm);
  display: inline-flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s 0s ease-out;
}
.ro-form__option-label.ro-active,
.ro-form__option-label:hover {
  background-color: var(--gray-light-3);
}

/* COLORS HELPER CLASSES ========================================= */
.ro-light-text {
  color: var(--gray-light-4) !important;
}

.ro-dark-text {
  color: var(--global-body-text-color) !important;
}

.ro-bg-transparent {
  background-color: transparent !important;
}

/* Text Colors */
.ro-clr-primary {
  color: var(--primary);
}

.ro-clr-secondary {
  color: var(--secondary);
}

.ro-clr-accent {
  color: var(--accent);
}

.ro-clr-success {
  color: var(--success);
}

.ro-clr-info {
  color: var(--info);
}

.ro-clr-warning {
  color: var(--warning);
}

.ro-clr-danger {
  color: var(--danger);
}

.ro-clr-gray {
  color: var(--gray);
}

.ro-clr-dark {
  color: var(--dark);
}

.ro-clr-gray-light-1 {
  color: var(--gray-light-1);
}

.ro-clr-gray-light-2 {
  color: var(--gray-light-2);
}

.ro-clr-gray-light-3 {
  color: var(--gray-light-3);
}

.ro-clr-gray-light-4 {
  color: var(--gray-light-4);
}

.ro-clr-gray-dark-1 {
  color: var(--gray-dark-1);
}

.ro-clr-gray-dark-2 {
  color: var(--gray-dark-2);
}

.ro-clr-gray-dark-3 {
  color: var(--gray-dark-3);
}

.ro-clr-gray-dark-4 {
  color: var(--gray-dark-4);
}

/* Background Colors */
.ro-bg-primary {
  background-color: var(--primary);
}

.ro-bg-secondary {
  background-color: var(--secondary);
}

.ro-bg-accent {
  background-color: var(--accent);
}

.ro-bg-success {
  background-color: var(--success);
}

.ro-bg-info {
  background-color: var(--info);
}

.ro-bg-warning {
  background-color: var(--warning);
}

.ro-bg-danger {
  background-color: var(--danger);
}

.ro-bg-gray {
  background-color: var(--gray);
}

.ro-bg-dark {
  background-color: var(--dark);
}

.ro-bg-gray-light-1 {
  background-color: var(--gray-light-1);
}

.ro-bg-gray-light-2 {
  background-color: var(--gray-light-2);
}

.ro-bg-gray-light-3 {
  background-color: var(--gray-light-3);
}

.ro-bg-gray-light-4 {
  background-color: var(--gray-light-4);
}

.ro-bg-gray-dark-1 {
  background-color: var(--gray-dark-1);
}

.ro-bg-gray-dark-2 {
  background-color: var(--gray-dark-2);
}

.ro-bg-gray-dark-3 {
  background-color: var(--gray-dark-3);
}

.ro-bg-gray-dark-4 {
  background-color: var(--gray-dark-4);
}

/* =====================================================================
                               LIBRARIES
=========================================================================*/
/* ====================== Animation ====================== */
.ro-animation {
  transition: all 300ms 0s ease-out;
}
.ro-animation[class*="ro-animate-rotate-"] {
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  perspective: 150rem;
}
.ro-animation[data-ro-transform-origin="top"] {
  /* Transform origin top */
  transform-origin: top;
}
.ro-animation[data-ro-transform-origin="top-left"] {
  /* Transform origin top-left */
  transform-origin: top left;
}
.ro-animation[data-ro-transform-origin="top-right"] {
  /* Transform origin top-right */
  transform-origin: top right;
}
.ro-animation[data-ro-transform-origin="right"] {
  /* Transform origin right */
  transform-origin: right;
}
.ro-animation[data-ro-transform-origin="bottom"] {
  /* Transform origin bottom */
  transform-origin: bottom;
}
.ro-animation[data-ro-transform-origin="bottom-left"] {
  /* Transform origin bottom-left */
  transform-origin: bottom left;
}
.ro-animation[data-ro-transform-origin="bottom-right"] {
  /* Transform origin bottom-right */
  transform-origin: bottom right;
}
.ro-animation[data-ro-transform-origin="left"] {
  /* Transform origin left */
  transform-origin: left;
}
.ro-animation.ro-animate-fade-in {
  /* Fade in */
  opacity: 0;
}
.ro-animation.ro-animate-fade-in.ro-trigger {
  opacity: 1;
}
.ro-animation.ro-animate-fade-out {
  /* Fade out */
  opacity: 1;
}
.ro-animation.ro-animate-fade-out.ro-trigger {
  opacity: 0;
}
.ro-animation.ro-animate-zoom-in {
  /* Zoom in */
  transform: scale(0);
  transform-origin: center;
}
.ro-animation.ro-animate-zoom-in.ro-trigger {
  transform: scale(1);
}
.ro-animation.ro-animate-zoom-out {
  /* Zoom out */
  transform: scale(1);
}
.ro-animation.ro-animate-zoom-out.ro-trigger {
  transform: scale(0);
}
.ro-animation.ro-animate-slide-up-in {
  /* Slide up */
  opacity: 0;
  transform: translateY(4rem);
}
.ro-animation.ro-animate-slide-up-in.ro-trigger {
  opacity: 1;
  transform: translateY(0);
}
.ro-animation.ro-animate-slide-down-in {
  /* Slide down */
  opacity: 0;
  transform: translateY(-4rem);
}
.ro-animation.ro-animate-slide-down-in.ro-trigger {
  opacity: 1;
  transform: translateY(0);
}
.ro-animation.ro-animate-slide-up-out {
  /* Slide up */
  opacity: 1;
  transform: translateY(0);
}
.ro-animation.ro-animate-slide-up-out.ro-trigger {
  opacity: 0;
  transform: translateY(-4rem);
}
.ro-animation.ro-animate-slide-down-out {
  /* Slide down */
  opacity: 1;
  transform: translateY(0);
}
.ro-animation.ro-animate-slide-down-out.ro-trigger {
  opacity: 0;
  transform: translateY(4rem);
}
.ro-animation.ro-animate-slide-in-left {
  /* Slide from the left */
  opacity: 0;
  transform: translateX(-4rem);
}
.ro-animation.ro-animate-slide-in-left.ro-trigger {
  opacity: 1;
  transform: translateX(0);
}
.ro-animation.ro-animate-slide-in-right {
  /* Slide from the right */
  opacity: 0;
  transform: translateX(4rem);
}
.ro-animation.ro-animate-slide-in-right.ro-trigger {
  opacity: 1;
  transform: translateX(0);
}
.ro-animation.ro-animate-slide-out-left {
  /* Slide out to the left */
  opacity: 1;
  transform: translateX(0);
}
.ro-animation.ro-animate-slide-out-left.ro-trigger {
  opacity: 0;
  transform: translateX(-4rem);
}
.ro-animation.ro-animate-slide-out-right {
  /* Slide out to the right */
  opacity: 1;
  transform: translateX(0);
}
.ro-animation.ro-animate-slide-out-right.ro-trigger {
  opacity: 0;
  transform: translateX(4rem);
}
.ro-animation.ro-animate-rotate-in-right {
  /* Rotate to the right */
  transform: perspective(150rem) rotateY(0);
}
.ro-animation.ro-animate-rotate-in-right.ro-trigger {
  transform: perspective(150rem) rotateY(45deg);
}
.ro-animation.ro-animate-rotate-in-left {
  /* Rotate to the left */
  transform: perspective(150rem) rotateY(0);
}
.ro-animation.ro-animate-rotate-in-left.ro-trigger {
  transform: perspective(150rem) rotateY(-45deg);
}
.ro-animation.ro-animate-rotate-in-up {
  /* Rotate up */
  transform: perspective(150rem) rotateX(0);
}
.ro-animation.ro-animate-rotate-in-up.ro-trigger {
  transform: perspective(150rem) rotateX(45deg);
}
.ro-animation.ro-animate-rotate-in-down {
  /* Rotate down */
  transform: perspective(150rem) rotateX(0);
}
.ro-animation.ro-animate-rotate-in-down.ro-trigger {
  transform: perspective(150rem) rotateX(-45deg);
}
.ro-animation.ro-animate-rotate-out-right {
  /* Rotate out to the right */
  transform: perspective(150rem) rotateY(45deg);
}
.ro-animation.ro-animate-rotate-out-right.ro-trigger {
  transform: perspective(150rem) rotateY(0);
}
.ro-animation.ro-animate-rotate-out-left {
  /* Rotate out to the left */
  transform: perspective(150rem) rotateY(-45deg);
}
.ro-animation.ro-animate-rotate-out-left.ro-trigger {
  transform: perspective(150rem) rotateY(0);
}
.ro-animation.ro-animate-rotate-out-up {
  /* Rotate out up */
  transform: perspective(150rem) rotateX(45deg);
}
.ro-animation.ro-animate-rotate-out-up.ro-trigger {
  transform: perspective(150rem) rotateX(0);
}
.ro-animation.ro-animate-rotate-out-down {
  /* Rotate out down */
  transform: perspective(150rem) rotateX(-45deg);
}
.ro-animation.ro-animate-rotate-out-down.ro-trigger {
  transform: perspective(150rem) rotateX(0);
}

.easeInOutSine {
  transition-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.easeInOutQuad {
  transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96);
  animation-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

.easeInOutCubic {
  transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
  animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
}

.easeInOutQuart {
  transition-timing-function: cubic-bezier(0.77, 0, 0.18, 1);
  animation-timing-function: cubic-bezier(0.77, 0, 0.18, 1);
}

.easeInOutCir {
  transition-timing-function: cubic-bezier(0.79, 0.14, 0.15, 0.86);
  animation-timing-function: cubic-bezier(0.79, 0.14, 0.15, 0.86);
}

.easeInOutQuint {
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}

.easeInOutExpo {
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
  animation-timing-function: cubic-bezier(1, 0, 0, 1);
}

.easeInOutBack {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.easeInSine {
  transition-timing-function: cubic-bezier(0.47, 0, 0.75, 0.72);
  animation-timing-function: cubic-bezier(0.47, 0, 0.75, 0.72);
}

.easeInQuad {
  transition-timing-function: cubic-bezier(0.55, 0.08, 0.68, 0.53);
  animation-timing-function: cubic-bezier(0.55, 0.08, 0.68, 0.53);
}

.easeInCubic {
  transition-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

.easeInQuart {
  transition-timing-function: cubic-bezier(0.9, 0.03, 0.69, 0.22);
  animation-timing-function: cubic-bezier(0.9, 0.03, 0.69, 0.22);
}

.easeInCir {
  transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
}

.easeInQuint {
  transition-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
  animation-timing-function: cubic-bezier(0.76, 0.05, 0.86, 0.06);
}

.easeInExpo {
  transition-timing-function: cubic-bezier(0.95, 0.05, 0.8, 0.04);
  animation-timing-function: cubic-bezier(0.95, 0.05, 0.8, 0.04);
}

.easeInBack {
  transition-timing-function: cubic-bezier(0.6, -0.28, 0.74, 0.05);
  animation-timing-function: cubic-bezier(0.6, -0.28, 0.74, 0.05);
}

.easeOutSine {
  transition-timing-function: cubic-bezier(0.39, 0.57, 0.56, 1);
  animation-timing-function: cubic-bezier(0.39, 0.57, 0.56, 1);
}

.easeOutQuad {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.easeOutCubic {
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.easeOutQuart {
  transition-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
  animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1);
}

.easeOutCir {
  transition-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}

.easeOutQuint {
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.easeOutExpo {
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.easeOutBack {
  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.27);
  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.27);
}

/* ====================== Parallax ====================== */
.ro-cursor {
  width: 0.4rem;
  height: 100%;
  background-color: var(--dark);
  margin-left: 0.2rem;
  border-radius: 2rem;
  animation: bliking 1s infinite ease-in-out;
}
.ro-cursor.is-typing {
  animation: none;
}

@keyframes bliking {
  0% {
    background-color: var(--dark);
  }
  49% {
    background-color: var(--dark);
  }
  50% {
    background-color: transparent;
  }
  99% {
    background-color: transparent;
  }
  100% {
    background-color: var(--dark);
  }
}
/* ============================ Iglesia VISION de lo ALTO BASE STYLING ============================= */
html {
  font-size: var(--base-root-font-size);
}
@media screen and (min-width: 34.5625em) {
  html {
    font-size: var(--base-root-font-size-sm);
  }
}
@media screen and (min-width: 56.3125em) {
  html {
    font-size: var(--base-root-font-size-md);
  }
}
@media screen and (min-width: 80.0625em) {
  html {
    font-size: var(--base-root-font-size-lg);
  }
}
@media screen and (min-width: 90em) {
  html {
    font-size: var(--base-root-font-size-xl);
  }
}

body {
  font-family: "Roboto Condensed", sans-serif;
}

/*
=================================================
                  Iglesia VISION de lo ALTO TYPOGRAPHY
=================================================
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto Condensed", sans-serif;
  color: inherit;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

h1 {
  font-size: 4rem;
}

h2 {
  font-size: 3rem;
}

h3 {
  font-size: 2.5rem;
}

.fancy-font {
  font-family: "Lobster Two", cursive;
}

.section-heading .fancy-font {
  position: relative;
}
.section-heading .fancy-font::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.4rem;
  background-color: var(--secondary);
  bottom: -0.8rem;
  left: 0;
}

/* ============================ BANNER STYLING ============================= */
.banner {
 
}

/* ======================== FOR SINGLE POSTS SUCH AS BLOG POST, SERMONS, EVENTS, AND MINISTRIES =========================== */
.single {
  --card-default-max-height: 40rem;
  margin-top: -10rem;
}
.single .download i,
.single .share i {
  transition: all 0.3s 0s ease-out;
}
.single .download i:hover,
.single .share i:hover {
  transform: translateY(-0.4rem);
}

/* ============================ TIME AND LOCATION STYLING ============================= */
.time-location iframe {
  height: 35rem;
}
@media screen and (min-width: 34.5625em) {
  .time-location iframe {
    border-radius: 2rem 0 0 2rem;
  }
}
.time-location .time {
  position: relative;
  margin-top: -10rem;
  background-color: var(--global-background-color);
}
@media screen and (min-width: 34.5625em) {
  .time-location .time {
    border-radius: 0 2rem 2rem 0;
  }
}
.time-location .footer-bg {
  background-color: var(--footer-bg-color);
}
.time-location.time-location-2 iframe {
  /* Homepage 2 */
  height: 100%;
  border-radius: 0;
}
.time-location.time-location-2 .time {
  /* Homepage 2 */
  margin-top: 0;
  border-radius: 0;
}

.push-time-location-up {
  /* Homepage 2 */
  margin-top: -20rem;
}

/* ============================ FOOTER STYLING ============================= */
.footer {
  background-color: var(--footer-bg-color);
}
.footer__top .logo-wrapper {
  width: 6rem;
  height: 6rem;
}
.footer__top img {
  width: 100%;
}

/* ================================= LIGHTBOX PLUGIN ================================ */
body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
  outline: none;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 3px;
  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;
  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../../images/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url("data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
}

.lb-prev,
.lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../../images/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../../images/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
/*
 *  Owl Carousel - Core
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1;
}

.owl-carousel .owl-stage {
  position: relative;
  touch-action: manipulation;
  -moz-backface-visibility: hidden;
  /* fix firefox animation glitch */
}

.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  /* fix for flashing background */
  -webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
}

.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.owl-carousel .owl-item img {
  display: block;
  width: 100%;
}

.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
  display: none;
}

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.owl-carousel button.owl-dot {
  background: none;
  color: inherit;
  border: none;
  padding: 0 !important;
  font: inherit;
}

.owl-carousel.owl-loaded {
  display: block;
}

.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}

.owl-carousel.owl-hidden {
  opacity: 0;
}

.owl-carousel.owl-refresh .owl-item {
  visibility: hidden;
}

.owl-carousel.owl-drag .owl-item {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.owl-carousel.owl-grab {
  cursor: move;
  cursor: grab;
}

.owl-carousel.owl-rtl {
  direction: rtl;
}

.owl-carousel.owl-rtl .owl-item {
  float: right;
}

/* No Js */
.no-js .owl-carousel {
  display: block;
}

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both;
}

.owl-carousel .owl-animated-in {
  z-index: 0;
}

.owl-carousel .owl-animated-out {
  z-index: 1;
}

.owl-carousel .fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 500ms ease-in-out;
}

/*
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item {
  /**
  	This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
  	calculation of the height of the owl-item that breaks page layouts
   */
}

.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 400ms ease;
}

.owl-carousel .owl-item .owl-lazy[src^=""],
.owl-carousel .owl-item .owl-lazy:not([src]) {
  max-height: 0;
}

.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d;
}

/*
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000;
}

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 100ms ease;
}

.owl-carousel .owl-video-play-icon:hover {
  transform: scale(1.3, 1.3);
}

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none;
}

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease;
}

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
}

/* ============================ CARD STYLING ============================= */
.ro-card__header--image {
  height: var(--card-default-max-height);
  max-height: var(--card-default-max-height);
}
.ro-card__header--image::before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgba(37, 36, 34, 0.4);
  z-index: 1;
}

/* ============================ CAROUSEL STYLING ============================= */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 5rem;
  height: 5rem;
  font-size: 3rem;
  background-color: var(--accent);
  color: var(--global-background-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#event-carousel {
  position: relative;
}
#event-carousel .owl-nav .owl-prev {
  left: calc(-1 * var(--spacing-sm));
}
#event-carousel .owl-nav .owl-next {
  right: calc(-1 * var(--spacing-sm));
}

#our-testimonials .ro-carousel__nav--dots {
  left: var(--spacing-sm);
  transform: translateX(0);
}

#hero3Carousel .hero-3-arrow {
  position: absolute;
  bottom: var(--spacing-lg);
  z-index: 15;
  color: var(--global-background-color);
}
@media screen and (min-width: 56.3125em) {
  #hero3Carousel .hero-3-arrow {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
  }
}
#hero3Carousel .hero-3-arrow[data-arrow-direction="left"] {
  left: var(--spacing-sm);
}
#hero3Carousel .hero-3-arrow[data-arrow-direction="right"] {
  right: var(--spacing-sm);
}

/* ============================ COMMENTS STYLING ============================= */
.comments__sorted .in-reply {
  /* The reply icon */
  transform: rotate(90deg);
}
.comments .report {
  /* Report user or comment button */
  top: var(--spacing-sm);
  right: var(--spacing-sm);
}
.comments .report i {
  transition: all 0.3s 0s ease-out;
}
.comments .report .ro-badge:hover i,
.comments .report .ro-badge:focus i {
  transform: rotate(90deg);
}

/* ============================ FORMS STYLING ============================= */
#donate-modal .ro-form__radio-label {
  padding: 1rem 1.5rem;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 0.1rem solid var(--accent);
  transition: all 0.3s 0s ease-out;
}

/* ============================ GLOBAL NAVBAR STYLING ============================= */
.ro-header {
  transition: all 0.3s 0s ease-out;
}
.ro-header .top-navigation {
  /* Top navbar on home #3 */
  --navbar-color-link: var(--global-background-color);
  color: var(--navbar-color-link);
}
.ro-header.change-color .top-navigation {
  /* Top navbar on home #3 */
  --navbar-color-link: var(--global-body-text-color);
}
.ro-header .ro-header__list > .ro-header__link:focus,
.ro-header .ro-header__list.ro-active > .ro-header__link {
  font-weight: var(--font-weight-bold);
}
.ro-header__brand .ro-header__logo {
  /* 10rem */
  width: var(--logo-default-width);
}
@media screen and (min-width: 34.5625em) {
  .ro-header__brand .ro-header__logo {
    width: var(--logo-default-width-sm);
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-header__brand .ro-header__logo {
    width: var(--logo-default-width-md);
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-header__brand .ro-header__logo {
    width: var(--logo-default-width-lg);
  }
}
@media screen and (min-width: 90em) {
  .ro-header__brand .ro-header__logo {
    width: var(--logo-default-width-xl);
  }
}
.ro-header .ro-header__mobile--toggler {
  /* Mobile menu icon */
  background-color: var(--button-circle-bg-color);
  border-radius: 0.6rem;
}
.ro-header .ro-header__mobile--toggler:hover,
.ro-header .ro-header__mobile--toggler:focus {
  transform: none;
}
.ro-header .ro-header__mobile--toggler:hover i,
.ro-header .ro-header__mobile--toggler:focus i {
  transform: translate(-50%, -50%) rotate(90deg);
}
.ro-header .ro-header__mobile--toggler i {
  color: var(--global-background-color);
}
@media screen and (min-width: 34.5625em) {
  .ro-header.ro-header-expand-sm {
    /* Changing the nav items (anchor elements) color based on the whether the navbar is expanded or not */
    --navbar-color-link: var(--global-background-color);
  }
  .ro-header.ro-header-expand-sm .ro-header__list .ro-header__link {
    padding: 1.2rem 1rem;
  }
  .ro-header.ro-header-expand-sm.change-color {
    --navbar-color-link: var(--global-body-text-color);
  }
  .ro-header.ro-header-expand-sm.page-404 {
    /* 404 page */
    --navbar-color-link: var(--global-body-text-color);
    color: var(--navbar-color-link);
  }
}
@media screen and (min-width: 56.3125em) {
  .ro-header.ro-header-expand-md {
    /* Changing the nav items (anchor elements) color based on the whether the navbar is expanded or not */
    --navbar-color-link: var(--global-background-color);
  }
  .ro-header.ro-header-expand-md .ro-header__list .ro-header__link {
    padding: 1.2rem 1rem;
  }
  .ro-header.ro-header-expand-md.change-color {
    --navbar-color-link: var(--global-body-text-color);
  }
  .ro-header.ro-header-expand-md.page-404 {
    /* 404 page */
    --navbar-color-link: var(--global-body-text-color);
    color: var(--navbar-color-link);
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-header.ro-header-expand-lg {
    /* Changing the nav items (anchor elements) color based on the whether the navbar is expanded or not */
    --navbar-color-link: var(--global-background-color);
  }
  .ro-header.ro-header-expand-lg .ro-header__list .ro-header__link {
    padding: 1.2rem 1rem;
  }
  .ro-header.ro-header-expand-lg.change-color {
    --navbar-color-link: var(--global-body-text-color);
  }
  .ro-header.ro-header-expand-lg.page-404 {
    /* 404 page */
    --navbar-color-link: var(--global-body-text-color);
    color: var(--navbar-color-link);
  }
}
@media screen and (min-width: 90em) {
  .ro-header.ro-header-expand-xl {
    /* Changing the nav items (anchor elements) color based on the whether the navbar is expanded or not */
    --navbar-color-link: var(--global-background-color);
  }
  .ro-header.ro-header-expand-xl .ro-header__list .ro-header__link {
    padding: 1.2rem 1rem;
  }
  .ro-header.ro-header-expand-xl.change-color {
    --navbar-color-link: var(--global-body-text-color);
  }
  .ro-header.ro-header-expand-xl.page-404 {
    /* 404 page */
    --navbar-color-link: var(--global-body-text-color);
    color: var(--navbar-color-link);
  }
}

/* ============================ SCROLL INDICATOR STYLING ============================= */
.ro-scroll-indicator {
  top: var(--navbar-height-default);
}
@media screen and (min-width: 56.3125em) {
  .ro-scroll-indicator {
    top: calc(var(--navbar-height-default) + 0.4rem);
  }
}
@media screen and (min-width: 80.0625em) {
  .ro-scroll-indicator {
    top: var(--navbar-height-default);
  }
}

/* ============================ SCROLL TO TOP STYLING ============================= */
.scroll-to-top {
  bottom: 20%;
  right: var(--spacing-sm);
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: all 0.3s 0s ease-out;
}
.scroll-to-top:hover {
  transform: translateY(-1rem);
}
.scroll-to-top.active {
  opacity: 1;
  visibility: visible;
}

/* ================================= ALL HERO SECTION (HOMEPAGE 1, 2, & 3) ================================ */
.hero {
  height: var(--default-hero-height);
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media screen and (min-width: 34.5625em) {
  .hero {
    height: var(--default-hero-height-sm);
  }
}
@media screen and (min-width: 56.3125em) {
  .hero {
    height: var(--default-hero-height-md);
  }
}
@media screen and (min-width: 80.0625em) {
  .hero {
    height: var(--default-hero-height-lg);
  }
}
@media screen and (min-width: 90em) {
  .hero {
    height: var(--default-hero-height-xl);
  }
}
.hero__content .hero__intro {
  font-family: "Lobster Two", cursive;
}
.hero .slide {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: var(--default-hero-height);
}
@media screen and (min-width: 34.5625em) {
  .hero .slide {
    height: var(--default-hero-height-sm);
  }
}
@media screen and (min-width: 56.3125em) {
  .hero .slide {
    height: var(--default-hero-height-md);
  }
}
@media screen and (min-width: 80.0625em) {
  .hero .slide {
    height: var(--default-hero-height-lg);
  }
}
@media screen and (min-width: 90em) {
  .hero .slide {
    height: var(--default-hero-height-xl);
  }
}

.hero-2 {
  background-image: linear-gradient(
      to right,
      rgba(37, 36, 34, 0.4),
      rgba(37, 36, 34, 0.4)
    ),
    url("../../images/hero-3.jpg");
  display: flex;
  flex-direction: column;
}

.hero-3 .slide {
  padding-top: 10rem;
}
@media screen and (min-width: 80.0625em) {
  .hero-3 .slide {
    padding-top: 50rem;
  }
}

/* First homepage slider */
#heroCarousel #first-slide {
  background-image: linear-gradient(
      to right,
      rgba(37, 36, 34, 0.4),
      rgba(37, 36, 34, 0.4)
    ),
    url("../../images/hero-1.jpg");
}
#heroCarousel #second-slide {
  background-image: linear-gradient(
      to right,
      rgba(37, 36, 34, 0.4),
      rgba(37, 36, 34, 0.4)
    ),
    url("../../images/hero-2.jpg");
}

/* Third homepage slider */
#hero3Carousel #first-slide {
  background-image: linear-gradient(
      to right,
      rgba(37, 36, 34, 0.4),
      rgba(37, 36, 34, 0.4)
    ),
    url("../../images/hero-4.jpg");
}
#hero3Carousel #second-slide {
  background-image: linear-gradient(
      to right,
      rgba(37, 36, 34, 0.6),
      rgba(37, 36, 34, 0.6)
    ),
    url("../../images/hero-5.jpg");
}

/* ==================================== LAST WEEK SERMON SECTION (HOMEPAGE 1) ============================== */
.last-sermon .sermon__download {
  width: calc(100% - (var(--spacing-sm) * 2));
  bottom: var(--spacing-sm);
  left: var(--spacing-sm);
  background-color: var(--global-background-color);
  z-index: 2;
}
.last-sermon .sermon__download a:hover {
  transform: translateY(-0.4rem);
}

/* ==================================== LAST WEEK SERMON SECTION (HOMEPAGE 3) ============================== */
.last-sermon--3 .ro-card,
.last-sermon--3 .ro-card__header {
  border-radius: 0 0 2rem 2rem;
}
@media screen and (min-width: 34.5625em) {
  .last-sermon--3 .ro-card,
  .last-sermon--3 .ro-card__header {
    border-radius: 0 2rem 2rem 0;
  }
}
@media screen and (min-width: 34.5625em) {
  .last-sermon--3 {
    --card-default-max-height: 60rem;
  }
}
.last-sermon--3 .sermon-download {
  background-color: var(--global-background-color);
}
.last-sermon--3 .sermon-download a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.last-sermon--3 .sermon-download a:hover,
.last-sermon--3 .sermon-download a:focus {
  transform: translateY(-0.5rem);
}

/* ================================== OUR MINSTRIES SECTION ON THE HOMEPAGE ============================= */
.our-ministries .ro-card.custom-height .ro-card__header--image {
  /* original height / 1.5 = 50rem / 1.5 */
  height: calc(var(--card-default-max-height) / 1.5);
  max-height: calc(var(--card-default-max-height) / 1.5);
}
@media screen and (min-width: 56.3125em) {
  .our-ministries .ro-card.custom-height .ro-card__header--image {
    --card-default-max-height: 60rem;
    /* (original height - bottom margin) / number of card = (50rem - 2rem) / 2 */
    height: calc((var(--card-default-max-height) - var(--spacing-sm)) / 2);
    max-height: calc((var(--card-default-max-height) - var(--spacing-sm)) / 2);
  }
}
@media screen and (min-width: 56.3125em) {
  .our-ministries .ro-card .ro-card__header--image {
    /* Image card on the left */
    --card-default-max-height: 60rem;
  }
}

/* ================================== OUR GALLERY SECTION (HOMEPAGE 1) ================================ */
.our-gallery.gallery--equal-grid .gallery__card .ro-card__header--image {
  height: var(--card-gallery-max-height);
  max-height: var(--card-gallery-max-height);
}
.our-gallery.gallery--equal-grid
  .gallery__card
  .ro-card__header--image::before {
  display: none;
}
.our-gallery.gallery--equal-grid .overlay {
  top: 0;
  left: 0;
  opacity: 0;
  background-color: rgba(37, 36, 34, 0.4);
  transition: opacity 0.3s 0s ease-out;
}
.our-gallery.gallery--equal-grid .overlay .ro-badge {
  width: 5rem;
  height: 5rem;
}
.our-gallery.gallery--equal-grid .ro-card:hover .overlay {
  opacity: 1;
}

/* =================================== OUR TESTIMONIAL ================================ */
.our-testimonial {
  background-image: linear-gradient(
      rgba(221, 115, 115, 0.8),
      rgba(221, 115, 115, 0.8)
    ),
    url("../../images/background-1.jpg");
  background-size: cover;
  background-position: left;
  background-repeat: no-repeat;
  overflow: hidden;
}
.our-testimonial .quote-decoration {
  right: var(--spacing-sm);
  top: var(--spacing-sm);
  z-index: -1;
  opacity: 0.2;
}
.our-testimonial .quote-decoration i {
  transform: translateY(-4rem);
  font-size: 12rem;
}

/* ======================================== OUR TESTIMONIAL (HOMEPAGE #2) ================================ */
.our-testimonials {
  background-image: linear-gradient(
      rgba(37, 36, 34, 0.4),
      rgba(37, 36, 34, 0.4)
    ),
    url("../../images/background-3.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ======================================== OUR ENVIRONMENT (HOMEPAGE 2) ====================================== */
.our-environment {
  position: relative;
  background-image: linear-gradient(
      to right,
      rgba(81, 163, 163, 0.65),
      rgba(81, 163, 163, 0.65)
    ),
    url("../../images/background-2.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.our-environment .push-down {
  margin-bottom: -15rem;
}
.our-environment__icon {
  border-color: var(--accent-light-4);
}

/* ================================= LATEST SERMONS SECTION (HOMEPAGE 2) ============================ */
.latest-sermons .ro-card.sermon.sermon-featured {
  --card-default-max-height: 65rem;
  border-radius: 0 0 2rem 2rem;
}
@media screen and (min-width: 34.5625em) {
  .latest-sermons .ro-card.sermon.sermon-featured {
    --card-default-max-height: 60rem;
  }
}
@media screen and (min-width: 56.3125em) {
  .latest-sermons .ro-card.sermon.sermon-featured {
    --card-default-max-height: 85rem;
    border-radius: 0 2rem 2rem 0;
  }
}
.latest-sermons .ro-card.custom-height {
  --card-default-max-height: 50rem;
}
@media screen and (min-width: 34.5625em) {
  .latest-sermons .ro-card.custom-height {
    --card-default-max-height: 60rem;
  }
}
@media screen and (min-width: 56.3125em) {
  .latest-sermons .ro-card.custom-height {
    --card-default-max-height: 65rem;
  }
}
.latest-sermons .ro-card.custom-height .ro-card__header--image {
  /* original height (50rem) / 1.5 */
  height: calc(var(--card-default-max-height) / 1.5);
  max-height: calc(var(--card-default-max-height) / 1.5);
}
@media screen and (min-width: 34.5625em) {
  .latest-sermons .ro-card.custom-height .ro-card__header--image {
    /* (original height (60rem) - bottom margin (2rem)) / number of card */
    height: calc((var(--card-default-max-height) - var(--spacing-sm)) / 2);
    max-height: calc((var(--card-default-max-height) - var(--spacing-sm)) / 2);
  }
}
@media screen and (min-width: 34.5625em) {
  .latest-sermons .ro-container [class*="ro-flex-"]:nth-child(1) .ro-card {
    /* Animation */
    transition-delay: calc(0.35s * 1);
  }
  .latest-sermons .ro-container [class*="ro-flex-"]:nth-child(2) .ro-card {
    /* Animation */
    transition-delay: calc(0.35s * 2);
  }
  .latest-sermons .ro-container [class*="ro-flex-"]:nth-child(3) .ro-card {
    /* Animation */
    transition-delay: calc(0.35s * 3);
  }
  .latest-sermons .ro-container [class*="ro-flex-"]:nth-child(4) .ro-card {
    /* Animation */
    transition-delay: calc(0.35s * 4);
  }
  .latest-sermons .ro-container [class*="ro-flex-"]:nth-child(1),
  .latest-sermons .ro-container [class*="ro-flex-"]:nth-child(3) {
    /* Some spacing between the smaller sermon's cards */
    padding-right: var(--spacing-sm);
  }
}

/* ============================ WORSHIP SECTION (HOMEPAGE 3) ============================== */
.worship {
  background-image: url("../../images/background-4.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.worship__box {
  border-radius: 2rem;
}
@media screen and (min-width: 34.5625em) {
  .worship__box {
    border-radius: 0 2rem 2rem 0;
  }
}

/* ================================= FEATURED MINISTRY SECTION (HOMEPAGE 3) ================================ */
.featured-ministry .ro-card,
.featured-ministry .ro-card__header {
  border-radius: 0 0 2rem 2rem;
}
@media screen and (min-width: 34.5625em) {
  .featured-ministry .ro-card,
  .featured-ministry .ro-card__header {
    border-radius: 0 2rem 2rem 0;
  }
}
@media screen and (min-width: 34.5625em) {
  .featured-ministry {
    --card-default-max-height: 60rem;
  }
}

/* ============================ OUR MISSION AND VISON (ABOUT PAGE) STYLING ============================= */
@media screen and (min-width: 34.5625em) {
  .our-mission-vision .vision {
    border-radius: 2rem 0 0 2rem;
  }
}
.our-mission-vision .mission .fancy-font::before {
  background-color: var(--primary);
}
@media screen and (min-width: 34.5625em) {
  .our-mission-vision .mission {
    border-radius: 0 2rem 2rem 0;
  }
  .our-mission-vision .mission .fancy-font::before {
    background-color: var(--secondary);
  }
}

/* ============================ OUR BELIEF (ABOUT PAGE) STYLING ============================= */
.our-belief__title {
  position: relative;
  display: inline-block;
}
.our-belief__title::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 0.4rem;
  background-color: var(--secondary);
  bottom: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
}

/* ============================ OUR STATS (ABOUT PAGE) STYLING ============================= */
.our-stats {
  background-image: linear-gradient(
      to right,
      rgba(37, 36, 34, 0.6),
      rgba(37, 36, 34, 0.6)
    ),
    url("../../images/background-6.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.our-stats__title {
  position: relative;
  display: inline-block;
}
.our-stats__title::before {
  content: "";
  position: absolute;
  width: 50%;
  height: 0.4rem;
  background-color: var(--secondary);
  bottom: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
}

/* ============================ ALL EVENTS (EVENT PAGE) STYLING ============================= */
.event__content {
  bottom: var(--spacing-sm);
  left: var(--spacing-sm);
  width: calc(100% - (var(--spacing-sm) * 2));
}

/* ======================= ALL SERMONS (SERMONS PAGE) ============================ */
@media screen and (min-width: 34.5625em) {
  .all-sermons {
    --card-default-max-height: 65rem;
  }
}
@media screen and (min-width: 56.3125em) {
  .all-sermons {
    --card-default-max-height: 60rem;
  }
}
@media screen and (min-width: 80.0625em) {
  .all-sermons {
    --card-default-max-height: 55rem;
  }
}

/* ============================= SERMONS CARD OVERALL STYLING ============================ */
.sermon__content {
  bottom: var(--spacing-sm);
  left: var(--spacing-sm);
  width: calc(100% - (var(--spacing-sm) * 2));
}
.sermon__download i {
  transition: all 0.3s 0s ease-out;
}
.sermon__download i:hover {
  transform: translateY(-0.4rem);
}

/* ================================= ALL MINISTRY MINISTRY ================================ */
.ministry .ministry__details {
  width: calc(100% - (var(--spacing-sm) * 2));
  bottom: var(--spacing-sm);
  left: var(--spacing-sm);
  z-index: 2;
}

/* ============================ ALL BLOG POST STYLING ============================= */
.post .ro-card__header--image {
  height: 34rem;
  max-height: 34rem;
}
.post__category {
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  z-index: 1;
}
.post__details {
  width: calc(100% - (var(--spacing-sm) * 2));
  bottom: var(--spacing-sm);
  left: var(--spacing-sm);
  z-index: 1;
}

/* ============================ SHOP (PRODUCT PAGE) STYLING ============================= */
.product {
  /* Product card */
  --card-default-max-height: 34rem;
}
.product__sale {
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  z-index: 1;
}

/* ============================ PAGE LOADER STYLING ============================= */
.page-loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: var(--global-background-color);
  left: 0;
  top: 0;
  transform: translateX(0);
  display: flex;
  transition: all 0.3s 0s ease-out;
}
.page-loader .loader {
  width: 50%;
  animation: loading 0.5s cubic-bezier(0, 1.21, 0.7, 1.1) infinite forwards;
}
@media screen and (min-width: 80.0625em) {
  .page-loader .loader {
    width: 20%;
  }
}
@media screen and (min-width: 90em) {
  .page-loader .loader {
    width: 10%;
  }
}
.page-loader.slide-off {
  transform: translateX(-100%);
}
.page-loader.is-loading-finish {
  animation: loading-out 1s ease-in-out forwards;
}

@keyframes loading {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.1);
  }
  30% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.05);
  }
  57% {
    transform: scale(1);
  }
  64% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes loading-out {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}