/*!******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/frontend.scss ***!
  \******************************************************************************************************************************************************************************************************************************************/
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --_size: 1.0rem;
  --_radius: 0.2em;
  --_tspeed_fast: 150ms;
  --_tspeed_slow: 400ms;
  --_ttype_squish: cubic-bezier(0.86, -0.1, 0.27, 1.15);
  --zindex-fixed-element: 6;
  --zindex-header:9;
  --zindex-overlay: 12;
  --ru-box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  --primary-color: #ff9100;
  --secondary-color: #4387f4;
  --ternary-color: #34a853;
  --quaternary-color: #eb4233;
  --pentanary-color: #fbbd04;
  --primary-color: 34, 100%, 50%;
  --secondary-color: 217, 89%, 61%;
  --ternary-color: 136, 53%, 43%;
  --quaternary-color: 5, 81%, 56%;
  --pentanary-color: 45, 97%, 50%;
  --test-color0: hsl(0, 0%, 100%);
  --test-color1: hsl(205, 25%, 91%);
  --test-color2: hsl(205, 20%, 83%);
  --test-color3: hsl(204, 11%, 45%);
  --test-color4: hsl(204, 11%, 18%);
  --test-color5: hsl(206, 82%, 63%);
  --shade0-light: 0, 0%, 100%;
  --shade1-light: 205, 25%, 91%;
  --shade2-light: 205, 20%, 83%;
  --shade3-light: 204, 11%, 45%;
  --shade4-light: 204, 11%, 18%;
  --shade0-dark: 204, 11%, 18%;
  --shade1-dark: 204, 11%, 45%;
  --shade2-dark: 205, 20%, 83%;
  --shade3-dark: 205, 25%, 91%;
  --shade4-dark: 0, 0%, 100%;
  /* custom color scheme */
  --bg--custom: 220 80% 98%;
  --txt--custom: 200 80% 9%;
  --muted--custom: 210 80% 50%;
  --accent--custom: 180 65% 50%;
  --secondary--custom: 280 65% 50%;
}

:root[data-theme=light] {
  --header-c: var(--shade4-light);
  --footer-c: var(--shade4-light), 0.3;
  --bg-c: var(--shade0-light), 0.5;
  --bg-overlay-c: var(--shade0-light), 1.0;
  --txt1-c: var(--shade4-light), 1.0;
  --border-c: var(--primary-color), 0.6;
  --shadow-c: var(--shade3-light);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-light));
  color-scheme: light;
}

:root[data-theme=dark] {
  --header-c: var(--shade0-dark);
  --footer-c: var(--shade0-dark), 0.3;
  --bg-c: var(--shade0-dark), 0.5;
  --bg-overlay-c: var(--shade0-dark), 1.0;
  --txt1-c: var(--shade4-dark), 1.0;
  --border-c: var(--primary-color), 0.3;
  --shadow-c: var(--shade3-dark);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-dark));
  color-scheme: dark;
}

:root[data-theme=custom] {
  --header-c: hsl(var(--accent--custom));
  --bg-c: hsl(var(--bg--custom));
  --footer-c: hsl(var(--muted--custom) / 0.55);
  --btn1-c: hsl(var(--secondary--custom));
  --btn2-c: hsl(var(--secondary--custom));
  --border-c: hsl(var(--muted--custom));
  --highlight-c: hsl(var(--accent--custom));
  --txt1-c: hsl(var(--txt--custom));
  --txt2-c: hsl(var(--txt--custom));
  color-scheme: light;
}

/*

useful color function :
1. background-image: li1near-gradient(#fff, var(--footer-c));

*/
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --_size: 1.0rem;
  --_radius: 0.2em;
  --_tspeed_fast: 150ms;
  --_tspeed_slow: 400ms;
  --_ttype_squish: cubic-bezier(0.86, -0.1, 0.27, 1.15);
  --zindex-fixed-element: 6;
  --zindex-header:9;
  --zindex-overlay: 12;
  --ru-box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  --primary-color: #ff9100;
  --secondary-color: #4387f4;
  --ternary-color: #34a853;
  --quaternary-color: #eb4233;
  --pentanary-color: #fbbd04;
  --primary-color: 34, 100%, 50%;
  --secondary-color: 217, 89%, 61%;
  --ternary-color: 136, 53%, 43%;
  --quaternary-color: 5, 81%, 56%;
  --pentanary-color: 45, 97%, 50%;
  --test-color0: hsl(0, 0%, 100%);
  --test-color1: hsl(205, 25%, 91%);
  --test-color2: hsl(205, 20%, 83%);
  --test-color3: hsl(204, 11%, 45%);
  --test-color4: hsl(204, 11%, 18%);
  --test-color5: hsl(206, 82%, 63%);
  --shade0-light: 0, 0%, 100%;
  --shade1-light: 205, 25%, 91%;
  --shade2-light: 205, 20%, 83%;
  --shade3-light: 204, 11%, 45%;
  --shade4-light: 204, 11%, 18%;
  --shade0-dark: 204, 11%, 18%;
  --shade1-dark: 204, 11%, 45%;
  --shade2-dark: 205, 20%, 83%;
  --shade3-dark: 205, 25%, 91%;
  --shade4-dark: 0, 0%, 100%;
  /* custom color scheme */
  --bg--custom: 220 80% 98%;
  --txt--custom: 200 80% 9%;
  --muted--custom: 210 80% 50%;
  --accent--custom: 180 65% 50%;
  --secondary--custom: 280 65% 50%;
}

:root[data-theme=light] {
  --header-c: var(--shade4-light);
  --footer-c: var(--shade4-light), 0.3;
  --bg-c: var(--shade0-light), 0.5;
  --bg-overlay-c: var(--shade0-light), 1.0;
  --txt1-c: var(--shade4-light), 1.0;
  --border-c: var(--primary-color), 0.6;
  --shadow-c: var(--shade3-light);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-light));
  color-scheme: light;
}

:root[data-theme=dark] {
  --header-c: var(--shade0-dark);
  --footer-c: var(--shade0-dark), 0.3;
  --bg-c: var(--shade0-dark), 0.5;
  --bg-overlay-c: var(--shade0-dark), 1.0;
  --txt1-c: var(--shade4-dark), 1.0;
  --border-c: var(--primary-color), 0.3;
  --shadow-c: var(--shade3-dark);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-dark));
  color-scheme: dark;
}

:root[data-theme=custom] {
  --header-c: hsl(var(--accent--custom));
  --bg-c: hsl(var(--bg--custom));
  --footer-c: hsl(var(--muted--custom) / 0.55);
  --btn1-c: hsl(var(--secondary--custom));
  --btn2-c: hsl(var(--secondary--custom));
  --border-c: hsl(var(--muted--custom));
  --highlight-c: hsl(var(--accent--custom));
  --txt1-c: hsl(var(--txt--custom));
  --txt2-c: hsl(var(--txt--custom));
  color-scheme: light;
}

/*

useful color function :
1. background-image: li1near-gradient(#fff, var(--footer-c));

*/
.section-break {
  border: none;
  border-top: 1px solid hsl(var(--highlight-c));
  margin: 1.5rem 0;
}

.uniform-heading {
  text-align: left;
  color: hsl(var(--txt1-c));
}

.clearfix {
  clear: both;
}

.height-fit-content {
  height: -moz-fit-content;
  height: fit-content;
}

.rounded-border {
  height: -moz-fit-content;
  height: fit-content;
  border: solid hsl(var(--border-c));
  border-width: 3px 3px 3px 3px;
  border-radius: 12px;
  padding: 12px;
}

.primary-color-theme {
  color: hsl(var(--txt1-c));
  height: -moz-fit-content;
  height: fit-content;
}

.seconday-color-theme {
  color: hsl(var(--header-c));
  background-color: hsl(var(--bg-c));
}

.canvas-style {
  position: relative;
  width: 100%;
  height: 100%;
}

.code-editor-line-block {
  display: flex;
  flex-direction: row;
  padding-left: 40px;
}

.code-editor-line-number {
  position: absolute;
  left: 0px;
  color: #cccccc;
  text-align: right;
  width: 40px;
  font-weight: 100;
}

.boilerplate-frontend {
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.07);
  background-color: #ffe5b4;
  border: 2px solid #ffda97;
  color: #ce9c41;
  padding: 20px;
  margin: 20px 0;
}
.boilerplate-frontend p {
  margin: 0;
  padding: 0;
}

.ru_background {
  background-size: cover;
  background-blend-mode: darken;
}

.se_App {
  position: relative;
  text-align: center;
  background-color: hsl(var(--bg-c));
  border: 1px solid hsl(var(--border-c));
  border-radius: 12px;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../../mu-plugins/rudra-custom-component/src/lib/WrapperTag/button/Button.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --_size: 1.0rem;
  --_radius: 0.2em;
  --_tspeed_fast: 150ms;
  --_tspeed_slow: 400ms;
  --_ttype_squish: cubic-bezier(0.86, -0.1, 0.27, 1.15);
  --zindex-fixed-element: 6;
  --zindex-header:9;
  --zindex-overlay: 12;
  --ru-box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  --primary-color: #ff9100;
  --secondary-color: #4387f4;
  --ternary-color: #34a853;
  --quaternary-color: #eb4233;
  --pentanary-color: #fbbd04;
  --primary-color: 34, 100%, 50%;
  --secondary-color: 217, 89%, 61%;
  --ternary-color: 136, 53%, 43%;
  --quaternary-color: 5, 81%, 56%;
  --pentanary-color: 45, 97%, 50%;
  --test-color0: hsl(0, 0%, 100%);
  --test-color1: hsl(205, 25%, 91%);
  --test-color2: hsl(205, 20%, 83%);
  --test-color3: hsl(204, 11%, 45%);
  --test-color4: hsl(204, 11%, 18%);
  --test-color5: hsl(206, 82%, 63%);
  --shade0-light: 0, 0%, 100%;
  --shade1-light: 205, 25%, 91%;
  --shade2-light: 205, 20%, 83%;
  --shade3-light: 204, 11%, 45%;
  --shade4-light: 204, 11%, 18%;
  --shade0-dark: 204, 11%, 18%;
  --shade1-dark: 204, 11%, 45%;
  --shade2-dark: 205, 20%, 83%;
  --shade3-dark: 205, 25%, 91%;
  --shade4-dark: 0, 0%, 100%;
  /* custom color scheme */
  --bg--custom: 220 80% 98%;
  --txt--custom: 200 80% 9%;
  --muted--custom: 210 80% 50%;
  --accent--custom: 180 65% 50%;
  --secondary--custom: 280 65% 50%;
}

:root[data-theme=light] {
  --header-c: var(--shade4-light);
  --footer-c: var(--shade4-light), 0.3;
  --bg-c: var(--shade0-light), 0.5;
  --bg-overlay-c: var(--shade0-light), 1.0;
  --txt1-c: var(--shade4-light), 1.0;
  --border-c: var(--primary-color), 0.6;
  --shadow-c: var(--shade3-light);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-light));
  color-scheme: light;
}

:root[data-theme=dark] {
  --header-c: var(--shade0-dark);
  --footer-c: var(--shade0-dark), 0.3;
  --bg-c: var(--shade0-dark), 0.5;
  --bg-overlay-c: var(--shade0-dark), 1.0;
  --txt1-c: var(--shade4-dark), 1.0;
  --border-c: var(--primary-color), 0.3;
  --shadow-c: var(--shade3-dark);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-dark));
  color-scheme: dark;
}

:root[data-theme=custom] {
  --header-c: hsl(var(--accent--custom));
  --bg-c: hsl(var(--bg--custom));
  --footer-c: hsl(var(--muted--custom) / 0.55);
  --btn1-c: hsl(var(--secondary--custom));
  --btn2-c: hsl(var(--secondary--custom));
  --border-c: hsl(var(--muted--custom));
  --highlight-c: hsl(var(--accent--custom));
  --txt1-c: hsl(var(--txt--custom));
  --txt2-c: hsl(var(--txt--custom));
  color-scheme: light;
}

/*

useful color function :
1. background-image: li1near-gradient(#fff, var(--footer-c));

*/
.custom-button {
  padding: 3px 3px;
  font: inherit;
  font-weight: 500;
  border: none;
  border-radius: 0.25em;
  padding: 0.3em 1.1em;
  cursor: pointer;
}

.custom-button.primary {
  background-color: hsl(var(--btn1-c));
  color: hsl(var(--txt1-c));
}

.custom-button.secondary {
  background-color: hsl(var(--btn2-c));
  color: hsl(var(--txt1-c));
}

.custom-button.success {
  background-color: #0f9d58;
}

.custom-button.danger {
  background-color: #db4437;
}

.custom-button.primary:hover {
  background: linear-gradient(hsl(var(--btn1-c)), hsl(var(--btn1-c), 0.6));
  transition: background-color var(--_tspeed_fast) var(--_ttype_squish);
}

.custom-button.secondary:hover {
  background: linear-gradient(hsl(var(--btn2-c)), hsl(var(--btn2-c), 0.6));
  transition: background-color var(--_tspeed_fast) var(--_ttype_squish);
}

.custom-button.success:hover {
  background: linear-gradient(#0f9d58, #979797);
}

.custom-button.danger:hover {
  background: linear-gradient(#db4437, #979797);
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../../mu-plugins/rudra-custom-component/src/lib/WrapperTag/tooltip/Tooltip.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************/
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  visibility: hidden;
  width: 120px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../../mu-plugins/rudra-custom-component/src/lib/WrapperTag/tab.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --_size: 1.0rem;
  --_radius: 0.2em;
  --_tspeed_fast: 150ms;
  --_tspeed_slow: 400ms;
  --_ttype_squish: cubic-bezier(0.86, -0.1, 0.27, 1.15);
  --zindex-fixed-element: 6;
  --zindex-header:9;
  --zindex-overlay: 12;
  --ru-box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  --primary-color: #ff9100;
  --secondary-color: #4387f4;
  --ternary-color: #34a853;
  --quaternary-color: #eb4233;
  --pentanary-color: #fbbd04;
  --primary-color: 34, 100%, 50%;
  --secondary-color: 217, 89%, 61%;
  --ternary-color: 136, 53%, 43%;
  --quaternary-color: 5, 81%, 56%;
  --pentanary-color: 45, 97%, 50%;
  --test-color0: hsl(0, 0%, 100%);
  --test-color1: hsl(205, 25%, 91%);
  --test-color2: hsl(205, 20%, 83%);
  --test-color3: hsl(204, 11%, 45%);
  --test-color4: hsl(204, 11%, 18%);
  --test-color5: hsl(206, 82%, 63%);
  --shade0-light: 0, 0%, 100%;
  --shade1-light: 205, 25%, 91%;
  --shade2-light: 205, 20%, 83%;
  --shade3-light: 204, 11%, 45%;
  --shade4-light: 204, 11%, 18%;
  --shade0-dark: 204, 11%, 18%;
  --shade1-dark: 204, 11%, 45%;
  --shade2-dark: 205, 20%, 83%;
  --shade3-dark: 205, 25%, 91%;
  --shade4-dark: 0, 0%, 100%;
  /* custom color scheme */
  --bg--custom: 220 80% 98%;
  --txt--custom: 200 80% 9%;
  --muted--custom: 210 80% 50%;
  --accent--custom: 180 65% 50%;
  --secondary--custom: 280 65% 50%;
}

:root[data-theme=light] {
  --header-c: var(--shade4-light);
  --footer-c: var(--shade4-light), 0.3;
  --bg-c: var(--shade0-light), 0.5;
  --bg-overlay-c: var(--shade0-light), 1.0;
  --txt1-c: var(--shade4-light), 1.0;
  --border-c: var(--primary-color), 0.6;
  --shadow-c: var(--shade3-light);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-light));
  color-scheme: light;
}

:root[data-theme=dark] {
  --header-c: var(--shade0-dark);
  --footer-c: var(--shade0-dark), 0.3;
  --bg-c: var(--shade0-dark), 0.5;
  --bg-overlay-c: var(--shade0-dark), 1.0;
  --txt1-c: var(--shade4-dark), 1.0;
  --border-c: var(--primary-color), 0.3;
  --shadow-c: var(--shade3-dark);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-dark));
  color-scheme: dark;
}

:root[data-theme=custom] {
  --header-c: hsl(var(--accent--custom));
  --bg-c: hsl(var(--bg--custom));
  --footer-c: hsl(var(--muted--custom) / 0.55);
  --btn1-c: hsl(var(--secondary--custom));
  --btn2-c: hsl(var(--secondary--custom));
  --border-c: hsl(var(--muted--custom));
  --highlight-c: hsl(var(--accent--custom));
  --txt1-c: hsl(var(--txt--custom));
  --txt2-c: hsl(var(--txt--custom));
  color-scheme: light;
}

/*

useful color function :
1. background-image: li1near-gradient(#fff, var(--footer-c));

*/
.tabs {
  background-color: inherit;
  height: -moz-fit-content;
  height: fit-content;
}

[label] .tab-list {
  background-color: hsl(var(--bg-c));
  border-width: 0px 3px 0px 3px;
  padding-left: 0;
}

.tab-list-item {
  color: hsl(var(--txt1-c));
  display: inline-block;
  list-style: none;
  margin-bottom: -1px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.tab-list-active {
  background-color: hsl(var(--bg-c));
  border-bottom: solid hsl(var(--highlight-c));
  border-width: 3px 3px 3px 3px;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../../mu-plugins/rudra-custom-component/src/lib/Divider/Divider.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --_size: 1.0rem;
  --_radius: 0.2em;
  --_tspeed_fast: 150ms;
  --_tspeed_slow: 400ms;
  --_ttype_squish: cubic-bezier(0.86, -0.1, 0.27, 1.15);
  --zindex-fixed-element: 6;
  --zindex-header:9;
  --zindex-overlay: 12;
  --ru-box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  --primary-color: #ff9100;
  --secondary-color: #4387f4;
  --ternary-color: #34a853;
  --quaternary-color: #eb4233;
  --pentanary-color: #fbbd04;
  --primary-color: 34, 100%, 50%;
  --secondary-color: 217, 89%, 61%;
  --ternary-color: 136, 53%, 43%;
  --quaternary-color: 5, 81%, 56%;
  --pentanary-color: 45, 97%, 50%;
  --test-color0: hsl(0, 0%, 100%);
  --test-color1: hsl(205, 25%, 91%);
  --test-color2: hsl(205, 20%, 83%);
  --test-color3: hsl(204, 11%, 45%);
  --test-color4: hsl(204, 11%, 18%);
  --test-color5: hsl(206, 82%, 63%);
  --shade0-light: 0, 0%, 100%;
  --shade1-light: 205, 25%, 91%;
  --shade2-light: 205, 20%, 83%;
  --shade3-light: 204, 11%, 45%;
  --shade4-light: 204, 11%, 18%;
  --shade0-dark: 204, 11%, 18%;
  --shade1-dark: 204, 11%, 45%;
  --shade2-dark: 205, 20%, 83%;
  --shade3-dark: 205, 25%, 91%;
  --shade4-dark: 0, 0%, 100%;
  /* custom color scheme */
  --bg--custom: 220 80% 98%;
  --txt--custom: 200 80% 9%;
  --muted--custom: 210 80% 50%;
  --accent--custom: 180 65% 50%;
  --secondary--custom: 280 65% 50%;
}

:root[data-theme=light] {
  --header-c: var(--shade4-light);
  --footer-c: var(--shade4-light), 0.3;
  --bg-c: var(--shade0-light), 0.5;
  --bg-overlay-c: var(--shade0-light), 1.0;
  --txt1-c: var(--shade4-light), 1.0;
  --border-c: var(--primary-color), 0.6;
  --shadow-c: var(--shade3-light);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-light));
  color-scheme: light;
}

:root[data-theme=dark] {
  --header-c: var(--shade0-dark);
  --footer-c: var(--shade0-dark), 0.3;
  --bg-c: var(--shade0-dark), 0.5;
  --bg-overlay-c: var(--shade0-dark), 1.0;
  --txt1-c: var(--shade4-dark), 1.0;
  --border-c: var(--primary-color), 0.3;
  --shadow-c: var(--shade3-dark);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-dark));
  color-scheme: dark;
}

:root[data-theme=custom] {
  --header-c: hsl(var(--accent--custom));
  --bg-c: hsl(var(--bg--custom));
  --footer-c: hsl(var(--muted--custom) / 0.55);
  --btn1-c: hsl(var(--secondary--custom));
  --btn2-c: hsl(var(--secondary--custom));
  --border-c: hsl(var(--muted--custom));
  --highlight-c: hsl(var(--accent--custom));
  --txt1-c: hsl(var(--txt--custom));
  --txt2-c: hsl(var(--txt--custom));
  color-scheme: light;
}

/*

useful color function :
1. background-image: li1near-gradient(#fff, var(--footer-c));

*/
.vertical-divider {
  width: 1px;
  height: 100%;
  background-color: hsl(var(--border-c));
}

.horizontal-divider {
  border: none;
  border-top: 1px solid hsl(var(--border-c));
  margin: 1.5rem 0;
}
/*!*******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/prismjs/themes/prism.css ***!
  \*******************************************************************************************************************************************************************************************/
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	text-shadow: 0 1px white;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #9a6e3a;
	/* This background color was intended by the author of this theme. */
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function,
.token.class-name {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

/*!************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/css/base/theme.scss ***!
  \************************************************************************************************************************************************************************************************************************************************/
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --_size: 1.0rem;
  --_radius: 0.2em;
  --_tspeed_fast: 150ms;
  --_tspeed_slow: 400ms;
  --_ttype_squish: cubic-bezier(0.86, -0.1, 0.27, 1.15);
  --zindex-fixed-element: 6;
  --zindex-header:9;
  --zindex-overlay: 12;
  --ru-box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  --primary-color: #ff9100;
  --secondary-color: #4387f4;
  --ternary-color: #34a853;
  --quaternary-color: #eb4233;
  --pentanary-color: #fbbd04;
  --primary-color: 34, 100%, 50%;
  --secondary-color: 217, 89%, 61%;
  --ternary-color: 136, 53%, 43%;
  --quaternary-color: 5, 81%, 56%;
  --pentanary-color: 45, 97%, 50%;
  --test-color0: hsl(0, 0%, 100%);
  --test-color1: hsl(205, 25%, 91%);
  --test-color2: hsl(205, 20%, 83%);
  --test-color3: hsl(204, 11%, 45%);
  --test-color4: hsl(204, 11%, 18%);
  --test-color5: hsl(206, 82%, 63%);
  --shade0-light: 0, 0%, 100%;
  --shade1-light: 205, 25%, 91%;
  --shade2-light: 205, 20%, 83%;
  --shade3-light: 204, 11%, 45%;
  --shade4-light: 204, 11%, 18%;
  --shade0-dark: 204, 11%, 18%;
  --shade1-dark: 204, 11%, 45%;
  --shade2-dark: 205, 20%, 83%;
  --shade3-dark: 205, 25%, 91%;
  --shade4-dark: 0, 0%, 100%;
  /* custom color scheme */
  --bg--custom: 220 80% 98%;
  --txt--custom: 200 80% 9%;
  --muted--custom: 210 80% 50%;
  --accent--custom: 180 65% 50%;
  --secondary--custom: 280 65% 50%;
}

:root[data-theme=light] {
  --header-c: var(--shade4-light);
  --footer-c: var(--shade4-light), 0.3;
  --bg-c: var(--shade0-light), 0.5;
  --bg-overlay-c: var(--shade0-light), 1.0;
  --txt1-c: var(--shade4-light), 1.0;
  --border-c: var(--primary-color), 0.6;
  --shadow-c: var(--shade3-light);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-light));
  color-scheme: light;
}

:root[data-theme=dark] {
  --header-c: var(--shade0-dark);
  --footer-c: var(--shade0-dark), 0.3;
  --bg-c: var(--shade0-dark), 0.5;
  --bg-overlay-c: var(--shade0-dark), 1.0;
  --txt1-c: var(--shade4-dark), 1.0;
  --border-c: var(--primary-color), 0.3;
  --shadow-c: var(--shade3-dark);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-dark));
  color-scheme: dark;
}

:root[data-theme=custom] {
  --header-c: hsl(var(--accent--custom));
  --bg-c: hsl(var(--bg--custom));
  --footer-c: hsl(var(--muted--custom) / 0.55);
  --btn1-c: hsl(var(--secondary--custom));
  --btn2-c: hsl(var(--secondary--custom));
  --border-c: hsl(var(--muted--custom));
  --highlight-c: hsl(var(--accent--custom));
  --txt1-c: hsl(var(--txt--custom));
  --txt2-c: hsl(var(--txt--custom));
  color-scheme: light;
}

/*

useful color function :
1. background-image: li1near-gradient(#fff, var(--footer-c));

*/
/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/css/Common.scss ***!
  \********************************************************************************************************************************************************************************************************************************************/
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --_size: 1.0rem;
  --_radius: 0.2em;
  --_tspeed_fast: 150ms;
  --_tspeed_slow: 400ms;
  --_ttype_squish: cubic-bezier(0.86, -0.1, 0.27, 1.15);
  --zindex-fixed-element: 6;
  --zindex-header:9;
  --zindex-overlay: 12;
  --ru-box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  --primary-color: #ff9100;
  --secondary-color: #4387f4;
  --ternary-color: #34a853;
  --quaternary-color: #eb4233;
  --pentanary-color: #fbbd04;
  --primary-color: 34, 100%, 50%;
  --secondary-color: 217, 89%, 61%;
  --ternary-color: 136, 53%, 43%;
  --quaternary-color: 5, 81%, 56%;
  --pentanary-color: 45, 97%, 50%;
  --test-color0: hsl(0, 0%, 100%);
  --test-color1: hsl(205, 25%, 91%);
  --test-color2: hsl(205, 20%, 83%);
  --test-color3: hsl(204, 11%, 45%);
  --test-color4: hsl(204, 11%, 18%);
  --test-color5: hsl(206, 82%, 63%);
  --shade0-light: 0, 0%, 100%;
  --shade1-light: 205, 25%, 91%;
  --shade2-light: 205, 20%, 83%;
  --shade3-light: 204, 11%, 45%;
  --shade4-light: 204, 11%, 18%;
  --shade0-dark: 204, 11%, 18%;
  --shade1-dark: 204, 11%, 45%;
  --shade2-dark: 205, 20%, 83%;
  --shade3-dark: 205, 25%, 91%;
  --shade4-dark: 0, 0%, 100%;
  /* custom color scheme */
  --bg--custom: 220 80% 98%;
  --txt--custom: 200 80% 9%;
  --muted--custom: 210 80% 50%;
  --accent--custom: 180 65% 50%;
  --secondary--custom: 280 65% 50%;
}

:root[data-theme=light] {
  --header-c: var(--shade4-light);
  --footer-c: var(--shade4-light), 0.3;
  --bg-c: var(--shade0-light), 0.5;
  --bg-overlay-c: var(--shade0-light), 1.0;
  --txt1-c: var(--shade4-light), 1.0;
  --border-c: var(--primary-color), 0.6;
  --shadow-c: var(--shade3-light);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-light));
  color-scheme: light;
}

:root[data-theme=dark] {
  --header-c: var(--shade0-dark);
  --footer-c: var(--shade0-dark), 0.3;
  --bg-c: var(--shade0-dark), 0.5;
  --bg-overlay-c: var(--shade0-dark), 1.0;
  --txt1-c: var(--shade4-dark), 1.0;
  --border-c: var(--primary-color), 0.3;
  --shadow-c: var(--shade3-dark);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-dark));
  color-scheme: dark;
}

:root[data-theme=custom] {
  --header-c: hsl(var(--accent--custom));
  --bg-c: hsl(var(--bg--custom));
  --footer-c: hsl(var(--muted--custom) / 0.55);
  --btn1-c: hsl(var(--secondary--custom));
  --btn2-c: hsl(var(--secondary--custom));
  --border-c: hsl(var(--muted--custom));
  --highlight-c: hsl(var(--accent--custom));
  --txt1-c: hsl(var(--txt--custom));
  --txt2-c: hsl(var(--txt--custom));
  color-scheme: light;
}

/*

useful color function :
1. background-image: li1near-gradient(#fff, var(--footer-c));

*/
.section-break {
  border: none;
  border-top: 1px solid hsl(var(--highlight-c));
  margin: 1.5rem 0;
}

.uniform-heading {
  text-align: left;
  color: hsl(var(--txt1-c));
}

.clearfix {
  clear: both;
}

.height-fit-content {
  height: -moz-fit-content;
  height: fit-content;
}

.rounded-border {
  height: -moz-fit-content;
  height: fit-content;
  border: solid hsl(var(--border-c));
  border-width: 3px 3px 3px 3px;
  border-radius: 12px;
  padding: 12px;
}

.primary-color-theme {
  color: hsl(var(--txt1-c));
  height: -moz-fit-content;
  height: fit-content;
}

.seconday-color-theme {
  color: hsl(var(--header-c));
  background-color: hsl(var(--bg-c));
}

.canvas-style {
  position: relative;
  width: 100%;
  height: 100%;
}

.code-editor-line-block {
  display: flex;
  flex-direction: row;
  padding-left: 40px;
}

.code-editor-line-number {
  position: absolute;
  left: 0px;
  color: #cccccc;
  text-align: right;
  width: 40px;
  font-weight: 100;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../../mu-plugins/rudra-custom-component/src/lib/WrapperTag/CustomColorPicker.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************/
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --_size: 1.0rem;
  --_radius: 0.2em;
  --_tspeed_fast: 150ms;
  --_tspeed_slow: 400ms;
  --_ttype_squish: cubic-bezier(0.86, -0.1, 0.27, 1.15);
  --zindex-fixed-element: 6;
  --zindex-header:9;
  --zindex-overlay: 12;
  --ru-box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  --primary-color: #ff9100;
  --secondary-color: #4387f4;
  --ternary-color: #34a853;
  --quaternary-color: #eb4233;
  --pentanary-color: #fbbd04;
  --primary-color: 34, 100%, 50%;
  --secondary-color: 217, 89%, 61%;
  --ternary-color: 136, 53%, 43%;
  --quaternary-color: 5, 81%, 56%;
  --pentanary-color: 45, 97%, 50%;
  --test-color0: hsl(0, 0%, 100%);
  --test-color1: hsl(205, 25%, 91%);
  --test-color2: hsl(205, 20%, 83%);
  --test-color3: hsl(204, 11%, 45%);
  --test-color4: hsl(204, 11%, 18%);
  --test-color5: hsl(206, 82%, 63%);
  --shade0-light: 0, 0%, 100%;
  --shade1-light: 205, 25%, 91%;
  --shade2-light: 205, 20%, 83%;
  --shade3-light: 204, 11%, 45%;
  --shade4-light: 204, 11%, 18%;
  --shade0-dark: 204, 11%, 18%;
  --shade1-dark: 204, 11%, 45%;
  --shade2-dark: 205, 20%, 83%;
  --shade3-dark: 205, 25%, 91%;
  --shade4-dark: 0, 0%, 100%;
  /* custom color scheme */
  --bg--custom: 220 80% 98%;
  --txt--custom: 200 80% 9%;
  --muted--custom: 210 80% 50%;
  --accent--custom: 180 65% 50%;
  --secondary--custom: 280 65% 50%;
}

:root[data-theme=light] {
  --header-c: var(--shade4-light);
  --footer-c: var(--shade4-light), 0.3;
  --bg-c: var(--shade0-light), 0.5;
  --bg-overlay-c: var(--shade0-light), 1.0;
  --txt1-c: var(--shade4-light), 1.0;
  --border-c: var(--primary-color), 0.6;
  --shadow-c: var(--shade3-light);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-light));
  color-scheme: light;
}

:root[data-theme=dark] {
  --header-c: var(--shade0-dark);
  --footer-c: var(--shade0-dark), 0.3;
  --bg-c: var(--shade0-dark), 0.5;
  --bg-overlay-c: var(--shade0-dark), 1.0;
  --txt1-c: var(--shade4-dark), 1.0;
  --border-c: var(--primary-color), 0.3;
  --shadow-c: var(--shade3-dark);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-dark));
  color-scheme: dark;
}

:root[data-theme=custom] {
  --header-c: hsl(var(--accent--custom));
  --bg-c: hsl(var(--bg--custom));
  --footer-c: hsl(var(--muted--custom) / 0.55);
  --btn1-c: hsl(var(--secondary--custom));
  --btn2-c: hsl(var(--secondary--custom));
  --border-c: hsl(var(--muted--custom));
  --highlight-c: hsl(var(--accent--custom));
  --txt1-c: hsl(var(--txt--custom));
  --txt2-c: hsl(var(--txt--custom));
  color-scheme: light;
}

/*

useful color function :
1. background-image: li1near-gradient(#fff, var(--footer-c));

*/
.color-picker-button {
  cursor: pointer;
}

.close-color-picker-button {
  cursor: pointer;
  position: relative;
  float: right;
  width: 30px;
  height: 30px;
  z-index: 1;
  margin: 0px;
  padding: 0px;
  background-color: hsl(var(--highlight-c));
}

.color-picker-palette-container {
  display: flex;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
  align-items: center;
  justify-content: center;
}

.color-picker-palette-div {
  display: block;
  align-items: end;
  justify-content: end;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../../mu-plugins/rudra-custom-component/src/lib/WrapperTag/stack/Stack.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
.horizontal-stack {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start !important;
  height: -moz-fit-content;
  height: fit-content;
}

.vertical-stack {
  height: -moz-fit-content !important;
  height: fit-content !important;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../../mu-plugins/rudra-custom-component/src/lib/WrapperTag/Slider/Slider.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/
.slider-label {
  margin-right: 5px;
  font-size: smaller;
  color: hsl(var(--txt1-c));
}

.slider-bar {
  width: 100px !important;
}

.slider-input {
  padding: 5px;
  border: 1px solid hsl(var(--border-c));
  border-radius: 3px;
  color: hsl(var(--txt1-c));
  background-color: transparent;
  width: 60px !important;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../../mu-plugins/rudra-custom-component/src/lib/WrapperTag/select/Select.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************/
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --_size: 1.0rem;
  --_radius: 0.2em;
  --_tspeed_fast: 150ms;
  --_tspeed_slow: 400ms;
  --_ttype_squish: cubic-bezier(0.86, -0.1, 0.27, 1.15);
  --zindex-fixed-element: 6;
  --zindex-header:9;
  --zindex-overlay: 12;
  --ru-box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  --primary-color: #ff9100;
  --secondary-color: #4387f4;
  --ternary-color: #34a853;
  --quaternary-color: #eb4233;
  --pentanary-color: #fbbd04;
  --primary-color: 34, 100%, 50%;
  --secondary-color: 217, 89%, 61%;
  --ternary-color: 136, 53%, 43%;
  --quaternary-color: 5, 81%, 56%;
  --pentanary-color: 45, 97%, 50%;
  --test-color0: hsl(0, 0%, 100%);
  --test-color1: hsl(205, 25%, 91%);
  --test-color2: hsl(205, 20%, 83%);
  --test-color3: hsl(204, 11%, 45%);
  --test-color4: hsl(204, 11%, 18%);
  --test-color5: hsl(206, 82%, 63%);
  --shade0-light: 0, 0%, 100%;
  --shade1-light: 205, 25%, 91%;
  --shade2-light: 205, 20%, 83%;
  --shade3-light: 204, 11%, 45%;
  --shade4-light: 204, 11%, 18%;
  --shade0-dark: 204, 11%, 18%;
  --shade1-dark: 204, 11%, 45%;
  --shade2-dark: 205, 20%, 83%;
  --shade3-dark: 205, 25%, 91%;
  --shade4-dark: 0, 0%, 100%;
  /* custom color scheme */
  --bg--custom: 220 80% 98%;
  --txt--custom: 200 80% 9%;
  --muted--custom: 210 80% 50%;
  --accent--custom: 180 65% 50%;
  --secondary--custom: 280 65% 50%;
}

:root[data-theme=light] {
  --header-c: var(--shade4-light);
  --footer-c: var(--shade4-light), 0.3;
  --bg-c: var(--shade0-light), 0.5;
  --bg-overlay-c: var(--shade0-light), 1.0;
  --txt1-c: var(--shade4-light), 1.0;
  --border-c: var(--primary-color), 0.6;
  --shadow-c: var(--shade3-light);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-light));
  color-scheme: light;
}

:root[data-theme=dark] {
  --header-c: var(--shade0-dark);
  --footer-c: var(--shade0-dark), 0.3;
  --bg-c: var(--shade0-dark), 0.5;
  --bg-overlay-c: var(--shade0-dark), 1.0;
  --txt1-c: var(--shade4-dark), 1.0;
  --border-c: var(--primary-color), 0.3;
  --shadow-c: var(--shade3-dark);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-dark));
  color-scheme: dark;
}

:root[data-theme=custom] {
  --header-c: hsl(var(--accent--custom));
  --bg-c: hsl(var(--bg--custom));
  --footer-c: hsl(var(--muted--custom) / 0.55);
  --btn1-c: hsl(var(--secondary--custom));
  --btn2-c: hsl(var(--secondary--custom));
  --border-c: hsl(var(--muted--custom));
  --highlight-c: hsl(var(--accent--custom));
  --txt1-c: hsl(var(--txt--custom));
  --txt2-c: hsl(var(--txt--custom));
  color-scheme: light;
}

/*

useful color function :
1. background-image: li1near-gradient(#fff, var(--footer-c));

*/
.select {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.select-label {
  margin-bottom: 5px;
  font-size: smaller;
  color: hsl(var(--txt1-c));
  background-color: transparent;
}

.select-input {
  padding: 5px;
  border: 1px solid hsl(var(--border-c));
  border-radius: 3px;
  color: hsl(var(--txt1-c));
  background-color: transparent;
}

.select option {
  font-size: smaller;
  background: hsl(var(--bg-overlay-c));
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../../mu-plugins/rudra-custom-component/src/lib/WrapperTag/text_field/TextField.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************/
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --_size: 1.0rem;
  --_radius: 0.2em;
  --_tspeed_fast: 150ms;
  --_tspeed_slow: 400ms;
  --_ttype_squish: cubic-bezier(0.86, -0.1, 0.27, 1.15);
  --zindex-fixed-element: 6;
  --zindex-header:9;
  --zindex-overlay: 12;
  --ru-box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  --primary-color: #ff9100;
  --secondary-color: #4387f4;
  --ternary-color: #34a853;
  --quaternary-color: #eb4233;
  --pentanary-color: #fbbd04;
  --primary-color: 34, 100%, 50%;
  --secondary-color: 217, 89%, 61%;
  --ternary-color: 136, 53%, 43%;
  --quaternary-color: 5, 81%, 56%;
  --pentanary-color: 45, 97%, 50%;
  --test-color0: hsl(0, 0%, 100%);
  --test-color1: hsl(205, 25%, 91%);
  --test-color2: hsl(205, 20%, 83%);
  --test-color3: hsl(204, 11%, 45%);
  --test-color4: hsl(204, 11%, 18%);
  --test-color5: hsl(206, 82%, 63%);
  --shade0-light: 0, 0%, 100%;
  --shade1-light: 205, 25%, 91%;
  --shade2-light: 205, 20%, 83%;
  --shade3-light: 204, 11%, 45%;
  --shade4-light: 204, 11%, 18%;
  --shade0-dark: 204, 11%, 18%;
  --shade1-dark: 204, 11%, 45%;
  --shade2-dark: 205, 20%, 83%;
  --shade3-dark: 205, 25%, 91%;
  --shade4-dark: 0, 0%, 100%;
  /* custom color scheme */
  --bg--custom: 220 80% 98%;
  --txt--custom: 200 80% 9%;
  --muted--custom: 210 80% 50%;
  --accent--custom: 180 65% 50%;
  --secondary--custom: 280 65% 50%;
}

:root[data-theme=light] {
  --header-c: var(--shade4-light);
  --footer-c: var(--shade4-light), 0.3;
  --bg-c: var(--shade0-light), 0.5;
  --bg-overlay-c: var(--shade0-light), 1.0;
  --txt1-c: var(--shade4-light), 1.0;
  --border-c: var(--primary-color), 0.6;
  --shadow-c: var(--shade3-light);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-light));
  color-scheme: light;
}

:root[data-theme=dark] {
  --header-c: var(--shade0-dark);
  --footer-c: var(--shade0-dark), 0.3;
  --bg-c: var(--shade0-dark), 0.5;
  --bg-overlay-c: var(--shade0-dark), 1.0;
  --txt1-c: var(--shade4-dark), 1.0;
  --border-c: var(--primary-color), 0.3;
  --shadow-c: var(--shade3-dark);
  --highlight-c: var(--ternary-color);
  --btn1-c: var(--primary-color);
  --btn2-c: var(--ternary-color);
  --btn3-c: var(--quaternary-color);
  --bg-body-c1: hsl(var(--shade0-dark));
  color-scheme: dark;
}

:root[data-theme=custom] {
  --header-c: hsl(var(--accent--custom));
  --bg-c: hsl(var(--bg--custom));
  --footer-c: hsl(var(--muted--custom) / 0.55);
  --btn1-c: hsl(var(--secondary--custom));
  --btn2-c: hsl(var(--secondary--custom));
  --border-c: hsl(var(--muted--custom));
  --highlight-c: hsl(var(--accent--custom));
  --txt1-c: hsl(var(--txt--custom));
  --txt2-c: hsl(var(--txt--custom));
  color-scheme: light;
}

/*

useful color function :
1. background-image: li1near-gradient(#fff, var(--footer-c));

*/
.text-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.text-field-label {
  margin-bottom: 5px;
  font-size: smaller;
  color: hsl(var(--txt1-c));
}

.text-field-input {
  padding: 5px;
  border: 1px solid hsl(var(--border-c));
  border-radius: 3px;
  color: hsl(var(--txt1-c));
  background-color: transparent;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../../mu-plugins/rudra-custom-component/src/lib/WrapperTag/toggleswitch/ToggleSwitch.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************/
.switch {
  position: relative;
  display: block;
  width: 100px;
  height: 30px;
  padding: 3px;
  margin: 0 10px 10px 0;
  background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
  background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
  border-radius: 18px;
  box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  box-sizing: content-box;
}

.switch-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  box-sizing: content-box;
}

.switch-label {
  position: relative;
  display: block;
  height: inherit;
  font-size: 10px;
  text-transform: uppercase;
  background: #eceeef;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
  box-sizing: content-box;
}

.switch-label:before, .switch-label:after {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  line-height: 1;
  transition: inherit;
  box-sizing: content-box;
}

.switch-label:before {
  content: attr(data-off);
  right: 11px;
  color: #aaaaaa;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}

.switch-label:after {
  content: attr(data-on);
  left: 11px;
  color: #FFFFFF;
  text-shadow: 0 1px rgba(0, 0, 0, 0.2);
  opacity: 0;
}

.switch-input:checked ~ .switch-label {
  background: #E1B42B;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}

.switch-input:checked ~ .switch-label:before {
  opacity: 0;
}

.switch-input:checked ~ .switch-label:after {
  opacity: 1;
}

.switch-handle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
  background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
  border-radius: 100%;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.switch-handle:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -6px;
  width: 12px;
  height: 12px;
  background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
  background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
  border-radius: 6px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}

.switch-input:checked ~ .switch-handle {
  left: 74px;
  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

/* Transition
========================== */
.switch-label, .switch-handle {
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
  -moz-transition: All 0.3s ease;
  -o-transition: All 0.3s ease;
}

/* Switch Flat
==========================*/
.switch-flat {
  padding: 0;
  background: #FFF;
  background-image: none;
}

.switch-flat .switch-label {
  background: #FFF;
  border: solid 2px #eceeef;
  box-shadow: none;
}

.switch-flat .switch-label:after {
  color: #0088cc;
}

.switch-flat .switch-handle {
  top: 6px;
  left: 6px;
  background: #dadada;
  width: 22px;
  height: 22px;
  box-shadow: none;
}

.switch-flat .switch-handle:before {
  background: #eceeef;
}

.switch-flat .switch-input:checked ~ .switch-label {
  background: #FFF;
  border-color: #0088cc;
}

.switch-flat .switch-input:checked ~ .switch-handle {
  left: 72px;
  background: #0088cc;
  box-shadow: none;
}

/* Switch Light
==========================*/
.switch-light {
  padding: 0;
  background: #FFF;
  background-image: none;
}

.switch-light .switch-label {
  background: #FFF;
  border: solid 2px #eceeef;
  box-shadow: none;
}

.switch-light .switch-label:after {
  color: #9370DB;
}

.switch-light .switch-label:before {
  right: inherit;
  left: 11px;
}

.switch-light .switch-handle {
  top: 6px;
  left: 72px;
  background: #dadada;
  width: 22px;
  height: 22px;
  box-shadow: none;
}

.switch-light .switch-handle:before {
  background: #eceeef;
}

.switch-light .switch-input:checked ~ .switch-label {
  background: #FFF;
  border-color: #9370DB;
}

.switch-light .switch-input:checked ~ .switch-handle {
  left: 72px;
  box-shadow: none;
  background: #9370DB;
}

.switch-light .switch-input:checked ~ .switch-handle:before {
  background: rgba(255, 255, 255, 0.7);
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../../mu-plugins/rudra-custom-component/src/lib/RowColumn/Row.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************/
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start !important;
  height: -moz-fit-content;
  height: fit-content;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!../../mu-plugins/rudra-custom-component/src/lib/RowColumn/Column.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
.column {
  display: flex;
  flex-direction: column;
  height: -moz-fit-content !important;
  height: fit-content !important;
}

.column-1 {
  flex: 1;
}

.column-2 {
  flex: 2;
}

.column-3 {
  flex: 3;
}

.column-4 {
  flex: 4;
}

.column-5 {
  flex: 5;
}

.column-6 {
  flex: 6;
}

.column-7 {
  flex: 7;
}

.column-8 {
  flex: 8;
}

.column-9 {
  flex: 9;
}

.column-10 {
  flex: 10;
}

.column-11 {
  flex: 11;
}

.column-12 {
  flex: 12;
}

/*# sourceMappingURL=frontend.css.map*/