:root {
    --color-accent: #FCF6EC;
    --color-primary: #F08057;
    --white: #ffffff;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: middle;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
}

a:link {
    color: var(--color-primary);
    text-decoration: none;
}

a:visited {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

a:active {
    color: var(--color-primary);
    text-decoration: none;
}


::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #c8ccd4;
    border-radius: 20px;
}

::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
    background-color: #c8ccd4;
}

::-webkit-scrollbar-thumb {
    background-color: #7E7E7E;
    border-radius: 200px;
}


.noscrollbar::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: #f5f5f5;
}

.noscrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #c8ccd4;
    border-radius: 20px;
}

.noscrollbar::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
    background-color: #c8ccd4;
}

.noscrollbar::-webkit-scrollbar-thumb {
    background-color: #7E7E7E;
    border-radius: 200px;
}


textarea:focus, input:focus {
    outline: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #B1B1B1;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #B1B1B1;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #B1B1B1;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.left {
    float: left;
}

.pointer {
    cursor: pointer;
}

.dragger {
    cursor: grab !important;
}

.cursor__default {
    cursor: default !important;
}


.left {
    float: left;
}

.hide {
    display: none;
}

.show {
    display: block !important;
}

.invisible {
    visibility: hidden;
}

div.contents {
    display: contents;
}

div.left {
    float: left;
}

div.right {
    float: right;
}

.bold {
    font-weight: bold;
}

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

.circlelay {
    border-radius: 200px;
}

.pad0 {
    padding: 0px !important;
}

.pad2_5 {
    padding: 2.5px !important;
}

.pad3 {
    padding: 3px !important;
}

.pad5 {
    padding: 5px !important;
}

.pad20 {
    padding: 20px !important;
}

.pad25 {
    padding: 25px !important;
}

.pad30 {
    padding: 30px !important;
}

.pad40 {
    padding: 40px !important;
}

.pad60 {
    padding: 60px !important;
}

.pad80 {
    padding: 80px !important;
}

.padb5 {
    padding-bottom: 5px !important;
}

.padb10 {
    padding-bottom: 10px !important;
}

.padr5 {
    padding-right: 5px !important;
}

.padr10 {
    padding-right: 10px !important;
}

.pad10 {
    padding: 10px !important;
}

.padr15 {
    padding-right: 15px !important;
}

.padl5 {
    padding-left: 5px !important;
}

.padl10 {
    padding-left: 10px !important;
}

.padl30 {
    padding-left: 30px !important;
}

.padl32 {
    padding-left: 32px !important;
}

.padl35 {
    padding-left: 35px !important;
}

.padl40 {
    padding-left: 40px !important;
}

.padr30 {
    padding-right: 30px !important;
}

.padr40 {
    padding-right: 40px !important;
}

.padt5 {
    padding-top: 5px !important;
}

.padt25 {
    padding-top: 25px !important;
}

.padt10 {
    padding-top: 10px !important;
}

.padt20 {
    padding-top: 20px !important;
}

.padl20 {
    padding-left: 20px !important;
}

.padl25 {
    padding-left: 25px !important;
}

.padr20 {
    padding-right: 20px !important;
}

.padr25 {
    padding-right: 25px !important;
}

.mrgt0 {
    margin-top: 0px !important;
}

.mrg0 {
    margin: 0px !important;
}

.mrg10 {
    margin: 10px;
}

.mrg5 {
    margin: 5px;
}

.mrg15 {
    margin: 15px;
}

.mrg20 {
    margin: 20px;
}

.mrg30 {
    margin: 30px;
}

.mrg40 {
    margin: 30px;
}

.mrgt2 {
    margin-top: 2px;
}

.mrgt5 {
    margin-top: 5px;
}

.mrgt7 {
    margin-top: 7px;
}

.mrgt10 {
    margin-top: 10px;
}

.mrgt12 {
    margin-top: 12px;
}

.mrgl2_5 {
    margin-left: 2.5px;
}

.mrgl5 {
    margin-left: 5px;
}

.mrgl-5 {
    margin-left: -5px;
}

.mrgl7 {
    margin-left: 7px !important;
}

.mrgl10 {
    margin-left: 10px !important;
}

.mrgl15 {
    margin-left: 15px !important;
}

.mrgl20 {
    margin-left: 20px !important;
}

.mrgl25 {
    margin-left: 25px !important;
}

.mrgl30 {
    margin-left: 30px !important;
}

.mrgl40 {
    margin-left: 40px !important;
}

.mrgl45 {
    margin-left: 45px !important;
}


.mrgl50 {
    margin-left: 50px !important;
}

.mrgr2_5 {
    margin-right: 2.5px;
}

.mrgr5 {
    margin-right: 5px;
}

.mrgr7_5 {
    margin-right: 7.5px;
}

.mrgr10 {
    margin-right: 10px !important;
}

.mrgr0 {
    margin-right: 0px;
}

.mrgl0 {
    margin-left: 0px !important;
}

.mrgr15 {
    margin-right: 15px;
}

.mrgr20 {
    margin-right: 20px;
}

.mrgr25 {
    margin-right: 25px;
}

.mrgr30 {
    margin-right: 30px;
}

.mrgr35 {
    margin-right: 35px;
}

.mrgr40 {
    margin-right: 40px;
}

.mrgr45 {
    margin-right: 45px;
}

.mrgr50 {
    margin-right: 50px;
}

.mrgr70 {
    margin-right: 70px;
}

.mrgt15 {
    margin-top: 15px;
}

.mrgt20 {
    margin-top: 20px !important;
}

.mrgt25 {
    margin-top: 25px !important;
}

.mrgt30 {
    margin-top: 30px !important;
}

.mrgt35 {
    margin-top: 35px !important;
}

.mrgt40 {
    margin-top: 40px !important;
}

.mrgt50 {
    margin-top: 50px !important;
}

.mrgt80 {
    margin-top: 80px !important;
}

.mrgt90 {
    margin-top: 90px !important;
}

.mrgt100 {
    margin-top: 100px !important;
}

.mrgt120 {
    margin-top: 120px !important;
}

.mrgb2 {
    margin-bottom: 2px;
}

.mrgb5 {
    margin-bottom: 5px;
}

.mrgb7 {
    margin-bottom: 7px;
}

.mrgb0 {
    margin-bottom: 0px !important;
}

.mrgb10 {
    margin-bottom: 10px;
}

.mrgb12 {
    margin-bottom: 12px;
}

.mrgb15 {
    margin-bottom: 15px;
}

.mrgb20 {
    margin-bottom: 20px;
}

.mrgb25 {
    margin-bottom: 25px;
}

.mrgb30 {
    margin-bottom: 30px;
}

.mrgb35 {
    margin-bottom: 35px;
}

.mrgb40 {
    margin-bottom: 40px !important;
}

.mrgb45 {
    margin-bottom: 45px !important;
}

.mrgb50 {
    margin-bottom: 50px !important;
}

.f15 {
    font-size: 15px;
}

.f40 {
    font-size: 40px;
}

.gone {
    display: none;
}

.forcehide {
    display: none !important;
}

.behind {
    z-index: -1;
}

.wdth35 {
    width: 35%;
}

.wdth20 {
    width: 20%;
}

.wdth30 {
    width: 30%;
}

.wdth60 {
    width: 60%;
}

.wdth75 {
    width: 75%;
}

.wdth40 {
    width: 40%;
}

.wdth42 {
    width: 42%;
}

.wdth49 {
    width: 49%;
}

.wdth50 {
    width: 50% !important;
}

.wdth60 {
    width: 60%;
}

.wdth65 {
    width: 65%;
}

.wdth70 {
    width: 70% !important;
}

.wdth68 {
    width: 68%;
}

.wdth90 {
    width: 90%;
}

.wdth100 {
    width: 100% !important;
}

.wdth96 {
    width: 96.5% !important;
}

.wdth98 {
    width: 98% !important;
}

.radius20 {
    border-radius: 20px;
}

.fwhite {
    color: #FFFFFF;
}

.fblack {
    color: #000;
}

.fred {
    color: red !important;
}

.fblue {
    color: #2F72F9 !important;
}

.ftheme {
    color: #F08057 !important;
}

.color_grey {
    color: #999999 !important;
}

.color_lightgrey {
    color: #B1B1B1 !important;
}

.text_left {
    text-align: left !important;
}

.text_right {
    text-align: right !important;
}

.text_left {
    text-align: left !important;
}

.text_center {
    text-align: center !important;
}


.nobreak {
    white-space: nowrap;
}

.word_break {
    word-break: break-all;
}

.word_break--unset {
    word-break: unset !important;
}


.circlelay {
    border-radius: 200px;
}


.align-left {
    text-align: left !important;
}

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

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

.status {
    display: flex;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 500;
    width: fit-content;
}

.status_red {
    color: #DA3939;
    background-color: #FFAFAF;
}

.status_green {
    color: #199B3C;
    background-color: #A4FABB;
}

.status_grey {
    color: #333333;
    background-color: #CCCCCC;
}

.status_red span, .status_green span, .status_grey span {
    margin-left: 6px;
    font-size: 14px;
}


.flex {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.gap15 {
    gap: 15px;
}

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

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

.flex__aligncenter {
    align-items: center;
}

.flex__justifycenter {
    justify-content: center;
}

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

.flexv {
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    justify-content: center;
}

.flex_end {
    justify-content: flex-end;
    margin-left: auto;
}

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

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

.flex_vcenter {
    align-items: center;
}

.flex_direction_row {
    flex-direction: row;
}

.fit_contenth {
    height: fit-content;
}


.text {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px;
    line-height: 1.7;
    color: #121212;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.text__error {
    color: #DA3939;
}

.text__link {
    color: var(--color-primary);
}

.text__regular {
    font-family: 'Inter', sans-serif !important;
    font-weight: normal;
}

.text__semibold {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600;
}

.text__medium {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500;
}

.text__bold {
    font-family: 'Inter', sans-serif !important;
    font-weight: bold;
}

.text__italic {
    font-style: italic;
}


.text--supernano {
    font-size: 10px !important;
}

.text--mediumnano {
    font-size: 11px !important;
}

.text--nano {
    font-size: 12px !important;
}

.text--pico {
    font-size: 13px !important;
}

.text--micro {
    font-size: 14px !important;
}

.text--macro {
    font-size: 15px !important;
}

.text--mini {
    font-size: 16px !important;
}

.text--normal {
    font-size: 18px !important;
}

.text--medium {
    font-size: 20px !important;
}

.text--lsuper {
    font-size: 22px !important;
    line-height: 30px;
}

.text--xlsuper {
    font-size: 24px !important;
}

.text--xxlsuper {
    font-size: 26px !important;
}

.text--xxxlsuper {
    font-size: 28px !important;
}

.thover:hover {
    cursor: pointer;
    color: #F08057;
}

.op3 {
    opacity: 0.3;
}

.op5 {
    opacity: 0.5;
}

.op7 {
    opacity: 0.7;
}

.op10 {
    opacity: 1 !important;
}

.display-table {
    display: table;
}

.editor-container {
    display: block;
    min-height: 100px;
}

.ql-container.ql-snow {
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    border: 4px SOLID #eae7e1 !important;
}

.ql-toolbar.ql-snow {
    border: 0 !important;
    background: #eae7e1 !important;
}

.qdiv p, .qdiv li {
    font-family: 'Inter', sans-serif !important;
    color: #121212;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: normal;
    font-size: 13px;
    line-height: 23px;
}

.qdiv ol li {
    list-style-type: circle;
    margin-left: 25px;
}

.qdiv ul li {
    list-style-type: circle;
    margin-left: 25px;
}

/* RADIO */
.radio-container {
    display: block;
    position: relative;
    padding-left: 35px;
    padding-top: 3.5px;
    padding-bottom: 3.5px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.radiomark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .radiomark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .radiomark {
    background-color: #eae7e1;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiomark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .radiomark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .radiomark:after {
    top: 6.5px;
    left: 6.5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
}

/* RADIO */

/* CHECKBOX */

.ccontainer {
    display: block;
    position: relative;
    padding-left: 35px;
    padding-top: 3.5px;
    padding-bottom: 3.5px;
    cursor: pointer;
    font-size: 11px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.ccontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #eee;
    border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.ccontainer:hover input ~ .checkmark {
    background-color: #eae7e1;
}

/* When the checkbox is checked, add a blue background */
.ccontainer input:checked ~ .checkmark {
    background-color: var(--color-primary);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.ccontainer input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.ccontainer .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* CHECKBOX */


/* OTP */

.otc {
    position: relative;
    /*width: 320px;*/
    margin: 20px -.2em;
}

.otc fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.otc fieldset div {
    display: flex;
    align-items: center;
}

.otc legend {
    margin: 0 auto 1em;
    color: #333333;
}

.otpnumber {
    width: 1.4em;
    line-height: 1;
    margin: .1em;
    padding: 4px 0 4px 0;
    font-size: 2.65em;
    text-align: center;
    appearance: textfield;
    -webkit-appearance: textfield;
    border: 4px solid #eae7e1;
    color: #333333;
    border-radius: 4px;
}

.otpnumber::-webkit-outer-spin-button,
.otpnumber::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 2 group of 3 items */
.otpnumber:nth-child(n+4) {
    order: 2;
}

.otc div::before {
    content: '';
    height: 2px;
    width: 24px;
    margin: 0 .25em;
    order: 1;
    background: #BBBBFF;
}

/* OTP */

/*SNAKEBAR*/

#snackbar {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 200px;
    padding: 16px 30px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 13px;
}

#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/*SNAKEBAR*/

/* DROP */

.dropOptions {
    position: relative;
}

.drop-options-content {
    display: none;
    position: absolute;
    background-color: #FFFFFF;
    min-width: 145px;
    right: 0px;
    padding: 7.5px 0px;
    border-radius: 7px;
    margin-top: 3px;
    /*text-align: right;*/
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.drop-options-content--right {
    right: unset;
    left: 172px;
    min-width: 130px;
    bottom: 10px;
}

.drop-options-content li {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    padding: 7.5px 18px;
}

.drop-options-content li:hover {
    background: #f5f5f5;
    cursor: pointer;
}


.show {
    display: block;
}

/* DROP */


/* POPUP */

.popup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.popup-content {
    background-color: #fefefe;
    /*background: var(--color-accent);*/
    margin: auto;
    padding: 27px 32px;
    border: 0;
    width: 400px;
    border-radius: 20px;
}

.square-tile {
    /*background: #FFFFFF;*/
    background: #F6F6F6;
    cursor: pointer;
    width: 50%;
    padding: 30px 20px;
    border-radius: 10px;
    display: flex;
    box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 20%);
    flex-direction: column;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.square-tile:hover {
    background: #F1F1F1;
}

/* POPUP */

progress::-webkit-progress-bar {
    background-color: #000;
    width: 100%;
}

progress::-webkit-progress-value {
    background-color: #aaa !important;
}

progress::-moz-progress-bar {
    background-color: var(--color-primary) !important;
}

progress::-webkit-progress-value {
    background-color: var(--color-primary) !important;
}

progress {
    color: var(--color-primary) !important;
}