:root {
    --gray-50: #f9fafb;
    --gray-100: #f4f5f7;
    --gray-200: #e5e7eb;
    --gray-300: #d2d6dc;
    --gray-400: #9fa6b2;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #252f3f;
    --gray-900: #161e2e;


    --red-50: #fdf2f2;
    --red-100: #fde8e8;
    --red-200: #fbd5d5;
    --red-300: #f8b4b4;
    --red-400: #f98080;
    --red-500: #f05252;
    --red-600: #e02424;
    --red-700: #c81e1e;
    --red-800: #9b1c1c;
    --red-900: #771d1d;

    --yellow-50: #fdfdea;
    --yellow-100: #fdf6b2;
    --yellow-200: #fce96a;
    --yellow-300: #faca15;
    --yellow-400: #e3a008;
    --yellow-500: #c27803;
    --yellow-600: #9f580a;
    --yellow-700: #8e4b10;
    --yellow-800: #723b13;
    --yellow-900: #633112;

    --green-50: #f3faf7;
    --green-100: #def7ec;
    --green-200: #bcf0da;
    --green-300: #84e1bc;
    --green-400: #31c48d;
    --green-500: #0e9f6e;
    --green-600: #057a55;
    --green-700: #046c4e;
    --green-800: #03543f;
    --green-900: #014737;

    --teal-50: #edfafa;
    --teal-100: #d5f5f6;
    --teal-200: #afecef;
    --teal-300: #7edce2;
    --teal-400: #16bdca;
    --teal-500: #0694a2;
    --teal-600: #047481;
    --teal-700: #036672;
    --teal-800: #05505c;
    --teal-900: #014451;

    --blue-50: #ebf5ff;
    --blue-100: #e1effe;
    --blue-200: #c3ddfd;
    --blue-300: #a4cafe;
    --blue-400: #76a9fa;
    --blue-500: #3f83f8;
    --blue-600: #1c64f2;
    --blue-700: #1a56db;
    --blue-800: #1e429f;
    --blue-900: #233876;

    --indigo-50: #f0f5ff;
    --indigo-100: #e5edff;
    --indigo-200: #cddbfe;
    --indigo-300: #b4c6fc;
    --indigo-400: #8da2fb;
    --indigo-500: #6875f5;
    --indigo-600: #5850ec;
    --indigo-700: #5145cd;
    --indigo-800: #42389d;
    --indigo-900: #362f78;
}



.text-yellow-50 {
    color: var(--yellow-50);
}

.text-yellow-100 {
    color: var(--yellow-100);
}

.text-yellow-200 {
    color: var(--yellow-200);
}

.text-yellow-300 {
    color: var(--yellow-300);
}

.text-yellow-400 {
    color: var(--yellow-400);
}

.text-yellow-500 {
    color: var(--yellow-500);
}

.text-yellow-600 {
    color: var(--yellow-600);
}

.text-yellow-700 {
    color: var(--yellow-700);
}

.text-yellow-800 {
    color: var(--yellow-800);
}

.text-blue-50 {
    color: var(--blue-50);
}

.text-blue-100 {
    color: var(--blue-100);
}

.text-blue-200 {
    color: var(--blue-200);
}

.text-blue-300 {
    color: var(--blue-300);
}

.text-blue-400 {
    color: var(--blue-400);
}

.text-blue-500 {
    color: var(--blue-500);
}

.text-blue-600 {
    color: var(--blue-600);
}

.text-blue-700 {
    color: var(--blue-700);
}

.text-blue-800 {
    color: var(--blue-800);
}

.text-red-50 {
    color: var(--red-50);
}

.text-red-100 {
    color: var(--red-100);
}

.text-red-200 {
    color: var(--red-200);
}

.text-red-300 {
    color: var(--red-300);
}

.text-red-400 {
    color: var(--red-400);
}

.text-red-500 {
    color: var(--red-500);
}

.text-red-600 {
    color: var(--red-600);
}

.text-red-700 {
    color: var(--red-700);
}

.text-red-800 {
    color: var(--red-800);
}

.text-green-400 {
    color: var(--green-400);
}

.text-green-500 {
    color: var(--green-500);
}

.text-green-600 {
    color: var(--green-600);
}

.text-green-700 {
    color: var(--green-700);
}


.text-gray-50 {
    color: var(--gray-50);
}

.text-gray-100 {
    color: var(--gray-100);
}

.text-gray-200 {
    color: var(--gray-200);
}

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

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

.text-gray-500 {
    color: var(--gray-500);
}

.text-gray-600 {
    color: var(--gray-600);
}

.text-gray-700 {
    color: var(--gray-700);
}

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

.text-gray-900 {
    color: var(--gray-900);
}

.text-red-500 {
    color: var(--red-500);
}

.py-p75 {
    padding-top: .75rem;
    padding-bottom: .75rem
}

.leading-5 {
    line-height: 1.25rem
}

.py-p25 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.py-p5 {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.py-p75 {
    padding-top: .75rem;
    padding-bottom: .75rem
}

.py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.py-2 {
    padding-top: 2rem;
    padding-bottom: 2rem
}

.py-3 {
    padding-top: 3rem;
    padding-bottom: 3rem
}

.px-p25 {
    padding-left: .25rem;
    padding-right: .25rem
}

.px-p5 {
    padding-left: .5rem;
    padding-right: .5rem
}

.px-p75 {
    padding-left: .75rem;
    padding-right: .75rem
}

.px-1 {
    padding-left: 1rem;
    padding-right: 1rem
}

.px-1p5 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.px-2 {
    padding-left: 2rem;
    padding-right: 2rem
}

.p-0 {
    padding: 0;
}

.p-1 {
    padding: 1em;
}

.p-2 {
    padding: 2em;
}

.p-3 {
    padding: 3em;
}

.p-4 {
    padding: 4em;
}

.pb-0 {
    padding-bottom: 0;
}

.pb-1 {
    padding-bottom: 1em;
}

.pb-2 {
    padding-bottom: 2em;
}

.pb-3 {
    padding-bottom: 3em;
}

.pb-4 {
    padding-bottom: 4em;
}



.p-p25 {
    padding: .25em;
}

.p-p5 {
    padding: .5em;
}

.p-p75 {
    padding: .75em;
}

.pr-2 {
    padding-right: 2em;
}

.m-auto {
    margin: auto;
}

.m-0 {
    margin: 0;
}

.m-1 {
    margin: 1em;
}

.m-2 {
    margin: 2em;
}

.m-3 {
    margin: 3em;
}

.m-4 {
    margin: 4em;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.my-p25 {
    margin-top: .25em;
    margin-bottom: .25em;
}

.my-p5 {
    margin-top: .5em;
    margin-bottom: .5em;
}

.my-1 {
    margin-top: 1em;
    margin-bottom: 1em;
}

.my-2 {
    margin-top: 2em;
    margin-bottom: 2em;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.mx-p25 {
    margin-left: .25em;
    margin-right: .25em;
}

.mx-p5 {
    margin-left: .5em;
    margin-right: .5em;
}

.mx-1 {
    margin-left: 1em;
    margin-right: 1em;
}

.mx-2 {
    margin-left: 2em;
    margin-right: 2em;
}

.px-p25 {
    padding-left: .25em;
    padding-right: .25em;
}

.px-p5 {
    padding-left: .5em;
    padding-right: .5em;
}

.px-1 {
    padding-left: 1em;
    padding-right: 1em;
}

.px-2 {
    padding-left: 2em;
    padding-right: 2em;
}

.py-p25 {
    padding-top: .25em;
    padding-bottom: .25em;
}

.py-p5 {
    padding-top: .5em;
    padding-bottom: .5em;
}

.py-1 {
    padding-top: 1em;
    padding-bottom: 1em;
}

.py-2 {
    padding-top: 2em;
    padding-bottom: 2em;
}

.m-p25 {
    margin: .25em;
}

.m-p5 {
    margin: .5em;
}

.m-p75 {
    margin: .75em;
}

.mt-auto {
    margin-top: auto;
}

.mt-0 {
    margin-top: 0;
}

.mt-p25 {
    margin-top: .25em;
}

.mt-p5 {
    margin-top: .5em;
}

.mt-1 {
    margin-top: 1em;
}

.mt-2 {
    margin-top: 2em;
}

.mt-3 {
    margin-top: 3em;
}

.mt-4 {
    margin-top: 4em;
}


.ml-auto {
    margin-left: auto;
}

.ml-0 {
    margin-left: 0;
}

.ml-1 {
    margin-left: 1em;
}

.ml-2 {
    margin-left: 2em;
}

.ml-3 {
    margin-left: 3em;
}

.ml-p25 {
    margin-left: .25em;
}

.ml-p5 {
    margin-left: .5em;
}


.mr-p25 {
    margin-right: .25em;
}

.mr-p5 {
    margin-right: .5em;
}

.mr-1 {
    margin-right: 1em;
}

.mr-2 {
    margin-right: 2em;
}

.mr-3 {
    margin-right: 3em;
}

.mr-auto {
    margin-right: auto;
}

.mb-p25 {
    margin-bottom: 0.25em;
}

.mb-p5 {
    margin-bottom: 0.5em;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 1em;
}

.mb-2 {
    margin-bottom: 2em;
}

.mb-3 {
    margin-bottom: 3em;
}

.mb-auto {
    margin-bottom: auto;
}

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

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

.flex-row-wrap {
    display: flex;
    flex-flow: row wrap;
}

.flex-col-wrap {
    display: flex;
    flex-flow: column wrap;
}

.f-0 {
    flex: none;
}

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

.f-1 {
    flex: 1;
    min-width: 0;
}

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

.ai-base {
    align-items: baseline;
}

.ai-center {
    align-items: center;
}

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

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

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

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


.as-center {
    align-self: center;
}

.as-start {
    align-self: start;
}

.as-end {
    align-self: end;
}

.as-flex-start {
    align-self: flex-start;
}

.as-flex-end {
    align-self: flex-end;
}

.rounded {
    border-radius: .5em;
}


.round {
    border-radius: 1000%;
}

.rounded-md {
    border-radius: .375rem;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.rounded-r {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.rounded-l {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.rounded-t {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

.rounded-b {
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}


.shadow-xs {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05)
}

.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05)
}

.shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)
}

.shadow-solid {
    box-shadow: 0 0 0 2px currentColor
}


.bg-white {
    background-color: white;
}

.br {
    border-right-width: 1px;
    border-right-style: solid;
}

.bb {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.bl {
    border-left-width: 1px;
    border-left-style: solid;
}

.bt {
    border-top-width: 1px;
    border-top-style: solid;
}

.b-red {
    border: 1px solid red;
}

.b-red-400 {
    border: 1px solid var(--red-400);
}

.b-red-500 {
    border: 1px solid var(--red-500);
}

.b-red-600 {
    border: 1px solid var(--red-600);
}

.b-red-700 {
    border: 1px solid var(--red-700);
}

.b-color {
    border: 1px solid currentColor;
}

.text-red-600 {
    color: red;
}


.divider-h {
    background-color: var(--gray-300);
    width: 100%;
    height: 1px;
    margin-top: 2em;
    margin-bottom: 2em;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.pointer {
    cursor: pointer;
}

.rounded-full {
    border-radius: 2000%;
}


.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

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

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

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

.max-w {
    max-width: 900px;
}

.w-1 {
    width: 1em;
}

.w-2 {
    width: 2em;
}

.w-3 {
    width: 3em;
}

.w-4 {
    width: 4em;
}

.h-1 {
    height: 1em;
}

.h-2 {
    height: 2em;
}

.h-3 {
    height: 3em;
}

.h-4 {
    height: 4em;
}

.w-1p25 {
    width: 1.25em;
}

.h-1p25 {
    height: 1.25em;
}

.h-p125 {
    height: .125em;
}

.flex {
    display: flex;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.fixed {
    position: fixed;
}

.bg-transparent {
    background-color: transparent;
}

.inset-0,
.inset-y-0 {
    top: 0;
    bottom: 0;
}

.inset-0 {
    right: 0;
    left: 0;
}

.inset-x-0 {
    right: 0;
    left: 0
}

.top-0 {
    top: 0
}

.right-0 {
    right: 0
}

.bottom-0 {
    bottom: 0
}

.left-0 {
    left: 0
}

.bg-indigo-600 {
    --bg-opacity: 1;
    background-color: var(--indigo-600);
}

.bg-indigo-800 {
    --bg-opacity: 1;
    background-color: var(--indigo-800);
}

.bg-indigo-900 {
    --bg-opacity: 1;
    background-color: var(--indigo-900);
}

.text-white {
    color: white;
}

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

.border-2 {
    border-width: 2px;
    border-style: solid;
}

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

.bt {
    border-top: 1px solid var(--gray-300);
}

.bb {
    border-top: 1px solid var(--gray-300);
}

.b-0 {
    border-width: 0;
}

.b-2 {
    border-width: 2px;
    border-style: solid;
}

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

.b-active {
    border-color: var(--blue-500);
}

.bg-red-50 {
    background-color: var(--red-50);
}

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

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

.bg-red-300 {
    background-color: var(--red-300);
}

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

.bg-red-500 {
    background-color: var(--red-500);
}

.bg-red-600 {
    background-color: var(--red-600);
}

.bg-red-700 {
    background-color: var(--red-700);
}

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

.bg-red-900 {
    background-color: var(--red-900);
}

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

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

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

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

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

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

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

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

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

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


.bg-blue-50 {
    background-color: var(--blue-50);
}

.bg-blue-100 {
    background-color: var(--blue-100);
}

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

.bg-blue-300 {
    background-color: var(--blue-300);
}

.bg-blue-400 {
    background-color: var(--blue-400);
}

.bg-blue-500 {
    background-color: var(--blue-500);
}

.bg-blue-600 {
    background-color: var(--blue-600);
}

.bg-blue-700 {
    background-color: var(--blue-700);
}

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

.bg-blue-900 {
    background-color: var(--blue-900);
}



.bg-yellow-100 {
    background-color: var(--yellow-100);
}

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

.bg-yellow-300 {
    background-color: var(--yellow-300);
}

.bg-yellow-400 {
    background-color: var(--yellow-400);
}

.bg-yellow-500 {
    background-color: var(--yellow-500);
}

.bg-yellow-600 {
    background-color: var(--yellow-600);
}

.bg-yellow-700 {
    background-color: var(--yellow-700);
}

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

.bg-yellow-900 {
    background-color: var(--yellow-900);
}


.bg-indigo-100 {
    background-color: var(--indigo-100);
}

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

.bg-indigo-300 {
    background-color: var(--indigo-300);
}

.bg-indigo-400 {
    background-color: var(--indigo-400);
}

.bg-indigo-500 {
    background-color: var(--indigo-500);
}

.bg-indigo-600 {
    background-color: var(--indigo-600);
}

.bg-indigo-700 {
    background-color: var(--indigo-700);
}

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

.bg-indigo-900 {
    background-color: var(--indigo-900);
}


.bg-teal-100 {
    background-color: var(--teal-100);
}

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

.bg-teal-300 {
    background-color: var(--teal-300);
}

.bg-teal-400 {
    background-color: var(--teal-400);
}

.bg-teal-500 {
    background-color: var(--teal-500);
}

.bg-teal-600 {
    background-color: var(--teal-600);
}

.bg-teal-700 {
    background-color: var(--teal-700);
}

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

.bg-teal-900 {
    background-color: var(--teal-900);
}




.bg-green-100 {
    background-color: var(--green-100);
}

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

.bg-green-300 {
    background-color: var(--green-300);
}

.bg-green-400 {
    background-color: var(--green-400);
}

.bg-green-500 {
    background-color: var(--green-500);
}

.bg-green-600 {
    background-color: var(--green-600);
}

.bg-green-700 {
    background-color: var(--green-700);
}

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

.bg-green-900 {
    background-color: var(--green-900);
}


.border-indigo-600 {
    border-color: #5850ec;
}


.bg-gray-300-hover:hover {
    background-color: var(--gray-300);
}

.bg-gray-300-c-hover:hover>* {
    background-color: var(--gray-300);
}



.ta-left,
.text-left {
    text-align: left
}

.ta-center,
.text-center {
    text-align: center
}


.ta-right,
.text-right {
    text-align: right
}


.ws-no-wrap {
    white-space: nowrap;
}


.tracking-wider {
    letter-spacing: .05em
}

.b-y {
    border-top-width: 1px;
    border-bottom-width: 1px;
}

.b-gray-100 {
    border-color: var(--gray-100);
}

.b-gray-200 {
    border-color: var(--gray-200);
}

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

.b-gray-400 {
    border-color: var(--gray-400);
}

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

.b-gray-400-hover:hover {
    border-color: var(--gray-400);
}

.border-gray-200 {
    border-color: var(--gray-200);
}

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

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

.border-gray-400-hover:hover {
    border-color: var(--gray-400);
}

.bg-indigo-900-hover:hover {
    background-color: var(--indigo-900);
}

.b-gray-900-hover:hover {
    border-color: var(--indigo-900);
}

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

.b,
.b-1 {
    border-style: solid;
    border-width: 1px;
}

.b-2 {
    border-style: solid;
    border-width: 2px;
}

.rounded-md {
    border-radius: .375rem;
}

.transparent {
    opacity: 0;
}

.hidden {
    display: none;
}

.text-black {
    color: black;
}

.text-xs {
    font-size: .75rem
}

.text-sm {
    font-size: .875rem
}

.text-base {
    font-size: 1rem
}

.text-lg {
    font-size: 1.125rem
}

.text-xl {
    font-size: 1.25rem
}


.font-sans {
    font-family: Inter var, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
}

.font-normal {
    font-weight: 400
}

.font-medium {
    font-weight: 500
}

.font-semibold {
    font-weight: 600
}

.font-bold {
    font-weight: 700
}

.font-extrabold {
    font-weight: 800
}

.overflow-auto {
    overflow: auto;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.capitalize {
    text-transform: capitalize;
}

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

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

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

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

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

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

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

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

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

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

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

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

.no-decor {
    text-decoration: none;
}

.o-auto {
    overflow: auto;
}

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

.oy-auto {
    overflow-y: auto;
}

.o-hidden {
    overflow: hidden;
}

.o-visible {
    overflow: visible;
}

.ox-hidden {
    overflow-x: hidden;
}

.oy-hidden {
    overflow-y: hidden;
}

.to-ellipsis {
    text-overflow: ellipsis;
}

.min-h-0 {
    min-height: 0;
}

.min-w-0 {
    min-width: 0;
}

.min-h-fit {
    min-height: fit-content;
}

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

.max-h-100v {
    max-height: 100vh;
}

.max-w-100v {
    max-width: 100vw;
}



.bold {
    font-weight: bold;
}

.ws-pre {
    white-space: pre;
}
.ws-pre-line {
    white-space: pre-line;
}

.ws-nowrap {
    white-space: nowrap;
}

.no-pointer-events {
    touch-action: none;
    pointer-events: none;
}

.no-interaction {
    opacity: 0.5;
    touch-action: none;
    pointer-events: none;


    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.no-interaction.no-fade {
    opacity: 1;
}

.no-scroll-bar {
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
}

.no-scroll-bar::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

select {
    display: block;
    background: #fff;
    padding: .5rem .75rem;
    border: none;
    margin: 0;
    outline: 0;
    flex: 1 1;
    width: 100%;
    cursor: pointer;
    border: 1px solid #d2d6dc;

    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 5px;
}

/* Hover style */
select:hover {
    border-color: #888;
}

/* Focus style */
.select-button:focus,
select:focus {
    border-color: #aaa;
    /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
    box-shadow: inset 0 0 5px 1px rgba(59, 153, 252, .7);
    /* box-shadow: 0 0 0 3px -moz-mac-focusring; */
    color: #222;
    outline: none;
}

input[type=checkbox]:focus {
    border: 1px solid rgb(0, 183, 255);
    outline: none;
    box-shadow: 0 0 0 3px rgb(0 183 255 / 15%);
}

/* Set options to normal weight */
select option {
    font-weight: normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] select-,
:root:lang(ar) select,
:root:lang(iw) select {
    background-position: left .7em top 50%, 0 0;
    padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
select:disabled,
select[aria-disabled=true] {
    color: graytext;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
        linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
}

select:disabled:hover,
select[aria-disabled=true] {
    border-color: #aaa;
}

button {
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    --border-opacity: 1;
    box-sizing: border-box;
    border: 0 solid #d2d6dc;
    font-family: inherit;

    text-transform: none;
    background-image: none;
    cursor: pointer;
    --bg-opacity: 1;
    background-color: rgba(88, 80, 236, var(--bg-opacity));
    border-color: transparent;
    border-radius: .375rem;
    border-width: 1px;
    display: inline-flex;
    justify-content: center;
    font-weight: 500;
    font-size: .875rem;
    line-height: 1.25rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    --text-opacity: 1;
    color: rgba(255, 255, 255, var(--text-opacity));
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    height: fit-content;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.button.secondary,
button.secondary,
button.toggle {
    background-color: white;
    background-image: none;
    border-color: var(--gray-300);
    color: var(--gray-700);
}

.button.secondary:hover,
button.secondary:hover,
button.toggle:hover {
    color: var(--gray-400);
}

.button.danger,
button.danger {

    background-color: white;
    background-image: none;
    border-color: var(--red-300);
    color: var(--red-700);
}

.button.success,
button.success {

    background-color: white;
    background-image: none;
    border-color: var(--green-300);
    color: var(--green-700);
}

/* .button.primary,
  button.primary {
    border-color: var(--gray-300);
    color: var(--gray-700);
  
  } */

button.toggle.toggled,
.button.toggle.toggled {
    color: var(--teal-400);
    border-color: var(--teal-400);
}

.active-border {
    border-color: #a4e9fe;
    box-shadow: 0 0 0 3px rgb(180 235 252 / 45%);
}

.focusable:focus,
input.input:focus,
.button:not(.toggle, .select-button):focus,
button:not(.toggle, .select-button):focus {
    border-width: 1px;
    border-style: solid;
    border: 1px solid rgb(0, 183, 255) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgb(0 183 255 / 15%);
}

button.toggle:focus {
    outline: 0;
}

.text-hover:hover {
    color: rgb(0, 141, 197) !important;
}

.card {
    padding: 2em;
    border: 1px solid gainsboro;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
    border-radius: .5em;
}

@media only screen and (max-width: 600px) {
    .card {
        padding: 1em;
    }
}

.text-ellipsis {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.text-ellipsis-left {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    direction: rtl;
    text-align: left;
}

.fs-0 {
    flex-shrink: none;
}

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

.italic {
    font-style: italic;
}

.f-p5 {
    flex: .5;
}


.c--fit>* {
    width: fit-content;
    height: fit-content;
}

.pb-1 {
    padding-bottom: 1em;
}

.pt-p5 {
    padding-top: .5em;
}

.pt-p25 {
    padding-top: .25em;
}

.pt-1 {
    padding-top: 1em;
}

.pt-0 {
    padding-top: 0;
}

.pl-1 {
    padding-left: 1em;
}

.pl-p5 {
    padding-left: .5em;
}

.pl-p25 {
    padding-left: .5em;
}

.pr-1 {
    padding-right: 1em;
}

.pr-p5 {
    padding-right: .5em;
}

.pr-p25 {
    padding-right: .25em;
}

.color-action {
    color: var(--blue-500);
}

.border-action {
    border-color: var(--blue-500);
}

.bg-action {
    background-color: var(--blue-500);
}


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

.c--spaced>*:not(:last-child) {
    margin-bottom: 1em;
}

.c--spaced>* {
    margin-right: 1em;
}

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

.pe-none {
    pointer-events: none;
}


.contextmenu {
    -webkit-user-select: none;
    /* disable selection/Copy of UIWebView */
    -webkit-touch-callout: none;
    /* disable the IOS popup when long-press on a link */
}