/*!***************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/shader_editor/App.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;
}

.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 {
  height: -moz-fit-content;
  height: fit-content;
}

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

*,
*::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));

*/
/* My descriptions */
.edit-description {
  font-size: 0.9rem;
  background-color: hsl(var(--bg-c));
  padding: 8px 16px;
  display: inline-block;
  margin-top: 12px;
  margin-right: 7px;
  border-radius: 4px;
  cursor: pointer;
}

@media (min-width: 635px) {
  .edit-description {
    position: relative;
    top: -12px;
  }
}

.edit-description:hover {
  background-color: hsl(var(--highlight-c));
}

.update-description {
  visibility: hidden;
}

.update-description--visible {
  visibility: visible;
}

.description-body-field {
  color: hsl(var(--txt1-c));
  background-color: transparent;
  font-family: "Roboto", sans-serif;
  display: block;
  line-height: 1.65;
  font-size: 1.15rem;
  padding: 7px;
  border: 1px solid transparent;
  outline: none;
  width: 98%;
  min-width: 300px;
  height: 25%;
  overflow: auto;
}

.description-active-field {
  border: 1px solid #ddd;
  animation: pulseBorder 0.75s alternate infinite;
}

@keyframes pulseBorder {
  0% {
    border: 1px solid #fff;
  }
  100% {
    border: 1px solid #ccc;
  }
}
/* Reveal and Hide Fade Transitions */
#my-descriptions {
  position: relative;
  height: 100%;
  width: 100%;
}

#my-descriptions div {
  transition: all 0.4s ease-out;
  opacity: 1;
}

#my-descriptions div.fade-out {
  height: 0px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0.5;
}

#my-descriptions div.fade-in-calc {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 1;
  height: 100%;
  width: 100%;
}

*,
*::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));

*/
.toast-notification-color {
  background-color: hsl(var(--bg-overlay-c));
  border: 3px solid hsl(var(--highlight-c));
  color: hsl(var(--txt1-c));
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#id-toast-notification {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#id-toast-notification.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
*,
*::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));

*/
.sidepanel {
  width: 0;
  position: fixed;
  z-index: 12;
  height: 250px;
  color: hsl(var(--txt1-c));
  background: hsl(var(--bg-overlay-c)) !important;
  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;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  scroll-behavior: smooth;
}

.sidepanel-left-align {
  top: 0;
  left: 0;
}

.sidepanel-right-align {
  top: 0;
  right: 0;
}

.sidepanel a {
  margin-top: 9px;
  padding: 0px 8px 0px 8px;
  text-decoration: none;
  font-size: 25px;
  background-color: hsl(var(--txt1-c));
  border-radius: 9px;
  display: block;
  transition: 0.3s;
}

.sidepanel a:hover {
  color: var(--btn1-c);
}

.sidepanel .closebtn-right {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  color: hsl(var(--highlight-c));
}

.sidepanel .closebtn-left {
  position: absolute;
  top: 0;
  left: 25px;
  font-size: 36px;
  color: hsl(var(--highlight-c));
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

*,
*::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));

*/
.ListContainer {
  display: block;
}

.multi-column-list {
  height: 69vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

.multi-column-list-item {
  background-color: transparent !important;
  border: 3px solid var(--theme-border-s);
  padding: 3px;
  width: 25vw;
  text-align: left;
  margin: 3px;
}

.multi-column-list-item a {
  color: hsl(var(--txt1-c));
  background-color: transparent !important;
}

.backBtn {
  position: absolute;
  left: 9px;
  top: 50vh;
}

.nextBtn {
  position: absolute;
  right: 9px;
  top: 50vh;
}

.ru_background {
  background: hsl(var(--bg-c));
  background-size: cover;
  background-blend-mode: darken;
}

.se_App {
  position: relative;
  text-align: center;
  min-height: 100vh;
  background-color: hsl(var(--bg-c));
}

.se_App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .se_App-logo {
    animation: se_App-logo-spin infinite 20s linear;
  }
}
.se_App-link {
  color: hsl(var(--highlight-c));
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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]!../../plugins/rudra-shader-editor-block/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]!../../plugins/rudra-shader-editor-block/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]!../../plugins/rudra-shader-editor-block/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;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/checkbox/CheckBox.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));

*/
.checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: var(--txt1-c);
}

.checkbox__input {
  margin-right: 5px;
}

.checkbox__label {
  font-size: 14px;
  color: var(--txt1-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/HorizontalBox/HorizontalBox.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************/
.horizontal-box {
  display: flex;
  align-items: center;
}

.horizontal-box-item {
  text-align: left;
}

/* Media query for screens smaller than 600px */
@media only screen and (max-width: 600px) {
  .horizontal-box {
    flex-direction: column;
    justify-content: space-around;
  }
  .horizontal-box-item {
    text-align: center;
  }
}
/* Media query for screens between 601px and 900px */
/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/DialogPopup.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));

*/
.confirm-box {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.message-box {
  background: hsl(var(--bg-overlay-c));
  color: hsl(var(--txt1-c));
  text-align: center;
  font-family: arial;
  font-size: 16px;
  line-height: 1.5;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.button-box {
  margin-top: 30px;
}

.yes-button,
.no-button {
  padding: 10px 20px;
  font-size: 16px;
  margin: 0 20px;
  border-radius: 5px;
  cursor: pointer;
}

.yes-button {
  background: green;
  color: #fff;
}

.no-button {
  background: red;
  color: #fff;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/shader_editor/components/CategoryWisePost/CategoryPostItem.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));

*/
.category-post-item-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid hsl(var(--border-c));
  background-color: hsl(var(--btn1-c), 0.12);
}
.category-post-item-container .item-label {
  font-weight: 600;
  margin-right: 8px;
  color: hsl(var(--txt1-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/shader_editor/components/CategoryWisePost/CategoryPostPanel.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));

*/
.category-post-panel-app {
  font-family: sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: flex-start;
  align-items: center;
}
.category-post-panel-app .filter-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
.category-post-panel-app .filter-container .available-slot {
  background-color: hsl(var(--highlight-c));
}
.category-post-panel-app #category-list {
  padding: 5px;
}
.category-post-panel-app .sport-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.category-post-panel-app .sport-list a {
  text-decoration: none;
  color: hsl(var(--txt1-c));
  background-color: transparent;
}
.category-post-panel-app .sport-list a:link, .category-post-panel-app .sport-list a:visited, .category-post-panel-app .sport-list a:hover {
  text-decoration: none;
}
.category-post-panel-app .sport-list a:link:active, .category-post-panel-app .sport-list a:visited:active {
  text-decoration: none;
}

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