/* PADDINGS */
.p-0{padding: 0 !important;} .px-0{padding-left: 0 !important; padding-right: 0 !important;} .py-0{padding-top: 0 !important; padding-bottom: 0 !important;}
.pt-0{padding-top: 0 !important;} .pb-0{padding-bottom: 0 !important;} .pl-0{padding-left: 0 !important;} .pr-0{padding-right: 0 !important;}

.p-1{padding: 0.5em !important;} .px-1{padding-left: 0.5em !important; padding-right: 0.5em !important;} .py-1{padding-top: 0.5em !important; padding-bottom: 0.5em !important;}
.pt-1{padding-top: 0.5em !important;} .pb-1{padding-bottom: 0.5em !important;} .pl-1{padding-left: 0.5em !important;} .pr-1{padding-right: 0.5em !important;}

.p-2{padding: 1em !important;} .px-2{padding-left: 1em !important; padding-right: 1em !important;} .py-2{padding-top: 1em !important; padding-bottom: 1em !important;}
.pt-2{padding-top: 1em !important;} .pb-2{padding-bottom: 1em !important;} .pl-2{padding-left: 1em !important;} .pr-2{padding-right: 1em !important;}

.p-3{padding: 1.5em !important;} .px-3{padding-left: 1.5em !important; padding-right: 1.5em !important;} .py-3{padding-top: 1.5em !important; padding-bottom: 1.5em !important;}
.pt-3{padding-top: 1.5em !important;} .pb-3{padding-bottom: 1.5em !important;} .pl-3{padding-left: 1.5em !important;} .pr-3{padding-right: 1.5em !important;}

.p-4{padding: 2em !important;} .px-4{padding-left: 2em !important; padding-right: 2em !important;} .py-4{padding-top: 2em !important; padding-bottom: 2em !important;}
.pt-4{padding-top: 2em !important;} .pb-4{padding-bottom: 2em !important;} .pl-4{padding-left: 2em !important;} .pr-4{padding-right: 2em !important;}

.p-5{padding: 2.5em !important;} .px-5{padding-left: 2.5em !important; padding-right: 2.5em !important;} .py-5{padding-top: 2.5em !important; padding-bottom: 2.5em !important;}
.pt-5{padding-top: 2.5em !important;} .pb-5{padding-bottom: 2.5em !important;} .pl-5{padding-left: 2.5em !important;} .pr-5{padding-right: 2.5em !important;}

.p-6{padding: 3em !important;} .px-6{padding-left: 3em !important; padding-right: 3em !important;} .py-6{padding-top: 3em !important; padding-bottom: 3em !important;}
.pt-6{padding-top: 3em !important;} .pb-6{padding-bottom: 3em !important;} .pl-6{padding-left: 3em !important;} .pr-6{padding-right: 3em !important;}

.p-7{padding: 3.5em !important;} .px-7{padding-left: 3.5em !important; padding-right: 3.5em !important;} .py-7{padding-top: 3.5em !important; padding-bottom: 3.5em !important;}
.pt-7{padding-top: 3.5em !important;} .pb-7{padding-bottom: 3.5em !important;} .pl-7{padding-left: 3.5em !important;} .pr-7{padding-right: 3.5em !important;}

.p-8{padding: 4em !important;} .px-8{padding-left: 4em !important; padding-right: 4em !important;} .py-8{padding-top: 4em !important; padding-bottom: 4em !important;}
.pt-8{padding-top: 4em !important;} .pb-8{padding-bottom: 4em !important;} .pl-8{padding-left: 4em !important;} .pr-8{padding-right: 4em !important;}

.p-9{padding: 4.5em !important;} .px-9{padding-left: 4.5em !important; padding-right: 4.5em !important;} .py-9{padding-top: 4.5em !important; padding-bottom: 4.5em !important;}
.pt-9{padding-top: 4.5em !important;} .pb-9{padding-bottom: 4.5em !important;} .pl-9{padding-left: 4.5em !important;} .pr-9{padding-right: 4.5em !important;}

.p-10{padding: 5em !important;} .px-10{padding-left: 5em !important; padding-right: 5em !important;} .py-10{padding-top: 5em !important; padding-bottom: 5em !important;}
.pt-10{padding-top: 5em !important;} .pb-10{padding-bottom: 5em !important;} .pl-10{padding-left: 5em !important;} .pr-10{padding-right: 5em !important;}

.p-15{padding: 7.5em !important;} .px-15{padding-left: 7.5em !important; padding-right: 7.5em !important;} .py-15{padding-top: 7.5em !important; padding-bottom: 7.5em !important;}
.pt-15{padding-top: 7.5em !important;} .pb-15{padding-bottom: 7.5em !important;} .pl-15{padding-left: 7.5em !important;} .pr-15{padding-right: 7.5em !important;}

.p-20{padding: 10em !important;} .px-20{padding-left: 10em !important; padding-right: 10em !important;} .py-20{padding-top: 10em !important; padding-bottom: 10em !important;}
.pt-20{padding-top: 10em !important;} .pb-20{padding-bottom: 10em !important;} .pl-20{padding-left: 10em !important;} .pr-20{padding-right: 10em !important;}
/* PADDINGS END */

/* MARGINS */
.m-auto{margin: auto !important;} .mx-auto{margin-left: auto !important; margin-right: auto !important;} .my-auto{margin-top: auto !important; margin-bottom: auto !important;}
.mt-auto{margin-top: auto !important;} .mb-auto{margin-bottom: auto !important;} .ml-auto{margin-left: auto !important;} .mr-auto{margin-right: auto !important;}

.m-0{margin: 0 !important;} .mx-0{margin-left: 0 !important; margin-right: 0 !important;} .my-0{margin-top: 0 !important; margin-bottom: 0 !important;}
.mt-0{margin-top: 0 !important;} .mb-0{margin-bottom: 0!important;} .ml-0{margin-left: 0 !important;} .mr-0{margin-right: 0 !important;}

.m-05{margin: 0.5em !important;} .mx-05{margin-left: 0.5em !important; margin-right: 0.5em !important;} .my-05{margin-top: 0.5em !important; margin-bottom: 0.5em !important;}
.mt-05{margin-top: 0.5em !important;} .mb-05{margin-bottom: 0.5em!important;} .ml-05{margin-left: 0.5em !important;} .mr-05{margin-right: 0.5em !important;}

.m-1{margin: 0.5em !important;} .mx-1{margin-left: 0.5em !important; margin-right: 0.5em !important;} .my-1{margin-top: 0.5em !important; margin-bottom: 0.5em !important;}
.mt-1{margin-top: 0.5em !important;} .mb-1{margin-bottom: 0.5em !important;} .ml-1{margin-left: 0.5em !important;} .mr-1{margin-right: 0.5em !important;}

.m-2{margin: 1em !important;} .mx-2{margin-left: 1em !important; margin-right: 1em !important;} .my-2{margin-top: 1em !important; margin-bottom: 1em !important;}
.mt-2{margin-top: 1em !important;} .mb-2{margin-bottom: 1em !important;} .ml-2{margin-left: 1em !important;} .mr-2{margin-right: 1em !important;}

.m-3{margin: 1.5em !important;} .mx-3{margin-left: 1.5em !important; margin-right: 1.5em !important;} .my-3{margin-top: 1.5em !important; margin-bottom: 1.5em !important;}
.mt-3{margin-top: 1.5em !important;} .mb-3{margin-bottom: 1.5em !important;} .ml-3{margin-left: 1.5em !important;} .mr-3{margin-right: 1.5em !important;}

.m-4{margin: 2em !important;} .mx-4{margin-left: 2em !important; margin-right: 2em !important;} .my-4{margin-top: 2em !important; margin-bottom: 2em !important;}
.mt-4{margin-top: 2em !important;} .mb-4{margin-bottom: 2em !important;} .ml-4{margin-left: 2em !important;} .mr-4{margin-right: 2em !important;}

.m-5{margin: 2.5em !important;} .mx-5{margin-left: 2.5em !important; margin-right: 2.5em !important;} .my-5{margin-top: 2.5em !important; margin-bottom: 2.5em !important;}
.mt-5{margin-top: 2.5em !important;} .mb-5{margin-bottom: 2.5em !important;} .ml-5{margin-left: 2.5em !important;} .mr-5{margin-right: 2.5em !important;}

.m-6{margin: 3em !important;} .mx-6{margin-left: 3em !important; margin-right: 3em !important;} .my-6{margin-top: 3em !important; margin-bottom: 3em !important;}
.mt-6{margin-top: 3em !important;} .mb-6{margin-bottom: 3em !important;} .ml-6{margin-left: 3em !important;} .mr-6{margin-right: 3em !important;}

.m-7{margin: 3.5em !important;} .mx-7{margin-left: 3.5em !important; margin-right: 3.5em !important;} .my-7{margin-top: 3.5em !important; margin-bottom: 3.5em !important;}
.mt-7{margin-top: 3.5em !important;} .mb-7{margin-bottom: 3.5em !important;} .ml-7{margin-left: 3.5em !important;} .mr-7{margin-right: 3.5em !important;}

.m-8{margin: 4em !important;} .mx-8{margin-left: 4em !important; margin-right: 4em !important;} .my-8{margin-top: 4em !important; margin-bottom: 4em !important;}
.mt-8{margin-top: 4em !important;} .mb-8{margin-bottom: 4em !important;} .ml-8{margin-left: 4em !important;} .mr-8{margin-right: 4em !important;}

.m-9{margin: 4.5em !important;} .mx-9{margin-left: 4.5em !important; margin-right: 4.5em !important;} .my-9{margin-top: 4.5em !important; margin-bottom: 4.5em !important;}
.mt-9{margin-top: 4.5em !important;} .mb-9{margin-bottom: 4.5em !important;} .ml-9{margin-left: 4.5em !important;} .mr-9{margin-right: 4.5em !important;}

.m-10{margin: 5em !important;} .mx-10{margin-left: 5em !important; margin-right: 5em !important;} .my-10{margin-top: 5em !important; margin-bottom: 5em !important;}
.mt-10{margin-top: 5em !important;} .mb-10{margin-bottom: 5em !important;} .ml-10{margin-left: 5em !important;} .mr-10{margin-right: 5em !important;}

.m-15{margin: 7.5em !important;} .mx-15{margin-left: 7.5em !important; margin-right: 7.5em !important;} .my-15{margin-top: 7.5em !important; margin-bottom: 7.5em !important;}
.mt-15{margin-top: 7.5em !important;} .mb-15{margin-bottom: 7.5em !important;} .ml-15{margin-left: 7.5em !important;} .mr-15{margin-right: 7.5em !important;}

.m-20{margin: 10em !important;} .mx-20{margin-left: 10em !important; margin-right: 10em !important;} .my-20{margin-top: 10em !important; margin-bottom: 10em !important;}
.mt-20{margin-top: 10em !important;} .mb-20{margin-bottom: 10em !important;} .ml-20{margin-left: 10em !important;} .mr-20{margin-right: 10em !important;}
/* MARGINS END */



.field-tags{
    border: 1px solid rgba(128,128,128,0.75);padding: 0 15px; font-family: inherit; font-size: 16px; width: 100%;
    outline: none; z-index: 1;background: none; box-sizing: border-box;
    resize: none; border-radius: inherit; transition: background 0.3s ease, border 0s ease, color 0.3s ease;
    color:  var(--TEXT-WEAK-1); border-radius: 4px;

}
    .field-tags label{
        margin-top: 1em; display: block;
        font-size: 12px;
        top: 50%;
        transition: 0.3s ease all;
    }
    .tag{
        display: inline-block;padding: .5em .75em; position: relative; margin: .25em .25em;
        border-radius: 1rem; text-decoration: none; background: var(--BACK-LAYER-3);
        color: var(--TEXT-WEAK-3); transition: all .3s ease; line-height: 1;
    }
        .tag .close-tag::before{
            content: '×'; font-weight: bold; display: inline-block; transform: scale(1.5);
            margin: 0 0 0 .5em; color: var(--TEXT-WEAK-5); cursor: pointer; transition: color .3s;
        }
    .field-tags input{    
        border: none; outline: none; padding: .75em .1em; font-size: 1em; background: transparent; border: none;
    }



/* INPUTS */
.field.phone .iti input{ padding: 1.1em 0.75em 1em 0.75em; }
.field.phone .iti {width: 100%; display: block;}

.field{height: 48px; /*margin-bottom: 32px;*/ border: none!important; position: relative;}
*:not(.field) + .field,
.field + *:not(.field) {/*margin-top: 16px;*/}
.row > .col > .field:last-child {/*margin-bottom: 16px;*/}
.row.no-space > .col > .field:not(:last-child) {/*margin-bottom: 16px;*/}
.row.medium-space > .col > .field:not(:last-child) {/*margin-bottom: 40px;*/}
.row.large-space > .col > .field:not(:last-child) {/*margin-bottom: 48px;*/}

.field.small {height: 40px;}
.field.medium {height: 48px;}
.field.large {height: 56px;}
.field.extra {height: 64px;}
.field::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit; background-color: inherit;
}
.field.fill::before {background-color: rgba(100,100,100,0.15);}

/* icon */
.field > i,
.field > img,
.field > .loader {
    position: absolute; top: 50%; left: auto; right: 16px; transform: translateY(-50%);
    cursor: pointer; z-index: 0;
}

.field.border > i,
.field.fill > i,
.field.round > i,
.field.border > img,
.field.fill > img,
.field.round > img,
.field.border > .loader,
.field.fill > .loader,
.field.round > .loader {left: auto; right: 16px;}

.field > i:first-child,
.field > img:first-child,
.field > .loader:first-child {left: 16px; right: auto;}

.field.border > i:first-child,
.field.fill > i:first-child,
.field.round > i:first-child,
.field.border > img:first-child,
.field.fill > img:first-child,
.field.round > img:first-child,
.field.border > .loader:first-child,
.field.fill > .loader:first-child,
.field.round > .loader:first-child {left: 16px; right: auto;}

.field.suffix > i:last-child{
    display: flex; width: 2em; height: 2em; align-items: center; justify-content: center; border-radius: 50%;
}
.field.suffix.suffix-clickable > i:last-child{z-index: 1;}
.field.invalid > i,
.field.invalid > .helper {color: var(--RED)!important;}

.field > .loader {border-width: 3px; width: 24px; height: 24px;}

/* input, textarea and select */
.field > select,
input[type^=date],
input[type^=time], 
.field .select-wrapper > input.select-dropdown{
    -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
}

input[type^=date]::-webkit-inner-spin-button,
input[type^=date]::-webkit-calendar-picker-indicator,
input[type^=time]::-webkit-inner-spin-button,
input[type^=time]::-webkit-calendar-picker-indicator {
    opacity: 0; position: absolute; top: 0; bottom: 0; left: 0;right: 0; width: 100%;
    height: 100%;z-index: -1; padding: 0; margin: 0; cursor: pointer;
}

input[type=file] {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;
    opacity: 0; cursor: pointer;
}

.field > input,
.field > textarea,
.field > select,
.field.phone input,
.field input.select-dropdown{
    border: 1px solid transparent;padding: 0 15px; font-family: inherit; font-size: 16px;width: 100%;
    height: 100%; outline: none; z-index: 1;background: none; box-sizing: border-box;
    resize: none; border-radius: inherit; transition: background 0.3s ease, border 0s ease, color 0.3s ease;
    color:  var(--TEXT-WEAK-1);
}
.field > .select-wrapper{
    width: 100%; height: 100%; border-radius: inherit;
}

.field > input:focus,
.field > textarea:focus,
.field > select:focus
/*.field input.select-dropdown:focus*/{border: 2px solid transparent; padding: 0 14px;}

.field.phone input:focus {border: 2px solid transparent;}

.field.border > input,
.field.border > textarea,
.field.border > select,
.field.phone.border input,
.field.border input.select-dropdown{border-color: rgba(128,128,128,0.75); box-shadow: none!important;}

.field.border > input:focus,
.field.border > textarea:focus,
.field.border > select:focus,
.field.phone input:focus
/*.field.border input.select-dropdown:focus*/{border-color: var(--PRIMARY-LIGHTEN);}

.field.round > input,
.field.round > textarea,
.field.round > select, 
.field.round input.select-dropdown{/*box-shadow: var(--shadow1);*/ padding-left: 23px; padding-right: 23px;}

.field.round > input:focus,
.field.round > textarea:focus,
.field.round > select:focus,
.field.round input.select-dropdown:focus{padding-left: 22px; padding-right: 22px;}

.field.prefix > input,
.field.prefix > textarea,
.field.prefix > select,
.field.prefix input.select-dropdown{padding-left: 47px;}

.field.prefix > input:focus,
.field.prefix > textarea:focus,
.field.prefix > select:focus,
.field.prefix input.select-dropdown:focus{padding-left: 46px;}

.field.suffix > input,
.field.suffix > textarea,
.field.suffix > select,
.field.suffix input.select-dropdown{padding-right: 47px;}

.field.suffix > input:focus,
.field.suffix > textarea:focus,
.field.suffix > select:focus,
.field.suffix input.select-dropdown:focus{padding-right: 46px;}

.field:not(.border, .flat, .round) > input,
.field:not(.border, .flat, .round) > textarea,
.field:not(.border, .flat, .round) > select,
.field:not(.border, .flat, .round) input.select-dropdown{border-bottom-color: var(--TEXT-COLOR-WEAK-5);}

.field:not(.border, .flat, .round) > input:focus,
.field:not(.border, .flat, .round) > textarea:focus,
.field:not(.border, .flat, .round) > select:focus
/*.field:not(.border, .flat, .round) input.select-dropdown:focus*/{border-bottom-color: var(--PRIMARY-LIGHTEN);}

.field {border-radius: 8px 8px 0 0;}

.field.border,
.field.phone.border .iti {border-radius: 4px;}

.field.round {border-radius: 32px;}

.field.round.textarea {border-radius: 24px;}

.field.fill > input,
.field.fill > textarea,
.field.fill > select,
.field.fill input.select-dropdown{box-shadow: none;}

.field.flat > input,
.field.flat > textarea,
.field.flat > select,
.field.flat input.select-dropdown{border-color: transparent!important; box-shadow: none!important;}

.field.flat > input:focus,
.field.flat > textarea:focus,
.field.flat > select:focus,
.field.fill input.select-dropdown:focus{/*box-shadow: var(--shadow1)!important;*/}

.field.invalid:not(.border, .round, .flat) > input,
.field.invalid:not(.border, .round, .flat) > textarea,
.field.invalid:not(.border, .round, .flat) > select,
.field.invalid:not(.border, .round, .flat) > input:focus,
.field.invalid:not(.border, .round, .flat) > textarea:focus,
.field.invalid:not(.border, .round, .flat) > select:focus,
.field.invalid:not(.border, .round, .flat) input.select-dropdown:focus{border-bottom-color: var(--RED);}

.field.invalid.border > input,
.field.invalid.border > textarea,
.field.invalid.border > select,
.field.invalid.border > input:focus,
.field.invalid.border > textarea:focus,
.field.invalid.border > select:focus,
.field.invalid.border input.select-dropdown:focus{border-color: var(--RED);}

.field > :disabled {opacity: .5; cursor: not-allowed;}

.field.small.textarea {height: 72px;}

.field.textarea,
.field.medium.textarea {height: 88px;}

.field.large.textarea {height: 104px;}

.field.extra.textarea {height: 120px;}

.field > select > option {background-color: var(--BACK-LAYER-1); color: var(--on-surface);}

.field.label > input,
.field.label > select,
.field.label input.select-dropdown{padding-top: 16px;}

.field.label.border:not(.fill) > input,
.field.label.border:not(.fill) > select {/*padding-top: 0;*/}

.field.label.small > textarea {padding-top: 18px;}

.field.label > textarea,
.field.label.medium > textarea {padding-top: 22px;}

.field.label.large > textarea {padding-top: 26px;}

.field.label.extra > textarea {padding-top: 30px;}

.field.small:not(.label) > textarea,
.field.small.border:not(.fill) > textarea {/*padding-top: 10px;*/}

.field:not(.label) > textarea,
.field.border:not(.fill) > textarea,
.field.medium:not(.label) > textarea,
.field.medium.border:not(.fill) > textarea {/*padding-top: 14px;*/}

.field.large:not(.label) > textarea,
.field.large.border:not(.fill) > textarea {/*padding-top: 18px;*/}

.field.extra:not(.label) > textarea,
.field.extra.border:not(.fill) > textarea {/*padding-top: 22px;*/}

/* label */
.field.label > label {
    position: absolute; top: 50%; left: 16px; font-size: 16px; transform: translateY(-50%);
    will-change: top, left; transition: 0.3s ease all; z-index: 0;
}

.field.label.textarea.small > label {top: 20px;}

.field.label.textarea > label,
.field.label.textarea.medium > label {top: 24px;}

.field.label.textarea.large > label {top: 28px;}

.field.label.textarea.extra > label {top: 32px;}

.field.label.round > label {left: 24px;}

.field.label.prefix > label {left: 48px;}

.field.label > label.active,
.field.label > [placeholder]:focus ~ label,
.field.label > [placeholder]:not(:placeholder-shown) ~ label {
    font-size: 12px; transform: translateY(-120%);
}

.field.label.border:not(.fill) > label.active,
.field.label.border:not(.fill) > [placeholder]:focus ~ label,
.field.label.border:not(.fill) > [placeholder]:not(:placeholder-shown) ~ label {
    /*font-size: 12px; top: 25%; left: 16px; transform: translateY(-50%);*/
}

.field.label.border.round:not(.fill) > label.active,
.field.label.border.round:not(.fill) > [placeholder]:focus ~ label,
.field.label.border.round:not(.fill) > [placeholder]:not(:placeholder-shown) ~ label {
    /*left: 24px;*/
}

.field.label > :focus ~ label {color: var(--PRIMARY-LIGHTEN);}

.field.invalid > label {color: var(--RED)!important;}

.field > label.required:after,
.field.required > label:after {content: " * ";}

/* helper */
.field > .helper,
.field > .error {
    position: absolute; left: 16px; bottom: 0; transform: translateY(100%); font-size: 12px;
    background: none!important; padding-top: 2px;
}

a.helper {color: var(--PRIMARY-LIGHTEN);}

.field > .error {color: var(--RED)!important;}

.field.round > .helper,
.field.round > .error {left: 24px;}

.field.invalid > .helper {/*display: none;*/}

table td > .field {max-height: 100%; height: 100%; margin: 0; padding: 0;}
/* INPUTS END */





/* GRID */
.row{display: flex; flex-wrap: wrap;}
.row:not(.col){min-width: 100%;}
.row.row-block{justify-content: stretch !important;}
.row .col{flex-shrink: 0;}
.row .col.s1{width: 8.3333333333%;}
.row .col.s2{width: 16.6666666667%;}
.row .col.s3{width: 25%;}
.row .col.s4{width: 33.3333333333%;}
.row .col.s5{width: 41.6666666667%;}
.row .col.s6{width: 50%;}
.row .col.s7{width: 58.3333333333%;}
.row .col.s8{width: 66.6666666667%;}
.row .col.s9{width: 75%;}
.row .col.s10{width: 83.3333333333%;}
.row .col.s11{width: 91.6666666667%;}
.row .col.s12{width: 100%;}
@media only screen and (min-width: 601px) {
    .row .col.m1{width: 8.3333333333%;}
    .row .col.m2{width: 16.6666666667%;}
    .row .col.m3{width: 25%;}
    .row .col.m4{width: 33.3333333333%;}
    .row .col.m5{width: 41.6666666667%;}
    .row .col.m6{width: 50%;}
    .row .col.m7{width: 58.3333333333%;}
    .row .col.m8{width: 66.6666666667%;}
    .row .col.m9{width: 75%;}
    .row .col.m10{width: 83.3333333333%;}
    .row .col.m11{width: 91.6666666667%;}
    .row .col.m12{width: 100%;}
}    
@media only screen and (min-width: 993px) {
    .row .col.l1{width: 8.3333333333%;}
    .row .col.l2{width: 16.6666666667%;}
    .row .col.l3{width: 25%;}
    .row .col.l4{width: 33.3333333333%;}
    .row .col.l5{width: 41.6666666667%;}
    .row .col.l6{width: 50%;}
    .row .col.l7{width: 58.3333333333%;}
    .row .col.l8{width: 66.6666666667%;}
    .row .col.l9{width: 75%;}
    .row .col.l10{width: 83.3333333333%;}
    .row .col.l11{width: 91.6666666667%;}
    .row .col.l12{width: 100%;}    
}
/* GRID END */

/* RESPONSIVE */
.responsive{width: 100% !important;}
@media only screen and (max-width: 600px) {
    .medium-device:not(.small-device),
    .large-device:not(.small-device),
    .medium-device.large-device:not(.small-device),
    .m:not(.s),
    .l:not(.s),
    .m.l:not(.s) {
        display: none !important;
    }
}
@media only screen and (min-width: 601px) and (max-width: 992px) {
    .small-device:not(.medium-device),
    .large-device:not(.medium-device),
    .small-device.large-device:not(.medium-device),
    .s:not(.m),
    .l:not(.m),
    .s.l:not(.m) {
        display: none !important;
    }
}
@media only screen and (min-width: 993px) {
    .medium-device:not(.large-device),
    .small-device:not(.large-device),
    .medium-device.small-device:not(.large-device),
    .m:not(.l),
    .s:not(.l),
    .m.s:not(.l) {
        display: none !important;
    }
}
/* RESPONSIVE END */

/* TRUNCATING */
.text-truncate{
    display: -webkit-box!important;
    -webkit-box-orient: vertical!important;
    overflow: hidden!important;
}
.text-truncate.lines-1{-webkit-line-clamp: 1;}
.text-truncate.lines-2{-webkit-line-clamp: 2;}
.text-truncate.lines-3{-webkit-line-clamp: 3;}
.text-truncate.lines-4{-webkit-line-clamp: 4;}
.text-truncate.lines-5{-webkit-line-clamp: 5;}
/* TRUNCATING END */

/* ALIGNMENT */
.align-center{text-align: center;}
.align-start{text-align: start;}
.align-end{text-align: end;}
.vertical-align-middle{align-items: center;}
.vertical-align-start{align-items: start;}
.vertical-align-end{align-items: end;}
/* ALIGNMENT END */

/* DISPLAY */
.flex{display: flex;}
.flex.flex-row{flex-direction: row;}
.flex.flex-column{flex-direction: column;}
/* DISPLAY END */


/* DIALOGS */
body.body-dialog{overflow-y: hidden;}
.dialog{
    display: flex; position: fixed; flex-direction: column;
    width: 100%; height: 100%; top: 0; left: 0;
    background-color: rgba(50,50,50,0.5); z-index: -1000;
    padding: 0; align-items: center; justify-content: center;
    pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
}
.dialog.show{pointer-events: all; opacity: 1;}
/* NORMAL DIALOG */
.dialog .dialog-body{
    background-color: var(--BACK-LAYER-1); max-width: 90%; width: 700px; max-height: 65%;
    transition: background-color 0.3s ease, transform 0.3s ease; transform: scale(0.95);
    overflow-y: scroll; scrollbar-width: none; 
}
.dialog:not(.dialog-sheet) .dialog-body{border-radius: 4px;}
    .dialog .dialog-body::-webkit-scrollbar { display: none; }
.dialog.show .dialog-body{transform: scale(1);}
.dialog.dialog-small:not(.dialog-sheet) .dialog-body{width: 400px; max-width: 80%; max-height: 45%;}
.dialog.dialog-large:not(.dialog-sheet) .dialog-body{width: 1000px; max-height: 80%;}
/* SHEET DIALOG */
/* DEFAULT BOTTOM*/
.dialog.dialog-sheet, .dialog.dialog-sheet.sheet-bottom{justify-content: flex-end;}
.dialog.dialog-sheet .dialog-body,
.dialog.dialog-sheet.sheet-bottom .dialog-body{transform: translateY(100%); width: 100%; max-width: 100%; max-height: 85%}
.dialog.show.dialog-sheet .dialog-body,
.dialog.show.dialog-sheet.sheet-bottom .dialog-body{transform: translateY(0);}
/* SHHET TOP */
.dialog.dialog-sheet.sheet-top{justify-content: flex-start;}
.dialog.dialog-sheet.sheet-top .dialog-body{transform: translateY(-100%); width: 100%; max-width: 100%; max-height: 85%}
.dialog.show.dialog-sheet.sheet-top .dialog-body{transform: translateY(0);}
/* SHEET LEFT */
.dialog.dialog-sheet.sheet-left{justify-content: unset; align-items: start}
.dialog.dialog-sheet.sheet-left .dialog-body{transform: translateX(-100%); height: 100%; max-height: 100%; max-width: 75%;}
.dialog.show.dialog-sheet.sheet-left .dialog-body{transform: translate(0);}
/*SHEET RIGHT */
.dialog.dialog-sheet.sheet-right{justify-content: unset; align-items: end}
.dialog.dialog-sheet.sheet-right .dialog-body{transform: translateX(100%); height: 100%; max-height: 100%; max-width: 75%;}
.dialog.show.dialog-sheet.sheet-right .dialog-body{transform: translateX(0);}
/* SHEET ON SMALL */
@media only screen and (max-width: 600px) {
    /* DEFAULT BOTTOM*/
    .dialog.dialog-sheet-mobile .dialog-body{border-radius: 0;}
    .dialog.dialog-sheet-mobile, .dialog.dialog-sheet-mobile.sheet-bottom{justify-content: flex-end;}
    .dialog.dialog-sheet-mobile .dialog-body,
    .dialog.dialog-sheet-mobile.sheet-bottom .dialog-body{transform: translateY(100%); width: 100%; max-width: 100%; max-height: 85%}
    .dialog.show.dialog-sheet-mobile .dialog-body,
    .dialog.show.dialog-sheet-mobile.sheet-bottom .dialog-body{transform: translateY(0);}
    /* SHHET TOP */
    .dialog.dialog-sheet-mobile.sheet-top{justify-content: start;}
    .dialog.dialog-sheet-mobile.sheet-top .dialog-body{transform: translateY(-100%); width: 100%; max-width: 100%; max-height: 85%}
    .dialog.show.dialog-sheet-mobile.sheet-top .dialog-body{transform: translateY(0);}
    /* SHEET LEFT */
    .dialog.dialog-sheet-mobile.sheet-left{justify-content: unset; align-items: start}
    .dialog.dialog-sheet-mobile.sheet-left .dialog-body{transform: translateX(-100%); height: 100%; max-height: 100%; max-width: 75%;}
    .dialog.show.dialog-sheet-mobile.sheet-left .dialog-body{transform: translate(0);}
    /*SHEET RIGHT */
    .dialog.dialog-sheet-mobile.sheet-right{justify-content: unset; align-items: end}
    .dialog.dialog-sheet-mobile.sheet-right .dialog-body{transform: translateX(100%); height: 100%; max-height: 100%; max-width: 75%;}
    .dialog.show.dialog-sheet-mobile.sheet-right .dialog-body{transform: translateX(0);}
}
/*DIALOG ONLY ON SMALL DEVICE*/
@media only screen and (max-width: 600px) {
    body.body-dialog-s{overflow-y: hidden;}
    .dialog-s{
        display: flex !important; position: fixed !important; flex-direction: column !important;
        width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important;
        background-color: rgba(0,0,0,0.75) !important; z-index: -1000 !important;
        padding: 0 !important; align-items: center !important; justify-content: center !important;
        pointer-events: none !important; opacity: 0 !important; transition: opacity 0.2s ease !important;
    }
    .dialog-s.show{pointer-events: all !important; opacity: 1 !important;}
    /* NORMAL DIALOG */
    .dialog-s > div:first-of-type{
        background-color: var(--BACK-LAYER-1) !important; max-width: 90%; width: 700px; max-height: 65%;
        transition: background-color 0.3s ease, transform 0.3s ease !important; transform: scale(0.95) !important;
        overflow-y: scroll !important; scrollbar-width: none !important; 
    }
        .dialog-s:not(.dialog-sheet) > div:first-of-type{border-radius: 4px;}
        .dialog-s > div:first-of-type::-webkit-scrollbar { display: none !important; }
    .dialog-s.show > div:first-of-type{transform: scale(1) !important;}
    .dialog-s.dialog-small:not(.dialog-sheet) > div:first-of-type{width: 400px; max-width: 80%; max-height: 45%;}
    .dialog-s.dialog-large:not(.dialog-sheet) > div:first-of-type{width: 1000px; max-height: 80%;}
    /* SHEET DIALOG */
    /* DEFAULT BOTTOM*/
    .dialog-s.dialog-sheet, .dialog-s.dialog-sheet.sheet-bottom{justify-content: flex-end  !important;}
    .dialog-s.dialog-sheet > div:first-of-type,
    .dialog-s.dialog-sheet.sheet-bottom > div:first-of-type{transform: translateY(100%) !important; width: 100%; max-width: 100%; max-height: 85%}
    .dialog-s.show.dialog-sheet > div:first-of-type,
    .dialog-s.show.dialog-sheet.sheet-bottom > div:first-of-type{transform: translateY(0) !important;}
    /* SHHET TOP */
    .dialog-s.dialog-sheet.sheet-top{justify-content: flex-start !important;}
    .dialog-s.dialog-sheet.sheet-top > div:first-of-type{transform: translateY(-100%) !important; width: 100%; max-width: 100%; max-height: 85%}
    .dialog-s.show.dialog-sheet.sheet-top > div:first-of-type{transform: translateY(0) !important;}
    /* SHEET LEFT */
    .dialog-s.dialog-sheet.sheet-left{justify-content: unset !important; align-items: start !important}
    .dialog-s.dialog-sheet.sheet-left > div:first-of-type{transform: translateX(-100%) !important; height: 100%; max-height: 100%; max-width: 75%;}
    .dialog-s.show.dialog-sheet.sheet-left > div:first-of-type{transform: translate(0) !important;}
    /*SHEET RIGHT */
    .dialog-s.dialog-sheet.sheet-right{justify-content: unset !important; align-items: end !important}
    .dialog-s.dialog-sheet.sheet-right > div:first-of-type{transform: translateX(100%) !important; height: 100%; max-height: 100%; max-width: 75%;}
    .dialog-s.show.dialog-sheet.sheet-right > div:first-of-type{transform: translateX(0) !important;}
}
/*DIALOG ONLY ON MEDIUM DEVICE*/
@media only screen and (min-width: 601px) and (max-width: 992px) {
    body.body-dialog-m{overflow-y: hidden;}
    .dialog-m{
        display: flex !important; position: fixed !important; flex-direction: column !important;
        width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important;
        background-color: rgba(0,0,0,0.75) !important; z-index: -1000 !important;
        padding: 0 !important; align-items: center !important; justify-content: center !important;
        pointer-events: none !important; opacity: 0 !important; transition: opacity 0.2s ease !important;
    }
    .dialog-m.show{pointer-events: all !important; opacity: 1 !important;}
    /* NORMAL DIALOG */
    .dialog-m > div:first-of-type{
        background-color: var(--BACK-LAYER-1) !important; max-width: 90%; width: 700px; max-height: 65%;
        transition: background-color 0.3s ease, transform 0.3s ease !important; transform: scale(0.95) !important;
        overflow-y: scroll !important; scrollbar-width: none !important; 
    }
        .dialog-m:not(.dialog-sheet) > div:first-of-type{border-radius: 4px;}
        .dialog-m > div:first-of-type::-webkit-scrollbar { display: none !important; }
    .dialog-m.show > div:first-of-type{transform: scale(1) !important;}
    .dialog-m.dialog-small:not(.dialog-sheet) > div:first-of-type{width: 400px; max-width: 80%; max-height: 45%;}
    .dialog-m.dialog-large:not(.dialog-sheet) > div:first-of-type{width: 1000px; max-height: 80%;}
    /* SHEET DIALOG */
    /* DEFAULT BOTTOM*/
    .dialog-m.dialog-sheet, .dialog-m.dialog-sheet.sheet-bottom{justify-content: flex-end  !important;}
    .dialog-m.dialog-sheet > div:first-of-type,
    .dialog-m.dialog-sheet.sheet-bottom > div:first-of-type{transform: translateY(100%) !important; width: 100%; max-width: 100%; max-height: 85%}
    .dialog-m.show.dialog-sheet > div:first-of-type,
    .dialog-m.show.dialog-sheet.sheet-bottom > div:first-of-type{transform: translateY(0) !important;}
    /* SHHET TOP */
    .dialog-m.dialog-sheet.sheet-top{justify-content: flex-start !important;}
    .dialog-m.dialog-sheet.sheet-top > div:first-of-type{transform: translateY(-100%) !important; width: 100%; max-width: 100%; max-height: 85%}
    .dialog-m.show.dialog-sheet.sheet-top > div:first-of-type{transform: translateY(0) !important;}
    /* SHEET LEFT */
    .dialog-m.dialog-sheet.sheet-left{justify-content: unset !important; align-items: start !important}
    .dialog-m.dialog-sheet.sheet-left > div:first-of-type{transform: translateX(-100%) !important; height: 100%; max-height: 100%; max-width: 75%;}
    .dialog-m.show.dialog-sheet.sheet-left > div:first-of-type{transform: translate(0) !important;}
    /*SHEET RIGHT */
    .dialog-m.dialog-sheet.sheet-right{justify-content: unset !important; align-items: end !important}
    .dialog-m.dialog-sheet.sheet-right > div:first-of-type{transform: translateX(100%) !important; height: 100%; max-height: 100%; max-width: 75%;}
    .dialog-m.show.dialog-sheet.sheet-right > div:first-of-type{transform: translateX(0) !important;}
}
/*DIALOG ONLY ON LARGE DEVICE*/
@media only screen and (min-width: 993px) {
    body.body-dialog-l{overflow-y: hidden;}
    .dialog-l{
        display: flex !important; position: fixed !important; flex-direction: column !important;
        width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important;
        background-color: rgba(0,0,0,0.75) !important; z-index: -1000 !important;
        padding: 0 !important; align-items: center !important; justify-content: center !important;
        pointer-events: none !important; opacity: 0 !important; transition: opacity 0.2s ease !important;
    }
    .dialog-l.show{pointer-events: all !important; opacity: 1 !important;}
    /* NORMAL DIALOG */
    .dialog-l > div:first-of-type{
        background-color: var(--BACK-LAYER-1) !important; max-width: 90%; width: 700px; max-height: 65%;
        transition: background-color 0.3s ease, transform 0.3s ease !important; transform: scale(0.95) !important;
        overflow-y: scroll !important; scrollbar-width: none !important; 
    }
        .dialog-l:not(.dialog-sheet) > div:first-of-type{border-radius: 4px;}
        .dialog-l > div:first-of-type::-webkit-scrollbar { display: none !important; }
    .dialog-l.show > div:first-of-type{transform: scale(1) !important;}
    .dialog-l.dialog-small:not(.dialog-sheet) > div:first-of-type{width: 400px; max-width: 80%; max-height: 45%;}
    .dialog-l.dialog-large:not(.dialog-sheet) > div:first-of-type{width: 1000px; max-height: 80%;}
    /* SHEET DIALOG */
    /* DEFAULT BOTTOM*/
    .dialog-l.dialog-sheet, .dialog-l.dialog-sheet.sheet-bottom{justify-content: flex-end !important;}
    .dialog-l.dialog-sheet > div:first-of-type,
    .dialog-l.dialog-sheet.sheet-bottom > div:first-of-type{transform: translateY(100%) !important; width: 100%; max-width: 100%; max-height: 85%}
    .dialog-l.show.dialog-sheet > div:first-of-type,
    .dialog-l.show.dialog-sheet.sheet-bottom > div:first-of-type{transform: translateY(0) !important;}
    /* SHHET TOP */
    .dialog-l.dialog-sheet.sheet-top{justify-content: flex-start !important;}
    .dialog-l.dialog-sheet.sheet-top > div:first-of-type{transform: translateY(-100%) !important; width: 100%; max-width: 100%; max-height: 85%}
    .dialog-l.show.dialog-sheet.sheet-top > div:first-of-type{transform: translateY(0) !important;}
    /* SHEET LEFT */
    .dialog-l.dialog-sheet.sheet-left{justify-content: unset !important; align-items: start !important}
    .dialog-l.dialog-sheet.sheet-left > div:first-of-type{transform: translateX(-100%) !important; height: 100%; max-height: 100%; max-width: 75%;}
    .dialog-l.show.dialog-sheet.sheet-left > div:first-of-type{transform: translate(0) !important;}
    /*SHEET RIGHT */
    .dialog-l.dialog-sheet.sheet-right{justify-content: unset !important; align-items: end !important}
    .dialog-l.dialog-sheet.sheet-right > div:first-of-type{transform: translateX(100%) !important; height: 100%; max-height: 100%; max-width: 75%;}
    .dialog-l.show.dialog-sheet.sheet-right > div:first-of-type{transform: translateX(0) !important;}

    /*STICKY SEARCH FORM*/
    .right-sticky-search{
        position: sticky;
        top: 3em;
    }
}
/* ELEMENTS DIALOG */
.dialog .dialog-body .dialog-header,
.dialog .dialog-body .dialog-footer{background-color: var(--BACK-LAYER-1); transition: background-color 0.3s ease; z-index: 10;}
.dialog .dialog-body .dialog-content{padding: 1.5em 1.5em 1em 1.5em;}
.dialog .dialog-body .dialog-header{padding: 1.5em 1.5em 0.5em 1.5em;}
.dialog .dialog-body .dialog-footer{padding: 0.5em 1.5em 1em 1.5em;}
.dialog .dialog-body .dialog-header + .dialog-content{padding-top: 0;}
/*disable content bottom padding if there is footer*/
/*.dialog .dialog-body .dialog-content:has(+ .dialog-content){padding-bottom: 0;}*/

.dialog .dialog-body .dialog-header.sticky{position: sticky; top: 0;}
.dialog .dialog-body .dialog-footer.sticky{position: sticky; bottom: 0;}

/* DIALOGS END */




/* ACCORDION */
ul.accordion{list-style: none;}
ul.accordion > li > div{position: relative;}
/*ul.accordion > li > div:nth-child(2){display: none;}
ul.accordion > li.active > div:nth-child(2){display: block;}*/
/* ACCORDION END */



.publish-floating-button{
    position: fixed;
    bottom: 2em;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 100;
    transition: transform 0.2s linear;
}

.publish-floating-button.pfb-hidden{
    transform: translate(-50%, 100px);
}
@media only screen and (max-width: 600px) {
    .publish-floating-button{bottom: 1em;}
}
.round-05{border-radius: 0.5em;}
.round-1{border-radius: 1em;}
.round-15{border-radius: 1.5em;}
.round-2{border-radius: 2em;}
.round-25{border-radius: 2.5em;}

.depth-0 {box-shadow: none !important;}
.depth-1 {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2) !important;}
.depth-2 {box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;}
.depth-3 {box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2) !important;}
.depth-4 {box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2) !important;}
.depth-5 {box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2) !important;}

.text-nowrap{white-space: nowrap !important;}



/*PHOTO CAROUSEL*/
.photo-carousel{
    display: block; height: 100%; width: 100%; position: relative;
    background: rgba(0,0,0,0.1); 
}
    .photo-carousel .photo-carousel-container{
        display: block; position: relative; height: 100%; width: 100%;
        overflow: hidden;
    }
    .photo-carousel .carousel-cell{
        width: 100%; height: 100%; margin: 0; position: relative; display: flex; align-items: center;
        justify-content: center; z-index: -1;
    }
        .photo-carousel .carousel-cell .photo{
            display: block; position: relative; max-width: 100%; max-height: 100%; z-index: -1;
        }
        .photo-carousel .flickity-viewport{height: 100% !important;}
                    .photo-carousel .flickity-slider{height: 100%;}
            .photo-carousel .flickity-prev-next-button.previous { left: 0.15em; }
            .photo-carousel .flickity-prev-next-button.next { right: 0.15em; }
            .photo-carousel .flickity-button {
                position: absolute; background: transparent; border: none; color: var(--WHITE);
            }
            .photo-carousel .flickity-button:disabled {
                opacity: .25; cursor: auto; pointer-events: all !important;
            }
    .photo-carousel .photo-counter{
        pointer-events: none; display: flex; position: absolute; bottom: .25em; right: .25em;
        border-radius: .25em; z-index: 20; color: var(--WHITE); background: rgba(50,50,50,.5);
        padding: .25em .5em; font-size: 0.8em; font-weight: bold; align-items: center; justify-content: center;
    }
    
    
    
/*TOAST*/
#toast-container {
    display: block;
    position: fixed;
    z-index: 100000;
}
.toast {
    border-radius: 2px;
    top: 35px;
    width: auto;
    margin-top: 10px;
    position: relative;
    max-width: 100%;
    height: auto;
    min-height: 48px;
    line-height: 1.5em;
    background-color: #323232;
    padding: 10px 25px;
    font-size: 1.1rem;
    font-weight: 300;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: default;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
    0 3px 1px -2px rgba(0,0,0,0.12),
    0 1px 5px 0 rgba(0,0,0,0.2);
}
.toast .toast-action {
    color: #eeff41;
    font-weight: 500;
    margin-right: -25px;
    margin-left: 3rem;
}
.toast.rounded {
    border-radius: 24px;
}
@media only screen and (max-width : 600px) {
    /*.toast {
        width: 100%;
        border-radius: 0;
    }
    #toast-container {
        min-width: 100%;
        bottom: 0%;
    }*/
    #toast-container {
        left: 5%;
        bottom: 5%;
        max-width: 80%;
    }
}

@media only screen and (min-width : 601px) and (max-width : 992px) {
    #toast-container {
        left: 5%;
        bottom: 7%;
        max-width: 90%;
    }
}
@media only screen and (min-width : 993px) {
    #toast-container {
        top: 10%;
        right: 7%;
        max-width: 86%;
    }
}






/*SELECT*/
/* Select Field ========================================================================== */
/*select.browser-default {
    opacity: 1;
}
select {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.90);
    width: 100%;
    padding: 5px;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    height: 3rem;
}*/
.select-label {
    position: absolute;
}
.select-wrapper > select{display: none;}
.select-wrapper {
    position: relative;
    /*z-index: 10 !important;*/
    /*border: 1px solid blue!important;*/
}
.select-wrapper input{
    /*border: 1px solid yellow!important;*/
}
.select-wrapper.valid + label, .select-wrapper.invalid + label {
    width: 100%;
    pointer-events: none;
}
.select-wrapper input.select-dropdown {
    /*position: relative;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid color("grey", "base");
    outline: none;
    height: 3rem;
    line-height: 3rem;
    width: 100%;
    font-size: 16px;
    margin: 0 0 8px 0;
    padding: 0;
    display: block;
    user-select: none;
    z-index: 1;*/
}
.select-wrapper input.select-dropdown:focus {
    /*border-bottom: 1px solid color("teal", "lighten-1");*/
}
.select-wrapper .caret {
    display: none;
    /*position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    z-index: 0;
    fill: rgba(0, 0, 0, .87);*/
}
.select-wrapper + label {
    position: absolute;
    top: -26px;
    font-size: 0.8rem;
}
.select-wrapper .hide-select {
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: -1;
}
select:disabled {
    /*color: rgba(0, 0, 0, .42);*/
    opacity: 0.5;
}
.select-wrapper.disabled + label {
    color: yellow;
}
.select-wrapper.disabled .caret {
    fill: rgba(0, 0, 0, .42);
}
.select-wrapper input.select-dropdown:disabled {
    /*color: blue;
    cursor: default;
    user-select: none;*/
}
.select-wrapper i {
    color: rgba(0, 0, 0, .3);
}
.select-dropdown li.disabled, .select-dropdown li.disabled > span, .select-dropdown li.optgroup {
    /*color: rgba(0, 0, 0, .3);
    background-color: transparent;*/
    opacity: 0.5;
}
body.keyboard-focused .select-dropdown.dropdown-content li:focus {
    background-color: rgba(0, 0, 0, .08);
}
.select-dropdown.dropdown-content li:hover {
    background-color: rgba(0, 0, 0, .08);
}
.select-dropdown.dropdown-content li.selected {
    background-color: rgba(0, 0, 0, .03);
}
.prefix ~ .select-wrapper {
    margin-left: 3rem;
    width: 92%;
    width: calc(100% - 3rem);
}
.prefix ~ label {
    margin-left: 3rem;
}
.select-dropdown li img {
    height: 40px;
    width: 40px;
    margin: 5px 15px;
    float: right;
}
.select-dropdown li.optgroup {
    min-height: unset;
    pointer-events: none;
}
.select-dropdown li.optgroup.selected > span {
    color: rgba(0, 0, 0, .7);
}
.select-dropdown li.optgroup > span {
    color: var(--TEXT-WEAK);
    padding: 5px 15px;
}
.select-dropdown li.optgroup ~ li.optgroup-option {
    padding-left: 0.5rem;
}

.select-dropdown [type="checkbox"] + span:not(.lever) {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 1rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.select-dropdown [type="checkbox"]:not(:checked),
.select-dropdown [type="checkbox"]:checked {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.select-dropdown [type="checkbox"] + span:not(.lever):before,
.select-dropdown [type="checkbox"]:not(.filled-in) + span:not(.lever):after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    z-index: 0;
    border: 2px solid #5a5a5a;
    border-radius: 1px;
    margin-top: 3px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.select-dropdown [type="checkbox"]:not(.filled-in) + span:not(.lever):after {
    border: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.select-dropdown [type="checkbox"]:checked + span:not(.lever):before {
    top: -4px;
    left: -5px;
    width: 12px;
    height: 22px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid var(--PRIMARY);
    border-bottom: 2px solid var(--PRIMARY);
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
.select-dropdown [type="checkbox"]:not(:checked):disabled + span:not(.lever):before {
    border: none;
    background-color: rgba(0, 0, 0, 0.42);
}





/*dropdown*/
.dropdown-content {
    background-color: var(--BACK-LAYER-1);
    margin: 0;
    display: none;
    min-width: 100px;
    overflow-y: auto;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;
    transform-origin: 0 0;
    list-style: none;
    padding-left: 0;
    max-height: 15em;
}
.dropdown-content:focus {
    outline: 0;
}
.dropdown-content li {
    clear: both;
    color: var(--TEXT);
    cursor: pointer;
    min-height: 50px;
    line-height: 1.5rem;
    width: 100%;
    text-align: left;
}
.dropdown-content li:hover, .dropdown-content li.active {
    background-color: #eee;
}
.dropdown-content li:focus {
    outline: none;
}
.dropdown-content li.divider {
    min-height: 0;
    height: 1px;
}
.dropdown-content li > a, .dropdown-content li > span {
    font-size: 16px;
    color: color("teal", "lighten-1");
    display: block;
    line-height: 22px;
    padding: 14px 16px;
}
.dropdown-content li > span > label {
    top: 1px;
    left: 0;
    height: 18px;
}
.dropdown-content li > a > i {
    height: inherit;
    line-height: inherit;
    float: left;
    margin: 0 24px 0 0;
    width: 24px;
}
body.keyboard-focused .dropdown-content li:focus {
    background-color: #dadada;
}
.input-field.col .dropdown-content [type="checkbox"] + label {
    top: 1px;
    left: 0;
    height: 18px;
    transform: none;
}
.dropdown-trigger {
    cursor: pointer;
}
.dropdown-content{
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}



/*CHIPS*/
.chip {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  /*min-width: 40px;*/
  font-size: 14px;
  font-weight: 500;
  color: var(--TEXT);
  padding: 0 16px;
  background-color: var(--CHIP);
  margin: 4px 4px;
  text-transform: none;
  border-radius: 8px;
  transition: all 0.3s;
  user-select: none;
  gap: 16px;
  text-decoration: none;
  width: unset;
}

.chip.chip-truncate{
    /*display: inline-block;*/
    justify-content: unset;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chip.chip-truncate > span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chip.tiny{
    height: 24px; padding: 0 8px;
}
.chip.small {
  height: 32px;
  /*min-width: 32px;*/
}

.chip.large {
  height: 48px;
  /*min-width: 48px;*/
}

.chip.border {
  border: 1px solid var(--SECONDARY-LIGHTEN);
  color: var(--SECONDARY-LIGHTEN);
  background-color: transparent;
}
.chip.border-primary{
    border: 1px solid var(--PRIMARY-LIGHTEN);
    color: var(--PRIMARY-LIGHTEN);
    background-color: transparent;
}

.chip.circle {
  border-radius: 40px;
  padding: 0;
}

.chip.square {
  border-radius: 0;
  padding: 0;
}

.chip.fill {
  background-color: var(--SECONDARY) !important;
  color: var(--TEXT) !important;
  border: none;
}



























































































/* switch */
.switch {
  width: auto;
  height: auto;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  position: relative;
}
.switch > span {
  display: inline-flex;
  align-items: center;
  color: #1C1B1F;
  font-size: 14px;
  position: relative;
}
.switch > input + span:empty::after,
.switch > input + span > i {
  /*font-family: "Material Symbols Outlined";*/
  /*font-weight: normal;
  font-style: normal;*/
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /*font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;*/
  vertical-align: middle;
  text-align: center;
  overflow: hidden;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  margin: 0 auto;
  outline: none;
  color: var(--SECONDARY);
  position: absolute;
  left: -24px;
  background-color: transparent;
  border-radius: 50%;
}
.switch + .switch {
  margin-left: 8px;
}
.switch > input {
  width: 52px;
  height: 32px;
  opacity: 0;
}
.switch > input + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  background-color: rgba(0, 0, 0, .1);
  border: 2px solid rgba(128,128,128,0.5);
  box-sizing: border-box;
  width: 52px;
  height: 32px;
  border-radius: 32px;
  transform: translate(-52px, -50%);
}
.switch > input:checked + span::before {
  border: none;
  background-color: var(--SECONDARY);
}
.switch > input + span:empty::after,
.switch > input + span > i {
  position: absolute;
  left: 0;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: .2s all;
  font-size: 16px;
  user-select: none;
  min-width: auto;
  content: "";
  color: var(--WHITE);
  background-color: rgba(128,128,128,0.5);
  transform: translate(-48px, -50%) scale(.6);
}

.switch > input:checked + span:empty::after,
.switch > input:checked + span > i {
  content: "check";
  color: var(--SECONDARY);
  background-color: #FFFFFF;
  transform: translate(-28px, -50%) scale(1);
}

.switch > input + span > i {
  transform: translate(-48px, -50%) scale(1);
}

.switch > input + span > i:last-child,
.switch > input:checked + span > i:first-child {
  opacity: 0;
}

.switch > input:checked + span > i:last-child,
.switch > input + span > i:first-child {
  opacity: 1;
}

.switch > input:not([disabled]):focus + span:empty::after,
.switch > input:not([disabled]):hover + span:empty::after,
.switch > input:not([disabled]):focus + span > i,
.switch > input:not([disabled]):hover + span > i {
  box-shadow: 0 0 0 8px rgba(0, 0, 0, .1);
}
.switch > input:disabled + span {
  opacity: .5;
  cursor: not-allowed;
}






/*show more*/
.show-more{position: relative;}
.show-more{transition: color 0.3s, height 0s !important;}
.show-more.ok:not(.show):before{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    max-height: 100px;
    content: '';
    background: linear-gradient(to top, var(--BACK-COLOR), 75%,transparent);
}
.show-more.show > .button{
    display: none !important;
}






.no-padding{padding: 0 !important;}
.no-margin{margin: 0 !important;}
.border-primary{border: 1px solid var(--PRIMARY);}
.border-secondary{border: 1px solid var(--SECONDARY);}
.text-wrap{white-space: normal !important;}