:root {
font-size: clamp(15px, 1vw + .5rem, 18px);
  color: #222;
  background-color: #fff;
    --h1: clamp(1.8rem, 2vw + 1rem, 4rem);
    --h2: clamp(1.6rem, 1.8vw + .9rem, 3.5rem);
    --h3: clamp(1.4rem, 1.6vw + .8rem, 3rem);
    --h4: clamp(1.3rem, 1.4vw + .7rem, 2.6rem);
    --h5: clamp(1.2rem, 1.2vw + .6rem, 2.2rem);
    --h6: clamp(1.1rem, 1vw + .5rem, 1.8rem);
    --w0: #ffffff;
    --w8: #f7f7f7;
    --w16: #efefef;
    --w24: #e7e7e7;
    --w32: #dfdfdf;
    --b0: #000000;
    --b8: #070707;
    --b16: #0f0f0f;
    --b24: #171717;
    --b32: #1f1f1f;
    --pri: #bebebe80;
    --sec: #3f3f3f80;
    --ter: #3f3f3f80;
    --bg: #ffffff;
    --text: #000000;
    --input-bg: #f8f8f8;
    --input-text: #111;
    --border: #ccc;
    --accent: #878787;
    scroll-behavior: smooth;
    shape-rendering: geometricPrecision;
    text-rendering: optimizeLegibility;
}

[data-theme="dark"] {
    --bg: #121212;
    --text: #e0e0e0;
    --input-bg: #1f1f1f;
    --input-text: #f0f0f0;
    --border: #444444;
    --accent: #a0a0a0;
    --pri: #3d3d3d80;
    --sec: #c2c2c280;
    --ter: #757575
}
@media (prefers-color-scheme: dark) {
  :root {
    color: #eee;
    background-color: #121212;
    fill: #eee;
    stroke: #fff;
  }
  .svg{
      fill: #eee;
  }
  
}

body,
input,
select,
textarea,
button {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

*,
*:after,
*:before {
    box-sizing: inherit
}

html {
    box-sizing: border-box;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body,
html {
    font-family: Poppins, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-wrap: break-all;
    text-wrap: wrap;
    hyphens: auto;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--text);
}
body .top {
    background-color: inherit;
    color: inherit
}
.clr,
.themed,
.theme-bg {
    background-color: var(--bg);
    color: var(--text);
}
.clr-rev{
    background-color: var(--text);
    color: var(--bg);
}

.clr-alt {
    background-color: var(--w16);
    color: var(--b24);
}

[data-theme="dark"] .clr-alt {
    background-color: var(--b32);
    color: var(--w16);
}

.themed,
.theme-bg {
    background-color: var(--pri);
}

.hover-theme:hover {
    background-color: var(--pri);
    color: currentColor;
}

[data-theme="dark"] .hover-theme:hover {
    background-color: var(--pri);
    color: currentColor;
}

figure {
    margin: 0
}

iframe,
video {
    width: 100%;
    height: auto
}

button,
input,
optgroup,
select,
textarea {
    font: inherit;
    color:inherit;
    background-color:inherit;
}

textarea {
    width: 100%;
    height: 300px;
}
.textarea{
    width: 100%;
    height: 300px;    
}
img {
    vertical-align: middle
}

a {
    color: inherit
}

h1 {
    font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
    font-weight: 700;
    margin: 1em 0 .5em;
}

h2 {
    font-size: clamp(1.75rem, 3.5vw + 1rem, 3rem);
    font-weight: 600;
    margin: 1em 0 .5em;
}

h3 {
    font-size: clamp(1.5rem, 3vw + .5rem, 2.5rem);
    font-weight: 600;
    margin: 1em 0 .5em;
}

h4 {
    font-size: clamp(1.3rem, 2.5vw + .5rem, 2rem);
    font-weight: 500;
    margin: 1em 0 .5em;
}

h5 {
    font-size: clamp(1.1rem, 2vw + .4rem, 1.5rem);
    font-weight: 500;
    margin: .75em 0 .5em;
}

h6 {
    font-size: clamp(1rem, 1.5vw + .4rem, 1.3rem);
    font-weight: 500;
    margin: .5em 0 .25em;
}

br {
    display: block;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: inherit;
    color: inherit;
}

hr {
    display: block;
    overflow: auto;
    margin-top: 8px;
    margin-bottom: 8px;
    border-top: 1px solid;
    background-color: inherit;
    color: inherit;
}

.main {
    min-height: 100vh;
}

.crsr {
    cursor: pointer
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
    overflow: hidden;
    border-radius: .5em;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}

.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}

.video-wrapper video:focus {
    outline: none;
}

.video-wrapper video::-webkit-media-controls {
    filter: brightness(1.2) contrast(1.1);
}

@media (prefers-color-scheme:dark) {
    .video-wrapper {
        background: #111
    }
}

.code,
.codespan {
    font-family: var(--font-mono);
    font-size: 1.05rem;
}

input[type="number"].input::-webkit-outer-spin-button,
input[type="number"].input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"].input {
    -moz-appearance: textfield;
}

input[type="number"].input {
    appearance: textfield;
}

.sr-only {
    position: absolute;
    left: -100000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form,
.container,
.panel {
    padding: .01em 16px
}

.panel {
    margin-top: 16px;
    margin-bottom: 16px
}

.code,
.codespan {
    font-family: monospace;
    font-size: 110%
}

.code {
    width: auto;
    background-color: currentColor;
    padding: 8px 12px;
    border-left: 4px solid #4caf50;
    word-wrap: break-word
}

.codespan {
    color: #dc143c;
    background-color: currentColor;
    padding-left: 4px;
    padding-right: 4px
}

.video {
    position: relative;
    padding-bottom: 66.66%;
    height: 0
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.img,
.icon,
.logo {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}
   .img-clr {
  filter: invert(0%);
}

@media (prefers-color-scheme:dark) {

    .logo,
    .icon {
        filter: brightness(1.2) contrast(1.1)
    }
    .img-clr {
  filter: invert(100%);
}
}

.logo.sm {
    height: 2em;
    width: auto;
}

.logo.md {
    height: 3em;
    width: auto;
}

.logo.lg {
    height: 4em;
    width: auto;
}

.icon.inline {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .25em;
    vertical-align: middle;
}

.svg {
    max-width: 100%;
    height: auto;
}
.svg-theme {
    max-width: 100%;
    height: auto;
  fill: currentColor;
  stroke: currentColor;
}
.bottom,
.top {
    position: fixed;
    width: 100%;
    z-index: 1;
    display: block
}

.button {
    border: none;
    display: inline-block;
    padding: 10px 12px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
}

.button:hover {
    opacity: .9
}

.button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.button:disabled,
.disabled {
    cursor: not-allowed;
    opacity: .7
}

.disabled *,
:disabled * {
    pointer-events: none
}

.card-1 {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1), 0 1px 7px 0 rgba(0, 0, 0, .08)
}

.card,
.card-2 {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12)
}

.card-4,
.hover-shadow:hover {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .2), 0 4px 20px 0 rgba(0, 0, 0, .19)
}

.badge,
.tag {
    background-color: rgba(239, 239, 239, .5);
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center
}

.badge {
    border-radius: 50%
}

.menu {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    overflow: auto
}

.menu-body {
    position: relative;
    top: 25%;
    width: 100%
}

.pop {
    z-index: 500;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto
}

.pop-body {
    margin: auto;
    background-color: currentColor;
    position: relative;
    padding: 0;
    outline: 0;
    width: 600px
}

.tabbed {
    overflow-x: hidden;
    border-bottom: 1px solid #ccc
}

.tabbed [type="radio"] {
    display: none
}

.tabs {
    display: flex;
    align-items: stretch;
    list-style: none;
    padding: 0;
    border-bottom: 1px solid #ccc
}

.tab>.tab-name {
    display: block;
    margin-bottom: -1px;
    border: 1px solid #ccc;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all .3s
}

.tab:hover .tab-name {
    border-top-color: #333;
    color: #333
}

.tab-item {
    display: none;
    color: #777
}

.tabbed [type="radio"]:nth-of-type(1):checked~.tabs .tab:nth-of-type(1) .tab-name,
.tabbed [type="radio"]:nth-of-type(2):checked~.tabs .tab:nth-of-type(2) .tab-name,
.tabbed [type="radio"]:nth-of-type(3):checked~.tabs .tab:nth-of-type(3) .tab-name,
.tabbed [type="radio"]:nth-of-type(4):checked~.tabs .tab:nth-of-type(4) .tab-name,
.tabbed [type="radio"]:nth-of-type(5):checked~.tabs .tab:nth-of-type(5) .tab-name {
    border-bottom-color: #fff;
    border-top-color: #222;
    background: currentColor;
    color: currentColor
}

.tabbed [type="radio"]:nth-of-type(1):checked~.tab-item:nth-of-type(1),
.tabbed [type="radio"]:nth-of-type(2):checked~.tab-item:nth-of-type(2),
.tabbed [type="radio"]:nth-of-type(3):checked~.tab-item:nth-of-type(3),
.tabbed [type="radio"]:nth-of-type(4):checked~.tab-item:nth-of-type(4) {
    display: block
}

.accord-input {
    position: absolute;
    opacity: 0;
    z-index: -1
}

.accordian {
    overflow-x: hidden;
    overflow-y: auto
}

.accord {
    width: 100%;
    word-wrap: break-word
}

.accord-name {
    display: flex;
    cursor: pointer;
    flex-direction: row;
    align-content: center;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.accord-name::after {
    content: "\2795";
    padding: 8px 12px;
    text-align: center;
    vertical-align: middle;
    transition: all .3s
}

.accord-item {
    max-height: 0;
    transition: all .3s;
    overflow-x: hidden;
    overflow-y: auto;
}

.accord-close {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
    font-size: .75em;
    cursor: pointer
}

.accord-input:checked + .accord-name {
  background-color: var(--bg);
  color: var(--text);
}

.accord-input:checked+.accord-name::after {
    transform: rotate(45deg)
}

.accord-input:checked~.accord-item {
    max-height: 100vh
}

.table,
.table-all {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    display: table
}

.table-all {
    border: 1px solid rgba(128, 128, 128, .5)
}

.bordered tr,
.table-all tr {
    border-bottom: 1px solid #ddd
}

.striped tbody tr:nth-child(even) {
    background-color: #f1f1f1
}

.table-all tr:nth-child(odd) {
    background-color: #fff
}

.table-all tr:nth-child(even) {
    background-color: #f1f1f1
}

.hoverable tbody tr:hover,
.ul.hoverable li:hover {
    background-color: rgba(128, 128, 128, .5)
}

.centered tr td,
.centered tr th {
    text-align: center
}

.table td,
.table th,
.table-all td,
.table-all th {
    padding: 8px;
    display: table-cell;
    text-align: left;
    vertical-align: top
}

.table td:first-child,
.table th:first-child,
.table-all td:first-child,
.table-all th:first-child {
    padding-left: 16px
}

.ul {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.ul li {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(128, 128, 128, .5)
}

.ul li:last-child {
    border-bottom: none
}

.display-container,
.tooltip {
    position: relative
}

.tooltip .text {
    display: none
}

.tooltip:hover .text {
    display: inline-block
}

.ripple:active {
    opacity: .5
}

.ripple {
    transition: opacity 0s
}

.dropdown-click,
.dropdown-hover {
    position: relative;
    display: inline-block;
    cursor: pointer
}

.dropdown-hover:hover .dropdown-content {
    display: block
}

.dropdown-click:hover,
.dropdown-hover:first-child {
    background-color: transparent
}

.dropdown-click:hover>.button:first-child,
.dropdown-hover:hover>.button:first-child {
    background-color: currentColor
}

.dropdown-content {
    cursor: auto;
    color: #000;
    background-color: currentColor;
    display: none;
    position: absolute;
    min-width: 100px;
    margin: 0;
    padding: 0;
    z-index: 500
}

.sidebar {
    height: 100%;
    width: 20%;
    background-color: currentColor;
    position: fixed;
    z-index: 100;
    overflow: auto
}

.bar-block .dropdown-click,
.bar-block .dropdown-hover {
    width: 100%
}

.bar-block .dropdown-click .dropdown-content,
.bar-block .dropdown-hover .dropdown-content {
    min-width: 100%
}

.bar-block .dropdown-click .button,
.bar-block .dropdown-hover .button {
    width: 100%;
    padding: 10px 12px
}

.bar {
    width: 100%;
    overflow: hidden
}

.center .bar {
    display: inline-block;
    width: auto
}

.bar .bar-item {
    padding: 10px 12px;
    width: auto;
    border: none;
    outline: 0
}

.bar-block .bar-item {
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    border: none;
    white-space: normal;
    outline: 0;
    display: block
}

.bar .bar-image {
    width: auto;
    display: inline-block;
    border: none;
    outline: 0
}

.bar .dropdown-click,
.bar .dropdown-hover {
    position: static
}

.bar .button {
    white-space: normal
}

.bar-block .bar-item {
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    border: none;
    white-space: normal;
    outline: 0
}

.bar-block.center .bar-item {
    text-align: center
}



.responsive {
    display: block;
    overflow-x: auto
}

.wall {
    column-count: 1;
    column-gap: 1.5em;
    margin: 1em 0;
}

@media (min-width:600px) {
    .wall {
        column-count: 2
    }
}

@media (min-width:900px) {
    .wall {
        column-count: 3
    }
}

@media (min-width:1200px) {
    .wall {
        column-count: 4
    }
}

@media (min-width:1600px) {
    .wall {
        column-count: 5
    }
}

@media (min-width:2000px) {
    .wall {
        column-count: 6
    }
}

.tile {
    break-inside: avoid;
    margin-bottom: 1.5em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    transition: transform .2s ease;
}

.tile:hover {
    transform: scale(1.02);
}

.cell-row:after,
.cell-row:before,
.clear:after,
.clear:before,
.container:after,
.container:before,
.form:after,
.form:before,
.panel:after,
.panel:before,
.row-padding:after,
.row-padding:before,
.row:after,
.row:before {
    content: "";
    display: table;
    clear: both
}

.col,
.half,
.quarter,
.third,
.threequarter,
.twothird {
    float: left;
    width: 100%;
    left: auto;
    right: auto
}

.row-padding,
.row-padding>.col,
.row-padding>.half,
.row-padding>.quarter,
.row-padding>.third,
.row-padding>.threequarter,
.row-padding>.twothird {
    padding: 0 8px
}

.col.s1 {
    width: 4.16667%
}

.col.s2 {
    width: 8.33333%
}

.col.s3 {
    width: 12.5%
}

.col.s4 {
    width: 16.66667%
}

.col.s5 {
    width: 20.83333%
}

.col.s6 {
    width: 25%
}

.col.s7 {
    width: 29.16667%
}

.col.s8 {
    width: 33.33333%
}

.col.s9 {
    width: 37.5%
}

.col.s10 {
    width: 41.66667%
}

.col.s11 {
    width: 45.83333%
}

.col.s12 {
    width: 50%
}

.col.s13 {
    width: 54.16667%
}

.col.s14 {
    width: 58.33333%
}

.col.s15 {
    width: 62.5%
}

.col.s16 {
    width: 66.66667%
}

.col.s17 {
    width: 70.83333%
}

.col.s18 {
    width: 75%
}

.col.s19 {
    width: 79.16667%
}

.col.s20 {
    width: 83.33333%
}

.col.s21 {
    width: 87.5%
}

.col.s22 {
    width: 91.66667%
}

.col.s23 {
    width: 95.83333%
}

.col.s24 {
    width: 100%
}

@media(min-width:601px) {
    .col.m1 {
        width: 4.16667%
    }

    .col.m2 {
        width: 8.33333%
    }

    .col.m3 {
        width: 12.5%
    }

    .col.m4 {
        width: 16.66667%
    }

    .col.m5 {
        width: 20.83333%
    }

    .col.m6,
    .quarter {
        width: 25%
    }

    .col.m7 {
        width: 29.16667%
    }

    .col.m8,
    .third {
        width: 33.33333%
    }

    .col.m9 {
        width: 37.5%
    }

    .col.m10 {
        width: 41.66667%
    }

    .col.m11 {
        width: 45.83333%
    }

    .col.m12,
    .half {
        width: 50%
    }

    .col.m13 {
        width: 54.16667%
    }

    .col.m14 {
        width: 58.33333%
    }

    .col.m15 {
        width: 62.5%
    }

    .col.m16,
    .twothird {
        width: 66.66667%
    }

    .col.m17 {
        width: 70.83333%
    }

    .col.m18,
    .threequarter {
        width: 75%
    }

    .col.m19 {
        width: 79.16667%
    }

    .col.m20 {
        width: 83.33333%
    }

    .col.m21 {
        width: 87.5%
    }

    .col.m22 {
        width: 91.66667%
    }

    .col.m23 {
        width: 95.83333%
    }

    .col.m24 {
        width: 100%
    }
}

@media(min-width:993px) {
    .col.l1 {
        width: 4.16667%
    }

    .col.l2 {
        width: 8.33333%
    }

    .col.l3 {
        width: 12.5%
    }

    .col.l4 {
        width: 16.66667%
    }

    .col.l5 {
        width: 20.83333%
    }

    .col.l6 {
        width: 25%
    }

    .col.l7 {
        width: 29.16667%
    }

    .col.l8 {
        width: 33.33333%
    }

    .col.l9 {
        width: 37.5%
    }

    .col.l10 {
        width: 41.66667%
    }

    .col.l11 {
        width: 45.83333%
    }

    .col.l12 {
        width: 50%
    }

    .col.l13 {
        width: 54.16667%
    }

    .col.l14 {
        width: 58.33333%
    }

    .col.l15 {
        width: 62.5%
    }

    .col.l16 {
        width: 66.66667%
    }

    .col.l17 {
        width: 70.83333%
    }

    .col.l18 {
        width: 75%
    }

    .col.l19 {
        width: 79.16667%
    }

    .col.l20 {
        width: 83.33333%
    }

    .col.l21 {
        width: 87.5%
    }

    .col.l22 {
        width: 91.66667%
    }

    .col.l23 {
        width: 95.83333%
    }

    .col.l24 {
        width: 100%
    }
}

@media(min-width:1200px) {
    .col.xl1 {
        width: 4.16667%
    }

    .col.xl2 {
        width: 8.33333%
    }

    .col.xl3 {
        width: 12.5%
    }

    .col.xl4 {
        width: 16.66667%
    }

    .col.xl5 {
        width: 20.83333%
    }

    .col.xl6 {
        width: 25%
    }

    .col.xl7 {
        width: 29.16667%
    }

    .col.xl8 {
        width: 33.33333%
    }

    .col.xl9 {
        width: 37.5%
    }

    .col.xl10 {
        width: 41.66667%
    }

    .col.xl11 {
        width: 45.83333%
    }

    .col.xl12 {
        width: 50%
    }

    .col.xl13 {
        width: 54.16667%
    }

    .col.xl14 {
        width: 58.33333%
    }

    .col.xl15 {
        width: 62.5%
    }

    .col.xl16 {
        width: 66.66667%
    }

    .col.xl17 {
        width: 70.83333%
    }

    .col.xl18 {
        width: 75%
    }

    .col.xl19 {
        width: 79.16667%
    }

    .col.xl20 {
        width: 83.33333%
    }

    .col.xl21 {
        width: 87.5%
    }

    .col.xl22 {
        width: 91.66667%
    }

    .col.xl23 {
        width: 95.83333%
    }

    .col.xl24 {
        width: 100%
    }
}

.rest {
    overflow: hidden
}

.stretch {
    margin-left: -16px;
    margin-right: -16px
}

.center-abs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wide {
    letter-spacing: 4px
}

.hide-empty:empty {
    display: none;
}

.auto,
.content {
    margin-left: auto;
    margin-right: auto
}

.content {
    max-width: 980px
}

.auto {
    max-width: 1140px
}

.cell-row {
    display: table;
    width: 100%
}

.cell {
    display: table-cell
}

.cell-top {
    vertical-align: top
}

.cell-middle {
    vertical-align: middle
}

.cell-bottom {
    vertical-align: bottom
}

.hide {
    display: none
}

.show,
.show-block {
    display: block
}

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

@media(max-width:449px) {
    .pop-body {
        width: 98vw
    }

    .hide-xs {
        display: none
    }

    .mobile {
        display: block;
        width: 100%
    }
}

@media (max-width:600px) and (min-width:450px) {
    .pop-body {
        width: 98vw
    }

    .hide-small {
        display: none
    }

    .mobile {
        display: block;
        width: 100%
    }
}

@media (max-width:992px) and (min-width:601px) {
    .hide-medium {
        display: none
    }
}

@media (min-width:993px) and (max-width:1499px) {
    .hide-large {
        display: none
    }

    .sidebar.collapse {
        display: block
    }
}

@media (min-width:1500px) {
    .hide-xl {
        display: none
    }

    .sidebar.collapse {
        display: block
    }
}

@media (max-width:992px) {
    .sidebar.collapse {
        display: none
    }
}

.d-container {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 0;
}

.m-block {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

.d-child {
    position: absolute;
}

.d-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.d-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.d-left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.d-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.d-topleft {
    top: 0;
    left: 0;
}

.d-topright {
    top: 0;
    right: 0;
}

.d-bottomleft {
    bottom: 0;
    left: 0;
}

.d-bottomright {
    bottom: 0;
    right: 0;
}

.d-middle {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.d-container:hover .d-hover {
    display: block
}

.d-container:hover span.d-hover {
    display: inline-block
}

.d-hover {
    display: none
}

.d-position {
    position: absolute
}

.spin {
    animation: spin 2s infinite linear
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(359deg)
    }
}

.ani-zoom {
    animation: animatezoom 2s
}

@keyframes animatezoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.ani-fading {
    animation: fading 10s infinite
}

@keyframes fading {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.ani-opq-3 {
    animation: opac .3s
}

@keyframes opac {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.ani-opq-5 {
    animation: opac .5s
}

@keyframes opac {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.ani-opq-7 {
    animation: opac .7s
}

@keyframes opac {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.ani-top {
    position: relative;
    animation: animatetop .4s
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

.ani-left {
    position: relative;
    animation: animateleft .4s
}

@keyframes animateleft {
    from {
        left: -300px;
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

.ani-right {
    position: relative;
    animation: animateright .4s
}

@keyframes animateright {
    from {
        right: -300px;
        opacity: 0
    }

    to {
        right: 0;
        opacity: 1
    }
}

.ani-bottom {
    position: relative;
    animation: animatebottom .4s
}

@keyframes animatebottom {
    from {
        bottom: -300px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

.zoom-2 {
    animation: animatezoom .2s
}

.zoom-3 {
    animation: animatezoom .3s
}

.zoom-4 {
    animation: animatezoom .4s
}

.zoom-5 {
    animation: animatezoom .5s
}

.zoom-6 {
    animation: animatezoom .6s
}

@keyframes animatezoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.ani-input {
    transition: width .4s ease-in-out
}

.ani-input:focus {
    width: 100%
}

.h-opq-off:hover,
.opq-off {
    opacity: 1
}

.h-opq-2:hover,
.opq-2 {
    opacity: .2
}

.h-opq-3:hover,
.opq-3 {
    opacity: .3
}

.h-opq-4:hover,
.opq-4 {
    opacity: .4
}

.h-opq-5:hover,
.opq-5 {
    opacity: .5
}

.h-opq-6:hover,
.opq-6 {
    opacity: .6
}

.h-opq-7:hover,
.opq-7 {
    opacity: .7
}

.h-opq-8:hover,
.opq-8 {
    opacity: .8
}

.h-opq-9:hover,
.opq-9 {
    opacity: .9
}

.drk-1 {
    filter: brightness(.1)
}

.drk-2 {
    filter: brightness(.2)
}

.drk-3 {
    filter: brightness(.3)
}

.drk-5 {
    filter: brightness(.5)
}

.drk-7 {
    filter: brightness(.7)
}

.drk-9 {
    filter: brightness(.9)
}

.gs-10,
.h-gs-10:hover {
    filter: grayscale(100%)
}

.gs-7,
.h-gs-7:hover {
    filter: grayscale(70%)
}

.gs-5,
.h-gs-5:hover {
    filter: grayscale(50%)
}

.gs-3,
.h-gs-3:hover {
    filter: grayscale(30%)
}

.gs-1,
.h-gs-1:hover {
    filter: grayscale(10%)
}

.h-sepia-75:hover,
.sepia-75 {
    filter: sepia(75%)
}

.h-sepia-100:hover,
.sepia-100 {
    filter: sepia(100%)
}

.h-sepia-50:hover,
.sepia-50 {
    filter: sepia(50%)
}

.left-align {
    text-align: left
}

.right-align {
    text-align: right
}

.justify {
    text-align: justify
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.t-center {
    text-align: center;
}
.b-0 {
    border: 0
}

.b-1 {
    border: 1px solid
}

.b-2 {
    border: 2px solid
}

.b-3 {
    border: 3px solid
}

.b-4 {
    border: 4px solid
}

.b-5 {
    border: 5px solid
}

.t-bar-1 {
    border-top: 1px solid
}

.b-bar-1 {
    border-bottom: 1px solid
}

.l-bar-1 {
    border-left: 1px solid
}

.r-bar-1 {
    border-right: 1px solid
}

.t-bar-5 {
    border-top: 5px solid
}

.b-bar-5 {
    border-bottom: 5px solid
}

.l-bar-5 {
    border-left: 5px solid
}

.r-bar-5 {
    border-right: 5px solid
}


.h-10 {
    height: 10%;
}

.h-20 {
    height: 20%;
}

.h-30 {
    height: 30%;
}

.h-40 {
    height: 40%;
}

.h-50 {
    height: 50%;
}

.h-60 {
    height: 60%;
}

.h-70 {
    height: 70%;
}

.h-80 {
    height: 80%;
}

.h-90 {
    height: 90%;
}

.h-100 {
    height: 100%;
}

.w-10 {
    width: 10%;
}

.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.w-100 {
    width: 100%;
}


.vh-10 {
    height: 10vh;
}

.vh-20 {
    height: 20vh;
}

.vh-30 {
    height: 30vh;
}

.vh-40 {
    height: 40vh;
}

.vh-50 {
    height: 50vh;
}

.vh-60 {
    height: 60vh;
}

.vh-70 {
    height: 70vh;
}

.vh-80 {
    height: 80vh;
}

.vh-90 {
    height: 90vh;
}

.vh-100 {
    height: 100vh;
}

.vw-10 {
    width: 10vw;
}

.vw-20 {
    width: 20vw;
}

.vw-30 {
    width: 30vw;
}

.vw-40 {
    width: 40vw;
}

.vw-50 {
    width: 50vw;
}

.vw-60 {
    width: 60vw;
}

.vw-70 {
    width: 70vw;
}

.vw-80 {
    width: 80vw;
}

.vw-90 {
    width: 90vw;
}

.vw-100 {
    width: 100vw;
}

.br-0 {
    border-radius: 0
}

.br-2 {
    border-radius: 2px
}

.br-4 {
    border-radius: 4px
}

.br-8 {
    border-radius: 8px
}

.br-16 {
    border-radius: 16px
}

.br-24 {
    border-radius: 24px
}

.br25 {
    border-radius: 25%
}

.br50 {
    border-radius: 50%
}

.br75 {
    border-radius: 75%
}

.br100 {
    border-radius: 100%
}

.m-32 {
    margin: 32px
}

.m-16 {
    margin: 16px
}

.m-12 {
    margin: 8px
}

.m-8 {
    margin: 8px
}

.m-4 {
    margin: 4px
}

.m-2 {
    margin: 2px
}

.m-1 {
    margin: 1px
}

.m-0 {
    margin: 0
}

.m-t-0 {
    margin-top: 0
}

.m-b-0 {
    margin-bottom: 0
}

.m-l-0 {
    margin-left: 0
}

.m-r-0 {
    margin-right: 0
}

.m-t-2 {
    margin-top: 2px
}

.m-b-2 {
    margin-bottom: 2px
}

.m-l-2 {
    margin-left: 2px
}

.m-r-2 {
    margin-right: 2px
}

.m-t-4 {
    margin-top: 4px
}

.m-b-4 {
    margin-bottom: 4px
}

.m-l-4 {
    margin-left: 4px
}

.m-r-4 {
    margin-right: 4px
}

.m-t-8 {
    margin-top: 8px
}

.m-b-8 {
    margin-bottom: 8px
}

.m-l-8 {
    margin-left: 8px
}

.m-r-8 {
    margin-right: 8px
}

.m-t-16 {
    margin-top: 16px
}

.m-b-16 {
    margin-bottom: 16px
}

.m-l-16 {
    margin-left: 16px
}

.m-r-16 {
    margin-right: 16px
}

.m-t-32 {
    margin-top: 32px
}

.m-b-32 {
    margin-bottom: 32px
}

.m-l-32 {
    margin-left: 32px
}

.m-r-32 {
    margin-right: 32px
}

.p-0 {
    padding: 0
}

.p-2 {
    padding: 2px
}

.p-4 {
    padding: 4px
}

.p-8 {
    padding: 8px
}

.p-12 {
    padding: 12px
}

.p-16 {
    padding: 16px
}

.p-24 {
    padding: 24px
}

.p-32 {
    padding: 32px
}

.p-48 {
    padding: 48px
}

.p-64 {
    padding: 64px
}

.p-t-0 {
    padding-top: 0
}

.p-b-0 {
    padding-bottom: 0
}

.p-l-0 {
    padding-left: 0
}

.p-r-0 {
    padding-right: 0
}

.p-t-2 {
    padding-top: 2px
}

.p-b-2 {
    padding-bottom: 2px
}

.p-l-2 {
    padding-left: 2px
}

.p-r-2 {
    padding-right: 2px
}

.p-t-4 {
    padding-top: 4px
}

.p-b-4 {
    padding-bottom: 4px
}

.p-l-4 {
    padding-left: 4px
}

.p-r-4 {
    padding-right: 4px
}

.p-t-8 {
    padding-top: 8px
}

.p-b-8 {
    padding-bottom: 8px
}

.p-l-8 {
    padding-left: 8px
}

.p-r-8 {
    padding-right: 8px
}

.p-t-16 {
    padding-top: 16px
}

.p-b-16 {
    padding-bottom: 16px
}

.p-l-16 {
    padding-left: 16px
}

.p-r-16 {
    padding-right: 16px
}

.p-t-32 {
    padding-top: 32px
}

.p-b-32 {
    padding-bottom: 32px
}

.p-l-32 {
    padding-left: 32px
}

.p-r-32 {
    padding-right: 32px
}

.left {
    float: left
}

.right {
    float: right
}

.inline {
    display: inline
}

.block {
    display: block;
    width: 100%
}

.inline-block {
    display: inline-block
}

.inline-flex {
    display: inline-flex
}

.stick-top {
    position: sticky;
    top: 0;
}

.stick-bottom {
    position: sticky;
    bottom: 0;
}

.stick-left {
    position: sticky;
    left: 0;
}

.stick-right {
    position: sticky;
    right: 0;
}

.fixed-top {
    position: fixed;
    top: 0;
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
}

.fixed-left {
    position: fixed;
    left: 0;
}

.fixed-right {
    position: fixed;
    right: 0;
}
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

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

.flex-justify-start {
    justify-content: flex-start;
}

.flex-justify-end {
    justify-content: flex-end;
}

.flex-justify-between {
    justify-content: space-between;
}

.flex-justify-around {
    justify-content: space-around;
}

.flex-align-start {
    align-items: flex-start;
}

.flex-align-end {
    align-items: flex-end;
}

.flex-align-stretch {
    align-items: stretch;
}

.flex-align-baseline {
    align-items: baseline;
}

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

.flex-no-grow {
    flex-grow: 0;
}

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

.flex-no-shrink {
    flex-shrink: 0;
}

.flex-basis-auto {
    flex-basis: auto;
}

.flex-basis-0 {
    flex-basis: 0;
}

.flex-auto {
    flex: 1 1 auto;
}

.order-0 {
    order: 0
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.order-3 {
    order: 3
}

.order-4 {
    order: 4
}

.order-5 {
    order: 5
}

.order-first {
    order: -1
}

.order-last {
    order: 9999
}

.gap-0 {
    gap: 0
}

.gap-1 {
    gap: .25rem
}

.gap-2 {
    gap: .5rem
}

.gap-3 {
    gap: .75rem
}

.gap-4 {
    gap: 1rem
}

.gap-5 {
    gap: 1.25rem
}

.gap-6 {
    gap: 1.5rem
}

.invert-100,
.invert-90,
.invert-75,
.invert-50,
.invert-25,
.invert-10 {
    -webkit-filter: invert(var(--invert-val));
    filter: invert(var(--invert-val));
    transition: filter .3s ease;
}

.invert-100 {
    --invert-val: 100%
}

.invert-90 {
    --invert-val: 90%
}

.invert-75 {
    --invert-val: 75%
}

.invert-50 {
    --invert-val: 50%
}

.invert-25 {
    --invert-val: 25%
}

.invert-10 {
    --invert-val: 10%
}

.blur-2,
.blur-4,
.blur-8,
.blur-16 {
    -webkit-filter: blur(var(--blur-val));
    filter: blur(var(--blur-val));
    transition: filter .3s ease;
}

.blur-2 {
    --blur-val: 2px
}

.blur-4 {
    --blur-val: 4px
}

.blur-8 {
    --blur-val: 8px
}

.blur-16 {
    --blur-val: 16px
}

.blur-bg-2,
.blur-bg-4,
.blur-bg-8,
.blur-bg-16 {
    -webkit-backdrop-filter: blur(var(--blur-bg-val));
    backdrop-filter: blur(var(--blur-bg-val));
    transition: backdrop-filter .3s ease;
}

.blur-bg-2 {
    --blur-bg-val: 2px
}

.blur-bg-4 {
    --blur-bg-val: 4px
}

.blur-bg-8 {
    --blur-bg-val: 8px
}

.blur-bg-16 {
    --blur-bg-val: 16px
}

.hover-none:hover,
.transparent {
    background-color: transparent
}

.hover-none:hover {
    box-shadow: none
}

.hover-poly:hover,
.poly {
    background: linear-gradient(red, orange, #ff0, green, #00f, indigo, violet)
}

.hover-poly-l:hover,
.poly-l {
    background: linear-gradient(#ff7f7f, #ffd27f, #ffff7f, #7fff7f, #7f7fff, #ca7fff, #ff7fff)
}

.hover-poly-dark:hover,
.poly-dark {
    background: linear-gradient(red, orange, #ff0, green, #00f, indigo, violet)
}

.amber,
.hover-amber:hover {
    color: #000;
    background-color: #ffc107
}

.aqua,
.hover-aqua:hover {
    color: #000;
    background-color: #0ff
}

.blue,
.hover-blue:hover {
    color: #fff;
    background-color: #2196f3
}

.hover-l-blue:hover,
.l-blue {
    color: #000;
    background-color: #87ceeb
}

.brown,
.hover-brown:hover {
    color: #fff;
    background-color: #795548
}

.cyan,
.hover-cyan:hover {
    color: #000;
    background-color: #00bcd4
}

.blue-gray,
.blue-grey,
.hover-blue-gray:hover,
.hover-blue-grey:hover {
    color: #fff;
    background-color: #607d8b
}

.green,
.hover-green:hover {
    color: #fff;
    background-color: #4caf50
}

.hover-l-green:hover,
.l-green {
    color: #000;
    background-color: #8bc34a
}

.hover-indigo:hover,
.indigo {
    color: #fff;
    background-color: #3f51b5
}

.hover-khaki:hover,
.khaki {
    color: #000;
    background-color: khaki
}

.hover-lime:hover,
.lime {
    color: #000;
    background-color: #cddc39
}

.hover-orange:hover,
.orange {
    color: #000;
    background-color: #ff9800
}

.deep-orange,
.hover-deep-orange:hover {
    color: #fff;
    background-color: #ff5722
}

.hover-pink:hover,
.pink {
    color: #fff;
    background-color: #e91e63
}

.hover-purple:hover,
.purple {
    color: #fff;
    background-color: #9c27b0
}

.deep-purple,
.hover-deep-purple:hover {
    color: #fff;
    background-color: #673ab7
}

.deep-p-purple,
.hover-deep-p-purple:hover {
    color: #fff;
    background-color: #8e77b6
}

.hover-red:hover,
.red {
    color: #fff;
    background-color: #f44336
}

.hover-sand:hover,
.sand {
    color: #000;
    background-color: #fdf5e6
}

.hover-teal:hover,
.teal {
    color: #fff;
    background-color: #009688
}

.hover-yellow:hover,
.yellow {
    color: #000;
    background-color: #ffeb3b
}

.hover-white:hover,
.white {
    color: #000;
    background-color: #fff
}

.black,
.hover-black:hover {
    color: #fff;
    background-color: #000
}

.hover-silver:hover,
.silver {
    color: #000;
    background-color: silver
}

.gray,
.hover-gray:hover {
    color: #000;
    background-color: #e4e4e4
}

.hover-l-gray:hover,
.l-gray {
    color: #000;
    background-color: #f1f1f1
}

.dark-gray,
.hover-dark-gray:hover {
    color: #fff;
    background-color: #494949
}

.darker-gray,
.hover-darker-gray:hover {
    color: #f3f3f3;
    background-color: #272727
}

.hover-l-red:hover,
.l-red {
    color: #000;
    background-color: #fdd
}

.hover-l-green:hover,
.l-green {
    color: #000;
    background-color: #dfd
}

.hover-l-yellow:hover,
.l-yellow {
    color: #000;
    background-color: #ffc
}

.hover-l-blue:hover,
.l-blue {
    color: #000;
    background-color: #dff
}

.hover-text-amber:hover,
.text-amber {
    color: #ffc107
}

.hover-text-aqua:hover,
.text-aqua {
    color: #0ff
}

.hover-text-blue:hover,
.text-blue {
    color: #2196f3
}

.hover-text-l-blue:hover,
.text-l-blue {
    color: #87ceeb
}

.hover-text-brown:hover,
.text-brown {
    color: #795548
}

.hover-text-cyan:hover,
.text-cyan {
    color: #00bcd4
}

.hover-text-blue-gray:hover,
.text-blue-gray {
    color: #607d8b
}

.hover-text-green:hover,
.text-green {
    color: #4caf50
}

.hover-text-l-green:hover,
.text-l-green {
    color: #8bc34a
}

.hover-text-indigo:hover,
.text-indigo {
    color: #3f51b5
}

.hover-text-khaki:hover,
.text-khaki {
    color: #b4aa50
}

.hover-text-lime:hover,
.text-lime {
    color: #cddc39
}

.hover-text-orange:hover,
.text-orange {
    color: #ff9800
}

.hover-text-deep-orange:hover,
.text-deep-orange {
    color: #ff5722
}

.hover-text-pink:hover,
.text-pink {
    color: #e91e63
}

.hover-text-purple:hover,
.text-purple {
    color: #9c27b0
}

.hover-text-deep-purple:hover,
.text-deep-purple {
    color: #673ab7
}

.hover-text-red:hover,
.text-red {
    color: #f44336
}

.hover-text-sand:hover,
.text-sand {
    color: #fdf5e6
}

.hover-text-teal:hover,
.text-teal {
    color: #009688
}

.hover-text-yellow:hover,
.text-yellow {
    color: #d2be0e
}

.hover-text-white:hover,
.text-white {
    color: #fff
}

.hover-text-black:hover,
.text-black {
    color: #000
}

.hover-text-gray:hover,
.text-gray {
    color: #757575
}

.hover-text-l-gray:hover,
.text-l-gray {
    color: #cfcfcf
}

.hover-text-dark-gray:hover,
.text-dark-gray {
    color: #646464
}

.hover-text-darker-gray:hover,
.hover-text-darker-grey:hover,
.text-darker-gray,
.text-darker-grey {
    color: #2e2e2e
}

.b-amber,
.hover-border-amber:hover {
    border-color: #ffc107
}

.b-aqua,
.hover-border-aqua:hover {
    border-color: #0ff
}

.b-blue,
.hover-border-blue:hover {
    border-color: #2196f3
}

.b-l-blue,
.hover-border-l-blue:hover {
    border-color: #87ceeb
}

.b-brown,
.hover-border-brown:hover {
    border-color: #795548
}

.b-cyan,
.hover-border-cyan:hover {
    border-color: #00bcd4
}

.b-blue-gray,
.hover-border-blue-gray:hover {
    border-color: #607d8b
}

.b-green,
.hover-border-green:hover {
    border-color: #4caf50
}

.b-l-green,
.hover-border-l-green:hover {
    border-color: #8bc34a
}

.b-indigo,
.hover-border-indigo:hover {
    border-color: #3f51b5
}

.b-khaki,
.hover-border-khaki:hover {
    border-color: khaki
}

.b-lime,
.hover-border-lime:hover {
    border-color: #cddc39
}

.b-orange,
.hover-border-orange:hover {
    border-color: #ff9800
}

.b-deep-orange,
.hover-border-deep-orange:hover {
    border-color: #ff5722
}

.b-pink,
.hover-border-pink:hover {
    border-color: #e91e63
}

.b-purple,
.hover-border-purple:hover {
    border-color: #9c27b0
}

.b-deep-purple,
.hover-border-deep-purple:hover {
    border-color: #673ab7
}

.b-red,
.hover-border-red:hover {
    border-color: #f44336
}

.b-sand,
.hover-border-sand:hover {
    border-color: #fdf5e6
}

.b-teal,
.hover-border-teal:hover {
    border-color: #009688
}

.b-yellow,
.hover-border-yellow:hover {
    border-color: #ffeb3b
}

.b-white,
.hover-border-white:hover {
    border-color: #fff
}

.b-black,
.hover-border-black:hover {
    border-color: #000
}

.b-gray,
.hover-border-gray:hover,
.hover-border-grey:hover {
    border-color: #9e9e9e
}

.b-l-gray,
.hover-border-l-gray:hover,
.hover-border-l-grey:hover {
    border-color: #f1f1f1
}

.b-dark-gray,
.hover-border-dark-gray:hover,
.hover-border-dark-grey:hover {
    border-color: #616161
}

.b-l-red,
.hover-border-l-red:hover {
    border-color: #ffe7e7
}

.b-l-green,
.hover-border-l-green:hover {
    border-color: #e7ffe7
}

.b-l-yellow,
.hover-border-l-yellow:hover {
    border-color: #ffc
}

.b-l-blue,
.hover-border-l-blue:hover {
    border-color: #e7ffff
}

.bottom,
.top {
    position: fixed;
    width: 100%;
    display: block
}

.top {
    top: 0
}

.bottom {
    bottom: 0
}

.capital {
    text-transform: capitalize
}

.upper {
    text-transform: uppercase
}

.lower {
    text-transform: lowercase
}

.serif {
    font-family: serif
}

.sans {
    font-family: sans-serif
}

.cursive {
    font-family: cursive
}

.monospace {
    font-family: monospace
}

.fantasy {
    font-family: fantasy
}

.b {
    font-weight: 700
}

.u {
    text-decoration: underline
}

.i {
    font-style: italic
}

.nd {
    text-decoration: none
}

.fs050 {
    font-size: .5em
}

.fs060 {
    font-size: .6em
}

.fs070 {
    font-size: .7em
}

.fs075 {
    font-size: .75em
}

.fs080 {
    font-size: .8em
}

.fs090 {
    font-size: .9em
}

.fs100 {
    font-size: 1em
}

.fs110 {
    font-size: 1.1em
}

.fs120 {
    font-size: 1.2em
}

.fs130 {
    font-size: 1.3em
}

.fs140 {
    font-size: 1.4em
}

.fs150 {
    font-size: 1.5em
}

.fs160 {
    font-size: 1.6em
}

.fs170 {
    font-size: 1.7em
}

.fs180 {
    font-size: 1.8em
}

.fs190 {
    font-size: 1.9em
}

.fs200 {
    font-size: 2em
}

.fs220 {
    font-size: 2.2em
}

.fs230 {
    font-size: 2.3em
}

.fs250 {
    font-size: 2.5em
}

.fs300 {
    font-size: 3em
}

.fs-10 {
    font-size: 10px
}

.fs-11 {
    font-size: 11px
}

.fs-12 {
    font-size: 12px
}

.fs-13 {
    font-size: 13px
}

.fs-14 {
    font-size: 14px
}

.fs-15 {
    font-size: 15px
}

.fs-16 {
    font-size: 16px
}

.fs-18 {
    font-size: 18px
}

.fs-20 {
    font-size: 20px
}

.fs-22 {
    font-size: 22px
}

.fs-24 {
    font-size: 24px
}

.fs-26 {
    font-size: 26px
}

.fs-28 {
    font-size: 28px
}

.fs-30 {
    font-size: 30px
}

.fs-32 {
    font-size: 32px
}

.fs-36 {
    font-size: 36px
}

.fs-48 {
    font-size: 48px
}

.fs-60 {
    font-size: 60px
}

.fs-72 {
    font-size: 72px
}

.fs-84 {
    font-size: 84px
}

.fs-96 {
    font-size: 96px
}

.fw1 {
    font-weight: 100
}

.fw2 {
    font-weight: 200
}

.fw3 {
    font-weight: 300
}

.fw4 {
    font-weight: 400
}

.fw5 {
    font-weight: 500
}

.fw6 {
    font-weight: 600
}

.fw7 {
    font-weight: 700
}

.fw8 {
    font-weight: 800
}

.fw9 {
    font-weight: 900
}

.vab {
    vertical-align: bottom
}

.vat {
    vertical-align: top
}

.vam {
    vertical-align: middle
}

.transit-1 {
    transition: .1s
}

.transit-2 {
    transition: .2s
}

.transit-3 {
    transition: .3s
}

.transit-4 {
    transition: .4s
}

.transit-5 {
    transition: .5s
}

.field-group {
    margin-bottom: 1.5em;
    display: flex;
    flex-direction: column;
    gap: .4em;
}

.label {
    font-size: clamp(.9rem, 1vw, 1rem);
    font-weight: 500;
    color: inherit;
    cursor: pointer;
}

.input,
.select,
.datalist {
    padding: .6em .8em;
    width: 100%;
    border: none;
    border-bottom: 2px solid rgba(127, 127, 127, .4);
    background: transparent;
    color: inherit;
    font: inherit;
    box-sizing: border-box;
    transition: border-color .3s ease;
}

.input:focus,
.select:focus,
.datalist:focus {
    outline: none;
    border-color: currentColor;
}

input[type="number"].input,
input[type="date"].input,
input[type="email"].input,
input[type="text"].input,
input[type="url"].input {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.check,
.radio {
    appearance: none;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    background: none;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
}

.radio {
    border-radius: 50%;
}

.check:checked,
.radio:checked {
    background-color: currentColor;
}

.check:disabled,
.radio:disabled,
.input:disabled,
.select:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.switch-wrapper {
    display: flex;
    align-items: center;
    gap: .5em;
    cursor: pointer;
}

.switch {
    appearance: none;
    display: inline-block;
    width: 2.2em;
    height: 1.2em;
    position: relative;
    border: 2px solid currentColor;
    background: transparent;
    cursor: pointer;
    transition: background-color .3s ease;
    vertical-align: middle;
}

.switch::before {
    content: "";
    position: absolute;
    top: 50%;
    left: .2em;
    width: .8em;
    height: .8em;
    background: currentColor;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: left .3s ease;
}

.switch:checked::before {
    left: 1.1em;
}

.switch-label {
    font-size: .9em;
    user-select: none;
}

.switch:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.input:required:invalid:not(:placeholder-shown) {
    border-color: rgba(255, 255, 0, .5);
}

.input:required:invalid:not(:placeholder-shown):not(:focus) {
    border-color: rgba(255, 0, 0, .5);
}

.input:required:valid:focus,
.input:required:focus {
    border-color: rgba(0, 0, 255, .5);
}

.input:required:valid:not(:placeholder-shown):not(:focus) {
    border-color: rgba(0, 127, 0, .5);
}

.input:optional {
    border-color: rgba(63, 63, 63, .5);
}

.password-field {
    position: relative;
}

.password {
    width: 100%;
    padding-right: 2em;
    height: 2.5em;
    line-height: 2.5em;
    font-size: 1em;
    box-sizing: border-box;
    vertical-align: middle;
}

.toggle-icon {
    position: absolute;
    right: .5em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    line-height: 1;
    color: currentColor;
    cursor: pointer;
    opacity: .6;
    transition: opacity .2s;
    user-select: none;
}

.toggle-icon:hover {
    opacity: 1;
}