@tekdi/sunbird-quml-player-web-component/styles.css

The web component package for the sunbird QuML player

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./projects/quml-player-wc/src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* You can add global styles to this file, and also import other style files */
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./node_modules/@project-sunbird/sb-styles/assets/styles.scss?ngGlobalStyle ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* css3 variable & sass variables */
:root {
  --font-stack-en: "Noto Sans", "Noto Sans Devanagari", "Noto Sans Tamil",
    "Noto Sans Bengali", "Noto Sans Malayalam", "Noto Sans Gurmukhi",
    "Noto Sans Gujarati", "Noto Sans Telugu", "Noto Sans Kannada",
    "Noto Sans Oriya", "Noto Nastaliq Urdu", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
    sans-serif;
  --font-stack-hi: "Noto Sans Devanagari", "Noto Sans", "Noto Sans Tamil",
    "Noto Sans Bengali", "Noto Sans Malayalam", "Noto Sans Gurmukhi",
    "Noto Sans Gujarati", "Noto Sans Telugu", "Noto Sans Kannada",
    "Noto Sans Oriya", "Noto Nastaliq Urdu", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
    sans-serif;
  --font-stack-ur: "Noto Sans", "Noto Nastaliq Urdu", "Noto Sans Devanagari",
    "Noto Sans Tamil", "Noto Sans Bengali", "Noto Sans Malayalam",
    "Noto Sans Gurmukhi", "Noto Sans Gujarati", "Noto Sans Telugu",
    "Noto Sans Kannada", "Noto Sans Oriya", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
    sans-serif;
  --font-default-size: 0.875rem;
  --font-size-base: var(--font-default-size);
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-base: var(--font-weight-normal);
  --line-height-value: 1.61803398875;
  --line-height-base: calc(var(--font-size-base) * var(--line-height-value));
  --h1-font-size: 2rem;
  --h2-font-size: 1.75rem;
  --h3-font-size: 1.5rem;
  --h4-font-size: 1.2rem;
  --h5-font-size: 1rem;
  --h6-font-size: var(--font-size-base);
  --font-size-lg: var(--h4-font-size);
  --font-size-md: var(--h5-font-size);
  --font-size-normal: var(--font-size-base);
  --font-size-sm: 0.75rem;
  --font-size-xs: 0.625rem;
  --p-font-size: var(--font-size-base);
  --base-font-size: 0.875rem;
  --base-block-space: 0.5rem;
  --icon-svg-xxs: 0.75rem;
  --icon-svg-xs: calc(var(--base-block-space) * 2);
  --icon-svg-sm: calc(var(--base-block-space) * 3);
  --icon-svg-md: calc(var(--base-block-space) * 4);
  --icon-svg-lg: calc(var(--base-block-space) * 5);
  --icon-svg-xl: calc(var(--base-block-space) * 6);
}

/* Fonts */
/* css3 variable & sass variables */
:root {
  --blue: #024f9d;
  --green: #008840;
  --orange: #e55a28;
  --red: #ff4558;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --yellow: #ffc107;
  --teal: #20c997;
  --cyan: #17a2b8;
  --black: #000000;
  --white: #ffffff;
  --accessibility-red: #A30010;
  --accessibility-red2: #A30010;
  --gray-hs: 0, 0%;
  --gray: hsl(var(--gray-hs), 20%);
  --gray-0: hsl(var(--gray-hs), 95%);
  --gray-100: hsl(var(--gray-hs), 80%);
  --gray-200: hsl(var(--gray-hs), 60%);
  --gray-300: hsl(var(--gray-hs), 59%);
  --gray-400: hsl(var(--gray-hs), 40%);
  --gray-800: var(--gray);
  --primary-color: #024f9d;
  --secondary-color: #008840;
  --tertiary-color: #e55a28;
  --primary-0: #f3f7fa;
  --primary-100: #edf4f9;
  --primary-200: #80a7ce;
  --primary-250: #d3e7f4;
  --primary-300: #7ab4ee;
  --primary-400: var(--primary-color);
  --primary-600: #005391;
  --primary-800: #002e50;
  --primary-color-contrast: #fff;
  --primary-color-contrast-rgb: rgb(255, 255, 255);
  --primary-color-shade: var(--primary-800);
  --primary-color-tint: var(--primary-200);
  --secondary-0: #e1ffdf;
  --secondary-100: #00c786;
  --secondary-200: #07bc81;
  --secondary-400: var(--secondary-color);
  --tertiary-0: #feedd7;
  --tertiary-100: #ffa11d;
  --tertiary-400: var(--tertiary-color);
  --red-0: #fbccd1;
  --red-100: #ff6979;
  --red-400: var(--red);
  --info-color: var(--blue);
  --success-color: var(--green);
  --warning-color: var(--orange);
  --danger-color: var(--red);
  --body-background-color: var(--primary-0);
  --default-text-color: var(--gray-800);
  --bg-body: var(--primary-0);
  --body-color: var(--gray-800);
  --alpha0: 0;
  --alpha25: 0.25;
  --alpha50: 0.5;
  --alpha75: 0.75;
  --rc-00abc7: #00abc7;
  --rc-33B6CC: #33B6CC;
  --rc-2dadc2: #2dadc2;
  --rc-0fbad6: #0fbad6;
  --rc-96C8DA: #96C8DA;
  --rc-add8e6: #add8e6;
  --rc-afd9e7: #afd9e7;
  --rc-66c7f4: #66c7f4;
  --rc-289fd9: #289fd9;
  --rc-88B7E6: #88B7E6;
  --rc-007AFF: #007AFF;
  --rc-7b86f4: #7b86f4;
  --rc-0076FE: #0076FE;
  --rc-2361ff: #2361ff;
  --rc-1B4785: #1B4785;
  --rc-196DAB: #196DAB;
  --rc-5c8db7: #5c8db7;
  --rc-91aecc: #91aecc;
  --rc-80A7CE: #80A7CE;
  --rc-2972a4: #2972a4;
  --rc-2f4272: #2f4272;
  --rc-042D55: #042D55;
  --rc-1b1c1d: #1b1c1d;
  --rc-252525: #252525;
  --rc-4a4a4a: #4a4a4a;
  --rc-565c70: #565c70;
  --rc-6D7278: #6D7278;
  --rc-424242: #424242;
  --rc-a9a9a9: #a9a9a9;
  --rc-aaaaaa: #aaaaaa;
  --rc-bbbbbb: #bbbbbb;
  --rc-979797: #979797;
  --rc-9F9F9F: #9F9F9F;
  --rc-9b9b9b: #9b9b9b;
  --rc-00BD7F: #00BD7F;
  --rc-2ca58d: #2ca58d;
  --rc-009D53: #009D53;
  --rc-bfe1cf: #bfe1cf;
  --rc-E5EDF5: #E5EDF5;
  --rc-f5f5f5: #f5f5f5;
  --rc-f9f9f9: #f9f9f9;
  --rc-fdfdfd: #fdfdfd;
  --rc-dedede: #dedede;
  --rc-F5F9FC: #F5F9FC;
  --rc-c4c4c4: #c4c4c4;
  --rc-d8d8d8: #d8d8d8;
  --rc-e9e5e5: #e9e5e5;
  --rc-dddddd: #dddddd;
  --rc-e9e8d9: #e9e8d9;
  --rc-d0d0d0: #d0d0d0;
  --rc-d4d3d3: #d4d3d3;
  --rc-FAFAFA: #FAFAFA;
  --rc-F3F8FF: #F3F8FF;
  --rc-e0e1e2: #e0e1e2;
  --rc-bdbdbd: #bdbdbd;
  --rc-cecece: #cecece;
  --rc-E0F1FD: #E0F1FD;
  --rc-C8D6EA: #C8D6EA;
  --rc-e2e3e5: #e2e3e5;
  --rc-BCBEC0: #BCBEC0;
  --rc-d4d4d5: #d4d4d5;
  --rc-d4d8da: #d4d8da;
  --rc-e0e0e0: #e0e0e0;
  --rc-c2c2c2: #c2c2c2;
  --rc-e5e5e5: #e5e5e5;
  --rc-d8dee2: #d8dee2;
  --rc-D9E4F2: #D9E4F2;
  --rc-fff6f6: #fff6f6;
  --rc-f7f7f7: #f7f7f7;
  --rc-eeeeee: #eeeeee;
  --rc-dededf: #dededf;
  --rc-E0EFFF: #E0EFFF;
  --rc-c2c2c2: #c2c2c2;
  --rc-e5e5e5: #e5e5e5;
  --rc-c3c3c3: #c3c3c3;
  --rc-F7FFF5: #F7FFF5;
  --rc-D3DED1: #D3DED1;
  --rc-EBF6E0: #EBF6E0;
  --rc-F6F6F6: #F6F6F6;
  --rc-f7ffec: #f7ffec;
  --rc-d2ddc7: #d2ddc7;
  --rc-866A6A: #866a6a;
  --rc-7c7b7b: #7c7b7b;
  --rc-DECACA: #DECACA;
  --rc-FCE6E6: #FCE6E6;
  --rc-fcf2d6: #fcf2d6;
  --rc-F5D7D7: #F5D7D7;
  --rc-ffe1e1: #ffe1e1;
  --rc-e6c8c8: #e6c8c8;
  --rc-ffb300: #ffb300;
  --rc-e68900: #e68900;
  --rc-E08A20: #E08A20;
  --rc-DD680F: #DD680F;
  --rc-f56b56: #f56b56;
  --rc-dc523d: #dc523d;
  --rc-e65c47: #e65c47;
  --rc-rgba-black: 0, 0, 0;
  --rc-rgba-white: 255, 255, 255;
  --rc-rgba-gray: 51, 51, 51;
  --rc-rgba-primary: 2, 79, 157;
  --rc-rgba-primary-300: 41, 114, 164;
  --rc-rgba-gray-300: 34, 36, 38;
  --rc-rgba-866a6a: 134, 106, 106;
  --rc-rgba-d0d0d0: 208, 208, 208;
  --rc-rgba-7b86f4: 123, 134, 244;
  --rc-rgba-C8D6EA: 200, 214, 234;
  --sbt-box-shadow-black: rgba(0, 0, 0, 0.1);
  --sbt-box-shadow-6px: 0.375rem 0.375rem 0.125rem 0 var(--sbt-box-shadow-black);
  --sbt-box-shadow-3px: 0.1875rem 0.1875rem 0.125rem 0 var(--sbt-box-shadow-black);
  --sbt-box-shadow: rgba(128, 167, 206, 1);
  --lazyload-bg: #f6f7f8;
  --grey-nuance-lighter: #eeeeee;
  --grey-nuance-darker: #dddddd;
  --fade-grey: #e8e8e8;
}

[class^=sb-icon-],
[class*=sb-icon-] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: inherit;
  text-transform: none;
  line-height: inherit;
  /* Better Font Rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sb-icon-preview:before {
  content: "\e909";
}

.sb-icon-refresh:before {
  content: "\e90c";
}

.sb-icon-reviewer:before {
  content: "\e90a";
}

.sb-icon-folder:before {
  content: "\e902";
}

.sb-icon-comment:before {
  content: "\e908";
}

.sb-icon-send:before {
  content: "\e90b";
}

.sb-icon-book:before {
  content: "\e900";
}

.sb-icon-content:before {
  content: "\e901";
}

.sb-icon-collection:before {
  content: "\e903";
}

.sb-icon-doc:before {
  content: "\e904";
}

.sb-icon-mp3:before {
  content: "\e905";
}

.sb-icon-open-book:before {
  content: "\e906";
}

.sb-icon-video:before {
  content: "\e907";
}

.sb-lock-icon {
  cursor: pointer;
}

/*[class*="sb-icon-"] {
  -webkit-mask-size: contain;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: 50% 50%;
  mask-repeat: no-repeat;
  background-color: var(--primary-color);
  width: 16px;
  height: 16px;
  display: inline-block;
  cursor: pointer;
}
*/
[class*=sb-icon-primary] {
  background-color: var(--primary-color);
}

[class*=sb-icon-secondary] {
  background-color: var(--secondary-color);
}

[class*=sb-icon-warning] {
  background-color: var(--tertiary-color);
}

[class*=sb-icon-error] {
  background-color: var(--red);
}

.info-icon {
  background-color: var(--gray-400);
  -webkit-mask-size: contain;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: 50% 50%;
  mask-repeat: no-repeat;
  width: 1rem;
  height: 1rem;
  margin-left: 0.25rem;
  display: inline-block;
  vertical-align: bottom;
}

.icon-arrow-round-down {
  transform: rotate(90deg);
}

.icon-svg {
  position: relative;
  top: 0.0625rem;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  opacity: 1;
}
.icon-svg svg.icon {
  width: 100%;
  height: inherit;
}
.icon-svg--xxs {
  width: var(--icon-svg-xxs);
  height: var(--icon-svg-xxs);
}
.icon-svg--xs {
  width: var(--icon-svg-xs);
  height: var(--icon-svg-xs);
}
.icon-svg--sm {
  width: var(--icon-svg-sm);
  height: var(--icon-svg-sm);
}
.icon-svg--md {
  width: var(--icon-svg-md);
  height: var(--icon-svg-md);
}
.icon-svg--lg {
  width: var(--icon-svg-lg);
  height: var(--icon-svg-lg);
}
.icon-svg--xl {
  width: var(--icon-svg-xl);
  height: var(--icon-svg-xl);
}
.icon-svg--white {
  fill: var(--white);
}
.icon-svg--primary {
  fill: var(--primary-color);
}
.icon-svg--secondary {
  fill: var(--secondary-color);
}
.icon-svg--tertiary {
  fill: var(--tertiary-color);
}
.icon-svg--red {
  fill: var(--red-400);
}
.icon-svg--gray {
  fill: var(--gray-800);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: inherit;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

body {
  margin: 0;
  font-family: var(--font-stack-en);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-800);
  text-align: left;
  background: #E5EDF5;
}

[tabindex="-1"]:focus {
  outline: none !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

dfn {
  font-style: italic;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: theme-color("primary");
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

a,
area,
button,
[role=button],
input:not([type=range]),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #868e96;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 0px dotted;
  outline: 0px auto transparent;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type=radio],
input[type=checkbox] {
  box-sizing: border-box;
  padding: 0;
}

input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

/* colors */
.sb-bg-color-gray-hs {
  background: var(--gray-hs) !important;
}

.sb-color-gray-hs {
  color: var(--gray-hs) !important;
}

.sb-bg-color-gray {
  background: var(--gray) !important;
}

.sb-color-gray {
  color: var(--gray) !important;
}

.sb-bg-color-gray-0 {
  background: var(--gray-0) !important;
}

.sb-color-gray-0 {
  color: var(--gray-0) !important;
}

.sb-bg-color-gray-100 {
  background: var(--gray-100) !important;
}

.sb-color-gray-100 {
  color: var(--gray-100) !important;
}

.sb-bg-color-gray-200 {
  background: var(--gray-200) !important;
}

.sb-color-gray-200 {
  color: var(--gray-200) !important;
}

.sb-bg-color-gray-300 {
  background: var(--gray-300) !important;
}

.sb-color-gray-300 {
  color: var(--gray-300) !important;
}

.sb-bg-color-gray-400 {
  background: var(--gray-400) !important;
}

.sb-color-gray-400 {
  color: var(--gray-400) !important;
}

.sb-bg-color-gray-800 {
  background: var(--gray-800) !important;
}

.sb-color-gray-800 {
  color: var(--gray-800) !important;
}

.sb-bg-color-primary {
  background: var(--primary-400) !important;
}

.sb-color-primary {
  color: var(--primary-400) !important;
}

.sb-bg-color-primary-0 {
  background: var(--primary-0) !important;
}

.sb-color-primary-0 {
  color: var(--primary-0) !important;
}

.sb-bg-color-primary-100 {
  background: var(--primary-100) !important;
}

.sb-color-primary-100 {
  color: var(--primary-100) !important;
}

.sb-bg-color-primary-200 {
  background: var(--primary-200) !important;
}

.sb-color-primary-200 {
  color: var(--primary-200) !important;
}

.sb-bg-color-primary-250 {
  background: var(--primary-250) !important;
}

.sb-color-primary-250 {
  color: var(--primary-250) !important;
}

.sb-bg-color-primary-300 {
  background: var(--primary-300) !important;
}

.sb-color-primary-300 {
  color: var(--primary-300) !important;
}

.sb-bg-color-primary-400 {
  background: var(--primary-400) !important;
}

.sb-color-primary-400 {
  color: var(--primary-400) !important;
}

.sb-bg-color-primary-600 {
  background: var(--primary-600) !important;
}

.sb-color-primary-600 {
  color: var(--primary-600) !important;
}

.sb-bg-color-primary-800 {
  background: var(--primary-800) !important;
}

.sb-color-primary-800 {
  color: var(--primary-800) !important;
}

.sb-bg-color-secondary {
  background: var(--green) !important;
}

.sb-color-secondary {
  color: var(--green) !important;
}

.sb-bg-color-secondary-0 {
  background: var(--secondary-0) !important;
}

.sb-color-secondary-0 {
  color: var(--secondary-0) !important;
}

.sb-bg-color-secondary-100 {
  background: var(--secondary-100) !important;
}

.sb-color-secondary-100 {
  color: var(--secondary-100) !important;
}

.sb-bg-color-secondary-200 {
  background: var(--secondary-200) !important;
}

.sb-color-secondary-200 {
  color: var(--secondary-200) !important;
}

.sb-bg-color-secondary-400 {
  background: var(--secondary-400) !important;
}

.sb-color-secondary-400 {
  color: var(--secondary-400) !important;
}

.sb-bg-color-tertiary {
  background: var(--orange) !important;
}

.sb-color-tertiary {
  color: var(--orange) !important;
}

.sb-bg-color-tertiary-0 {
  background: var(--tertiary-0) !important;
}

.sb-color-tertiary-0 {
  color: var(--tertiary-0) !important;
}

.sb-bg-color-tertiary-100 {
  background: var(--tertiary-100) !important;
}

.sb-color-tertiary-100 {
  color: var(--tertiary-100) !important;
}

.sb-bg-color-tertiary-400 {
  background: var(--tertiary-400) !important;
}

.sb-color-tertiary-400 {
  color: var(--tertiary-400) !important;
}

.sb-bg-color-red {
  background: var(--red) !important;
}

.sb-color-red {
  color: var(--red) !important;
}

.sb-bg-color-red-0 {
  background: var(--red-0) !important;
}

.sb-color-red-0 {
  color: var(--red-0) !important;
}

.sb-bg-color-red-100 {
  background: var(--red-100) !important;
}

.sb-color-red-100 {
  color: var(--red-100) !important;
}

.sb-bg-color-red-400 {
  background: var(--red-400) !important;
}

.sb-color-red-400 {
  color: var(--red-400) !important;
}

.sb-bg-color-info {
  background: var(--primary-400) !important;
}

.sb-color-info {
  color: var(--primary-400) !important;
}

.sb-bg-color-success {
  background: var(--secondary-200) !important;
}

.sb-color-success {
  color: var(--secondary-200) !important;
}

.sb-bg-color-warning {
  background: var(--tertiary-400) !important;
}

.sb-color-warning {
  color: var(--tertiary-400) !important;
}

.sb-bg-color-error {
  background: var(--red-400) !important;
}

.sb-color-error {
  color: var(--red-400) !important;
}

.sb-bg-color-white {
  background: var(--white) !important;
}

.sb-color-white {
  color: var(--white) !important;
}

.sb-bg-color-black {
  background: var(--black) !important;
}

.sb-color-black {
  color: var(--black) !important;
}

.sb-bg-white {
  background: var(--white);
}

.sb-bg-none {
  background: none !important;
}

.color-3, .sb-text-gray-800 {
  color: var(--gray-800);
}

.sb-bg-color-black {
  background-color: var(--black);
}

.bg-contain {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.opacity0 {
  opacity: var(--alpha0) !important;
}

.opacity10 {
  opacity: var(--alpha10) !important;
}

.opacity20 {
  opacity: var(--alpha20) !important;
}

.opacity25 {
  opacity: var(--alpha25) !important;
}

.opacity30 {
  opacity: var(--alpha30) !important;
}

.opacity40 {
  opacity: var(--alpha40) !important;
}

.opacity50 {
  opacity: var(--alpha50) !important;
}

.opacity60 {
  opacity: var(--alpha60) !important;
}

.opacity70 {
  opacity: var(--alpha70) !important;
}

.opacity75 {
  opacity: var(--alpha75) !important;
}

.opacity80 {
  opacity: var(--alpha80) !important;
}

.opacity90 {
  opacity: var(--alpha90) !important;
}

.opacity100 {
  opacity: var(--alpha100) !important;
}

/* colors end */
/* sizing styles */
.w-100 {
  width: 100%;
  max-width: 100%;
}

.w-90 {
  width: 90%;
  max-width: 90%;
}

.w-80 {
  width: 80%;
  max-width: 80%;
}

.w-75 {
  width: 75%;
  max-width: 75%;
}

.w-70 {
  width: 70%;
  max-width: 70%;
}

.w-60 {
  width: 60%;
  max-width: 60%;
}

.w-50 {
  width: 50%;
  max-width: 50%;
}

.w-40 {
  width: 40%;
  max-width: 40%;
}

.w-30 {
  width: 30%;
  max-width: 30%;
}

.w-25 {
  width: 25%;
  max-width: 25%;
}

.w-20 {
  width: 20%;
  max-width: 20%;
}

.w-15 {
  width: 15%;
  max-width: 15%;
}

.w-10 {
  width: 10%;
  max-width: 10%;
}

.w-5 {
  width: 5%;
  max-width: 5%;
}

.w-auto {
  width: auto;
  max-width: auto;
}

.h-100 {
  height: 100%;
  max-height: 100%;
}

.height-auto {
  height: auto !important;
}

.sb-mw-100 {
  max-width: 100% !important;
}

.min-height-auto {
  min-height: auto !important;
}

.min-w-auto {
  min-width: auto !important;
}

.max-w-auto {
  max-width: auto !important;
}

/* sizing styles ends */
/* rotate classes */
.rotate-90 {
  transform: rotate(-90deg);
}

.rotate90 {
  transform: rotate(90deg);
}

.rotate180 {
  transform: rotate(180deg);
}

.rotate-180 {
  transform: rotate(-180deg);
}

.rotate-45 {
  transform: rotate(-45deg);
}

.rotate45 {
  transform: rotate(45deg);
}

h1, .sb-h1 {
  font-size: var(--h1-font-size);
  line-height: calc(var(--h1-font-size) * var(--line-height-value));
  margin: 0;
  padding: 0;
}

h2, .sb-h2 {
  font-size: var(--h2-font-size);
  line-height: calc(var(--h2-font-size) * var(--line-height-value));
  margin: 0;
  padding: 0;
}

h3, .sb-h3 {
  font-size: var(--h3-font-size);
  line-height: calc(var(--h3-font-size) * var(--line-height-value));
  margin: 0;
  padding: 0;
}

h4, .sb-h4 {
  font-size: var(--h4-font-size);
  line-height: calc(var(--h4-font-size) * var(--line-height-value));
  margin: 0;
  padding: 0;
}

h5, .sb-h5 {
  font-size: var(--h5-font-size);
  line-height: calc(var(--h5-font-size) * var(--line-height-value));
  margin: 0;
  padding: 0;
}

h6, .sb-h6 {
  font-size: var(--h6-font-size);
  line-height: calc(var(--h6-font-size) * var(--line-height-value));
  margin: 0;
  padding: 0;
}

.fmedium {
  font-size: var(--font-size-md) !important;
}

.fnormal {
  font-size: var(--font-size-normal) !important;
}

.fsmall {
  font-size: var(--font-size-sm) !important;
}

.fxsmall {
  font-size: var(--font-size-xs) !important;
}

.fs-0-785 {
  font-size: 0.785rem !important;
}

.fs-0-92 {
  font-size: 0.9286rem !important;
}

.fs-1 {
  font-size: 1rem !important;
}

.fs-1-143 {
  font-size: 1.143rem !important;
}

.fs-1-16 {
  font-size: 1.16rem !important;
}

.fs-1-286 {
  font-size: 1.286rem !important;
}

.fs-1-3 {
  font-size: 1.3rem !important;
}

.fs-1-429 {
  font-size: 1.429rem !important;
}

.fs-1-5 {
  font-size: 1.5rem !important;
}

.fs-1-7 {
  font-size: 1.7rem !important;
}

.fs-2 {
  font-size: 2rem !important;
}

.fs-2-5 {
  font-size: 2.5rem !important;
}

.fs-2-57 {
  font-size: 2.571rem !important;
}

.fs-3 {
  font-size: 3rem !important;
}

.fs-3-5 {
  font-size: 3.5rem !important;
}

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

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

.text-lowercase, .text-sentencecase {
  text-transform: lowercase !important;
}

.text-inherit {
  text-transform: inherit !important;
}

.text-sentencecase::first-letter {
  text-transform: uppercase !important;
}

.font-weight-bold {
  font-weight: bold !important;
}

.font-weight-normal {
  font-weight: normal !important;
}

.break-word {
  word-break: break-word !important;
}

.break-all {
  word-break: break-all !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-text {
  cursor: text !important;
}

.va-bottom {
  vertical-align: bottom !important;
}

.va-middle {
  vertical-align: middle !important;
}

.va-top {
  vertical-align: top !important;
}

p,
.sb-para {
  font-size: var(--p-font-size);
  line-height: calc(var(--p-font-size) * var(--line-height-value));
}

.font-italic {
  font-style: italic;
}

a {
  color: var(--primary-color);
}
a:hover {
  color: var(--primary-color);
}
a:focus {
  outline: 0;
}

.white-space-nowrap {
  white-space: nowrap !important;
}

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

.text-right {
  text-align: right !important;
}
html[dir=rtl] .text-right {
  text-align: left !important;
}

.text-left {
  text-align: left !important;
}
html[dir=rtl] .text-left {
  text-align: right !important;
}

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

.lineHeight-normal {
  line-height: normal !important;
}

.sb__ellipsis {
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.sb__ellipsis--two {
  -webkit-line-clamp: 2;
}
.sb__ellipsis--three {
  -webkit-line-clamp: 3;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* typography styles ends */
/* display styles */
.d-inline-block {
  display: inline-block !important;
}

.d-block, .show {
  display: block !important;
}

.d-flex, .flex-ai-jc-center, .flex-jc-ai-center {
  display: flex !important;
}

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

.d-none, .hide {
  display: none !important;
}

@media only screen and (max-width: 1023px) {
  [class*="mobile hidden"],
  [class*="tablet only"]:not(.mobile),
  [class*="computer only"]:not(.mobile),
  [class*="large screen only"]:not(.mobile),
  [class*="widescreen only"]:not(.mobile),
  [class*="or lower hidden"] {
    display: none !important;
  }
}
@media only screen and (min-width: 1024px) {
  [class*="mobile only"]:not(.computer),
  [class*="tablet only"]:not(.computer),
  [class*="computer hidden"],
  [class*="large screen only"]:not(.computer),
  [class*="widescreen only"]:not(.computer),
  [class*="or lower hidden"]:not(.tablet):not(.mobile) {
    display: none !important;
  }
}
/* display styles ends */
/* position styles */
.relative {
  position: relative !important;
}

.absolute {
  position: absolute !important;
}

.fixed {
  position: fixed !important;
}

.right-0 {
  right: 0 !important;
}
html[dir=rtl] .right-0 {
  left: 0 !important;
}

.left-0 {
  left: 0 !important;
}
html[dir=rtl] .left-0 {
  right: 0 !important;
}

.top-50 {
  top: 50% !important;
  transform: translateY(-50%);
}

.bottom-0 {
  bottom: 0 !important;
}

.bottom-5 {
  bottom: 5px !important;
}

.sb-sticky-bottom,
.sb-sticky-top {
  position: sticky;
  z-index: 999999;
}

.sb-sticky-bottom {
  bottom: 0;
}

.sb-sticky-top {
  top: 0;
}

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

.zindex-2 {
  z-index: 2 !important;
}

.zindex-9 {
  z-index: 9 !important;
}

.zindex-99 {
  z-index: 99 !important;
}

.zindex-999 {
  z-index: 999 !important;
}

.zindex-9999 {
  z-index: 9999 !important;
}

.zindex-99999 {
  z-index: 99999 !important;
}

/* position styles ends */
/* margin styles */
/* Margin in all direction */
.m-0 {
  margin: 0rem !important;
}

/* Margin in top direction */
.mt-0 {
  margin-top: 0rem !important;
}

/* Margin in bottom direction */
.mb-0 {
  margin-bottom: 0rem !important;
}

/* Margin in top and bottom direction */
.my-0 {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

/* Margin in left and right direction */
.mx-0 {
  margin-left: 0rem !important;
  margin-right: 0rem !important;
}

/* Margin in left direction */
.ml-0 {
  margin-left: 0rem !important;
}
html[dir=rtl] .ml-0 {
  margin-right: 0rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-0 {
  margin-right: 0rem !important;
}
html[dir=rtl] .mr-0 {
  margin-left: 0rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-2 {
  margin: 0.125rem !important;
}

/* Margin in top direction */
.mt-2 {
  margin-top: 0.125rem !important;
}

/* Margin in bottom direction */
.mb-2 {
  margin-bottom: 0.125rem !important;
}

/* Margin in top and bottom direction */
.my-2 {
  margin-top: 0.125rem !important;
  margin-bottom: 0.125rem !important;
}

/* Margin in left and right direction */
.mx-2 {
  margin-left: 0.125rem !important;
  margin-right: 0.125rem !important;
}

/* Margin in left direction */
.ml-2 {
  margin-left: 0.125rem !important;
}
html[dir=rtl] .ml-2 {
  margin-right: 0.125rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-2 {
  margin-right: 0.125rem !important;
}
html[dir=rtl] .mr-2 {
  margin-left: 0.125rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-3 {
  margin: 0.1875rem !important;
}

/* Margin in top direction */
.mt-3 {
  margin-top: 0.1875rem !important;
}

/* Margin in bottom direction */
.mb-3 {
  margin-bottom: 0.1875rem !important;
}

/* Margin in top and bottom direction */
.my-3 {
  margin-top: 0.1875rem !important;
  margin-bottom: 0.1875rem !important;
}

/* Margin in left and right direction */
.mx-3 {
  margin-left: 0.1875rem !important;
  margin-right: 0.1875rem !important;
}

/* Margin in left direction */
.ml-3 {
  margin-left: 0.1875rem !important;
}
html[dir=rtl] .ml-3 {
  margin-right: 0.1875rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-3 {
  margin-right: 0.1875rem !important;
}
html[dir=rtl] .mr-3 {
  margin-left: 0.1875rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-4 {
  margin: 0.25rem !important;
}

/* Margin in top direction */
.mt-4 {
  margin-top: 0.25rem !important;
}

/* Margin in bottom direction */
.mb-4 {
  margin-bottom: 0.25rem !important;
}

/* Margin in top and bottom direction */
.my-4 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

/* Margin in left and right direction */
.mx-4 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

/* Margin in left direction */
.ml-4 {
  margin-left: 0.25rem !important;
}
html[dir=rtl] .ml-4 {
  margin-right: 0.25rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-4 {
  margin-right: 0.25rem !important;
}
html[dir=rtl] .mr-4 {
  margin-left: 0.25rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-5 {
  margin: 0.3125rem !important;
}

/* Margin in top direction */
.mt-5 {
  margin-top: 0.3125rem !important;
}

/* Margin in bottom direction */
.mb-5 {
  margin-bottom: 0.3125rem !important;
}

/* Margin in top and bottom direction */
.my-5 {
  margin-top: 0.3125rem !important;
  margin-bottom: 0.3125rem !important;
}

/* Margin in left and right direction */
.mx-5 {
  margin-left: 0.3125rem !important;
  margin-right: 0.3125rem !important;
}

/* Margin in left direction */
.ml-5 {
  margin-left: 0.3125rem !important;
}
html[dir=rtl] .ml-5 {
  margin-right: 0.3125rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-5 {
  margin-right: 0.3125rem !important;
}
html[dir=rtl] .mr-5 {
  margin-left: 0.3125rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-8 {
  margin: 0.5rem !important;
}

/* Margin in top direction */
.mt-8 {
  margin-top: 0.5rem !important;
}

/* Margin in bottom direction */
.mb-8 {
  margin-bottom: 0.5rem !important;
}

/* Margin in top and bottom direction */
.my-8 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* Margin in left and right direction */
.mx-8 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

/* Margin in left direction */
.ml-8 {
  margin-left: 0.5rem !important;
}
html[dir=rtl] .ml-8 {
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-8 {
  margin-right: 0.5rem !important;
}
html[dir=rtl] .mr-8 {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-10 {
  margin: 0.625rem !important;
}

/* Margin in top direction */
.mt-10 {
  margin-top: 0.625rem !important;
}

/* Margin in bottom direction */
.mb-10 {
  margin-bottom: 0.625rem !important;
}

/* Margin in top and bottom direction */
.my-10 {
  margin-top: 0.625rem !important;
  margin-bottom: 0.625rem !important;
}

/* Margin in left and right direction */
.mx-10 {
  margin-left: 0.625rem !important;
  margin-right: 0.625rem !important;
}

/* Margin in left direction */
.ml-10 {
  margin-left: 0.625rem !important;
}
html[dir=rtl] .ml-10 {
  margin-right: 0.625rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-10 {
  margin-right: 0.625rem !important;
}
html[dir=rtl] .mr-10 {
  margin-left: 0.625rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-12 {
  margin: 0.75rem !important;
}

/* Margin in top direction */
.mt-12 {
  margin-top: 0.75rem !important;
}

/* Margin in bottom direction */
.mb-12 {
  margin-bottom: 0.75rem !important;
}

/* Margin in top and bottom direction */
.my-12 {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

/* Margin in left and right direction */
.mx-12 {
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
}

/* Margin in left direction */
.ml-12 {
  margin-left: 0.75rem !important;
}
html[dir=rtl] .ml-12 {
  margin-right: 0.75rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-12 {
  margin-right: 0.75rem !important;
}
html[dir=rtl] .mr-12 {
  margin-left: 0.75rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-15 {
  margin: 0.9375rem !important;
}

/* Margin in top direction */
.mt-15 {
  margin-top: 0.9375rem !important;
}

/* Margin in bottom direction */
.mb-15 {
  margin-bottom: 0.9375rem !important;
}

/* Margin in top and bottom direction */
.my-15 {
  margin-top: 0.9375rem !important;
  margin-bottom: 0.9375rem !important;
}

/* Margin in left and right direction */
.mx-15 {
  margin-left: 0.9375rem !important;
  margin-right: 0.9375rem !important;
}

/* Margin in left direction */
.ml-15 {
  margin-left: 0.9375rem !important;
}
html[dir=rtl] .ml-15 {
  margin-right: 0.9375rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-15 {
  margin-right: 0.9375rem !important;
}
html[dir=rtl] .mr-15 {
  margin-left: 0.9375rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-16 {
  margin: 1rem !important;
}

/* Margin in top direction */
.mt-16 {
  margin-top: 1rem !important;
}

/* Margin in bottom direction */
.mb-16 {
  margin-bottom: 1rem !important;
}

/* Margin in top and bottom direction */
.my-16 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

/* Margin in left and right direction */
.mx-16 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

/* Margin in left direction */
.ml-16 {
  margin-left: 1rem !important;
}
html[dir=rtl] .ml-16 {
  margin-right: 1rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-16 {
  margin-right: 1rem !important;
}
html[dir=rtl] .mr-16 {
  margin-left: 1rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-20 {
  margin: 1.25rem !important;
}

/* Margin in top direction */
.mt-20 {
  margin-top: 1.25rem !important;
}

/* Margin in bottom direction */
.mb-20 {
  margin-bottom: 1.25rem !important;
}

/* Margin in top and bottom direction */
.my-20 {
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

/* Margin in left and right direction */
.mx-20 {
  margin-left: 1.25rem !important;
  margin-right: 1.25rem !important;
}

/* Margin in left direction */
.ml-20 {
  margin-left: 1.25rem !important;
}
html[dir=rtl] .ml-20 {
  margin-right: 1.25rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-20 {
  margin-right: 1.25rem !important;
}
html[dir=rtl] .mr-20 {
  margin-left: 1.25rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-24 {
  margin: 1.5rem !important;
}

/* Margin in top direction */
.mt-24 {
  margin-top: 1.5rem !important;
}

/* Margin in bottom direction */
.mb-24 {
  margin-bottom: 1.5rem !important;
}

/* Margin in top and bottom direction */
.my-24 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* Margin in left and right direction */
.mx-24 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

/* Margin in left direction */
.ml-24 {
  margin-left: 1.5rem !important;
}
html[dir=rtl] .ml-24 {
  margin-right: 1.5rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-24 {
  margin-right: 1.5rem !important;
}
html[dir=rtl] .mr-24 {
  margin-left: 1.5rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-30 {
  margin: 1.875rem !important;
}

/* Margin in top direction */
.mt-30 {
  margin-top: 1.875rem !important;
}

/* Margin in bottom direction */
.mb-30 {
  margin-bottom: 1.875rem !important;
}

/* Margin in top and bottom direction */
.my-30 {
  margin-top: 1.875rem !important;
  margin-bottom: 1.875rem !important;
}

/* Margin in left and right direction */
.mx-30 {
  margin-left: 1.875rem !important;
  margin-right: 1.875rem !important;
}

/* Margin in left direction */
.ml-30 {
  margin-left: 1.875rem !important;
}
html[dir=rtl] .ml-30 {
  margin-right: 1.875rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-30 {
  margin-right: 1.875rem !important;
}
html[dir=rtl] .mr-30 {
  margin-left: 1.875rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-32 {
  margin: 2rem !important;
}

/* Margin in top direction */
.mt-32 {
  margin-top: 2rem !important;
}

/* Margin in bottom direction */
.mb-32 {
  margin-bottom: 2rem !important;
}

/* Margin in top and bottom direction */
.my-32 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/* Margin in left and right direction */
.mx-32 {
  margin-left: 2rem !important;
  margin-right: 2rem !important;
}

/* Margin in left direction */
.ml-32 {
  margin-left: 2rem !important;
}
html[dir=rtl] .ml-32 {
  margin-right: 2rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-32 {
  margin-right: 2rem !important;
}
html[dir=rtl] .mr-32 {
  margin-left: 2rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-40 {
  margin: 2.5rem !important;
}

/* Margin in top direction */
.mt-40 {
  margin-top: 2.5rem !important;
}

/* Margin in bottom direction */
.mb-40 {
  margin-bottom: 2.5rem !important;
}

/* Margin in top and bottom direction */
.my-40 {
  margin-top: 2.5rem !important;
  margin-bottom: 2.5rem !important;
}

/* Margin in left and right direction */
.mx-40 {
  margin-left: 2.5rem !important;
  margin-right: 2.5rem !important;
}

/* Margin in left direction */
.ml-40 {
  margin-left: 2.5rem !important;
}
html[dir=rtl] .ml-40 {
  margin-right: 2.5rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-40 {
  margin-right: 2.5rem !important;
}
html[dir=rtl] .mr-40 {
  margin-left: 2.5rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-48 {
  margin: 3rem !important;
}

/* Margin in top direction */
.mt-48 {
  margin-top: 3rem !important;
}

/* Margin in bottom direction */
.mb-48 {
  margin-bottom: 3rem !important;
}

/* Margin in top and bottom direction */
.my-48 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

/* Margin in left and right direction */
.mx-48 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

/* Margin in left direction */
.ml-48 {
  margin-left: 3rem !important;
}
html[dir=rtl] .ml-48 {
  margin-right: 3rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-48 {
  margin-right: 3rem !important;
}
html[dir=rtl] .mr-48 {
  margin-left: 3rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-50 {
  margin: 3.125rem !important;
}

/* Margin in top direction */
.mt-50 {
  margin-top: 3.125rem !important;
}

/* Margin in bottom direction */
.mb-50 {
  margin-bottom: 3.125rem !important;
}

/* Margin in top and bottom direction */
.my-50 {
  margin-top: 3.125rem !important;
  margin-bottom: 3.125rem !important;
}

/* Margin in left and right direction */
.mx-50 {
  margin-left: 3.125rem !important;
  margin-right: 3.125rem !important;
}

/* Margin in left direction */
.ml-50 {
  margin-left: 3.125rem !important;
}
html[dir=rtl] .ml-50 {
  margin-right: 3.125rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-50 {
  margin-right: 3.125rem !important;
}
html[dir=rtl] .mr-50 {
  margin-left: 3.125rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-52 {
  margin: 3.25rem !important;
}

/* Margin in top direction */
.mt-52 {
  margin-top: 3.25rem !important;
}

/* Margin in bottom direction */
.mb-52 {
  margin-bottom: 3.25rem !important;
}

/* Margin in top and bottom direction */
.my-52 {
  margin-top: 3.25rem !important;
  margin-bottom: 3.25rem !important;
}

/* Margin in left and right direction */
.mx-52 {
  margin-left: 3.25rem !important;
  margin-right: 3.25rem !important;
}

/* Margin in left direction */
.ml-52 {
  margin-left: 3.25rem !important;
}
html[dir=rtl] .ml-52 {
  margin-right: 3.25rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-52 {
  margin-right: 3.25rem !important;
}
html[dir=rtl] .mr-52 {
  margin-left: 3.25rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-56 {
  margin: 3.5rem !important;
}

/* Margin in top direction */
.mt-56 {
  margin-top: 3.5rem !important;
}

/* Margin in bottom direction */
.mb-56 {
  margin-bottom: 3.5rem !important;
}

/* Margin in top and bottom direction */
.my-56 {
  margin-top: 3.5rem !important;
  margin-bottom: 3.5rem !important;
}

/* Margin in left and right direction */
.mx-56 {
  margin-left: 3.5rem !important;
  margin-right: 3.5rem !important;
}

/* Margin in left direction */
.ml-56 {
  margin-left: 3.5rem !important;
}
html[dir=rtl] .ml-56 {
  margin-right: 3.5rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-56 {
  margin-right: 3.5rem !important;
}
html[dir=rtl] .mr-56 {
  margin-left: 3.5rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-60 {
  margin: 3.75rem !important;
}

/* Margin in top direction */
.mt-60 {
  margin-top: 3.75rem !important;
}

/* Margin in bottom direction */
.mb-60 {
  margin-bottom: 3.75rem !important;
}

/* Margin in top and bottom direction */
.my-60 {
  margin-top: 3.75rem !important;
  margin-bottom: 3.75rem !important;
}

/* Margin in left and right direction */
.mx-60 {
  margin-left: 3.75rem !important;
  margin-right: 3.75rem !important;
}

/* Margin in left direction */
.ml-60 {
  margin-left: 3.75rem !important;
}
html[dir=rtl] .ml-60 {
  margin-right: 3.75rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-60 {
  margin-right: 3.75rem !important;
}
html[dir=rtl] .mr-60 {
  margin-left: 3.75rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-64 {
  margin: 4rem !important;
}

/* Margin in top direction */
.mt-64 {
  margin-top: 4rem !important;
}

/* Margin in bottom direction */
.mb-64 {
  margin-bottom: 4rem !important;
}

/* Margin in top and bottom direction */
.my-64 {
  margin-top: 4rem !important;
  margin-bottom: 4rem !important;
}

/* Margin in left and right direction */
.mx-64 {
  margin-left: 4rem !important;
  margin-right: 4rem !important;
}

/* Margin in left direction */
.ml-64 {
  margin-left: 4rem !important;
}
html[dir=rtl] .ml-64 {
  margin-right: 4rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-64 {
  margin-right: 4rem !important;
}
html[dir=rtl] .mr-64 {
  margin-left: 4rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-68 {
  margin: 4.25rem !important;
}

/* Margin in top direction */
.mt-68 {
  margin-top: 4.25rem !important;
}

/* Margin in bottom direction */
.mb-68 {
  margin-bottom: 4.25rem !important;
}

/* Margin in top and bottom direction */
.my-68 {
  margin-top: 4.25rem !important;
  margin-bottom: 4.25rem !important;
}

/* Margin in left and right direction */
.mx-68 {
  margin-left: 4.25rem !important;
  margin-right: 4.25rem !important;
}

/* Margin in left direction */
.ml-68 {
  margin-left: 4.25rem !important;
}
html[dir=rtl] .ml-68 {
  margin-right: 4.25rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-68 {
  margin-right: 4.25rem !important;
}
html[dir=rtl] .mr-68 {
  margin-left: 4.25rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-72 {
  margin: 4.5rem !important;
}

/* Margin in top direction */
.mt-72 {
  margin-top: 4.5rem !important;
}

/* Margin in bottom direction */
.mb-72 {
  margin-bottom: 4.5rem !important;
}

/* Margin in top and bottom direction */
.my-72 {
  margin-top: 4.5rem !important;
  margin-bottom: 4.5rem !important;
}

/* Margin in left and right direction */
.mx-72 {
  margin-left: 4.5rem !important;
  margin-right: 4.5rem !important;
}

/* Margin in left direction */
.ml-72 {
  margin-left: 4.5rem !important;
}
html[dir=rtl] .ml-72 {
  margin-right: 4.5rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-72 {
  margin-right: 4.5rem !important;
}
html[dir=rtl] .mr-72 {
  margin-left: 4.5rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-76 {
  margin: 4.75rem !important;
}

/* Margin in top direction */
.mt-76 {
  margin-top: 4.75rem !important;
}

/* Margin in bottom direction */
.mb-76 {
  margin-bottom: 4.75rem !important;
}

/* Margin in top and bottom direction */
.my-76 {
  margin-top: 4.75rem !important;
  margin-bottom: 4.75rem !important;
}

/* Margin in left and right direction */
.mx-76 {
  margin-left: 4.75rem !important;
  margin-right: 4.75rem !important;
}

/* Margin in left direction */
.ml-76 {
  margin-left: 4.75rem !important;
}
html[dir=rtl] .ml-76 {
  margin-right: 4.75rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-76 {
  margin-right: 4.75rem !important;
}
html[dir=rtl] .mr-76 {
  margin-left: 4.75rem !important;
  margin-right: 0 !important;
}

/* Margin in all direction */
.m-80 {
  margin: 5rem !important;
}

/* Margin in top direction */
.mt-80 {
  margin-top: 5rem !important;
}

/* Margin in bottom direction */
.mb-80 {
  margin-bottom: 5rem !important;
}

/* Margin in top and bottom direction */
.my-80 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}

/* Margin in left and right direction */
.mx-80 {
  margin-left: 5rem !important;
  margin-right: 5rem !important;
}

/* Margin in left direction */
.ml-80 {
  margin-left: 5rem !important;
}
html[dir=rtl] .ml-80 {
  margin-right: 5rem !important;
  margin-left: 0 !important;
}

/* Margin in right direction */
.mr-80 {
  margin-right: 5rem !important;
}
html[dir=rtl] .mr-80 {
  margin-left: 5rem !important;
  margin-righ