/* ===============================================
RESET - BASICS
================================================== */
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, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
    margin: 0rem;
    padding: 0rem;
    
    font: inherit;
    vertical-align: baseline;
}

table
{
    border-collapse: collapse;
    border-spacing: 0;
}

img
{
    vertical-align: middle;
}

*, *::after, *::before
{
    -webkit-overflow-scrolling: touch;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* ===============================================
RESET - BODY
================================================== */
html
{
    font-size: 62.5%;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body
{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

*::-webkit-scrollbar
{
    width: 0.5rem;
}

*::-webkit-scrollbar-track   { background-color: var(--body-scrollbar-background); }
*::-webkit-scrollbar-thumb   { background-color: var(--custom-background); }


/* ===============================================
LINKS
================================================== */
a,
a:visited
{
    cursor: pointer;
    outline: 0;
    
    padding-bottom: 0.3rem;
    
    text-decoration: none;
    
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 0.1rem;

    transition: all 0.25s ease;
}

a:hover
{
    background-size: 100% 0.1rem;
}

a.underline,
.underline-all a
{
    background-size: 100% 0.1rem;
}

a.logo
{
    padding: 0rem 0rem;
    
    background-image: none;
}


/*
COLOR SETTINGS
================================================== */
a,
a:visited 			    { color: var(--custom-color); background-image: linear-gradient(var(--custom-background-active), var(--custom-background-active)); }
a:hover                 { color: var(--custom-color); }


/* ===============================================
TYPOGRAPHY
================================================== */
h1, h2, h3, h4, h5
{
    margin-bottom: var(--size-x1);

    color: var(--body-color-title);
    font-weight: var(--fw-t-bold);
}

h1 a, h2 a, h3 a, h4 a, h5 a { font-weight: inherit; }
h1                 { font-size: var(--f1); }
h2                 { font-size: var(--f2); }
h3                 { font-size: var(--f3); }
h4                 { font-size: var(--f4); }
h5                 { font-size: var(--f5); }

.subheader         { color: var(--body-color-subtitle); }

p                  { margin: 0rem 0rem var(--size-x1) 0rem; }
p img              { margin: 0rem; }

em, i              { font-style: italic; }
strong, b          { font-weight: var(--fw-medium); }
underline, u       { text-decoration: underline; }
line-through, t    { text-decoration: line-through; }

small              { font-size: var(--f6); }
medium             { font-size: var(--f5); }
big                { font-size: var(--f4); }

.color.theme       { color: var(--custom-color); }
.color.blue        { color: var(--color-blue); }
.color.green       { color: var(--color-green); }
.color.yellow      { color: var(--color-yellow); }
.color.red         { color: var(--color-red); }
.color.grey        { color: var(--color-grey); }

hr                 { border-top: 0.1rem solid var(--body-border); border-width: 0.1rem 0 0; clear: both; margin: 0rem 0rem var(--size-x0-5) 0rem; height: 0rem; }


/* ===============================================
TABLE (ref: materializecss)
================================================== */
table
{
    display: table;
    width: 100%;
    margin: 0rem 0rem var(--size-x1) 0rem;
}

table > tbody                                       { overflow: auto; }

table > tbody > tr                                  { transition: background-color 0.25s ease; }

table.centered      thead tr th,
table.centered      tbody tr td                     { text-align: center; }

td, th
{
    padding: var(--size-x0-25) 0rem;

    font-size: var(--f6);
    text-align: left;
    vertical-align: inherit;
}

th 
{
    padding-bottom: var(--size-x0-6);
    
    font-size: var(--f4);
    font-weight: var(--fw-medium);
}

td.title
{
    font-weight: var(--fw-medium);
}

td.dot
{
    font-weight: var(--fw-medium);
}

table > tbody::-webkit-scrollbar
{
    width: 0.5rem;
}


/* 
COLOR SETTINGS
================================================== */
table                                                           { background-color: var(--body-background-white); color: var(--body-color); }

table.box-shadow                                                { box-shadow: var(--body-shadow); }

table.bordered      > thead > tr                                { border-bottom: var(--border-regular) solid var(--body-sub-border); }
table.bordered      > tbody > tr                                { border-bottom: var(--border-regular) solid var(--body-sub-border); }

table.striped       > tbody > tr:nth-child(odd)                 { background-color: var(--body-sub-background); }

table.highlight     > tbody > tr:hover                          { background-color: var(--body-sub-background); }

th                                                              { background-color: var(--body-background-white); color: var(--body-color-title); }

td.title                                                        { color: var(--body-color-title); }
td.dot                                                          { color: var(--body-color-title); }

table               > tbody::-webkit-scrollbar-track            { background-color: var(--body-scrollbar-background); }
table               > tbody::-webkit-scrollbar-thumb            { background-color: var(--custom-background); }


/* ===============================================
HIGHLIGHTS
================================================== */
.highlights
{
    padding: 0.3rem 0.3rem;
}

.highlights.dotted 		{ border-bottom: 0.1rem dotted; }
.highlights.dashed 		{ border-bottom: 0.1rem dashed; }
.highlights.line 		{ border-bottom: var(--border-regular) solid; }
.highlights.double 		{ border-bottom: 0.3rem double; }


/* 
COLOR SETTINGS
================================================== */
.highlights.theme 		{ background-color: var(--custom-background); color: var(--body-color-white); }
.highlights.yellow 		{ background-color: var(--highlights-yellow); }


/* ===============================================
LISTS
================================================== */
ul, ol			{ margin: 0rem 0rem var(--size-x1) var(--size-x1); padding: 0rem; }
ul				{ list-style: disc; }
ol				{ list-style: decimal; }

/* list-style */
ul.list-style ul, ul.list-style ol,
ol.list-style ol, ol.list-style ul	{ margin: var(--size-x0-25) var(--size-x0-5) var(--size-x0-25) var(--size-x0-5); }

ul.list-style li, ol.list-style li
{
    transition: padding 0.25s ease;
}

ul.list-style 				        li		    { padding: 0rem 0rem 0rem var(--size-x0-5); }
ol.list-style 				        li		    { padding: 0rem 0rem 0rem var(--size-x0-5); }

ul.list-style.right-scroll 			li:hover	{ padding: 0rem 0rem 0rem var(--size-x0-6); }

ol.list-style.decimal				{ list-style-type: decimal; }
ol.list-style.alphabet				{ list-style-type: upper-latin; }
ol.list-style.roman					{ list-style-type: upper-roman; }
ol.list-style.lower-alphabet		{ list-style-type: lower-latin; }
ol.list-style.lower-roman			{ list-style-type: lower-roman; }

/* list-icon */
ul.list-icon    { list-style: none; }

ul.list-icon li { margin-left: var(--size-x0-5); margin-bottom: var(--size-x0-5); }

ul.list-icon li:before
{
    content: '\f00c';
    float: left;
    
    margin-left: -2.0em;
    
    font-family: 'Font Awesome 6 Pro';
}

ul.list-icon.icon-check                  li:before   { content: '\f00c'; }
ul.list-icon.icon-dot-circle             li:before   { content: '\f192'; }
ul.list-icon.icon-circle                 li:before   { content: '\f111'; }
ul.list-icon.icon-flag                   li:before   { content: '\f024'; }
ul.list-icon.icon-star                   li:before   { content: '\f005'; }
ul.list-icon.icon-exclamation-triangle   li:before   { content: '\f071'; }
ul.list-icon.icon-exclamation-circle     li:before   { content: '\f06a'; }
ul.list-icon.icon-scrubber               li:before   { content: '\f2f8'; }
ul.list-icon.icon-arrow-circle-right     li:before   { content: '\f0a9'; }
ul.list-icon.icon-arrow-right            li:before   { content: '\f061'; }
ul.list-icon.icon-chevron-right          li:before   { content: '\f054'; }
ul.list-icon.icon-chevron-circle-right   li:before   { content: '\f138'; }


/* 
COLOR SETTINGS
================================================== */
ul.list-icon li:before              { color: var(--custom-color); }


/* ===============================================
IMAGES
================================================== */
img.responsive
{
    max-width: 100%;
    height: auto;
}

img.left
{
    float: left;
    max-width: 100%;
    margin: var(--size-x0-25) var(--size-x0-5) var(--size-x0-25) 0rem;
}

img.right
{
    float: right;
    max-width: 100%;
    margin: var(--size-x0-25) 0rem var(--size-x0-25) var(--size-x0-5);
}

img.responsive.left
{
    max-width: 40%;
}

img.responsive.right
{
    max-width: 40%;
}


/* ===============================================
BACK TO TOP (activate in executor.js)
================================================== */
.back-top
{
    position: fixed;
    display: none;
    z-index: 10000;

    bottom: var(--size-x4);
    right: var(--size-x0-3);
}

.back-top a
{
    display: inline-block;
    
    width: var(--size-x1-5);
    height: var(--size-x1-5);

    margin: auto 0rem auto auto;
    padding: var(--size-x0-25) 0rem;

    font-size: var(--f5);
    text-align: center;

    border-radius: var(--border-radius);
}

.back-top a::before
{
    content: '\f0aa';
    
    font-family: 'Font Awesome 6 Pro';
    font-weight: var(--fw-bold);
    line-height: inherit;   
}


/* 
COLOR SETTINGS
================================================== */
.back-top 			a,
.back-top           a:visited  { background-color: var(--body-background-blur); color: var(--custom-color); box-shadow: var(--body-shadow); }
.back-top           a:hover    { background-color: var(--custom-background-hover); color: var(--body-color-white); }


/* ===============================================
MODAL
================================================== */
body.no-scroll
{
    position: relative;
    overflow: hidden;
    
    top: 0rem;
    
    min-height: 100%;
    
    padding-right: 0.5rem;
}

.modal
{        
    position: fixed;
    display: flex;
    z-index: 100000;
    
    overflow-y: hidden;
    overflow-x: hidden;
    
    bottom: -100%;
    left: 0rem;
    
    width: 100%;
    height: 100vh;
    
    padding: var(--size-x0-5) 0rem var(--size-x3) 0rem;
    margin: 0rem 0rem 0rem 0rem;
    
    visibility: hidden;
    opacity: 0;
}

.modal.modal-full
{
    padding: 0rem;
}

.modal.modal-full .modal-sticky
{
    position: sticky;
    top: 0rem;
    z-index: 10;

    padding-top: var(--size-x0-5);
}

.modal.open
{
    visibility: visible;
    opacity: 1;
    
    top: 0rem;
    bottom: auto;
    
    overflow-y: scroll;
    overflow-x: hidden;
}

.modal.close
{
    transition: all 0s ease, padding 0s ease;
}

.modal-result.open
{
    overflow-y: hidden;
    overflow-x: hidden;

    height: 100%;

    padding-top: var(--size-x1);
}

.modal .modal-inner
{
    display: block;
    
    max-width: 110.0rem;
    width: 95%;
    height: fit-content;
    
    margin: var(--size-x0-5) auto auto auto;
    padding: var(--size-x0-5);

    border-radius: var(--border-radius);
    
    transform: translate(0%, -200%);
    transition: transform 0.35s ease;
}

.modal .modal-inner.bottom-transform
{
    transform: translate(0%, 200%);
}

.modal.modal-full .modal-inner
{
    min-width: 100%;
    height: fit-content;
    
    margin: 0rem;
    padding-top: 0rem !important;

    border-radius: 0rem;
}

.modal.modal-full .modal-inner > .container
{
    min-width: 100%;
}

.modal.close .modal-inner 
{
    transition: transform 0s ease;
}

.modal .modal-inner.modal-mini 
{
    max-width: 45.0rem;
}

.modal.open .modal-inner
{
    transform: translate(0%, 0%);
}

.modal.open .modal-inner .modal-close
{
    position: absolute;
    float: right;
    
    top: var(--size-x0-5);
    right: 0;
    
    margin-right: var(--size-x0-5);
}

.modal.modal-full.open .modal-inner .modal-close
{
    margin-right: 0rem;
}


/* 
COLOR SETTINGS
================================================== */
.modal                                                          { background-color: var(--mask-modal-background); }
.modal .modal-inner                                             { background: var(--body-background); box-shadow: var(--body-shadow); }
.modal.modal-full .modal-sticky                                 { background: var(--body-background); }

.modal:last-child .modal-inner:has(.message-box.soft)           { background-color: var(--message-box-soft-background); }
.modal:last-child .modal-inner:has(.message-box.info)           { background-color: var(--message-box-info-background); }
.modal:last-child .modal-inner:has(.message-box.note)           { background-color: var(--message-box-note-background); }
.modal:last-child .modal-inner:has(.message-box.confirm)        { background-color: var(--message-box-confirm-background); }
.modal:last-child .modal-inner:has(.message-box.error)          { background-color: var(--message-box-error-background); }


/* 
LAYOUT FOR LARGE
================================================== */
@media only screen and (max-width: 1399px)
{
    
}


/* 
LAYOUT FOR SCREEN
================================================== */
@media only screen and (max-width: 1224px)
{
    
}


/* 
LAYOUT FOR TABLET
================================================== */
@media handheld, only screen and (max-width: 1023px)
{
    
}


/* 
LAYOUT FOR MOBILE
================================================== */
@media handheld, only screen and (max-width: 640px)
{
    body.no-scroll
    {
        padding-right: 0rem;
    }

    .modal
    {
        padding-top: 0rem;
    }

    .modal .modal-inner
    {
        width: 100%;

        margin-top: 0rem;
    }

    .modal .modal-inner.modal-inner-result
    {
        margin: 0rem var(--size-x0-5);
    }
}


/* 
CLEARING
================================================== */
.modal::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
DIVIDER
================================================== */
.divider
{
    position: relative;

    width: 100%;
    margin: 0rem 0rem var(--size-x1) 0rem;
}

/* font awesome - <div class="divider color dotted fa fa-angle-double-down style"></div> */
.divider.style
{
    top: var(--size-x0-25);

    text-align: center;
}

.divider.style::before
{
    position: relative;
    top: calc(var(--size-x0-25) * -1);

    padding: 0rem var(--size-x0-5);

    font-family: 'Font Awesome 6 Pro';
    font-weight: var(--fw-bold);
    line-height: inherit;
}


/* 
COLOR SETTINGS
================================================== */
.divider				{ border-top: var(--border-regular) solid var(--body-border); color: var(--body-border); }
.divider.style::before  { background-color: var(--body-background-white); }
.divider.double			{ border-top-width: 0.2rem; }
.divider.space			{ border: 0rem; }

.divider.theme			{ border-color: var(--custom-color); color: var(--custom-color); }

.divider.solid			{ border-top-style: solid; }
.divider.dotted			{ border-top-style: dotted; }
.divider.dashed			{ border-top-style: dashed; }


/* 
CLEARING
================================================== */
.divider::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
TITLE DIVIDER
================================================== */
.title-divider
{
    display: inline-grid;
    
    width: 100%;
    
    margin: var(--size-x0-5) 0rem;
}

.title-divider .title
{
    display: inline-block;
    
    margin-right: var(--size-x0-5);
}

.title-divider .title a
{
    padding: 0rem 0rem;
    
    background-image: none;
}

.title-divider h1.title,
.title-divider h2.title,
.title-divider h3.title,
.title-divider h4.title,
.title-divider h5.title { font-size: var(--f1); margin-bottom: var(--size-x0-25); text-transform: uppercase; }

.title-divider h1.title.big-title,
.title-divider h2.title.big-title,
.title-divider h3.title.big-title,
.title-divider h4.title.big-title,
.title-divider h5.title.big-title { font-size: var(--f1-big-title); }

.title-divider .title span
{
    display: inline-block;

    margin-right: var(--size-x0-25);
}

.title-divider .title span.style
{
    font-weight: var(--fw-t-regular);
}

.title-divider .title span:last-child
{
    margin-right: 0rem;    
}

.title-divider .title-label
{
    display: inline-block;
    
    vertical-align: middle;
}

.title-divider .title-label span
{
    display: inline-block;
    
    padding: var(--size-x0-3) var(--size-x0-5);
    margin: 0rem var(--size-x0-25) var(--size-x0-25) 0rem;
    
    font-size: var(--f6);
    font-weight: var(--fw-medium);
    line-height: var(--size-x0-3);
    text-transform: uppercase;

    border-radius: var(--border-radius);
}

.title-divider .title-label span:last-child
{
    margin-right: 0rem;
}

.title-divider .subtitle
{
    position: relative;
    float: left;
    display: flex;
    z-index: 10;

    margin-top: var(--size-x0-5);

    font-size: var(--f6);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
}

.title-divider .subtitle.left 	{ float: left; }
.title-divider .subtitle.right 	{ float: right; }

.title-divider .subtitle span
{
    display: inline-block;
}

.title-divider .subtitle span::after
{
    content: '|';
    
    margin: 0rem var(--size-x0-25);
}

.title-divider .subtitle span:last-child::after
{
    content: '';
    
    margin: 0rem 0rem;
}

.title-divider .subtitle span.icon
{
    font-size: var(--f5);
}

.title-divider .subtitle span.icon::after
{
    content: '';
    
    margin: 0rem var(--size-x0-25) 0rem 0rem;
}

.title-divider .subtitle span.icon::before
{
    font-family: 'Font Awesome 6 Pro';
    font-weight: var(--fw-bold);
    line-height: inherit;
}

.title-divider .subtitle span.icon.icon-map-pin::before                 { content: '\f3c5'; }

.title-divider .subtitle span i
{
    margin-right: var(--size-x0-25);
}

.title-divider .subtitle a.top i.fa
{
    margin-left: var(--size-x0-25);
}

.title-divider .line
{
    position: relative;

    width: 100%;
    height: 0;
}


/* 
COLOR SETTINGS
================================================== */
.title-divider				.title                        { color: var(--body-color-title); }

.title-divider 				.title          a,
.title-divider 				.title          a:visited     { color: var(--body-color-title); }
.title-divider 				.title          a:hover       { color: var(--custom-color); }

.title-divider 				.title          span.style    { opacity: 0.5; }

.title-divider              .title-label    span,
.title-divider              .title-label    span.theme    { background-color: var(--custom-background); color: var(--body-color-white); box-shadow: var(--body-shadow); }
.title-divider              .title-label    span.blue     { background-color: var(--color-blue); }
.title-divider              .title-label    span.green    { background-color: var(--color-green); }
.title-divider              .title-label    span.yellow   { background-color: var(--color-yellow); }
.title-divider              .title-label    span.red      { background-color: var(--color-red); }
.title-divider              .title-label    span.grey     { background-color: var(--color-grey); }
.title-divider              .title-label    span.soft     { background-color: var(--body-background-white); color: var(--body-color); }

.title-divider				.subtitle                     { color: var(--body-color-subtitle); }

.title-divider 				.subtitle 	    a,
.title-divider 				.subtitle 	    a:visited     { color: var(--body-color-subtitle); }
.title-divider 				.subtitle 	    a:hover       { color: var(--custom-color); }

.title-divider              .subtitle       span.icon     { color: var(--custom-color); }

.title-divider 				.line                         { border-top: var(--border-regular) solid var(--body-border); }


/* 
CLEARING
================================================== */
.title-divider::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
FORMS
================================================== */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
textarea,
select
{
    position: relative;
    display: inline-block;
    outline: none;

    max-width: 100%;
    height: var(--size-x1-33);

    padding: 0rem var(--size-x0-5);
    margin: 0rem;

    font-family: 'Rubik', Arial, sans-serif;
    font-size: var(--f6);

    border-radius: var(--border-radius);

    transition: all 0.25s ease;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select
{
    padding: 0rem var(--size-x1-5) 0rem var(--size-x0-5);

    background-position:
    calc(100% - var(--size-x0-5)) center,
    calc(100% - 1.0rem) center,
    calc(100% - var(--size-x1)) center;

    background-size:
    0.5rem 0.6rem,
    0.5rem 0.6rem,
    0.1rem var(--size-x1);

    background-repeat: no-repeat;
}

textarea
{
    min-height: 8.0rem;

    padding: var(--size-x0-5) var(--size-x0-5);

    line-height: inherit;        
}

input[type="checkbox"],
input[type="radio"]
{
    position: relative;
    display: inline-block;
    outline: none;

    min-width: 1.2rem;
    width: 1.2rem;
    height: 1.2rem;

    margin: auto var(--size-x0-3) auto 0rem;

    border-radius: 0rem;

    transition: all 0.25s ease;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="radio"]
{
    border-radius: var(--size-x1);
}


/* 
SIZE SETTINGS
================================================== */
input[type="text"].small,
input[type="number"].small,
input[type="password"].small,
input[type="email"].small,
textarea.small,
select.small		{ height: var(--size-x1); }

textarea.small
{
    padding: var(--size-x0-5) var(--size-x0-5);
    min-height: 6.0rem;
}

select.small 
{ 
    padding: 0rem var(--size-x1-5) 0rem var(--size-x0-5);

    background-position:
    calc(100% - var(--size-x0-5)) center,
    calc(100% - 1.0rem) center,
    calc(100% - var(--size-x1)) center;

    background-size:
    0.5rem 0.6rem,
    0.5rem 0.6rem,
    0.1rem var(--size-x0-5);
}

input[type="text"].medium,
input[type="number"].medium,
input[type="password"].medium,
input[type="email"].medium,
textarea.medium,
select.medium		{ height: var(--size-x1-33); }

textarea.medium
{
    padding: var(--size-x0-5) var(--size-x0-5);
    min-height: 8.0rem;
}

select.medium 
{ 
    padding: 0rem var(--size-x1-5) 0rem var(--size-x0-5);

    background-position:
    calc(100% - var(--size-x0-5)) center,
    calc(100% - 1.0rem) center,
    calc(100% - var(--size-x1)) center;

    background-size:
    0.5rem 0.6rem,
    0.5rem 0.6rem,
    0.1rem var(--size-x1);
}

input[type="text"].big,
input[type="number"].big,
input[type="password"].big,
input[type="email"].big,
textarea.big,
select.big		    { height: var(--size-x2); font-size: var(--f6); }

textarea.big
{
    padding: var(--size-x0-5) var(--size-x0-6);
    min-height: var(--size-x0-6);
}

select.big 
{ 
    padding: 0rem 5.0rem 0rem var(--size-x0-6);

    background-position:
    calc(100% - var(--size-x0-5)) center,
    calc(100% - 1.0rem) center,
    calc(100% - var(--size-x1)) center;

    background-size:
    0.5rem 0.6rem,
    0.5rem 0.6rem,
    0.1rem var(--size-x1-5);
}


/* 
COLOR SETTINGS
================================================== */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
textarea
{
    color: var(--body-color);
    background-color: var(--body-background-white);
    border: var(--border-regular) solid var(--body-form-border);
}

input[type="text"]:focus,  input[type="number"]:focus,     input[type="password"]:focus,   input[type="email"]:focus,  textarea:focus
{
    color: var(--custom-color);
    border: var(--border-regular) solid var(--custom-color);
}

input::placeholder,
textarea::placeholder
{
    color: var(--body-form-placeholder);
}

select
{
    color: var(--body-color);
    background-color: var(--body-background-white);
    background-image:
    linear-gradient(45deg, transparent 50%, var(--body-form-icon) 50%),
    linear-gradient(135deg, var(--body-form-icon) 50%, transparent 50%),
    linear-gradient(to right, var(--body-form-icon), var(--body-form-icon));
    border: var(--border-regular) solid var(--body-form-border);
}

select:focus
{
    color: var(--custom-color);
    background-image:
    linear-gradient(45deg, transparent 50%, var(--custom-color) 50%),
    linear-gradient(135deg, var(--custom-color) 50%, transparent 50%),
    linear-gradient(to right, var(--custom-color), var(--custom-color));
    border: var(--border-regular) solid var(--custom-color);
}

select::placeholder
{
    color: var(--body-form-placeholder);
}

select option
{
    color: var(--body-color);
    background-color: var(--body-background-white);
}

input[type="checkbox"],
input[type="radio"]
{
    color: var(--body-color);
    background-color: var(--body-background-white);
    border: var(--border-regular) solid var(--body-form-border);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked
{
    color: var(--custom-color);
    background-color: var(--custom-background);
    border: var(--border-regular) solid var(--custom-color);
}


/* ===============================================
BUTTON
================================================== */
a.button
{
    background-image: none;
}

.button
{
    display: inline-block;
    cursor: pointer;

    max-height: var(--size-x1-33);

    padding: 0rem var(--size-x0-5);
    margin: 0rem;
    
    font-size: var(--f6);
    font-weight: var(--fw-medium);
    line-height: var(--size-x1-33);
    text-align: left;
    text-transform: uppercase;
    vertical-align: middle;

    border-radius: var(--border-radius);
}

.button.just-icon
{
    padding: var(--size-x0-125) var(--size-x0-5);

    line-height: var(--size-x1);
}

.button.icon::before
{
    display: inherit;

    margin-right: var(--size-x0-5);
    padding-right: var(--size-x0-5);

    min-width: var(--size-x1);
    max-width: var(--size-x1);
    
    font-family: 'Font Awesome 6 Pro';
    font-weight: var(--fw-medium);
    font-size: var(--fs);
    line-height: inherit;
    text-align: center;
}

.button.icon.just-icon::before
{
    margin-right: 0rem;
    padding-right: 0rem;

    min-width: var(--size-x0-5);
}

.button.icon.icon-search::before                            { content: '\f002'; }
.button.icon.icon-reset::before                             { content: '\f2ed'; }
.button.icon.icon-send::before                              { content: '\f1d8'; }
.button.icon.icon-page-read::before                         { content: '\f1e5'; }
.button.icon.icon-property-list::before                     { content: '\f03a'; }
.button.icon.icon-property-filter::before                   { content: '\f0b0'; }
.button.icon.icon-property-detail::before                   { content: '\f1e5'; }
.button.icon.icon-property-message::before                  { content: '\f27a'; }
.button.icon.icon-property-print::before                    { content: '\f02f'; }
.button.icon.icon-property-offer::before                    { content: '\f4c0'; }
.button.icon.icon-property-call::before                     { content: '\f879'; }
.button.icon.icon-property-whatsapp::before                 { content: '\f232'; font-family: 'Font Awesome 6 Brands'; }
.button.icon.icon-property-video::before                    { content: '\f144'; }
.button.icon.icon-property-map::before                      { content: '\f3c5'; }
.button.icon.icon-sell-deed::before                         { content: '\f4d9'; }
.button.icon.icon-find-deed::before                         { content: '\f689'; }
.button.icon.icon-message::before                           { content: '\f27a'; }

.button.full-width
{
    width: 100%;    
}

.button.disabled
{
    pointer-events: none;
    cursor: default;
    
    opacity: 0.3;
    
    transition: opacity 0.25s ease;
}


/* 
COLOR SETTINGS
================================================== */
.button.icon::before                { border-right: 0.1rem solid var(--body-border-white); }
.button.icon.just-icon::before      { border-right: 0rem; }

.button,
.button:visited                     { color: var(--body-color-white); }
.button:hover                       { color: var(--body-color-white); }

.button                             { background-color: var(--custom-background); }
.button:hover                       { background-color: var(--custom-background-hover); }

.button.soft                        { color: var(--body-color); background-color: var(--body-sub-background); }
.button.soft:hover                  { color: var(--body-color-white); background-color: var(--custom-background-hover); }

.button.soft-blur                   { color: var(--body-color); background-color: var(--body-background-blur); backdrop-filter: blur(10px); }
.button.soft-blur:hover             { color: var(--body-color-white); background-color: var(--custom-background-hover); }

.button.blue                        { background-color: var(--color-blue); }
.button.blue:hover                  { background-color: var(--color-blue-hover); }

.button.soft-blue                   { color: var(--body-color); background-color: var(--body-sub-background); }
.button.soft-blue:hover             { color: var(--body-color-white); background-color: var(--color-blue-hover); }

.button.green                       { background-color: var(--color-green); }
.button.green:hover                 { background-color: var(--color-green-hover); }

.button.soft-green                  { color: var(--body-color); background-color: var(--body-sub-background); }
.button.soft-green:hover            { color: var(--body-color-white); background-color: var(--color-green-hover); }

.button.yellow                      { background-color: var(--color-yellow); }
.button.yellow:hover                { background-color: var(--color-yellow-hover); }

.button.soft-yellow                 { color: var(--body-color); background-color: var(--body-sub-background); }
.button.soft-yellow:hover           { color: var(--body-color-white); background-color: var(--color-yellow-hover); }

.button.red                         { background-color: var(--color-red); }
.button.red:hover                   { background-color: var(--color-red-hover); }

.button.soft-red                    { color: var(--body-color); background-color: var(--body-sub-background); }
.button.soft-red:hover              { color: var(--body-color-white); background-color: var(--color-red-hover); }

.button.grey                        { background-color: var(--color-grey); }
.button.grey:hover                  { background-color: var(--color-grey-hover); }

.button.soft-grey                   { color: var(--body-color); background-color: var(--body-sub-background); }
.button.soft-grey:hover             { color: var(--body-color-white); background-color: var(--color-grey-hover); }


/* 
SIZE SETTINGS
================================================== */
.button.small 			{ padding: 0rem var(--size-x0-5); }
.button.medium			{ padding: var(--size-x0-25) var(--size-x1); }
.button.big 			{ padding: var(--size-x0-5) var(--size-x1-5); }


/* ===============================================
PHOTOS GRID
================================================== */
.photos-grid
{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: var(--size-x0-25) !important;

    max-width: 740px;

    margin: auto;
}

.photos-grid-row
{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: var(--size-x0-25) !important;
}

.photos-grid-item
{
    position: relative;

    width: 100%;
    height: auto;
}

.photos-grid-item.item-1
{
    grid-column: span 1;
}

.photos-grid-item.item-2
{
    grid-column: span 2;
}

.photos-grid-item img
{
    display: inline-block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ===============================================
DIR-NAV
================================================== */
.dir-nav
{
    position: relative;
    float: left;

    z-index: 1000;

    width: 100%;
    
    margin: 0rem 0rem 0rem 0rem;
}

.dir-nav ul
{
    position: relative;
    float: left;

    margin: 0rem;
    padding: 0rem;

    list-style: none;
}

.dir-nav ul li 
{
    position: relative;
    float: left;

    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem;

    transition: background-color 0.25s ease;
}

.dir-nav > ul > li > a 
{
    font-size: var(--f6);
}

.dir-nav > ul > li.home > a::before
{
    content: '\f015';

    font-family: 'Font Awesome 6 Pro';
    font-weight: var(--fw-bold);
    line-height: inherit;
}

.dir-nav > ul > li.dir > a::before
{
    content: '.....';
}

/*
* span & span.icon -> property info currency convert nav
*/
.dir-nav > ul > li > span
{
    font-size: var(--f6);
}

.dir-nav > ul > li > span.icon::after
{
    content: '';
    
    margin: 0rem var(--size-x0-25) 0rem 0rem;
}

.dir-nav > ul > li > span.icon::before
{
    font-family: 'Font Awesome 6 Pro';
    font-weight: var(--fw-bold);
    line-height: inherit;
}

.dir-nav > ul > li > span.icon.icon-convert::before                     { content: '\f021'; }

.dir-nav > ul > li::after
{
    content: '\f105';

    left: var(--size-x0-5);

    margin: 0rem var(--size-x0-25);

    font-family: 'Font Awesome 6 Pro';
    font-size: var(--f6);
    line-height: inherit;    
}

.dir-nav > ul > li.menu::after
{
    content: '\7c';
}

.dir-nav > ul > li:last-child::after
{
    content: '';
    
    margin: 0rem 0rem;
}

.dir-nav ul ul 
{
    position: absolute;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;

    min-width: 100%;

    top: 100%;
    left: 0;
    margin: var(--size-x0-25) 0rem 0rem 0rem;
    padding: 0rem;

    border-radius: var(--border-radius);

    transition: all 0.25s ease;

    /*transform: translate3d(0rem, var(--size-x0-5), 0rem);*/
}

.dir-nav ul ul::before 
{
    position: absolute;
    opacity: 0;
    content: '123';

    top: calc(var(--size-x0-25) * -1);
    width: 100%;
    height: var(--size-x0-25);
}

.dir-nav li li 
{
    float: none;

    width: 26.0rem;
}

.dir-nav li li:first-child
{
    border-radius: var(--border-radius) var(--border-radius) 0rem 0rem;
}

.dir-nav li li:last-child
{
    border-radius: 0rem 0rem var(--border-radius) var(--border-radius);
}

.dir-nav li li a 
{
    display: block;
    padding: var(--size-x0-25) var(--size-x0-5) var(--size-x0-25) var(--size-x1-5);

    font-size: var(--f6);
    text-indent: calc(var(--size-x0-6) * -1);
    
    background-image: none;
}

.dir-nav li li a::before
{
    content: '\f105';

    left: var(--size-x0-5);
    padding-right: var(--size-x0-5);

    font-family: 'Font Awesome 6 Pro';
    line-height: inherit;
}

/*
.dir-nav ul li a::after 
{
    opacity: 0.5;
    content: '\f107';

    padding-left: var(--size-x0-25);

    font-family: 'Font Awesome 6 Pro';
    line-height: inherit;
}

.dir-nav ul li a:only-child::after 
{
    content: '';

    padding: 0;
}
*/

.dir-nav ul li:hover > ul 
{
    opacity: 1;
    visibility: visible;

    /*transform: translate3d(0, 0, 0);*/
}


/* 
COLOR SETTINGS
================================================== */
.dir-nav         li,
.dir-nav         li a,
.dir-nav         li a:visited                    { color: var(--body-color); }
.dir-nav         li a:hover                      { color: var(--custom-color); }

.dir-nav         > ul > li > span.icon           { color: var(--custom-color); }

.dir-nav         ul ul                           { background-color: var(--body-background-white); box-shadow: var(--body-shadow); }
.dir-nav         li li                           { border-bottom: var(--border-regular) solid var(--body-sub-border); }

.dir-nav         li li:hover                     { background-color: var(--body-sub-background); }

.dir-nav         li li a,
.dir-nav         li li a:visited                 { color: var(--body-color); }
.dir-nav         li li a:hover                   { color: var(--custom-color); }

.dir-nav         > ul > li:hover > a             { color: var(--custom-color); }

.dir-nav         li li:last-child 
{
    border-bottom: none;
}


/* 
CLEARING
================================================== */
.dir-nav::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
DIR-ICON
================================================== */
.dir-icon
{
    position: relative;
    float: left;

    z-index: 1000;

    margin: 0rem 0rem 0rem 0rem;
}

.dir-icon ul
{
    position: relative;
    float: left;
    
    width: inherit;

    margin: 0rem;
    padding: 0rem;

    list-style: none;
}

.dir-icon ul li
{
    position: relative;
    float: left;
    display: flex;

    margin: 0rem;
    padding: 0rem;
}

.dir-icon.lang-setting ul,
.dir-icon.lang-setting li
{
    width: 100%;
}

.dir-icon.lang-setting .dir-icon
{
    position: relative;
    float: left;

    margin-right: var(--size-x0-5);
}

.dir-icon > ul > li
{
    margin: 0rem 0rem 0rem var(--size-x0-5);
}

.dir-icon > ul > li:first-child
{
    margin: 0rem 0rem 0rem 0rem;
}

.dir-icon > ul > li.small-margin
{
    margin: 0rem 0rem 0rem var(--size-x0-25);
}

.dir-icon.lang-setting > ul > li
{
    margin: var(--size-x0-125) var(--size-x0-5) var(--size-x0-125) 0rem;
}

.dir-icon.contact > ul > li
{
    margin: 0rem var(--size-x1-5) 0rem 0rem;
}

.dir-icon ul li:last-child
{
    margin-right: 0rem;
}

.dir-icon ul li .icon
{
    display: block;

    min-width: var(--size-x1);
    height: var(--size-x1);

    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;

    justify-content: center;
    align-items: center;

    font-size: var(--f6);
    text-align: center;

    border-radius: var(--border-radius);

    transition: all 0.25s ease;
}    

.dir-icon.big ul li .icon
{
    width: var(--size-x1-5);
    height: var(--size-x1-5);
    
    padding: var(--size-x0-25) 0rem;

    font-size: var(--f5);
}

.dir-icon ul li .icon::before
{
    font-family: 'Font Awesome 6 Pro';
    font-size: var(--fs);
    line-height: inherit;
}

.dir-icon ul li .icon a
{
    position: relative;
    display: block;
    
    top: -100%;
    
    padding: 0rem 0rem;
    
    height: 100%;
    width: 100%;
    
    background-image: none;
}

.dir-icon ul li .icon.icon-flags a
{
    position: initial;
}

.dir-icon ul li .icon.icon-phone::before                    { content: '\f095'; }
.dir-icon ul li .icon.icon-fax::before                      { content: '\f1ac'; }
.dir-icon ul li .icon.icon-mobile::before                   { content: '\f10b'; }
.dir-icon ul li .icon.icon-whatsapp::before                 { content: '\f232'; font-family: 'Font Awesome 6 Brands'; }
.dir-icon ul li .icon.icon-email::before                    { content: '\f1d8'; }
.dir-icon ul li .icon.icon-address::before                  { content: '\f3c5'; }
.dir-icon ul li .icon.icon-share::before                    { content: '\f1e0'; }
.dir-icon ul li .icon.icon-print::before                    { content: '\f02f'; }
.dir-icon ul li .icon.icon-print-page::before               { content: '\f570'; }
.dir-icon ul li .icon.icon-print-vertical::before           { content: '\f2fb'; }
.dir-icon ul li .icon.icon-print-horizontal::before         { content: '\f2fa'; }
.dir-icon ul li .icon.icon-facebook::before                 { content: '\f082'; font-family: 'Font Awesome 6 Brands'; }
.dir-icon ul li .icon.icon-instagram::before                { content: '\f16d'; font-family: 'Font Awesome 6 Brands'; }
.dir-icon ul li .icon.icon-twitter::before                  { content: '\e61a'; font-family: 'Font Awesome 6 Brands'; }
.dir-icon ul li .icon.icon-youtube::before                  { content: '\f167'; font-family: 'Font Awesome 6 Brands'; }
.dir-icon ul li .icon.icon-pinterest::before                { content: '\f231'; font-family: 'Font Awesome 6 Brands'; }
.dir-icon ul li .icon.icon-linkedin::before                 { content: '\f08c'; font-family: 'Font Awesome 6 Brands'; }
.dir-icon ul li .icon.icon-facebook-messenger::before       { content: '\f39f'; font-family: 'Font Awesome 6 Brands'; }
.dir-icon ul li .icon.icon-whatsapp::before                 { content: '\f232'; font-family: 'Font Awesome 6 Brands'; }
.dir-icon ul li .icon.icon-sell-deed::before                { content: '\f4d9'; }
.dir-icon ul li .icon.icon-find-deed::before                { content: '\f689'; }
.dir-icon ul li .icon.icon-close::before                    { content: '\e59b'; }
.dir-icon ul li .icon.icon-login::before                    { content: '\f2f6'; }
.dir-icon ul li .icon.icon-buy::before                      { content: '\f107'; }
.dir-icon ul li .icon.icon-sell::before                     { content: '\f106'; }
.dir-icon ul li .icon.icon-usd::before                      { content: '\f155'; }
.dir-icon ul li .icon.icon-eur::before                      { content: '\f153'; }
.dir-icon ul li .icon.icon-gbp::before                      { content: '\f154'; }
.dir-icon ul li .icon.icon-zoom::before                     { content: '\f00e'; }
.dir-icon ul li .icon.icon-video::before                    { content: '\f144'; }

.dir-icon ul li .info
{
    flex: 1;
}

.dir-icon ul li .info span
{
    display: block;

    margin: 0rem 0rem 0rem var(--size-x0-25);
    padding: 0rem 0rem 0rem 0rem;

    font-size: var(--f6);
    font-weight: var(--fw-medium);

    transition: all 0.25s ease;
}

.dir-icon ul li .info.light span
{
    font-weight: var(--fw-regular);
}

.dir-icon ul ul 
{
    position: absolute;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;

    min-width: 100%;

    top: 100%;
    left: 0;
    margin: var(--size-x0-5) 0rem 0rem 0rem;
    padding: 0rem;

    transition: all 0.25s ease;

    /*transform: translate3d(0rem, var(--size-x0-5), 0rem);*/
}

.dir-icon ul ul::before 
{
    position: absolute;
    opacity: 0;
    content: '123';

    top: calc(var(--size-x0-5) * -1);
    width: 100%;
    height: 0.5rem;
}

.dir-icon li li 
{
    float: none;
}

.dir-icon li li a 
{
    display: block;
    padding: var(--size-x0-25) var(--size-x0-5) var(--size-x0-25) var(--size-x1-5);

    font-size: var(--f6);
    
    background-image: none;
}

.dir-icon ul li:hover > ul,
.dir-icon ul li:hover > balloon > ul
{
    opacity: 1;
    visibility: visible;

    /*transform: translate3d(0, 0, 0);*/
}


/* 
COLOR SETTINGS
================================================== */
.dir-icon      li li                                                { border-bottom: var(--border-regular) solid var(--body-sub-border); }
.dir-icon      li li:last-child                                     { border-bottom: none; }

.dir-icon      ul li            >              .icon,
.dir-icon      ul li            > balloon >    .icon                { background-color: var(--body-background-white); color: var(--body-color); box-shadow: var(--body-shadow); }
.dir-icon      ul li:hover      >              .icon,
.dir-icon      ul li:hover      > balloon >    .icon                { color: var(--custom-color); }

.dir-icon      ul li            .info 	        span                { color: var(--body-color); }
.dir-icon      ul li            .info 	        span a,
.dir-icon      ul li            .info 	        span a:visited      { color: var(--body-color); }
.dir-icon      ul li            .info 	        span a:hover        { color: var(--custom-color); }

.dir-icon      ul li            .info.title 	span                { color: var(--body-color-title); }
.dir-icon      ul li            .info.title 	span a,
.dir-icon      ul li            .info.title 	span a:visited      { color: var(--body-color-title); }
.dir-icon      ul li            .info.title 	span a:hover        { color: var(--custom-color); }

.dir-icon      ul li.inactive   .info 	        span                { color: var(--body-color-inactive); }
.dir-icon      ul li.inactive   .info.title 	span                { color: var(--body-color-inactive); }


/* 
LAYOUT FOR LARGE
================================================== */
@media only screen and (max-width: 1399px)
{
    
}


/* 
LAYOUT FOR TABLET
================================================== */
@media only screen and (max-width: 1224px)
{
    
}


/* 
LAYOUT FOR MOBILE
================================================== */
@media handheld, only screen and (max-width: 640px)
{

}


/*
CLEARING
================================================== */
.dir-icon::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
PAGE NUMBER
================================================== */
.pages 
{
    width: 100%;

    font-size: var(--f6);
    text-align: center;
}

.pages .info
{
    margin: 0rem 0rem var(--size-x0-5) 0rem;

    text-align: center;
    vertical-align: middle;
}

.pages a
{
    position: relative;
    display: inline-block;

    width: var(--size-x1-5);
    height: var(--size-x1-33);

    margin: 0rem var(--size-x0-125) var(--size-x0-5) var(--size-x0-125);

    font-weight: var(--fw-medium);
    text-align: center;
    vertical-align: middle;
    line-height: var(--size-x1-33);

    border-radius: var(--border-radius);
}

.pages a.current
{
    cursor: not-allowed;    
}

.pages a:first-child
{
    margin-left: 0rem;
}

.pages a:last-child
{
    margin-right: 0rem;
}

.pages a.icon::before
{
    font-family: 'Font Awesome 6 Pro';
    font-size: var(--f5);
    font-weight: var(--fw-bold);
    line-height: inherit;   
}

.pages a.icon.icon-back::before                     { content: '\f0a8'; }
.pages a.icon.icon-next::before                     { content: '\f0a9'; }
.pages a.icon.icon-dots::before                     { content: '\f141'; font-weight: var(--fw-regular); }

.pages a.icon.icon-dots
{
    cursor: default;
}

.pages a balloon
{
    position: absolute;
    float: left;
    
    top: 0rem;
    left: 0rem;
    
    width: 100%;
    height: 100%;
}


/*
COLOR SETTINGS
================================================== */
.pages .info             { color: var(--body-color-subtitle); }
.pages a,
.pages a:visited         { background-color: var(--body-sub-background); color: var(--body-color); }
.pages a:hover           { background-color: var(--custom-background-hover); color: var(--body-color-white); }

.pages a.dots            { background-color: var(--body-sub-background); color: var(--body-color); }

.pages a.current,
.pages a.current:hover   { background-color: var(--custom-background); color: var(--body-color-white); }


/* 
LAYOUT FOR LARGE
================================================== */
@media only screen and (max-width: 1399px)
{
    
}


/* 
LAYOUT FOR TABLET
================================================== */
@media only screen and (max-width: 1224px)
{

}


/* 
LAYOUT FOR MOBILE
================================================== */
@media handheld, only screen and (max-width: 640px)
{
    .pages a
    {
        display: none;
    }

    .pages a.back,
    .pages a.back-number,
    .pages a.current,
    .pages a.next-number,
    .pages a.next
    {
        display: inline-block;
    }
}


/* ===============================================
TOGGLE (activate in executor.js)
================================================== */
.toggle
{
    width: 100%;
    margin: 0rem 0rem var(--size-x1) 0rem;
}

.toggle > ul
{
    display: block;
    list-style: none;

    padding: 0rem;
    margin: 0rem;
}

.toggle > ul > li
{
    margin: 0rem 0rem var(--size-x0-5) 0rem;

    border-radius: var(--border-radius);
    
    transition: border 0.25s ease;
}

.toggle > ul > li:last-child
{
    margin: 0rem 0rem 0rem 0rem;
}

.toggle > ul > li > a
{
    display: block;

    padding: var(--size-x0-25) var(--size-x0-5) var(--size-x0-25) var(--size-x0-5);

    font-size: var(--f6);
    font-weight: var(--fw-medium);

    border-radius: var(--border-radius);
}

.toggle > ul > li > a:hover
{
    background-size: 0% 0.1rem;
}

.toggle > ul > li.active > a
{
    border-radius: var(--border-radius) var(--border-radius) 0rem 0rem;
}

.toggle > ul > li > a::before
{
    position: relative;
    float: right;
    right: 0;

    font-family: 'Font Awesome 6 Pro';
    font-size: var(--fs);
}

.toggle > ul > li >         a::before               { content: '\f13a'; }
.toggle > ul > li >         a:hover::before         { content: '\f13a'; }
.toggle > ul > li.active >  a::before               { content: '\f056'; }

.toggle > ul > li > div
{
    /* overflow: auto; */

    margin: var(--size-x0-5) 0rem;
    padding: 0rem var(--size-x0-5);

    /* max-height: 55.0rem; */
}

.toggle > ul > li > div p:last-child
{
    margin: 0rem 0rem 0rem 0rem;
}

.toggle > ul > li > div::-webkit-scrollbar
{
    width: 0.5rem;
}


/* 
COLOR SETTINGS
================================================== */
.toggle > ul > li                                             { background-color: var(--body-background-white); border: var(--border-regular) solid var(--body-sub-border); }

.toggle	> ul > li           > a,
.toggle	> ul > li           > a:visited                       { color: var(--body-color-title); }
.toggle	> ul > li           > a:hover                         { color: var(--body-color-title); background-color: var(--body-sub-background); }
.toggle	> ul > li.active    > a                               { color: var(--body-color-title); background-color: var(--body-sub-background); }

.toggle > ul > li > div::-webkit-scrollbar-track              { background-color: var(--body-scrollbar-background); }
.toggle > ul > li > div::-webkit-scrollbar-thumb              { background-color: var(--custom-background); }


/* 
CLEARING
================================================== */
.toggle::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
MESSAGE-BOX (activate in executor.js)
================================================== */
.message-box
{
    position: relative;
    float: left;
    display: grid;

    width: 100%;

    padding: var(--size-x0-5) var(--size-x1) var(--size-x0-5) var(--size-x0-5);
    margin: 0rem 0rem 0rem 0rem;

    border-radius: var(--border-radius);
}

.message-box strong
{
    padding: 0rem var(--size-x0-25) var(--size-x0-5) 0rem;

    font-size: var(--f5);
    text-transform: uppercase;
}

/*
.message-box strong::before
{
    display: inline-block;
    
    min-width: var(--size-x1);
    
    padding-right: var(--size-x0-5);

    font-family: 'Font Awesome 6 Pro';
    line-height: inherit;
}
*/

.message-box div
{
    padding: 0rem 0rem 0rem 0rem;

    font-size: var(--f6);
}

.message-box div hr
{
    margin: var(--size-x0-5) 0rem;
}

.message-box div p
{
    margin: 0rem 0rem var(--size-x0-125) 0rem;
}

.message-box div p:last-child
{
    margin: 0rem 0rem 0rem 0rem;
}

.message-box div.no-title
{
    padding: 0rem 0rem 0rem 0rem;
}

.message-box div ul
{
    margin: 0rem 0rem var(--size-x1) var(--size-x0-5);
}

.message-box div ul li
{
    margin-left: -15px;
    margin-bottom: var(--size-x0-3);

    font-size: var(--f6);
    line-height: var(--size-x0-75);
    list-style: none;
}

.message-box div ul li:last-child
{
    margin-bottom: 0rem;
}

.message-box .modal-close-button,
.message-box .modal-inner-close-button
{
    display: contents;
    background-size: 0% 0.1rem;
}

/*
.message-box            strong::before { content: '\f249'; }
.message-box.soft       strong::before { content: '\f4aa'; }
.message-box.info       strong::before { content: '\f05a'; }
.message-box.note       strong::before { content: '\f4aa'; }
.message-box.confirm    strong::before { content: '\f058'; }
.message-box.error      strong::before { content: '\f06a'; }
*/

.message-box .closemsg
{
    position: absolute;
    cursor: pointer;

    right: var(--size-x0-5);
    top: var(--size-x0-5);

    transition: all 0.25s ease;
}

.message-box .closemsg::before
{
    content: '\e59b';
    
    font-family: 'Font Awesome 6 Pro';
    font-size: var(--f5);
    line-height: inherit;
}


/* 
COLOR SETTINGS
================================================== */
.message-box.soft
{
    background-color: var(--message-box-soft-background);
    color: var(--message-box-soft-color);
    border: var(--border-regular) solid var(--message-box-soft-border);
}

.message-box.soft       hr                  { border-top: var(--border-regular) solid var(--message-box-soft-border); }

.message-box.soft	    .closemsg           { color: var(--message-box-soft-color); }
.message-box.soft	    .closemsg:hover     { color: var(--message-box-soft-color-hover); }

.message-box.soft	    .button             { color: var(--body-color-white); background-color: var(--message-box-soft-color); }
.message-box.soft	    .button:hover       { color: var(--body-color-white); background-color: var(--message-box-soft-color-hover); }

.message-box.info
{
    background-color: var(--message-box-info-background);
    color: var(--message-box-info-color);
    border: var(--border-regular) solid var(--message-box-info-border);
}

.message-box.info       hr                  { border-top: var(--border-regular) solid var(--message-box-info-border); }

.message-box.info	    .closemsg           { color: var(--message-box-info-color); }
.message-box.info	    .closemsg:hover     { color: var(--message-box-info-color-hover); }

.message-box.info	    .button             { color: var(--body-color-white); background-color: var(--message-box-info-color); }
.message-box.info	    .button:hover       { color: var(--body-color-white); background-color: var(--message-box-info-color-hover); }

.message-box.note
{
    background-color: var(--message-box-note-background);
    color: var(--message-box-note-color);
    border: var(--border-regular) solid var(--message-box-note-border);
}

.message-box.note       hr                  { border-top: var(--border-regular) solid var(--message-box-note-border); }

.message-box.note	    .closemsg           { color: var(--message-box-note-color); }
.message-box.note	    .closemsg:hover     { color: var(--message-box-note-color-hover); }

.message-box.note	    .button             { color: var(--body-color-white); background-color: var(--message-box-note-color); }
.message-box.note	    .button:hover       { color: var(--body-color-white); background-color: var(--message-box-note-color-hover); }

.message-box.confirm
{
    background-color: var(--message-box-confirm-background);
    color: var(--message-box-confirm-color);
    border: var(--border-regular) solid var(--message-box-confirm-border);
}

.message-box.confirm    hr                  { border-top: var(--border-regular) solid var(--message-box-confirm-border); }

.message-box.confirm	.closemsg           { color: var(--message-box-confirm-color); }
.message-box.confirm	.closemsg:hover     { color: var(--message-box-confirm-color-hover); }

.message-box.confirm	.button             { color: var(--body-color-white); background-color: var(--message-box-confirm-color); }
.message-box.confirm	.button:hover       { color: var(--body-color-white); background-color: var(--message-box-confirm-color-hover); }

.message-box.error
{
    background-color: var(--message-box-error-background);
    color: var(--message-box-error-color);
    border: var(--border-regular) solid var(--message-box-error-border);
}

.message-box.error      hr                  { border-top: var(--border-regular) solid var(--message-box-error-border); }

.message-box.error		.closemsg           { color: var(--message-box-error-color); }
.message-box.error		.closemsg:hover     { color: var(--message-box-error-color-hover); }

.message-box.error	    .button             { color: var(--body-color-white); background-color: var(--message-box-error-color); }
.message-box.error	    .button:hover       { color: var(--body-color-white); background-color: var(--message-box-error-color-hover); }


/* 
CLEARING
================================================== */
.message-box::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
NAVIGATION
================================================== */
.navigation 
{
    position: relative;
    float: left;

    z-index: 2000;

    margin: 0rem 0rem 0rem 0rem;
}

.navigation ul 
{
    position: relative;
    float: left;

    margin: 0rem;
    padding: 0rem;

    list-style: none;
}

.navigation ul li 
{
    position: relative;
    float: left;

    margin: 0rem;
    padding: 0rem;

    transition: background-color 0.25s ease;
}

.navigation > ul > li
{
    margin-left: var(--size-x1);
}

.navigation > ul > li:first-child
{
    margin-left: 0rem;
}

.navigation ul ul 
{
    position: absolute;

    visibility: hidden;
    opacity: 0;

    top: 100%;
    left: calc(-1 * var(--size-x0-5));

    margin: var(--size-x0-25) 0rem 0rem 0rem;

    border-radius: var(--border-radius);

    transition: all 0.25s ease;

    /*transform: translate3d(0rem, var(--size-x0-5), 0rem);*/
}

.navigation ul li:hover > ul 
{
    visibility: visible;
    opacity: 1;

    /*transform: translate3d(0, 0, 0);*/
}

.navigation ul ul::before 
{
    position: absolute;

    opacity: 0;
    content: '123';

    top: calc(var(--size-x0-25) * -1);

    width: 100%;
    height: var(--size-x0-25);
}

.navigation ul ul::after 
{
    position: absolute;

    opacity: 0;
    content: '123';

    top: calc(var(--size-x0-25) * -1);

    width: 100%;
    height: var(--size-x0-25);
}

.navigation li li 
{
    float: none;

    width: 26.0rem;
}

.navigation li li:first-child
{
    border-radius: var(--border-radius) var(--border-radius) 0rem 0rem;
}

.navigation li li:last-child
{
    border-radius: 0rem 0rem var(--border-radius) var(--border-radius);
}

.navigation li li ul 
{
    top: 0;
    left: 100%;

    margin: 0rem 0rem 0rem var(--size-x0-25);
}

.navigation li li ul::after 
{
    position: absolute;

    opacity: 0;
    content: '';

    left: calc(var(--size-x0-25) * -1);
    top: 0;

    width: var(--size-x0-25);
    height: 100%;
}

.navigation li li ul div.scroll 
{
    position: relative;
    float: left;
    
    overflow-y: auto;
    overflow-x: hidden;
    
    max-height: 48.30rem;

    margin: 0rem;
    padding: 0rem;
}

.navigation li li ul div.scroll::-webkit-scrollbar
{
    width: 0.5rem;
}

.navigation li li li li ul
{
    display: none;
}

.navigation > ul > li > a
{
    display: block;

    padding: var(--size-x0-25) 0rem;

    font-size: var(--f5);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    
    background-image: none;
}

.navigation > ul > li > a::after
{
    opacity: 0.5;
}

.navigation ul li > a::after
{
    content: '\f107';

    padding-left: var(--size-x0-25);

    font-family: 'Font Awesome 6 Pro';
    line-height: inherit;
}

.navigation ul li > a:only-child::after 
{
    content: '';

    padding: 0;
}

.navigation li li > a 
{
    display: block;

    padding: var(--size-x0-25) var(--size-x1) var(--size-x0-25) var(--size-x0-5);

    font-size: var(--f6);
    
    background-image: none;
}

.navigation li li > a::after 
{
    position: absolute;

    content: '\f105';
    
    right: var(--size-x0-5);
    
    margin: 0rem;
    
    line-height: inherit;
}

.navigation li i.total
{
    position: relative;
    float: right;

    margin: 0rem 0rem 0rem var(--size-x0-25);
    padding: 0rem var(--size-x0-25) 0rem var(--size-x0-25);
    
    font-size: var(--f6);
    line-height: inherit;
    font-style: normal;

    border-radius: var(--border-radius);
}

.navigation i.flag-icon
{
    margin-right: var(--size-x0-25);
}


/* 
COLOR SETTINGS
================================================== */
.navigation         ul > li > a,
.navigation         ul > li > a:visited         { color: var(--body-color-title); }
.navigation         ul ul                       { background-color: var(--body-background-white); box-shadow: var(--body-shadow); }
.navigation         li li                       { border-bottom: var(--border-regular) solid var(--body-sub-border); }
.navigation         li li > a,
.navigation         li li > a:visited           { color: var(--body-color); }
.navigation         li li:hover                 { background-color: var(--body-sub-background); color: var(--custom-color); }
.navigation         li li:hover > a             { color: var(--custom-color); }
.navigation         > ul > li:hover             { color: var(--custom-color); }
.navigation         > ul > li:hover > a         { color: var(--custom-color); }

.navigation         li i.total                  { background-color: var(--body-sub-background-hover); color: var(--custom-color); }

.navigation         li li:last-child 
{
    border-bottom: none;
}

.navigation         li li ul div.scroll::-webkit-scrollbar-track          { background-color: var(--body-scrollbar-background); }
.navigation         li li ul div.scroll::-webkit-scrollbar-thumb          { background-color: var(--custom-background); }


/* 
RESPONSIVE SETTINGS
================================================== */
@media handheld, only screen and (max-width: 1399px)
{
    
}       


/* 
CLEARING
================================================== */
.navigation::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
NAVIGATION-BUTTON
================================================== */
.navigation-button 
{
    position: relative;
    float: right;
    
    margin: var(--size-x0-25) 0rem var(--size-x0-25) 0rem;
}

.navigation-button ul 
{
    display: block;

    margin: 0rem;
    padding: 0rem;

    list-style: none;
}

.navigation-button ul li 
{
    margin: 0rem;
    padding: 0rem;
}

.navigation-button ul li a
{
    display: flex;
    justify-content: center;

    width: var(--size-x1-5);
    height: var(--size-x1-5);
    
    margin: 0rem 0rem;
    padding: var(--size-x0-25) var(--size-x0-25);

    font-size: var(--f3);
    font-weight: var(--fw-medium);
    text-align: center;
    
    background-image: none;

    border-radius: var(--border-radius);
}

.navigation-button ul li a::before
{
    content: '\f0c9';

    font-family: 'Font Awesome 6 Pro';
    line-height: inherit;
}

.navigation-button ul li a.open::before                 { content: '\f0c9'; }
.navigation-button ul li a.close::before                { content: '\f00d'; }


/* 
COLOR SETTINGS
================================================== */
.navigation-button         ul li a,
.navigation-button         ul li a:visited      { color: var(--body-color-title); }
.navigation-button.active  ul li a,
.navigation-button         ul li a:hover        { background-color: var(--body-sub-background-hover); }


/* 
CLEARING
================================================== */
.navigation-button::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
NAVIGATION-MOBILE
================================================== */
.navigation-mobile
{
    z-index: 2000;

    width: 100%;

    margin: 0rem 0rem 0rem 0rem;
}

.navigation-mobile ul 
{
    position: relative;
    float: left;

    width: 100%;

    margin: 0rem;
    padding: 0rem;

    list-style: none;
}

.navigation-mobile ul li
{
    position: relative;
    float: left;

    width: 100%;

    margin: 0rem;
    padding: 0rem;
}

.navigation-mobile > ul > li:first-child
{
    margin-top: var(--size-x0-5);
}

.navigation-mobile > ul > li:last-child
{
    margin-bottom: var(--size-x0-5);
}

.navigation-mobile li li
{
    margin: 0rem 0rem 0rem 0rem;
}

.navigation-mobile li li ul 
{
    overflow: auto;
    
    max-height: 37.0rem;
}

.navigation-mobile li li ul::-webkit-scrollbar
{
    width: 0.5rem;
}

.navigation-mobile > ul > li > a
{
    display: block;

    padding: var(--size-x0-25) var(--size-x1-5) var(--size-x0-25) var(--size-x0-5);
    
    font-size: var(--f5);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    
    background-image: none;
}

.navigation-mobile li li > a
{
    display: block;

    margin: 0rem;
    padding: var(--size-x0-25) var(--size-x1-5) var(--size-x0-25) var(--size-x0-5);

    font-size: var(--f6);
    
    background-image: none;
}

.navigation-mobile ul li > a::before
{
    padding-right: var(--size-x0-5);

    font-family: 'Font Awesome 6 Pro';
    line-height: inherit;
}

.navigation-mobile li li li li > a
{
    padding-top: 0rem;
    padding-bottom: 0rem;
    
    font-size: var(--f6);
}

.navigation-mobile li li > a::before                    { content: '\f105'; }
.navigation-mobile li li li > a::before                 { content: '\f105'; }
.navigation-mobile li li li li > a::before              { content: '\f068'; }

.navigation-mobile li i.total
{
    margin: 0rem 0rem 0rem var(--size-x0-25);
    padding: var(--size-x0-125) var(--size-x0-25);

    font-size: var(--f6);
    line-height: inherit;
    font-style: normal;

    border-radius: var(--border-radius);
}

.navigation-mobile ul li > span
{
    position: absolute;
    display: block;

    top: 0rem;
    right: 0rem;

    margin: 0rem;
    padding: 0rem;
}

.navigation-mobile ul li > span a
{
    display: flex;
    justify-content: center;

    min-width: var(--size-x1-5);

    padding: var(--size-x0-25) var(--size-x0-25);
    margin: 0rem 0rem;

    text-align: center;
    
    background-image: none;
}

.navigation-mobile ul ul ul li > span
{
    display: none;
}

.navigation-mobile > ul > li > span a
{
    padding: var(--size-x0-25) var(--size-x0-25);
}

.navigation-mobile ul li > span a::before
{
    content: '\f13a';
    
    font-family: 'Font Awesome 6 Pro';
    line-height: inherit;
}

.navigation-mobile ul li > span.plus a::before                  { content: '\f13a'; }
.navigation-mobile ul li > span.minus a::before                 { content: '\f056'; }

.navigation-mobile i.flag-icon
{
    margin-right: var(--size-x0-25);
}

.navigation-mobile > ul > li.property-cat > a { text-indent: 2.5rem; }

.navigation-mobile ul li > a              {                                              font-weight: var(--fw-medium); }
.navigation-mobile li li > a              { padding-left: 4.0rem;  text-indent: -2.0rem; font-weight: var(--fw-regular); }
.navigation-mobile li li li > a           { padding-left: 6.0rem;  text-indent: -2.0rem; }
.navigation-mobile li li li li > a        { padding-left: 8.0rem;  text-indent: -2.0rem; }


/*
COLOR SETTINGS
================================================== */
.navigation-mobile         > ul > li >                    a,
.navigation-mobile         > ul > li >                    a:visited         { background-color: var(--body-background-white); color: var(--body-color-title); }

.navigation-mobile         > ul > li:first-child                            { border-top: var(--border-regular) solid var(--body-sub-border); }
.navigation-mobile         > ul > li:last-child                             { border-bottom: var(--border-regular) solid var(--body-sub-border); }

.navigation-mobile         > ul > li:hover >              a,
.navigation-mobile         > ul > li.active >             a                 { background-color: var(--body-sub-background); color: var(--body-color-title); }

.navigation-mobile:hover   li li.active >                 a,
.navigation-mobile         li li >                        a,
.navigation-mobile         li li >                        a:visited         { background-color: var(--body-background-white); color: var(--body-color); }

.navigation-mobile         li li:hover >                  a,
.navigation-mobile         li li.active:hover >           a,
.navigation-mobile         li li.active >                 a                 { background-color: var(--body-sub-background); color: var(--body-color); }

.navigation-mobile         li                                               { border-bottom: var(--border-regular) solid var(--body-sub-border); }
.navigation-mobile         li:last-child                                    { border-bottom: 0rem; }

.navigation-mobile         li li:first-child                                { border-top: var(--border-regular) solid var(--body-sub-border); }

.navigation-mobile         li i.total                                       { background-color: var(--body-sub-background-hover); color: var(--custom-color); }

.navigation-mobile         > ul > li >            span    a,
.navigation-mobile         > ul > li >            span    a:visited         { background-color: var(--body-sub-background-active); color: var(--body-color-title); border-left: var(--border-regular) solid var(--body-border-white); }

.navigation-mobile         > ul > li:hover >      span    a,
.navigation-mobile         > ul > li.active >     span    a                 { background-color: var(--body-sub-background); color: var(--body-color-title); }

.navigation-mobile         > ul > li >            span    a:hover           { background-color: var(--body-sub-background-hover); color: var(--body-color-title); }

.navigation-mobile:hover   li li.active >         span    a,
.navigation-mobile         li li >                span    a,
.navigation-mobile         li li >                span    a:visited         { background-color: var(--body-sub-background-active); color: var(--body-color); border-left: var(--border-regular) solid var(--body-border-white); }

.navigation-mobile         li li:hover >          span    a,
.navigation-mobile         li li.active:hover >   span    a,
.navigation-mobile         li li.active >         span    a                 { background-color: var(--body-sub-background); color: var(--body-color); }

.navigation-mobile         li li >                span    a:hover,
.navigation-mobile         li li.active >         span    a:hover           { background-color: var(--body-sub-background-hover); color: var(--body-color); }

.navigation-mobile         li li ul::-webkit-scrollbar-track                { background-color: var(--body-scrollbar-background); }
.navigation-mobile         li li ul::-webkit-scrollbar-thumb                { background-color: var(--custom-background); }


/* ===============================================
NAVIGATION-SIDE
================================================== */
.navigation-side
{
    position: relative;
    float: left;

    width: 100%;

    margin: 0rem 0rem var(--size-x1) 0rem;
}

.navigation-side .nav-section
{
    position: relative;
    float: left;

    width: 100%;

    margin: var(--size-x0-5) 0rem 0rem 0rem;
    padding: 0rem;

    border-radius: var(--border-radius);
}

.navigation-side .nav-section.empty-space
{
    position: relative;
    float: left;

    width: 100%;

    margin: 0rem 0rem var(--size-x0-5) 0rem;
    padding: 0rem;
}

.navigation-side .nav-section:first-child
{
    margin: 0rem;
}

.navigation-side .nav-section .section
{
    position: relative;
    float: left;

    width: 100%;

    margin: 0rem;
    padding: 0rem;
}

.navigation-side .nav-section .section > a
{
    display: block;

    /*cursor: auto;*/

    margin: 0rem;
    padding: var(--size-x0-25) var(--size-x0-5) var(--size-x0-25) var(--size-x0-5);
    
    font-weight: var(--fw-medium);
    
    background-image: none;
}

.navigation-side .nav-section .section > a::before
{
    position: relative;
    float: right;
    right: 0;
    content: '\f13a';
    
    font-family: 'Font Awesome 6 Pro';
}

.navigation-side .nav-section .section.active > a::before                   { content: '\f056'; }

.navigation-side .nav-section .line
{
    position: relative;
    float: left;

    width: 100%;

    padding: 0rem var(--size-x0-5);
}

.navigation-side .nav-section .line span
{
    position: relative;
    float: left;

    width: 100%;
}

.navigation-side .nav-section .option
{
    position: relative;
    float: left;

    overflow: hidden;

    width: 100%;

    margin: var(--size-x0-25) 0rem;
    padding: 0rem;
}

.navigation-side .nav-section .option.no-margin
{
    margin: 0rem 0rem;
}

.navigation-side .nav-section .option .content
{
    display: inline-grid;
    overflow: auto;

    width: 100%;

    margin: var(--size-x0-25) 0rem;
    padding: 0rem var(--size-x0-5);
}

.navigation-side .nav-section .option .content::-webkit-scrollbar
{
    width: 0.5rem;
}

.navigation-side .nav-section .option .content input[type="text"],
.navigation-side .nav-section .option .content input[type="number"],
.navigation-side .nav-section .option .content select
{
    display: block;

    width: 100%;
}

.navigation-side .nav-section .option .content label
{
    display: block;

    width: 100%;

    padding: 0.4rem 0rem;
    
    font-size: var(--f6);
}

.navigation-side .nav-section .option .content label:hover
{
    cursor: pointer;
}

.navigation-side .nav-section .option .content label.main
{
    padding-left: 0.2rem;

    font-size: var(--f5);
}

.navigation-side .nav-section .option .content label.child
{
    padding-left: 2.4rem;
}

.navigation-side .nav-section .option .content label.main a,
.navigation-side .nav-section .option .content label.child a
{
    padding-left: 2.0rem;

    text-indent: -2.2rem;
}

.navigation-side .nav-section .option .content label a
{
    position: relative;
    display: block;

    padding-bottom: 0rem;
    
    font-weight: var(--fw-medium);

    background-image: none;
}

.navigation-side .nav-section .option .content label a::before
{
    padding-right: var(--size-x0-5);

    font-family: 'Font Awesome 6 Pro';
    font-size: var(--f5);
    line-height: inherit;
}

.navigation-side .nav-section .option .content label.main a::before                { content: '\f105'; }
.navigation-side .nav-section .option .content label.child a::before               { content: '\f105'; }

.navigation-side .nav-button
{
    position: relative;
    float: left;
    
    z-index: 2;
    
    bottom: auto;

    width: 100%;

    margin: var(--size-x0-5) 0rem 0rem 0rem;
    padding: var(--size-x0-5) var(--size-x0-5);
}


/* 
COLOR SETTINGS
================================================== */
.navigation-side    .nav-section                                                                    { background-color: var(--body-background-white); border: var(--border-regular) solid var(--body-border); }
.navigation-side    .nav-section       .section >                    a,
.navigation-side    .nav-section       .section >                    a:visited                      { background-color: var(--body-sub-background); color: var(--body-color-title); }
.navigation-side    .nav-section:hover .section >                    a,
.navigation-side    .nav-section       .section:hover >              a                              { background-color: var(--body-sub-background); color: var(--body-color-title); }

.navigation-side    .nav-section       .line                   span                                 { border-bottom: var(--border-regular) solid var(--body-sub-border); }

.navigation-side    .nav-section       .option .content        label                                { color: var(--body-color); border-bottom: var(--border-regular) solid var(--body-sub-border); }
.navigation-side    .nav-section       .option .content        label:hover                          { color: var(--custom-color); background-color: var(--body-sub-background-active); }
.navigation-side    .nav-section       .option .content        label:last-child                     { border-bottom: none; }

.navigation-side    .nav-section       .option .content        label a,
.navigation-side    .nav-section       .option .content        label a:visited                      { color: var(--body-color); }
.navigation-side    .nav-section       .option .content        label a:hover                        { color: var(--custom-color); }

.navigation-side    .nav-section       .option .content        label.main.active a,
.navigation-side    .nav-section       .option .content        label.child.active a                 { color: var(--custom-color); }

.navigation-side    .nav-section       .option .content::-webkit-scrollbar-track                    { background-color: var(--body-scrollbar-background); }
.navigation-side    .nav-section       .option .content::-webkit-scrollbar-thumb                    { background-color: var(--custom-background); }

.navigation-side    .nav-button                                                                     { background-color: var(--body-sub-background); border: var(--border-regular) solid var(--body-sub-border); }


/* ===============================================
NAVIGATION MINI
================================================== */
.navigation-mini 
{
    position: relative;
    float: left;

    z-index: 2500;

    margin: 0rem 0rem 0rem 0rem;
}

.navigation-mini ul
{
    position: relative;
    float: left;

    width: max-content;

    margin: 0rem;
    padding: 0rem;

    list-style: none;
}

.navigation-mini ul li
{
    position: relative;
    float: left;

    width: initial;

    margin: 0rem;
    padding: 0rem;

    transition: background-color 0.25s ease;
}

.navigation-mini > ul > li
{
    margin-left: var(--size-x0-5);
}

.navigation-mini > ul > li:first-child
{
    margin-left: 0rem;
}

.navigation-mini ul ul 
{
    position: absolute;

    visibility: hidden;
    opacity: 0;

    top: 100%;
    left: calc(var(--size-x0-25) * -1);

    margin: var(--size-x0-25) 0rem 0rem 0rem;

    border-radius: var(--border-radius);

    transition: all 0.25s ease;

    /*transform: translate3d(0rem, var(--size-x0-5), 0rem);*/
}

.navigation-mini ul ul.open-up
{
    bottom: 100%;
}

.navigation-mini ul li:hover > ul 
{
    visibility: visible;
    opacity: 1;

    /*transform: translate3d(0, 0, 0);*/
}

.navigation-mini ul ul::before 
{
    position: absolute;

    opacity: 0;
    content: '123';

    top: calc(var(--size-x0-25) * -1);

    width: 100%;
    height: var(--size-x0-25);
}

.navigation-mini ul ul::after 
{
    position: absolute;

    opacity: 0;
    content: '123';

    top: calc(var(--size-x0-25) * -1);

    width: 100%;
    height: var(--size-x0-25);
}

.navigation-mini li li 
{
    float: none;
    display: flex;
}

.navigation-mini li li:first-child
{
    border-radius: var(--border-radius) var(--border-radius) 0rem 0rem;
}

.navigation-mini li li:last-child
{
    border-radius: 0rem 0rem var(--border-radius) var(--border-radius);
}


.navigation-mini > ul > li > a
{
    display: inline-block;

    padding: 0rem 0rem;

    font-size: var(--f6);
    font-weight: var(--fw-regular);
    
    background-image: none;
}

.navigation-mini > ul > li > a::after
{
    opacity: 0.5;
}

.navigation-mini ul li > a::after
{
    content: '\f107';

    padding-left: var(--size-x0-25);

    font-family: 'Font Awesome 6 Pro';
    line-height: inherit;
}

.navigation-mini ul li > a:only-child::after 
{
    content: '';

    padding: 0;
}

.navigation-mini li li > a 
{
    display: block;

    padding: var(--size-x0-25) var(--size-x1) var(--size-x0-25) 0rem;

    font-size: var(--f6);
    
    background-image: none;
}

.navigation-mini li li > a::after 
{
    content: '';

    padding: 0;
}

.navigation-mini li span
{
    position: relative;
    float: left;

    width: var(--size-x1);
    height: var(--size-x1);

    margin: auto var(--size-x0-25) auto 0rem;
    padding: 0rem 0rem;
    
    font-size: var(--f6);
    line-height: inherit;
    font-style: normal;
    text-align: center;

    border-radius: var(--border-radius);
}

.navigation-mini li li span
{
    margin-left: var(--size-x0-25);
}

.navigation-mini li span.icon::before
{
    display: inherit;

    font-family: 'Font Awesome 6 Pro';
    font-size: var(--fs);
    font-weight: var(--fw-medium);
    line-height: inherit;
}

.navigation-mini li span.icon.phone::before                 { content: '\f095'; }
.navigation-mini li span.icon.mobile::before                { content: '\f3ce'; }
.navigation-mini li span.icon.whatsapp::before              { content: '\f232'; font-family: 'Font Awesome 6 Brands'; }
.navigation-mini li span.icon.currency-convert::before      { content: '\f2f1'; }
.navigation-mini li span.icon.try::before                   { content: '\e2bb'; }
.navigation-mini li span.icon.usd::before                   { content: '\24'; }
.navigation-mini li span.icon.eur::before                   { content: '\f153'; }
.navigation-mini li span.icon.gbp::before                   { content: '\f154'; }


/* 
COLOR SETTINGS
================================================== */
.navigation-mini         ul > li > a,
.navigation-mini         ul > li > a:visited         { color: var(--body-color-title); }
.navigation-mini         ul ul                       { background-color: var(--body-background-white); box-shadow: var(--body-shadow); }
.navigation-mini         li li                       { border-bottom: var(--border-regular) solid var(--body-sub-border); }
.navigation-mini         li li > a,
.navigation-mini         li li > a:visited           { color: var(--body-color); }
.navigation-mini         li li:hover                 { background-color: var(--body-sub-background); color: var(--custom-color); }
.navigation-mini         li li:hover > a             { color: var(--custom-color); }
.navigation-mini         > ul > li:hover             { color: var(--custom-color); }
.navigation-mini         > ul > li:hover > a         { color: var(--custom-color); }

.navigation-mini         li i.total                  { background-color: var(--body-sub-background-hover); color: var(--custom-color); }

.navigation-mini         li li:last-child 
{
    border-bottom: none;
}

.navigation-mini         li             a > span     { background-color: var(--body-background-white); color: var(--body-color); }
.navigation-mini         li:hover >     a > span     { color: var(--custom-color); }
.navigation-mini         li li          a > span     { box-shadow: none; }


/* 
RESPONSIVE SETTINGS
================================================== */
@media handheld, only screen and (max-width: 1399px)
{
    
}       


/* 
CLEARING
================================================== */
.navigation-mini::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
CONTACT MENU
================================================== */
.contact-fixed 
{
    position: fixed;
    display: none;

    bottom: var(--size-x6);
    right: var(--size-x0-3);

    z-index: 10000;
}

.contact-menu 
{
    position: relative;
    float: left;

    z-index: 2500;

    margin: 0rem 0rem 0rem 0rem;
}

.contact-menu ul 
{
    position: relative;
    float: left;

    width: max-content;

    margin: 0rem;
    padding: 0rem;

    list-style: none;
}

.contact-menu ul li 
{
    display: grid;

    width: initial;

    margin: 0rem;
    padding: 0rem;

    transition: background-color 0.25s ease;
}

.contact-menu > ul > li
{
    position: relative;

    margin-top: var(--size-x0-25);
}

.contact-menu > ul > li:first-child
{
    margin-top: 0rem;
}

.contact-menu ul ul 
{
    position: absolute;

    visibility: hidden;
    opacity: 0;

    bottom: 0;
    right: 100%;

    margin: var(--size-x0-25) 0rem 0rem 0rem;

    border-radius: var(--border-radius);

    transition: all 0.25s ease;
}

.contact-menu ul ul.open-up
{
    bottom: 100%;
}

.contact-menu ul li:hover > ul 
{
    visibility: visible;
    opacity: 1;
}

.contact-menu ul ul::before 
{
    position: absolute;

    opacity: 0;
    content: '123';

    top: calc(var(--size-x0-25) * -1);

    width: 100%;
    height: var(--size-x0-25);
}

.contact-menu ul ul::after 
{
    position: absolute;

    opacity: 0;
    content: '123';

    top: calc(var(--size-x0-25) * -1);

    width: 100%;
    height: var(--size-x0-25);
}

.contact-menu li li 
{
    float: none;
    display: flex;
}

.contact-menu li li:first-child
{
    border-radius: var(--border-radius) var(--border-radius) 0rem 0rem;
}

.contact-menu li li:last-child
{
    border-radius: 0rem 0rem var(--border-radius) var(--border-radius);
}


.contact-menu > ul > li > a
{
    display: inline-block;

    padding: 0rem 0rem;

    font-size: var(--f6);
    font-weight: var(--fw-regular);
    
    background-image: none;
}

.contact-menu li li > a 
{
    display: block;

    padding: var(--size-x0-25) var(--size-x1) var(--size-x0-25) 0rem;

    font-size: var(--f6);
    
    background-image: none;
}

.contact-menu li span
{
    position: relative;
    float: left;

    width: var(--size-x1);
    height: var(--size-x1);

    margin: auto var(--size-x0-25) auto var(--size-x0-25);
    padding: 0rem 0rem;
    
    font-size: var(--f6);
    line-height: inherit;
    font-style: normal;
    text-align: center;

    border-radius: var(--border-radius);
}

.contact-menu > ul > li > a > span
{
    width: var(--size-x1-5);
    height: auto;
    
    margin: auto 0rem auto var(--size-x0-25);
    padding: var(--size-x0-25) 0rem;

    font-size: var(--f5);
}

.contact-menu li li span
{
    margin-left: var(--size-x0-25);
}

.contact-menu li span.icon::before
{
    display: inherit;

    font-family: 'Font Awesome 6 Pro';
    font-weight: var(--fw-medium);
    line-height: inherit;
}

.contact-menu li span.icon.phone::before                 { content: '\f095'; }
.contact-menu li span.icon.mobile::before                { content: '\f3ce'; }
.contact-menu li span.icon.whatsapp::before              { content: '\f232'; font-family: 'Font Awesome 6 Brands'; }

/* WhatsApp Sonar Efekt - Mevcut CSS'e Ekleme */
.contact-menu li.whatsapp > a > span
{
    position: relative;
}

.contact-menu li.whatsapp > a > span::after
{
    content: '';
    position: absolute;
    z-index: -2;
    opacity: 0.4;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;
    height: 100%;

    background-color: var(--color-whatsapp);
    border-radius: var(--border-radius);
    animation: whatsapp-sonar 2s infinite 0.5s;
}

@keyframes whatsapp-sonar
{
    0%
    {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    50%
    {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.3;
    }
    100%
    {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
    }
}

/* Hover'da animasyonu durdur */
.contact-menu li.whatsapp:hover > a > span::after
{
    animation: none;
}

/* 
COLOR SETTINGS
================================================== */
.contact-menu         ul > li > a,
.contact-menu         ul > li > a:visited               { color: var(--body-color-title); }
.contact-menu         ul ul                             { background-color: var(--body-background-white); box-shadow: var(--body-shadow); }
.contact-menu         li li                             { border-bottom: var(--border-regular) solid var(--body-sub-border); }
.contact-menu         li li > a,
.contact-menu         li li > a:visited                 { color: var(--body-color); }
.contact-menu         li li:hover                       { background-color: var(--body-sub-background); color: var(--custom-color); }
.contact-menu         li li:hover > a                   { color: var(--custom-color); }
.contact-menu         > ul > li:hover                   { color: var(--custom-color); }
.contact-menu         > ul > li:hover > a               { color: var(--custom-color); }

.contact-menu         li li:last-child 
{
    border-bottom: none;
}

.contact-menu         li             a > span           { background-color: var(--custom-background); color: var(--body-color-white); box-shadow: var(--body-shadow); }
.contact-menu         li:hover >     a > span           { background-color: var(--custom-background-hover); color: var(--body-color-white); }
.contact-menu         li li          a > span           { box-shadow: none; }

.contact-menu         li.whatsapp             a > span  { background-color: var(--color-whatsapp); color: var(--body-color-white); box-shadow: var(--body-shadow); }
.contact-menu         li.whatsapp:hover >     a > span  { background-color: var(--color-whatsapp-hover); color: var(--body-color-white); }
.contact-menu         li.whatsapp li          a > span  { box-shadow: none; }


/* 
RESPONSIVE SETTINGS
================================================== */
@media handheld, only screen and (max-width: 1399px)
{
    
}       


/* 
CLEARING
================================================== */
.contact-menu::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
MENU BUTTON
================================================== */
.menu-button
{
    margin: 0rem 0rem var(--size-x0-5) 0rem;
}

.menu-button ul 
{
    display: inline-block;

    width: 100%;

    margin: 0rem;
    padding: 0rem;

    list-style: none;
}

.menu-button ul li
{
    position: relative;
    float: left;

    width: 100%;

    margin: 0rem;
    padding: 0rem;
}

.menu-button > ul > li
{
    margin: 0rem 0rem var(--size-x0-5) 0rem;
}

.menu-button > ul > li > a
{
    display: inline-block;

    width: 100%;
    max-height: var(--size-x1-33);

    padding: 0rem var(--size-x0-5);
    margin: 0rem;
    
    font-size: var(--f6);
    font-weight: var(--fw-medium);
    line-height: var(--size-x1-33);
    text-align: left;
    vertical-align: middle;
    text-transform: uppercase;
    
    background-image: none;

    border-radius: var(--border-radius);
}

.menu-button ul li > a::before
{
    display: inherit;

    margin-right: var(--size-x0-5);
    padding-right: var(--size-x0-5);
    
    font-family: 'Font Awesome 6 Pro';
    font-weight: var(--fw-bold);
    line-height: inherit; 
}

.menu-button > ul > li > a::before              { content: '\f0c9'; }


/* 
COLOR SETTINGS
================================================== */
.menu-button         > ul > li >                a::before       { border-right: 0.1rem solid var(--body-border); }
.menu-button         > ul > li >                a,
.menu-button         > ul > li >                a:visited       { background-color: var(--body-sub-background); color: var(--body-color-title); }
.menu-button         > ul > li:hover >          a               { background-color: var(--body-sub-background-hover); }


/* ===============================================
MENU LIST
================================================== */
.menu-list
{
    width: 100%;
}

.menu-list ul
{
    position: relative;
    float: left;

    width: 100%;

    margin: 0rem;
    padding: 0rem;

    list-style: none;
}

.menu-list ul li
{
    position: relative;
    float: left;
    display: flex;

    width: 100%;

    margin: 0.25rem 0rem;
    padding: 0rem;
}

.menu-list ul li .icon
{
    display: grid;

    margin: 0rem var(--size-x0-5) 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;

    height: var(--size-x1);

    justify-content: center;
    align-items: center;

    font-size: var(--f6);

    transition: all 0.25s ease;
}

.menu-list ul li .icon::before
{
    font-family: 'Font Awesome 6 Pro';
    line-height: inherit;
}

.menu-list ul li .icon.icon-arrow::before               { content: '\f178'; }

.menu-list ul li .info
{
    flex: 1;
}

.menu-list ul li .info span
{
    display: block;

    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
}

.menu-list ul li .info span h1,
.menu-list ul li .info span h2,
.menu-list ul li .info span h3,
.menu-list ul li .info span h4,
.menu-list ul li .info span h5
{
    margin-bottom: 0rem;

    font-size: var(--f6);
    font-weight: var(--fw-regular);
    line-height: inherit;
}

.menu-list ul li .info.title span
{
    font-weight: var(--fw-medium);
}


/*
COLOR SETTINGS
================================================== */
.menu-list    ul li           .icon                                 { color: var(--body-color); }
.menu-list    ul li:hover     .icon                                 { color: var(--custom-color); }

.menu-list    ul li           .info           span h1,
.menu-list    ul li           .info           span h2,
.menu-list    ul li           .info           span h3,
.menu-list    ul li           .info           span h4,
.menu-list    ul li           .info           span h5               { color: var(--body-color); }

.menu-list    ul li           .info 	      span                  { color: var(--body-color); }
.menu-list    ul li           .info 	      span a,
.menu-list    ul li           .info 	      span a:visited        { color: var(--body-color); }
.menu-list    ul li           .info 	      span a:hover          { color: var(--custom-color); }

.menu-list    ul li           .info.title 	  span                  { color: var(--body-color-title); }
.menu-list    ul li           .info.title 	  span a,
.menu-list    ul li           .info.title 	  span a:visited        { color: var(--body-color-title); }
.menu-list    ul li           .info.title 	  span a:hover          { color: var(--custom-color); }


/* 
CLEARING
================================================== */
.menu-list::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
HTML-FORM
================================================== */
.html-form
{
    width: 100%;

    margin: 0rem 0rem var(--size-x1) 0rem;
    padding: var(--size-x0-5) var(--size-x0-25) 0rem var(--size-x0-25);

    border-radius: var(--border-radius);
}

.modal .html-form:last-child
{
    margin-bottom: 0rem;
}

.html-form .results
{
    width: 100%;
}

.html-form .results .message-box
{
    margin: 0rem 0rem 0rem 0rem;
}

.html-form .content
{
    width: 100%;

    margin: 0rem 0rem var(--size-x0-5) 0rem;
    padding: 0rem var(--size-x0-25);

    font-size: var(--f6);
}

.html-form .map
{
    position: relative;
    overflow: hidden;

    width: 100%;
    height: 40vh;

    border-radius: var(--border-radius);
}

.html-form .content.human
{
    display: none;
}

.html-form label
{
    display: flex;
    
    width: 100%;

    padding: 0.4rem 0rem;

    font-size: var(--f6);
    font-weight: var(--fw-medium);
}

.html-form label.right
{
    justify-content: right;
}

.html-form label.title
{
    margin: 0rem 0rem var(--size-x0-25) 0rem;
    padding: 0rem;
    
    font-size: var(--f5);
    font-weight: var(--fw-medium);
}

.html-form label.line
{
    margin: 0rem 0rem 0rem 0rem;
}

.html-form label.desc
{
    display: block;

    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    
    font-weight: var(--fw-regular);
}

.html-form label.desc-input
{
    margin: var(--size-x0-5) 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    
    font-weight: var(--fw-regular);
}

.html-form label i.require
{
    display: inline-block;

    margin-left: var(--size-x0-25);
}

.html-form label i.require::before
{
    display: inline-block;
    content: '\f621';
    font-family: 'Font Awesome 6 Pro';
    font-weight: var(--fw-bold);
    font-size: 11px;
    font-style: normal;
}

.html-form label.input
{
    display: inline-flex;

    width: auto;

    align-items: center;

    font-weight: var(--fw-regular);
}

.html-form label.input.input-full
{
    width: 100%;
}

.html-form label.input:hover
{
    cursor: pointer;
}

.html-form .content input[type="text"],
.html-form .content input[type="password"],
.html-form .content input[type="number"],
.html-form .content textarea,
.html-form .content select
{
    display: block;

    width: 100%;
}

.html-form .content textarea
{
    height: 15.0rem;
}

.html-form .content .photolist-sortable
{
    display: flex;
    flex-wrap: wrap;

    width: 100%;

    margin: auto;

    list-style: none;
}

.html-form .form-button
{
    display: table;

    width: 100%;

    padding: 0rem var(--size-x0-25);
    margin: 0rem 0rem var(--size-x0-5) 0rem;
}

.html-form .form-button a:not(:first-child) {
    margin-left: var(--size-x0-5);
}


/* 
COLOR SETTINGS
================================================== */
.html-form                                                      { background-color: var(--body-background-white); border: var(--border-regular) solid var(--body-border); }
.html-form label.title                                          { color: var(--body-color-title); }
.html-form label.line                                           { border-top: var(--border-regular) solid var(--body-sub-border); }
.html-form label i.require                                      { color: var(--color-red); }

.html-form label.input.input-full                               { color: var(--body-color); border-bottom: var(--border-regular) solid var(--body-sub-border); }
.html-form label.input.input-full:hover                         { color: var(--custom-color); background-color: var(--body-sub-background-active); }
.html-form label.input.input-full:last-child                    { border-bottom: none; }

.html-form .content input[type="text"].red-notice,
.html-form .content input[type="password"].red-notice,
.html-form .content input[type="time"].red-notice,
.html-form .content input[type="number"].red-notice,
.html-form .content input[type="checkbox"].red-notice,
.html-form .content textarea.red-notice,
.html-form .content select.red-notice + 
                    div.selectize-control > div.selectize-input,
.html-form .content select.red-notice                           { background-color: var(--highlights-red); border-color: var(--color-red); }


/* 
CLEARING
================================================== */
.html-form::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
NO-RECORD
================================================== */
.no-record 
{
    position: relative;
    float: left;

    display: block;

    width: 100%;

    margin: 0rem 0rem 0rem 0rem;
    padding: var(--size-x2) var(--size-x0-5);

    text-align: center;

    border-radius: var(--border-radius);
}

.no-record span.title
{
    display: block;

    width: 100%;

    margin-bottom: var(--size-x0-5);

    font-weight: var(--fw-medium);;
}

.no-record span.buttons
{
    display: block;

    width: 100%;

    margin-top: var(--size-x1);

    font-weight: var(--fw-medium);;
}

.no-record p
{
    margin-bottom: 0rem;
}


/* 
COLOR SETTINGS
================================================== */
.no-record                                                      { background-color: var(--body-background-white); border: var(--border-regular) solid var(--body-sub-border); border-left: 0rem; border-right: 0rem; }
.no-record span.title,
.no-record p                                                    { color: var(--color-red); }


/* 
CLEARING
================================================== */
.no-record::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
TAG
================================================== */
.tag
{
    display: inline-block;

    padding: var(--size-x0-3) var(--size-x0-5);
    margin: 0rem var(--size-x0-25) 0rem 0rem;

    font-size: var(--f6);
    font-weight: var(--fw-medium);
    line-height: var(--size-x0-3);
    text-transform: uppercase;

    border-radius: var(--border-radius);
}


/* 
COLOR SETTINGS
================================================== */
.tag.blue                                                       { background-color: var(--color-blue);    color: var(--body-color-white); }
.tag.green                                                      { background-color: var(--color-green);   color: var(--body-color-white); }
.tag.yellow                                                     { background-color: var(--color-yellow);  color: var(--body-color-white); }
.tag.red                                                        { background-color: var(--color-red);     color: var(--body-color-white); }
.tag.grey                                                       { background-color: var(--color-grey);    color: var(--body-color-white); }


/* 
CLEARING
================================================== */
.tag::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
INFORMATION-PROPERTY
================================================== */
.information-property
{
    position: relative;
    float: left;

    width: 100%;

    margin: 0rem 0rem var(--size-x1) 0rem;
    padding: 0rem 0rem;
}

.information-property > ul
{
    position: relative;
    float: left;

    width: 100%;

    margin: 0rem;
    padding: 0rem;

    list-style: none;
}

.information-property > ul > li
{
    position: relative;
    float: left;

    width: 100%;

    margin: 0rem;
    padding: 0rem;
    
    transition: all 0.25s ease;
}

.information-property > ul > li.area
{
    position: relative;
    float: left;

    width: 100%;

    margin: var(--size-x0-5) 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;

    font-size: var(--f6);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
}

.information-property > ul > li.area > div > span
{
    position: relative;
    float: left;
}

.information-property > ul > li.area > div > span::after
{
    content: '|';
    
    margin: 0rem var(--size-x0-25);
}

.information-property > ul > li.area > div > span:last-child::after
{
    content: '';
    
    margin: 0rem 0rem;
}

.information-property > ul > li > .price
{
    position: relative;
    float: left;

    width: 50%;

    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;

    font-size: var(--f4);
    font-weight: var(--fw-medium);
}

.information-property > ul > li > .price-convert
{
    position: relative;
    float: left;

    width: 50%;

    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;

    font-size: var(--f6);
}

.information-property > ul > li > .price-convert .navigation-mini
{
    z-index: 1999;
}

.information-property > ul > li > .title
{
    position: relative;
    float: left;

    width: 50%;

    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem var(--size-x0-5) 0rem 0rem;

    font-size: var(--f6);
    font-weight: var(--fw-medium);
}

.information-property > ul > li > .title::before
{
    position: relative;
    float: right;
    
    content: ':';
}

.information-property > ul > li > .info
{
    position: relative;
    float: left;

    width: 50%;

    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;

    font-size: var(--f6);
}

.information-property > ul > li > .info > span
{
    display: block;
}

.information-property > ul > li > .info > span.id
{
    font-weight: var(--fw-medium);
}


/* 
COLOR SETTINGS
================================================== */
.information-property      > ul > li:hover                   { background-color: var(--body-sub-background); }
.information-property      > ul > li.area                    { color: var(--body-color); }

.information-property      > ul > li.area 	a,
.information-property      > ul > li.area 	a:visited        { color: var(--body-color); }
.information-property      > ul > li.area 	a:hover          { color: var(--custom-color); }

.information-property      > ul > li:first-child             { border-bottom: 0rem dotted var(--body-border); }
.information-property      > ul > li                         { border-bottom: 0.1rem dotted var(--body-border); }
.information-property      > ul > li > .price                { color: var(--color-red); }
.information-property      > ul > li > .title                { color: var(--body-color-title); }
.information-property      > ul > li > .title.id             { color: var(--color-red); }
.information-property      > ul > li > .info  > span.id      { color: var(--color-red); }


/* 
CLEARING
================================================== */
.information-property::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
INFORMATION-FEATURE
================================================== */
.information-feature
{
    display: flex;
    overflow: hidden;
    
    width: 100%;
    height: var(--size-x1);

    margin: 0rem 0rem 0rem 0rem;
}

.information-feature .icon
{
    position: relative;
    float: left;
    
    display: flex;
    justify-content: center;
    align-items: center;

    max-width: var(--size-x1);

    margin: 0rem;
    padding: 0rem;
}

.information-feature .info
{
    position: relative;
    float: left;
}

.information-feature .notice
{
    position: relative;
    float: left;
}


/* 
CLEARING
================================================== */
.information-feature::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
INFORMATION-ACCOUNT
================================================== */
.information-account
{
    width: 100%;

    margin: 0rem 0rem 0rem 0rem;
}

.information-account ul
{
    position: relative;
    float: left;

    width: 100%;

    margin: 0rem;
    padding: 0rem;

    list-style: none;
}

.information-account ul li
{
    position: relative;
    float: left;
    display: flex;

    width: 100%;

    margin: 0.25rem 0rem;
    padding: 0rem;
}

.information-account ul li .icon
{
    display: grid;

    min-width: var(--size-x1);
    height: var(--size-x1);

    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;

    justify-content: center;
    align-items: center;

    border-radius: var(--border-radius);

    transition: all 0.25s ease;
}

.information-account ul li .icon::before
{
    font-family: 'Font Awesome 6 Pro';
    line-height: inherit;
}

.information-account ul li .icon.icon-phone::before                         { content: '\f095'; }
.information-account ul li .icon.icon-fax::before                           { content: '\f1ac'; }
.information-account ul li .icon.icon-mobile::before                        { content: '\f10b'; }
.information-account ul li .icon.icon-whatsapp::before                      { content: '\f232'; font-family: 'Font Awesome 6 Brands'; }
.information-account ul li .icon.icon-email::before                         { content: '\f1d8'; }
.information-account ul li .icon.icon-address::before                       { content: '\f5a0'; }

.information-account ul li .info
{
    flex: 1;
    overflow-x: hidden;
}

.information-account ul li .info span
{
    display: block;

    margin: 0rem 0rem 0rem var(--size-x0-5);
    padding: 0rem 0rem 0rem 0rem;

    font-size: var(--f6);
    transition: all 0.25s ease;
}

.information-account ul li .info.title span
{
    font-weight: var(--fw-medium);
}


/* 
COLOR SETTINGS
================================================== */
.information-account      ul li         .icon                                { background-color: var(--body-sub-background); color: var(--body-color); }
.information-account      ul li:hover   .icon                                { color: var(--custom-color); }

.information-account      ul li         .icon.icon-whatsapp                  { background-color: var(--color-whatsapp); color: var(--body-color-white); }
.information-account      ul li:hover   .icon.icon-whatsapp                  { color: var(--body-color-white); }

.information-account      ul li         .info 	         span                { color: var(--body-color); }
.information-account      ul li         .info 	         span a,
.information-account      ul li         .info 	         span a:visited      { color: var(--body-color); }
.information-account      ul li         .info 	         span a:hover        { color: var(--custom-color); }

.information-account      ul li         .info.title 	 span                { color: var(--body-color-title); }
.information-account      ul li         .info.title 	 span a,
.information-account      ul li         .info.title 	 span a:visited      { color: var(--body-color-title); }
.information-account      ul li         .info.title 	 span a:hover        { color: var(--custom-color); }

/* 
CLEARING
================================================== */
.information-account::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
INFORMATION-EXCHANGE
================================================== */
.information-exchange
{
    width: 100%;

    margin: 0rem 0rem 0rem 0rem;
}

.information-exchange ul
{
    position: relative;
    float: left;

    width: 100%;

    margin: 0rem;
    padding: 0rem;

    list-style: none;
}

.information-exchange ul li
{
    position: relative;
    float: left;
    display: flex;

    width: 50%;

    margin: 0rem;
    padding: 0.4rem 0rem;
}

.information-exchange ul li .icon
{
    flex: inherit;

    min-width: var(--size-x1);
    height: var(--size-x1);

    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;

    text-align: center;

    border-radius: var(--border-radius);

    transition: all 0.25s ease;
}

.information-exchange ul li .icon::before
{
    font-family: 'Font Awesome 6 Pro';
    line-height: inherit;
}

.information-exchange ul li:hover .icon
{
    border-radius: var(--size-x1);

    transform: rotate(360deg);
}

.information-exchange ul li .icon.icon-buy::before                          { content: '\f107'; }
.information-exchange ul li .icon.icon-sell::before                         { content: '\f106'; }
.information-exchange ul li .icon.icon-usd::before                          { content: '\f155'; }
.information-exchange ul li .icon.icon-eur::before                          { content: '\f153'; }
.information-exchange ul li .icon.icon-gbp::before                          { content: '\f154'; }

.information-exchange ul li .info
{
    flex: 1;
}

.information-exchange ul li .info span
{
    display: block;

    margin: 0rem 0rem 0rem var(--size-x0-5);
    padding: 0rem 0rem 0rem 0rem;
    
    font-size: var(--f6);

    transition: all 0.25s ease;
}

.information-exchange ul li .info.title span
{
    font-size: var(--f5);
    font-weight: var(--fw-medium);
}


/* 
COLOR SETTINGS
================================================== */
.information-exchange         li:first-child                                 { border-top: var(--border-regular) solid var(--body-sub-border); }
.information-exchange         li:nth-child(2)                                { border-top: var(--border-regular) solid var(--body-sub-border); }
.information-exchange         li                                             { border-bottom: var(--border-regular) solid var(--body-sub-border); }

.information-exchange      ul li         .icon                               { background-color: var(--body-sub-background); color: var(--body-color); box-shadow: var(--body-shadow); }
.information-exchange      ul li:hover   .icon                               { color: var(--custom-color); }

.information-exchange      ul li         .info 	        span                 { color: var(--body-color); }
.information-exchange      ul li         .info 	        span a,
.information-exchange      ul li         .info 	        span a:visited       { color: var(--body-color); }
.information-exchange      ul li         .info 	        span a:hover         { color: var(--custom-color); }

.information-exchange      ul li         .info.title 	span                 { color: var(--body-color-title); }
.information-exchange      ul li         .info.title 	span a,
.information-exchange      ul li         .info.title 	span a:visited       { color: var(--body-color-title); }
.information-exchange      ul li         .info.title 	span a:hover         { color: var(--custom-color); }


/* 
CLEARING
================================================== */
.information-exchange::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
STATS-VISITOR
================================================== */
.stats-visitor
{
    width: 100%;

    margin: 0rem 0rem var(--size-x1) 0rem;

    font-size: var(--f6);
}

.stats-visitor div
{
    display: inline-block;
}

.stats-visitor div span
{
    padding: 0rem var(--size-x0-5) 0rem var(--size-x0-25);
    
    font-weight: var(--fw-medium);
}

.stats-visitor div:last-child span
{
    padding-right: 0rem;
}


/* 
RESPONSIVE SETTINGS
================================================== */
@media handheld, only screen and (max-width: 640px)
{
    .stats-visitor div                  { display: block; }
}


/* ===============================================
LIST-FILTER
================================================== */
.list-filter
{
    position: relative;
    float: left;

    width: 100%;

    margin: 0rem 0rem var(--size-x1) 0rem;
}

.list-filter .filter-section
{
    position: relative;
    float: left;
    overflow: hidden;

    width: 100%;

    margin: var(--size-x0-5) 0rem 0rem 0rem;
    padding: 0rem;

    border-radius: var(--border-radius);
}

.list-filter .filter-section.empty-space
{
    position: relative;
    float: left;

    width: 100%;

    margin: 0rem 0rem var(--size-x0-5) 0rem;
    padding: 0rem;
}

.list-filter .filter-section:first-child
{
    margin: 0rem;
}

.list-filter .filter-section .section
{
    position: relative;
    float: left;

    width: 100%;

    margin: 0rem;
    padding: 0rem;
}

.list-filter .filter-section .section > a
{
    display: block;

    /*cursor: auto;*/

    margin: 0rem;
    padding: var(--size-x0-25) var(--size-x0-5) var(--size-x0-25) var(--size-x0-5);
    
    font-weight: var(--fw-medium);
    
    background-image: none;

    border-radius: var(--border-radius);
}

.list-filter .filter-section .section.active > a
{
    border-radius: var(--border-radius) var(--border-radius) 0rem 0rem;
}

.list-filter .filter-section .section > a::before
{
    position: relative;
    float: right;
    right: 0;
    content: '\f13a';
    
    font-family: 'Font Awesome 6 Pro';
}

.list-filter .filter-section .section.active > a::before                { content: '\f056'; }

.list-filter .filter-section .line
{
    position: relative;
    float: left;

    width: 100%;

    padding: 0rem var(--size-x0-5);
}

.list-filter .filter-section .line span
{
    position: relative;
    float: left;

    width: 100%;
}

.list-filter .filter-section .filter-option
{
    position: relative;
    float: left;

    overflow: hidden;

    width: 100%;

    margin: var(--size-x0-25) 0rem;
    padding: 0rem;
}

.list-filter .filter-section .filter-option.no-margin
{
    margin: 0rem 0rem;
}

.list-filter .filter-section .filter-option .content
{
    position: relative;
    float: left;

    display: inline-grid;
    overflow: auto;

    width: 100%;
    max-height: 21.5rem;

    margin: var(--size-x0-25) 0rem;
    padding: 0rem var(--size-x0-5);
}

.list-filter .filter-section.no-overflow,
.list-filter .filter-section.no-overflow .filter-option,
.list-filter .filter-section.no-overflow .filter-option .content
{
    overflow: visible;
}

.list-filter .filter-section.no-overflow .area-district .content
{
    overflow: auto;
}

.list-filter .filter-section .filter-option .content.half-left
{
    width: 50%;

    padding: 0rem var(--size-x0-25) 0rem var(--size-x0-5);
}

.list-filter .filter-section .filter-option .content.half-right
{
    width: 50%;

    padding: 0rem var(--size-x0-5) 0rem var(--size-x0-25);
}

.list-filter .filter-section .filter-option.property-all-main,
.list-filter .filter-section .filter-option.property-all-main .content
{
    margin-bottom: 0rem;
}

.list-filter .filter-section .filter-option .content label.property-all
{
    display: block;
}

.list-filter .filter-section.property-cat .filter-option .content
{
    max-height: 29.0rem;
}

.list-filter .filter-section .filter-option.selected .content
{
    max-height: none;
}

.list-filter .filter-section .filter-option .content::-webkit-scrollbar
{
    width: 0.5rem;
}

.list-filter .filter-section .filter-option .content input[type="text"],
.list-filter .filter-section .filter-option .content input[type="number"],
.list-filter .filter-section .filter-option .content select
{
    display: block;

    width: 100%;
}

.list-filter .filter-section .filter-option .content label
{
    display: inline-flex;

    width: 100%;

    padding: 0.4rem 0rem;
    
    font-size: var(--f6);
}

.list-filter .filter-section .filter-option .content label:hover
{
    cursor: pointer;
}

.list-filter .filter-section .filter-option .content label.property-all
{
    text-align: start;
}

.list-filter .filter-section .filter-option .content label.property-cat-1
{
    display: block;

    padding-left: 0.2rem;
}

.list-filter .filter-section .filter-option .content label.property-cat-2
{
    display: block;

    padding-left: 2.4rem;
}

.list-filter .filter-section .filter-option .content label.property-cat-3
{
    display: block;

    padding-left: 4.6rem;
}

.list-filter .filter-section .filter-option .content label.property-cat-1 a,
.list-filter .filter-section .filter-option .content label.property-cat-2 a,
.list-filter .filter-section .filter-option .content label.property-cat-3 a
{
    padding-left: 2.0rem;

    text-indent: -2.2rem;
}

.list-filter .filter-section .filter-option .content label a
{
    position: relative;
    display: inherit;

    width: 100%;

    padding-bottom: 0rem;
    
    font-weight: var(--fw-medium);

    background-image: none;
}

.list-filter .filter-section .filter-option .content label a::before
{
    padding-right: var(--size-x0-5);

    font-family: 'Font Awesome 6 Pro';
    line-height: inherit;
}

.list-filter .filter-section .filter-option .content label.property-cat-1 a::before            { content: '\f105'; }
.list-filter .filter-section .filter-option .content label.property-cat-2 a::before            { content: '\f105'; }
.list-filter .filter-section .filter-option .content label.property-cat-3 a::before            { content: '\f105'; }

.list-filter .filter-section .filter-option .content label a i.all
{
    position: absolute;
    float: right;

    top: 50%;
    right: 0;
    transform: translateY(-50%);

    margin: 0rem 0rem 0rem var(--size-x0-25);
    padding: var(--size-x0-125) var(--size-x0-25);

    font-size: var(--f6);
    font-weight: var(--fw-regular);
    line-height: initial;
    font-style: normal;

    border-radius: var(--border-radius);
}

.list-filter .filter-section .filter-option .content label a i.total
{
    margin: 0rem 0rem 0rem var(--size-x0-25);
    padding: var(--size-x0-125) var(--size-x0-25);

    font-size: var(--f6);
    font-weight: var(--fw-regular);
    line-height: inherit;
    font-style: normal;

    border-radius: var(--border-radius);
}

.list-filter .filter-section .area-district
{
    position: relative;
    float: left;
    
    width: 100%;
    min-height: 15.0rem;
}

.list-filter .filter-button
{
    position: relative;
    float: left;
    
    z-index: 2;
    
    bottom: auto;

    width: 100%;

    margin: var(--size-x0-5) 0rem 0rem 0rem;
    padding: var(--size-x0-5) var(--size-x0-5);

    border-radius: var(--border-radius);
}


/* 
COLOR SETTINGS
================================================== */
.list-filter    .filter-section                                                                    { background-color: var(--body-background-white); border: var(--border-regular) solid var(--body-sub-border); }
.list-filter    .filter-section       .section >                    a,
.list-filter    .filter-section       .section >                    a:visited                      { background-color: var(--body-background-white); color: var(--body-color-title); }
.list-filter    .filter-section:hover .section >                    a,
.list-filter    .filter-section       .section:hover >              a                              { background-color: var(--body-sub-background); color: var(--body-color-title); }

.list-filter    .filter-section       .line                         span                           { border-bottom: var(--border-regular) solid var(--body-sub-border); }

.list-filter    .filter-section       .filter-option .content       label                          { color: var(--body-color); border-bottom: var(--border-regular) solid var(--body-sub-border); }
.list-filter    .filter-section       .filter-option .content       label:hover                    { color: var(--custom-color); background-color: var(--body-sub-background-active); }
.list-filter    .filter-section       .filter-option .content       label:last-child               { border-bottom: none; }
.list-filter    .filter-section       .filter-option .content       label.property-all             { border-bottom: var(--border-regular) solid var(--body-sub-border); }

.list-filter    .filter-section       .filter-option .content       label a,
.list-filter    .filter-section       .filter-option .content       label a:visited                { color: var(--body-color); }
.list-filter    .filter-section       .filter-option .content       label a:hover                  { color: var(--custom-color); }

.list-filter    .filter-section       .filter-option .content       label a i.all                  { background-color: var(--body-color-white); color: var(--color-red); border: var(--border-regular) solid var(--body-sub-border); }
.list-filter    .filter-section       .filter-option .content       label a i.total                { background-color: var(--body-sub-background-hover); color: var(--custom-color); }

.list-filter    .filter-section       .filter-option .content::-webkit-scrollbar-track             { background-color: var(--body-scrollbar-background); }
.list-filter    .filter-section       .filter-option .content::-webkit-scrollbar-thumb             { background-color: var(--custom-background); }

.list-filter    .filter-button                                                                     { background-color: var(--body-sub-background); border: var(--border-regular) solid var(--body-sub-border); }


/* 
RESPONSIVE SETTINGS
================================================== */
@media handheld, only screen and (max-width: 1224px)
{
    .list-filter .filter-button
    {
        position: sticky;

        bottom: calc(-1 * var(--size-x2-5));
    }
}


/* ===============================================
MENU ICON
================================================== */
.menu-icon 
{
    position: relative;
    float: left;

    display: block;

    width: 100%;

    margin: 0rem;
    padding: 0rem;
}

.menu-icon .menu
{
    display: flex;
    
    margin: 0rem;
    padding: 0rem;
    
    max-width: 100%;
}

.menu-icon .menu span
{
    display: inline-block;

    margin: 0rem var(--size-x0-125);
    
    width: 25%;
    
    text-align: center;
    
    transition: all 0.25s ease;
}

.menu-icon .menu span:first-child
{
    margin-left: 0rem;
}

.menu-icon .menu span:last-child
{
    margin-right: 0rem;
}

.menu-icon .menu span a:hover
{
    background-size: 0% 0.1rem;
}

.menu-icon .menu span i.icon::before
{
    display: block;
    
    margin: auto auto var(--size-x0-25) auto;
    
    font-family: 'Font Awesome 6 Pro';
    font-size: var(--f5);
    font-weight: var(--fw-regular);
    font-style: normal;
    line-height: inherit;
    text-align: center;

    border-radius: var(--border-radius);
    
    transition: all 0.25s ease;
}

.menu-icon .menu span i.icon-menu::before                               { content: '\f0c9'; }
.menu-icon .menu span i.icon-menu-page::before                          { content: '\f802'; }
.menu-icon .menu span i.icon-property-list::before                      { content: '\f38a'; }
.menu-icon .menu span i.icon-property-filter::before                    { content: '\f0b0'; }
.menu-icon .menu span i.icon-property-sort::before                      { content: '\f0dc'; }
.menu-icon .menu span i.icon-property-sell::before                      { content: '\f4d9'; }
.menu-icon .menu span i.icon-property-find::before                      { content: '\f689'; }
.menu-icon .menu span i.icon-contact::before                            { content: '\f879'; }
.menu-icon .menu span i.icon-property-zoom::before                      { content: '\f00e'; }
.menu-icon .menu span i.icon-property-map::before                       { content: '\f279'; }
.menu-icon .menu span i.icon-property-video::before                     { content: '\f144'; }
.menu-icon .menu span i.icon-property-virtual::before                   { content: '\f729'; }
.menu-icon .menu span i.icon-property-call::before                      { content: '\f879'; }
.menu-icon .menu span i.icon-property-message::before                   { content: '\f658'; }
.menu-icon .menu span i.icon-property-offer::before                     { content: '\f4c0'; }
.menu-icon .menu span i.icon-property-print::before                     { content: '\f02f'; }
.menu-icon .menu span i.icon-property-printnormal::before               { content: '\f570'; }
.menu-icon .menu span i.icon-property-printvertical::before             { content: '\f2fb'; }
.menu-icon .menu span i.icon-property-printhorizontal::before           { content: '\f2fa'; }
.menu-icon .menu span i.icon-message::before                            { content: '\f658'; }

.menu-icon .menu span div
{
    display: block;
    
    font-size: var(--f6);
    font-weight: var(--fw-medium);
    line-height: var(--size-x0-6);
}


/*
COLOR SETTINGS
================================================== */
.menu-icon .menu span         a                                     { color: var(--body-color-title); }
.menu-icon .menu span:hover   a                                     { color: var(--custom-color); }

.menu-icon .menu span         a.inactive                            { color: var(--body-color-inactive); }
.menu-icon .menu span:hover   a.inactive                            { color: var(--body-color-inactive); }

.menu-icon .menu span         a i.icon::before                      { background-color: var(--body-sub-background);           color: var(--body-color-title); }
.menu-icon .menu span.active  a i.icon::before,
.menu-icon .menu span:hover   a i.icon::before                      { background-color: var(--custom-background);             color: var(--body-color-white); }

.menu-icon .menu span         a.inactive i.icon::before             { background-color: var(--body-sub-background);           color: var(--body-color-inactive); }
.menu-icon .menu span.active  a.inactive i.icon::before,
.menu-icon .menu span:hover   a.inactive i.icon::before             { background-color: var(--body-sub-background);           color: var(--body-color-inactive); }


/*
CLEARING
================================================== */
.menu-icon::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
HEADER-FIXED
================================================== */
.header-fixed 
{
    position: fixed;
    z-index: 10000;
    display: none;

    width: 100%;
    
    top: 6.0rem;

    margin-bottom: 0rem;
    padding: var(--size-x0-25) 0rem var(--size-x0-25) 0rem;
}

.header-fixed > .container > .row
{
    margin-bottom: 0rem;
}


/* 
COLOR SETTINGS
================================================== */ 
.header-fixed                                             { background-color: var(--body-background-blur); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: var(--border-regular) solid var(--body-border-blur); }


/* 
LAYOUT FOR LARGE
================================================== */
@media only screen and (max-width: 1399px)
{
    
}


/* 
LAYOUT FOR TABLET
================================================== */
@media only screen and (max-width: 1224px)
{
    
}


/* 
LAYOUT FOR MOBILE
================================================== */
@media handheld, only screen and (max-width: 640px)
{
    
}


/* ===============================================
FOOTER-FIXED
================================================== */
.footer-fixed 
{
    position: fixed;
    z-index: 10000;
    display: none;

    width: 100%;
    
    bottom: 0rem;

    margin-bottom: 0rem;
    padding: var(--size-x0-25) 0rem var(--size-x0-5) 0rem;
}

.footer-fixed > .container > .row
{
    margin-bottom: 0rem;
}


/* 
COLOR SETTINGS
================================================== */ 
.footer-fixed                                             { background-color: var(--body-background-blur); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: var(--border-regular) solid var(--body-border-blur); }


/* 
LAYOUT FOR LARGE
================================================== */
@media only screen and (max-width: 1399px)
{
    
}


/* 
LAYOUT FOR TABLET
================================================== */
@media only screen and (max-width: 1224px)
{
    
}


/* 
LAYOUT FOR MOBILE
================================================== */
@media handheld, only screen and (max-width: 640px)
{
    
}


/* ===============================================
YANDEX-MAP PIN ANIMATION
================================================== */
.map ymaps.ymaps-2-1-78-image::before
{
    content: '';
    position: absolute;
    display: block;
    
    opacity: 1;        
    
    top: 100%;
    left: 0rem;
    
    margin-top: -1.8rem;
    
    width: 100%;
    height: var(--size-x1-5);
    
    border-radius: 5.0rem;
    
    transform: rotateX(-60deg) scale(0);
    animation: scale_map_pin 1.5s ease-in-out 0s infinite normal;
}


/* 
COLOR SETTINGS
================================================== */
.map ymaps.ymaps-2-1-78-image::before                { background-color: var(--color-red-active); }


/* ===============================================
ANIMATIONS
================================================== */
@keyframes scale_map_pin
{
    from
    {
        opacity: 1;
        transform: rotateX(-60deg) scale(0);
        filter: alpha(opacity=100);
    }
    to
    {
        opacity: 0;
        transform: rotateX(-60deg) scale(1.2);
        filter: alpha(opacity=0);
    }
}


/* ===============================================
LATEST
================================================== */
.latest
{
    margin: 0rem 0rem 0rem 0rem;
}

.latest ul
{
    position: relative;
    
    display: flex;
    flex-wrap: wrap;

    list-style: none;

    padding: 0rem;
    margin: 0rem;
}

.latest ul li
{
    position: relative;
    float: left;
    
    flex: initial;

    width: 100%;

    margin: 0rem 0rem var(--size-x1-5) 0rem;
}

.latest li .latest-image
{
    position: relative;
    overflow: hidden;

    width: 100%;
    height: auto;

    aspect-ratio: 4/3; /* Aspect ratio of 4:3 */

    border-radius: var(--image-radius);
}

.latest li .latest-image a
{
    padding: 0rem 0rem;
    
    background-image: none;
}

.latest li .latest-image img
{
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.latest li .latest-content
{
    display: grid;

    margin: var(--size-x0-5) 0rem 0rem 0rem;
}

.latest li .latest-content h1,
.latest li .latest-content h2,
.latest li .latest-content h3,
.latest li .latest-content h4,
.latest li .latest-content h5
{
    display: block;
    overflow: hidden;
    
    max-height: var(--size-x2);
    
    margin-bottom: 0rem;

    font-size: var(--f5);
    line-height: inherit;
}

.latest li .latest-content .box-desc
{
    display: block;
    overflow: hidden;
    
    max-height: var(--size-x2);

    font-size: var(--f5);
    line-height: inherit;
}

.latest li .latest-content .box-price
{
    display: block;

    font-size: var(--f5);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    line-height: var(--size-x1);
}


/* 
COLOR SETTINGS
================================================== */
.latest         li      .latest-image                       { background-color: var(--body-background-white); }

.latest         li      .latest-content .box-price          { color: var(--color-red); }

.latest         li      .latest-content h1,
.latest         li      .latest-content h2,
.latest         li      .latest-content h3,
.latest         li      .latest-content h4,
.latest         li      .latest-content h5                  { color: var(--body-color-title); }

.latest         li      .latest-content a,
.latest         li      .latest-content a:visited           { color: var(--body-color-title); }
.latest         li      .latest-content a:hover             { color: var(--custom-color); }


/* 
CLEARING
================================================== */
.latest::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
POST
================================================== */
.post
{
    margin: 0rem 0rem 0rem 0rem;
}

.post ul
{
    position: relative;
    display: flex;    
    flex-wrap: wrap;
    list-style: none;

    padding: 0rem;
    margin: 0rem;
}

.post ul li
{
    position: relative;
    float: left;
    flex: initial;

    width: 100%;

    margin: 0rem 0rem var(--size-x1-5) 0rem;
}

.post li .post-image
{
    position: relative;
    float: left;
    overflow: hidden;
    
    aspect-ratio: 4/3; /* Aspect ratio of 4:3 */

    width: 25%;

    border-radius: var(--image-radius);
}

.post li .post-image a 
{
    padding: 0rem 0rem;

    background-image: none;
}

.post li .post-image img
{
    display: block;

    margin: auto;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.post li .post-content
{
    position: relative;
    float: left;
    overflow: hidden;

    width: 75%;
    max-height: var(--size-x5);

    padding: 0rem 0rem 0rem var(--size-x0-5);
}

.post li .post-content h1,
.post li .post-content h2,
.post li .post-content h3,
.post li .post-content h4,
.post li .post-content h5
{
    display: block;

    max-height: var(--size-x2);

    margin-bottom: 0rem;

    font-size: var(--f5);
    line-height: inherit;
}

.post li .post-content .box-desc
{
    display: block;

    font-size: var(--f5);
    line-height: inherit;
}

/* 
COLOR SETTINGS
================================================== */
.post li .post-image
{
    background-color: var(--body-background-white);
}

.post li .post-content h1,
.post li .post-content h2,
.post li .post-content h3,
.post li .post-content h4,
.post li .post-content h5
{
    color: var(--body-color-title);
}

.post li .post-content a,
.post li .post-content a:visited
{
    color: var(--body-color-title);
}

.post li .post-content a:hover
{
    color: var(--custom-color);
}

/* 
RESPONSIVE SETTINGS
================================================== */
@media handheld, only screen and (max-width: 640px)
{

}


/* 
CLEARING
================================================== */
.post::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
CARD
================================================== */
.card 
{
    position: relative;
    float: left;
    
    display: flex;
    flex-direction: column;

    width: 100%;

    margin: 0rem 0rem var(--size-x1) 0rem;
    padding: var(--size-x0-5) 0rem;
    
    text-align: center;

    border-radius: var(--border-radius);
    
    transition: transform 0.25s ease;
}

.card:hover
{
    transform: translateY(calc(var(--size-x0-5) * -1));
}

.card .card-image
{
    position: relative;
    
    display: inline-block;
    
    /*width: 6.5rem;*/
    height: 6.5rem;
    
    margin: var(--size-x1) var(--size-x0-5) var(--size-x1) var(--size-x0-5);
    
    text-align: center;
}

.card .card-image img
{
    position: relative;
    
    z-index: 2;
    
    width: auto;
    height: 6.5rem;
}

.card .card-image:before
{
    content: '';
    position: absolute;

    top: 0; left: 0; bottom: 0; right: 0;
    
    margin: auto;
    
    z-index: 1;
    
    width: 10.0rem;
    height: 10.0rem;
    
    border-radius: var(--border-radius);
    
    transition: all 0.25s ease;
}

.card:hover .card-image:before
{        
    width: 10.0rem;
    height: 10.0rem;
}

.card .card-image.remove-box:before
{
    content: none;
}

.card .card-content 
{
    display: grid;
}

.card .card-title 
{
    display: block;
    
    margin: var(--size-x0-5) var(--size-x0-5);

    max-width: 100%;
}

.card .card-title h1,
.card .card-title h2,
.card .card-title h3,
.card .card-title h4,
.card .card-title h5
{
    margin-bottom: 0rem;
    
    font-size: var(--f2);
}

.card .card-desc
{
    display: block;
    overflow: hidden;
    
    margin: var(--size-x0-5) var(--size-x0-5);

    max-width: 100%;
    max-height: var(--size-x5);
    
    font-size: var(--f5);
}

.card .card-desc p:last-child
{
    margin-bottom: 0rem;
}

.card .card-desc.one-line 
{
    min-height: var(--size-x1);
    max-height: var(--size-x1);
}

.card .card-link
{
    display: block; 
    
    margin: var(--size-x0-5) var(--size-x0-5) var(--size-x0-5) var(--size-x0-5);

    max-width: 100%;
}

.card .card-link span
{        
    margin-right: var(--size-x0-5);
    
    transition: all 0.25s ease;
}

.card .card-link span:last-child
{
    margin-right: 0rem;
}

.card .card-link span.icon::before
{
    margin-right: var(--size-x0-25);

    font-family: 'Font Awesome 6 Pro';
    line-height: inherit;
}

.card .card-link span.icon.icon-arrow::before               { content: '\f178'; }

.card .card-link span i
{
    margin-right: var(--size-x0-25);
}

.card .card-button
{
    display: block;
    
    margin: var(--size-x0-5) var(--size-x0-5) 0rem var(--size-x0-5);

    max-width: 100%;
}

.card .card-button a
{
    margin-right: var(--size-x0-5);
    margin-bottom: var(--size-x0-5);
}

.card .card-button a:last-child
{
    margin-right: 0rem;
}


/* 
COLOR SETTINGS
================================================== */
.card                                                       { background-color: var(--body-background-white); box-shadow: var(--body-shadow); }

.card                 .card-image:before                    { background-color: var(--body-background-white); box-shadow: var(--body-shadow); }

.card                 .card-title h1,
.card                 .card-title h2,
.card                 .card-title h3,
.card                 .card-title h4,
.card                 .card-title h5                        { color: var(--body-color-title); }

.card                 .card-title a,
.card                 .card-title a:visited                 { color: var(--body-color-title); }
.card                 .card-title a:hover                   { color: var(--custom-color); }

.card                 .card-desc                            { color: var(--body-color); }

.card                 .card-link span::before               { color: var(--custom-color); }

.card                 .card-link                            { color: var(--body-color); }
.card                 .card-link a,
.card                 .card-link a:visited                  { color: var(--body-color); }
.card                 .card-link a:hover                    { color: var(--custom-color); }


/* ===============================================
IMAGE-CONTAINER
================================================== */
.image-container
{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;

    width: 100%;

    margin: 0rem auto;
    gap: 15px;
    
}
  
.image-item
{
    position: relative;
    overflow: hidden;

    width: calc((100% - 60px) / 5); /* 5 resim ve aralarında 4 boşluk (15px * 4 = 60px) */
    aspect-ratio: 4 / 3;

    border-radius: var(--border-radius);
}

.image-item img
{
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: var(--border-radius);

    transition: filter 0.25s ease;
}


/* ===============================================
CONTENT-BOX
================================================== */
.content-box 
{
    position: relative;
    float: left;
    overflow: hidden;

    display: block;

    width: 100%;

    margin: 0rem 0rem var(--size-x1) 0rem;
    padding: 0rem;

    border-radius: var(--border-radius);
}

.content-box.page-info-image
{
    float: right;

    width: 33%;
    margin: 0rem 0rem var(--size-x0-5) var(--size-x1);
}

.content-box.details
{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.content-box .box-left
{    
    display: flex;
    flex-direction: column;

    width: 100%;
}

.content-box .box-right
{    
    display: flex;
    flex-direction: column;

    width: 100%;
}

.content-box.details                .box-left                  { width: 35%; }
.content-box.details                .box-right                 { width: 65%; padding-left: var(--size-x0-5); }

.content-box.details.page-details   .box-left                  { width: 25%; }
.content-box.details.page-details   .box-right                 { width: 75%; }

.content-box .box-image
{
    position: relative;
    display: block;
    overflow: hidden;

    width: 100%;
    height: auto;    
    
    border-radius: var(--image-radius);
}

.content-box .box-image-caption
{
    width: 100%;
    /*height: 100%;*/
    
    aspect-ratio: 4/3; /* Aspect ratio of 4:3 */
}

.content-box .box-image a
{
    padding: 0rem 0rem;
    
    background-image: none;
}

.content-box .box-image img
{
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.content-box .box-image .box-label
{
    position: absolute;
    display: flex;

    transition: opacity 0.25s ease;
}

.content-box .box-image .box-label.top-left       { top: var(--size-x0-5);      left: var(--size-x0-5); }
.content-box .box-image .box-label.top-right      { top: var(--size-x0-5);      right: var(--size-x0-5); }
.content-box .box-image .box-label.bottom-left    { bottom: var(--size-x0-5);   left: var(--size-x0-5); }
.content-box .box-image .box-label.bottom-right   { bottom: var(--size-x0-5);   right: var(--size-x0-5); }

.content-box .box-image .box-label span
{
    padding: 0rem var(--size-x0-5);
    margin: 0rem var(--size-x0-25) 0rem 0rem;
    
    font-size: var(--f6);
    font-weight: var(--fw-medium);
    line-height: var(--size-x1);
    text-transform: uppercase;

    border-radius: var(--border-radius);
}

.content-box .box-image .box-label span:last-child
{
    margin-right: 0rem;
}

.content-box .box-image .box-label span::before
{
    margin-right: var(--size-x0-25);

    font-family: 'Font Awesome 6 Pro';
    font-weight: var(--fw-bold);
    line-height: inherit;
}

.content-box .box-image .box-label span.icon.icon-photos::before         { content: '\f03e'; }

.content-box .box-map,
.content-box .box-video
{
    width: 100%;
    height: auto;    
    
    border-radius: var(--border-radius);
}

.content-box .box-title
{
    margin: var(--size-x0-5) 0rem;

    max-width: 100%;
}

.content-box.page .box-title
{
    margin-bottom: 0rem;
}

.content-box.details .box-title
{
    margin-top: 0rem;
}

.content-box.border .box-title
{
    margin: var(--size-x0-5) var(--size-x0-5);
}

.content-box .box-title.account
{
    margin-top: 0rem;

    font-size: var(--f6);
    font-weight: var(--fw-regular);
    text-align: center;
}

.content-box .box-title.account h1,
.content-box .box-title.account h2,
.content-box .box-title.account h3,
.content-box .box-title.account h4,
.content-box .box-title.account h5
{
    font-size: var(--f5);
}

.content-box .box-title.account .span-group
{
    display: block;

    margin: var(--size-x0-25) 0rem 0rem 0rem;
    padding: var(--size-x0-25) 0rem;

    width: 100%;

    text-align: center;

    border-radius: var(--border-radius);
}

.content-box .box-title.account .span-group span
{
    display: block;
}

.content-box .box-title.account .span-group span.title
{
    font-size: var(--f6);
    font-weight: var(--fw-medium);
}

.content-box .box-title.account .span-group span.desc
{
    font-size: var(--f4);
}

.content-box .box-title h1,
.content-box .box-title h2,
.content-box .box-title h3,
.content-box .box-title h4,
.content-box .box-title h5
{
    margin-bottom: 0rem;
    
    font-size: var(--f3);
    line-height: inherit;
}

.content-box.property .box-title h1,
.content-box.property .box-title h2,
.content-box.property .box-title h3,
.content-box.property .box-title h4,
.content-box.property .box-title h5
{    
    font-size: var(--f5);
}

.content-box.fav-area .box-title h1,
.content-box.fav-area .box-title h2,
.content-box.fav-area .box-title h3,
.content-box.fav-area .box-title h4,
.content-box.fav-area .box-title h5
{    
    font-size: var(--f5);
}

.content-box .box-title .subtitle
{    
    font-size: var(--f6);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    line-height: inherit;
}

.content-box .box-title .subtitle span
{
    display: inline-block;
    
    transition: all 0.25s ease;
}

.content-box .box-title .subtitle a
{
    font-weight: var(--fw-medium);
}

.content-box .box-title .subtitle span::after
{
    content: '|';
    
    margin: 0rem var(--size-x0-25);
}

.content-box .box-title .subtitle span:last-child::after
{
    content: '';
    
    margin: 0rem 0rem;
}

.content-box .box-title .subtitle span i
{
    margin-right: var(--size-x0-25);
}

.content-box .box-title .price
{
    position: relative;
    float: left;
    
    font-size: var(--f5);
    font-weight: var(--fw-medium);
}

.content-box .box-title .advert-id 
{
    position: relative;
    float: right;
    
    font-size: var(--f5);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
}

.content-box .box-hr 
{
    margin: var(--size-x0-5) 0rem;
}

.content-box.border .box-hr 
{
    margin: var(--size-x0-5) var(--size-x0-5);
}

.content-box .box-hr hr
{    
    margin: 0rem;
}

.content-box .box-desc 
{
    margin: var(--size-x0-5) 0rem;

    font-size: var(--f5);
}

.content-box.border .box-desc 
{
    margin: var(--size-x0-5) var(--size-x0-5);
}

.content-box .box-desc p:last-child
{
    margin-bottom: 0rem;
}

.content-box .box-link
{
    margin: var(--size-x0-5) 0rem;
}

.content-box.border .box-link
{
    margin: var(--size-x0-5) var(--size-x0-5);
}

.content-box .box-link span
{    
    margin-right: var(--size-x0-5);
    
    transition: all 0.25s ease;
}

.content-box .box-link span:last-child
{
    margin-right: 0rem;
}

.content-box .box-link span.icon::before
{
    margin-right: var(--size-x0-25);

    font-family: 'Font Awesome 6 Pro';
    font-weight: var(--fw-bold);
    line-height: inherit;
}

.content-box .box-link span.icon.icon-page-read::before                                 { content: '\f518'; }
.content-box .box-link span.icon.icon-property-account-portfolio::before                { content: '\f4d9'; }
.content-box .box-link span.icon.icon-property-exchange-bank::before                    { content: '\f19c'; }

.content-box .box-link span i
{
    margin-right: var(--size-x0-25);
}

.content-box .box-info
{
    display: inherit;
    
    margin: 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;

    max-width: 100%;
}

.content-box .box-info span
{
    width: 20%;
    
    margin-right: var(--size-x0-4);

    text-align: center;
    border-radius: var(--border-radius);    
    transition: all 0.25s ease;
}

.content-box .box-info span:last-child
{
    margin-right: 0rem;
}
    
.content-box                        .box-info.three-span-limit span                     { width: 33.3%; }
.content-box                        .box-info.three-span-limit span:nth-child(3),
.content-box                        .box-info.three-span-limit span:nth-child(4)        { display: none; }

.content-box .box-info span.icon::before
{
    display: flex;
    position: relative;

    top: -5px;

    margin: auto;

    width: 30px;
        
    font-size: var(--f5);
    font-family: 'Font Awesome 6 Pro';
    font-weight: var(--fw-regular);
    line-height: 10px;
    justify-content: center;
}

.content-box .box-info span .icon-title
{
    display: block;
    
    font-size: var(--f7);
    line-height: var(--size-x0-75);
}

.content-box .box-info span .icon-info
{
    display: block;
    
    font-size: var(--f6);
    line-height: var(--size-x0-75);
}

.content-box .box-info span.icon.icon-property-m2::before                           { content: '\f61c'; }
.content-box .box-info span.icon.icon-property-bed::before                          { content: '\f8f7'; }
.content-box .box-info span.icon.icon-property-bath::before                         { content: '\f2cd'; }
.content-box .box-info span.icon.icon-property-deed::before                         { content: '\f15c'; }
.content-box .box-info span.icon.icon-property-star::before                         { content: '\f005'; }
.content-box .box-info span.icon.icon-property-hotel-room::before                   { content: '\f594'; }
.content-box .box-info span.icon.icon-property-landbuild::before                    { content: '\e655'; }
.content-box .box-info span.icon.icon-property-zoning::before                       { content: '\e58a'; }
.content-box .box-info span.icon.icon-property-kaks::before                         { content: '\f1ad'; }
.content-box .box-info span.icon.icon-property-age::before                          { content: '\f073'; }
.content-box .box-info span.icon.icon-property-floor::before                        { content: '\f870'; }
.content-box .box-info span.icon.icon-property-floor-location::before               { content: '\e0a7'; }
.content-box .box-info span.icon.icon-property-status::before                       { content: '\f54f'; }
.content-box .box-info span.icon.icon-property-person::before                       { content: '\e23a'; }

.content-box .box-account
{
    display: flex;
    align-items: flex-end;
    
    margin: 0rem 0rem var(--size-x0-5) 0rem;
    padding: var(--size-x0-5) 0rem 0rem 0rem;
}

.content-box .box-account .image-group
{
    display: flex;

    margin: auto;
}

.content-box .box-account .image-group > div
{
    margin-right: var(--size-x0-5);
}

.content-box .box-account .image-group > div:last-child
{
    margin-right: 0rem;
}

.content-box .box-account .box-account-image,
.content-box .box-account .box-agent-image
{
    flex: 0 0 var(--size-x2);
    overflow: hidden;

    min-width: var(--size-x2) !important;
    height: var(--size-x2) !important;

    border-radius: var(--border-radius);
}

.content-box .box-account .image-group .box-account-image,
.content-box .box-account .image-group .box-agent-image
{
    flex: 0 0 var(--size-x3);

    width: var(--size-x3) !important;
    height: var(--size-x3) !important;

    border-radius: var(--border-radius);

    background-color: var(--body-account-background);
}

.content-box .box-account .box-account-image a,
.content-box .box-account .box-agent-image a
{
    padding: 0rem 0rem;
    
    background-image: none;
}

.content-box .box-account .box-account-image img,
.content-box .box-account .box-agent-image img
{
    display: block;
    margin: auto;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.content-box .box-account .box-agent-image img
{
    object-fit: contain;
}

.content-box .box-account .box-account-info 
{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    width: 100%;

    margin: auto var(--size-x0-5);

    font-weight: var(--fw-medium);
}

.content-box .box-account .box-account-info span
{
    display: block;
    overflow: hidden;

    max-width: 100%;
    max-height: var(--size-x1);
}

.content-box .box-account .box-account-info span.title
{
    font-weight: var(--fw-medium);
}

.content-box .box-account .box-account-info span.subtitle
{
    font-size: var(--f6);
    font-weight: var(--fw-regular);
}

.content-box .box-button
{
    display: block;
    
    margin: var(--size-x0-5) 0rem;

    max-width: 100%;
}

.content-box.border .box-button
{
    margin: var(--size-x0-5) var(--size-x0-5);
}

.content-box .box-button a
{
    margin-right: var(--size-x0-5);
    margin-bottom: var(--size-x0-5);
}

.content-box .box-button a:last-child
{
    margin-right: 0rem;
    margin-bottom: 0rem;
}


/* 
COLOR SETTINGS
================================================== */
.content-box                                                               { background-color: var(--body-background-white); }
.content-box.border                                                        { border: var(--border-regular) solid var(--body-sub-border); }
.content-box.no-border                                                     { border: 0rem; }
.content-box.no-border-sides                                               { border-left: 0rem; border-right: 0rem; }

.content-box                    .box-image .box-label   span,
.content-box                    .box-image .box-label   span.theme         { background-color: var(--custom-background); color: var(--body-color-white); box-shadow: var(--body-shadow); }
.content-box                    .box-image .box-label   span.blue          { background-color: var(--color-blue); }
.content-box                    .box-image .box-label   span.green         { background-color: var(--color-green); }
.content-box                    .box-image .box-label   span.yellow        { background-color: var(--color-yellow); }
.content-box                    .box-image .box-label   span.red           { background-color: var(--color-red); }
.content-box                    .box-image .box-label   span.grey          { background-color: var(--color-grey); }
.content-box                    .box-image .box-label   span.soft          { background-color: var(--body-background-white); color: var(--body-color); }

.content-box                    .box-title h1,
.content-box                    .box-title h2,
.content-box                    .box-title h3,
.content-box                    .box-title h4,
.content-box                    .box-title h5                              { color: var(--body-color-title); }

.content-box                    .box-title a,
.content-box                    .box-title a:visited                       { color: var(--body-color-title); }
.content-box                    .box-title a:hover                         { color: var(--custom-color); }

.content-box                    .box-title .subtitle                       { color: var(--body-color-subtitle); }
.content-box                    .box-title .subtitle a,
.content-box                    .box-title .subtitle a:visited             { color: var(--body-color-subtitle); }
.content-box                    .box-title .subtitle a:hover               { color: var(--custom-color); }

.content-box                    .box-title .subtitle span::before          { background-color: var(--body-sub-background); color: var(--custom-color); }

.content-box                    .box-title .subtitle span.icon             { color: var(--custom-color); }

.content-box                    .box-title.account .span-group             { background-color: var(--body-sub-background); }

.content-box                    .box-title .price                          { color: var(--color-red); }
.content-box                    .box-title .advert-id                      { color: var(--body-color-inactive); }

.content-box                    .box-link span::before                     { color: var(--custom-color); }

.content-box                    .box-link                                  { color: var(--body-color-subtitle); }
.content-box                    .box-link a,
.content-box                    .box-link a:visited                        { color: var(--body-color-subtitle); }
.content-box                    .box-link a:hover                          { color: var(--custom-color); }

.content-box                    .box-info                                  { color: var(--body-color); }

.content-box                    .box-info span                             { border: var(--border-regular) solid var(--body-sub-border); }

.content-box                    .box-info span::before                     { background-color: var(--body-background-white); color: var(--body-color); }

.content-box                    .box-account-info span.title               { color: var(--body-color-title); }


/* 
RESPONSIVE SETTINGS
================================================== */
@media only screen and (max-width: 1224px)
{    
    .content-box                        .box-info span                     { width: 25%; }
    .content-box                        .box-info span:nth-child(4)        { display: none; }
}

@media handheld, only screen and (max-width: 640px)
{
    .content-box.details                .box-left                          { width: 100%; }
    .content-box.details                .box-right                         { width: 100%; padding-left: 0rem; }

    .content-box.details.page-details   .box-left                          { width: 100%; }
    .content-box.details.page-details   .box-right                         { width: 100%; }

    .content-box.details                .box-title                         { margin-top: var(--size-x0-5); }
    
    .content-box                        .box-info                          { border-bottom: 0rem; }
    
    .content-box                        .box-info span                     { width: 33.3%; }
    .content-box                        .box-info span:nth-child(3),
    .content-box                        .box-info span:nth-child(4)        { display: none; }
}


/* 
CLEARING
================================================== */
.content-box::after
{
    clear: both; display: block; visibility: hidden; content: ''; font-size: 0; width: 0; height: 0; line-height: 0;
}


/* ===============================================
MASK (Image Hover Mask Effects)
================================================== */
.mask
{
    position: absolute;
    overflow: hidden;

    width: 100%;
    height: 100%;

    top: 0rem;

    margin: 0rem;
    padding: 0rem;
}

.mask .mask-background
{
    position: absolute;

    width: 100%;
    height: 100%;

    top: -100%;
    left: 0rem;

    margin: 0rem;
    padding: 0rem;

    transition: top 0.25s ease;
}

.mask:hover .mask-background
{
    top: 0rem;
}

.mask .mask-button
{
    position: absolute;

    width: 100%;
    height: 100%;

    top: -100%;
    left: 0rem;

    margin-top: calc(var(--size-x0-75) * -1);

    text-align: center;

    transition: top 0.25s ease;
}

.mask:hover .mask-button
{
    top: 50%;
}

.mask .mask-button a
{
    display: inline-block;
    position: relative;

    width: var(--size-x1-5);
    height: var(--size-x1-5);

    margin: 0rem var(--size-x0-125);
    padding: var(--size-x0-25) 0rem;

    text-align: center;
}

.mask .mask-button a::before
{
    font-family: 'Font Awesome 6 Pro';
    line-height: inherit;   
}

.mask .mask-button a.view::before                   { content: '\f00e'; }

.mask .mask-button a balloon
{
    position: absolute;
    float: left;
    
    top: 0rem;
    left: 0rem;
    
    width: 100%;
    height: 100%;
}


/* 
COLOR SETTINGS
================================================== */
.mask 				    .mask-background          { background-color: var(--mask-background); }
.mask 					.mask-button a,
.mask 					.mask-button a:visited    { background-color: var(--mask-button-background); color: var(--body-color-white); box-shadow: var(--body-shadow); }

.mask 					.mask-button a:hover      { background-color: var(--custom-background-hover); }


/* ===============================================
MASK-IMAGE (Image Hover Mask Effects)
================================================== */
.mask-image::after
{
    content: '';
    position: absolute;

    top: 0rem;
    left: 0rem;
    right: 0rem;
    bottom: 0rem;

    opacity: 0;
    transition: opacity 0.25s ease;
}

.mask-image:hover::after
{
    opacity: 1;
}


/* 
COLOR SETTINGS
================================================== */
.mask-image::after                                  { background-color: var(--mask-image-background); }