* {
    box-sizing:                         border-box;
    margin: 						    0;
    padding: 						    0;
    -ms-touch-action:                   manipulation;
    touch-action:                       manipulation;
}

html, body {
    font-family:                        'Haffer', sans-serif;
    font-size:                          14px;
    font-weight:                        430;
    letter-spacing:                     0.02em;
    color:                              #4C1D08;
    background:                         #FFF3EE;
    -webkit-font-smoothing:             antialiased;
}

p {
    line-height:                        22px;
}

.s24 {
    height:                             24px;
}

.s32 {
    height:                             32px;
}

.s48 {
    height:                             48px;
}

.s72 {
    height:                             72px;
}



@font-face {
    font-family:                        'Haffer';
    src:                                url('/fonts/Haffer-Thin.otf') format("opentype");
    font-weight:                        200;
}

@font-face {
    font-family:                        'Haffer';
    src:                                url('/fonts/Haffer-Light.otf') format("opentype");
    font-weight:                        300;
}

@font-face {
    font-family:                        'Haffer';
    src:                                url('/fonts/Haffer-Regular.otf') format("opentype");
    font-weight:                        430;
}

@font-face {
    font-family:                        'Haffer';
    src:                                url('/fonts/Haffer-Medium.otf') format("opentype");
    font-weight:                        570;
}

@font-face {
    font-family:                        'Haffer';
    src:                                url('/fonts/Haffer-SemiBold.otf') format("opentype");
    font-weight:                        670;
}

@font-face {
    font-family:                        'Haffer';
    src:                                url('/fonts/Haffer-Bold.otf') format("opentype");
    font-weight:                        790;
}

@font-face {
    font-family:                        'Haffer';
    src:                                url('/fonts/Haffer-Black.otf') format("opentype");
    font-weight:                        1000;
}



@font-face {
    font-family:                        MonoSpace;
    src:                                url('/fonts/MonoSpace.otf');
}





/*--   OBJECTS : BUTTON   --*/

.button {
    height:                             40px;
    width:                              fit-content;
    padding:                            13px 16px;
    font-size:                          12px;
    font-weight:                        570;
    border-radius:                      10px;
    text-transform:                     uppercase;
    color:                              #FFFFFF;
    white-space:                        nowrap;
}

a,
.options .option,
.button,
.button-add {
    border:                             none;
    text-decoration:                    none;
    cursor:                             pointer;
    -webkit-touch-callout:              none;
    -webkit-user-select:                none;
    -khtml-user-select:                 none;
    -moz-user-select:                   none;
    -ms-user-select:                    none;
    user-select:                        none;
}

.button.centered {
    width:                              unset;
    padding:                            11.5px 0 0 0;
    text-align:                         center;
}

.button.primary {
    background:                         #FF6417;
}

.button.primary:hover {
    background:                         #FF7F3D;
}

.button.grey {
    background:                         #4C1D0840;
}

.button.grey:hover {
    background:                         #4C1D0880;
}

.button.red {
    background:                         #F21B1B;
}

.button.red:hover {
    background:                         #F44848;
}

.button.borderless {
    height:                             unset;
    padding:                            0;
    border-radius:                      0;
    background:                         none;
    color:                              #FF6417;
}

.button.disabled {
    pointer-events:                     none;
    opacity:                            .5;
}



.buttons {
    display:                            flex;
    align-items:                        center;
    width:                              fit-content;
}

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

.buttons.center {
    margin:                             0 auto;
}

.buttons.left .button,
.buttons.center .button {
    margin-left:                        12px;
}

.buttons.right .button {
    margin-right:                       12px;
}

.buttons.left .button.borderless,
.buttons.center .button.borderless {
    margin-left:                        20px;
}

.buttons.right .button.borderless {
    margin-right:                       20px;
}

.buttons.left .button.first,
.buttons.right .button.first,
.buttons.center .button.first {
    margin:                             0;
}



.button-icon {
    width:                              40px;
    height:                             40px;
    margin-right:                       -8px;
    padding:                            8px;
    border-radius:                      20px;
    cursor:                             pointer;
}

.button-icon:hover {
    background:                         #4C1D0840;
}





/*--   OBJECTS : RADIO   --*/

.radio {
    padding-bottom:                     32px;
}

.radio .note {
    font-size:                          12px;
    color:                              #4C1D0840;
    margin:                             0 0 16px 2px;
}

.radio .button {
    display:                            flex;
    align-items:                        center;
    height:                             32px;
    margin:                             0 12px 0 0;
    padding-top:                        8px;
    color:                              white;
    background:                         #FF641740;
}

.radio.tall .button {
    height:                             40px;
    padding-top:                        10px;
}

.radio .button img {
    width:                              24px;
    margin-right:                       8px;
}

.radio .button:hover,
.radio .button.selected {
    background:                         #FF6417;
}





/*--   OBJECTS : FORM   --*/

input,
select,
textarea {
    width:                              100%;
    height:                             100%;
    color:                              #4C1D08;
    border:                             none;
    background:                         none;
    font-family:                        'Inter', sans-serif;
    font-size:                          14px;
    font-weight:                        430;
    padding-left:                       8px;
}

select.form-control,
option {
    color: black;
}

::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

textarea {
    resize:                             none;
    margin:                             10px 0 20px;
    overflow-y:                         hidden;
    padding-right:                      8px;
}

input:-webkit-autofill {
    -webkit-box-shadow:                 none;
}

input:-webkit-autofill::first-line {
    font-family:                        'Inter', sans-serif;
    font-size:                          14px;
    font-weight:                        430;
}

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

.input-invalid {
    position:                           relative;
    margin:                             -12px 0 0 8px;
    font-size:                          12px;
    color:                              red;
}

.input-invalid.tagged {
    position:                           relative;
    margin:                             -22px 0 7px 2px;
    font-size:                          12px;
    color:                              red;
}

::placeholder {
    color:                              #4C1D0840;
    opacity:                            1;
}

::-ms-input-placeholder {
    color:                              #4C1D0840;
}

:-ms-input-placeholder {
    color:                              #4C1D0840;
}

::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23FFFFFF" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}

.input-box {
    display:                            flex;
    width:                              100%;
    height:                             48px;
    margin-bottom:                      16px;
    border:                             1px solid #4C1D08;
    border-radius:                      7px;
}

.input-box.multiline {
    height:                             unset;
    min-height:                         40px;
}

.input-box.tagged,
.input-box.boxed {
    background:                         #FFFFFF;
    margin-bottom:                      24px;
}

.input-box.stuck {
    background:                         #FFFFFF;
    border:                             #FFF3EE 1px solid;
    margin-bottom:                      0
}

.input-box:focus-within {
    border-color:                       #FF6417;
}

.input-box.invalid,
.input-box.invalid:focus-within {
    border-color:                       red;
}

.input-box .icon {
    height:                             24px;
    margin:                             12px 8px 0 -32px;
    z-index:                            10;
}

.input-box:focus-within .icon {
    opacity:                            .6;
}

.input-box.multiline {
    height:                             unset;
    min-height:                         40px;
}

.input-box:has(select),
.input-box:has(input[type="date"]) {
    padding-right:                      8px;
}

.input-top {
    display:                            flex;
    width:                              100%;
}

.input-tag {
    margin:                             0 0 8px 2px;
    color:                              #A3A3A3;
    font-size:                          12px;
}

.input-note,
.input-counter {
    margin-left:                        auto;
    color:                              #666666ff;
    font-size:                          12px;
}

.inputs {
    display:                            grid;
    grid-auto-flow:                     column;
    grid-template-columns:              1fr 2fr;
    column-gap:                         16px;
}



.image-edit {
    margin-bottom:                      64px;
}

.image-edit .above {
    display:                            grid;
    grid-auto-flow:                     column;
    padding-left:                       2px;
    margin-bottom:                      8px;
}

.image-edit .label {
    font-size:                          12px;
    color:                              #A3A3A3;
}

.image-edit .note {
    font-size:                          12px;
    color:                              #666666;
    justify-self:                       end;
}

.image-edit .wrap {
    position:                           relative;
    cursor:                             pointer;
    margin-bottom:                      24px;
    background:                         #FFF3EE;
    border-radius: 14px;
    border: 1px solid #4C1D08;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.image-edit img {
    position:                           absolute;
    max-width:                          100%;
    z-index:                            10;
    object-fit:                         contain;
}

.image-edit.centered img {
    width:                              100%;
}

.image-edit .buttons {
    width:                              100%;
}



.color-pick {

}

.color-pick-wrap {
    position:                           relative;
    height:                             48px;
    margin-bottom:                      24px;
}

.color-pick input {
    position:                           absolute;
    opacity:                            0;
    border-radius:                      0;
    height:                             48px;
    cursor:                             pointer;
}

.color-pick-top {
    display:                            flex;
    width:                              100%;
    align-items:                        center;
}

.color-pick-top.help {
    cursor:                             pointer;
}

.color-pick-tag {
    margin:                             0 0 8px 2px;
    color:                              #A3A3A3;
    font-size:                          12px;
}

.color-pick-note {
    margin-left:                        auto;
    color:                              #666666FF;
    font-size:                          12px;
}

.color-pick-help {
    width: 16px;
    height: 16px;
    margin-bottom: 2px;
    opacity: .3;
}

.color-pick-help-popup {
    position:                           fixed;
    top:                                0;
    left:                               0;
    display:                            none;
    grid-template-columns:              32px 1fr minmax(0, 336px) 1fr 32px;
    grid-template-rows:                 1fr auto 1fr;
    grid-template-areas:                ". . . . ."
                                        ". . wrap . ."
                                        ". . . . .";
    width: 100%;
    height: 100%;
    z-index: 300;
    background: #000000B3;
}

.color-pick-help-popup .wrap {
    position:                           relative;
    grid-area:                          wrap;
    background:                         #FFFFFF;
    border:                             1px #525252 solid;
}

.color-pick-help-popup .wrap .close {
    position: absolute;
    top: 16px;
    right: 16px;
    opacity: .5;
    cursor: pointer;
}

.color-pick-help-popup .wrap .close:hover {
    opacity: 1;
}

.color-pick-help-popup .image {
    display:                            block;
    width:                              100%;
}

.color-pick-box {
    position:                           absolute;
    display:                            flex;
    width:                              100%;
    align-items:                        center;
    height:                             48px;
    border-radius:                      7px;
    border:                             1px solid #4C1D08;
    background:                         #FFFFFF;
    pointer-events:                     none;
}

.color-pick-box.disabled,
.color-pick-box.disabled > * {
    pointer-events:                     none;
}

.color-pick-box:focus-within {
    border-color:                       #FF6417;
}

.color-pick-box.invalid,
.color-pick-box.invalid:focus-within {
    border-color:                       red;
}

.color-pick-box .hashtag {
    font-weight:                        430;
    letter-spacing:                     1px;
    padding-left:                       8px;
}

.color-pick-box .color-text {
    width:                              72px;
    margin-left:                        8px;
    letter-spacing:                     1px;
    text-transform:                     uppercase;
}

.color-pick-box .color-indicator {
    height:                             24px;
    width:                              24px;
    border-radius:                      12px;
    border:                             1px #525252 solid;
}

.color-pick-box.invalid .color-indicator {
    display:                            none;
}

.color-pick-box img {
    height:                             24px;
    width:                              24px;
    margin:                             0 10px 0 auto;
    z-index:                            10;
}

.color-pick-box.disabled img {
    display:                            none;
}




/*--   QR-POPUP   --*/

#popup-qr {
    position:                           fixed;
    display:                            grid;
    grid-template-columns:              1fr auto 1fr;
    grid-template-rows:                 1fr auto 1fr;
    grid-template-areas:                ". . ."
                                        ". image ."
                                        ". . .";
    width:                              100%;
    height:                             100%;
    z-index:                            200;
    background:                         #000000B3;
}

#popup-qr .image {
    grid-area:                          image;
    position:                           relative;
    display:                            block;
    width:                              216px;
    height:                             216px;
}

#popup-qr .image svg {
    position:                           absolute;
    display:                            block;
    z-index:                            203;
    border-radius:                      14px;
    border:                             2px solid #F0F0F0;
    margin:                             4px;
}

#popup-qr .image .cover {
    position:                           absolute;
    width:                              208px;
    height:                             208px;
    margin:                             4px;
    background:                         #F0F0F0;
    z-index:                            202;
    border-radius:                      14px;
}

#popup-qr .image .back {
    position:                           absolute;
    width:                              216px;
    height:                             216px;
    background:                         #F0F0F0;
    z-index:                            201;
    border-radius:                      18px;
}

#popup-qr #button-close {
    position:                           fixed;
    z-index:                            201;
    top:                                32px;
    right:                              40px;
    color:                              white;
}





/*--   ALERT & INPUT   --*/

#alert,
#input {
    position:                           fixed;
    display:                            none;
    grid-template-columns:              32px 1fr minmax(0, 336px) 1fr 32px;
    grid-template-rows:                 1fr auto 1fr;
    grid-template-areas:                ". . . . ."
                                        ". . box . ."
                                        ". . . . .";
    width:                              100%;
    height:                             100%;
    z-index:                            300;
    background:                         #000000B3;
}

#alert #box,
#input #box {
    position:                           relative;
    grid-area:                          box;
    padding:                            40px 32px;
    background:                         #FFFFFF;
    border:                             1px #525252 solid;
}

#alert #box #alert-button-close {
    position: absolute;
    top: 16px;
    right: 16px;
    opacity: .5;
    cursor: pointer;
}

#alert #box .title {
    font-size:                          16px;
    margin-bottom:                      24px;
}

#input #box .title {
    font-size:                          16px;
    margin-bottom:                      32px;
}

#alert #box p {
    margin-bottom:                      40px;
}

#input #box .buttons {
    margin-top:                         40px;
}





/*--   TOGGLE   --*/

.toggle {
    position:                           relative;
    cursor:                             pointer;
}

.toggle .toggle-wrap {
    display:                            flex;
    width:                              fit-content;
    text-transform:                     uppercase;
    font-weight:                        570;
    font-size:                          12px;
    color:                              white;
    background:                         #292929;
    border-radius:                      10px;
}

.toggle .flip {
    position:                           absolute;
    height:                             40px;
    border-radius:                      10px;
    z-index:                            10;
    top:                                0;
    -webkit-box-shadow:                 0px 6px 12px 0px rgba(0,0,0,0.25);
    -moz-box-shadow:                    0px 6px 12px 0px rgba(0,0,0,0.25);
    box-shadow:                         0px 6px 12px 0px rgba(0,0,0,0.25);
    transition:                         left 0.1s ease-out;
}

.toggle.primary .flip {
    background:                         #FF6417;
}

.toggle.grey .flip {
    background:                         #525252;
}

.toggle .left,
.toggle .right {
    display:                            grid;
    height:                             40px;
    place-items:                        center;
    z-index:                            11;
}





/*--   DROPDOWN   --*/

.dropdown .button {
    position:                           relative;
    display:                            flex;
    align-items:                        center;
    background:                         transparent;
    border:                             2px solid #FF6417;
    background:                         #FFF3EE;
    color:                              #FF6417;
    padding:                            0 8px 0 12px;
    z-index:                            21;
}

.dropdown .button:hover {
    background:                         #FFFFFF
}

.dropdown .options {
    position:                           absolute;
    display:                            none;
    z-index:                            21;
    background:                         #FFF3EE;
    border:                             #FF6417 1px solid;
    border-radius:                      10px;
}

.dropdown .options .option {
    width:                              160px;
    padding:                            0 16px;
    border:                             none;
    border-radius:                      0;
    margin:                             0;
}

.dropdown .options .option:first-child {
    border-top-left-radius:             10px;
    border-top-right-radius:            10px;
}

.dropdown .options .option:last-child {
    border-bottom-left-radius:          10px;
    border-bottom-right-radius:         10px;
}

.dropdown .options .option:hover {
    background:                         #FFFFFF;
}

.dropdown .options .separator {
    height:                             1px;
    width:                              160px;
    background:                         #FF6417;
}

.dropdown.open .options {
    display:                            block;
}

.dropdown .handle {
    transition:                         .2s ease all;
}

.dropdown.open .handle {
    transform:                          rotateX(180deg);
}

.dropdown .fade {
    display:                            none;
    position:                           fixed;
    top:                                0;
    left:                               0;
    height:                             100vh;
    width:                              100vw;
    background:                         #00000088;
    z-index:                            20;
    transition:                         .5s ease all;
}

.dropdown.open .fade {
    display:                            block;
}



#dropdown-language .icon {
    width:                              20px;
    margin-right:                       12px;
}

#dropdown-language .value {
    width:                              96px;
    font-weight:                        570;
}

#dropdown-language .handle {
    width:                              24px;
}





/*--   MESSAGES   --*/

#content.message {
    display:                            grid;
    grid-template-columns:              1fr;
    grid-template-rows:                 1fr 1fr auto;
    padding:                            96px 0;
}

#content.message .icon {
    place-self:                         end center;
    width:                              128px;
    height:                             128px;
    margin:                             0 auto;
    border-radius:                      64px;
    padding:                            32px;
    background:                         #292929;
}

#content.message p {
    place-self:                         start center;
    max-width:                          336px;
    margin-top:                         40px;
}

#content.message form,
#content.message a {
    place-self:                         center;
}



/*--   CROP MODULE   --*/

#modal-crop {
    position:                           absolute;
    display:                            grid;
    grid-template-columns:              16px 1fr minmax(0, 720px) 1fr 16px;
    grid-template-rows:                 1fr auto 1fr;
    grid-template-areas:                ". . . . ."
                                        ". . inner . ."
                                        ". . . . .";
    width:                              100%;
    height:                             100%;
    left:                               0;
    top:                                0;
    z-index:                            100;
    background:                         #000000B3;
}

#modal-crop .box {
    grid-area:                          inner;
    border:                             #A3A3A3 1px solid;
    background:                         white;
}


#modal-crop .img-container {
    max-height:                         400px;
}

#modal-crop p {
    padding:                            24px 24px 0;
}

#modal-crop .buttons {
    padding:                            32px 24px;
}

#modal-crop form {
    display:                            none;
}

#modal-crop .loading {
    display:                            none;
    grid-area:                          inner;
    place-items:                        center;
}



/*--   LOADER   --*/

.loader {
    border:                             4px solid #4C1D0840;
    border-top:                         4px solid #4C1D08;
    border-radius:                      50%;
    width:                              64px;
    height:                             64px;
    animation:                          spin 1.5s linear infinite;
}

.loader.small {
    width:                              24px;
    height:                             24px;
    border:                             2px solid #666666;
    border-top:                         2px solid #F0F0F0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}





/*--   QUERIES   --*/

@media only screen and (max-width: 720px) {

    #notice {
        padding:                        16px 32px;
    }

    #content.message {
        padding:                        0 32px 48px;
    }

    #popup-qr #button-close {
        top:                            24px;
        right:                          32px;
    }
}





/*--   REMOVE CLEAR CROSS FROM INPUT FIELDS IN IE AND CHROME   --*/

input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }



/*--   DISABLE SELECTING   --*/

.no-select {
    -webkit-tap-highlight-color:        transparent;
    -webkit-touch-callout:              none;
    -webkit-user-select:                none;
    -khtml-user-select:                 none;
    -moz-user-select:                   none;
    -ms-user-select:                    none;
    user-select:                        none;
}