/*! tailwindcss v4.0.14 | MIT License | https://tailwindcss.com */
@layer theme {

   :root,
   :host {
      --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --color-gray-100: oklch(.97 0 0);
      --color-gray-200: oklch(.94 0 0);
      --color-gray-300: oklch(.872 .01 258.338);
      --color-gray-400: oklch(.707 .022 261.325);
      --color-gray-700: oklch(.373 .034 259.733);
      --color-neutral-800: oklch(.269 0 0);
      --color-black: #000;
      --color-white: #fff;
      --spacing: .25rem;
      --container-5xl: 64rem;
      --text-xs: .75rem;
      --text-xs--line-height: calc(1/.75);
      --text-sm: .875rem;
      --text-sm--line-height: calc(1.25/.875);
      --text-base: 1rem;
      --text-base--line-height: calc(1.5/1);
      --text-2xl: 1.5rem;
      --text-3xl: 1.875rem;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --ease-in: cubic-bezier(.4, 0, 1, 1);
      --default-transition-duration: .15s;
      --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
      --default-font-family: var(--font-sans);
      --default-font-feature-settings: var(--font-sans--font-feature-settings);
      --default-font-variation-settings: var(--font-sans--font-variation-settings);
      --default-mono-font-family: var(--font-mono);
      --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
      --default-mono-font-variation-settings: var(--font-mono--font-variation-settings)
   }
}

@layer base {

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

   ::file-selector-button {
      box-sizing: border-box;
      border: 0 solid;
      margin: 0;
      padding: 0
   }

   html,
   :host {
      -webkit-text-size-adjust: 100%;
      tab-size: 4;
      line-height: 1.5;
      font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
      font-feature-settings: var(--default-font-feature-settings, normal);
      font-variation-settings: var(--default-font-variation-settings, normal);
      -webkit-tap-highlight-color: transparent
   }

   body {
      line-height: inherit
   }

   hr {
      height: 0;
      color: inherit;
      border-top-width: 1px
   }

   abbr:where([title]) {
      -webkit-text-decoration: underline dotted;
      text-decoration: underline dotted
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
      font-size: inherit;
      font-weight: inherit
   }

   a {
      color: inherit;
      -webkit-text-decoration: inherit;
      -webkit-text-decoration: inherit;
      -webkit-text-decoration: inherit;
      text-decoration: inherit
   }

   b,
   strong {
      font-weight: bolder
   }

   code,
   kbd,
   samp,
   pre {
      font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
      font-feature-settings: var(--default-mono-font-feature-settings, normal);
      font-variation-settings: var(--default-mono-font-variation-settings, normal);
      font-size: 1em
   }

   small {
      font-size: 80%
   }

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

   sub {
      bottom: -.25em
   }

   sup {
      top: -.5em
   }

   table {
      text-indent: 0;
      border-color: inherit;
      border-collapse: collapse
   }

   :-moz-focusring {
      outline: auto
   }

   progress {
      vertical-align: baseline
   }

   summary {
      display: list-item
   }

   ol,
   ul,
   menu {
      list-style: none
   }

   img,
   svg,
   video,
   canvas,
   audio,
   iframe,
   embed,
   object {
      vertical-align: middle;
      display: block
   }

   img,
   video {
      max-width: 100%;
      height: auto
   }

   button,
   input,
   select,
   optgroup,
   textarea {
      font: inherit;
      font-feature-settings: inherit;
      font-variation-settings: inherit;
      letter-spacing: inherit;
      color: inherit;
      opacity: 1;
      background-color: #0000;
      border-radius: 0
   }

   ::file-selector-button {
      font: inherit;
      font-feature-settings: inherit;
      font-variation-settings: inherit;
      letter-spacing: inherit;
      color: inherit;
      opacity: 1;
      background-color: #0000;
      border-radius: 0
   }

   :where(select:is([multiple], [size])) optgroup {
      font-weight: bolder
   }

   :where(select:is([multiple], [size])) optgroup option {
      padding-inline-start: 20px
   }

   ::file-selector-button {
      margin-inline-end: 4px
   }

   ::placeholder {
      opacity: 1;
      color: color-mix(in oklab, currentColor 50%, transparent)
   }

   textarea {
      resize: vertical
   }

   ::-webkit-search-decoration {
      -webkit-appearance: none
   }

   ::-webkit-date-and-time-value {
      min-height: 1lh;
      text-align: inherit
   }

   ::-webkit-datetime-edit {
      display: inline-flex
   }

   ::-webkit-datetime-edit-fields-wrapper {
      padding: 0
   }

   ::-webkit-datetime-edit {
      padding-block: 0
   }

   ::-webkit-datetime-edit-year-field {
      padding-block: 0
   }

   ::-webkit-datetime-edit-month-field {
      padding-block: 0
   }

   ::-webkit-datetime-edit-day-field {
      padding-block: 0
   }

   ::-webkit-datetime-edit-hour-field {
      padding-block: 0
   }

   ::-webkit-datetime-edit-minute-field {
      padding-block: 0
   }

   ::-webkit-datetime-edit-second-field {
      padding-block: 0
   }

   ::-webkit-datetime-edit-millisecond-field {
      padding-block: 0
   }

   ::-webkit-datetime-edit-meridiem-field {
      padding-block: 0
   }

   :-moz-ui-invalid {
      box-shadow: none
   }

   button,
   input:where([type=button], [type=reset], [type=submit]) {
      appearance: button
   }

   ::file-selector-button {
      appearance: button
   }

   ::-webkit-inner-spin-button {
      height: auto
   }

   ::-webkit-outer-spin-button {
      height: auto
   }

   [hidden]:where(:not([hidden=until-found])) {
      display: none !important
   }
}

@layer components;

@layer utilities {
   .pointer-events-none {
      pointer-events: none
   }

   .collapse {
      visibility: collapse
   }

   .invisible {
      visibility: hidden
   }

   .visible {
      visibility: visible
   }

   .sr-only {
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      position: absolute;
      overflow: hidden
   }

   .absolute {
      position: absolute
   }

   .fixed {
      position: fixed
   }

   .relative {
      position: relative
   }

   .static {
      position: static
   }

   .sticky {
      position: sticky
   }

   .inset-x-0 {
      inset-inline: calc(var(--spacing)*0)
   }

   .inset-y-0 {
      inset-block: calc(var(--spacing)*0)
   }

   .start-0 {
      inset-inline-start: calc(var(--spacing)*0)
   }

   .start-50 {
      inset-inline-start: calc(var(--spacing)*50)
   }

   .end-0 {
      inset-inline-end: calc(var(--spacing)*0)
   }

   .top-\(--nav-1-height\) {
      top: var(--nav-1-height)
   }

   .top-\(--nav-2-height\) {
      top: var(--nav-2-height)
   }

   .top-0 {
      top: calc(var(--spacing)*0)
   }

   .top-50 {
      top: calc(var(--spacing)*50)
   }

   .right-0 {
      right: calc(var(--spacing)*0)
   }

   .right-3 {
      right: calc(var(--spacing)*3)
   }

   .bottom-0 {
      bottom: calc(var(--spacing)*0)
   }

   .left-0 {
      left: calc(var(--spacing)*0)
   }

   .isolate {
      isolation: isolate
   }

   .z-\[2\] {
      z-index: 2
   }

   .z-\[11\] {
      z-index: 11
   }

   .col-6 {
      grid-column: 6
   }

   .container {
      width: 100%
   }

   @media (width>=40rem) {
      .container {
         max-width: 40rem
      }
   }

   @media (width>=48rem) {
      .container {
         max-width: 48rem
      }
   }

   @media (width>=64rem) {
      .container {
         max-width: 64rem
      }
   }

   @media (width>=80rem) {
      .container {
         max-width: 80rem
      }
   }

   @media (width>=96rem) {
      .container {
         max-width: 96rem
      }
   }

   .m-3 {
      margin: calc(var(--spacing)*3)
   }

   .mx-2 {
      margin-inline: calc(var(--spacing)*2)
   }

   .mx-auto {
      margin-inline: auto
   }

   .my-3 {
      margin-block: calc(var(--spacing)*3)
   }

   .my-auto {
      margin-block: auto
   }

   .ms-0 {
      margin-inline-start: calc(var(--spacing)*0)
   }

   .ms-2 {
      margin-inline-start: calc(var(--spacing)*2)
   }

   .ms-3 {
      margin-inline-start: calc(var(--spacing)*3)
   }

   .ms-4 {
      margin-inline-start: calc(var(--spacing)*4)
   }

   .ms-5 {
      margin-inline-start: calc(var(--spacing)*5)
   }

   .ms-auto {
      margin-inline-start: auto
   }

   .me-0 {
      margin-inline-end: calc(var(--spacing)*0)
   }

   .me-1 {
      margin-inline-end: calc(var(--spacing)*1)
   }

   .me-2 {
      margin-inline-end: calc(var(--spacing)*2)
   }

   .me-3 {
      margin-inline-end: calc(var(--spacing)*3)
   }

   .me-5 {
      margin-inline-end: calc(var(--spacing)*5)
   }

   .me-auto {
      margin-inline-end: auto
   }

   .mt-2 {
      margin-top: calc(var(--spacing)*2)
   }

   .mt-3 {
      margin-top: calc(var(--spacing)*3)
   }

   .mt-4 {
      margin-top: calc(var(--spacing)*4)
   }

   .mt-5 {
      margin-top: calc(var(--spacing)*5)
   }

   .mt-6 {
      margin-top: calc(var(--spacing)*6)
   }

   .mt-8 {
      margin-top: calc(var(--spacing)*8)
   }

   .mt-10 {
      margin-top: calc(var(--spacing)*10)
   }

   .mt-auto {
      margin-top: auto
   }

   .mr-3 {
      margin-right: calc(var(--spacing)*3)
   }

   .mb-0 {
      margin-bottom: calc(var(--spacing)*0)
   }

   .mb-1 {
      margin-bottom: calc(var(--spacing)*1)
   }

   .mb-2 {
      margin-bottom: calc(var(--spacing)*2)
   }

   .mb-3 {
      margin-bottom: calc(var(--spacing)*3)
   }

   .mb-4 {
      margin-bottom: calc(var(--spacing)*4)
   }

   .mb-5 {
      margin-bottom: calc(var(--spacing)*5)
   }

   .mb-6 {
      margin-bottom: calc(var(--spacing)*6)
   }

   .ml-3 {
      margin-left: calc(var(--spacing)*3)
   }

   .ml-auto {
      margin-left: auto
   }

   .block {
      display: block
   }

   .contents {
      display: contents
   }

   .flex {
      display: flex
   }

   .grid {
      display: grid
   }

   .hidden {
      display: none
   }

   .inline {
      display: inline
   }

   .inline-block {
      display: inline-block
   }

   .list-item {
      display: list-item
   }

   .table {
      display: table
   }

   .\!size-7 {
      width: calc(var(--spacing)*7) !important;
      height: calc(var(--spacing)*7) !important
   }

   .size-1 {
      width: calc(var(--spacing)*1);
      height: calc(var(--spacing)*1)
   }

   .size-5 {
      width: calc(var(--spacing)*5);
      height: calc(var(--spacing)*5)
   }

   .size-7 {
      width: calc(var(--spacing)*7);
      height: calc(var(--spacing)*7)
   }

   .size-8 {
      width: calc(var(--spacing)*8);
      height: calc(var(--spacing)*8)
   }

   .\!h-4 {
      height: calc(var(--spacing)*4) !important
   }

   .\!h-5 {
      height: calc(var(--spacing)*5) !important
   }

   .\!h-\[18px\] {
      height: 18px !important
   }

   .h-\(--nav-1-height\) {
      height: var(--nav-1-height)
   }

   .h-\(--nav-2-height\) {
      height: var(--nav-2-height)
   }

   .h-\(--nav-3-height\) {
      height: var(--nav-3-height)
   }

   .h-8 {
      height: calc(var(--spacing)*8)
   }

   .h-10 {
      height: calc(var(--spacing)*10)
   }

   .h-100 {
      height: calc(var(--spacing)*100)
   }

   .h-\[calc\(100vh-var\(--nav-2-height\)-var\(--nav-1-height\)\)\] {
      height: calc(100vh - var(--nav-2-height) - var(--nav-1-height))
   }

   .h-full {
      height: 100%
   }

   .w-\(--container\) {
      width: var(--container)
   }

   .w-10 {
      width: calc(var(--spacing)*10)
   }

   .w-100 {
      width: calc(var(--spacing)*100)
   }

   .w-fit {
      width: fit-content
   }

   .w-full {
      width: 100%
   }

   .max-w-5xl {
      max-width: var(--container-5xl)
   }

   .max-w-\[600px\] {
      max-width: 600px
   }

   .min-w-fit {
      min-width: fit-content
   }

   .flex-shrink,
   .shrink {
      flex-shrink: 1
   }

   .flex-grow,
   .grow {
      flex-grow: 1
   }

   .rotate-74 {
      rotate: 74deg
   }

   .rotate-90 {
      rotate: 90deg
   }

   .rotate-180 {
      rotate: 180deg
   }

   .rotate-186 {
      rotate: 186deg
   }

   .rotate-270 {
      rotate: 270deg
   }

   .transform {
      transform: var(--tw-rotate-x)var(--tw-rotate-y)var(--tw-rotate-z)var(--tw-skew-x)var(--tw-skew-y)
   }

   .cursor-pointer {
      cursor: pointer
   }

   .resize {
      resize: both
   }

   .grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr))
   }

   .flex-col {
      flex-direction: column
   }

   .flex-nowrap {
      flex-wrap: nowrap
   }

   .flex-wrap {
      flex-wrap: wrap
   }

   .place-items-center {
      place-items: center
   }

   .items-center {
      align-items: center
   }

   .justify-center {
      justify-content: center
   }

   .gap-1 {
      gap: calc(var(--spacing)*1)
   }

   .gap-1\.5 {
      gap: calc(var(--spacing)*1.5)
   }

   .gap-2 {
      gap: calc(var(--spacing)*2)
   }

   .gap-3 {
      gap: calc(var(--spacing)*3)
   }

   .gap-6 {
      gap: calc(var(--spacing)*6)
   }

   .gap-8 {
      gap: calc(var(--spacing)*8)
   }

   :where(.space-y-2>:not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))
   }

   .\!gap-x-1 {
      column-gap: calc(var(--spacing)*1) !important
   }

   :where(.space-x-4>:not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))
   }

   :where(.space-x-6>:not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing)*6)*var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-x-reverse)))
   }

   :where(.divide-y>:not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px*var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px*calc(1 - var(--tw-divide-y-reverse)))
   }

   :where(.divide-gray-300>:not(:last-child)) {
      border-color: var(--color-gray-300)
   }

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

   .overflow-hidden {
      overflow: hidden
   }

   .overflow-x-auto {
      overflow-x: auto
   }

   .rounded {
      border-radius: .25rem
   }

   .border {
      border-style: var(--tw-border-style);
      border-width: 1px
   }

   .border-0 {
      border-style: var(--tw-border-style);
      border-width: 0
   }

   .border-t {
      border-top-style: var(--tw-border-style);
      border-top-width: 1px
   }

   .border-b {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px
   }

   .border-black {
      border-color: var(--color-black)
   }

   .border-gray-300 {
      border-color: var(--color-gray-300)
   }

   .border-gray-700 {
      border-color: var(--color-gray-700)
   }

   .bg-\[\#2c9d30\] {
      background-color: #3e6e93
         /*#333*/
   }

   .bg-\[\#031926\] {
      background-color: #3e6e93
         /*#031926*/
   }

   .bg-\[\#318634\] {
      background-color: #318634
   }

   .bg-gray-200 {
      background-color: var(--color-gray-200)
   }

   .bg-neutral-800 {
      background-color: var(--color-neutral-800)
   }

   .bg-transparent {
      background-color: #0000
   }

   .bg-white {
      background-color: var(--color-white)
   }

   .bg-gradient-to-l {
      --tw-gradient-position: to left in oklab;
      background-image: linear-gradient(var(--tw-gradient-stops))
   }

   .bg-gradient-to-r {
      --tw-gradient-position: to right in oklab;
      background-image: linear-gradient(var(--tw-gradient-stops))
   }

   .from-\[\#2c9d30\] {
      --tw-gradient-from: #2c9d30;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
   }

   .from-\[\#031926\] {
      --tw-gradient-from: #3e6e93
         /*#031926;*/
         --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
   }

   .to-transparent {
      --tw-gradient-to: transparent;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from)var(--tw-gradient-from-position), var(--tw-gradient-to)var(--tw-gradient-to-position))
   }

   .p-2 {
      padding: calc(var(--spacing)*2)
   }

   .p-3 {
      padding: calc(var(--spacing)*3)
   }

   .p-4 {
      padding: calc(var(--spacing)*4)
   }

   .p-5 {
      padding: calc(var(--spacing)*5)
   }

   .px-0 {
      padding-inline: calc(var(--spacing)*0)
   }

   .px-1 {
      padding-inline: calc(var(--spacing)*1)
   }

   .px-2 {
      padding-inline: calc(var(--spacing)*2)
   }

   .px-3 {
      padding-inline: calc(var(--spacing)*3)
   }

   .px-4 {
      padding-inline: calc(var(--spacing)*4)
   }

   .\!py-2\.5 {
      padding-block: calc(var(--spacing)*2.5) !important
   }

   .py-0 {
      padding-block: calc(var(--spacing)*0)
   }

   .py-1\.5 {
      padding-block: calc(var(--spacing)*1.5)
   }

   .py-2 {
      padding-block: calc(var(--spacing)*2)
   }

   .py-3 {
      padding-block: calc(var(--spacing)*3)
   }

   .py-4 {
      padding-block: calc(var(--spacing)*4)
   }

   .py-6 {
      padding-block: calc(var(--spacing)*6)
   }

   .py-12 {
      padding-block: calc(var(--spacing)*12)
   }

   .ps-0 {
      padding-inline-start: calc(var(--spacing)*0)
   }

   .ps-1 {
      padding-inline-start: calc(var(--spacing)*1)
   }

   .pe-0 {
      padding-inline-end: calc(var(--spacing)*0)
   }

   .pe-4 {
      padding-inline-end: calc(var(--spacing)*4)
   }

   .pe-7 {
      padding-inline-end: calc(var(--spacing)*7)
   }

   .pt-0 {
      padding-top: calc(var(--spacing)*0)
   }

   .pt-2 {
      padding-top: calc(var(--spacing)*2)
   }

   .pt-5 {
      padding-top: calc(var(--spacing)*5)
   }

   .pt-6 {
      padding-top: calc(var(--spacing)*6)
   }

   .pr-4 {
      padding-right: calc(var(--spacing)*4)
   }

   .pb-0 {
      padding-bottom: calc(var(--spacing)*0)
   }

   .pb-1 {
      padding-bottom: calc(var(--spacing)*1)
   }

   .pb-2 {
      padding-bottom: calc(var(--spacing)*2)
   }

   .pb-3 {
      padding-bottom: calc(var(--spacing)*3)
   }

   .pb-4 {
      padding-bottom: calc(var(--spacing)*4)
   }

   .pb-5 {
      padding-bottom: calc(var(--spacing)*5)
   }

   .pb-8 {
      padding-bottom: calc(var(--spacing)*8)
   }

   .text-center {
      text-align: center
   }

   .text-end {
      text-align: end
   }

   .text-right {
      text-align: right
   }

   .align-middle {
      vertical-align: middle
   }

   .text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height))
   }

   .text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height))
   }

   .text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height))
   }

   .font-bold {
      --tw-font-weight: var(--font-weight-bold);
      font-weight: var(--font-weight-bold)
   }

   .font-semibold {
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold)
   }

   .whitespace-nowrap {
      white-space: nowrap
   }

   .text-gray-300 {
      color: var(--color-gray-300)
   }

   .text-gray-400 {
      color: var(--color-gray-400)
   }

   .text-inherit {
      color: inherit
   }

   .text-white {
      color: var(--color-white)
   }

   .capitalize {
      text-transform: capitalize
   }

   .lowercase {
      text-transform: lowercase
   }

   .uppercase {
      text-transform: uppercase
   }

   .italic {
      font-style: italic
   }

   .ordinal {
      --tw-ordinal: ordinal;
      font-variant-numeric: var(--tw-ordinal, )var(--tw-slashed-zero, )var(--tw-numeric-figure, )var(--tw-numeric-spacing, )var(--tw-numeric-fraction, )
   }

   .overline {
      text-decoration-line: overline
   }

   .underline {
      text-decoration-line: underline
   }

   .opacity-1 {
      opacity: .01
   }

   .opacity-4 {
      opacity: .04
   }

   .opacity-8 {
      opacity: .08
   }

   .opacity-50 {
      opacity: .5
   }

   .shadow {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
   }

   .shadow-lg {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
   }

   .ring {
      --tw-ring-shadow: var(--tw-ring-inset, )0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color, currentColor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
   }

   .outline {
      outline-style: var(--tw-outline-style);
      outline-width: 1px
   }

   .blur {
      --tw-blur: blur(8px);
      filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
   }

   .drop-shadow {
      --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a)drop-shadow(0 1px 1px #0000000f);
      filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
   }

   .grayscale {
      --tw-grayscale: grayscale(100%);
      filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
   }

   .invert {
      --tw-invert: invert(100%);
      filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
   }

   .filter {
      filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, )
   }

   .filter\! {
      filter: var(--tw-blur, )var(--tw-brightness, )var(--tw-contrast, )var(--tw-grayscale, )var(--tw-hue-rotate, )var(--tw-invert, )var(--tw-saturate, )var(--tw-sepia, )var(--tw-drop-shadow, ) !important
   }

   .transition {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration))
   }

   .transition-colors {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration))
   }

   .transition-opacity {
      transition-property: opacity;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration))
   }

   .ease-in {
      --tw-ease: var(--ease-in);
      transition-timing-function: var(--ease-in)
   }

   .select-all {
      -webkit-user-select: all;
      user-select: all
   }

   .select-none {
      -webkit-user-select: none;
      user-select: none
   }

   .\[--nav-1-height\:44px\] {
      --nav-1-height: 44px
   }

   .\[--nav-2-height\:60px\] {
      --nav-2-height: 60px
   }

   .\[--nav-3-height\:40px\] {
      --nav-3-height: 40px
   }

   .group-aria-expanded\:block:is(:where(.group)[aria-expanded=true] *) {
      display: block
   }

   .group-aria-expanded\:hidden:is(:where(.group)[aria-expanded=true] *) {
      display: none
   }

   .placeholder\:text-black\/90::placeholder {
      color: color-mix(in oklab, var(--color-black)90%, transparent)
   }

   @media (hover:hover) {
      .hover\:bg-\[\#27902b\]:hover {
         background-color: #27902b
      }

      .hover\:bg-gray-100:hover {
         background-color: var(--color-gray-100)
      }

      .hover\:bg-gray-200:hover {
         background-color: var(--color-gray-200)
      }

      .hover\:text-white:hover {
         color: var(--color-white)
      }

      .hover\:underline:hover {
         text-decoration-line: underline
      }

      .hover\:opacity-80:hover {
         opacity: .8
      }
   }

   .focus\:border-\[\#2c9d30\]:focus {
      border-color: #2c9d30
   }

   .focus\:outline-hidden:focus {
      --tw-outline-style: none;
      outline-style: none
   }

   @media (forced-colors:active) {
      .focus\:outline-hidden:focus {
         outline-offset: 2px;
         outline: 2px solid #0000
      }
   }

   .has-\[\[data-visible\]\]\:h-full:has([data-visible]) {
      height: 100%
   }

   .data-\[visible\]\:flex[data-visible] {
      display: flex
   }

   @media (width<64rem) {
      .max-lg\:absolute {
         position: absolute
      }

      .max-lg\:sticky {
         position: sticky
      }

      .max-lg\:left-0 {
         left: calc(var(--spacing)*0)
      }

      .max-lg\:mt-1 {
         margin-top: calc(var(--spacing)*1)
      }

      .max-lg\:mb-2 {
         margin-bottom: calc(var(--spacing)*2)
      }

      .max-lg\:hidden {
         display: none
      }

      .max-lg\:flex-col {
         flex-direction: column
      }

      :where(.max-lg\:divide-y>:not(:last-child)) {
         --tw-divide-y-reverse: 0;
         border-bottom-style: var(--tw-border-style);
         border-top-style: var(--tw-border-style);
         border-top-width: calc(1px*var(--tw-divide-y-reverse));
         border-bottom-width: calc(1px*calc(1 - var(--tw-divide-y-reverse)))
      }

      .max-lg\:overflow-y-auto {
         overflow-y: auto
      }

      .max-lg\:border {
         border-style: var(--tw-border-style);
         border-width: 1px
      }

      .max-lg\:bg-white {
         background-color: var(--color-white)
      }

      .max-lg\:p-4 {
         padding: calc(var(--spacing)*4)
      }

      .max-lg\:shadow-lg {
         --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
         box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
      }

      .max-lg\:data-\[visible\]\:flex[data-visible] {
         display: flex
      }
   }

   @media (width<48rem) {
      .max-md\:hidden {
         display: none
      }

      .max-md\:group-aria-expanded\:-rotate-90:is(:where(.group)[aria-expanded=true] *) {
         rotate: -90deg
      }
   }

   @media (width>=48rem) {
      .md\:mb-0 {
         margin-bottom: calc(var(--spacing)*0)
      }

      .md\:hidden {
         display: none
      }

      .md\:w-full {
         width: 100%
      }

      .md\:max-w-\[226px\] {
         max-width: 226px
      }

      .md\:grid-cols-2 {
         grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .md\:flex-row {
         flex-direction: row
      }

      .md\:gap-10 {
         gap: calc(var(--spacing)*10)
      }

      .md\:\[--nav-2-height\:68px\] {
         --nav-2-height: 68px
      }
   }

   @media (width>=64rem) {
      .lg\:top-0 {
         top: calc(var(--spacing)*0)
      }

      .lg\:mr-6 {
         margin-right: calc(var(--spacing)*6)
      }

      .lg\:mr-10 {
         margin-right: calc(var(--spacing)*10)
      }

      .lg\:ml-6 {
         margin-left: calc(var(--spacing)*6)
      }

      .lg\:ml-7 {
         margin-left: calc(var(--spacing)*7)
      }

      .lg\:ml-auto {
         margin-left: auto
      }

      .lg\:hidden {
         display: none
      }

      .lg\:\!h-4 {
         height: calc(var(--spacing)*4) !important
      }

      .lg\:h-\[519px\] {
         height: 519px
      }

      .lg\:h-full {
         height: 100%
      }

      .lg\:max-w-fit {
         max-width: fit-content
      }

      .lg\:min-w-\[350px\] {
         min-width: 350px
      }

      .lg\:grid-cols-4 {
         grid-template-columns: repeat(4, minmax(0, 1fr))
      }

      .lg\:flex-row {
         flex-direction: row
      }

      .lg\:items-center {
         align-items: center
      }

      .lg\:items-start {
         align-items: flex-start
      }

      .lg\:justify-items-center {
         justify-items: center
      }

      .lg\:gap-6 {
         gap: calc(var(--spacing)*6)
      }

      .lg\:gap-10 {
         gap: calc(var(--spacing)*10)
      }

      .lg\:overflow-y-auto {
         overflow-y: auto
      }

      .lg\:border-b-transparent {
         border-bottom-color: #0000
      }

      .lg\:bg-gray-100 {
         background-color: var(--color-gray-100)
      }

      .lg\:text-sm {
         font-size: var(--text-sm);
         line-height: var(--tw-leading, var(--text-sm--line-height))
      }
   }

   .\[\&_a\]\:flex a {
      display: flex
   }

   .\[\&_a\]\:h-full a {
      height: 100%
   }

   .\[\&_a\]\:items-center a {
      align-items: center
   }

   .\[\&_a\]\:border-gray-300 a {
      border-color: var(--color-gray-300)
   }

   .\[\&_a\]\:px-3 a {
      padding-inline: calc(var(--spacing)*3)
   }

   .\[\&_a\]\:px-3\.5 a {
      padding-inline: calc(var(--spacing)*3.5)
   }

   .\[\&_a\]\:py-2 a {
      padding-block: calc(var(--spacing)*2)
   }

   .\[\&_a\]\:py-4 a {
      padding-block: calc(var(--spacing)*4)
   }

   .\[\&_a\]\:transition-colors a {
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration))
   }

   @media (hover:hover) {
      .\[\&_a\]\:hover\:bg-\[\#2c9d30\] a:hover {
         background-color: #2c9d30
      }

      .\[\&_a\]\:hover\:underline a:hover {
         text-decoration-line: underline
      }
   }

   @media (width>=64rem) {
      .lg\:\[\&_a\]\:px-5 a {
         padding-inline: calc(var(--spacing)*5)
      }
   }

   @media (hover:hover) {
      .\[\&_a\:not\(\.sticky\)\]\:hover\:bg-gray-200 a:not(.sticky):hover {
         background-color: var(--color-gray-200)
      }
   }

   @media (width>=64rem) {
      .lg\:\[\&_a\:not\(\.sticky\)\]\:border-l a:not(.sticky) {
         border-left-style: var(--tw-border-style);
         border-left-width: 1px
      }
   }

   .\[\&\>div\]\:flex>div {
      display: flex
   }

   .\[\&\>div\]\:grow>div {
      flex-grow: 1
   }

   .\[\&\>div\]\:flex-col>div {
      flex-direction: column
   }

   .\[\&\>div\>div\]\:grow>div>div {
      flex-grow: 1
   }
}

@property --tw-rotate-x {
   syntax: "*";
   inherits: false;
   initial-value: rotateX(0)
}

@property --tw-rotate-y {
   syntax: "*";
   inherits: false;
   initial-value: rotateY(0)
}

@property --tw-rotate-z {
   syntax: "*";
   inherits: false;
   initial-value: rotateZ(0)
}

@property --tw-skew-x {
   syntax: "*";
   inherits: false;
   initial-value: skewX(0)
}

@property --tw-skew-y {
   syntax: "*";
   inherits: false;
   initial-value: skewY(0)
}

@property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
   initial-value: 0
}

@property --tw-space-x-reverse {
   syntax: "*";
   inherits: false;
   initial-value: 0
}

@property --tw-divide-y-reverse {
   syntax: "*";
   inherits: false;
   initial-value: 0
}

@property --tw-border-style {
   syntax: "*";
   inherits: false;
   initial-value: solid
}

@property --tw-gradient-position {
   syntax: "*";
   inherits: false
}

@property --tw-gradient-from {
   syntax: "<color>";
   inherits: false;
   initial-value: #0000
}

@property --tw-gradient-via {
   syntax: "<color>";
   inherits: false;
   initial-value: #0000
}

@property --tw-gradient-to {
   syntax: "<color>";
   inherits: false;
   initial-value: #0000
}

@property --tw-gradient-stops {
   syntax: "*";
   inherits: false
}

@property --tw-gradient-via-stops {
   syntax: "*";
   inherits: false
}

@property --tw-gradient-from-position {
   syntax: "<length-percentage>";
   inherits: false;
   initial-value: 0%
}

@property --tw-gradient-via-position {
   syntax: "<length-percentage>";
   inherits: false;
   initial-value: 50%
}

@property --tw-gradient-to-position {
   syntax: "<length-percentage>";
   inherits: false;
   initial-value: 100%
}

@property --tw-font-weight {
   syntax: "*";
   inherits: false
}

@property --tw-ordinal {
   syntax: "*";
   inherits: false
}

@property --tw-slashed-zero {
   syntax: "*";
   inherits: false
}

@property --tw-numeric-figure {
   syntax: "*";
   inherits: false
}

@property --tw-numeric-spacing {
   syntax: "*";
   inherits: false
}

@property --tw-numeric-fraction {
   syntax: "*";
   inherits: false
}

@property --tw-shadow {
   syntax: "*";
   inherits: false;
   initial-value: 0 0 #0000
}

@property --tw-shadow-color {
   syntax: "*";
   inherits: false
}

@property --tw-inset-shadow {
   syntax: "*";
   inherits: false;
   initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
   syntax: "*";
   inherits: false
}

@property --tw-ring-color {
   syntax: "*";
   inherits: false
}

@property --tw-ring-shadow {
   syntax: "*";
   inherits: false;
   initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
   syntax: "*";
   inherits: false
}

@property --tw-inset-ring-shadow {
   syntax: "*";
   inherits: false;
   initial-value: 0 0 #0000
}

@property --tw-ring-inset {
   syntax: "*";
   inherits: false
}

@property --tw-ring-offset-width {
   syntax: "<length>";
   inherits: false;
   initial-value: 0
}

@property --tw-ring-offset-color {
   syntax: "*";
   inherits: false;
   initial-value: #fff
}

@property --tw-ring-offset-shadow {
   syntax: "*";
   inherits: false;
   initial-value: 0 0 #0000
}

@property --tw-outline-style {
   syntax: "*";
   inherits: false;
   initial-value: solid
}

@property --tw-blur {
   syntax: "*";
   inherits: false
}

@property --tw-brightness {
   syntax: "*";
   inherits: false
}

@property --tw-contrast {
   syntax: "*";
   inherits: false
}

@property --tw-grayscale {
   syntax: "*";
   inherits: false
}

@property --tw-hue-rotate {
   syntax: "*";
   inherits: false
}

@property --tw-invert {
   syntax: "*";
   inherits: false
}

@property --tw-opacity {
   syntax: "*";
   inherits: false
}

@property --tw-saturate {
   syntax: "*";
   inherits: false
}

@property --tw-sepia {
   syntax: "*";
   inherits: false
}

@property --tw-drop-shadow {
   syntax: "*";
   inherits: false
}

@property --tw-ease {
   syntax: "*";
   inherits: false
}

/* Custom CSS Starts from Here */
:root {
   --clr-text: #000;
   --clr-grey-100: #eeeeee;
   --clr-dark-100: #f4f4f4;
   --clr-neutral-50: #fff;
   --background-primary: #fff;
   --background-secondary: #f9f9fb;
   --background-tertiary: #fff;
   --background-toc-active: #ebeaea;
   --background-mark-yellow: rgba(199, 183, 0, .4);
   --background-mark-green: rgba(0, 208, 97, .4);
   --background-information: rgba(0, 133, 242, .1);
   --background-warning: rgba(255, 42, 81, .1);
   --background-critical: rgba(211, 0, 56, .1);
   --background-success: rgba(0, 121, 54, .1);
   --clr-neutral-100: #fbfbfd;
   --clr-neutral-150: #f4f4f4;
   --clr-neutral-200: #eeeeee;
   --clr-neutral-225: #C5C5C5;
   --clr-neutral-250: #b5b4b4;
   --clr-neutral-250: #b5b4b4;
   --clr-neutral-300: #8b8b8b;
   --clr-neutral-350: #444f55;
   --clr-neutral-400: #333232;
   --clr-neutral-500: #021f30;
   --clr-neutral-600: #1e2b32;
   --clr-neutral-700: #232323;
   --clr-neutral-750: #031926;
   --clr-neutral-800: #06141c;
   --clr-neutral-900: #1c1d21;
   --clr-secondary-200: #e3f3cf;
   --clr-accent-25: #f4fff5;
   --clr-accent-50: #e4ffe5;
   --clr-accent-100: #cfe9d0;
   --clr-accent-200: #70ff00;
   --clr-accent-400: #3ff360;
   --clr-accent-500: #33c34e;
   --clr-accent-600: #57b25a;
   --clr-accent-700: #04af2f;
   --clr-accent-800: #2c9d30;
   --clr-accent-900: #239327;
   --clr-beige: hsl(54, 79%, 58%, 0.6);
   --clr-yellow-200: #fefad8;
   --clr-yellow: #FFE529;
   --clr-yellow-400: #FFE529;
   --clr-orange-100: #ffede0;
   --clr-orange-200: #fcdbc4;
   --clr-orange-300: #ff9175;
   --clr-orange-400: #f46f14;
   --clr-blue-100: #f4fbff;
   --clr-blue-150: #e1f6ff;
   --clr-blue-200: #bfe4f5;
   --clr-blue-300: #aed3ff;
   --clr-blue-400: #0196da;
   --clr-blue-700: #4fa9c5;
   --clr-blue-900: #233743;
   --clr-danger-400: #ae4136;
   --clr-red-100: #ffaf96;
   --clr-red-200: #e65326;
   --clr-red-300: #f9440d;
   --clr-grey-100: #eeeeee;

   --ff-poppins: "Poppins", sans-serif;
   --ff-lato: "Lato", sans-serif;
   --ff-raleway: "Raleway", sans-serif;
   --ff-nunito: "Nunito", sans-serif;

   --fs-900: 2.5rem;
   --fs-850: 1.688rem;
   --fs-800: 2.5rem;
   --fs-750: 2rem;
   --fs-700: 1.65rem;
   --fs-600: 1.25rem;
   --fs-550: 1.125rem;
   --fs-500: 1rem;
   --fs-400: 1rem;
   --fs-300: 0.875rem;
   --fs-200: 0.775rem;

   --container-width: 1413px;

   --container: min(calc(100% - 1.875rem * 2), var(--container-width));

   --header-height: 72px;
   --accent-header-height: 45px;
   --elem-radius: 0.25rem;
}

@media(min-width: 32rem) {
   :root {
      --fs-900: 3rem;
      --fs-850: 1.9rem;
      --fs-800: 3rem;
      --fs-750: 2rem;
      --fs-700: 1.6rem;
      --fs-600: 1.37rem;
      --fs-650: 1.47rem;
   }
}

@media(min-width: 40rem) {
   :root {
      --fs-900: 3.75rem;
      --fs-850: 2.313rem;
      --fs-800: 3.5rem;
      --fs-750: 2.5rem;
      --fs-700: 1.9rem;
      --fs-650: 1.7rem;
      --fs-600: 1.563rem;
      --fs-550: 1.25rem;
      --fs-500: 1.25rem;
   }
}

@layer base {

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

   * {
      margin: 0;
      padding: 0;
      font: inherit;
   }

   ul {
      list-style: none;
      padding: 0;
   }

   html {
      scroll-behavior: smooth;
   }

   a {
      text-decoration-skip-ink: auto;
      text-decoration: none;
      color: currentColor;
   }

   .nav a:not(.button):not(.cart-item):not(.dropdown__item a):hover {
      color: var(--clr-accent-700);
   }

   img,
   video,
   svg {
      max-width: 100%;
      display: block;
   }
}

body {
   min-height: 100vh;
   line-height: 1.5;
   font-family: var(--ff-poppins);
   background-color: var(--clr-neutral-100);
   font-family: Verdana, sans-serif;
   font-size: 15px;
   --container: min(99%, 1780px);
   margin: 0;
}

h1 {
   font-size: 2rem;
}

body {
   overflow-x: hidden;
}

h1,
h2 {
   font-family: var(--ff-lato);
   font-weight: bold;
}

svg path,
svg {
   transition: 0.25s ease;
}

b {
   font-weight: 700;
}

/* utilities */

.flow {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.flow .button {
   align-self: flex-start;
}

h2 {
   line-height: 1;
}

.uppercase {
   text-transform: uppercase;
}

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

.inline-block {
   display: inline-block;
}

.bg-white {
   background-color: var(--clr-neutral-50);
}

.bg-neutral-800 {
   background-color: #3e6e93;
   /*var(--clr-neutral-800);*/
}

.flex-group {
   display: flex;
   align-items: center;
   gap: var(--gap, 1rem);
}

.justify-center {
   justify-content: center;
}

.mt {
   margin-top: var(--margin, 1rem);
}

.flex-wrap {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--gap, 1rem);
}

.flow {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.container,
.container-fluid {
   /*
   width: var(--container);
   */
   width: 99%;
   margin-inline: auto;
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.text-white {
   color: white;
}

.text-black {
   color: black;
}

.label {
   margin-bottom: 0.3rem;
   font-size: 0.95rem;
}

.input {
   border: 1px solid var(--clr-accent-700);
   border-radius: 0rem;
   padding: 0.3rem 0.75rem;
   font-size: 0.95rem;
}

.input::placeholder {
   font-size: 0.95rem;
   color: var(--clr-text);
}

@media (min-width: 800px) {
   .label {
      font-size: 1rem;
   }

   .input {
      padding: 0.5rem 0.75rem;
      font-size: 1rem;
   }

   .input::placeholder {
      font-size: 1rem;
   }
}

.input:focus {
   outline: none;
   border-color: var(--clr-text);
}

.radio {
   width: 20px;
   height: 20px;
   border: 1px solid #fff;
   border-radius: 0vmax;
   appearance: none;
   position: relative;
   cursor: pointer;
   transition: .25s ease;
}

.radio::after {
   content: '';
   position: absolute;
   inset: .25rem;
   border-radius: inherit;
   background-color: var(--clr-accent-700);
   transform: scale(0);
   transition: .25s ease;
}

.radio:checked {
   border-color: var(--clr-accent-700);
}

.radio:checked::after {
   transform: scale(1);
}

.button {
   cursor: pointer;
   background-color: #3e6e93;
   /*var(--clr-accent-700);*/
   border: 2px solid transparent;
   border-radius: 0rem;
   padding-block: 0.363em;
   padding-inline: 1em;
   transition: all 0.25s ease;
   display: flex;
   align-items: center;
   gap: 0.4rem;
   min-height: 45px;
   color: #fff;
}

.button svg {
   max-height: 25px;
}

.button:hover {
   background-color: var(--clr-accent-50);
   border-color: var(--clr-accent-700);
   color: var(--clr-accent-700);
}

.button:hover svg path {
   fill: var(--clr-accent-700);
}

.button--neutral {
   background-color: var(--clr-neutral-200);
   color: var(--clr-text);
}

.button--neutral:hover {
   background-color: var(--clr-neutral-50);
   border-color: var(--clr-neutral-200);
   color: var(--clr-text);
}

.button--neutral svg path,
.button--neutral:hover svg path {
   fill: var(--clr-text);
}

.button--blue {
   color: #fff;
   background-color: #3e6e93;
   /*var(--clr-blue-400);*/
}

.button--blue:hover {
   background-color: var(--);
   color: var(--clr-blue-400);
   border-color: var(--clr-blue-400);
}

.button--blue:hover svg path {
   fill: var(--clr-blue-400);
}

.header {
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
   z-index: 5;
   padding: 0 min(3vw, 1.875rem);
   margin-inline: auto;
   position: relative;
   height: var(--header-height);
}


@media (max-width: 1250px) {

   .accent-nav__content {
      display: grid;
      grid-template-rows: 0fr;
      transition: .35s ease-in-out;
      position: absolute;
      width: 100%;
      left: 0;
      z-index: 500;
      top: var(--accent-header-height);
      background-color: var(--clr-neutral-50);
      box-shadow: 1px 0px 30px rgba(0, 0, 0, 0.30);
   }

   .accent-nav__content[data-visible] {
      grid-template-rows: 1fr;
   }

   .accent-nav__toggle,
   .nav-toggle {
      display: flex;
      align-items: center;
      border: 0;
      background-color: transparent;
      gap: .5rem;
      color: #fff;
      border-radius: 0rem;
      padding: .35rem 1rem;
      cursor: pointer;
   }

   .accent-nav__toggle svg {
      font-size: 20px;
      pointer-events: none;
   }

   .accent-nav__toggle[aria-expanded=true],
   .nav-toggle[aria-expanded=true] {
      background-color: var(--clr-neutral-50);
      color: var(--clr-accent-800);
   }

   .accent-nav__toggle[aria-expanded=true] svg,
   .nav-toggle[aria-expanded=true] svg {
      transform: rotate(180deg);
   }

   .accent-nav__toggle[aria-expanded=true] svg path,
   .nav-toggle[aria-expanded=true] svg path {
      stroke: var(--clr-accent-800);
   }

}

@media (min-width: 475px) {

   /*
   .accent-nav__right-list .accent-nav__link {
       display: flex;
       align-items: center;
       gap: .5rem;
       color: #fff;
   }
   */
}

.accent-nav__login-button {
   padding: .5rem 1rem;
   font-weight: 500;
   color: #fff;
}

@media (min-width: 1250px) {

   .accent-nav__toggle {
      display: none;
   }
}

.header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   transform: translateY(-100%);
   opacity: 0;
   transition: transform 0.6s ease-in-out;
}

.header.show {
   opacity: 1;
   transform: translateY(0);
}

.mobile-search-button {
   display: none;
   place-content: center;
   cursor: pointer;
   border: 0;
   background: transparent;
   background-image: url("../images/mobile-search.svg");
   background-repeat: no-repeat;
   min-width: 25px;
   height: 25px;
}

.mobile-search-button[aria-expanded="true"] {
   background-image: url("../images/close-mobile-search.svg");
   min-width: 20px;
   height: 20px;
}

.dropdown__toggle {
   transition: 0.25s ease;
   color: var(--text);
}

.dropdown__toggle svg {
   min-width: 19px;
}

.dropdown__toggle svg,
.dropdown__toggle span {
   pointer-events: none;
}

.dropdown__toggle:hover {
   color: var(--clr-accent-700);
}

@media (max-width: 67rem) {

   .row h2:not([class]) {
      font-size: 1.4rem !important;
   }

   .nav {
      position: absolute;
      background-color: var(--clr-neutral-50);
      inset: 70px 0 auto;
      margin-left: auto;
      border-bottom-left-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
      display: grid;
      grid-template-rows: 0fr;
      transition: .3s ease-in-out;
   }

   .nav[data-visible] {
      grid-template-rows: 1fr;
   }

   .nav__item--button {
      justify-self: start;
   }

   .nav-toggle {
      display: flex;
      border: 0;
      background: transparent;
      align-items: center;
      gap: .5rem;
      cursor: pointer;
   }

   .nav-toggle[aria-expanded="true"] {
      /*  background-image: url("https://www.tutorialspoint.com/static/images/close.svg"); */
   }

   .dark .nav-toggle {
      /*  background-image: url("https://www.tutorialspoint.com/img/hamburger-white.svg"); */
   }

   /*
   .nav__search-wrapper--mobile {
       display: none;
   }

   .nav__search-wrapper--mobile[data-visible] {
       display: inline-block;
   }
   */
}

@media (min-width: 67rem) {

   .header {
      --header-height: 83px;
      padding-inline: 0;
      box-shadow: none;
      width: var(--container);
      margin-inline: auto;
   }

   .dropdown {
      position: relative;
   }

   .nav-toggle {
      display: none;
      z-index: 10;
   }

   .nav {
      flex: 1;
   }
}

@media (min-width: 67rem) {

   /* .nav__search-wrapper::after {
       content: "";
       background-image: url("https://www.tutorialspoint.com/images/search-accent.svg");
       background-position: right;
       background-color: #fff;
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       right: 1rem;
       width: 20px;
       height: 20px;
       background-size: 100%;
       display: block;
   }*/
}

.footer__main {
   background-image: url("../../images/footer-bg.svg");
   background-repeat: no-repeat;
   background-size: 60%;
   background-position: top 20px right 20px;
}

@media (min-width: 45rem) {
   .footer__main {
      background-position: top 20px left 0;
      background-size: unset;
   }
}

.footer__main {
   margin-inline: auto;
   color: #fff;
   padding-top: 1.813rem;
   padding-bottom: 6rem;
   align-items: flex-start;
   gap: 2rem;
}

.footer__main>div:first-child {
   font-size: 0.85rem;
   max-width: 300px;
}

@media (min-width: 80rem) {
   .footer__main {
      padding-top: 3.95rem;
      padding-bottom: 4.988rem;
      flex-direction: row !important;
      align-items: flex-start;
      gap: 4.188rem !important;
      padding-bottom: 8rem;
   }
}

.list-style {
   list-style: disc;
}

.mobile-alert__button-close {
   height: 20px;
}

@media (min-width: 500px) {}

@keyframes scroll {
   0% {
      transform: translateX(calc(-100% - 4rem));
   }

   to {
      transform: translateX(0);
   }
}

@keyframes wait_amin {
   100% {
      box-shadow: 0 2.5em 0 -1.3em;
   }

   80% {
      box-shadow: 0 2.5em 0 -1.3em;
   }

   0% {
      box-shadow: 0 2.5em 0 -1.3em;
   }

   40% {
      box-shadow: 0 2.5em 0 0;
   }
}

/* .review--larger {
   max-width: 695px;
} */

.certificate {
   font-size: .8rem;
   padding-block: min(5vw, 2rem);
}

.categories {
   padding-block: min(5vw, 3rem);
}

.scroll-to-top-button {
   z-index: 999;
   opacity: 0;
   transform: translateY(50%);
   position: fixed;
   bottom: 30px;
   right: 30px;
   transition: 0.25s ease-in-out;
}

.scroll-to-top-button.show {
   transform: translate(0);
   opacity: 1;
}

.select {
   position: relative;
   min-width: 276px;
}

/* homepage */

.library {
   overflow: hidden;
   padding-block: min(10vw, 4rem);
}

/* prime pack, ebook */
.ebooks {
   padding-block: min(10vw, 50px);
   background-image: url('../images/primePacks/dotsBg.png');
   background-position: right;
   background-repeat: no-repeat;
   background-size: 600px 100%;
   background-color: var(--clr-neutral-50);
}

.tools {
   padding-block: min(7vw, 3rem);
   background-color: var(--clr-neutral-200);
}

/* annual membership */

/* best seller */

/* marketplace */

/* teach with us */

.support .container {
   width: min(90%, 1010px);
   margin-inline: auto;
}

.support .container>p:nth-of-type(1) {
   max-width: 850px;
   margin-inline: auto;
}

/* prime packs listing */

/* search page */

/* category */

/* cart */

/* sign up | sign in */

.library-nav {
   text-transform: capitalize;
   color: #fff;
   background-color: var(--clr-neutral-750);
}

.library-nav li {
   width: fit-content;
   flex-shrink: 0;
}

.library-nav button {
   min-width: 17px;
}

.library-nav button svg {
   pointer-events: none;
}

.bg-light {
   position: relative;
   background-color: var(--clr-neutral-150) !important;
}

.tutorial-toc {
   padding-bottom: 0rem;
   background-color: var(--clr-neutral-50);
   align-self: start;
   height: calc(100svh - 100px);
   position: sticky;
   top: 68px;
   /*
   overflow:scroll;
   overflow-x: hidden;
   */
}

.tutorial-toc .mini-logo {
   display: flex;
   flex-direction: column;
   display: none;
   gap: .5rem;
}

.tutorial-toc li.heading,
.tutorial-toc li.sreading {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: #fff;
   font-weight: 700;
   /*background-color: var(--clr-accent-800);*/
   background-color: #3e6e93;
   /*#202124;*/
   padding: .6rem 1rem;
}

/* Required for self scrolling */
main,
.container-fluid,
.row {
   overflow: unset !important;
}

.toc-nav {
   max-height: 100%;
   overflow-y: auto;
   position: relative;
}

h2.heading {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: #fff;
   font-weight: 700;
   background-color: #202124;
   padding: .6rem 1rem;
}

.tutorial-toc li.sreading {
   background-color: #3e6e93;
   /*var(--clr-neutral-900);*/
}

.tutorial-toc ul {
   overflow: hidden;
   display: grid;
   gap: 0.0rem;
}

.tutorial-toc li {
   padding: 0 0rem;
   border-bottom: 1px solid var(--clr-neutral-200);
   padding-bottom: .0rem;
   padding-left: 0px;
}

.tutorial-toc a {
   transition: .3s ease;
   display: inline-block;
   width: 100%;
   border-radius: 0vmax;
   /*
   padding: .5rem 1rem;
   padding-top: .625rem;
   */
   padding: .3rem 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.tutorial-toc a::after {
   content: '';
   background-image: url('../../images/arrowShort.svg');
   background-position: right;
   background-repeat: no-repeat;
   width: 20px;
   height: 20px;
   opacity: 0;
   transform: translateX(-50%);
   transition: .3s ease;
}

.dark .tutorial-toc a::after {
   background-image: url('../../img/arrowShortWhite.html');
}

.tutorial-toc a:hover,
.tutorial-toc a.active {
   background-color: var(--clr-accent-100);
   border-radius: 0;
}

.tutorial-toc a:hover::after,
.tutorial-toc a.active::after {
   transform: translateX(0);
   opacity: 1;
}

.toc__toggle img {
   transform: rotate(180deg);
}

.toc__toggle[aria-expanded=true] img {
   transform: rotate(0);
}

.bottom-library-ads {
   border-top: 0px solid #eee;
   margin-top: 10px;
}

.google-bottom-ads {
   margin: 0 auto;
   padding: 10px;
   margin-bottom: 20px;
   margin-top: 20px;
   text-align: center;
}

#adp_top_ads {
   text-align: center !important;
   overflow: hidden;
   max-height: 99px;
   min-height: 99px;
}


@media (max-width: 840px) {

   .tutorial-toc {
      z-index: 12;
      height: 100vh;
      min-width: 300px;
      position: fixed;
      left: 0;
      top: calc(var(--nav-1-height) + var(--nav-2-height));
      overflow-y: scroll;
      box-shadow: 1.42px 1.87px 15px 0px rgba(75, 75, 75, 0.50);
      transform: translateX(-110%);
      transition: transform .4s ease-in-out;
   }

   /*
   .tutorial-toc.sticky {
       position: fixed;
       top: var(--accent-header-height);
   }
   */
   .dark .tutorial-toc-toggle {
      background-image: url("../../img/hamburger-white.html");
   }

   .tutorial-toc[data-visible] {
      transform: translateX(0);
   }

   .tutorial-toc-toggle {
      display: block;
      cursor: pointer;
      border: 0;
      background: transparent;
      background-image: url("../../images/hamburger.svg");
      background-repeat: no-repeat;
      min-width: 25px;
      height: 25px;
      margin-right: min(3vw, 1rem);
   }

   .tutorial-toc-toggle[aria-expanded="true"] {
      background-image: url("../../images/hamburger-accent.svg");
   }
}

.library-header .nav {
   display: grid;
   top: 0px;
   z-index: 99;
}

.library-header {
   padding: 0;
   --header-height: 64px;
   z-index: 99;
   height: var(--header-height);
   background-color: var(--clr-neutral-50);
   top: 0;
   width: 100%;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
}

.library-header.sticky {
   position: fixed;
}

.library-header.sticky+nav {
   padding-top: 67px;
}

.library-header>.container {
   display: flex;
   align-items: center;
}

.library-header .nav-toggle {
   display: block;
}

@media (min-width: 840px) {

   .accent-nav__login-button {
      display: none;
   }

   .library-header {
      --header-height: 70px;
   }

   .library-header .nav[data-visible] {
      grid-template-rows: 1fr;
   }

   .library-header .nav-toggle {
      display: block;
   }

   .tutorial-toc-toggle {
      display: none;
   }

   .row {
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 1.00rem;
   }

   .container,
   .container-fluid {
      width: var(--container) !important;
   }

   .tutorial-content {
      padding: 1.5rem 1.75rem !important;
   }

   .tutorial-toc .mini-logo {
      display: flex;
   }

   .tutorial-toc {
      border-radius: 0rem;
   }
}

@media (min-width: 67rem) {
   .library-header .nav {
      display: flex;
   }

   .library-header .nav-toggle {
      display: none;
   }
}

.data-sticky {
   display: none;
   position: sticky;
   top: 68px;
   align-self: start;
}

.bg-light {
   overflow: hidden;
}

@media(min-width: 1200px) {
   .data-sticky {
      display: block;
   }

   .row {
      grid-template-columns: 300px 1fr 24%;
   }

   body {
      font-size: 15px;
   }

   .tutorial-toc li {
      font-size: 14px;
   }
}

@media(min-width: 1400px) {
   .row {
      grid-template-columns: 350px 1fr 22%;
      gap: 1.25rem;
   }

   body {
      font-size: 16px !important;
      --container: min(99%, 1780px) !important;
   }

   .tutorial-toc li {
      padding-left: 7px !important;
      font-size: 14px !important;
   }

}

.tutorial-content {
   border: 1px solid var(--clr-neutral-200);
   background-color: var(--clr-neutral-50);
   border-radius: 0rem;
   padding: 10px 10px;
   overflow: hidden;
}

.tutorial-content .demo-code {
   width: 100% !important;
   /*
   background-color: var(--clr-neutral-800);
   border-radius: 1rem;
   */
}

.tutorial-content>*+*:not(.toggle):not(.table-of-content-wrapper):not(.tutorial-menu) {
   margin-top: 1rem;
   margin-bottom: 1rem;
}

.tutorial-content h1 {
   font-size: var(--fs-700);
   text-align: center;
}

.row .cover img {
   width: 100%;
   border-radius: 0rem;
}

#page-menu {
   width: 20%;
   position: relative;
   top: -2.5rem;
   right: 0;
   cursor: pointer;
   display: flex;
   justify-content: flex-end;
}

#page-menu:hover {
   opacity: .7;
}

.table-of-content {
   overflow: hidden;
}

.table-of-content-wrapper {
   display: grid;
   grid-template-rows: 0fr;
   transition: .4s ease-in-out;
}

.table-of-content-wrapper[data-visible] {
   margin-bottom: 1.3rem;
   margin-top: -1.5rem;
   grid-template-rows: 1fr;
}

.table-of-content__content {
   border-radius: 0rem;
   border: 1px solid var(--clr-neutral-225);
}

.table-of-content__header {
   border-radius: 0;
   background-color: var(--clr-neutral-750);
   padding: 1.1rem 1.75rem;
   font-weight: 600;
   color: #fff;
}

.table-of-content ul {
   padding: .75rem 1.6rem;
}

.table-of-content li {
   padding-block: .33rem;
   border-bottom: 1px solid #E9E6CF;
}

.table-of-content li a {
   transition: .3s ease;
   display: inline-block;
   width: 100%;
   border-radius: 0vmax;
   padding: .5rem 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.table-of-content li a::after {
   content: '';
   background-image: url('../../images/arrowShort.svg');
   background-position: right;
   background-repeat: no-repeat;
   width: 20px;
   height: 20px;
   opacity: 0;
   transform: translateX(-50%);
   transition: .3s ease;
}

.dark .table-of-content li a::after {
   background-image: url('../../img/arrowShortWhite.html');
}

.fal {
   font-family: "Font Awesome 6 Pro";
}

.table-of-content li:hover a {
   background-color: var(--clr-accent-100);
   border-radius: 0rem;
}

.table-of-content li:hover a::after {
   transform: translateX(0);
   opacity: 1;
}

.tutorial-menu {
   overflow: hidden;
}

.tutorial-menu-slider {
   display: flex;
   overflow: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;
   align-items: center;
   gap: 0.5rem;
}

.tutorial-menu-slider::-webkit-scrollbar {
   display: none;
}

.tutorial-menu {
   background-color: var(--clr-blue-100);
   color: black;
   margin-top: -.5rem;
   box-shadow: 0px 2px 7px 0px var(--clr-blue-100);
   border-radius: 0rem;
   padding: .5rem;
   border: 1px solid var(--clr-neutral-200);
}

@media (min-width: 1675px) {
   .tutorial-menu form {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(139px, 1fr));
      padding: 1rem;
      gap: .25rem;
   }
}

/*
.tutorial-menu form button {
   width: fit-content;
   flex-shrink: 0;
   cursor: pointer;
   border: 0;
   display: flex;
   font-size: .8rem;
   align-items: center;
   justify-content: center;
   gap: 0.3rem;
   background-color: var(--clr-neutral-750);
   border-radius: 0.35rem;
   padding: 0.5rem 0.25rem;
   color: #fff;
   transition: .3s ease;
   width: 120px;
}
*/

.tutorial-menu form div,
.tutorial-menu form button,
.tutorial-menu form a {
   width: fit-content;
   flex-shrink: 0;
   cursor: pointer;
   border: 0;
   display: flex;
   font-size: .9rem;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   background-color: #3e6e93;
   /*var(--clr-neutral-750);*/
   border-radius: 0rem;
   padding: .5rem .85rem;
   color: #fff;
   transition: .3s ease;
   width: 143px;
   height: 38px;
   white-space: nowrap;
}

.tutorial-menu form div a,
.tutorial-menu form button a {
   display: block;
}

.tutorial-menu form div:hover,
.tutorial-menu form button:hover,
.tutorial-menu form a:hover {
   opacity: .7;
}

.row h2:not([class]) {
   padding-top: 1.5rem;
   font-size: 1.7rem;
   font-weight: 500;
}

.row blockquote {
   border-radius: 0rem;
   padding: 1rem 1rem;
   overflow: hidden;
   font-style: italic;
   background-color: #d6d6d670;
   /*var(--clr-yellow-200);*/
   position: relative;
}

.row blockquote::before,
.row blockquote::after {
   content: '';
   width: .5rem;
   height: 100%;
   position: absolute;
   background-color: #3e6e93;
   /*var(--clr-yellow);*/
   top: 0;
}

.row blockquote::before {
   left: 0;
}

.row blockquote::after {
   right: 0;
}

@media (min-width: 700px) {
   .row blockquote {
      border-radius: 0rem;
      padding: 1.7rem 2.35rem;
      padding-right: 3rem;
   }

   .row blockquote::before,
   .row blockquote::after {
      width: .85rem;
   }
}

.tutorial-content ul:not(.table-of-content ul) {
   margin-top: 1rem;
   display: grid;
   gap: .5rem;
   padding-left: 1rem;
}

.tutorial-content .list {
   /*background-color: var(--clr-orange-100);*/
   background-color: #d6d6d670;
   border-radius: 0rem;
   padding: 1rem;
   gap: .75rem;
}

.footer-links li:not(:last-child)::after {
   content: "|";
   margin: 0 8px;
   color: #aaa;
}

.tutorial-content ul:not(.table-of-content ul) li {
   text-align: justify;
   position: relative;
   padding-left: 1.5rem;
}

.tutorial-content ul:not(.table-of-content ul) li a {
   color: #40a944;
}

.tutorial-content ul:not(.table-of-content ul) li a:hover {
   color: #2f9933;
}

.tutorial-content ul:not(.table-of-content ul) li>b {
   width: min-content;
}

.tutorial-content ul:not(.table-of-content ul) li::before {
   content: '';
   background-color: var(--clr-text);
   min-width: .45rem;
   height: .45rem;
   display: inline-block;
   border-radius: 0vmax;
   position: absolute;
   left: 0;
   top: .5rem;
   transform: translateY(0);
}

.dark .tutorial-content ul:not(.table-of-content ul):not(.list) li::before {
   background-color: #fff;
}

.tutorial-content .table-wrapper {
   overflow: auto;
   scrollbar-color: var(--clr-neutral-800) transparent;
}

.tutorial-content .table {
   padding: .5rem;
}

.tutorial-content .table-wrapper::-webkit-scrollbar {
   width: 0.4rem;
   height: 5px;
}

.tutorial-content .table-wrapper::-webkit-scrollbar-track {
   border-radius: 0vmax;
   background-color: var(--clr-neutral-225);
}

.tutorial-content .table-wrapper::-webkit-scrollbar-thumb {
   border-radius: 0vmax;
   background-color: var(--clr-neutral-800);
}

.tutorial-content .table {
   text-align: center;
   border-collapse: collapse;
   width: 100%;
}

.tutorial-content .table td,
.tutorial-content .table th:not(thead th) {
   border: 1px solid var(--clr-neutral-200);
   text-align: left;
   padding: 8px;
}

.tutorial-content .table th {
   padding-top: 12px;
   padding-bottom: 12px;
   text-align: center;
   /*background-color: var(--clr-secondary-200);*/
   background-color: #d6d6d670;
   color: var(--clr-text);
   font-weight: 600;
}

.tutorial-content .QA {
   margin-top: 2rem !important;
   position: relative;
   border: 1px solid var(--clr-neutral-225);
   border-radius: 0rem;
   padding: 1rem;
   padding-top: 1.5rem;
}

/*
.library-quiz__options {
   margin-block: 1rem;
   display: flex;
   flex-direction: column;
   gap: .5rem;
   align-items: flex-start;
}
*/
.tutorial-content .QA .Q p:first-child {
   font-weight: 600;
}

.tutorial-content .QA .Q a {
   margin-top: .5rem;
   display: inline-block;
   text-align: start;
   cursor: pointer;
   border: 0;
   border-radius: 0vmax;
   padding: .4rem 1rem;
   transition: .25s ease;
   color: currentColor;
   font-weight: normal;
}

.tutorial-content .QA .Q a:hover {
   background-color: var(--clr-neutral-200);
}

.tutorial-content .QA .show {
   display: block !important;
   animation: fadeSlideDown 0.5s ease-in-out;
   transform-origin: top center;
   overflow: hidden;
}

/* Base styles for the ad section */
.adv-section {
   padding: 20px 0;
   background-color: #f8eada;
   width: 100%;
   box-sizing: border-box;
   overflow: hidden;
}

/* Container styles */
.adv-section .ads-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 10px;
   box-sizing: border-box;
}

/* Column styles */
.adv-section .ad-column {
   box-sizing: border-box;
   margin-bottom: 20px;
   text-align: center;
}

/* Ad container styles */
.adv-section .ad-box {
   width: 336px;
   height: 280px;
   margin: 0 auto;
   overflow: hidden;
}

/* Mobile - 1 column */
@media (max-width: 599px) {
   .adv-section .ad-column {
      width: 100%;
   }

   .adv-section .ad-column:nth-child(n+2) {
      display: none;
   }
}

/* Small tablets - 2 columns */
@media (min-width: 600px) and (max-width: 899px) {
   .adv-section .ads-container {
      max-width: 700px;
   }

   .adv-section .ad-column {
      width: 50%;
      padding: 0 5px;
   }

   .adv-section .ad-column:nth-child(n+3) {
      display: none;
   }
}

/* Medium tablets - 3 columns */
@media (min-width: 900px) and (max-width: 1199px) {
   .adv-section .ads-container {
      max-width: 1050px;
   }

   .adv-section .ad-column {
      width: 33.333%;
      padding: 0 5px;
   }

   .adv-section .ad-column:nth-child(n+4) {
      display: none;
   }
}

/* Desktop - 4 columns */
@media (min-width: 1200px) {
   .adv-section .ad-column {
      width: 25%;
      padding: 0 10px;
   }
}

@keyframes fadeSlideDown {
   0% {
      opacity: 0;
      transform: translateY(-10px) scaleY(0.95);
      max-height: 0;
   }

   50% {
      opacity: 0.5;
      transform: translateY(-5px) scaleY(0.98);
   }

   100% {
      opacity: 1;
      transform: translateY(0) scaleY(1);
      max-height: 2000px;
      /* Arbitrary large value */
   }
}

/*
.tutorial-content .QA .Q a.wrong {
   background-color: var(--clr-orange-200);
}
/*
.tutorial-content .QA .Q a.true {
   background-color: var(--clr-secondary-200);
}
*/
.false.selected {
   background-color: var(--clr-red-100) !important;
}

.true.selected {
   background-color: var(--clr-secondary-200) !important;
}

.tutorial-content .QA .A {
   margin-top: 1rem;
   background-color: var(--clr-blue-150);
   border-radius: 0rem;
   display: none;
   padding: 1rem;
}

.tutorial-content .QA .A>h3:first-child {
   font-size: var(--fs-500);
   font-weight: 500;
   margin-block: .5rem;
}

.tutorial-content .QA .A>h3:nth-child(2) {
   margin-bottom: .5rem;
   font-weight: 500;
}

.tutorial-content .QA .A h2 {
   margin-bottom: 1rem;
}

.tutorial-content .QA .B .btn {
   position: absolute;
   top: -1rem;
   right: 1rem;
   cursor: pointer;
   border: 0;
   background-color: var(--clr-accent-800);
   border-radius: 0rem;
   padding: .3rem 1rem;
   color: #fff;
   transition: .25s ease;
   width: fit-content;
}

.tutorial-content .QA .B .btn:hover {
   opacity: .7;
}

.tutorial-content .QA .A[data-visible] {
   grid-template-rows: 1fr;
}

.row .toggle:first-of-type {
   margin-top: 1.5rem;
}

.row .toggle {
   margin-block: 1rem;
}

.row .toggle:first-of-type {
   margin-top: 1.5rem;
}

.row .toggle-content {
   padding-top: 1rem;
   display: none;
}

.row .toggle-content>div {
   overflow: hidden;
   margin-block: .8rem;
}

.row .toggle-content[data-visible] {
   display: block;
}

.row .toggle label,
.row .toggle button {
   width: 100%;
   border: 0;
   background-color: var(--clr-neutral-200);
   border-radius: 0rem;
   padding: .7rem 1rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
   overflow: hidden;
   cursor: pointer;
   transition: .25s ease;
}

.row .toggle__toggle:hover {
   opacity: .7;
}

.row .toggle label img,
.row .toggle button img {
   display: inline;
   margin-left: 1rem;
   transform: rotate(180deg);
}

.row .toggle__toggle[aria-expanded=true] img {
   transform: rotate(0);
}

.row .toggle__toggle::before {
   content: '';
   width: .5rem;
   height: 100%;
   position: absolute;
   background-color: var(--clr-neutral-350);
   top: 0;
   left: 0;
}

.row .toggle label::before,
.row .toggle button::before {
   content: '';
   width: 0.5rem;
   height: 100%;
   position: absolute;
   background-color: var(--clr-neutral-350);
   top: 0;
   left: 0;
}

.library-page-bottom-nav {
   margin-block: 3rem !important;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: .5rem;
   margin-bottom: 1rem !important;
}

.library-page-top-nav {
   margin-block: 1.5rem !important;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 0.5rem;
}

.library-page-bottom-nav>.flex-group {
   gap: .5rem;
}

.library-page-bottom-nav .button {
   font-size: .8rem;
   min-height: auto;
}

.library-page-top-nav>.flex-group {
   gap: .5rem;
}

.library-page-top-nav .button {
   font-size: .8rem;
   min-height: auto;
}

@media (min-width: 430px) {
   .library-page-bottom-nav .button {
      font-size: 1rem;
   }

   .library-page-bottom-nav>.flex-group {
      gap: 1rem;
   }

   .library-page-top-nav .button {
      font-size: 1rem;
   }

   .library-page-top-nav>.flex-group {
      gap: 1rem;
   }
}

main {
   overflow: hidden;
}

.theme-toggle {
   margin-right: 1rem;
   cursor: pointer;
   background-image: url('../../img/moon.html');
   width: 25px;
   height: 25px;
   border: 0;
   background-color: transparent;
   vertical-align: top;
}

.theme-toggle[aria-expanded=true] {
   background-image: url('../../img/sun.html');
}

/* ----------------------- custom css ------------------- */
#search-results {
   padding-top: 0px;
   position: absolute;
   margin-top: 3px !important;
   border: none;
   display: none;
   border-radius: 0px;
   left: 0;
}

/*
.fa-file-pdf{
  background-image: url(https://www.tutorialspoint.com/images/pdf.svg?new);
  width: 16px;
  height: 16px;
}
.fa-book-reader{
  background-image: url(https://www.tutorialspoint.com/images/book-reader.svg?new);
  width: 16px;
  height: 16px;
}
.fa-external-link{
  background-image: url(https://www.tutorialspoint.com/images/external-link.svg?new);
  width: 16px;
  height: 16px;
}
.fa-search-dollar{
  background-image: url(https://www.tutorialspoint.com/images/search-job.svg?new);
  width: 16px;
  height: 16px;
}
.fa-comments{
  background-image: url(https://www.tutorialspoint.com/images/chat.svg?new);
  width: 16px;
  height: 16px;
}
*/
@media (max-width: 1072px) {
   .cover {
      display: none;
   }
}

@media (max-width: 840px) {
   .tutorial-toc .grey_bg {
      display: none;
   }

   .tutorial-content {
      padding-top: 20px;
   }
}

.search-overlay::marker {
   display: none;
   color: #031926;
}

#btnSearch {
   background-color: transparent !important;
   position: absolute;
   right: 0px;
   color: #8a8989;
   font-weight: normal;
   margin: -1.85rem 0.8rem 0 0;
   border: 0px solid #ccc;
   cursor: pointer;
}

/* table custom css */
.tutorial-content .table td p {
   text-align: left;
}

.tutorial-content .table td p,
.tutorial-content .table td a {
   text-align: left;
}

.tutorial-content .table .ts {
   text-align: center !important;
}

.download-btn {
   padding: 9px;
   border: 1px solid #969292;
   width: 200px;
   margin: 0 auto;
   margin-bottom: 30px;
   border-radius: 0px;
   font-size: 20px;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   text-align: center;
   background-image: none;
}

.download-btn a:link,
.download-btn:a:visited {
   text-decoration: none;
}

.download-btn:hover,
.download-btn a:hover,
.download-btn a:active {
   text-decoration: none;
   background: #eee;
   color: #4c4c4c;
}

/* prettyprint CSS */
.prettyprint {
   width: 100%;
   background: #eee !important;
   border: 0px solid #d6d6d6 !important;
   border-radius: 0px !important;
   font-family: monospace, Consolas, Courier;
}

pre.prettyprint {
   padding: 1em !important;
   font-size: 1em !important;
   overflow-x: auto;
}

.result {
   background: var(--clr-grey-100);
   border: 0px;
   width: 100%;
}

pre.result {
   padding: 15px;
   color: var(--clr-text);
   font-size: 15px;
   overflow-x: auto;
   white-space: pre;
   border-radius: 0px;
   line-height: 24px;
}

a.demo {
   cursor: pointer;
   border: 0;
   background-color: var(--clr-accent-800);
   border-radius: 0rem;
   color: #fff !important;
   transition: .25s ease;
   width: fit-content;
   float: right;
   position: relative;
   top: 21px;
   right: 10px;
   padding: 6px;
   font-weight: normal;
}

a.demo:hover {
   opacity: .7;
}

ul.toc li a.videolink {
   background: none !important;
   color: #000;
   font-size: 15px;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;
   list-style: none;
}

ul.toc li a.videolink img {
   width: 296px;
}

.grey_bg {
   background: #eee;
}

.quiz h3 {
   margin-top: 0.25rem !important;
}

.tutorial-content h3,
.tutorial-content h4 {
   font-size: 20px;
   color: rgba(0, 0, 0, 0.87);
   font-weight: 500;
   text-align: left;
   padding: 0.5rem 0rem 0rem 0rem;
   margin: 0;
}

img.run-button {
   display: inline !important;
   width: 20px !important;
   height: 20px;
   top: 0px;
   position: relative;
}

/*
.execute {
   z-index: 10;
   float: right;
   width: 100px;
   height: 29px;
   position: relative;
   margin: 0px 3px -25px 0;
   cursor: pointer;
   border-radius: 6px;
   background: #3fa944 url(https://www.tutorialspoint.com/images/editnrun-green.svg?v=2) center center no-repeat;
   background-size: contain;
}
*/
.execute {
   z-index: 10;
   float: right;
   width: 100px;
   height: 29px;
   position: relative;
   margin: 0px 3px -25px 0;
   border-radius: 0px;
   cursor: pointer;
}

.code-wrapper {
   background: #2d2d2d;
   border-radius: 0rem;
   overflow: hidden;
}

.code-wrapper .code-header {
   background: #3e6e93;
   /* #404040;*/
   height: 50px;
   display: flex;
   justify-content: space-between;
   padding-inline: 1rem;
   align-items: center;
}

.code-wrapper .logo-side {
   color: white;
   font-size: 18px;
}

.code-wrapper .button-side {
   height: 28px;
}

.code-wrapper .open-compiler {
   top: 0px;
   right: 8px !important;
   margin: 0;
   position: relative;
   background: #eee;
   background-size: contain;
   font-size: 12px;
   color: #111111;
   align-items: center;
   display: flex;
   justify-content: center;
   z-index: 10;
   width: 100px;
   height: 29px;
   position: relative;
   margin: 0px 3px -25px 0;
   border-radius: 0px;
   cursor: pointer;
}

.code-wrapper .execute {
   top: 0px;
   right: 0;
   margin: 0;
}

.execute {
   /* margin-top:5px; */
   top: 15px;
   right: 15px;
   position: relative;
   background: #3fa944 url(../../images/editnrun-green5e1f.svg?v=2) center center no-repeat;
   background-size: contain;
}

.execute:hover {
   opacity: 0.7;
}

pre.just-code,
pre.demo-code {
   display: block;
   font-family: monospace, Consolas, Courier !important;
   white-space: pre;
   margin: 1em 0px;
   background: rgba(255, 255, 255, 0.05);
   background: #eee;
   border-radius: 0px;
}

.output-wrapper {
   display: none;
   flex-grow: 1;
   font-family: "Liberation Mono", Consolas, Menlo, Courier, monospace;
   font-size: 14px;
   overflow: auto;
   padding-bottom: 4px;
   padding-top: 10px;
   padding-left: 10px;
   max-height: 400px;
   background: #fff;
   border-radius: 0px;
   /*: 20px;*/
   margin: 15px;
   min-height: 44px;
}

.console-close {
   position: relative;
   float: right;
   top: 0px;
   right: 12px;
   opacity: 0.75;
   width: 24px;
   height: 24px;
   background-size: 24px;
   background: url("data:image/svg+xml,%3Csvg width='24' height='25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 14.1a4.12 4.12 0 00-4.18-3.6H11v5l-7-6 7-6v5h1.79A6.15 6.15 0 0119 13.71a6 6 0 01-6 6.79H7v-2h6a4 4 0 004-4.4z' fill='grey'/%3E%3C/svg%3E") 50% no-repeat;
   cursor: pointer;
}

.code-output {
   color: #000;
}

.code-mirror {
   width: 100%;
   height: auto !important;
   min-height: 30px;
   max-height: 450px;
   resize: none !important;
   white-space: auto !important;
   line-height: 24px;
}

.tutorial-content hr:first-child {
   height: 0px;
}

/* tabs css */
.tab-title {
   min-width: 105px;
   background: #eee;
   font-size: 16px;
   text-align: center;
   padding: 5px 10px;
   color: #000;
   cursor: pointer;
   margin: 0px 5px 0px 0px;
   border: 1px solid #ccc;
   border-bottom: 1px solid #eee;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}

.tab-title:hover {
   background: #fff;
}

.tab-title.active {
   background: #40a944;
   text-align: center;
   color: #fff;
   padding: 6px 10px 5px 10px;
   border: 1px solid #40a944;
   border-bottom: 0px;
}

.tab-content {
   padding: 4px 4px;
   display: none;
}

.tab-content.active {
   display: block;
   border: 1px solid var(--clr-neutral-225);
   border-top-left-radius: 0rem !important;
   border-radius: 0rem;
}

#sticky-ad {
   margin: 0 auto;
}

/* css for blockquote and list ul and ol */

/* Prism CSS Starts */
/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+bash+c+csharp+cpp+cilkc+cilkcpp+cobol+coffeescript+css-extras+dart+fsharp+fortran+go+groovy+java+julia+kotlin+latex+lua+markup-templating+mongodb+objectivec+pascal+perl+php+plsql+powershell+python+r+jsx+ruby+rust+sql */
code[class*=language-],
pre[class*=language-] {
   color: #ccc;
   background: 0 0;
   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;
   -moz-hyphens: none;
   -ms-hyphens: none;
   hyphens: none
}

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

:not(pre)>code[class*=language-],
pre[class*=language-] {
   background: #0074a3
      /* #2d2d2d*/
}

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

.token.comment,
.token.prolog {
   color: #999
}

.token.punctuation {
   color: #ccc
}

.token.tag {
   color: #e2777a
}

.token.boolean,
.token.function,
.token.number {
   color: #f08d49
}

.token.symbol {
   color: #f8c555
}

.token.important,
.token.keyword,
.token.selector {
   color: #cc99cd
}

.token.string,
.token.variable {
   color: #7ec699
}

.token.operator,
.token.url {
   color: #67cdcc
}

.token.bold,
.token.important {
   font-weight: 700
}

/* Prism CSS Ends */

table.src {
   border: 1px solid #d6d6d6;
   width: 100%;
   border-collapse: collapse;
   vertical-align: top;
   margin-top: 8px;
   margin-bottom: 8px;
   background-color: #f7f7f7;
}

table.src th {
   border-collapse: collapse;
   border: 1px solid #d6d6d6;
   background-color: #eee;
   padding: 5px;
   text-align: left;
}

.interactive {
   background-color: var(--background-secondary);
   border: none;
   border-radius: var(--elem-radius);
   color: var(--text-primary);
   height: 675px;
   margin: 1rem 0;
   padding: 0;
   width: 100%;
}

.tutorial-content p a {
   color: green;
}

table td a {
   color: #008000;
   text-decoration: none;
   font-weight: 700;
}

.tp-codespan {
   font-size: 16px;
   font-weight: 800;
   font-family: Consolas, Courier, monospace;
}

.E {
   border: 1px solid #d6d6d6;
   background-color: #eee;
   padding: 5px;
   display: none;
   margin-bottom: 10px;
}

div.parent-file {
   display: none;
}

.btn-default {
   cursor: pointer;
   background-color: var(--clr-neutral-200);
   color: #000;
   border: 2px solid transparent;
   border-radius: 0rem;
   padding-block: 0.363em;
   padding-inline: 1em;
   transition: all 0.25s ease;
   /* display: flex;*/
   align-items: center;
   gap: 0.4rem;
   min-height: 35px;
   min-width: 180px;
}

.btn:hover,
.btn-default:hover {
   background-color: #fff;
   border-color: var(--clr-neutral-200);
   color: #000;
}

.tutorial-content img {
   margin: 0 auto;
}

#page-menu img {
   margin: initial;
   margin-top: -4px;
}

.toggle img {
   margin: initial;
}

@media screen and (min-width: 1008px),
screen and (min-width: 688px) and (max-width: 768px) {
   .interactive {
      height: 410px;
   }
}

@media (max-width: 1366px) {

   .tutorial-menu form div,
   .tutorial-menu form button {
      padding: .5rem .5rem;
      font-size: 14px;
      width: 118px;
   }
}

/* Dark theme */
.dark {
   --clr-text: #fff;
   --clr-accent-25: hsl(125, 100%, 18%);
   --clr-accent-50: hsl(122, 100%, 20%);
   --clr-accent-100: hsl(122, 37%, 16%);
   --clr-blue-100: #000000;
   --clr-blue-200: #000000;
   --clr-yellow-200: #022804;
   --clr-yellow: hsl(122.42deg 44.06% 21.22%);
   --clr-orange-100: hsl(25, 100%, 34%);
   --clr-orange-200: hsl(25, 90%, 28%);
   --clr-secondary-200: hsl(87, 60%, 28%);
   --clr-neutral-50: #000;
   --clr-neutral-100: #040402;
   --clr-neutral-150: #0b0b0b;
   --clr-neutral-200: #171717;
   --clr-grey-100: #2d2d2d;
   --clr-dark-100: #000;
}

.dark select {
   color: #fff;
}

body {
   color: var(--clr-text);
}

.mini-logo img {
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
}

/* download pdf page css */

.dark .tutorial-content .QA .A p {
   color: #000 !important
}

@media print {
   body {
      -webkit-print-color-adjust: exact;
   }

   div[class*=language-] {
      max-height: initial !important;
   }

   .header,
   .tutorial-menu,
   #page-menu,
   .table-of-content-wrapper,
   .footer,
   #adp_top_ads,
   .library-nav,
   .library-page-bottom-nav,
   .library-page-top-nav,
   .bottom-library-ads,
   ._ap_apex_ad,
   .table-wrapper,
   .execute,
   .QA>.B,
   hr {
      display: none !important;
   }

   .toggle-content,
   .table-wrapper {
      display: block !important;
   }

   .QA>.A {
      display: block !important;
   }

   body {
      background: #fff !important
   }

   .code-mirror {
      overflow-wrap: break-word !important;
   }
}

.toggle-content p {
   padding-bottom: 10px;
}


/* css for categories individual page */
@media(max-width: 840px) {
   .library-header .nav[data-visible] #btnSearch {
      display: none;
   }
}

@media (max-width:575px) {
   .container {
      max-width: 96%
   }
}

@media (min-width:576px) {
   .container {
      max-width: 96%
   }
}

@media (min-width:768px) {
   .container {
      max-width: 94%
   }
}

@media (min-width:992px) {
   .container {
      max-width: 96%
   }
}

@media print {
   body {
      -webkit-print-color-adjust: exact;
   }

   div[class*=language-] {
      max-height: initial !important;
   }

   .header,
   .tutorial-menu,
   #page-menu,
   .table-of-content-wrapper,
   .footer,
   #adp_top_ads,
   .library-nav,
   .library-page-bottom-nav,
   .library-page-top-nav,
   .bottom-library-ads,
   ._ap_apex_ad,
   .table-wrapper,
   .execute,
   .QA>.B,
   hr {
      display: none !important;
   }

   .toggle-content,
   .table-wrapper {
      display: block !important;
   }

   .QA>.A {
      display: block !important;
   }

   body {
      background: #fff !important;
   }

   .code-mirror {
      overflow-wrap: break-word !important;
   }
}

.library-header .nav[data-visible] button#btnSearch {
   display: none;
}

.loader {
   background-image: url(../../images/loading.gif);
   background-size: 30px;
   width: 30px;
   height: 30px;
   background-repeat: no-repeat;
}

.dark .tutorial-content .QA .A p {
   color: #000 !important
}

.dark .accent-nav__toggle[aria-expanded=true] {
   background-color: #fff;
}

.dark .accent-nav__login-button {
   background-color: #fbfbfb;
}

/* new footer css */
.footer__main {
   padding-bottom: 3rem;
}

/* new footer css */

/* dropdown css */
.categories-menu {
   background-color: var(--clr-neutral-100);
}

.categories-menu>div {
   padding: .4rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.categories-menu>div>ul {
   flex-shrink: 0;
}

@media (max-width:1120px) {
   .categories-menu {
      position: relative;
   }

   .categories-menu>div {
      padding-bottom: 2rem;
   }

   .categories-menu>div>ul {
      z-index: 5;
   }

   .categories-menu>div:has([aria-selected=true])>ul {
      z-index: -1;
   }
}

@media (min-width:1120px) {
   .categories-menu>div {
      flex-direction: row;
   }

   .categories-menu>div>ul {
      padding: .5rem;
      border-radius: 0rem;
      color: #fff;
      background-color: var(--clr-neutral-900);
   }
}

.categories-menu {
   transform: translateY(1rem);
   border-radius: 0rem;
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
   overflow: hidden;
}

.nav a:not(.button):not(.cart-item):not(.dropdown__item a):hover {
   background: var(--clr-accent-700);
   color: #fff;
}

strong {
   font-weight: bold;
}

em {
   font-style: italic;
}

ul.chapters li::before {
   background-color: transparent !important;
}

/* end of dropdown css */

pre[class*=language-] {
   /*width:100px!important;*/
   padding: 0px !important;
}

.code-mirror {
   padding: 1rem 1rem !important;
}

.input-code {
   height: 100%;
}

@page {

   @top-left {
      content: url("../../images/tp-pdf-image.html");
      font-size: 5px;
      line-height: 10px;
   }

   @top-right {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 10px;
   }

   /*  @bottom-right {content: element(h1);border-top: 2px solid #434190;} */
   @bottom-left {
      content: element(footerLeft);
   }

   size: A4;
   margin-bottom: 1.5cm;
}

.tutorial-content h2,
.tutorial-content h3 {
   line-height: 30px;
}

.tutorial-content .table td div a {
   font-size: 14px;
   justify-content: center;
   min-height: 30px;
}

/* css onetime login */
/* css onetime login */

@media(min-width:864px) {
   .nav-toggle[aria-expanded=true] svg {
      transform: rotate(0deg) !important;
   }

   .bg-light {
      padding-block: 2rem;
   }

   .footer {
      text-align: left;
   }
}

@media(max-width:864px) {

   .accent-nav__toggle,
   .nav-toggle {
      padding: .35rem .3rem;
   }

   .dropdown__toggle {
      display: none;
   }

   .categories-menu {
      margin-top: -20px;
   }

   .nav-toggle[aria-expanded=true] svg {
      transform: rotate(180deg) !important;
   }

   .categories-menu>div>ul {
      z-index: 5;
   }

   .categories-menu>div:has([aria-selected=true])>ul {
      z-index: 5;
   }

   .categories-menu>div:has([aria-selected=false])>ul {
      z-index: 5;
   }

   .bg-light {
      padding-block: 0rem;
   }

   .footer {
      text-align: center;
   }
}

.dark .tutorial-content {
   background-color: #1c1c1c;
   border: 1px solid #1c1c1c;
}

.dark .footer {
   background-color: #000 !important;
}

.dark .tutorial-content .list {
   background-color: #333;
}

.dark .row blockquote {
   background-color: #333;
}

.dark .row blockquote::before,
.dark .row blockquote::after {
   background-color: hsl(0deg 0% 4.31%);
}

.dark .prettyprint {
   background: #adadad !important;
}

.dark .tutorial-content h3,
.dark .tutorial-content h4 {
   color: rgb(227 227 227 / 87%);
}

.dark .tutorial-content .table th {
   background-color: hsl(0deg 0% 20%);
}

.dark .tutorial-content p a {
   color: #c7c7c7;
}

.dark .tutorial-content .table td,
.dark .tutorial-content .table th:not(thead th) {
   border: 1px solid #333333;
}

.dark table td a {
   color: #fafafa;
}

.dark h2.heading {
   background-color: #2d2d2d;
}

.dark .tutorial-toc a:hover,
.dark .tutorial-toc a.active {
   background-color: hsl(0deg 0% 17.65%);
}

.dark .tutorial-toc li.heading,
.dark .tutorial-toc li.sreading {
   background-color: #333;
}

.dark .mini-logo img {
   filter: invert(1);
}

/*reference css */
.row h2:not([class]) {
   padding-top: .5rem;
   font-size: 1.7rem;
   font-weight: 500;
}

/*reference css */

/* To fix tutorial home page job and other buttons click
.tutorial-menu form button:not([type=submit]) { padding: 0; width: auto }*/
.tutorial-menu form button a {
   padding: 0.5rem 1rem;
   width: 143px;
   white-space: nowrap;
   height: 38px;
}

.tutorial-menu form button i {
   position: absolute;
}

.tutorial-menu form button {
   justify-self: start;
}

/* Again Footer Changes done by Vasyl */
.footer {
   color: white;
   padding-top: 3rem;
   padding-bottom: 1rem;
}

.footer>.container:first-child {
   display: grid;
   gap: 2rem;
   font-size: .9325rem;
}

@media (min-width: 640px) {
   .footer>.container:first-child {
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
   }
}

@media (min-width: 1240px) {
   .footer>.container:first-child {
      justify-items: center;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 2rem;
      margin-bottom: 4rem;
   }
}

.footer h5 {
   font-weight: bold;
   font-size: 1.2rem;
   margin-bottom: 1rem;
}

.footer li a {
   font-size: 12px;
}

.footer a:hover {
   color: var(--clr-accent-700);
   transition: all 0.25s ease;
}

.footer .container:first-child ul {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

/* Changes done by Vasyl Ends */
/* AI Assistant related CSS  Starts */

/* Headings */

/* Paragraphs */

/* Unordered and Ordered Lists */

/* Tables */

.code-wrapper .copy-code {
   top: 0px;
   right: 8px !important;
   margin: 0;
   position: relative;
   background: #868a86;
   background-size: contain;
   font-size: 12px;
   color: white;
   align-items: center;
   display: flex;
   justify-content: center;
   z-index: 10;
   width: 100px;
   height: 29px;
   position: relative;
   margin: 0px 3px -25px 0;
   border-radius: 0px;
   cursor: pointer;
}

.code-wrapper .debugger {
   top: 0px;
   right: 0;
   margin: 0;
}

.debugger {
   margin-top: 5px;
   top: 15px;
   right: 15px;
   position: relative;
   background: #3fa944 url(../../images/debug_code3860.png?v=1) center center no-repeat;
   background-size: contain;
}

.debugger {
   z-index: 10;
   float: right;
   width: 100px;
   height: 29px;
   position: relative;
   margin: 0px 3px -25px 0;
   border-radius: 0px;
   cursor: pointer;
}

/* Responsive Design */
/* AI Assistant related CSS  Ends */
/* AI Interviewer related CSS  Starts */
.tutorial-content {
   padding: 1rem !important;
}

.tutorial-content>*+*:not(.toggle):not(.table-of-content-wrapper):not(.tutorial-menu) {
   margin-top: 1rem !important;
   margin-bottom: 1rem !important;
}

select {
   width: 125px;
   font-size: 13px;
   padding: 5px 10px !important;
   outline: none;
   border: 1px solid #ccc;
}

/* css for dropdown */
.dropdown {
   position: relative;
   display: inline-block;
   cursor: pointer;
}

/* AI Interviewer related CSS  Ends */

/* promote and earn css */
/* end promote and earn css */


.scrollbar-hidden {
   -ms-overflow-style: none;
   scrollbar-width: none;
}

.scrollbar-hidden::-webkit-scrollbar {
   display: none !important;
}

.tutorial-toc .mini-logo {
   display: flex;
}

/*
@media (max-width: 840px) {
   .tutorial-toc.sticky {
      top: calc(var(--accent-header-height) + 1.2rem);
   }
}
*/
.mobile-search-button {
   display: block;
   width: 25px;
   height: 25px;
   min-height: auto;
   margin-left: 0.4rem;
}

.mobile-search-button svg {
   height: 100% !important;
}

@media (max-width: 1250px) {
   .accent-nav__login-button {
      display: none;
   }

   .accent-nav__content {
      display: flex;
      grid-template-rows: unset;
      position: static;
      background-color: transparent;
      box-shadow: none;
   }
}

.library-header .nav {
   top: calc(var(--accent-header-height) + 1rem);
}

.tutorial-toc-toggle svg,
.nav-toggle svg {
   transition: none;
}

.tutorial-toc-toggle[aria-expanded=true] svg {
   rotate: -90deg;
}

.nav-toggle[aria-expanded=true] svg {
   rotate: 90deg;
}

#btnSearch {
   display: none;
}

.mobile-search-button {
   background-image: none;
}

.tutorial-toc-toggle {
   background-image: none;
}

.tutorial-toc-toggle {
   border: none;
   background-color: transparent;
}

@media (min-width: 67rem) {
   .mobile-search-button {
      display: block;
   }
}

@media (min-width: 1120px) {
   .mobile-search-button {
      display: none;
   }

}

.tutorial-toc-toggle[aria-expanded="true"] {
   background-image: none;
}

.scrollbar-hidden {
   -ms-overflow-style: none;
   scrollbar-width: none;
}

.scrollbar-hidden::-webkit-scrollbar {
   display: none !important;
}

@media (width >=840px) {
   [data-toc-toggle] {
      display: none;
   }
}

/* AI Assistant related CSS  Starts */
a.assistant {
   padding-top: 10px;
   padding-bottom: 10px;
   margin-bottom: 5px;
}

h1.assistant {
   padding-bottom: 0px;
   margin-bottom: 0px;
}

h2.assistant {
   margin: 0px !important;
   text-align: center;
   padding: 0px;
   font-weight: normal;
}

.assitant__wrapper {
   position: relative;
}

.assitant__wrapper input {
   padding: 10px 60px 10px 10px;
   display: block;
   width: 100%;
   border: 1px solid #aaa;
   outline: none;
}

.assitant__wrapper .btn__go {
   background: #2c9d30;
   width: fit-content;
   font-size: 16px;
   color: #fff;
   text-align: center;
   padding: 13px 15px 13px 15px;
   border: 1px solid #2c9d30;
   position: absolute;
   right: 0px;
   top: 0px;
   cursor: pointer;
}

.assitant__wrapper .btn__go:hover {
   background-color: var(--clr-accent-50);
   border-color: var(--clr-accent-700);
   color: var(--clr-accent-700);
}

#assistant_answer {
   width: 100%;
   botder: 1px solid var(--clr-accent-700);
   overflow: auto;
}

#assistant_question::placeholder {
   color: #aaa !important;
}

#assistant_loader {
   display: none;
}

#assistant_answer pre {
   display: block;
   overflow: auto;
   line-height: 1.7142857;
   overflow-x: auto;
   background-color: #000;
   margin: 0px;
}

#assistant_answer .code-wrapper {
   margin-top: 15px;
   margin-bottom: 15px;
}

.assistant__wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
}

.assitant__wrapper .search-box {
   display: flex;
   align-items: center;
   background: linear-gradient(135deg, #f9f9f9, #ddd);
   padding: 2px;
   width: 100%;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
   border: 1px solid #ccc;
}

.assitant__wrapper .search-input {
   flex: 1;
   padding: 10px 15px;
   font-size: 16px;
   border: 1px solid #ccc;
   outline: none;
   color: #000;
   background-color: #fff;
   transition: all 0.3s ease-in-out;
   border-right: none;
}

.assitant__wrapper .search-input::placeholder {
   color: #888;
}

.assitant__wrapper .search-btn {
   border: 1px solid #ccc;
   padding: 10px 20px;
   background: #2c9d30;
   color: white;
   font-size: 16px;
   cursor: pointer;
   transition: all 0.3s ease-in-out;
   border-left: none;
   /* Merges with input seamlessly */
}

.assitant__wrapper .search-btn:hover {
   background: #237823;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.assitant__wrapper .search-input:focus {
   border-color: #2c9d30;
   box-shadow: 0 0 5px rgba(44, 157, 48, 0.5);
}

#assistant_answer {
   line-height: 1.6;
   color: #000;
   border: 0px solid #ddd;
}

/* Headings */
#assistant_answer h1 {
   font-size: 2rem;
   margin-bottom: 10px;
}

#assistant_answer h2 {
   font-size: 1.7rem;
   margin-bottom: 10px;
   padding-bottom: 5px;
}

#assistant_answer h3 {
   font-size: 1.5rem;
   margin-bottom: 10px;
}

#assistant_answer h4 {
   font-size: 1.3rem;
   margin-bottom: 8px;
}

#assistant_answer h5 {
   font-size: 1.15rem;
   margin-bottom: 6px;
}

/* Paragraphs */
#assistant_answer p {
   font-size: 1rem;
   margin-bottom: 16px;
}

/* Unordered and Ordered Lists */
#assistant_answer ul,
#assistant_answer ol {
   margin: 16px 0;
   padding-left: 20px;
}

#assistant_answer li {
   margin-bottom: 8px;
}

/* Tables */
#assistant_answer table {
   width: 100%;
   border-collapse: collapse;
   margin: 16px 0;
   background-color: #fff;
}

#assistant_answer th,
#assistant_answer td {
   border: 1px solid #ddd;
   padding: 8px;
   text-align: left;
}

#assistant_answer th {
   background-color: #f2f2f2;
   color: #000;
}

.code-wrapper .copy-code,
.code-wrapper .target-lang {
   top: 0px;
   right: 8px !important;
   margin: 0;
   position: relative;
   background: #868a86;
   background-size: contain;
   font-size: 12px;
   color: white;
   align-items: center;
   display: flex;
   justify-content: center;
   z-index: 10;
   width: 100px;
   height: 29px;
   position: relative;
   margin: 0px 3px -25px 0;
   border-radius: 0px;
   cursor: pointer;
}

.code-wrapper .refactor,
.code-wrapper .generate,
.code-wrapper .review_code,
.code-wrapper .explain_code,
.code-wrapper .debugger,
.code-wrapper .documentation,
.code-wrapper .converter {
   top: 0px;
   right: 0;
   margin: 0;
}

.converter {
   margin-top: 5px;
   top: 15px;
   right: 15px;
   position: relative;
   background: #3fa944 url(../../images/convert_code3860.png?v=1) center center no-repeat;
   background-size: contain;
}

.refactor {
   margin-top: 5px;
   top: 15px;
   right: 15px;
   position: relative;
   background: #3fa944 url(../../images/refactor3860.png?v=1) center center no-repeat;
   background-size: contain;
}

.generate,
.documentation {
   margin-top: 5px;
   top: 15px;
   right: 15px;
   position: relative;
   background: #3fa944 url(../../images/generate3860.png?v=1) center center no-repeat;
   background-size: contain;
}

.review_code {
   margin-top: 5px;
   top: 15px;
   right: 15px;
   position: relative;
   background: #3fa944 url(../../images/review_code3860.png?v=1) center center no-repeat;
   background-size: contain;
}

.debugger {
   margin-top: 5px;
   top: 15px;
   right: 15px;
   position: relative;
   background: #3fa944 url(../../images/debug_code3860.png?v=1) center center no-repeat;
   background-size: contain;
}

.explain_code {
   margin-top: 5px;
   top: 15px;
   right: 15px;
   position: relative;
   background: #3fa944 url(../../images/explain_code3860.png?v=1) center center no-repeat;
   background-size: contain;
}

.generate,
.refactor,
.review_code,
.explain_code,
.debugger,
.documentation,
.converter {
   z-index: 10;
   float: right;
   width: 100px;
   height: 29px;
   position: relative;
   margin: 0px 3px -25px 0;
   border-radius: 0px;
   cursor: pointer;
}

#assistant_answer tr:hover {
   background-color: #e9f5f5;
}

/* Responsive Design */
@media (max-width: 768px) {
   #assistant_answer {
      padding: 15px;
   }

   #assistant_answer h1 {
      font-size: 2rem;
   }

   #assistant_answer h2 {
      font-size: 1.75rem;
   }

   #assistant_answer h3 {
      font-size: 1.5rem;
   }

   #assistant_answer p {
      font-size: 0.9rem;
   }

   #assistant_answer th,
   #assistant_answer td {
      padding: 6px;
   }
}

#assistant {
   align-items: center;
   gap: 1rem;
   border-bottom: 1px solid #ccc;
   padding-bottom: 10px;
   margin-bottom: 20px;
}

#assistant h1 {
   font-size: 1.4rem;
}

@media (max-width: 57rem) {
   #assistant h1 {
      font-size: 1rem;
   }

   #toggleBtn {
      display: none;
   }

   .chat-box {
      height: 100% !important;
   }
}

.tutorial-content {
   padding: 1rem !important;
}

.tutorial-content>*+*:not(.toggle):not(.table-of-content-wrapper):not(.tutorial-menu) {
   margin-top: 0rem !important;
   margin-bottom: 1rem !important;
}

.assistIcon {
   font-size: 1.6rem;
}

select {
   width: 125px;
   font-size: 13px;
   padding: 5px 10px !important;
   outline: none;
   border: 1px solid #ccc;
}

.aicodeBtn {
   background: transparent;
   font-size: 14px;
   padding: 4px 10px;
   margin: 0px;
   border: 1px solid #ccc;
   display: block;
   cursor: pointer;
   min-width: 80px;
}

.d-flex {
   display: flex;
   justify-content: end;
   align-items: center;
   gap: .5rem;
}

.chat-box pre {
   background: #080808;
   padding: 10px;
   border-radius: 10px;
}

.chat-dialog {
   position: relative;
   border: none;
   z-index: 9;
   height: calc(65svh);
   width: calc(100%);
}

@media (min-width: 864px) {
   .chat-dialog {
      margin-inline: auto;
   }
}

.chat-box {
   height: 108%;
   background-color: white;
   overflow: hidden;
   display: flex;
   flex-direction: column;
}

.chat-container {
   /*flex: 1;*/
   padding: 0px;
   padding: 0px;
   height: 80%;
   overflow-y: auto;
   display: flex;
   gap: 1rem;
   flex-direction: column;
   background: #ffffff;
   margin-bottom: 10px;
}

.chat-message {
   color: #000;
   padding: 10px;
   display: inline-block;
   max-width: 90%;
   line-height: 26px;
}

.sent-message {
   margin-left: auto;
   background: #e0e0e0;
   border-radius: 10px;
}

.received-message {
   border-radius: 10px;
   background: #eee;
}

.chat-footer {
   display: flex;
   align-items: center;
}

.message-input {
   flex-grow: 1;
   padding: 11px;
}

.send-button {
   padding: 11px 15px;
   cursor: pointer;
}

.big-font {
   font-size: 26px !important;
}

/* css for dropdown */
.dropdown {
   position: relative;
   display: inline-block;
   cursor: pointer;
}

/* AI Assistant related CSS  Ends */