/*
 *  Document   : main.css
 *  Author     : Multi
 *  Description: The main stylesheet of the template
 *
 *  Structure (with shortcodes):
 *      (#m01lls) LOGIN (Login page layout structure and elements)
 *      (#m02mls) MAIN LAYOUT (Main page layout structure)
 *      (#m03hws) HEADER WIDGETS (Widgets styles + extend of Bootstrap styles)
 *      (#m04nvs) NAVIGATION (Search + Primary Nav + Nav info + Nav dash)
 *      (#m05mcs) MAIN CONTENT (Template specific styles such as Dash Tiles)
 *      (#m06bos) BOOTSTRAP OVERWRITE + EXTEND STYLES (Overwrite and extend the default bootstrap styles + Datatables plugin)
 *      (#m07hes) HELPERS (Some helper classes)
 *      (#m08gis) FILETYPE ICONS
 *      (#m09res) RESPONSIVE
 *      (#m10rts) RETINA
 */

:root {
  --colors--gray--400: #a1a1aa;
  --colors--main--text-secondary: #18181b;
  --colors--gray--900: #18181b;
  --colors--gray--800: #27272a;
  --colors--gray--700: #3f3f46;
  --colors--gray--600: #52525b;
  --colors--gray--500: #71717a;
  --colors--gray--400: #a1a1aa;
  --colors--gray--300: #d4d4d8;
  --colors--gray--200: #e4e4e7;
  --colors--main--white: white;
  --colors--main--transparent: #fff0;
  --colors--gray--50: #fafafa;
  --colors--main--brand-light: var(--colors--green--100);
  --colors--main--brand-secondary-dark: var(--colors--purple--400);
  --colors--main--brand-secondary: var(--colors--purple--200);
  --colors--main--brand-secondary-light: var(--colors--purple--50);
  --container--global-desktop: var(--size--size-48);
  --container--global-mobile: var(--size--size-24);
  --colors--rentila--green: #72a333;
  --size--size-4: .25rem;
  --colors--green--300: #cae795;
  --colors--green--100: #e9fec2;
  --colors--purple--700: #782ac6;
  --colors--purple--100: #f2e8fd;
  --colors--purple--900: #370c60;
  --colors--purple--300: #d4b5f9;
  --colors--green--700: #548126;
  --colors--purple--50: #f9f5fe;
  --colors--beige--300: #c7b6a9;
  --colors--green--200: #dcfea3;
  --colors--beige--200: #ddd2ca;
  --colors--purple--400: #ba87f5;
  --colors--beige--50: #f7f5f4;
  --colors--purple--200: #e9dafc;
  --colors--purple--600: #8c3ae1;
  --colors--beige--100: #f1ede9;
  --colors--emerald--5: #fdfefc;
  --colors--emerald--10: #fcfdfb;
  --colors--emerald--20: #fafcf9;
  --colors--emerald--30: #f9faf7;
  --colors--emerald--50: #f3f6f0;
  --colors--emerald--100: #eaf1ea;
  --colors--emerald--200: #e5e9e0;
  --colors--emerald--300: #cfdcc6;
  --colors--emerald--400: #8ca877;
  --colors--emerald--500: #6f8c5b;
  --colors--emerald--600: #566e46;
  --colors--emerald--800: #384630;
  --colors--emerald--900: #1f2d1b;
  --colors--red--5:   #fefdfc;
  --colors--red--10:  #fdfbfa;
  --colors--red--20:  #fcfaf8;
  --colors--red--30:  #faf7f4;
  --colors--red--50:  #f6f0eb;
  --colors--red--100: #f1e7df;
  --colors--red--200: #e9ddd2;
  --colors--red--300: #dcc3b0;
  --colors--red--400: #a87a55;
  --colors--red--500: #8c5e3d;
  --colors--red--600: #6e482e;
  --colors--red--800: #46301f;
  --colors--red--900: #2d1d12;
  --colors--green--50: #f8ffe8;
  --colors--green--800: #456620;
  --colors--green--500: #54ad16;
  --colors--green--600: #7fab45;
  --colors--yellow--300: #ffeb0a;
  --colors--yellow--600: #ffbe0a;
  /* Additional color variables for consistency */
  --color-border: #ddd;
  --color-border-light: #ccc;
  --color-text-dark: #333;
  --color-text-muted: #666;
  --color-bg-light: #f9f9f9;
  --color-bg-white: #fff;
  --color-bg-lighter: #fcfcfc;
  --color-error: #cc0000;
  --color-error-alt: #da4f49;
  --color-warning: #f89406;
  --color-info: #33b5e5;
  --color-info-dark: #0088cc;
  --color-info-darker: #107ec0;
  --color-success-alt: #72a333;
  --color-grey-light: #c1c1c1;
  --color-grey-dark: #444333;
  --color-highlight: #fffde3;
  /* Focus state — same green + ring the dark theme already uses, so a focused
     field looks identical in both themes. The base rule in the Forms section
     is deliberately left at (0,2,1) with no !important, so the error state, the
     search boxes and Chosen's inner input still override it on specificity
     alone. Do not widen it into an input:not([type=x]):not([type=y])... chain:
     each :not() adds a class-level component, which pushes the rule to (0,10,1)
     and silently outranks every component focus style in the app. */
  --focus-color: var(--colors--rentila--green);
  --focus-ring: 0 0 0 3px rgba(114, 163, 51, .15);
  --focus-color-error: #b94a48;
  --focus-ring-error: 0 0 0 3px rgba(185, 74, 72, .15);
  /* Payment row status — tints derived from the semantic tokens above.
     Tint weight scales with urgency: late > lost > pending > hover veil. The
     veil sets the floor; no resting tint may fall below it, or a hovered plain
     row reads as more meaningful than a status row. Dark values live in
     main-dark.css. See the tr.late / tr.notpaid rules further down. */
  --color-row-late: #f8dbdb;    /* --color-error @ 14% on white,   1.30:1 */
  /* lost: a near-neutral grey (channel spread 6), NOT the green neutral axis
     the hover veil uses. The shell's green tint is a whisper at 1.09 contrast;
     the same axis at 1.24 is unmistakably green, and green means paid in this
     product (--colors--rentila--green is .seg-paid and .dot.paid), so a
     written-off rent would read as a settled one. A hue that is invisible at
     3% is a statement at 12%. */
  --color-row-lost: #e6e8e2;    /*                                 1.24:1 */
  --color-row-pending: #fde5c3; /* --color-warning @ 24% on white, 1.22:1 */
  --color-row-bar-late: var(--color-error);
  --color-row-bar-pending: var(--color-warning);
  --color-row-bar-lost: var(--colors--gray--400);
  /* The veil is green, not black: this product's neutral is #f3f6f0, a
     green-tinted off-white (white -> #f3f6f0 is a channel delta of 12:9:15).
     An overlay shifts each channel by (255-V) x alpha, so V = rgb(51,102,0)
     puts the veil on the app's own axis; a black veil would drag every hover
     toward #ededed, a dead grey that appears nowhere in the product.
     11%, not 7%: a green veil is WEAKER than black at equal alpha because it
     removes only 40% of the green channel, which carries ~71% of perceived
     luminance (7% black = 1.171 step, 7% green = 1.111). And not below 11%
     either — at 6% a hovered white row computes to exactly #f3f6f0, so the row
     would read as a hole punched through the card instead of a highlight. */
  --color-row-hover-veil: rgba(51, 102, 0, 0.11); /* 1.18:1 step */

  /* Entity avatars (.circle-entity). The real colour is printed per record as
     an inline --av-rgb; this is only the fallback. A triplet and not a hex:
     the dark theme needs the alpha. */
  --av-default: 114, 163, 51;
}

@media print {
    /* Note: !important used throughout print styles to override screen styles */
    .no-print, .noprint, header, footer, .footer, .control-label, #gopro, #announcement, #page-sidebar, #nav-info, #download_options, .sub-header, .icon-chevron-up, #to-top , .form-box-header, .form-actions, #download-modal { display: none !important;}
    .printarea { font-size: 12px; font-family: sans-serif; line-height: normal;}
	.documentfooter { position: fixed; bottom: 0px; width: 700px; margin-left: auto; margin-right: auto;}
	.breakhere {display: block; page-break-before: always; }
}

@page {
	size: A4;
	margin: 15mm 11mm 11mm 11mm;
}

body.login {
    padding: 20px 0 0;
    /* Legacy: background-color #f9f9f9 - now using CSS variable */
    background-color: var(--colors--emerald--50);
    background-position: top center;
    background-repeat: repeat-y;
    background-size: 6px 1px;
}

#login-container {
    width: 320px;
    padding: 20px;
    margin: 0 auto;
    text-align: center;
    border: 1px solid #ddd;
    background-color: var(--color-bg-white);
        border-radius: 10px;
	
	box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.05);
}

#login-container:hover {
	box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.25);
}

#login-container .checkbox {
	text-align:left;
	font-size: 13px;
	padding-left: 47px;
}
#gSignIn{
	display: inline-block;
}

.abcRioButton, .abcRioButtonLightBlue {
	width: 130px;
	margin: 0 6px 5px 0;
	border-radius: 2px !important;
	box-shadow: none !important;
	border: 1px solid #cccccc;
	display: inline-block;
}
.abcRioButtonContents {
	font-family: Manrope, -apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif !important;
	font-weight: normal !important;
	color: #333333 !important;
	padding-right: 32px;
	}
#login-btn-facebook,
#login-btn-google,
#login-btn-yahoo,
#login-btn-twitter {
    width: 130px;
    padding: 6px 0;
}
#login-btn-facebook i {
	margin-left: -10px;
    margin-right: 10px;
    }
#login-btn-yahoo,
#login-btn-facebook {
    margin: 0 6px 5px 0;
}
#login-btn-google,
#login-btn-twitter {
    margin: 0 0 5px;
}

#login-btn-email, #signup-btn {
    margin: 5px 0;
    padding: 4px 0;
    width: 270px;
}

#signup-btn {
	line-height: 32px;
	font-weight: 600;
}

#login-form {
    margin: 0;
    padding-top: 10px;
}


#login-form input[type="text"],
#login-form input[type="email"],
#login-form input[type="password"] {
    width: 229px;
}

.login_copy, .login_head {
    width: 320px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: center;
}

.login_copy {
	font-size: 11px;
}

.login_head h1 {
	font-size: 19px;
	margin: 10px 0px 0px 0px;
}

.showhidepswd {
    right: 0px;
    position: absolute;
    width: auto;
    text-align: center;
    z-index: 10;
    display: inline-block;
    font-size: 12px;
    padding: 5px 10px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
}

.showhidepswd .fal {
    font-size: 13px;
}

.status-green {
	color: var(--colors--rentila--green);
}
.status-red {
	color: #da4f49;
}
/*
=================================================================
(#m02mls) MAIN LAYOUT
=================================================================
*/

body {
    background-color: #f9f9f9;
    color: var(--color-text-dark);
    font-family: Manrope, -apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif;
    line-height: 20px;
}

b {
	font-weight: bold;
}

a {
	cursor: pointer !important;
}

/* Clickable containers (see the data-href handler in js/main.js) */
[data-href] {
	cursor: pointer;
}

h1, h2, h3, h4, h5, b, strong {
	font-weight: 600;
}

h2 {
	font-size: 28px;
}

h5 {
	font-size: 15px;
}

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    font-size: 13px;
    font-family: Manrope, -apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif;
}

button.btn, input[type="submit"].btn {
    font-family: Manrope, -apple-system,BlinkMacSystemFont,segoe ui,Roboto,Oxygen,Ubuntu,Cantarell,open sans,helvetica neue,sans-serif;
}

.lead {
	font-weight: 400;
}

.bolder {
	font-weight: bolder;
}

.lighter {
	font-weight: lighter;
}

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

.nopadding {
	padding: 0px !important;
}

.nomargin {
	margin: 0px !important;
}

.noborder {
	border: none !important;
}

.nowrap {
	white-space: nowrap;
}

.nooverflow {
	overflow: hidden;
}

sub, sup {
    font-size: 9px;
}

.underlined {
	border-bottom: 3px solid var(--colors--rentila--green);
}

.red {
	color: #cc0000;
}

.text-red {
	color: #cc0000 !important;
}

.green, .text-green {
	color: var(--colors--rentila--green) !important;
}

.vivid-green, .text-vivid-green {
	color: green !important;
}

.yellow, .text-yellow {
	color: #f89406 !important;
}

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

.dark-grey, .text-dark-grey {
	color: var(--colors--gray--700) !important;
}

.blue, .text-blue {
	color: #0088cc !important;
}

.dark-blue, .text-dark-blue {
	color: var(--color-info-darker) !important;
}

.muted, .text-muted {
  color: #777;
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, small {
    color: var(--colors--gray--600);
}

.sent {
    position: absolute;
    top: -2px;
    left: 13px;
    font-size: 80%;
}

.warningbadge {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 80%;
    color: #CC0000;
}

.divider {
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	margin-bottom: 15px;
}

.label-success[href], .badge-success[href] {
	background-color: var(--colors--rentila--green);
}



.badge-inverse {
  background-color: var(--colors--gray--700);
}

@media (max-width: 767px) {
	.hidden-desktop.label {
	    display: inline-block !important;
	}
}

label.label-block {
	text-transform: uppercase;
    font-weight: 600;
    font-size: 80%;
}

.badge {
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 9px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.badge {
    display: inline-block;
    padding: 4px 7px;
    font-size: 10px;
    font-weight: 500;
    line-height: 10px;
    text-transform: uppercase;
    text-shadow: none;
}

/* ===== Status pills =====
   Soft tinted pill, sized by its text (the same status reads "Recherche de
   locataire" in French and longer again in Bulgarian, so no fixed width).
   Neutral is the BASE rather than a :not([class*="label-"]) rule, so the
   variants Bootstrap 2 never defined — .label-error (33 uses), .label-default,
   .label-notice, .label-inverse — land on grey instead of losing their
   background entirely. There is deliberately no .label-neutral class: a status
   with nothing to say carries .label alone. Dark values live in main-dark.css. */
.label {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 500;
    line-height: 14px;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 999px;
    border: 1px solid var(--colors--gray--300);
    background: #fafafa;
    color: var(--colors--gray--600);
    white-space: nowrap;
    text-shadow: none;
    box-shadow: none;
    max-width: 100%;
}

/* Colour is for statuses that want something from the user. The compound
   .label.label-* form is deliberate: it keeps these off .badge.label-success,
   which is the green "Acheter un compte Premium" call to action.
   One vocabulary only — the Bootstrap 2 names, because ~700 usages already
   carry them. The semantics of each colour are documented on the rule and in
   RentilaUtil::getStatusLabelClassMap(), not in a second set of class names. */

/* Attention — amber: a lease ending, anything expiring */
.label.label-warning {
    background: #fffaeb;
    color: #b54708;
    border-color: #fedf89;
    font-weight: 600;
}

/* In progress — blue: looking for a tenant, works under way */
.label.label-info,
.label.label-notice {
    background: #f5faff;
    color: #175cd3;
    border-color: #b2ddff;
    font-weight: 600;
}

/* Critical — red: blocking, refused, failed */
.label.label-important,
.label.label-error,
.label.label-danger {
    background: #fef3f2;
    color: #b42318;
    border-color: #fecdca;
    font-weight: 600;
}

/* Success — green, kept for confirmations */
.label.label-success {
    background: #f6fef9;
    color: var(--colors--green--800);
    border-color: #c9e59b;
    font-weight: 600;
}

/* A label that performs an action ("Créer une location") is not a status, but
   it sits in the same cell as one, so it keeps the pill form and the green of
   .label-success — only the hover tells them apart. Opted into with
   .label-action rather than inferred from an ancestor <a>, because Public /
   Privé are statuses that happen to be clickable and must stay pills. */
.label.label-action {
    /* .label is inline-flex, so whitespace between a leading <i> and the text
       is dropped — the gap has to be declared. */
    gap: 4px;
    background: #f6fef9;
    color: var(--colors--green--800);
    border-color: #c9e59b;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
}
a:hover > .label.label-action,
a.label.label-action:hover {
    background: var(--colors--green--100);
    border-color: #c9e59b;
    color: var(--colors--green--800);
    text-decoration: none;
}

/* Draggable merge tags ("Bien Ville", "Locataire Nom") in the model editors.
   They are .label.label-info pills, so only the things a pill does not give
   them belong here: the grab cursor, room to breathe when they wrap onto
   several lines, and a hover that deepens the fill instead of repainting it.
   The old per-page rules painted a dark green on hover, left over from when
   .label was a solid chip with white text - on the soft pill it put blue text
   on a green fill. */
.tagelement {
	cursor: move;
	margin: 2px 6px 2px 0;
	transition: background .15s;
}

.label.tagelement:hover,
.label.tagelement:focus {
	background: #e6f2ff;
}

#page-container {
    width: 100%;
    min-width: 320px;
    background-color: var(--colors--emerald--50);
}

#inner-container {
}

#page-sidebar {
    width: 230px;
    position: absolute;
    border-right: 1px solid rgba(0,0,0,0.01);
    margin: 5px 3px;
}

#page-sidebar {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.10) transparent;
  transition: scrollbar-color 0.2s ease;
}

/* Only tint the track/thumb when hovering the sidebar itself */
#page-sidebar:hover {
  scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}

/* WebKit browsers: Chrome, Edge, Safari, Opera */
#page-sidebar::-webkit-scrollbar {
  width: 5px;
}

#page-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

#page-sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  border: 1px solid transparent; /* creates a small "inset" gap */
  background-clip: content-box;
  transition: background-color 0.2s ease;
}

#page-sidebar:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.22);
}

#page-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.32);
}

#page-content {
    margin: 2px 0 0 232px;
    padding: 20px;
    background-color: transparent;
    border-left: 1px solid rgba(0,0,0,0.08);
    min-height: 1200px;
    overflow-x: clip;

}

footer {
    line-height:1.6em;
    font-size: 14px;
    height: auto;
    padding: 25px 25px 45px 25px;
    /*background-color: var(--colors--emerald--20);*/
    border-top: 1px solid rgba(0,0,0,0.03);
    border-left: 1px solid rgba(0,0,0,0.07);
    margin: 0 0 0 232px;
    color: var(--colors--gray--700);
}

footer p {
	font-size: 14px;
}

footer a {
	color: #25272B;
	transition: 0.2s;
	-moz-transition: 0.2s;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
}

footer a:hover {
	color: #949598;
	text-decoration: none;
	transition: 0.2s;
	-moz-transition: 0.2s;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
}

footer .span2 {
	padding-bottom: 15px;
	text-align:right;
}

@media (max-width: 767px) {
	footer .span2 {
	text-align: center;
	}
}

footer h5 {
	border-bottom: 1px solid #dfe1e3;
	padding-bottom: 15px;
	margin-top: 0px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
}

footer ul {
	list-style: none;
	margin:0;
}

footer ul li{
	padding-bottom: 15px;
	font-size: 13px;
	line-height: 17px;
}

footer .copy {
	font-size: 12px;
	color: #888888;
}

footer .copy a{
	font-size: 12px;
}

/* Footer Navigation
----------------------------- */
.footer-navigation {
  text-align: center;
  font-size: 12px;
  padding-bottom: 15px;
}
.footer-navigation ul {
  list-style: none;
  margin: 0px;
}
.footer-navigation ul li {
  margin: 0;
}
.footer-navigation ul li, .footer-navigation ul li:after {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
}
.footer-navigation ul li:after {
  width: 6px;
  height: 6px;
  content: "";
  margin: 0 10px;
  background: #bbb;
      border-radius: 10px;
}
.footer-navigation ul li:last-child:after {
  display: none;
}
.footer-navigation ul a {
  font-weight: bold;
  color: #404040;
}

ol.ol_styled {
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 10px;
}
ol.ol_styled li {
  margin: 0 0 0;
  counter-increment: my-awesome-counter;
  position: relative;
  line-height: 28px
}
ol.ol_styled li::before {
  content: counter(my-awesome-counter);
  color: #ffffff;
  font-size: 1rem;
  font-weight: bold;
  position: absolute;
  --size: 24px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 2px;
  background: var(--colors--rentila--green);
  border-radius: 50%;
  text-align: center;
}

/*
=================================================================
(#m03hws) HEADER WIDGETS
=================================================================
*/

.widget {
    padding: 0;
}

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

.widget ul li {
    padding: 0 5px;
}

.widget > li {
    width: 250px;
    padding: 3px 5px;
    font-size: 12px;
}

.widget.widget-fluid > li {
    width: auto;
    min-width: 180px;
    max-width: 250px;
}

.widget > li:first-child {
    margin: 3px 0 0;
}

.widget li.new-on {
    background-color: #f9f9f9;
}

.widget li.li-hover:hover {
    background-color: #f9f9f9;
}

.widget li.widget-heading {
    padding: 2px 0px 2px 10px;
    color: rgba(0,0,0,0.4);
    font-size: 11px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--colors--emerald--30);
    background-color: #f5f5f5;
}

.widget > li.widget-heading > a > [class^="icon-"],
.widget > li.widget-heading > a >[class*=" icon-"],
.widget > li.widget-heading > [class^="icon-"],
.widget > li.widget-heading > [class*=" icon-"]{
    font-size: 18px;
    font-weight: normal;
    vertical-align: bottom;
}

.widget > li.widget-heading > a:hover {
    color: var(--colors--gray--500);
    text-decoration: none;
}

.widget li.label {
    padding: 5px;
    width: auto;
    display: block;
}

.widget li.divider {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.widget a.widget-link {
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal;
    color: inherit;
    font-weight: bold;
}

.widget a.widget-link:hover {
    text-decoration: underline;
    background: none !important;
    color: inherit;
}

.widget a.widget-link:hover [class^="icon-"],
.widget a.widget-link:hover [class*=" icon-"] {
    text-decoration: none;
}

.widget .media {
    margin: 0;
    line-height: 15px;
}

.widget .media-heading {
    margin: 0;
}

.widget .media-heading .label {
    font-size: 10px;
    float: right;
}

.widget .media-heading .date {
    font-size: 11px;
    float: right;
    font-weight: normal;
    color: #999999;
}

/*
=================================================================
(#m04nvs) NAVIGATION
=================================================================
*/

/* Header */
#loading {
    /*padding: 15px 10px 0px 15px;*/
    font-size: 20px;
}

#loading i {
    color: var(--color-bg-white);
}

/* Search */
#sidebar-search {
    margin: 0;
    padding: 0;
    height: 30px;
    border-bottom: 1px solid #eee;
    background-color: var(--color-bg-white);
	border-bottom: 1px solid #ccc;
}

#sidebar-search input[type=text] {
    padding: 0 10px;
	height: 30px;
	line-height: normal;
	width: 157px;
	border: none;
	background-color: #ffffff;
	font-size: 13px;
}

.lt-ie9 #sidebar-search input[type=text] {
    line-height: 30px;
}

#sidebar-search button {
    border: none;
	background-color: #ffffff;
	margin: 5px 0 0;
	padding: 0;
	color: var(--color-text-dark);
}

#sidebar-search button:hover {
    color: #000000;
}

/* Primary Menu */
#primary-nav ul {
    list-style: none;
    margin: 0;
    padding: 0px 0px 15px 0px;
}

#primary-nav ul li.separator {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 5px 10px;
    font-size: 11px;
    color: rgba(0,0,0,0.4);
}

#primary-nav li a {
	font-size: 14.5px;
    display: block;
    margin: 3px;
    color: var(--colors--gray--700);
    padding: 5px 5px 5px 40px;
    border-bottom: 1px solid rgba(0,0,0,0.01);
    border-radius: 5px;
    text-shadow: 0px 1px 0px rgba(255,255,255,0.08);
	text-decoration: none;

}

#primary-nav li a:hover, #primary-nav li a:hover i, #primary-nav li a.active:hover, #primary-nav li a.active:hover i, #primary-nav li ul li a:hover, #primary-nav li ul li a:hover i, #primary-nav li ul li a.active:hover, #primary-nav li ul li a.active:hover i {
	color: var(--color-bg-white) !important;
	background-color: #33b5e5 !important;
	text-decoration: none;
	text-shadow:none;
	}

#primary-nav li a.active {
    /*margin: 0px 0 0;*/
    margin: 3px;
	padding-left: 40px;
	color: #0088cc;
	background: #ffffff;
	background-color: #ffffff;
	border-top: none;
	border-radius: 5px;
	text-decoration: none;
	font-weight: bolder;
}

#primary-nav li a.active i{
	color:#0088cc;
	padding-left:0px;
	text-decoration: none;

}
#primary-nav li a.open{
	border-bottom: none;
	margin: 3px 3px 0 3px;
	border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

#primary-nav li a.open.active {
    border-bottom-left-radius: 0px;
}

#primary-nav li i {
    margin: 0 5px 0 -30px;
    color: color-mix(in srgb, var(--colors--emerald--900) 75%, transparent);
	font-size: 16px;
	position: relative;
	bottom: -2px;
}

#primary-nav li i.fad, #primary-nav li i.fas, #primary-nav li i.fa, #primary-nav li i.fab, #primary-nav li i.fal {
    margin: 0 9px 0 -30px;
    color: color-mix(in srgb, var(--colors--emerald--900) 75%, transparent);
	font-size: 17px;
	position: relative;
	bottom: -1px;
	width: 17px;
    text-align: center;
}

/* Chevron on expandable left-menu items — overrides the general i.fas rule above (same specificity, later wins) */
#primary-nav li > a .menu-chevron {
	float: right;
	font-size: 0.7em;
	line-height: 20px;
	height: 20px;
	width: 16px;
	text-align: center;
	display: inline-block;
	margin: 0 0 0 6px;
	color: inherit;
	position: static;
	bottom: auto;
	transform: rotate(-90deg);
	transition: transform 0.25s ease;
}

/* Expanded state; also previews open on hover before the click fires */
#primary-nav li.submenu-open > a .menu-chevron,
#primary-nav li > a:hover .menu-chevron {
	transform: rotate(0deg);
}

#primary-nav li b.quickadd {
	opacity: 0;
    display: inline;
    margin-right: -5px;
    margin-top: 1px;
    min-width:0px;
    height: 0px;
    float: right;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

#primary-nav li a:hover b.quickadd {
	opacity: 0.5;
	-webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

#primary-nav li a:hover b.quickadd:hover {
	opacity: 1;
	-webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

#primary-nav li span {
    display: block;
    min-width: 20px;
    height: 20px;
    float: right;
    font-size: 11px;
    font-weight: 600;
    color: white;
    text-align: center;
    background-color: var(--colors--rentila--green);
            border-radius: 10px;
    margin-top: 1px;
    margin-right: 2px;
    padding: 0px 2px;
    text-shadow: none !important;
}

#primary-nav li span.red {
    display: block;
    width: 20px;
    height: 20px;
    float: right;
    font-size: 11px;
    color: white;
    text-align: center;
    background-color: #cc0000;
            border-radius: 10px;
    margin-top: 1px;
    margin-right: 2px;
    text-shadow: none;
}

#primary-nav li span.orange {
    display: block;
    width: 20px;
    height: 20px;
    float: right;
    font-size: 11px;
    color: white;
    text-align: center;
    background-color: #f89406;
            border-radius: 10px;
    margin-top: 1px;
    margin-right: 2px;
    text-shadow: none;
}

/* Neutral badge — a plain count that asks nothing of the user (Corbeille,
   Communauté, Messages, Annonces). Same geometry as .red / .orange: colour only. */
#primary-nav li span.grey {
    display: block;
    width: 20px;
    height: 20px;
    float: right;
    font-size: 11px;
    color: var(--colors--gray--700);
    text-align: center;
    background-color: #e8e8ea;
            border-radius: 10px;
    margin-top: 1px;
    margin-right: 2px;
    text-shadow: none;
}

#primary-nav li a:hover span {
  display: none !important;
}

/* Submenu */
#primary-nav li.active > ul {
    display: block;
}

#primary-nav li > ul {
    padding: 0;
    margin: 0;
    display: none;
}

#primary-nav li > ul a {
  margin: 0 3px;
  padding-left: 45px !important;
	background-color: var(--colors--emerald--20);
	font-size: 13px;
	border-bottom: none;
	border-top: none;
	border-radius: 0px;
  border-left: 3px solid var(--colors--emerald--300);
}

#primary-nav li > ul a.active {
	margin: 0 3px;
	border-bottom: none;
	border-top: none;
	border-radius: 0px;
}

#primary-nav li >ul a:hover{
	/*margin:0;*/
	background:#ffffff !important;
}

#primary-nav li > ul a.active {
    /*margin: 0;*/
}

#primary-nav li > ul > li:first-child > a {
    margin: 0px 3px;
	border-radius:0px;
}

#primary-nav li > ul > li:last-child > a {
    margin: 0px 3px 3px 3px;
	border-bottom-right-radius:3px;
  border-bottom-left-radius: 5px;
}

/* Navigation info */
#nav-info {
    list-style: none;
    margin: -20px -20px 20px;
    padding: 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    background-color: var(--colors--emerald--50);
    position: sticky;
    top: 50px;
    z-index: 999;
}

#nav-info > li:first-child {
    background: none;
    padding: 0 15px;
}

#nav-info > li {
    float: left;
    padding: 0 15px 0 20px;
    height: 30px;
    line-height: 33px;
    color: var(--colors--gray--500);
    font-size: 12px;
    background-image: url('../img/template/nav_info_seperator.png');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 5px 30px;
}

#nav-info > li > a {
    color: var(--colors--gray--700);
}

#nav-info > li.active, #nav-info > li.active a {
    color: var(--colors--gray--500);
}

/* Navigation Dash */
.nav-dash {
    list-style: none;
    margin: 0 -20px 20px;
    padding: 10px 0;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

.nav-dash > li {
    display: inline-block;
    margin: 0 3px;
}

.nav-dash > li > a {
    position: relative;
    font-size: 32px;
    color: #777;
    display: block;
    background-color: #ddd;
    border: 1px solid #ccc;
    padding: 27px 22px;
    margin: 0 0 5px;
            border-radius: 45px;
}

.nav-dash > li > a:hover,
.nav-dash > li.active > a {
    color: var(--color-bg-white);
    background-color: #db4a39;
    border: 1px solid #db4a39;
    text-decoration: none;
}

.nav-dash > li > a > .badge,
.nav-dash > li > a > .label {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 0 0 3px;
    padding: 3px 7px;
}

#gopro,
#announcement {
	margin: -20px -20px 20px;
	padding: 10px 20px;
	background: #fcf8e3;
	border-bottom: 1px solid #fbeed5;

}
#announcement a {
	color: inherit;
	text-decoration: none;
  display: inline-flex;
  align-items: center;      /* vertical centering */
  justify-content: center;  /* keeps the row centered horizontally */
}
@media (max-width: 480px) {
	#gopro,
	#announcement {
	margin: -10px -20px 10px !important;

	}
}
/*
=================================================================
(#m05mcs) MAIN CONTENT
=================================================================
*/



.sub-header {
    margin: 10px -20px 20px;
    padding: 0px 20px 10px;
    border-bottom: 1px solid #e3e3e3;
}

.grid-box,
.grid-boxes > div {
    background-color: #ddd;
    padding: 5px;
    margin: 0 0 20px;
    text-align: center;
    font-size: 12px;
}

/*===== Large round buttons =====*/

.round-buttons { width: 100%; margin: 0px ; text-align: center; padding: 0px; font-size: 0; line-height: 1; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; }
.round-buttons > li { margin: 4px 12px; position: relative; display: inline-block; text-align: center; width:135px; height:125px; position:relative; }

.round-buttons h5 { font-weight: 400;
  text-transform:uppercase;
  font-size: 12px;
  margin: 0px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.round-depth { margin: 4px 12px; position: relative; display: inline-block; text-align: center; width:85px; height:85px; border:1px solid #d7d7d7; border-radius:50%; position:relative; background: #fcfcfc; box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.05);}

.round-depth:hover { box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.20);}

.depth { overflow: hidden; margin: 4px; width: 77px; height: 77px; border-radius: 50%; background-color: #66ccff;
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.3);

-webkit-transition: all 0.1s ease-in-out;
   -moz-transition: all 0.1s ease-in-out;
     -o-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;

}

.depth.red { background-color: #ff4444;

}

.depth.green { background-color: #95c34c;
}

.depth:active { background: #666666;
  box-shadow: 0 0 4px rgba(0,0,0,0.2) inset;
    }

.depth > a { display: block; width: 67px; height: 67px; position: relative; text-align: center; border-radius: 50%; cursor: pointer; margin: 5px;
  background: #f7f7f7;
  background: -moz-linear-gradient(top,  #ffffff 0%, #f7f7f7 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f7f7f7));
  background: -webkit-linear-gradient(top,  #ffffff 0%,#f7f7f7 100%);
  background: -o-linear-gradient(top,  #ffffff 0%,#f7f7f7 100%);
  background: -ms-linear-gradient(top,  #ffffff 0%,#f7f7f7 100%);
  background: linear-gradient(top,  #ffffff 0%,#f7f7f7 100%);

  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
    }

.depth > a:active { box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; background: #fafafa; }

.depth > a > i { font-size: 32px; margin: 17px 0; width: 32px; float: none; color: color-mix(in srgb, var(--colors--emerald--900) 70%, transparent); text-shadow: 0 1px 0 #ffffff; height: 32px;
  -webkit-transition: all 0.1s ease-in-out;
     -moz-transition: all 0.1s ease-in-out;
       -o-transition: all 0.1s ease-in-out;
          transition: all 0.1s ease-in-out;
}
.depth > a:hover { background: #fcfcfc; }
.depth > a:hover > i { color: #222222; text-decoration: none; }
.depth > a:active > i { color: #666666; }

/*===== Info box =====*/
.info-box {
	background:#ffffff;
	border:none;
	border-radius: 3px;
	padding: 7px;
	display: inline-block;
}

.info-box.info {
	font-size: 0.9em;
}

.info-box .title, .info-box-result .title {
	text-transform: uppercase;
	display: block;
	font-weight: bold;
	font-size: 0.8em;
	line-height: 15px;
}

/* The result card's caption follows the form labels: sentence case, medium
   weight. display/line-height still come from the rule above. Plain .info-box
   keeps the uppercase caption. */
.info-box-result .title {
	text-transform: none;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--colors--gray--700);
}
.info-box .value {
	text-transform: uppercase;
	display: block;
	font-weight: 500;
	font-size: 1.8em;
	line-height: 1.4em;
	vertical-align:top;
}
.info-box-result {
	display:block;
	border:none;
	border-radius: 10px;
	padding: 7px;
	background-color: var(--colors--emerald--20);
}

.info-box-result .value{
	text-transform: uppercase;
	display: block;
	font-weight: 500;
	font-size: 2.6em;
	line-height: 1.2em;
}

.info-box-result [class^="icon-"], .info-box-result [class*="icon-"]{
	font-size: 52px;
	color: #ccc;
}

.info-box-result [class^="fa-"], .info-box-result [class*="fa-"]{
	font-size: 50px;
	color: #ccc;
}

.info-box-result [class*="icon-"].circle,
.info-box-result [class*="fa-"].circle {
    color: color-mix(in srgb, var(--colors--emerald--900) 30%, transparent);
    background: var(--colors--emerald--50);
    padding: 5px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;

}
.info-box-result [class*="icon-"].circle.inline,
.info-box-result [class*="fa-"].circle.inline {
    position: relative;
    top: -10px;
}
.info-box-result [class*="icon-"].circle::before,
.info-box-result [class*="fa-"].circle::before {
    font-size: 60%;

}

.info-box-result [class*="icon-"].circle-small,
.info-box-result [class*="fa-"].circle-small {
    color: color-mix(in srgb, var(--colors--emerald--900) 60%, transparent);
    background: var(--colors--emerald--50);
    padding: 3px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;

}

.info-box-result [class*="icon-"].circle-small::before,
.info-box-result [class*="fa-"].circle-small::before {
    font-size: 39%;

}

.info-box-result [class*="icon-"].circle-small.red,
.info-box-result [class*="fa-"].circle-small.red {
    color: color-mix(in srgb, var(--colors--red--800) 60%, transparent);
    background: var(--colors--red--50);
    padding: 3px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;

}

/* Restore Font Awesome layout when .inline is also applied */
.inline[class*="fa-"],
.inline.fa {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.inline[class*="fa-"]::before,
.inline.fa::before {
  display: block;
}

/* Dash Tiles */
.dash-tile {
    min-height: 110px;
    background-color: var(--color-bg-white);
	border: 1px solid rgba(0, 0, 0, 0.1);
	margin: 0 0 20px;
	padding: 0px 10px 5px 10px;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.05);
	border-radius: 10px;
}

.dash-tile-2x {
    min-height: 400px;
}

.dash-tile-header {
    margin: 0 -10px;
    padding: 0 4px 0 10px;
    min-height: 38px;
    line-height: 40px;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.02);
    background-color: var(--colors--emerald--10);
	  border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-tile-options {
    float: right;
    height: 38px;
    line-height: 38px;
}

.dash-tile-options a:hover {
    text-decoration: none;
    color: var(--color-text-dark);
}

.dash-tile-content {
    margin: 0 -14px;
    padding: 5px;
}

.dash-tile-content .printarea{
    font-size: 12px;
}

.dash-tile-2x .dash-tile-content {
    padding: 15px;
}

.dash-tile-content-inner {
    height: 130px;
}

.dash-tile-content-inner-white {
	border: 1px solid #ddd;
  border: ;
	background: var(--color-bg-white);
	padding: 10px;
  border-radius: 10px;
}

.dash-tile-2x .dash-tile-content-inner {
    height: 330px;
}

.dash-tile-content-inner-fluid {
    min-height: 130px;
}

.dash-tile-2x .dash-tile-content-inner-fluid {
    min-height: 330px;
}

.dash-tile-content-light {
    background-color: #ffffff;
    padding: 10px;
}

.dash-tile-content .alert {
    margin: 5px 0;
}

.dash-tile-icon,
.dash-tile-text {
    line-height: normal;
    color: var(--color-bg-white);
}

.dash-tile-icon{
    padding: 5px;
    font-size: 30px;
    color: color-mix(in srgb, var(--colors--emerald--900) 40%, transparent);
    width: 42px;
    height: 42px;
    background: var(--colors--emerald--30);
    border-radius: 50%;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dash-tile-icon > i.fad, .dash-tile-icon > i.fas, .dash-tile-icon > i.fa{
	margin-left: 0px;
	width: 42px;
	text-align: center;
	line-height: 40px;
}

.dash-tile-text{
	float:right;
	padding:15px 0 0 0;
	font-size:36px;
	font-weight: 500;
	text-align:right;
	line-height: inherit;
}

.dash-tile-text.green{
	color: var(--colors--rentila--green);
}
.dash-tile-text small{
	display: inline-block;
	font-size:13px;
	font-weight:normal;
	text-transform: uppercase;
	text-align:left;
	color:var(--colors--gray--500);
}

.dash-tile-text small b.red{
	color: #cc0000;
}

.dash-tile-text span b{
	color: var(--colors--gray--700);
}

.dash-tile-text [class^="icon-"], .dash-tile-text [class*="icon-"]{
	display: inline-block;
	font-size:14px;
	font-weight:normal;
	text-transform: uppercase;
	text-align:left;
	color:#c1c1c1
}

.dash-tile-leaf .dash-tile-header,
.dash-tile-dark .dash-tile-header,
.dash-tile-ocean .dash-tile-header,
.dash-tile-flower .dash-tile-header,
.dash-tile-fruit .dash-tile-header,
.dash-tile-oil .dash-tile-header,
.dash-tile-balloon .dash-tile-header,
.dash-tile-doll .dash-tile-header {
    border-bottom: 2px solid #f9f9f9;
    background-color: #eee;
    opacity: 0.45;
    filter: alpha(opacity=45);
}

.dash-tile-leaf.no-opacity .dash-tile-header,
.dash-tile-dark.no-opacity .dash-tile-header,
.dash-tile-ocean.no-opacity .dash-tile-header,
.dash-tile-flower.no-opacity .dash-tile-header,
.dash-tile-fruit.no-opacity .dash-tile-header,
.dash-tile-oil.no-opacity .dash-tile-header,
.dash-tile-balloon.no-opacity .dash-tile-header,
.dash-tile-doll.no-opacity .dash-tile-header {
    opacity: 1;
    filter: alpha(opacity=100);
}

.dash-tile-leaf:hover,
.dash-tile-dark:hover,
.dash-tile-ocean:hover,
.dash-tile-flower:hover,
.dash-tile-fruit:hover,
.dash-tile-oil:hover,
.dash-tile-balloon:hover,
.dash-tile-doll:hover {
    opacity: 0.90;
    filter: alpha(opacity=90);
}

.dash-tile-leaf.no-opacity:hover,
.dash-tile-dark.no-opacity:hover,
.dash-tile-ocean.no-opacity:hover,
.dash-tile-flower.no-opacity:hover,
.dash-tile-fruit.no-opacity:hover,
.dash-tile-oil.no-opacity:hover,
.dash-tile-balloon.no-opacity:hover,
.dash-tile-doll.no-opacity:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.dash-tile-grey {
	background-color: #ffffff;
}

.dash-tile-header .btn {
color: color-mix(in srgb, var(--colors--emerald--900) 45%, transparent);
}

.dash-tile-leaf {
    background-color: #c2db39;
}

.dash-tile-dark {
    background-color: #ddd;
}

.dash-tile-ocean {
    background-color: #3991db;
}

.dash-tile-flower {
    background-color: #9139db;
}

.dash-tile-fruit {
    background-color: #db9839;
}

.dash-tile-oil {
    background-color: #d9db39;
}

.dash-tile-balloon {
    background-color: #db6739;
}

.dash-tile-doll {
    background-color: #db39bb;
}

/* Dashboard steps - .step / .steps are shared with the apply wizard */
.steps a, .steps a:hover{
	text-decoration: none;
	color: #555555;
}

.steps h3{
	font-weight: 600;
    letter-spacing: -0.5px;
    font-size: 22px;
    margin: 0px;
}

.steps .lead{
    font-size: 17px;
    margin: 0px 0px 5px 0px;
}

.step {
	border: 1px solid #f1f1f1;
	padding: 12px 20px;
	background-color: white;
	border-radius: 5px;
  flex-shrink: 0;
}

/* Dashboard onboarding widget */
.onb-card {
	background: #fff;
	border: 1px solid var(--colors--gray--200);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(24,24,27,.04), 0 8px 24px rgba(24,24,27,.04);
	padding: 32px;
}

.onb-title {
	margin: 0 0 20px 0;
	padding: 0;
	border: 0;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.4px;
	line-height: 1.2;
	color: var(--colors--gray--900);
}

.onb-progress {
	margin-bottom: 24px;
}

.onb-progress__track {
	height: 8px;
	border-radius: 999px;
	background: var(--colors--gray--200);
	overflow: hidden;
}

.onb-progress__fill {
	height: 100%;
	border-radius: 999px;
	background: var(--colors--rentila--green);
	min-width: 10px;
	transition: width .6s;
}

.onb-progress__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: 8px;
	font-size: 14px;
	color: var(--colors--gray--500);
}

.onb-progress__meta b {
	color: var(--colors--gray--900);
}

/* .row-fluid forces display:block on anything matching [class*="span"], which
   the single column still needs, so the grid is stated at that specificity too.
   The columns are left to the modifier: a grid with none declared is one column */
.onb-steps,
.row-fluid .onb-steps {
	display: grid;
	gap: 16px;
}

.onb-steps--3 {
	grid-template-columns: repeat(3, 1fr);
}

/* the whole card is the link, so the anchor carries the card styles.
   isolation keeps the watermark's negative z-index inside the card: it then
   paints over the card background but under the text, and overflow crops it
   to the rounded corner. The card's own box-shadow is not clipped by its
   overflow, so the current ring and the focus ring both survive */
.onb-step,
.onb-step:hover,
.onb-step:focus {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 20px;
	border: 1px solid var(--colors--gray--200);
	border-radius: 12px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}

/* background texture, cropped by the bottom right corner of the card */
.onb-bg {
	position: absolute;
	right: -34px;
	bottom: -40px;
	z-index: -1;
	font-size: 170px;
	line-height: 1;
	color: var(--colors--gray--900);
	opacity: .02;
	pointer-events: none;
	transform: rotate(-10deg);
	transition: transform .3s ease;
}

.onb-step--current .onb-bg {
	right: -40px;
	color: var(--colors--rentila--green);
	opacity: .05;
}

.onb-step:hover .onb-bg {
	transform: rotate(-5deg) scale(1.05);
}

.onb-step:hover {
	border-color: var(--colors--gray--300);
	box-shadow: 0 4px 12px rgba(24,24,27,.06);
	transform: translateY(-1px);
}

.onb-step:focus,
.onb-step:focus-visible {
	outline: none;
	border-color: var(--colors--rentila--green);
	box-shadow: 0 0 0 4px var(--colors--green--50), 0 6px 16px rgba(114,163,51,.12);
}

.onb-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin-bottom: 10px;
	border-radius: 50%;
}

.onb-ico b {
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
}

.onb-ico svg {
	width: 24px;
	height: 24px;
}

.onb-eyebrow {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--colors--gray--400);
}

.onb-step h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--colors--gray--900);
}

.onb-step .lead {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--colors--gray--500);
}

/* done */
.onb-step--done {
	background: var(--colors--gray--50);
}

.onb-step--done h3 {
	color: var(--colors--gray--600);
}

.onb-step--done .onb-ico {
	background: var(--colors--rentila--green);
	color: #fff;
	opacity: .45;
}

.onb-status {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--colors--gray--900);
}

.onb-tick {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--colors--rentila--green);
	color: #fff;
}

.onb-tick svg {
	width: 10px;
	height: 10px;
}

/* current */
.onb-step--current,
.onb-step--current:hover,
.onb-step--current:focus {
	border: 1.5px solid var(--colors--rentila--green);
	box-shadow: 0 0 0 4px var(--colors--green--50), 0 6px 16px rgba(114,163,51,.12);
}

.onb-step--current .onb-ico {
	background: var(--colors--rentila--green);
	color: #fff;
}

.onb-step--current .onb-eyebrow {
	color: var(--colors--green--700);
}

/* 8px here plus the 6px card gap makes the 14px above the button */
.onb-step--current .lead {
	margin-bottom: 8px;
}

.onb-cta {
	margin-top: auto;
	padding: 9px 16px;
	border-radius: 8px;
	background: var(--colors--rentila--green);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	transition: background-color .15s;
}

.onb-step--current:hover .onb-cta {
	background: var(--colors--green--700);
}

/* to do */
.onb-step--todo .onb-ico {
	background: #fff;
	border: 1.5px solid var(--colors--gray--300);
	color: var(--colors--gray--500);
}

/* Full width strip along the bottom edge of the card. Scoped to .onb-card so the
   top margin outranks ".well h4 {margin-top:0}", which is one class and one
   element and would otherwise pull the strip up against the cards */
.onb-card .onb-help {
	margin: 28px -32px -32px;
	padding: 20px 32px;
	border: 0;
	border-top: 1px solid var(--colors--gray--200);
	background: var(--colors--gray--50);
	border-radius: 0 0 16px 16px;
}

/* the starter widget owns the screen: no premium banner, no shortcut tiles */
.onb-active #gopro,
.onb-active .qa-tiles {
	display: none;
}

@media (max-width: 900px) {
	.onb-steps--3 {
		grid-template-columns: 1fr;
	}

	.onb-bg {
		font-size: 120px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.onb-bg {
		transition: none;
	}

	.onb-step:hover .onb-bg {
		transform: rotate(-10deg);
	}
}

@media (max-width: 767px) {
	.onb-card {
		padding: 20px;
	}

	.onb-card .onb-help {
		margin: 24px -20px -20px;
		padding: 16px 20px;
	}
}

/* Images with text */
.content-text img.pull-left {
    margin: 0 20px 10px 0;
}

.content-text img.pull-right {
    margin: 0 0 10px 20px;
}

/* Scroll to top link */
#to-top {
    font-size: 20px;
    position: fixed;
    bottom: 20px;
    left: 160px;
    color: var(--colors--gray--500);
    display: none;
}

#to-top:hover {
    text-decoration: none;
}

/* Charts */
.chart {
    height: 300px;
    margin: 20px;
}

.chart-live {
    height: 540px;
    margin: -20px;
}

.chart-tooltip {
    position: absolute;
    display: none;
    color: var(--color-bg-white);
    background-color: var(--color-text-dark);
    padding: 2px 5px;
}

.chart-pie-label {
     font-size: 10px;
     text-align: center;
     padding: 2px 5px;
     color: var(--color-bg-white);
}

/* Errors Page */
#error-tabs {
    width: 320px;
    margin: 0 auto 20px;
}

#error-tabs li {
    font-size: 15px;
}

.error-container {
    padding: 20px;
    text-align: center;
    border: 10px solid #eee;
    background: #f9f9f9;
}

.error-code {
    font-size: 120px;
    line-height: 120px;
    color: #db4a39;
    margin-bottom: 30px;
}

.error-text {
    font-size: 26px;
    line-height: 26px;
    margin-bottom: 30px;
}

.error-search,
.error-search div,
.error-search input {
    margin: 0;
}

/* FullCalendar */
#fc-external-events {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 5px 10px;
}

.fc-external-event {
    background-color: #db4a39;
    padding: 2px;
    color: var(--color-bg-white);
    margin-bottom: 5px;
    cursor: move;
    border: 1px dashed var(--color-text-dark);
}

.fc-header td{
    background: var(--colors--emerald--10);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: none;
}

.fc-header-title h2 {
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
}

.fc-grid .fc-day-number {
    padding: 5px 10px;
} 

.mini-calendar .fc-header-title h2 {
    font-size: 16px;
}

.mini-calendar .fc-header td {
    padding: 3px 10px;
    vertical-align: middle;
    border-bottom: none;
}

.mini-calendar .fc-header .fc-header-right .fc-button-today, .mini-calendar .fc-header .fc-header-left .fc-button-next, .mini-calendar .fc-header .fc-header-left .fc-button-prev {
    display: none;
}

.mini-calendar .fc-header .fc-button {
    margin-bottom: 0px;
}


.fc-header .fc-button {
	text-transform: capitalize;
	background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.15);
            box-shadow: none;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.08);
            border-radius: 7px;
    -webkit-appearance: none;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.fc-button-month {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}
.fc-button-agendaDay {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}
.fc-button-agendaWeek{
    border-radius: 0px !important;
}
.fc-header .fc-button-next {
   margin-left: 5px;
}

.fc-widget-header{
    font-weight: 600;
}

.fc-button-prev {
    -webkit-border-top-right-radius: 0px !important;
    -moz-border-top-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
    -webkit-border-bottom-right-radius: 0px !important;
    -moz-border-bottom-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.fc-button-next {
    -webkit-border-top-left-radius: 0px !important;
    -moz-border-top-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
    -webkit-border-bottom-left-radius: 0px !important;
    -moz-border-bottom-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.fc-state-hover,
.fc-state-hover .fc-button-inner {
    background-color: #eeeeee !important;
    color: #333333;
}

.fc-state-down,
.fc-state-down .fc-button-inner {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: inset 1px 2px 0px rgba(0,0,0,.05), 0 0px 0px rgba(0,0,0,.05) !important;
            background-color: rgba(114, 163, 51, 0.14) !important;
}

.fc-state-active,
.fc-state-active .fc-button-inner {
    color: var(--color-text-dark);
    box-shadow: inset 1px 2px 0px rgba(0,0,0,.05), 0 0px 0px rgba(0,0,0,.05) !important;
            background-color: rgba(114, 163, 51, 0.14) !important;
}

.fc-state-highlight {
    background-color: var(--colors--emerald--10);
    box-shadow: inset 2px 0px 0px var(--colors--rentila--green), 0 0px 0px var(--colors--rentila--green) !important;
            font-weight: 600;
    font-size: 130%;
}

table.fc-border-separate{
    background: #ffffff;
}

.fc-widget-header {
    background-color: var(--colors--emerald--20);
}

.fc-widget-header, .fc-widget-content {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

a.fc-event {
	border-radius: 2px;
}

.fc-header-left {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.fc-header-right {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

#fullcalendar .dot-event {
    color: var(--color-bg-white);
    font-weight: 600;
    text-align: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: text-bottom;
    position: absolute;
    top: 55%;
    left: 38%;
    cursor: pointer;
    background:#f89406;
    border: 1px solid #f89406;
    /*background: #5c8429;
    border: 1px solid #5c8429;*/
}

/* Main container */
#fullcalendar {
    border-top-right-radius: 10px !important;
    border-top-left-radius: 10px !important;
}

/* Force border-collapse on table */
.fc-header, .fc-header table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Target the entire header row */
.fc-header tbody tr {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

/* Style ALL td elements in the header */
.fc-header td {
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Left corner cell */
.fc-header td:first-child,
.fc-header .fc-header-left {
    border-top-left-radius: 10px !important;
    border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
    background-clip: padding-box !important;
}

/* Right corner cell */
.fc-header td:last-child,
.fc-header .fc-header-right {
    border-top-right-radius: 10px !important;
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
    background-clip: padding-box !important;
}

@media (max-width: 480px) {
	#fullcalendar .dot-event {
    color: var(--color-bg-white);
    font-weight: 600;
    text-align: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: text-bottom;
    position: absolute;
    top: 55%;
    left: 38%;
    cursor: pointer;
    background:#f89406;
    border: 1px solid #f89406;
    font-size: 12px;
    line-height: 15px
    /*background: #5c8429;
    border: 1px solid #5c8429;*/
	}
}

.calendar-bottom {
	background-color: var(--colors--emerald--10);
    padding: 10px;
    width: auto;
    border: 1px solid rgba(0, 0, 0, 0.1);
 }

/* Theme Options */
a.btn-theme-options {
    color: #777777;
    font-size: 16px;
    margin: 0;
    border: none;
    background: #e9e9e9;
    position: fixed;
    bottom: 15px;
    left: 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

a.btn-theme-options:hover {
    color: #333333;
    background: #e9e9e9;
}

#theme-options-content {
    margin: 0;
    padding: 10px 0;
    background-color: #e9e9e9;
    display: none;
    position: fixed;
    z-index: 10000;
    bottom: 60px;
    left: 3px;
    border-radius: 3px;
    	box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.15);
}

/* Wizard */
.wizard-steps > div {
    padding: 20px 2px;
    font-size: 17px;
    color: #ddd;
    font-weight: 300;
}

.wizard-steps > div.active {
    color: #333333;
    font-weight: 600;
}

.wizard-steps .span4,
.wizard-steps .span6 {
    border-bottom: 3px solid #e0e0e0;
    padding-bottom: 10px;
}

.wizard-steps .span4.active,
.wizard-steps .span6.active {
    border-bottom-color: #5a8a5a;
}

/* Google Maps */
.gmap-con img {
    max-width: none !important;
}

/* Loaders */
[class^="loader-"],
[class*=" loader-"] {
    display: inline-block;
    width: 16px;
    height: 16px;
     margin-top: 1px;
    *margin-right: .3em;
    line-height: 16px;
    vertical-align: text-top;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

.loader-01 { background-image: url('../img/loading.gifs/loading01.gif'); }
.loader-02 { background-image: url('../img/loading.gifs/loading02.gif'); }
.loader-03 { background-image: url('../img/loading.gifs/loading03.gif'); }
.loader-04 { background-image: url('../img/loading.gifs/loading04.gif'); }
.loader-05 { background-image: url('../img/loading.gifs/loading05.gif'); }
.loader-06 { background-image: url('../img/loading.gifs/loading06.gif'); }
.loader-07 { background-image: url('../img/loading.gifs/loading07.gif'); }
.loader-08 { background-image: url('../img/loading.gifs/loading08.gif'); }
.loader-09 { background-image: url('../img/loading.gifs/loading09.gif'); }
.loader-10 { background-image: url('../img/loading.gifs/loading10.gif'); }
.loader-11 { background-image: url('../img/loading.gifs/loading11.gif'); }
.loader-12 { background-image: url('../img/loading.gifs/loading12.gif'); }
.loader-13 { background-image: url('../img/loading.gifs/loading13.gif'); }

/*.preload {
	padding: 5px;
	color: #fefefe;
	background-color: #333333;
	border: 1px solid #f1f1f1;
	white-space: nowrap;
	line-height: 24px;
	width: 120px;
	text-align: center;
	border-radius: 3px;
	z-index: 10050;
}*/

.preload {
	padding: 5px;
	color: #333333;
	background-color: #fcf8e3;
	border: 1px solid #e3e3e3;
	white-space: nowrap;
	line-height: 24px;
	font-weight: 600;
	width: 120px;
	text-align: center;
	border-radius: 3px;
	z-index: 10050;
}

/* Live help search */

#helpsearch-results { display: none; width: 400px;max-height:300px;position: absolute;top:0;left:0;z-index:99;padding:0px;overflow: auto;background: var(--color-bg-white);border: 1px solid #A9A9A9;}
#helpsearch-results ul {
	list-style-type:none;
	padding: 0px;
	margin:0;
}
#helpsearch-results ul  li {
	display:block;
	padding: 5px;
	border-bottom: 1px solid #ccc;

}

#helpsearch-results ul  li:hover {
	background:#fffde3;
}

/* Twitter */

.var-chromeless .tweet {
padding: 12px 2px 10px 5px !important;
}

.u-photo.avatar, .header .avatar{
display: none !important;
}

	.tweet_list {
		list-style: none;
		margin: 0;
		padding: 3px;
		overflow-y: hidden;
		background-color: #ffffff;
		border: 1px solid #ddd;
	}

		.tweet_list li {
			overflow-y: auto;
			overflow-x: hidden;
			padding: 0.5em;
			list-style-type: none;
		}


		.tweet_time {
			display:none;
		}

		.tweet_list .tweet_avatar {
			padding-right: .5em; float: left;
		}

			.tweet_list .tweet_avatar img {
				vertical-align: middle;
			}

/*
=================================================================
(#m06bos) BOOTSTRAP OVERWRITE + EXTEND STYLES
=================================================================
*/

/* Page header */

.page-header {
    margin: 20px -20px;
    padding: 10px 20px 9px;
    /*background-color: #f3f3f3;*/
    color: var(--colors--gray--700);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: none;
}

.page-header-top {
    margin: -15px -20px 15px;
    border-top: none;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.page-header-top i{
	position: relative;
	top: 2px;
}

.page-header-sub {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    line-height: 120%;
    font-size: 16px;
    padding-bottom: 10px;
    margin-bottom: 13px;
}

.addnew {
    float:right;
    margin: 0px;
}
.addnew.dropdown-toggle, .addnew.btn {
    padding: 5px 12px;
}

.addnew-group {
    margin: 0px;
}

.popover-navigation {
    padding: 10px;
}

.btn-group-fill {
    display: flex;
    width: 100%;
}

.btn-group-fill .btn {
    flex: 1;
}

.btn-group>.btn-mini{font-size: 12px;}
.btn-group>.btn-small{font-size:12px;}

.btn-group>.btn:last-child {
    margin-left: -1px;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.btn-group>.btn:first-child {
    margin-left: 0;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

/* Override for single button */
.btn-group > .btn:only-child {
    border-radius: 7px !important;
}
.btn-group > .btn:only-of-type {
    border-radius: 7px !important;
}
.btn-group > .btn:first-child.reset {
    border-radius: 7px !important;
}

.btn-group > .btn-mini.dropdown-toggle, 
.btn-group > .addnew.dropdown-toggle {
    margin-left: 0;
    border-top-right-radius: 7px !important;
    border-bottom-right-radius: 7px !important;
}
.btn-group .btn:not(:first-child):not(:last-child) {
  border-radius: 0px !important;
}

/* A .dropdown-toggle closing a group is its last button, but the
   .dropdown-menu that follows it is the real :last-child - so the rule above
   reads the toggle as a middle button and squares it off. Round it back.
   This is the general form of the .btn-mini / .addnew exceptions above. */
.btn-group > .btn.dropdown-toggle:not(:first-child) {
    border-top-right-radius: 7px !important;
    border-bottom-right-radius: 7px !important;
}

/* Active/Archive toggle group container */
.active-archive {
    background-color: rgba(114, 163, 51, 0.14);
    border: 1px solid rgba(114, 163, 51, 0.6);
    border-radius: 7px;
    padding: 1px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    gap: 2px; /* Space between buttons */
}

/* All buttons inside active-archive - transparent by default */
.active-archive .btn {
    border: none;
    background: transparent;
    flex: 1; /* Equal width distribution */
    border-radius: 7px !important; /* Slightly smaller than container for visual padding */
}

.active-archive .btn:hover {
    background: rgba(255, 255, 255, 0.5);
}

.active-archive.btn-group>.btn:last-child {
    margin-left: -1px;
    border-top-left-radius: 7px !important;
    border-bottom-left-radius: 7px !important;
}

.active-archive.btn-group>.btn:first-child {
    margin-left: 0;
    border-top-right-radius: 7px !important;
    border-bottom-right-radius: 7px !important;
}

/* Active state for any button */
.active-archive .btn.active,
#active_records.active,
#archived_records.active,
#new_records.active,
#accepted_records.active,
#confirmed_records.active,
#rejected_records.active {
    background-color: white !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Badge styling */
#archived_records .badge,
.active-archive .btn:last-child .badge {
    background: rgba(50, 75, 5, 0.5);
}
/*
.active-archive .btn, #active_records.btn, #archived_records.btn  {
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.active-archive .btn.active:first-child {
    background-color: rgba(114, 163, 51, 0.14) !important;
    border: 1px solid rgba(114, 163, 51, 0.6);
    border-right: 1px solid rgba(114, 163, 51, 0.4);
}
.active-archive .btn.active:last-child {
    background-color: rgba(114, 163, 51, 0.14) !important;
    border: 1px solid rgba(114, 163, 51, 0.6);
    border-left: 1px solid rgba(114, 163, 51, 0.4);
}

#active_records.active {
    background-color: rgba(114, 163, 51, 0) !important;
    border: 1px solid rgba(114, 163, 51, 0);
    border-right: 1px solid rgba(114, 163, 51, 0);
    box-shadow: none;
}

#new_records.active, #accepted_records.active, #confirmed_records.active  {
    background-color: rgba(114, 163, 51, 0.14) !important;
    border: 1px solid rgba(114, 163, 51, 0.6);
    border-right: 1px solid rgba(114, 163, 51, 0.4);
    border-left: 1px solid rgba(114, 163, 51, 0.4);
}

#archived_records.active, #rejected_records.active {
    background-color: rgba(114, 163, 51, 0.14) !important;
    border: 1px solid rgba(114, 163, 51, 0.6);
    border-left: 1px solid rgba(114, 163, 51, 0.4);
}

#archived_records .badge, .active-archive .btn:last-child .badge {
 	background: rgba(50, 75, 5, 0.5)
}
*/

/* Typography */



.navbar a > .badge {
    margin: 0 0 0 3px;
    padding: 5px 7px 4px 7px;
    font-weight: 600;
}

#left_top_alerts_menu, #left_top_agenda_menu {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: orange;
  color: transparent;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  right: 6px;
}

.text-black {
    color: #000;
}

/* Added !important to these bootstrap classes */
.text-left {
    text-align: left !important;
}

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

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

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

/* Dropdown */
.dropdown-user img {
    margin: -7px 5px -5px 0;
}

.dropdown-menu {
    margin: -1px 0 0;
    z-index: 100061;
    min-width: 125px;
    border-radius: 10px !important;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.05);
}

.dropdown-user .dropdown-menu {
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.10) transparent;
  transition: scrollbar-color 0.2s ease;
}

/* Only tint the track/thumb when hovering the menu itself */
.dropdown-user .dropdown-menu:hover {
  scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}

/* WebKit browsers: Chrome, Edge, Safari, Opera */
.dropdown-user .dropdown-menu::-webkit-scrollbar {
  width: 5px;
}

.dropdown-user .dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

.dropdown-user .dropdown-menu::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  border: 1px solid transparent; /* creates a small "inset" gap */
  background-clip: content-box;
  transition: background-color 0.2s ease;
}

.dropdown-user .dropdown-menu:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.22);
}

.dropdown-user .dropdown-menu::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.32);
}

.dropdown-menu.right {
    right:0px;
	left: auto;
}

.dropdown-menu .divider {
    margin: 5px 0;
    background-color: #f3f3f3;

}

.dropdown-menu > li > a {
    padding: 3px 10px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background: #fffde3 !important;
    color: #222;
    text-shadow: none !important;
    filter: none;
}

.dropdown-menu li [class^="icon-"], .dropdown-menu li [class^="far fa-"] {
    position: relative;
    bottom: -1px;
    margin-right: 5px;
    opacity: 0.9;
}

.dropdown-menu li .fad, .dropdown-menu li .fas, .dropdown-menu li .fab, .dropdown-menu li .fal {
    position: relative;
    bottom: -1px;
    margin-right: 5px;
    opacity: 0.9;
    font-size: 16px;
    width: 18px;
    text-align: center;
}

.dropdown-submenu > a:after {
    margin-right: 0;
}

.dropdown-header {
	text-transform: uppercase;
    padding: 2px 10px;
    margin: 5px 0px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(0,0,0,0.4);
    background: #f5f5f5;
    border-bottom:1px solid var(--colors--emerald--30);
}
@media (min-width: 768px) {
    .dropdown-submenu.pull-left>.dropdown-menu {
        left: -200px;
        top: 25px;
    }
}

@media (max-width: 768px) {
    .dropdown-submenu.pull-left>.dropdown-menu {
        left: -150px;
        top: 25px;
    }
}

/* Navbar */
header.navbar {
    margin: 0;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    position: relative;
}

header > .navbar-inner > .container-fluid {
    padding: 0;
}

.navbar .nav {
    margin: 0px;
}

.navbar .navbar-inner,
.navbar-inverse .navbar-inner {
    border: none;
    padding: 0;
}

.navbar .navbar-inner {
    background: var(--colors--rentila--green);
	filter: none;
	border-bottom: 0px solid #5c8429;
	min-height: 50px;
}

.navbar-inverse .navbar-inner {
    background: #4b4b4b;
    filter: none;
}

.navbar .brand,
.navbar-inverse .brand {
    padding-left: 10px;
    padding-right: 10px;
    margin: 0;
}

header.navbar .brand,
header.navbar-inverse .brand {
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0;
    color: white;
	text-shadow: none;
	font-size: 220%;
}

.navbar .divider-vertical {
    border-right-color: #6A9830;
    border-left-color: var(--colors--rentila--green);
    border-left: none;
    height: 50px;
}

.navbar-inverse .divider-vertical {
    border-right-color: #3b3b3b;
    border-left-color: #5b5b5b;
}

.navbar .nav li.dropdown.open>.dropdown-toggle, .navbar .nav li.dropdown.active>.dropdown-toggle, .navbar .nav li.dropdown.open.active>.dropdown-toggle {
background-color: #5c8429;
color: var(--color-bg-white);
text-shadow: none;
}

.navbar .nav>li>a {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.10);
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    line-height: 1;        /* prevents the text from sitting low due to inherited line-height */
}

.navbar .nav>li>a .fal .fa-circle-plus, .navbar .nav>li>a .icon-calendar, .navbar .nav>li>a .fa-calendar-alt, .navbar .nav>li>a .fa-plus-circle, .navbar .nav>li>a .fa-cog, .navbar .nav>li>a .fa-bell, .navbar .nav>li>a .fa-users, .navbar .nav>li>a .fa-question-circle {
    line-height: 20px;
    font-size: 1.3em;
}

.navbar #add a {
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  margin: 6px 7px;
}

.navbar #add .dropdown-menu a {
  margin: 0px 6px;
  padding: 3px 10px;
  border-radius: 5px;
}

.navbar #add .dropdown-menu .divider {
    margin: 2px 0;
    background-color: #f3f3f3;
}

.sticky-header {
  position: sticky !important;
  top: 0;
  z-index: 1000; /* ensure it stays above content */
  background: #fff; /* IMPORTANT: avoid transparency glitches */
}

/* Nav pills */
.nav-pills.switcher {
    background-color: rgba(114, 163, 51, 0.14);
    border: 1px solid rgba(114, 163, 51, 0.6);
    border-radius: 7px;
    padding: 1px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    display: inline-flex;
    gap: 2px;
}

.nav-pills.switcher li {
    min-width: 136px;
	text-align: center;
}

.nav-pills.switcher li.active {
    flex: 1;
}

.nav-pills.switcher a {
    background: transparent;
    border: 1px solid transparent;     /* was: border: none; */
    border-radius: 7px !important;
    color: #333;
    text-shadow: none;
    box-shadow: none;
}

.nav-pills.switcher a:hover {
    background: rgba(255, 255, 255, 0.5);
}

.nav-pills.switcher > .active > a,
.nav-pills.switcher > .active > a:hover,
.nav-pills.switcher > .active > a:focus {
    background-color: white !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    color: #333;
}

.nav-pills.switcher > li:first-child a,
.nav-pills.switcher > li:last-child a {
    border-radius: 7px !important;
    margin: 0;
    border: none;
}

.nav-pills.switcher > li:first-child a,
.nav-pills.switcher > li:last-child a {
    margin: 0;
    border: 1px solid transparent;     /* was: border: none; */
    border-radius: 7px !important;
}
/*
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
    background-color: #db4a39;
}

.nav-pills.switcher {
    min-width: 100px;
    border-radius: 2px;
    display: inline-block;
}

.nav-pills.switcher li {
    min-width: 142px;
}

#basic-wizard .nav-pills.switcher li {
    min-width: 136px;
}

.nav-pills.switcher a {
    background-color: #eeeeee;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #333333;
    padding: 4px 10px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    text-shadow: 1px 1px 0px white;
             box-shadow: none;
}

.nav-pills.switcher a:hover {
    background-color: #ddd;
	background-image: none;
}

.nav-pills.switcher > .active > a, .nav-pills.switcher > .active > a:focus {
	border: 1px solid #cccccc;
	background: #ffffff;
    padding: 4px 10px;
    margin-bottom: 0;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    text-align: center;
            box-shadow: inset 1px 2px 0px rgba(0,0,0,.05), 0 0px 0px rgba(0,0,0,.05);
}

.nav-pills.switcher > li:first-child a {
    margin-right:0px;
    border-right:0px;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.nav-pills.switcher > li:last-child a {
    margin-left:0px;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.nav-pills.switcher > .active > a:hover {
	color: #666666;
}
*/

/* Radio toggle */
.switch-field {
    overflow: hidden;
}

.switch-title {
  margin-bottom: 6px;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
  float: left;
}

.switch-field label {
  display: inline-block;
  min-width: 62px;
  background-color: #ffffff;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  text-shadow: none;
  padding: 10px 24px;
  margin-left: -1px;
  border: 1px solid #cccccc;
  border-radius: 7px !important;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition:    all 0.1s ease-in-out;
  -ms-transition:     all 0.1s ease-in-out;
  -o-transition:      all 0.1s ease-in-out;
  transition:         all 0.1s ease-in-out;
}

.switch-field.large label {
  min-width: 90px;
  height: 90px;
  padding: 10px;
  margin-left:0px;
  margin-right: 8px;
    box-shadow: none;
}

.switch-field label:hover {
    cursor: pointer;
}

.switch-field label i {
    font-size: 200%;
    display: block;
}

.switch-field input:checked + label {
  background-color: var(--colors--rentila--green) !important;
  color: white !important;
    box-shadow: none;
}
.switch-field.large input:checked + label {
	color: #222222;
	background-color: #fefefe;
	box-shadow: inset 0px 0px 0px 3px rgba(114,163,51,1);
}
.switch-field input:checked + label.warning {
  background-color: #f89406 !important;
  color: white !important;
    box-shadow: none;
}

.switch-field input:checked + label.danger {
  background-color: #cc0000 !important;
  color: white !important;
    box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 3px 0 0 3px;
  margin-left: 0px;
}

.switch-field label:last-of-type {
  border-radius: 0 3px 3px 0;
}

.switch-field.large label:last-of-type, .switch-field.large label:first-of-type, .switch-field.large label {
  border-radius: 3px;
}

.switch-field label .label-block {
	text-transform: uppercase;
    font-weight: 600;
    font-size: 75%;
}
/* Intervention grid */
.intervention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
  margin-top: 10px;
}

.intervention-grid input[type="radio"] {
  display: none;
}

.intervention-grid label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--colors--emerald--50);
  border-radius: 6px;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease-in-out;
}

.intervention-grid label:hover {
  background-color: #e6f7ff;
}

.intervention-grid input[type="radio"]:checked + label {
  background-color: #dff6fb;
  font-weight: bold;
}

.intervention-grid label i {
  font-size: 26px;
  margin-bottom: 5px;
}

.intervention-grid label span {
  font-size: 14px;
}

/* Pagination */
.pagination ul > .active > a,
.pagination ul > .active > a:hover,
.pagination ul > .active > span {
    color: var(--color-bg-white);
    background-color: var(--colors--rentila--green);
    border: 1px solid var(--colors--rentila--green);
}

.pagination-large ul > li > a,
.pagination-large ul > li > span {
  padding: 7px 15px;
}

/* Tabs */
.tab-content {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: none;
    padding: 12px;
    margin: -20px 0 0;
    background: var(--color-bg-white);
}

.tab-content-default {
    border: none;
    padding: 0;
    margin: 0;
}

.tabs-left .tab-content,
.tabs-right .tab-content {
    border: none;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.no-scroll {
	overflow-x: hidden;
    overflow-y: auto;
}

.nav-tabs {
	border-bottom: 1px solid transparent;
}

.dash-tile-content .nav-tabs {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#form-box-tabs.nav-tabs>li.active a{
	background-color: white !important;
	border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    color: #333 !important;
}

#form-box-tabs.nav-tabs>li a{
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 7px !important;
	border-radius: 7px;
	text-transform: none;
    font-weight: 500;
    font-size: 14px;
    color: #333;
    margin: 0 7px 7px 0;
}
#form-box-tabs.nav-tabs>li a:hover{
	background: rgba(255, 255, 255, 0.5) !important;
}

#form-box-tabs.nav-tabs > .active > a,
#form-box-tabs.nav-tabs > .active > a:hover,
#form-box-tabs.nav-tabs > .active > a:focus {
	background-color: white !important;
	border: 1px solid rgba(0, 0, 0, 0.15) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}



#form-box-tabs.nav-tabs>li {
    font-size: 15px;
}

@media (max-width: 480px) {
	#form-box-tabs.nav-tabs>li {
    font-size: 15px;
    display: block;
    width: 100%;

	}

  #form-box-tabs.nav-tabs>li {
    font-size: 15px;
    display: block;
    width: 100%;

	}
  #form-box-tabs.nav-tabs.switch-tabs>li {
    font-size: 15px;
    display: block;
    width: auto;

	}
  #form-box-tabs.nav-tabs>li a {
    margin: 0 0 7px 0;
	}
}

.nav-tabs>li>a {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}

.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom-color: transparent;
    border-top: 1px solid rgba(114,163,51,0);

    	box-shadow: inset 0px 2px 0px 0px rgba(114,163,51,1);
}

/*#form-box-tabs li.active::before  {
    width: 99%;
    display: block;
    background-color: #72a333;
    height: 3px;
    content: '';
    z-index: 125;
}

#form-box-tabs li::before  {
    width: 99%;
    display: block;
    background-color: transparent;
    height: 3px;
    content: '';
    z-index: 125;
    position: relative;
    top: 2px;
}*/



/* Switch-tabs scroll wrapper */
/* Switch-tabs scroll wrapper */
.switch-tabs-scroll {
	position: relative;
	overflow: hidden;
  /* border: 1px solid rgba(114, 163, 51, 0.6) !important; */
	border-radius: 7px;
	timeline-scope: --tabs-scroll; 
}

/* The chevron, rendered purely from CSS */
.switch-tabs-scroll::before {
    content: "\f054";                     /* fa-chevron-right */
    font-family: "Font Awesome 7 Pro";    /* or "Font Awesome 6 Pro" / "Free", whichever you load */
    font-weight: 400;                     /* 400 = "far" (regular), 900 = "fas" (solid) */
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;

    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 2;                           /* above the gradient ::after */
    color: #6c757d;
    font-size: 14px;
    pointer-events: none;

    animation: fade-at-end linear both;
    animation-timeline: --tabs-scroll;
}

.switch-tabs-scroll::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 80px;
	border-radius: 0 7px 7px 0;
	background: linear-gradient(to right, transparent, var(--colors--emerald--50));
	pointer-events: none;
}

#form-box-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-timeline: --tabs-scroll x;   /* horizontal scroll timeline */
}

.switch-tabs-scroll {
    line-height: 0;          /* kill inline gap from whitespace */
}
.switch-tabs-scroll > * {
    line-height: 1.5;        /* restore on children */
}

.switch-tabs-scroll .scroll-indicator {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    z-index: 2;
    color: #6c757d;
    pointer-events: none;

    animation: fade-at-end linear both;
    animation-timeline: --tabs-scroll;
}

/* Same idea applied to the gradient */
.switch-tabs-scroll::before,    /* chevron */
.switch-tabs-scroll::after {    /* gradient */
    opacity: 0;                 /* base state: hidden when no scroll */
    animation: show-while-scrolling linear both;
    animation-timeline: --tabs-scroll;
}

@keyframes show-while-scrolling {
    0%   { opacity: 1; }   /* fully visible at start of scroll      */
    85%  { opacity: 1; }   /* stay visible most of the way          */
    100% { opacity: 0; }   /* fade out as we approach the right end */
}

.nav-tabs.switch-tabs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	width: 100%;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.nav-tabs.switch-tabs::-webkit-scrollbar {
	display: none;
}

.nav-tabs.switch-tabs > li {
	flex-shrink: 0;
}

/* Switch-tabs: nav-tabs variant styled as a pill switcher (add class="nav nav-tabs switch-tabs") */
.nav-tabs.switch-tabs {
	/* background-color: rgba(114, 163, 51, 0.14);
	border: 1px solid rgba(114, 163, 51, 0.6) !important; 
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);*/
	border-radius: 7px;
	padding: 0px;
  margin: 0px;
	display: inline-flex;
	gap: 5px;
}

.nav-tabs.switch-tabs::before,
.nav-tabs.switch-tabs::after {
  content: none; /* removes the clearfix boxes entirely, so they no longer count as flex items */
}

.nav-tabs.switch-tabs > li {
	float: none;
	margin-bottom: 0;
}

.nav-tabs.switch-tabs > li > a {
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 6px !important;
	color: #333;
	text-shadow: none;
	box-shadow: none !important;
	margin: 0 !important;
	/* padding: 6px 10px; */
}

.nav-tabs.switch-tabs > li > a:hover {
	background: rgba(255, 255, 255, 0.5) !important;
}

.nav-tabs.switch-tabs > .active > a,
.nav-tabs.switch-tabs > .active > a:hover,
.nav-tabs.switch-tabs > .active > a:focus {
	background-color: white !important;
	border: 1px solid rgba(0, 0, 0, 0.15) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
	color: #333 !important;
}

/* stacking — this is what makes them vertical */
.nav-stacked > li {
  float: none;              /* overrides the float:left above */
}

.nav-stacked > li > a {
  margin-right: 0;
}

.nav-pills.nav-stacked > li > a {
  margin-bottom: 3px;
}

.nav-pills.nav-stacked > li:last-child > a {
  margin-bottom: 1px;
}

.row-fluid > .span6.nogap {
    margin-left: 0;
    width: 50%;   /* reclaim the space the gutter used to take */
}

@media (min-width: 768px) {
  .row-fluid > .span3:has(> .nav-stacked.nav-pills) {
    position: sticky;
    top: 90px;
    align-self: flex-start;
  }
}

/* Media */
.modal.fade {
    /*top: -170px;*/
    top: -670px;
}
.media {
    padding: 10px;
    background: #f9f9f9;
}
.media-hover:hover {
    background: #f1f1f1;
}

/* Modals */
.modal {
	border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px !important;
  box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.08) !important;
	z-index: 10500 !important;
}
.modal-header {
    padding-bottom: 0;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom: none;
}

.modal-header h4{
    margin: 5px 0 10px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
	.modal-header h4{
		width: 250px;
		max-width: 250px;
		text-overflow: ellipsis;
		overflow-x: hidden;
		white-space: nowrap;
	}
}

.modal-footer {
    padding: 10px;
    background: var(--colors--emerald--30);
    border-top: 1px solid #eee;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.modal-body {
    /* The dialog is 10% (top offset) + header + body + footer. We reserve 180px
       for the header, the footer and a margin under the dialog, so the buttons
       stay inside the window at any height. svh (when supported) is the really
       visible height, scrollbars and mobile toolbars excluded. */
    max-height: calc(90vh - 180px);
    max-height: calc(90svh - 180px);
    overflow-y: auto;
    overflow-x: hidden;
}

body.modal-open {
    overflow: hidden;
}
@media screen and (min-width: 768px) {
	.modal.large {
		width: 80%;
	    margin-left: -40%;
	}
}

/* Carousel */
.carousel {
    border: 5px solid #ccc;
}

.carousel-indicators {
    left: 15px;
}

.carousel-indicators li {
    cursor: pointer;
    background-color: var(--colors--gray--500);
}

/* Thumbnails */
.thumbnails > li {
    position: relative;
}

.thumbnails-options {
    right: 0;
    position: absolute;
    display: none;
}

a.thumbnail {
  -webkit-transition: none;
     -moz-transition: none;
       -o-transition: none;
          transition: none;
}

a.thumbnail:hover,
a.thumbnail:focus {
    border-color: #db4a39;
            box-shadow: 0 1px 3px rgba(219, 74, 57, 0.25);
}

.thumbnails-borderless a.thumbnail,
.thumbnails-borderless a.thumbnail:hover,
.thumbnails-borderless a.thumbnail:focus,
a.thumbnail-borderless:hover,
a.thumbnail-borderless:focus,
a.thumbnail-borderless {
    border: none;
            box-shadow: none;
}

.thumbnails-borderless .thumbnail,
.thumbnails .thumbnail-borderless {
    border: none;
    padding: 5px;
}

/* Tooltip */
.tooltip {
    font-size: 12px;
    z-index: 100062;
}

.tooltip.in {
    opacity: 1;
    filter: alpha(opacity=100);
}

.tooltip-inner {
    padding: 6px;
    background-color: var(--color-text-dark);
}

.tooltip.top .tooltip-arrow {
    border-top-color: var(--color-text-dark);
}

.tooltip.right .tooltip-arrow {
    border-right-color: var(--color-text-dark);
}

.tooltip.left .tooltip-arrow {
    border-left-color: var(--color-text-dark);
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--color-text-dark);
}

/* Jquary Tooltip */

.ui-tooltip, .arrow:after {
	background: black;
	border: 2px solid white;
}
.ui-tooltip {
	padding: 4px 6px;
	color: white;
	border-radius: 2px;
	position:absolute;
	z-index:1030;
	display:block;
	visibility:visible;
	font-size:12px;
	line-height:1.4;
	border:none;
	max-width:200px;
}
.arrow {
	width: 70px;
	height: 16px;
	overflow: hidden;
	position: absolute;
	left: 50%;
	margin-left: -35px;
	bottom: -16px;
}
.arrow.top {
	top: -16px;
	bottom: auto;
}
.arrow.left {
	left: 20%;
}
.arrow:after {
	content: "";
	position: absolute;
	left: 20px;
	top: -20px;
	width: 25px;
	height: 25px;
	box-shadow: 6px 5px 9px -9px black;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.arrow.top:after {
	bottom: -20px;
	top: auto;
}

/* Forms */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
select:focus,
[contenteditable="true"]:focus,
.uneditable-input:focus {
	border-color: var(--focus-color);
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Suppress the browser's own :invalid styling (bootstrap.css:306, a red border
   plus an orange glow, and (0,3,1) so it outranks the rule above). An empty
   required field is :invalid before the user has typed anything; validation
   feedback comes from .control-group.error instead, added by showErrorFields()
   in js/main.js. Must stay ABOVE the error rule, which ties on specificity. */
input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
	border-color: var(--focus-color);
	box-shadow: var(--focus-ring);
}

/* A field in error keeps a red ring on focus. (0,3,1) beats the rule above and
   Bootstrap's own .control-group.error input:focus. */
.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus {
	border-color: var(--focus-color-error);
	box-shadow: var(--focus-ring-error);
}

/* Checkboxes and radios: keyboard focus only, so a mouse click leaves no ring.
   Only reaches bare checkboxes — the .cb-rb pattern hides the real input and is
   handled on its own faux box further down. */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
	box-shadow: none;
}
input[type="checkbox"]:focus:not(:focus-visible),
input[type="radio"]:focus:not(:focus-visible) {
	outline: none;
}

/* Form labels: sentence case, 14px/500. All three selectors move together —
   migrating only .form-horizontal leaves modal and inline labels in uppercase,
   which reads as two different designs on the same screen. */
.form-horizontal .control-label, .modal-body .control-label, .inline-label {
	text-transform: none;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 21px;
	color: var(--colors--gray--700);
}

/* Optical centring belongs to the two-column layout only: 33px field, 21px
   line-height. .inline-label and stacked labels sit flush. */
.form-horizontal .control-label {
	padding-top: 6px;
}

@media (max-width: 480px) {
	/* Bootstrap stacks the label above its field here and zeroes the padding;
	   keeping 6px would leave a stray gap above every label on a phone. */
	.form-horizontal .control-label {
		padding-top: 0;
	}
}

.textarea-large {
    width: 98% !important;
    resize: none;
}

.modal-body .textarea-large {
    width: 93% !important;
}

.uneditable-textarea {
    width: 206px;
}

.uneditable-input {
    background-color: #f6f6f6;
}

@-moz-document url-prefix() {
  select {
     -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    background: #ffffff url('../img/jquery.chosen/chosen-sprite@2x.png') no-repeat 200px 5px;
	background-size: 52px 42px !important;
  }
}

.form-box {
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    background-color: #ffffff;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.form-box .form-box-header:first-of-type {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.form-box-header, .garant-separator {
    margin: 0;
    padding: 15px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  /* background-color: #f9f9f9; */
  background: var(--colors--emerald--10);
	font-weight: 600;
	font-size: 16px !important;
}

.garant-separator {
    margin: 0 -20px;
}

.form-box-header-push {
    margin: 0 0 20px;
}

.form-box-content {
    padding: 0 20px;
}

.form-box .control-group {
    margin: 0 -20px;
    padding: 12px 5px;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.02);
}

.form-box .control-group.no-border {
    margin: 0 -20px;
    padding: 12px 5px;
    border-top: none;
    border-bottom: none;
}

.form-box .form-actions, .form-actions {
    padding-left: 200px;
    margin: -1px -20px 0;
    padding-left: 185px;
    background: var(--colors--emerald--20);
    border-top: 1px solid var(--colors--emerald--30);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.form-box .help-inline,
.form-box .help-block,
.help-block {
    color: #777;
}

.form-box .title-block {
    font-size: 80%;
    font-weight: 600;
    text-transform: uppercase;
}

.form-box .help-block {
    margin: 7px 0 3px;
}

.login_ckeckbox {
    width:270px; margin: 15px 25px 5px;
}

/* Inputs */
.input-prepend input {
    width: 179px;
    padding-left: 33px;
    }

.input-append, .input-prepend {
    position: relative;
}

.input-prepend .add-on, .input-prepend.input-append .add-on:first-child /*, .input-prepend .btn */{
    text-shadow: none;
    background-color: transparent;
    border: 1px solid transparent;
    font-weight: 600;
    position: absolute;
    left: 0px;
    z-index: 10;
    font-size: 13px;
    letter-spacing: -1px;
    padding: 4px 4px;
}

.input-prepend .btn{
    text-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.12);
    font-weight: 600;
    position:relative;
    left: none;
    z-index: 10;
}

.input-prepend .btn a{
    text-decoration: none;
    color:#333333;
}

.input-prepend .input-mini {
    width: 63px;
    padding-left: 33px;
}

.input-prepend {
    overflow: visible;
}

.pswd-strength-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    height: 3px;
    border-radius: 0 0 5px 5px;
    background: var(--color-border-light);
    width: 0;
    transition: width 0.25s ease, background-color 0.25s ease;
    z-index: 3;
}

.pswd-strength-bar.level-weak {
    width: 33%;
    background: var(--color-error-alt);
}

.pswd-strength-bar.level-medium {
    width: 66%;
    background: var(--color-warning);
}

.pswd-strength-bar.level-strong {
    width: 100%;
    background: var(--colors--rentila--green);
}

.input-append .add-on {
    display: inline-block;
    width: auto;
    height: 20px;
    min-width: 16px;
    padding: 4px 6px;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    text-align: center;
    text-shadow: 0 1px 0 #ffffff;
    background: #f6f6f6;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.input-append .input-small {
    width: 60px;
}

.input-append input, .input-append select, .input-append .uneditable-input {
            border-radius: 7px 0 0 7px !important;
}


.input-append .add-on:last-child, .input-append .btn:last-child, .input-append .btn-group:last-child>.dropdown-toggle {
    -webkit-border-radius: 0 7px 7px 0 !important;
    -moz-border-radius: 0 7px 7px 0 !important;
    border-radius: 0 7px 7px 0 !important;
}

/* .btn forces a 7px radius, so buttons sitting between the input and the last one have to be squared back */
.input-append .btn:not(:first-child):not(:last-child) {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

.twitter-typeahead {
    width: 100%;
}

input.typeahead.tt-hint, input.typeahead.tt-input {
        width: 207px;
    }

.typeahead, .tt-query, .tt-hint {
    width: 207px;
    margin-top: 0px;
}


input.typeahead.tt-hint.input-xlarge, input.typeahead.tt-input.input-xlarge {
        width: 270px;
    }

.typeahead.input-xlarge, .tt-query.input-xlarge, .tt-hint.input-xlarge {
    width: 270px;
    margin-top: 0px;
}

.tt-suggestion.tt-cursor {
    background-color: var(--colors--rentila--green);
}


.tt-dropdown-menu {
    width: 282px;
    margin-top: -1px;
    padding: 0px;
    border: 1px solid var(--focus-color);
            box-shadow:inset 0 0px 0px rgba(0,0,0,0.0);
}
.tt-query{-webkit-box-shadow:inset 0 0px 0px rgba(0,0,0,0.0);-moz-box-shadow:inset 0 0px 0px rgba(0,0,0,0.0);box-shadow:inset 0 0px 0px rgba(0,0,0,0.0)}

@media (max-width: 767px) {
	input.typeahead.tt-hint.input-xlarge, input.typeahead.tt-input.input-xlarge {
        width: 100%;
    }

	.typeahead.input-xlarge, .tt-query.input-xlarge, .tt-hint.input-xlarge {
	    width: 100%;
	}

	.tt-dropdown-menu {
	    width: 100%;
	}
}

.input-responsive {
		width: auto !important;
		min-width: 220px !important;
        max-width: 420px !important;
    }

@media only screen and (max-width: 720px) {
    .input-responsive {
        width: 300px !important;
    }
}

.chzn-container-multi .chzn-choices {
  border-radius: 5px;
}

.control-group.error .chzn-container-multi .chzn-choices {
	border-color: #b94a48;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.control-group.error .chzn-container .chzn-drop, .control-group.error .chzn-container-active .chzn-single-with-drop, .control-group.error .chzn-container-single .chzn-single {
	border-color: #b94a48;
}

.control-group.error .chzn-container-active:not(.chzn-with-drop) .chzn-single,
.control-group.error .chzn-container-active:not(.chzn-with-drop) .chzn-choices {
	border-color: var(--focus-color-error);
	box-shadow: var(--focus-ring-error);
}

.chzn-container .chzn-results .group-result {
    cursor: default;
    color: #666;
    font-weight: 600;
    background: #f3f3f3;
    text-transform: uppercase;
}

.chzn-container {
    margin-bottom: 10px;
}

/* normalize BOTH arrow boxes to identical size + vertical centering */
.chzn-container-single .chzn-single div b,
.chzn-container-multi  .chzn-multi-pull b {
  background: none !important;
  position: relative !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin-top: 0 !important;
}

.chzn-container-single .chzn-single div,
.chzn-container-multi  .chzn-multi-pull {
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 18px !important;
  right: 6px !important;         /* uniform gap from the right edge */
}

/* center the glyph inside the 18x18 box (no % offsets) */
.chzn-container-single .chzn-single div b::before,
.chzn-container-multi  .chzn-multi-pull b::before {
  content: "\f078";
  font-family: "Font Awesome 7 Pro";
  font-weight: 900;
  font-size: 10px;
  line-height: 18px;             /* == box height → vertical centering */
  color: #555;
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  text-align: center;            /* horizontal centering */
  transform: none;
}

.chzn-container-active.chzn-with-drop .chzn-single div b::before,
.chzn-container-active.chzn-with-drop .chzn-multi-pull b::before {
  content: "\f077";
}

.control-group .chzn-container {
    margin-bottom: 0px;
}

.well .btn-group .chzn-container {
    margin-bottom: 0px;
    display: inline-table;
	top:0px;
}

.well form .chzn-container {
	display: inline-table;
	top:-4px;
    margin-bottom: 0px;
}


/* Focused, list closed: the full ring, like any other field. */
.chzn-container-active:not(.chzn-with-drop) .chzn-single,
.chzn-container-active:not(.chzn-with-drop) .chzn-choices {
	border-color: var(--focus-color);
	box-shadow: var(--focus-ring);
}

/* List open: green border only. The field and the list are joined (the drop has
   no top border), so a ring would draw a halo straight across that joint — and
   the open list is already the focus cue. */
.chzn-container-active .chzn-choices, .chzn-container-active .chzn-single-with-drop  {
    border: 1px solid var(--focus-color);
    background-color: var(--color-bg-white);
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.chzn-container .chzn-drop {
    border: 1px solid var(--focus-color);
    border-top: 0px;
}

/* 1. Force long unbroken values to wrap inside the tag,
      so they never extend under the dropdown arrow */
.chzn-container .search-choice span {
  word-break: break-all;
  overflow-wrap: break-word;
  white-space: normal;
}

/* 2. Belt-and-braces: make sure the close (x) is always
      clickable above any other layered element */
.chzn-container .search-choice-close {
  z-index: 10;
  position: relative; /* needed for z-index to take effect */
}

.input-xlarge, #roomsHolder input[type=text].input-xlarge {
    width: 270px;
}

.input-prepend input.input-xlarge, #roomsHolder .input-prepend input[type=text].input-xlarge {
    width: 241px;
}

@media (max-width: 767px) {
 	.input-prepend input.input-xlarge, #roomsHolder .input-prepend input[type=text].input-xlarge {
    width: 100%;
	}
}

.intl-tel-input.allow-dropdown input, .intl-tel-input.allow-dropdown input[type=text], .intl-tel-input.allow-dropdown input[type=tel], .intl-tel-input.separate-dial-code input, .intl-tel-input.separate-dial-code input[type=text], .intl-tel-input.separate-dial-code input[type=tel] {
    padding-right: 6px;
    padding-left: 52px;
    margin-left: 0;
    height: 33px;   /* border-box here (.intl-tel-input * sets it), so this is the full height */
    width: 222px;
}

.intl-tel-input.allow-dropdown input.input-xlarge, .intl-tel-input.allow-dropdown input[type=text].input-xlarge, .intl-tel-input.allow-dropdown input[type=tel].input-xlarge, .intl-tel-input.separate-dial-code input.input-xlarge, .intl-tel-input.separate-dial-code input[type=text].input-xlarge, .intl-tel-input.separate-dial-code input[type=tel].input-xlarge {
    padding-right: 6px;
    padding-left: 52px;
    margin-left: 0;
    height: 33px;   /* see above — border-box, full height */
    width: 282px;
}

@media (max-width: 767px) {
 	.intl-tel-input.allow-dropdown input, .intl-tel-input.allow-dropdown input[type=text], .intl-tel-input.allow-dropdown input[type=tel], .intl-tel-input.separate-dial-code input, .intl-tel-input.separate-dial-code input[type=text], .intl-tel-input.separate-dial-code input[type=tel] {
	 width: 100%;
	 }
	 .intl-tel-input {
    width: 100%;
	}

	.modal-body .intl-tel-input.allow-dropdown input, .modal-body .intl-tel-input.allow-dropdown input[type=text], .modal-body .intl-tel-input.allow-dropdown input[type=tel], .modal-body .intl-tel-input.separate-dial-code input, .modal-body .intl-tel-input.separate-dial-code input[type=text], .modal-body .intl-tel-input.separate-dial-code input[type=tel] {
	 width: 220px;
	 }
	.modal-body .intl-tel-input {
    width: 100%;
	}
	select.input-xlarge, .modal-body select.input-xlarge{
	width: 220px;
	}
}

select {
	-webkit-appearance: none;
	line-height: 22px;
	background-color: #ffffff !important;
	background: #ffffff;
	border: 1px solid #cccccc;
	box-shadow: none;
	-webkit-transition: border linear .2s, box-shadow linear .2s;
	-moz-transition: border linear .2s, box-shadow linear .2s;
	-o-transition: border linear .2s, box-shadow linear .2s;
	transition: border linear .2s, box-shadow linear .2s;
	background: url('../img/jquery.chosen/chosen-sprite@2x.png') no-repeat 200px 5px;
	background-size: 52px 42px !important;
 }
select.input-xlarge, #roomsHolder select.input-xlarge {
	width: 282px;
	-webkit-appearance: none;
	line-height: 22px;
	background-color: #ffffff !important;
	background: #ffffff;
	border: 1px solid #cccccc;
	box-shadow: none;
	-webkit-transition: border linear .2s, box-shadow linear .2s;
	-moz-transition: border linear .2s, box-shadow linear .2s;
	-o-transition: border linear .2s, box-shadow linear .2s;
	transition: border linear .2s, box-shadow linear .2s;
	background: url('../img/jquery.chosen/chosen-sprite@2x.png') no-repeat 262px 5px;
	background-size: 52px 42px !important;
 }
select.input-small, #roomsHolder select.input-small {
	width: 104px;
	-webkit-appearance: none;
	line-height: 22px;
	background-color: #ffffff !important;
	background: #ffffff;
	border: 1px solid #cccccc;
	box-shadow: none;
	-webkit-transition: border linear .2s, box-shadow linear .2s;
	-moz-transition: border linear .2s, box-shadow linear .2s;
	-o-transition: border linear .2s, box-shadow linear .2s;
	transition: border linear .2s, box-shadow linear .2s;
	background: url('../img/jquery.chosen/chosen-sprite@2x.png') no-repeat 84px 5px;
	background-size: 52px 42px !important;
 }

select.input-medium {
	width: 174px;
	-webkit-appearance: none;
	line-height: 22px;
	background-color: #ffffff !important;
	background: #ffffff;
	border: 1px solid #cccccc;
	box-shadow: none;
	-webkit-transition: border linear .2s, box-shadow linear .2s;
	-moz-transition: border linear .2s, box-shadow linear .2s;
	-o-transition: border linear .2s, box-shadow linear .2s;
	transition: border linear .2s, box-shadow linear .2s;
	background: url('../img/jquery.chosen/chosen-sprite@2x.png') no-repeat 154px 5px;
	background-size: 52px 42px !important;
}
input.input-medium {
	width: 160px;
}

@media (max-width: 767px) {
 select.input-xlarge, #roomsHolder select.input-xlarge {
	 width: 100%;
	 background-position: calc(100% + 35px) 5px;
	 }
	 #roomsHolder input[type=text].input-xlarge {
	    width: 100%;
	}
	.input-xlarge {
	 width: 100%;
	}

	.input-prepend,.input-prepend input.input-xlarge {
	 width: 100%;
	}

	#login-container .input-prepend {
	 width: auto;
	}

	.textarea-large {
    width: 96% !important;
	}
}

body select,
body select.input-mini,  body select.input-small,  body select.input-medium,
body select.input-large,  body select.input-xlarge, body select.input-xxlarge,
#roomsHolder select.input-small,
#roomsHolder select.input-xlarge {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23555'%3E%3Cpath d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  background-size: 13px 13px !important;
}

.PaymentDates {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 10px;
}

.PaymentDates:first-child {
  border-top: 0px solid rgba(0, 0, 0, 0.05);
  padding-top:0px
}

/* Inbox */
.inbox-menu {
    float: left;
    width: 180px;
    background-color: #f9f9f9;
    padding: 10px 0;
}

.inbox-menu i {
    display: inline-block;
    width: 15px;
    margin-right: 5px;
}

.inbox-menu a {
    padding-top: 14px !important;
    padding-bottom: 12px !important;
    color: var(--colors--gray--700);
}

.inbox-menu a:hover {
    color: var(--colors--gray--700);
}

.inbox-menu-count {
    float: right;
    font-weight: bold;
}

.inbox-menu-count i {
    margin: 0;
    width: auto;
}

.inbox-messages-outer {
    margin-left: 200px;
}

.inbox-messages {
    width: 100%;
    display: table;
}

.inbox-messages-list {
    width: 250px;
    display: table-cell;
    vertical-align: top;
}

.inbox-messages-list > input {
    width: 236px;
    margin: 0;
    padding: 8px 5px;
    border: 2px solid #e5e5e5;
    border-right-color: var(--color-bg-white);
    border-bottom-color: var(--color-bg-white);
}

.inbox-messages-list .nav {
    margin-bottom: 0;
}

.inbox-messages-list a {
    margin: 2px 0 !important;
    padding: 12px 10px !important;
    color: var(--colors--gray--700);
    border-left: 3px solid #ddd;
}

.inbox-messages-list a.unread {
    border-color: #468847;
}

.inbox-messages-list a:hover {
    color: var(--colors--gray--700);
}

.inbox-messages-list li.active a {
    border: none;
}

.inbox-messages-list-username,
.inbox-messages-list-meta {
    font-weight: bold;
    font-size: 12px;
    font-style: italic;
}

.inbox-messages-list-meta {
    float: right;
    font-weight: normal;
    margin: -1px;
}

.inbox-messages-list-title {
    font-weight: bold;
    padding: 8px 0 0;
    display: inline-block;
}

.inbox-messages-list-preview {
    padding: 3px 0 0;
    line-height: 1.6;
    display: inline-block;
}

.inbox-messages-container {
    background-color: var(--colors--emerald--20);
    display: table-cell;
    vertical-align: top;
    border-radius: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-left: 3px solid var(--colors--rentila--green);
}

.inbox-messages-content-actions {
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #ddd;
    background: #eee;
}

.inbox-messages-content-actions li {
    float: left;
}

.inbox-messages-content-actions a {
    display: block;
    padding: 5px 10px;
    height: 28px;
    line-height: 28px;
    color: #333333;
}

.inbox-messages-content-actions i {
    display: inline-block;
    width: 12px;
    margin-right: 5px;
}

.inbox-messages-content-actions a:hover {
    text-decoration: none;
    background-color: var(--colors--rentila--green);
    color: var(--color-bg-white);
}

.inbox-messages-content-header,
.inbox-messages-content-body,
.inbox-messages-content-reply {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.inbox-messages-content-body {
    background-color: #f9f9f9;
    color: var(--colors--gray--700);
}

.inbox-messages-content-reply {
    border: none;
}

.message-content{
    background: white;
    padding: 10px;
    margin: 5px 0px;
    border-radius: 3px;
}

.assignee-list{
    background: rgba(0,0,0,0.02);
    padding: 10px;
    margin: 5px 0px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Tables + DataTables */
.dataTables_wrapper{
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)
}


.table td {
    vertical-align: middle;
    border-top: 1px solid rgba(0,0,0,0.04);
}

tr.paid {
    background: none repeat scroll 0 0 #dcf5d1 !important;
}
tr.part {
    background: none repeat scroll 0 0 #fff8e1 !important;
}
/* Status tints go on the td, not the tr: in dark mode the cell background
   covers any row-level background, so a tr rule is invisible there.
   The !important is required because body.dark .table > tbody > tr > td
   outranks tr.late > td. The real fix is for dark mode to stop setting td
   backgrounds generically, but that refactor touches every table in the app —
   noting the debt here rather than paying it. */
tr.notpaid > td {
    background-color: var(--color-row-pending) !important;
}

tr.late > td {
    background-color: var(--color-row-late) !important;
}

/* "Perdu" / lost. NOTE: `unpaid` is NOT this status — it is a shared
   de-emphasis utility used by leases, system messages, templates, credits and
   admin invoices for "inactive / ended / archived" rows. Styling it as a status
   inverted the emphasis on those pages (two thirds of the leases list painted,
   active leases plain). `lost` is emitted by payments/list.tpl for
   PaymentStatus -1 only. */
tr.lost > td {
    background-color: var(--color-row-lost) !important;
}

/* A status row always carries a 3px bar: bar = "this row has a status",
   colour = which one, tint = how urgent. The bar must be on td:first-child —
   an inset shadow on the tr is painted under the cell backgrounds. */
tr.notpaid > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--color-row-bar-pending);
}

tr.late > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--color-row-bar-late);
}

tr.lost > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--color-row-bar-lost);
}

tr.inactive {
    background: none repeat scroll 0 0 #f3f3f3 !important;
}

/* Shared "inactive / ended / archived" de-emphasis — leases, system messages,
   templates, credits, admin invoices. Not a status tint: it must recede, not
   announce. Do not give it a status colour or a bar. */
tr.unpaid td{
    background: #fcfcfc !important;
    opacity: 0.7;
}
tr.unpaid:hover td{
    opacity: 1;
}
tr.unpaid td:last-child{
    opacity: 1;
    background: rgba(252, 252, 252, 0.5) !important;
    border-top: 1px solid rgba(0,0,0,0.02);
}

td.plus, td.plus a, td.plus a:hover {
    color: var(--colors--rentila--green);
}

td.minus, td.minus a, td.minus a:hover {
    color: var(--color-error);
}

/* Payment amounts. Light values are the historic inline colours, unchanged;
   they only moved out of the template so dark mode can override them (the
   literals failed WCAG AA on the dark table surface). See main-dark.css. */
.amount-pos {
    color: green;
}

.amount-neg {
    color: red;
}

.amount-muted {
    color: #888;
}

.amount-partial {
    color: #847600;
}

.table-borderless th,
.table-borderless td {
    border-top: none;
}

/* Hover is a veil, not a colour. A translucent background-color REPLACES the
   cell's colour and composites over what is behind it, losing the status tint
   (a hovered .late row used to render as the exact yellow of a resting
   .notpaid row). A gradient layer composites over the cell's own colour, so
   the veil is a constant darkening of whatever the row already is.
   `:not(.month)` skips the month separator — a colspan row with cursor:auto and
   no action behind it, so highlighting it is a false affordance. Exclude any
   other static row (totals, empty state) the same way. Deliberately NOT
   `tr:not(:has(> td[colspan]))`: if :has() is unsupported the whole selector is
   invalid and hover dies on every table in the app. */
.table-hover tbody tr:not(.month):hover > td,
.table-hover tbody tr:not(.month):hover > th {
  background-image: linear-gradient(var(--color-row-hover-veil), var(--color-row-hover-veil)) !important;
}

.table th.ellipsis,
.table td.ellipsis{
	text-overflow: ellipsis;
	overflow-x: hidden;
	white-space: nowrap;
}

.table .w150{
	width: 150px;
	max-width: 150px;
}

.table .w250{
	width: 250px;
	max-width: 250px;
}

.table th.250, .table td.250 {
	width: 100%;
	max-width: 250px;
}

.dataTables_wrapper > div {
	background-color: var(--colors--emerald--10);
    padding: 8px 0 8px;
    width: auto;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.dataTables_wrapper > div.top {
    border-bottom: none;
    border-top-right-radius: 10px;
    border-top-left-radius:  10px;
}

.dataTables_wrapper > div.bottom {
    border-top: none;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius:  10px;
}

.dataTables_length label, .dataTables_left label {
	float: left;
	text-align: left;
	margin: 0px;
	margin-right: 3px !important;
}

.dataTables_length select, .dataTables_left select {
	/*width: 55px;*/
    margin: 0 0 0 10px;
    height: 30px;
    /*line-height: 30px;*/
}

.dataTables_length .btn-group:first-child, .dataTables_left .btn-group:first-child {
    margin: 0 0 0 10px !important;
    height: 30px;
    line-height: 30px;
}


.dataTables_filter label, .dataTables_right label {
	float: right;
    margin: 0 10px 0 0;
}

.dataTables_filter label, .dataTables_right label.checkbox {
	float: none;
    margin: 0 10px 0 10px;
}

.dataTables_info {
    padding-top: 5px;
    margin: 0 0 0 10px;
}

.dataTables_info .dropdown-toggle{
  margin-top: -5px !important;
}

.dataTables_paginate {
	float: right;
	margin: 5px 10px 0 0;
}

.dataTables_paginate .pagination {
	margin: 0px;
}

table.table thead .sorting,
table.table thead .sorting_asc,
table.table thead .sorting_desc,
table.table thead .sorting_asc_disabled,
table.table thead .sorting_desc_disabled {
	cursor: pointer;
	*cursor: hand;
}

.table thead .sorting,
.table thead .sorting_asc,
.table thead .sorting_desc,
.table thead .sorting_asc_disabled,
.table thead .sorting_desc_disabled {
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 19px 19px;
    padding-right: 15px;
}
/*.table thead .sorting { background-image: url('../img/jquery.datatables/sort_both.png'); }
.table thead .sorting_asc { background-image: url('../img/jquery.datatables/sort_asc.png'); }
.table thead .sorting_desc { background-image: url('../img/jquery.datatables/sort_desc.png'); }
.table thead .sorting_asc_disabled { background-image: url('../img/jquery.datatables/sort_asc_disabled.png'); }
.table thead .sorting_desc_disabled { background-image: url('../img/jquery.datatables/sort_desc_disabled.png'); }
*/
/* neutral — up AND down chevron stacked, same style as asc/desc */
.table thead .sorting {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 640' fill='rgba(85%2C85%2C85%2C0.4)'%3E%3Cpath d='M201.4 54.6c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 122.5 86.6 259.9c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z'/%3E%3Cpath d='M201.4 585.4c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 517.5 86.6 380.1c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E") no-repeat right 8px center !important;
  background-size: 11px 13px !important;
}

/* ascending — chevron-up */
.table thead .sorting_asc {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23555'%3E%3Cpath d='M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z'/%3E%3C/svg%3E") no-repeat right 8px center !important;
  background-size: 11px 11px !important;
}

/* descending — chevron-down (same glyph as your .caret) */
.table thead .sorting_desc {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23555'%3E%3Cpath d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E") no-repeat right 8px center !important;
  background-size: 11px 11px !important;
}

/* disabled variants — same chevrons, faded via a lighter fill */
.table thead .sorting_asc_disabled {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ccc'%3E%3Cpath d='M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z'/%3E%3C/svg%3E") no-repeat right 8px center !important;
  background-size: 11px 11px !important;
}

.table thead .sorting_desc_disabled {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ccc'%3E%3Cpath d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E") no-repeat right 8px center !important;
  background-size: 11px 11px !important;
}

.table.table thead .sorting a, table.table thead .sorting a:hover {
  text-decoration: none;
  color: #333333;
  display: block;
}


.dataTable {
	clear: both;
	margin-bottom: 0 !important;
	max-width: none !important;
}

.dataTable th {
    background-color: #f9f9f9;
    font-weight: 600;
}

.dataTable th:active {
	outline: none;
}

.dataTables_scrollHead table {
	margin-bottom: 0 !important;
}

.dataTables_scrollBody table {
	border-top: none;
	margin-bottom: 0 !important;
}

.dataTables_scrollBody tbody tr:first-child th,
.dataTables_scrollBody tbody tr:first-child td {
	border-top: none;
}

.dataTables_scrollFoot table {
	border-top: none;
}

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.table-responsive th:last-child, .table-responsive td:last-child{
    position: sticky;
    right: 0;
    background: inherit;
    z-index: 1;
}
.table-responsive td:last-child{
  border-left: 1px solid rgba(0,0,0,0.07)
}
.table-responsive td:last-child .btn-mini{
  padding: 1px 4px;
}
/* Buttons */
.btn,
.btn-primary {
    filter: none;
    text-shadow: none;
}

.btn {
background: white;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: none;
text-shadow: none !important;
border-radius: 7px !important;
-webkit-appearance: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
    background-color: #eeeeee;
	background-image: none;
}

.btn.disabled, .btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.45;
    filter: alpha(opacity=45);
            box-shadow: none;
}

.btn.active, .btn:active {
    background-image: none;
    outline: 0;
            box-shadow: inset 1px 2px 0px rgba(0,0,0,.05), 0 0px 0px rgba(0,0,0,.05);
}

.btn-2x {
	display: inline-block;
    padding: 10px 18px 12px;
    margin-bottom: 0;
    font-size: 18px;
}
.btn-seamless {
    background: none;
    border: none;
	text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.05);
        box-shadow: none;
}

.btn-seamless:hover,
.btn-seamless:focus,
.btn-seamless:active,
.btn-seamless.active,
.btn-seamless.disabled,
.btn-seamless[disabled] {
    background: none;
}

.btn-primary {
    background: #006dcc /*url('../img/btn_grad.png') repeat-x 0px 0px*/;
	text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.05);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
    background: #0044cc;
}

.btn-success {
    background: var(--colors--rentila--green) /*url('../img/btn_grad.png') repeat-x 0px 0px*/;
	text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.05);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
    background: #5c8429 !important;
}

.btn-danger {
    background: #da4f49  /*url('../img/btn_grad.png') repeat-x 0px 0px*/;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
    background: #bd362f;
}

.btn-warning {
    background: #faa732 /*url('../img/btn_grad.png') repeat-x 0px 0px*/;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled] {
    background: #f89406;
}

.btn-info {
    background: #49afcd  /*url('../img/btn_grad.png') repeat-x 0px 0px*/;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
    background: #2f96b4;
}

.btn-inverse {
    background: #363636  /*url('../img/btn_grad.png') repeat-x 0px 0px*/;
}

.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
    background: #222;
}

.btn-white {
    background: var(--color-bg-white);
}

.btn-white.active {
    background: #f6f6f6 !important;
}

.btn-white:hover,
.btn-white:focus,
.btn-white:active,
.btn-white.active,
.btn-white.disabled,
.btn-white[disabled] {
    background: var(--color-bg-white);
}

.btn-purple {
    background: #635bff;
    color: white;
}

.btn-purple.active {
    background: #635bff !important;
    color: white;
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.btn-purple.disabled,
.btn-purple[disabled] {
    background: #4D45E8;
    color: white;
}

.btn-rausch {
  background: #FF5A5F;
  color: white;
}

.btn-rausch.active {
  background: #FF5A5F important;
  color: white;
}

.btn-rausch:hover,
.btn-rausch:focus,
.btn-rausch:active,
.btn-rausch.active,
.btn-rausch.disabled,
.btn-rausch[disabled] {
    background: #d44a4e;
    color: white;
}

.btn-link {
    background: transparent;
}

.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link.active,
.btn-link.disabled,
.btn-link[disabled] {
    background: transparent;
}

.btn-mini .caret, .btn-small .caret {
margin-top: 8px;
margin-left: 3px;
margin-right: 3px;
}

/* Buttons group for switching */
@media (max-width: 768px) {
.btn.btn-white.span6 {
	display:inline !important;
	float: left !important;
	width: 49.93617021276595% !important;
	}
}

.btn-rounded {
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;            /* let flex centering handle it instead of asymmetric padding */
  width: 32px;
  height: 32px;
  line-height: 1;
}

.btn-rounded.activeTask {
    background: rgba(255, 255, 255, 0.4);
}

button.activeTask {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.btn-rounded.activeTask:hover {
    background: var(--colors--rentila--green) !important;
    color: #ffffff !important;
	text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.05);
}

/* Keep the reopen button green on hover — the JS mouseover removes btn-success so we anchor
   the color via the inactiveTask class itself instead of relying on btn-success:hover */
.btn-rounded.inactiveTask:hover,
.btn-rounded.inactiveTask:focus {
    background: #5c8429 !important;
    color: #fff !important;
}

.btn-rounded.inactiveTask:hover i,
.btn-rounded.inactiveTask:focus i {
    color: #fff !important;
}

.btn-transparent, .btn-transparent:hover {
    background-color: transparent;
}
button[data-agent] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-attachment {
    max-width: 250px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #0088cc;
}

.btn-attachment i {
    color: #222222;
}

.btn-group>.btn+.dropdown-toggle {
            box-shadow: none;
}

.btn.file-attachment {
    color: #0088cc;
}

.btn.file-attachment i {
    color: #222222;
}

.btn .label-block {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 75%;
}

.btn-ai {
border-radius: 3px;
box-sizing: border-box;
}

.btn-ai b {
 font-weight: normal;
 color: #333333;
 background-image: linear-gradient(45deg, #333333 47%, #72A333 69%, #93D938 100%); 
 background-clip: text; 
 -webkit-background-clip: text; 
 -webkit-text-fill-color: transparent; 
}

.btn-group > .btn.btn-ai.dropdown-toggle {
    width: 28px;
    height: 28px;
    border-radius: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

/* while the AI request runs - needs !important to beat the global a{cursor:pointer} */
.btn-ai.loading {
    cursor: progress !important;
}

.caret {
  display: inline-block;
  width: auto;
  height: auto;
  border: 0;
  vertical-align: middle;
  line-height: 1;
  position: relative;
  top: -3px;
  margin-top: 0 !important;
  font-size: 0.85em;
}
.caret::before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400;
  content: "\f078";
  color: inherit;
  font-size: 0.85em;
  line-height: 1;
  display: inline-block;
}
/* Custom checkbox and radio */

.cb-rb {
  padding: 0px !important;
}
td label.cb-rb {
  margin-bottom: 10px !important;
}
/* The checkbox cell is ~34px (2.5% of the table) less 16px of td padding and
   the label's own m-l-5, leaving ~14px — under the 12px span margin-right plus
   the space the template's newline puts between <input> and <span>. The span
   wrapped to a second line, and since the box is drawn by span::before against
   that line, it landed ~10px below the row centre and the row grew ~15px. */
td label.cb-rb,
th label.cb-rb {
  white-space: nowrap;
}
.cb-rb input[type="radio"],
.cb-rb input[type="checkbox"] {
  display: inline-block;
  margin-right: 6px;
}
.cb-rb input[type="radio"] + span,
.cb-rb input[type="checkbox"] + span {
  position: relative;
  display: inline-block;
  /*temp*/
  margin-right: 12px;
  font-size: 14px;
  line-height: 30px;
  cursor: pointer;
}

@media (min-width: 1px) {
  /* Visually hidden rather than display:none: a display:none input cannot be
     focused, so keyboard users got no focus cue at all on these. Kept in flow
     at zero size so nothing shifts and focus never scrolls the page.
     appearance:none is what lets Safari honour the zero size. */
  .cb-rb input[type="radio"],
  .cb-rb input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    opacity: 0;
    border: 0;
    padding: 0;
    margin: 0;
  }

  /* The ring goes on the faux box, since the real input is invisible. */
  .cb-rb input[type="radio"]:focus-visible + span:before,
  .cb-rb input[type="checkbox"]:focus-visible + span:before {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

  .cb-rb input[type="radio"] + span,
  .cb-rb input[type="checkbox"] + span {
    padding: 0 0 0 24px;
  }

  .cb-rb input[type="radio"] + span:before,
  .cb-rb input[type="checkbox"] + span:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: #FFF;
  }

  .cb-rb input[type="radio"] + span:before {
    border: 1px solid #ccc;
    border-radius: 100%;
  }

  .cb-rb input[type="checkbox"] + span:before {
    border: 1px solid #ccc;
    border-radius: 3px;
  }

  .cb-rb input[type="radio"]:checked + span:before,
  .cb-rb input[type="checkbox"]:checked + span:before {
    /*border-color: #ccc;*/
    border-color: var(--colors--rentila--green);
    background-color: var(--colors--rentila--green);
  }

  .cb-rb.disabled input[type="radio"]:checked + span:before,
  .cb-rb.disabled input[type="checkbox"]:checked + span:before {
    /*border-color: #ccc;*/
    border-color: #999999;
    background-color: #999999;
  }

  .cb-rb input[type="radio"]:checked + span:after,
  .cb-rb input[type="checkbox"]:checked + span:after {
    content: "";
    position: absolute;
    top: 50%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
  }

  .cb-rb input[type="radio"]:checked + span:after {
    left: 5px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    background: #ffffff;
    border-radius: 8px;
  }

  .cb-rb input[type="checkbox"]:checked + span:after {
    left: 3px;
    width: 12px;
    height: 6px;
    margin-top: -4px;
    /*border-left: 2px solid #72a333;
    border-bottom: 2px solid var(--colors--rentila--green);*/
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}


/* Progress */
.progress-mini {
    height: 10px;
    margin: 5px 0;
}

.progress {
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.progress, .progress .bar {
	border-radius: 5px !important;
}

/* Links */


/* MISC */
.alert{
	border-left: 4px solid #f89406;
  color: #a7803d;
  border-radius: 10px !important;
  text-shadow: none;
  
}

.alert.alert-danger, .alert.alert-error{
	border-left: 4px solid #cc0000;
  background-color: rgba(242, 222, 222,0.5);
  color: #ac3e3c;
}

.alert.alert-info{
	border-left: 4px solid #3a87ad;
  background-color: rgba(217, 237, 247,0.4);
  color: #3280a7;
}
.alert.alert-success{
	border-left: 4px solid var(--colors--rentila--green);
  background-color: rgba(223, 240, 216,0.5);
  color: #597d11;
}
.alert-gray {
background-color: #f9f9f9;
border-color: #e3e3e3;
color: #333333;
}

.alert-info a {
	color: #347697 !important;
	text-decoration: underline;
}

.alert-gray a {
color: #347697 !important;
text-decoration: underline;
}

.alert-danger a {
	color: #a1403f !important;
	text-decoration: underline;
}

.alert-success a {
	color: #637610 !important;
	text-decoration: underline;
}

.alert a {
	color: #a48042;
	text-decoration: underline;
}

.alert .lead {
	line-height: 40px;
}

.noresult {
    padding: 10px 10px 0px 10px;
    filter: alpha(opacity=90);
	opacity: 0.9;
}

.noresult .icon-coffee, .noresult .icon-archive, .noresult .icon-wink {
    font-size: 10em;
    color: #777;
}

.noresult h4{
    font-size: 2em;
    color: #222;
    font-weight: 400;
}

.noresult p{
    color: #444;
    margin: 20px 0px;
    font-size: 16px;
}

.result {
	-webkit-appearance: none;
	/*line-height: 31px;*/
	background-color: #ffffff !important;
	background: #ffffff;
	border: 1px solid #cccccc;
	padding: 5px 8px 7px 8px;
	border-radius: 5px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.0);
	-webkit-transition: border linear .2s, box-shadow linear .2s;
	-moz-transition: border linear .2s, box-shadow linear .2s;
	-o-transition: border linear .2s, box-shadow linear .2s;
	transition: border linear .2s, box-shadow linear .2s;
}

.prix-moyen-fourchette span, .prix-moyen span {
    display: block;
}



/* Remove radius from elements */
.pager li > a,
.pager li > span,
.nav-tabs > li > a,
.nav-pills > li > a,
.accordion-group,
.well,
.alert,
.modal,
.progress,
.popover,
.thumbnail,
/*.table-bordered,
.table-bordered th,
.table-bordered td,*/
.add-on,
.tooltip-inner,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input,
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span,
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span,
.popover-title {
    border-radius: 5px;
    -webkit-appearance: none;
    box-shadow: none;
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
}

.popover.right .arrow {
    left: 24px;
}
.popover.left .arrow {
    top: 50%;
    left: 113%;
}

.table-bordered{
	border-top:1px solid rgba(0,0,0,0.04);
	border-bottom:1px solid rgba(0,0,0,0.04);
}
.table-bordered,
.table-bordered th,
.table-bordered td{
            border-radius: 0px !important;
    -webkit-appearance: none;
}

.table-bordered tr {
   background: #ffffff;
}

.table-bordered tr td {
   border-left: 0px solid #eeeeee;
   height: 35px;
}

.table-bordered tr th  {
   border-left: 0px solid #eeeeee;
   background: #fefefe;
   white-space: nowrap;
}


.table-bordered tr td:first-child, .table-bordered tr th:first-child  {
   border-left: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.table-bordered tr td input[type="checkbox"]  {
   margin-top: 0px;
}

.bilan.table-bordered tr td {
    height: 10px;
}

.table-bordered tr.month td {
    background: #fcfcfc;
    height: 15px;
    padding: 3px 8px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    color: rgba(0,0,0,0.5);
}


.well {
    background-color: var(--colors--emerald--10);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}

.well.white {
  background-color: var(--color-bg-white);
	padding: 9px;
	margin: 10px 0px 10px 0px;
}

.well .btn-group {
margin-right: 5px;
margin-left: 0px;
margin-top: 5px;
}


.well .btn-group select, .well .btn-group input  {
margin-bottom: 0px;
}

.well h5, .well h4, .well h2, .well h3 {
    margin-top: 0px;
}

.filterform .btn-group {
	white-space: normal;
}

/*
=================================================================
(#m07hes) HELPERS
=================================================================
*/

.push {
    margin-bottom: 20px !important;
}
/*.well, .dataTables_wrapper, .form-box {
  box-shadow: rgb(0 0 0 / 2%) 0px 0px 0px 4px !important;
  border-radius: 3px !important;
}*/

.lt-ie9 .hidden-lt-ie9 {
    display: none;
}

.display-none {
    display: none;
}

.remove-margin {
    margin: 0 !important;
}

.remove-padding {
    padding: 0 !important;
}

.remove-radius {
            border-radius: 0 !important;
}

.remove-box-shadow {
            box-shadow: none !important;
}

.remove-transition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.pull-10 {
    position: relative;
    top: -10px;
}

.pull-5 {
    position: relative;
    top: -5px;
}

.fileupload {
    display: inline-block;
    margin-bottom: 0px;
}

.fileupload-preview.ellipsis {
   	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    display: inline-block;
    line-height: 11px;
    line-height: 16px;
	position: relative;
	top: 3px;
}

.bordered {
	border-width: 1px;
	border-style: solid;
	border-radius: 3px;
}

.border-color-grey {
	border-color: #dddddd;
}

.border-color-green {
	border-color: var(--colors--rentila--green);
}

.border-color-gradient {
  background:
  radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 4px, transparent 4px) 0%   0%   / 5px 5px no-repeat,
  radial-gradient(circle at 0     100%, #ffffff 0, #ffffff 4px, transparent 4px) 100% 0%   / 5px 5px no-repeat,
  radial-gradient(circle at 100% 0,     #ffffff 0, #ffffff 4px, transparent 4px) 0%   100% / 5px 5px no-repeat,
  radial-gradient(circle at 0     0,     #ffffff 0, #ffffff 4px, transparent 4px) 100% 100% / 5px 5px no-repeat,
  linear-gradient(#ffffff, #ffffff) 50% 50% / calc(100% - 2px)  calc(100% - 10px) no-repeat,
  linear-gradient(#ffffff, #ffffff) 50% 50% / calc(100% - 10px) calc(100% - 2px)  no-repeat,
  linear-gradient(117deg, #d4e610 0%, var(--colors--rentila--green) 46%, #86a333 79%, #c1ee3d 98%);

border-radius: 5px;
padding: 6px;
box-sizing: border-box;
}

/* Background colors
------------------------------------
*/
.bg-white {
	background-color: #ffffff !important;
}

.bg-grey {
	/* 50% opacity grey, reusing an existing root color */
	background-color: color-mix(in srgb, var(--colors--gray--300) 50%, transparent) !important;
}

.bg-green, bg-success {
	background-color: var(--colors--rentila--green) !important;
}

.bg-blue, bg-info {
	background-color: #33b5e5 !important;
}

.bg-orange, bg-warning {
	background-color: #f89406 !important;
}

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

/* Transparency
------------------------------------
*/

.opacity-20 {
  opacity: 0.2 !important;
}
.opacity-40 {
  opacity: 0.4 !important;
}
.opacity-60 {
  opacity: 0.6 !important;
}
.opacity-80 {
  opacity: 0.8 !important;
}
.opacity-100 {
  opacity: 1 !important;
}

/*
=================================================================
(#m08gis) FILETYPE ICONS
=================================================================
*/

.file-type-icon {
  display: block;
  width: 28px;
  height: 36px;
  background: #f9f9f9;
  position: relative;
  border: 1px solid #e6e6e6;
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 0 #ffffff, inset -1px -1px 0 0 #ffffff,
    inset 0 10px 20px -10px rgba(0, 0, 0, 0.05);
}
.file-type-icon .corner {
  display: block;
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-left: 12px solid #eeeeee;
  border-top: 12px solid #ffffff; /*change this color if you want to use it on custom background*/
  box-shadow: -1px 1px 0px 0 #e6e6e6;
}

.file-type-icon .fad, .file-type-icon .fal, .file-type-icon .far, .file-type-icon .fa-badge {
    left: 12px;
    top: 16px;
    position: relative;
}

.file-type-icon .fa-badge {
  color: #f89406;
}

.file-type-icon .fa-shield-check {
  color: var(--colors--rentila--green);
}
.file-type-icon .fa-wifi-2, .file-type-icon .fa-fire, .file-type-icon .fa-phone, .file-type-icon .fa-bolt, .file-type-icon .fa-tint, .file-type-icon .fa-faucet-drip {
  color: #0088cc
}
.file-type-icon .fa-wifi-2 {
  left: 8px;
}

.file-type-icon .fa-th-large {
    left: 12px;
    top: 16px;
}

.file-type-icon .type {
  background: #777;
  text-align: center;
  text-transform: uppercase;
  display: block;
  position: absolute;
  bottom: 6px;
  left: -2px;
  height: 15px;
  line-height: 15px;
  font-size: 10px;
  color: var(--color-bg-white);
  border-radius: 1px;
  width: 25px;
}
.file-type-icon .type.txt {
  background: #f9b142;
}
.file-type-icon .type.doc, .file-type-icon .type.docx {
  background: #0088cc;
}
.file-type-icon .type.xls, .file-type-icon .type.xlsx {
  background: #85a91a;
}
.file-type-icon .type.pdf {
  background: #c80000;
}

/*
=================================================================
(#m09res) RESPONSIVE
=================================================================
*/

/* Large screens */
@media (min-width: 1200px) {

    .fixed #page-container {
        margin: 0 auto !important;
        width: 1140px !important;
    }

    .fixed #inner-container {
        border-left: 1px solid #ccc !important;
        border-right: 1px solid #ccc !important;
    }

    #SWM .span5, #EMR .span4, #TH .span5, #HW .span5, #KEY .span5, #OTH .span5, #roomsHolder .span5 {
		width: 275px;
	}

    #SWM .span4, #EMR .span4, #TH .span4, #HW .span4, #KEY .span4, #OTH .span4, #roomsHolder .span4 {
		/*width: 145px;*/
    width: 105px;
	}

  #SWM .span3, #EMR .span3, #TH .span3, #HW .span3, #KEY .span3, #OTH .span3, #roomsHolder .span3 {
		width: 105px;
	}

	#SWM .span2, #EMR .span2, #TH .span2, #HW .span2, #KEY .span2, #OTH .span2, #roomsHolder .span2 {
		width: 57px;
	}

	#SWM input, #EMR input, #TH input, #HW input,#KEY input, #OTH input, #roomsHolder input[type=text], #roomsHolder input[type=number] {
		/*width: 155px;*/
    width: 115px;
	}

	#SWM .span5 input, #EMR .span5 input, #TH .span5 input, #HW .span5 input,#KEY .span5 input, #OTH .span5 input, #roomsHolder .span5 input[type=text], #roomsHolder .span5 input[type=number] {
		width: 285px;
	}

	#SWM .span2 input, #EMR .span2 input, #TH .span2 input, #HW .span2 input,#KEY .span2 input, #OTH .span2 input, #roomsHolder .span2 input[type=text], #roomsHolder .span2 input[type=number] {
		width: 65px;
	}

	#SWM input, #EMR input, #TH input, #HW input,#KEY input, #OTH input, #roomsHolder .input-prepend input[type=text], #roomsHolder .input-prepend input[type=number] {
		/*width: 128px;*/
    width: 88px;
	}

	#SWM .span3 input, #EMR .span3 input, #TH .span3 input, #HW .span3 input, #KEY .span3  input, #OTH .span3 input, #roomsHolder .span3 .input-prepend input[type=text], #roomsHolder .span3 .input-prepend input[type=number] {
		width: 88px;
	}

	#SWM select, #EMR select, #TH select, #HW select,#KEY select, #OTH select, #roomsHolder select {
		/*width: 168px;*/
    width: 128px;
	}

  #SWM .span3 select, #EMR .span3 select, #TH .span3 select, #HW .span3 select,#KEY .span3 select, #OTH .span3 select, #roomsHolder .span3 select {
		width: 128px;
	}
	#SWM .span2 select, #EMR .span2 select, #TH .span2 select, #HW .span2 select, #KEY .span2 select, #OTH .span2 select, #roomsHolder .span2 select {
		width: 80px;
	}

}

/* Mobile up to portrait tablet */
@media (min-width: 979px) and (max-width: 1200px) {

	#SWM .span5, #EMR .span4, #TH .span5, #HW .span5, #KEY .span5, #OTH .span5, #roomsHolder .span5 {
		width: 200px;
	}

	#SWM .span4, #EMR .span4, #TH .span4, #HW .span4,#KEY .span4, #OTH .span4, #roomsHolder .span4 {
		width: 110px;
	}

	#SWM .span2, #EMR .span2, #TH .span2, #HW .span2, #KEY .span2, #OTH .span2, #roomsHolder .span2 {
		width: 60px;
	}

	#SWM input, #EMR input, #TH input, #HW input,#KEY input, #OTH input, #roomsHolder input[type=text], #roomsHolder input[type=number] {
		width: 110px;
	}

	#SWM .span5 input, #EMR .span5 input, #TH .span5 input, #HW .span5 input,#KEY .span5 input, #OTH .span5 input, #roomsHolder .span5 input[type=text], #roomsHolder .span5 input[type=number] {
		width: 195px;
	}

	#SWM .span2 input, #EMR .span2 input, #TH .span2 input, #HW .span2 input,#KEY .span2 input, #OTH .span2 input, #roomsHolder .span2 input[type=text], #roomsHolder .span2 input[type=number] {
		width: 60px;
	}

	#roomsHolder .input-prepend input[type=text], #roomsHolder .input-prepend input[type=number] {
		width: 80px;
	}

	#SWM select, #EMR select, #TH select, #HW select,#KEY select, #OTH select, #roomsHolder select {
		width: 119px;
	}

	#SWM .span2 select, #EMR .span2 select, #TH .span2 select, #HW .span2 select, #KEY .span2 select, #OTH .span2 select, #roomsHolder .span2 select {
		width: 70px;
	}

}

/* Mobile up to portrait tablet */
@media (min-width: 767px) and (max-width: 979px) {

	#SWM .span5, #EMR .span4, #TH .span5, #HW .span5, #KEY .span5, #OTH .span5, #roomsHolder .span5 {
		width: 190px;
	}

	#SWM .span4, #EMR .span4, #TH .span4, #HW .span4,#KEY .span4, #OTH .span4, #roomsHolder .span4 {
		width: 110px;
	}

	#SWM .span2, #EMR .span2, #TH .span2, #HW .span2, #KEY .span2, #OTH .span2, #roomsHolder .span2 {
		width: 60px;
	}

	#SWM input, #EMR input, #TH input, #HW input,#KEY input, #OTH input, #roomsHolder input[type=text], #roomsHolder input[type=number] {
		width: 110px;
	}

	#SWM .span5 input, #EMR .span5 input, #TH .span5 input, #HW .span5 input,#KEY .span5 input, #OTH .span5 input, #roomsHolder .span5 input[type=text], #roomsHolder .span5 input[type=number] {
		width: 190px;
	}

	#SWM .span2 input, #EMR .span2 input, #TH .span2 input, #HW .span2 input,#KEY .span2 input, #OTH .span2 input, #roomsHolder .span2 input[type=text] {
		width: 60px;
	}

	#roomsHolder .input-prepend input[type=text], #roomsHolder .input-prepend input[type=number] {
		width: 80px;
	}

	#SWM select, #EMR select, #TH select, #HW select,#KEY select, #OTH select, #roomsHolder select {
		width: 119px;
	}

	#SWM .span2 select, #EMR .span2 select, #TH .span2 select, #HW .span2 select, #KEY .span2 select, #OTH .span2 select, #roomsHolder .span2 select {
		width: 70px;
	}

}


/* Mobile up to portrait tablet to landscape and desktop */
@media (max-width: 979px) {

    #page-container {
        padding: 0 !important;
    }

    #page-sidebar {
        width: 100%;
        border: none;
        z-index: 100;
        position: relative;
    }

    #primary-nav {
        z-index: 1060;
        position: relative;
    }

    #primary-nav ul {
		z-index: 1070;
        position: relative;
	}

    #sidebar-search .input-append {
        width: 100%;
    }

    #sidebar-search input[type="text"] {
        width: 80%;
        max-width: 800px;
        min-width: 250px;
    }

    #sidebar-search button {
        float: right;
        margin-right: 10px;
    }

    #page-content {
        margin: 0;
        border: none;
    }

    footer {
        margin: 0;
        border-left: none;
    }

    .nav-dash > li > a {
        font-size: 26px;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .dash-tile-text {
        font-size: 32px;
    }

   /* #SWM .span4, #EMR .span4, #TH .span4, #HW .span4,#KEY .span4, #OTH .span4, #roomsHolder .span4 {
		width: 210px;
	}*/
}

/* Mobile up to portrait tablet */
@media (max-width: 767px) {

    body {
        padding: 0;
    }

    body.login {
        padding: 20px 0;
    }

    #login-container {
        width: 280px;
        padding: 20px 10px;
    }

    #widgets .dropdown-toggle, #agenda a {
        padding-left: 3px;
        padding-right: 3px;
    }

    #left_top_alerts_menu, #left_top_agenda_menu {
    right: 0px;
    }

    #nav-info {
        margin: -10px -10px 10px;
    }

    #page-content {
        padding: 10px;
    }

    .page-header,
    .nav-dash {
        margin: 10px -10px;
    }    
    
    .sub-header {
      margin: 10px -20px;
    }

    .nav-dash > li > a {
        font-size: 22px;
        padding: 14px 12px;
    }

    .page-header-top {
        margin: -10px -10px 10px;
    }

    .chart-live {
        height: 300px;
        margin: -10px;
    }

    .fc-header-title h2 {
        font-size: 18px;
    }

    .tabs-left .tab-content,
    .tabs-right .tab-content {
        padding: 0;
    }

    .tabs-left > .nav-tabs,
    .tabs-right > .nav-tabs {
        border: none;
    }

    .tabs-left > .nav-tabs > li > a,
    .tabs-right > .nav-tabs > li > a {
        border: 1px solid var(--color-bg-white);
        margin-right: 0;
    }

    .tabs-left > .nav-tabs > li > a:hover,
    .tabs-right > .nav-tabs > li > a:hover {
        border: 1px solid var(--color-bg-white);
    }

    .tabs-left > .nav-tabs > .active > a,
    .tabs-right > .nav-tabs > .active > a,
    .tabs-left > .nav-tabs > .active > a:hover,
    .tabs-right > .nav-tabs > .active > a:hover {
        border: 1px solid #ddd;
    }

	.dataTables_wrapper .row-fluid .span6 {
		display: inline-block;
		width: 49%;
	}

	.dataTables_wrapper .row-fluid .span7 {
		float:none;
		display: inline-block;
		width: 100%;
	}

	.login_ckeckbox {
    width:270px; margin: 5px 4px;
	}

	.tooltip {
  	display: none !important;
    }
}

/* Landscape phones and down */
@media (max-width: 480px) {
/*
    #widgets {
        background-color: var(--color-text-dark);
        width: 100%;
    }
*/
    #widgets > li:last-child {
        float: right;
    }

    #widgets .widget > li {
        width: 190px;
    }

    #widgets > li.divider-vertical {
        display: none;
    }

    .dropdown-left-responsive .dropdown-menu {
        left: 0 !important;
        right: auto !important;
    }

    .dropdown-center-responsive .dropdown-menu {
        left: -80px !important;
        right: auto !important;
    }

    .dropdown-menu:before,
    .dropdown-menu:after {
        display: none !important;
    }

    #twitter-widget .media .pull-left,
    #messages-widget .media .pull-left {
        float: left;
    }

    .nav-dash > li {
        margin: 0 5px;
    }

    .form-box .form-actions {
        padding-left: 5px;
    }

    .form-box .input-prepend,
    .form-box .input-append,
    .form-box .input-switch {
        margin-top: 2px;
    }


    .help-inline {
        padding-top: 5px;
        display: block !important;
    }

    .fc-header-title h2 {
        font-size: 11px;
    }

    .fc-button-content {
        padding: 0 2px;
        font-size: 10px;
    }

    .fc-header-left {
        padding-left: 2px;
    }

    .fc-header-right {
        padding-right: 2px;
    }

	.addnew {
    display:block;
	float: none;
	}

	.addnew-group {
    display:inline-block;
	float: none;
	padding-left: 0px;
	padding-right: 0px;
	}

	.addnew-group:first-child {
    width: 88%;
	}

	.addnew-group:last-child {
    width: 11%;
	}

	.btn-group>.btn+.addnew-group.dropdown-toggle{
    width: 11%;
    padding-left: 0px;
	padding-right: 0px;
        box-shadow: none;
	}

	#cookiesdirective {
        display: none !important;
    }


}

/*
=================================================================
(#m10rts) RETINA
=================================================================
*/

/* Put your high resolution backgrounds here */
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {

    body.login {
        background-image: /*url('../img/template/login_bg@2x.png')*/;
    }

    #nav-info > li {
        background-image: url('../img/template/nav_info_seperator@2x.png');
    }
}





/* Calculator */

#calc
{
	width: 170px;
    height: 150px;

}

#calc table
{
    position: relative;
    top: 0px;
    border-collapse: collapse;
    border: 1px solid #b0b0b0;
    width: 170px;
    height: 150px;
	background: #ebebeb;
	box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.25);


}
#calc table, #calc tr, #calc  td
{
    border-collapse: collapse;
    border: 1px solid #b0b0b0;
    font-size: 15px;
    font-weight: bold;
	text-shadow: 0 1px 0 var(--color-bg-white);
    color: var(--colors--gray--700);
	text-align: center;
	box-shadow: inset 0px 1px 0px 0px #ffffff;
}
#calc  th
{
	padding: 5px 5px 0px 5px;
	vertical-align: middle;
}
#calc  tr
{
	height: 30px;
}
#calc  td
{
	width: 25%;
	padding: 3px;
}
#calc textarea
{
    background: #d3e3f1;
    height: 20px;
    width: 97%;
    color: #222222;
    font-size: 14px;
    font-weight: bold;
    cursor:text;
    border: 1px solid #bebebe;
    overflow:auto;
    margin-bottom: 5px;
}
#calc  th {background: #ebebeb;
    cursor:pointer;}
#calc td {background: #f6f6f6;
    cursor:pointer;}
#calc td:hover {color: #000; background: #ffffff;}
#calc td:active {color: #000; background: #eeeeee;}

#loginForm_componentDiv_wrap {display:none;}

/* Typehead */
.tt-hint {margin-top: 0px;}
.tt-input {margin-top: 0px;}

/* Property List*/
.properties-grid .property {
display: inline-block;
zoom: 1;
box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
background-color: var(--color-bg-white);
margin-bottom: 30px;
padding-bottom: 10px;
position: relative;
border-radius: 2px !important;
-webkit-appearance: none;
}

.properties-grid .property .image {
overflow: hidden;
position: relative;
border-radius: 2px !important;
-webkit-appearance: none;
}

.properties-grid .property .image a {
-moz-transition: background-color 0.2s ease-in;
-o-transition: background-color 0.2s ease-in;
-webkit-transition: background-color 0.2s ease-in;
transition: background-color 0.2s ease-in;
background-color: transparent;
display: block;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 200;
}

.properties-grid .property .image img {
height: auto;
width: 100%;
}

.properties-grid .property .price {
background-color: var(--color-bg-white);
color: #313131;
font-size: 18px;
padding: 5px 16px;
position: absolute;
left: 15px;
bottom: 15px;
border-radius: 2px !important;
-webkit-appearance: none;
}

.properties-grid .property .favorite {
	position: absolute;
    right: 15px;
    bottom: 15px;
}

.properties-grid .property .nouveau {
background-color: #f0512e;
color: var(--color-bg-white);
font-size: 12px;
padding: 0px 5px;
position: absolute;
left: 15px;
top: 15px;
border-radius: 2px !important;
-webkit-appearance: none;
}

.properties-grid .property h2 {
line-height: 22px;
margin: 10px 0px 0px 0px;
padding: 0px 15px;
font-size: 16px;
}

.properties-grid .property .location {
padding: 0px 15px;
}

.properties-grid .property .area {
color: #313131;
float: left;
margin-top: 8px;
}

.properties-grid .property .area .key {
display: inline;
font-weight: bold;
padding: 0px 0px 0px 15px;
}

.properties-grid .property .area .value {
display: inline;
}

.properties-grid .property .bedrooms {
float: right;
margin-right: 10px;
padding-top: 8px;
}

.properties-grid .property .bathrooms {
float: right;
margin-right: 15px;
padding-top: 8px;
}

.properties-grid .property .bathrooms .content {
background-image: url("../img/icons/bathrooms.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 14px 20px;
color: #313131;
padding-left: 25px;
}

.descriptif ul {
float: left;
margin: 5px;
}

.descriptif ul li {
display: inline-block;
text-align: center;
font-size: 22px;
font-weight: 700;
border-right: 1px solid #e2e2e2;
padding-right: 4px;
margin-right: 4px;
}

.descriptif ul li .label {
display: block;
font-size: 11px;
font-weight: 400;
color: #333333;
background:none;
/* not a status pill — these are the attribute captions in the flyer, and the
   base .label border/radius would draw a box round each one */
border: 0;
border-radius: 0;
padding: 0;
text-shadow: none;
}

.descriptif ul li .surface {
font-weight: 400;
font-size: 0.6em;
}

.descriptif ul li .euros {
font-weight: 300;
}

.descriptif ul li.last {
border: none;
}

.recherche {
padding: 20px 10px 10px 10px;
background-color: #fcfcfc;
text-align: left;
border: 1px solid #e3e3e3;
border-radius: 2px;
}

#nav-info-sub {
list-style: none;
margin: -20px -20px 20px;
padding-right: 40px;
border-bottom: 1px solid #ddd;
background-color: #ffffff;
}

#nav-info-sub .btn-alert{
margin:5px -10px;
}

#nav-info-sub .btn-group{
margin: 5px -20px;
}

#nav-info-sub .btn-transparent{
border-right: 1px solid #ddd;
padding: 10px;
border-left: none;
background: none;
border-bottom: none;
border-top: none;
}

@media (max-width: 768px) {
	#nav-info-sub {
	border-bottom: 1px solid #ddd;
	background-color: #ffffff;
	margin: -10px 0px 20px;
	padding: 0;
	}
	#nav-info-sub .btn-alert{
	margin:5px ;
	}
	#nav-info-sub .btn-transparent{
	border-right: 0px solid #ffffff !important;
	}
	#nav-info-sub .btn-group{
	margin: 5px 10px;
	}
	#nav-info-sub .span9{
	border-top: 1px solid #ddd;
	margin-left: 0px;
	}
}

/* Generic Padding Helpers
------------------------------------
*/
.p-t-0 {
  padding-top: 0px !important;
}
.p-r-0 {
  padding-right: 0px !important;
}
.p-l-0 {
  padding-left: 0px !important;
}
.p-b-0 {
  padding-bottom: 0px !important;
}
.padding-0 {
  padding: 0px !important;
}
.p-t-5 {
  padding-top: 5px !important;
}
.p-r-5 {
  padding-right: 5px !important;
}
.p-l-5 {
  padding-left: 5px !important;
}
.p-b-5 {
  padding-bottom: 5px !important;
}
.padding-5 {
  padding: 5px !important;
}
.p-t-10 {
  padding-top: 10px !important;
}
.p-r-10 {
  padding-right: 10px !important;
}
.p-l-10 {
  padding-left: 10px !important;
}
.p-b-10 {
  padding-bottom: 10px !important;
}
.padding-10 {
  padding: 10px !important;
}
.p-t-15 {
  padding-top: 15px !important;
}
.p-r-15 {
  padding-right: 15px !important;
}
.p-l-15 {
  padding-left: 15px !important;
}
.p-b-15 {
  padding-bottom: 15px !important;
}
.padding-15 {
  padding: 15px !important;
}
.p-t-20 {
  padding-top: 20px !important;
}
.p-r-20 {
  padding-right: 20px !important;
}
.p-l-20 {
  padding-left: 20px !important;
}
.p-b-20 {
  padding-bottom: 20px !important;
}
.padding-20 {
  padding: 20px !important;
}
.p-t-25 {
  padding-top: 25px !important;
}
.p-r-25 {
  padding-right: 25px !important;
}
.p-l-25 {
  padding-left: 25px !important;
}
.p-b-25 {
  padding-bottom: 25px !important;
}
.padding-25 {
  padding: 25px !important;
}
.p-t-30 {
  padding-top: 30px !important;
}
.p-r-30 {
  padding-right: 30px !important;
}
.p-l-30 {
  padding-left: 30px !important;
}
.p-b-30 {
  padding-bottom: 30px !important;
}
.padding-30 {
  padding: 30px !important;
}
.p-t-35 {
  padding-top: 35px !important;
}
.p-r-35 {
  padding-right: 35px !important;
}
.p-l-35 {
  padding-left: 35px !important;
}
.p-b-35 {
  padding-bottom: 35px !important;
}
.padding-35 {
  padding: 35px !important;
}
.p-t-40 {
  padding-top: 40px !important;
}
.p-r-40 {
  padding-right: 40px !important;
}
.p-l-40 {
  padding-left: 40px !important;
}
.p-b-40 {
  padding-bottom: 40px !important;
}
.padding-40 {
  padding: 40px !important;
}
.p-t-45 {
  padding-top: 45px !important;
}
.p-r-45 {
  padding-right: 45px !important;
}
.p-l-45 {
  padding-left: 45px !important;
}
.p-b-45 {
  padding-bottom: 45px !important;
}
.padding-45 {
  padding: 45px !important;
}
.p-t-50 {
  padding-top: 50px !important;
}
.p-r-50 {
  padding-right: 50px !important;
}
.p-l-50 {
  padding-left: 50px !important;
}
.p-b-50 {
  padding-bottom: 50px !important;
}
.padding-50 {
  padding: 50px !important;
}
.p-t-55 {
  padding-top: 55px !important;
}
.p-r-55 {
  padding-right: 55px !important;
}
.p-l-55 {
  padding-left: 55px !important;
}
.p-b-55 {
  padding-bottom: 55px !important;
}
.padding-55 {
  padding: 55px !important;
}
.p-t-60 {
  padding-top: 60px !important;
}
.p-r-60 {
  padding-right: 60px !important;
}
.p-l-60 {
  padding-left: 60px !important;
}
.p-b-60 {
  padding-bottom: 60px !important;
}
.padding-60 {
  padding: 60px !important;
}
.p-t-65 {
  padding-top: 65px !important;
}
.p-r-65 {
  padding-right: 65px !important;
}
.p-l-65 {
  padding-left: 65px !important;
}
.p-b-65 {
  padding-bottom: 65px !important;
}
.padding-65 {
  padding: 65px !important;
}
.p-t-70 {
  padding-top: 70px !important;
}
.p-r-70 {
  padding-right: 70px !important;
}
.p-l-70 {
  padding-left: 70px !important;
}
.p-b-70 {
  padding-bottom: 70px !important;
}
.padding-70 {
  padding: 70px !important;
}
.p-t-75 {
  padding-top: 75px !important;
}
.p-r-75 {
  padding-right: 75px !important;
}
.p-l-75 {
  padding-left: 75px !important;
}
.p-b-75 {
  padding-bottom: 75px !important;
}
.padding-75 {
  padding: 75px !important;
}
.p-t-80 {
  padding-top: 80px !important;
}
.p-r-80 {
  padding-right: 80px !important;
}
.p-l-80 {
  padding-left: 80px !important;
}
.p-b-80 {
  padding-bottom: 80px !important;
}
.padding-80 {
  padding: 80px !important;
}
.p-t-85 {
  padding-top: 85px !important;
}
.p-r-85 {
  padding-right: 85px !important;
}
.p-l-85 {
  padding-left: 85px !important;
}
.p-b-85 {
  padding-bottom: 85px !important;
}
.padding-85 {
  padding: 85px !important;
}
.p-t-90 {
  padding-top: 90px !important;
}
.p-r-90 {
  padding-right: 90px !important;
}
.p-l-90 {
  padding-left: 90px !important;
}
.p-b-90 {
  padding-bottom: 90px !important;
}
.padding-90 {
  padding: 90px !important;
}
.p-t-95 {
  padding-top: 95px !important;
}
.p-r-95 {
  padding-right: 95px !important;
}
.p-l-95 {
  padding-left: 95px !important;
}
.p-b-95 {
  padding-bottom: 95px !important;
}
.padding-95 {
  padding: 95px !important;
}
.p-t-100 {
  padding-top: 100px !important;
}
.p-r-100 {
  padding-right: 100px !important;
}
.p-l-100 {
  padding-left: 100px !important;
}
.p-b-100 {
  padding-bottom: 100px !important;
}
.padding-100 {
  padding: 100px !important;
}
/* Generic Margin Helpers
------------------------------------
 */
.m-t-0 {
  margin-top: 0px !important;
}
.m-r-0 {
  margin-right: 0px !important;
}
.m-l-0 {
  margin-left: 0px !important;
}
.m-b-0 {
  margin-bottom: 0px !important;
}
.m-t-5 {
  margin-top: 5px !important;
}
.m-r-5 {
  margin-right: 5px !important;
}
.m-l-5 {
  margin-left: 5px !important;
}
.m-b-5 {
  margin-bottom: 5px !important;
}
.m-t-10 {
  margin-top: 10px !important;
}
.m-r-10 {
  margin-right: 10px !important;
}
.m-l-10 {
  margin-left: 10px !important;
}
.m-b-10 {
  margin-bottom: 10px !important;
}
.m-t-15 {
  margin-top: 15px !important;
}
.m-r-15 {
  margin-right: 15px !important;
}
.m-l-15 {
  margin-left: 15px !important;
}
.m-b-15 {
  margin-bottom: 15px !important;
}
.m-t-20 {
  margin-top: 20px !important;
}
.m-r-20 {
  margin-right: 20px !important;
}
.m-l-20 {
  margin-left: 20px !important;
}
.m-b-20 {
  margin-bottom: 20px !important;
}
.m-t-25 {
  margin-top: 25px !important;
}
.m-r-25 {
  margin-right: 25px !important;
}
.m-l-25 {
  margin-left: 25px !important;
}
.m-b-25 {
  margin-bottom: 25px !important;
}
.m-t-30 {
  margin-top: 30px !important;
}
.m-r-30 {
  margin-right: 30px !important;
}
.m-l-30 {
  margin-left: 30px !important;
}
.m-b-30 {
  margin-bottom: 30px !important;
}
.m-t-35 {
  margin-top: 35px !important;
}
.m-r-35 {
  margin-right: 35px !important;
}
.m-l-35 {
  margin-left: 35px !important;
}
.m-b-35 {
  margin-bottom: 35px !important;
}
.m-t-40 {
  margin-top: 40px !important;
}
.m-r-40 {
  margin-right: 40px !important;
}
.m-l-40 {
  margin-left: 40px !important;
}
.m-b-40 {
  margin-bottom: 40px !important;
}
.m-t-45 {
  margin-top: 45px !important;
}
.m-r-45 {
  margin-right: 45px !important;
}
.m-l-45 {
  margin-left: 45px !important;
}
.m-b-45 {
  margin-bottom: 45px !important;
}
.m-t-50 {
  margin-top: 50px;
}
.m-r-50 {
  margin-right: 50px;
}
.m-l-50 {
  margin-left: 50px;
}
.m-b-50 {
  margin-bottom: 50px;
}
.m-t-55 {
  margin-top: 55px;
}
.m-r-55 {
  margin-right: 55px;
}
.m-l-55 {
  margin-left: 55px;
}
.m-b-55 {
  margin-bottom: 55px;
}
.m-t-60 {
  margin-top: 60px;
}
.m-r-60 {
  margin-right: 60px;
}
.m-l-60 {
  margin-left: 60px;
}
.m-b-60 {
  margin-bottom: 60px;
}
.m-t-65 {
  margin-top: 65px;
}
.m-r-65 {
  margin-right: 65px;
}
.m-l-65 {
  margin-left: 65px;
}
.m-b-65 {
  margin-bottom: 65px;
}
.m-t-70 {
  margin-top: 70px;
}
.m-r-70 {
  margin-right: 70px;
}
.m-l-70 {
  margin-left: 70px;
}
.m-b-70 {
  margin-bottom: 70px;
}
.m-t-75 {
  margin-top: 75px;
}
.m-r-75 {
  margin-right: 75px;
}
.m-l-75 {
  margin-left: 75px;
}
.m-b-75 {
  margin-bottom: 75px;
}
.m-t-80 {
  margin-top: 80px;
}
.m-r-80 {
  margin-right: 80px;
}
.m-l-80 {
  margin-left: 80px;
}
.m-b-80 {
  margin-bottom: 80px;
}
.m-t-85 {
  margin-top: 85px;
}
.m-r-85 {
  margin-right: 85px;
}
.m-l-85 {
  margin-left: 85px;
}
.m-b-85 {
  margin-bottom: 85px;
}
.m-t-90 {
  margin-top: 90px;
}
.m-r-90 {
  margin-right: 90px;
}
.m-l-90 {
  margin-left: 90px;
}
.m-b-90 {
  margin-bottom: 90px;
}
.m-t-95 {
  margin-top: 95px;
}
.m-r-95 {
  margin-right: 95px;
}
.m-l-95 {
  margin-left: 95px;
}
.m-b-95 {
  margin-bottom: 95px;
}
.m-t-100 {
  margin-top: 100px;
}
.m-r-100 {
  margin-right: 100px;
}
.m-l-100 {
  margin-left: 100px;
}
.m-b-100 {
  margin-bottom: 100px;
}
.full-height {
  height: 100% !important;
}
.full-width {
  width: 100%;
}
.half-width {
  width: 50%;
}
.hide {
  display: none;
}
.inline {
  display: inline-block !important;
}
.inline-table {
  display: inline-table !important;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.position-absolute {
  position: absolute;
}
.position-relative {
  position: relative;
}
.b-blank {
  border-color: #000;
}
.chkbtnh{
  margin-right:3px;
}
/* Border Helpers
------------------------------------
*/
.b-a,
.b-r,
.b-l,
.b-t,
.b-b {
  border-style: solid;
  border-width: 0;
}
.b-r {
  border-right-width: 1px;
}
.b-l {
  border-left-width: 1px;
}
.b-t {
  border-top-width: 1px;
}
.b-b {
  border-bottom-width: 1px;
}
.b-a {
  border-width: 1px;
}
.b-dashed {
  border-style: dashed;
}
.b-thick {
  border-width: 2px;
}
.b-transparent {
  border-color: rgba(0, 0, 0, 0.4);
}
.b-transparent-white {
  border-color: rgba(255, 255, 255, 0.3);
}
.b-grey {
  border-color: #e6e6e6;
}
.b-white {
  border-color: var(--color-bg-white);
}
.b-primary {
  border-color: #6d5cae;
}
.b-complete {
  border-color: #6d5cae;
}
.b-success {
  border-color: #10cfbd;
}
.b-info {
  border-color: #3b4752;
}
.b-danger {
  border-color: #f55753;
}
.b-warning {
  border-color: #f8d053;
}
.b-0 {
  border-width: 0px !important;
}
.b-r-0 {
  border-right-width: 0px !important;
}
.b-l-0 {
  border-left-width: 0px !important;
}
.b-t-0 {
  border-top-width: 0px !important;
}
.b-b-0 {
  border-bottom-width: 0px !important;
}

.b-l-red {
  border-left: 2px solid #cc0000 !important;
}

.b-l-green {
  border-left: 2px solid var(--colors--rentila--green) !important;
}

.b-l-grey {
  border-left: 2px solid #cccccc !important;
}

.b-l-orange {
  border-left: 2px solid #f89406 !important;
}

/* Border Radius
------------------------------------
*/
.b-rad-sm {
  border-radius: 3px;
    }
.b-rad-md {
  border-radius: 5px;
    }
.b-rad-lg {
  border-radius: 7px;
    }
.no-border {
  border: none !important;
}

/* Top Left */
.b-t-l-0  { border-top-left-radius: 0; }
.b-t-l-5  { border-top-left-radius: 5px; }
.b-t-l-10 { border-top-left-radius: 10px; }
.b-t-l-15 { border-top-left-radius: 15px; }
.b-t-l-20 { border-top-left-radius: 20px; }
.b-t-l-25 { border-top-left-radius: 25px; }
.b-t-l-30 { border-top-left-radius: 30px; }

/* Top Right */
.b-t-r-0  { border-top-right-radius: 0; }
.b-t-r-5  { border-top-right-radius: 5px; }
.b-t-r-10 { border-top-right-radius: 10px; }
.b-t-r-15 { border-top-right-radius: 15px; }
.b-t-r-20 { border-top-right-radius: 20px; }
.b-t-r-25 { border-top-right-radius: 25px; }
.b-t-r-30 { border-top-right-radius: 30px; }

/* Bottom Left */
.b-b-l-0  { border-bottom-left-radius: 0; }
.b-b-l-5  { border-bottom-left-radius: 5px; }
.b-b-l-10 { border-bottom-left-radius: 10px; }
.b-b-l-15 { border-bottom-left-radius: 15px; }
.b-b-l-20 { border-bottom-left-radius: 20px; }
.b-b-l-25 { border-bottom-left-radius: 25px; }
.b-b-l-30 { border-bottom-left-radius: 30px; }

/* Bottom Right */
.b-b-r-0  { border-bottom-right-radius: 0; }
.b-b-r-5  { border-bottom-right-radius: 5px; }
.b-b-r-10 { border-bottom-right-radius: 10px; }
.b-b-r-15 { border-bottom-right-radius: 15px; }
.b-b-r-20 { border-bottom-right-radius: 20px; }
.b-b-r-25 { border-bottom-right-radius: 25px; }
.b-b-r-30 { border-bottom-right-radius: 30px; }

/* All corners (optional shorthand) */
.b-r-0  { border-radius: 0; }
.b-r-5  { border-radius: 5px; }
.b-r-10 { border-radius: 10px; }
.b-r-15 { border-radius: 15px; }
.b-r-20 { border-radius: 20px; }
.b-r-25 { border-radius: 25px; }
.b-r-30 { border-radius: 30px; }

/* Font Sizes
------------------------------------
*/
.fs-2x {
  font-size: 200% !important;
}
.fs-3x {
  font-size: 300% !important;
}
.fs-4x {
  font-size: 400% !important;
}
.fs-10 {
  font-size: 10px !important;
}
.fs-11 {
  font-size: 11px !important;
}
.fs-12 {
  font-size: 12px !important;
}
.fs-13 {
  font-size: 13px !important;
}
.fs-14 {
  font-size: 14px !important;
}
.fs-15 {
  font-size: 15px !important;
}
.fs-16 {
  font-size: 16px !important;
}
.fs-18 {
  font-size: 18px !important;
}
.fs-20 {
  font-size: 20px !important;
}
.fs-22 {
  font-size: 22px !important;
}
.fs-24 {
  font-size: 24px !important;
}
.fs-32 {
  font-size: 32px !important;
}
.fs-48 {
  font-size: 48px !important;
}
.fs-80 {
  font-size: 80px !important;
}
.fs-96 {
  font-size: 96px !important;
}
.fs-132 {
  font-size: 132px !important;
}

/* Font size
------------------------------------
*/

.fw-300 {
  font-weight: 300 !important;
}
.fw-400 {
  font-weight: 400 !important;
}
.fw-500 {
  font-weight: 500 !important;
}
.fw-600 {
  font-weight: 600 !important;
}

/* Line-heights
------------------------------------
*/
.lh-normal {
  line-height: normal;
}
.lh-10 {
  line-height: 10px;
}
.lh-11 {
  line-height: 11px;
}
.lh-12 {
  line-height: 12px;
}
.lh-13 {
  line-height: 13px;
}
.lh-14 {
  line-height: 14px;
}
.lh-15 {
  line-height: 15px;
}
.lh-16 {
  line-height: 16px;
}
.lh-24 {
  line-height: 24px;
}
.lh-26 {
  line-height: 26px;
}
.lh-36 {
  line-height: 36px;
}
.lh-46 {
  line-height: 46px;
}
.lh-56 {
  line-height: 56px;
}

/* Letter-spacings
------------------------------------
*/
.ls-1 {
  letter-spacing: 1px;
}
.ls-2 {
  letter-spacing: 2px;
}
.ls-3 {
  letter-spacing: 3px;
}
.ls-4 {
  letter-spacing: 4px;
}
.ls-5 {
  letter-spacing: 5px;
}
.ls-6 {
  letter-spacing: 6px;
}
.ls-7 {
  letter-spacing: 7px;
}
.ls-8 {
  letter-spacing: 8px;
}
.ls-9 {
  letter-spacing: 9px;
}
.ls-10 {
  letter-spacing: 10px;
}

/* Percents %
------------------------------------
*/

.prc-10 {
  width:10%;
}
.prc-20 {
  width:20%;
}
.prc-30 {
  width:40%;
}
.prc-40 {
  width:40%;
}
.prc-50 {
  width:50%;
}
.prc-60 {
  width:60%;
}
.prc-70 {
  width:70%;
}
.prc-80 {
  width:80%;
}
.prc-90 {
  width:90%;
}
.prc-100 {
  width:100%;
}

/* text colors
------------------------------------
*/

.text-white{ color:#ffffff !important;}
.text-black{ color:#333333 !important;}
.text-gray{color: #999999 !important;}
.text-blue{color: #0088cc !important;}
.text-orange{color: #ff9900 !important;}
.text-green{color: var(--colors--rentila--green) !important;}
.text-gradient{ 
    background: #4D6F22;
    background: linear-gradient(to right, #4D6F22 0%, #83BB3B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-warning {color: #f89406 !important;}
/* Effects
------------------------------------
*/
.ellipsis{
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}

.ellipsis-max-1-lines {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 20px;     /* fallback */
   max-height: 20px;      /* fallback */
   -webkit-line-clamp: 1; /* number of lines to show */
   -webkit-box-orient: vertical;
}

.ellipsis-max-2-lines {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 20px;     /* fallback */
   max-height: 40px;      /* fallback */
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

.ellipsis-max-3-lines {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 20px;     /* fallback */
   max-height: 60px;      /* fallback */
   -webkit-line-clamp: 3; /* number of lines to show */
   -webkit-box-orient: vertical;
}

/* Dot
------------------------------------
*/

.dot-red {
    height: 9px;
    width: 9px;
    background-color: #cc0000;
    border-radius: 50%;
    display: inline-block;
}

.dot-green {
    height: 9px;
    width: 9px;
    background-color: var(--colors--rentila--green);
    border-radius: 50%;
    display: inline-block;
}

.dot-orange {
    height: 9px;
    width: 9px;
    background-color: #f89406;
    border-radius: 50%;
    display: inline-block;
}

.dot-grey {
    height: 9px;
    width: 9px;
    background-color: #999999;
    border-radius: 50%;
    display: inline-block;
}

/* Compliance widget: expandable per-type cards */
.compliance-toggle {
    cursor: pointer;
}
.compliance-chevron {
    font-size: 11px;
    transition: transform 0.2s ease;
}
.compliance-card.open .compliance-chevron {
    transform: rotate(180deg);
}
.compliance-detail {
    margin-top: 4px;
}
.compliance-row {
    padding: 2px 0;
    font-size: 13px;
}
.compliance-row .dot-red,
.compliance-row .dot-orange,
.compliance-row .dot-grey {
    margin-right: 4px;
}
/* worst-state left accent (replaces the old full-card red tint): red/orange/grey per severity */
.compliance-card-expired {
    /* box-shadow: inset 3px 0 0 0 #cc0000; */
}
.compliance-card-expiring {
    /* box-shadow: inset 3px 0 0 0 #f89406; */
}
.compliance-card-missing {
    /* box-shadow: inset 3px 0 0 0 #999999; */
}

/* Pulsating dot
------------------------------------
*/

/* Pulsating dot -- Optimized */
#pulse-dot {
  position: relative;
  left: 45%;
  top: 0;
}

.dot,
.pulse {
  position: absolute;
  border-radius: 50%;
  opacity: 0.7;
  z-index: 1;
}

.dot {
  top: -25px;
  left: -25px;
  width: 50px;
  height: 50px;
  border: 10px solid #4dd3f5;
  background: transparent;
  animation: pulse 3s ease-out infinite;
}

.pulse {
  width: 10px;
  height: 10px;
  border: 5px solid #4dd3f5;
  background-color: #4dd3f5;
  box-shadow: 0 0 10px 2px #4dd3f5;
  z-index: 10;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}

/* Single keyframe for all modern browsers */
@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  25% {
    transform: scale(0);
    opacity: 0.1;
  }
  50% {
    transform: scale(0.1);
    opacity: 0.3;
  }
  75% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* flyer */
.rt-page-wrap {
    max-width: 1024px;
    margin: 30px auto 0 auto;
    width: 100%;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.rt-tabs-container {
    border: 1px solid var(--colors--gray--300);
            border-radius: 10px;
    overflow: hidden;
    width: 620px;
    background: var(--colors--main--white);
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.rt-tabs-wrap * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.rt-tabs-body {
    position: relative;
    overflow: hidden;
    padding: 10px;
}

.rt-tabs-section {
    display: none;
    /*height: 400px;*/
    position: relative;
    overflow: hidden;
}

.rt-tabs-section:first-child {
    display: block;
}

.rt-tabs-section.photo-section img {
    max-height: 100%;
}

.rt-tabs-header {
    display: block;
    list-style: none;
    margin: 0;
}

.rt-tabs-header li {
    float: left;
    width: 33.33%;
}
.rt-tabs-header li:first-child {
    width: 33.335%;
}

.rt-tabs-header .rt-tab-button {
    display: block;
    padding: 0 10px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-left: 1px solid var(--colors--gray--200);
    border-top: 1px solid var(--colors--gray--200);
    color: var(--colors--gray--600);
    background: var(--colors--gray--50);
    text-decoration: none;
}

.rt-tabs-header .rt-tab-button:hover {
    color: var(--colors--gray--900);
}

.rt-tabs-header .rt-tab-button.active {
    border: none;
    background: var(--colors--main--white);
    color: var(--colors--gray--900);
    border-left: 1px solid var(--colors--gray--200);
    line-height: 41px;
}

.rt-tabs-header li:first-child .rt-tab-button {
    border-left: none !important;
}

.rt-tabs-section.photo-section img {
    max-height: 100%;
    max-width: 100%;
    width: auto !important;
    height: auto;
    margin: 0 auto;
}

/*ACTIONS BOX*/
.rt-action-box {
    float: right;
    background: var(--color-bg-white);
    border: 1px solid #e5e5e5;
    width: 355px;
    padding: 10px 19px;
    min-height: 300px;
            border-radius: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.rt-view-action-box {
    float: right;
    background: var(--color-bg-white);
    border: 1px solid #e5e5e5;
    width: 355px;
    padding: 10px 19px;
    min-height: 300px;
            border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.rt-action-box *, .rt-view-action-box * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.rt-action-box .alert {
    margin: 0;
}

.rt-action-box ul, .rt-view-action-box ul, .rf-view-action-box ul {
    margin: 5px 0px;
    line-height: 100%;
    height: 24px;
}

.rt-action-box ul>li, .rt-view-action-box ul>li, .rf-view-action-box ul>li {
    list-style: none;
    display: inline-table;
    float: left;
    margin-right: 15px;
    line-height: 24px;
    height: 24px;
}

.rt-action-box .flyer-surface, .rt-view-action-box .flyer-surface, .rf-view-action-box .flyer-surface {
    padding-left: 32px;
    background-image:url(../img/flyer_house.svg);
	background-repeat:no-repeat;
	background-position: left center;
	background-size: 24px 24px;
}

.rt-action-box .flyer-rooms, .rt-view-action-box .flyer-rooms, .rf-view-action-box .flyer-rooms {
     padding-left: 32px;
    background-image:url(../img/flyer_door.svg);
	background-repeat:no-repeat;
	background-position: left center;
	background-size: 24px 24px;
}

.rt-action-box .flyer-bedrooms, .rt-view-action-box .flyer-bedrooms, .rf-view-action-box .flyer-bedrooms {
     padding-left: 32px;
    background-image:url(../img/flyer_bed.svg);
	background-repeat:no-repeat;
	background-position: left center;
	background-size: 24px 24px;
}
.rt-action-box .flyer-bathrooms, .rt-view-action-box .flyer-bathrooms, .rf-view-action-box .flyer-bathrooms {
  padding-left: 32px;
 background-image:url(../img/flyer_bath.svg);
background-repeat:no-repeat;
background-position: left center;
background-size: 24px 24px;
}

.rt-btn-group {
    position: relative;
    overflow: hidden;
    margin: 0 0 10px 0;
}

.rt-btn-group .btn {
    float: left;
    width: 50%;
    height: 32px;
    line-height: 20px;
            border-radius: 0 7px 7px 0 !important;
    outline: none !important;
}
.rt-btn-group .btn:first-child {
    border-right: none;
            border-radius: 7px 0 0 7px !important;
}

.rt-btn-group .rt-number-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 32px;
    line-height: 32px;
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.rt-btn-group .rt-number-inner > [class*="icon-"]:not(a) {
    margin: 0 5px 0 0;
}

.rt-number-hide {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -10px;
    font-size: 20px;
    color: #333333;
    text-decoration: none !important;
}

.rt-btn-group .btn.btn-block {
    float: left;
    width: 100%;
    height: 32px;
    line-height: 20px;
    border-radius: 7px !important;
    outline: none !important;
}

/*RT CAROUSEL custom styles*/
.rt-tabs-section .owl-nav > [class*="owl-"] {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -23px;
    width: 32px;
    height: 55px;
    text-indent: -9999px;
    background-image: url("../img/icon-arrow-left@2x.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    background-color: transparent;
}

/* owl marks the arrow that leads nowhere, on the first image and on the last */
.rt-tabs-section .owl-nav > [class*="owl-"].disabled {
    opacity: 0.3;
    cursor: default;
}

/* the grid card is 220px tall, so its arrows are smaller than the ones on the
   pages that show the same carousel full width */
.rt-card-carousel .owl-nav > [class*="owl-"] {
    width: 20px;
    height: 34px;
    margin-top: -17px;
}

/* on a card the arrows only come out when the photo is hovered, the touch
   screens have no hover so they keep them visible */
@media (hover: hover) {
    .rt-card-carousel .owl-nav {
        opacity: 0;
        transition: opacity 0.15s ease-in-out;
    }

    .rt-card-carousel:hover .owl-nav {
        opacity: 1;
    }
}

.rt-tabs-section .owl-prev {
    left: 10px;
}

.rt-tabs-section .owl-next {
    right: 10px;
    background-image: url("../img/icon-arrow-right@2x.png") !important;
}

.photo-section {
    position: relative;
}

.rt-carousel-counter {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: var(--colors--main--white);
    background: color-mix(in srgb, var(--colors--main--white) 95%, transparent);
    padding: 4px 10px;
    font-size: 12px;
    color: var(--colors--gray--600);
    font-weight: 600;
    z-index: 10;
            border-radius: 4px;
}

/* the favourite heart, top-right of the card's photo */
.rt-card-fav {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 10;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
    color: var(--colors--main--white);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    transition: transform 0.12s ease-in-out, color 0.12s ease-in-out;
}
.rt-card-fav:hover,
.rt-card-fav:focus {
    color: var(--colors--main--white);
    text-decoration: none;
    transform: scale(1.15);
}
.rt-card-fav.active {
    color: #cc0000;
}
.rt-card-fav.active:hover {
    color: #cc0000;
}

/* "Mon annonce" tag on the marketplace card, top-left of the photo */
.rt-card-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

.rt-full-section-show {
    position: absolute;
    top: 10px;
    right: 10px;
    height: 40px;
    width: auto;
    padding: 0 12px 0 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: 600;
    color: var(--colors--gray--600) !important;
    z-index: 10;
    background-color: var(--colors--main--white);
    background-color: color-mix(in srgb, var(--colors--main--white) 95%, transparent);
    background-image: url('../img/icon-expand-g@2x.png');
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none !important;
            border-radius: 4px;
}

.rt-full-section-show:hover {
    background-color: var(--colors--gray--200);
}

/*rt main text section*/
.rt-main-text-section {
    margin: 30px 0;
    max-width: 620px;
}


/*RT PHOTO SECTION FULL VIEW*/
.rt-full-section-wrap {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.rt-full-section-wrap.visible {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    z-index: 100000;
}

.rt-full-section {
    position: relative;
    height: 100%;
    padding: 48px 0 0 0;
    background: #333333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.thumbs-slider-wrap .rt-full-section {
    padding-bottom: 120px;
}

.rt-full-section-wrap .rt-full-section-thumbnails {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.thumbs-slider-wrap .rt-full-section-thumbnails {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.rt-full-section .rt-tabs-wrap,
.rt-full-section-body,
.rt-full-section-body .rt-tabs-section,
.rt-full-section-body .owl-carousel,
.rt-full-section-body .owl-carousel * {
    height: 100%;
}

.rt-full-section-body .owl-carousel .owl-controls,
.rt-full-section-body .owl-carousel .owl-nav {
    height: auto;
}

.rt-full-section-info-wrap {
    float: right;
}
.rt-full-section-info-wrap .rt-full-section-close {
    display: block;
    height: 48px;
    line-height: 48px;
    padding: 0 10px;
    color: #ffffff;
    font-size: 16px;
    background: #333333;
    text-decoration: none;
}
.rt-full-section-close > [class*="icon-"] {
    position: relative;
    top: 7px;
    font-size: 30px;
}

.rt-full-section .rt-carousel-counter-wrap {
    color: #ffffff;
    font-size: 14px;
    padding: 10px;
}
.rt-full-section .rt-full-carousel-counter {
    display: inline-block;
    position: static;
    background: none;
    color: #ffffff;
    padding: 0;
}

.rt-full-section .rt-tabs-section.photo-section .owl-carousel img {
    height: 100%;
    width: auto !important;
    margin: 0 auto;
}

.rt-full-section-nav {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 48px;
    background: #222222;
    z-index: 1000;
    overflow: hidden;
}
.rt-full-section-nav .rt-tabs-header {
    float: left;
    min-width: 350px;
}
.rt-full-section-nav .rt-tabs-header li {
    width: auto;
    float: none;
    display: inline-block;
    vertical-align: top;
}
.rt-full-section-nav .rt-tabs-header .rt-tab-button {
    color: #ffffff;
    background: #222222;
    height: 48px;
    line-height: 48px;
    border: none !important;
    padding: 0 20px;
}
.rt-full-section-nav .rt-tabs-header .rt-tab-button.active {
    background: #333333;
    width: auto;
}

.rt-full-section-thumbnails {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
    background: #222222;
    z-index: 1000;
}

.rt-full-section .map-wrap {
    height: 100%;
}

.mini-map-inner {
    height: 399px;
}

/*OWL THUMBS STYLES*/
.owl-thumbs {
    font-size: 0;
}

.owl-thumbs .owl-thumb-item {
    display: inline-block;
    vertical-align: top;
    border: none;
    outline: none;
    width: 90px;
    height: 60px;
    padding: 0;
    margin: 5px;
    opacity: 0.4;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
}

.owl-thumbs .owl-thumb-item.active {
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.owl-thumbs .owl-thumb-item img {
    display: block;
    width: 100%;
    height: 100%;
}

/*RESPONSIVE*/
@media only screen and (max-width: 1024px) {
    .rt-tabs-container {
        float: none;
        width: auto;
    }
    .rt-tabs-header li:first-child {width: 33.34%;}

    .rt-action-box {
        float: none;
        width: auto;
        margin: 30px 0 0 0;
    }

    .rt-main-text-section {
        max-width: none;
    }

    .mini-map-wrap {
        position: relative;
        padding: 56% 0 0 0;
    }

    .mini-map-wrap .mini-map-inner {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
}


@media only screen and (max-width: 1244px) {
    .rt-page-wrap.logged .rt-tabs-container {
        float: none;
        width: auto;
    }
    .rt-page-wrap.logged .rt-tabs-header li:first-child {width: 33.34%;}

    .rt-page-wrap.logged .rt-action-box {
        float: none;
        width: auto;
        margin: 30px 0 0 0;
    }

    .rt-page-wrap.logged .rt-main-text-section {
        max-width: none;
    }

   .rt-page-wrap.logged  .mini-map-wrap {
        position: relative;
        padding: 56% 0 0 0;
    }

    .rt-page-wrap.logged .mini-map-wrap .mini-map-inner {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
}

@media only screen and (max-width: 720px) {
    #rt-full-section, .rt-carousel-full, .rt-full-section-show {display: none !important;}
}

/* NOTES */

.note{
	height:250px;
	padding:10px;
	width:250px;
	position:relative;
	overflow:hidden;
	cursor:pointer;
	/*float: left;
	font-style: italic;
	font-family:Trebuchet MS,Tahoma,Myriad Pro,Arial,Verdana,sans-serif;
	font-size:14px;*/
	display: inline-block;
	margin-bottom: 5px;
	margin-right: 5px;
  border-radius: 4px;
	/* Adding a CSS3 shadow below the note, in the browsers which support it: */
	box-shadow:0 1px 2px rgb(0 0 0 / 5%) !important;
}

@media only screen and (max-width: 480px) {
    .note{
	height:300px;
	padding:10px;
	width:330px;
	margin-bottom: 5px;
	}
}

.note .edit {
    font-size: 11px;
    float: right;
    text-shadow: none;
    color: rgba(0, 0, 0, 0.25);
    margin: 1px 3px;
}

.note .close {
    float: right;
    font-size: 23px;
    font-weight: bold;
    line-height: 17px;
    text-shadow: none;
    color: rgba(0, 0, 0, 0.25);
    opacity: 1;
    filter: alpha(opacity=100);
}

.note a.edit:hover, .note a.close:hover {
    color: rgba(0, 0, 0, 0.5) !important;
}

#newnote-modal .note{	cursor:default; position:absolute !important; float: none;}

/* Three styles for the notes: */

.note.yellow, .note-bg-yellow{
	background-color:#FFF3BD !important;
	border:1px solid #DEDC65;
	color: #333333 !important;
}

.note.yellow-20, .note-bg-yellow-20{
	background-color: #fff8e1 !important;
	border:1px solid #DEDC65;
	color: #333333 !important;
}

.note-bg-yellow-20 .file-type-icon .corner {
    border-top: 12px solid #fff8e1;
}

.note.blue, .note-bg-blue{
	background-color:#BDECFF !important;
	border:1px solid #94DFFE;
	color: #333333 !important;
}

.note.green, .note-bg-green{
	background-color:#c8e96d !important;
	border:1px solid #afcf57;
	color: #333333 !important;
}

.note.white, .note-bg-white{
	background-color:#ffffff !important;
	border:1px solid #dddddd;
	color: #333333 !important;
}

.note.red, .note-bg-red{
	background-color:#FFCFCF !important;
	border:1px solid #FFADAD;
	color: #333333 !important;
}

.note.red-20, .note-bg-red-20{
	background-color: #fdecea !important;
	border:1px solid #FFADAD;
	color: #333333 !important;
}

.notedate{
	/* The author name on the note: */
	bottom:10px;
	color: rgba(0, 0, 0, 0.25);
	font-size:11px;
	position:absolute;
	right:10px;
}

.noteinfo{
	/* The author name on the note: */
	bottom:25px;
	color: rgba(0, 0, 0, 0.25);
	font-size:11px;
	position:absolute;
	right:10px;
}

.notetext {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 20px;
    max-height: 240px;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
}


#noteData{
	/* The input form in the pop-up: */
	height:200px;
	margin:30px 0px 40px 220px;
	max-width:340px;
}

.note-form label{
	display:block;
	font-size:10px;
	font-weight:bold;
	letter-spacing:1px;
	text-transform:uppercase;
	padding-bottom:3px;
}

.note-form textarea, .note-form input[type=text]{
	background-color:#FCFCFC;
	border:1px solid #AAAAAA;
	font-family:Arial,Verdana,sans-serif;
	height:130px;
	padding:5px;
	max-width:290px;
	margin-bottom:10px;
}

.note-form input[type=text]{	height:auto; }

.color{
	/* The color swatches in the form: */
	cursor:pointer;
	float:left;
	height:10px;
	margin:0 5px 0 0;
	width:10px;
}

.sortable-placeholder{
    border:1px dashed #CCC;
    background:0 0;
    display: inline-block;
    height: 250px;
    overflow: hidden;
    padding: 10px;
    width: 250px;
    margin: 0px 3px 0px 3px;
}

/* AVATARS */
.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--color-bg-white);
  line-height: 28px;
  text-align: center;
  background: #000;
  margin-right:5px;
}
.circle.bordered {
  border: 3px solid rgba(255,255,255,0.5);
}
/* The translucent grey is too light for the default white text */
.circle.bg-grey,
.circle40.bg-grey {
  color: var(--color-text-dark);
}

/* ENTITY AVATARS
   .circle                 round  → a physical person (tenant, landlord)
   .circle.circle-entity   rounded square → an entity (building, property)

   Only the shape changes: the colour is the same one the round avatar would
   have shown for that record (landlord colour, else derived from the first
   letter), printed by RentilaUtil::getEntityAvatar() as the --av-rgb triplet:
     <div class="circle circle-entity" style="--av-rgb: 114, 163, 51">
       <i class="fal fa-building" aria-hidden="true"></i></div>
   A triplet and not a background, so the dark theme can tint it.

   The two-class selector is deliberate: it has to outrank the .circle rules
   above without an !important.
   The icon is decorative — keep aria-hidden on it, the name sits right next
   to the avatar. */
.circle.circle-entity {
  /* Same footprint and same type size as the round .circle it replaces: 30px
     content + the 1px white border = the 32px the round avatar occupies. Only
     the shape changes, so mixed rows (a lot next to a tenant) stay aligned. */
  --av-size: 32px;
  --av-radius: 8px; /* ~26% — franc enough not to read as a rendering bug */
  --av-rgb: var(--av-default);
  /* Two type sizes, because the box holds two different things: letters, which
     match the round avatar's 14px, and an icon, which needs 16px to carry the
     same visual weight — a glyph inked at 14px reads smaller than two capitals
     at 14px. Override the pair together on any size variant. */
  --av-text: 14px;
  --av-icon: 16px;

  box-sizing: border-box;
  width: var(--av-size);
  height: var(--av-size);
  border-radius: var(--av-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgb(var(--av-rgb));
  color: var(--color-bg-white);
  font-size: var(--av-text);
  line-height: 1;
  text-align: center;
  /* Same white gap + coloured ring as the round avatars */
  border: 1px solid var(--color-bg-white);
  box-shadow: 0 0 0 2px rgb(var(--av-rgb));
}

/* The icon opts out of the letter size and takes its own. */
.circle.circle-entity > i,
.circle.circle-entity > svg {
  font-size: var(--av-icon);
  line-height: 1;
}

/* Forced colours drop the tint and the ring — give the shape a real border
   back so it survives. */
@media (forced-colors: active) {
  .circle.circle-entity {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
}

.circle40 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--color-bg-white);
  line-height: 40px;
  text-align: center;
  background: #000;
  margin-right:5px;
}

.big-avatar .circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  font-size: 34px;
  color: var(--color-bg-white);
  line-height: 90px;
  text-align: center;
  background: #000;
}

.centered-and-cropped{
  object-fit: cover;
  border-radius:50%;
  margin-right:5px;
  width: 30px;
  min-width: 30px;
  height: 30px;
}

/* Photo of an entity — the square counterpart of .centered-and-cropped, so a
   property with a cover photo keeps the shape of the ones without. */
.centered-and-cropped.centered-and-cropped-entity {
  /* border-box: the photo carries a 1px white border like the letter square,
     and both have to end up on the same 32px. */
  box-sizing: border-box;
  border-radius: 8px;
  width: 32px;
  min-width: 32px;
  height: 32px;
}

/* Search results: the icon alone, on the card's own background. A coloured
   chip here would give a message or a task the avatar language that belongs
   to lots, buildings and people — and search lists all nineteen kinds. */
.search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  font-size: 21px;
  line-height: 1;
  color: var(--color-text-muted);
}
.search-icon:hover {
  color: var(--colors--rentila--green);
}

.big-avatar .centered-and-cropped { width: 90px; height: 90px; }
/* AVATARS */


.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}


/* CARD */

.card {
    background: transparent;
    padding: 10px;
    margin: 5px 0px;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    min-height: 40px;
}

.rounded-circle {
    padding: 6px;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50% !important;
}

.rounded-circle.success {
    border: 1px solid color-mix(in srgb, var(--colors--rentila--green) 35%, transparent);
    background: color-mix(in srgb, var(--colors--rentila--green) 8%, transparent);
}

.rounded-circle.error {
    border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent);
    background: color-mix(in srgb, var(--color-error) 8%, transparent);
}

/* ATTACHMENT */

.payments-attachment {
    position: relative;
    left: -5px;
    color: #111111;
    margin-left: -10px;
    float: left;
}

/* UI SORTABLE */

.ui-sortable {
	margin: 0px;
}

.ui-sortable li{
    /* padding-left: 25px; */
}

.ui-sortable-handle::before {
  font-family: "Font Awesome 7 Pro";
  font-weight: 300;            /* fal = light */
  content: "\e411";            /* fa-arrows-up-down-left-right */
  font-size: 14px;             /* smaller (was 14px) */
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  left: -1.5em !important;
  top: 3.2em;
  cursor: move;
  color: #9ca3af;
  opacity: 0;                  /* hidden until hover */
  transition: opacity 0.15s ease-in-out;
}

.ui-sortable-handle:hover::before {
  opacity: 0.9;                /* reveal on hover */
}

.ui-sortable-handle.card::before, .ui-sortable-handle.well::before {
  left: -1.4em;
}

/* Property photos: pin the drag handle to the thumbnail's top-left corner.
   The global rule above positions the icon for list rows (left: -1.5em; top: 3.2em),
   which falls outside a 120x90 thumbnail. Absolute positioning overlays it without
   shifting the photos; the chip keeps it legible over dark images. */
.property-photo-sortable { position: relative; }
.property-photo-sortable.ui-sortable-handle::before {
  position: absolute;
  left: 4px !important;
  top: 4px;
  z-index: 2;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.85);
  color: #4b5563;
}

/* SUBSCRIPTION PRICING */

.sub_price {
    background-color: var(--colors--rentila--green);
    color: #FFF;
    font-size: 29px;
    text-align: center;
    line-height: 52px;
    height: 52px;
    width: 120px;
    margin: 0px auto;
    padding: 0 10px;
    font-weight: 600;
            -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
            box-shadow: 0 3px 4px 0 rgba(0,0,0,.1);
}

.sub_price sup {
    top: -1.2em;
    font-size: 11px;
}


.sub_price_pt_BR { font-size: 22px; }
@media (min-width: 979px) {
	.menu_bankimport_pt_BR {font-size:12px !important;}
}

.sub_curr {
    font-weight: 300;
    color: rgba(255,255,255,.8);
    padding: 0px 5px 0px 0px;
}

/* CREDIT PACKS */

.pack-card {
    position: relative;
    overflow: visible;
}

.pack-card-featured {
    border: 1px solid var(--colors--rentila--green);
    box-shadow: 0 3px 10px 0 rgba(0,0,0,.08);
}

.pack-card-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Pipeline */
.pipeline .span2 {
	width: 19.52991452991453%;
  overflow: hidden;
}

@media only screen and (max-width: 767px) {
	.pipeline .span2 {
	    width: 20%;
	    display: inline;
	}
	.pipeline .span2 i {
	    display: none;
	}
}

@media only screen and (max-width: 480px) {
	.pipeline .span2 {
	    width: 50%;
	    display: inline-block;
	    float: left;
	    margin-bottom: -1px;
	}
	.pipeline .span2 i {
	    display: none;
	}
	.pipeline .btn-group>.btn:first-child {
	    margin-left: -1px;
	    -webkit-border-top-left-radius: 2px;
	    -moz-border-radius-topleft: 2px;
	    border-top-left-radius: 2px;
	    -webkit-border-bottom-left-radius: 2px;
	    -moz-border-radius-bottomleft: 2px;
	    border-bottom-left-radius: 2px;
	}
}

/* Suggest box */

#legendsuggest {
    opacity: 0.2;
   -webkit-transition: opacity 0.5s ease-in;
    -moz-transition: opacity 0.5s ease-in;
    -o-transition: opacity 0.5s ease-in;
    -ms-transition: opacity 0.5s ease-in;
    transition: opacity 0.5s ease-in;
}

#legendsuggest:hover {
    opacity: 1;
   -webkit-transition: opacity 0.5s ease-in;
    -moz-transition: opacity 0.5s ease-in;
    -o-transition: opacity 0.5s ease-in;
    -ms-transition: opacity 0.5s ease-in;
    transition: opacity 0.5s ease-in;
}

/* Jsignature */

.jSignature {
   border: 1px solid #cccccc !important;
   border-radius: 3px;
}

.jSignature:hover {
   border-color: #33b5e5 !important;
}

/* CK Editor */

.cke_chrome, .cke_inner{
    border-radius: 3px !important;
}

.cke_top {
    border-top-left-radius: 3px !important;
    border-top-right-radius: 3px !important;
    background: #fcfcfc !important;
}

.cke_bottom {
    border-bottom-left-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
    border-top: 1px transparent !important;
    background: #ffffff !important;
}

/* Announcements */

.announce {
  	height: 43px;
    text-align: center;
    font-size: 14px;
    background: orange;
    color: white;
}

.announce p {
   padding: 12px;
}


/* Google */

.pac-icon {
   display: none;
}

.pac-container .pac-item {
  padding: 3px 8px;
}

.pac-logo:after {
    content: "";
    padding: 1px 1px 1px 0;
    height: 0px;
    text-align: right;
    display: block;
    background-image: none;
    background-position: right;
    background-repeat: no-repeat;
    background-size: 120px 14px
}

.hdpi.pac-logo:after {
    background-image: none
}


/* Energy efficiency */

.arrow_box {
	position: relative;
	background: #88b7d5;
    height: 16px;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 16px;
	margin: 2px;
	color: white !important;
  border-radius: 3px;
}
.arrow_box:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0px;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-left-color: transparent;
	border-width: 10px;
  border-radius: 2px;
	margin-top: -10px;
  margin-left: -1px;
}

.arrow_box b{
	float: right;
}

.dark_green.arrow_box {
  background: #0b9d47;
}
.dark_green.arrow_box:after {
	border-left-color: #0b9d47;
}

.green.arrow_box {
  background: #54ad16;
}
.green.arrow_box:after {
	border-left-color: #54ad16;
}

.light_green.arrow_box {
  background: #c9d400;
}
.light_green.arrow_box:after {
	border-left-color: #c9d400;
}

.yellow.arrow_box {
  background: #ffef00;
}
.yellow.arrow_box:after {
	border-left-color: #ffef00;
}

.orange.arrow_box {
  background: #fdbc00;
}
.orange.arrow_box:after {
	border-left-color: #fdbc00;
}

.dark_orange.arrow_box {
  background: #ed6900;
}
.dark_orange.arrow_box:after {
	border-left-color: #ed6900;
}

.red.arrow_box {
  background: #e60006;
}
.red.arrow_box:after {
	border-left-color: #e60006;
}

.violetA.arrow_box {
  background: #f0e1fb;
}
.violetA.arrow_box:after {
	border-left-color: #f0e1fb;
}

.violetB.arrow_box {
  background: #e2c1fa;
}
.violetB.arrow_box:after {
	border-left-color: #e2c1fa;
}

.violetC.arrow_box {
  background: #d5a7f7;
}
.violetC.arrow_box:after {
	border-left-color: #d5a7f7;
}

.violetD.arrow_box {
  background: #cc92f5;
}
.violetD.arrow_box:after {
	border-left-color: #cc92f5;
}

.violetE.arrow_box {
  background: #bb6df2;
}
.violetE.arrow_box:after {
	border-left-color: #bb6df2;
}

.violetF.arrow_box {
  background: #a845ee;
}
.violetF.arrow_box:after {
	border-left-color: #a845ee;
}

.violetG.arrow_box {
  background: #8b00e3;
}
.violetG.arrow_box:after {
	border-left-color: #8b00e3;
}

.arrow_box_tag {
  display: block;
  color: white;
  padding: 3px 5px;
  font-weight: bold;
  font-size: 11px;
  position: relative;
  height: 10px;
  width: 5px;
  line-height: 10px;
  border-radius: 2px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.arrow_box_tag.A {
  background-color: #0b9d47;
}
.arrow_box_tag.B {
  background-color: #54ad16;
}
.arrow_box_tag.C {
  background-color: #c9d400;
}
.arrow_box_tag.D {
  background-color: #ffef00;
}
.arrow_box_tag.E {
  background-color: #fdbc00;
}
.arrow_box_tag.F {
  background-color: #ed6900;
}
.arrow_box_tag.G {
  background-color: #e60006;
}

.arrow_box_tag::after {
  content: "";
  position: absolute;
  top: 0;
  right: -9px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.arrow_box_tag.A::after {
  border-left: 9px solid #0b9d47; /* same as background */
}
.arrow_box_tag.B::after {
  border-left: 9px solid #54ad16; /* same as background */
}
.arrow_box_tag.C::after {
  border-left: 9px solid #c9d400; /* same as background */
}
.arrow_box_tag.D::after {
  border-left: 9px solid #ffef00; /* same as background */
}
.arrow_box_tag.E::after {
  border-left: 9px solid #fdbc00; /* same as background */
}
.arrow_box_tag.F::after {
  border-left: 9px solid #ed6900; /* same as background */
}
.arrow_box_tag.G::after {
  border-left: 9px solid #e60006; /* same as background */
}

.nointernet {
	position: fixed;
    bottom: 0px;
    left: 0px;
    padding: 10px 20px;
    color: white;
    background: #cc0000;
    width: 100%;
    text-align: center;
    z-index: 10000;
}

.float-actions {
	position: fixed;
  bottom: 0px;
  left: 50%;
  transform: translateX(-20%); /* Offset left to account for asymmetric button layout */
  z-index: 1000;
  box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.02) !important;
  background-color: #fcfcfc;
  display: flex;
}

.float-actions a {
	margin: 0px 2px;
}

@media (max-width: 979px) {
	.float-actions {
    /* Legacy: left 36% - now using flexbox centering */
    padding: 10px !important;
    left: 50%; /* Position left edge at horizontal center */
    transform: translateX(-50%); /* Move element back by 50% of its width to achieve perfect centering */
	}
}

@media (max-width: 767px) {
	.float-actions {
    /* Legacy: left 26% - now using flexbox centering */
	}
}

.searchfield {
  /* Legacy: Transparent searchfield design - replaced with visible styling for better UX */
  background: #fcfcfc !important;
  color: #666 !important;
  border: 1px solid #ddd !important;
  padding: 10px 0 10px 32px !important; /* 32px left padding provides space for search icon */
  width: 60px;
  height: 30px !important;
  transition: all .5s !important;
  cursor: pointer;
  position: relative;
  box-sizing: border-box !important;
  font-family: inherit;
  font-size: 100% !important;
  outline: none;
  /* Legacy: webkit-appearance textfield - now using "none" for consistency */
  -webkit-appearance: none;
      box-shadow: none;
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
}

.searchfield.navbar {
  width: 30px;
  opacity: 0.5;
}

.searchfield.navbar:hover {
  background-color: var(--color-bg-white);
}
.searchfield.navbar.focused, #page-content .searchfield:focus {
  background: #ffffff !important;
  border: 1px solid var(--focus-color) !important;
  width: 180px;
  padding-right: 36px;
  color: var(--color-text-dark) !important;
  cursor: auto;
  background-color: white;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  opacity: 1;
}


@media only screen and (min-width: 1024px) {
    .searchfield.navbar.focused, #page-content .searchfield:focus {
      background: #ffffff !important;
      border: 1px solid var(--focus-color) !important;
      width: 252px;
      padding-right: 36px;
      color: var(--color-text-dark) !important;
      cursor: auto;
      background-color: white;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
      opacity: 1;
    }
}

.searchfield::-webkit-search-decoration, .searchfield::-webkit-search-cancel-button {
  display: none;
}
.searchfield:-moz-placeholder {
  color: transparent;
}
.searchfield::-webkit-input-placeholder {
  color: transparent;
}

.searchbox {
  position: relative;
}
.searchbox:before {
  content: "\f002";
  position: absolute;
  top: 5px;
  left: 0;
  font-family: "Font Awesome 7 Pro";
  font-weight: 300;
  width: 40px;
  text-align: center;
  font-size: 1em;
  z-index: 2;
  pointer-events: none;
  color: var(--color-text-dark);
}

.searchbox.navbar:before {
  content: "\f002";
  position: absolute;
  top: 5px;
  left: 0;
  font-family: "Font Awesome 7 Pro";
  font-weight: 300;
  width: 35px;
  text-align: center;
  font-size: 1em;
  z-index: 2;
  pointer-events: none;
  color: var(--color-text-dark);
}

/* ---------- Collapsed (icon-only) state ---------- */
/* Make the input chip disappear so only the icon shows on the green navbar */
.searchbox.navbar .searchfield.navbar {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 1;            /* was .5 — keep the white icon crisp */
  color: #fff !important;
  caret-color: #fff;
}

/* The twitter-typeahead injects an inline-styled "hint" input — override it too */
.searchbox.navbar .tt-hint {
  background: transparent !important;
  border-color: transparent !important;
  color: rgba(255,255,255,.6) !important;
}

/* White magnifier icon when closed */
.searchbox.navbar::before {
  color: #fff !important;
  transition: color .25s ease;
}

/* Placeholder white-ish (only visible briefly while expanding) */
.searchbox.navbar .searchfield.navbar::placeholder { color: rgba(255,255,255,.7); }

/* ---------- Expanded / focused state ---------- */
.searchbox.navbar:focus-within .searchfield.navbar,
.searchbox.navbar .searchfield.navbar.focused,
.searchbox.navbar .searchfield.navbar:focus {
  background: #fff !important;
  border: 1px solid var(--focus-color) !important;
  color: var(--color-text-dark) !important;
  caret-color: var(--color-text-dark);
}

.searchbox.navbar:focus-within .tt-hint {
  background: #fff !important;
  color: #999 !important;
}

/* Dark icon when expanded — use :focus-within so it flips with the input */
.searchbox.navbar:focus-within::before {
  color: var(--color-text-dark) !important;
}

/* Restore normal placeholder colour once expanded */
.searchbox.navbar:focus-within .searchfield.navbar::placeholder {
  color: #999;
}

/* === RETRACTED: square, transparent, icon only — border unchanged === */
.dataTables_right label.searchbox {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  transition: width 0.35s ease;
}

/* === EXPANDED === */
.dataTables_right label.searchbox:focus-within {
  width: 200px;
  overflow: visible;
}

/* Search icon */
.dataTables_right label.searchbox::before {
  content: "\f002";
  position: absolute;
  top: 5px;
  left: 0;
  font-family: "Font Awesome 7 Pro";
  font-weight: 300;
  width: 35px;
  text-align: center;
  font-size: 1em;
  z-index: 2;
  pointer-events: none;
  color: var(--color-text-dark);
}

/* Input: hidden when retracted */
.dataTables_right label.searchbox input.searchfield {
  width: 100% !important;        /* prevent .searchfield base rule (60px) from applying */
  height: 100%;
  outline: none;
  background: transparent;
  color: #333;
  padding: 0 8px 0 28px;
  font-size: 13px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.2s ease 0s !important;  /* suppress conflicting width animation from .searchfield */
}

.dataTables_right label.searchbox input.searchfield:focus {
  width: 100% !important;        /* prevent #page-content .searchfield:focus (180px) from kicking in */
  box-shadow: none !important;
}

/* Input: visible when expanded */
.dataTables_right label.searchbox:focus-within input.searchfield {
  opacity: 1;
  cursor: text;
  transition: opacity 0.2s ease 0.18s !important;
}

.dataTables_right label.searchbox input.searchfield::placeholder {
  color: #bbb;
}

.parent {
  overflow: hidden; /* Required: Hides ribbon overflow outside parent bounds */
  position: relative; /* Required: Establishes positioning context for absolutely positioned ribbon */
}

.ribbon {
  margin: 0;
  padding: 0;
  background: var(--colors--rentila--green);
  color:white;
  padding:0.3em 0;
  position: absolute;
  top:0;
  left:0;
  transform: translateX(40%) translateY(130%) rotate(-45deg); /* Position and rotate ribbon diagonally across corner */
  transform-origin: top left;
  z-index: 10001;
}
.ribbon:before,
.ribbon:after {
  content: '';
  position: absolute;
  top:0;
  margin: 0 -1px; /* Compensate for sub-pixel rendering gaps */
  width: 180%;
  height: 100%;
  background: var(--colors--rentila--green);
}
.ribbon:before {
  right:100%;
}

.ribbon:after {
  left:100%;
}
.hribbon {
  text-align: center;
  padding: 10px;
  background: var(--colors--rentila--green);
  color: white;
}
.tt-dataset {
	cursor: pointer;
	background-color: var(--color-bg-white);
	min-width: 142px;
	border: 1px solid var(--focus-color);
	border-top-color: transparent;
}

.tt-dataset-searchResults {
	cursor: default;
	background-color: var(--color-bg-white);
	width: 250px;
	border: 1px solid var(--focus-color);
	border-top-color: transparent;
}
.tt-dataset-searchResults .tt-suggestion {
	padding-top: 10px;
	padding-bottom: 10px;
}
.tt-dataset-searchResults .tt-suggestion {
	padding-top: 10px;
	padding-bottom: 10px;
}
.tt-dataset-searchResults .tt-suggestion:not(:last-child) {
	border-bottom: 1px solid #f3f3f3;
}
.tt-dataset-searchResults .tt-cursor {
	background-color: #fffde3;
	color: #222;
}
.tt-dataset-searchResults .tt-empty-message {
	padding: 10px;
}
.tt-dataset-searchResults .tt-footer {
	padding: 10px;
}
.tt-suggestion{
    overflow: hidden;
}
.tt-footer a {
	color: #333333;
}
.tt-footer:hover {
	background-color: #fffde3;
}
.tt-dataset-searchResults .tt-suggestion:hover {
	background-color: #fffde3;
}
.select-chosen-max-height-150  .chzn-container .chzn-results {
	max-height: 150px;
}

.g_id_signin_container {
	padding-left: 25px;
	padding-right: 25px;
}
@media (max-width: 767px) {
	.g_id_signin_container {
		padding-left: 0px;
		padding-right: 0px;
	}
}

/* JQ stars */

.jq-star, .jq-star svg  {
	width: 20px !important;
	height: 20px !important;
	display: inline-grid;
}

.starRate .jq-star, .starRate .jq-star svg  {
	width: 14px !important;
	height: 14px !important;
	display: inline-grid;
}

.ratestars .jq-star {
	cursor: pointer;
}

.chzn-multi-pull {
  z-index: 10000;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 18px;
  height: 18px;
}
/* Scoped to selects carrying .search_filter (the filter-row selects, e.g.
   search_PropertyID) via the adjacent-sibling combinator Chosen generates
   (form_field_jq.hide().after(container_div) — the .chzn-container is always
   the select's next sibling). A plain .chzn-container-multi .chzn-choices
   rule here would force EVERY multi-select site-wide to a fixed one-line
   height, clipping any 2nd+ chip in non-filter multi-selects that are meant
   to grow (e.g. DepartTenantIDs in change_tenant.tpl). */
select.search_filter + .chzn-choices,
select.search_filter + .chzn-container-multi .chzn-choices,
select#search_PropertyID + .chzn-choices,
select#search_PropertyID + .chzn-container-multi .chzn-choices {
  height: 33px !important;   /* box-sizing is already border-box here */
}
/* keep the search input vertically centered in the new 1px-taller box */
select.search_filter + .chzn-container-multi .chzn-choices .search-field input,
select#search_PropertyID + .chzn-container-multi .chzn-choices .search-field input {
  height: 19px !important;   /* 19 + 10 padding + 2 margin = the 31px content box */
  margin: 1px 0 !important;
}

/* 2. Fix baseline misalignment across all chosen widgets in the filter row */
select.search_filter + .chzn-container,
select#search_PropertyID + .chzn-container {
  vertical-align: top; /* or middle, whichever matches the rest of the row */
}
.chzn-multi-pull b {
  margin-top: 3px;
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/jquery.chosen/chosen-sprite.png") no-repeat 0px 2px;
}
.chzn-container-active.chzn-with-drop .chzn-multi-pull b {
  background: url("../img/jquery.chosen/chosen-sprite.png") no-repeat -18px 2px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-moz-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (min-device-pixel-ratio: 1.5) {
  .chzn-multi-pull b {
    background-image: url("../img/jquery.chosen/chosen-sprite@2x.png");
    background-size: 52px 42px;
    background-position: 0 2px;
  }
  .chzn-container-active.chzn-with-drop .chzn-multi-pull b {
    background-image: url("../img/jquery.chosen/chosen-sprite@2x.png");
    background-size: 52px 42px;
    background-position: -18px 2px;
  }
}
/* Reserve room for the dropdown chevron in multi-selects */
.chzn-container-multi .chzn-choices {
  padding-right: 22px; /* 18px chevron + small gap */
  box-sizing: border-box;
}

/* Force pills (including the "+N more" summary pill) onto a single line so
   they never grow taller than the fixed-height, overflow:hidden .chzn-choices
   box above — a wrapped pill used to render outside the clipped area.
   Scoped to .search_filter (see above) — elsewhere pills should wrap onto a
   new line as the box grows, not get truncated. */
select.search_filter + .chzn-container-multi .chzn-choices .search-choice,
select#search_PropertyID + .chzn-container-multi .chzn-choices .search-choice {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Match the multi-select's unselected placeholder ("Tous les biens", "Tout
   type") to the single-select's normal text color/size (.chzn-single, #444
   / 13px) instead of the base Chosen placeholder style (#777 / 14px), so
   all four "unselected" filters in a row read at the same visual weight. */
select.search_filter + .chzn-container-multi .chzn-choices .search-field .default,
select#search_PropertyID + .chzn-container-multi .chzn-choices .search-field .default {
  color: #444;
  font-size: 13px;
}

/* Keep already-selected options visible (instead of vanishing) when browsing
   the open dropdown of a multi-select, so users can see what's already
   chosen. Scoped to chzn-container-multi only — single-selects already show
   their selected option (it's the only one carrying .active-result there).
   Each row gets its own × (.result-deselect-close, wired in js/plugins.js)
   so it can be deselected right from the dropdown, same as a chip's ×. */
.chzn-container-multi .chzn-drop .result-selected {
  display: list-item;
  position: relative;
  cursor: default;
  color: var(--colors--gray--300);
  padding-right: 24px;
}
.chzn-container-multi .chzn-drop .result-deselect-close {
  display: none;
}
.chzn-container-multi .chzn-drop .result-selected .result-deselect-close {
  display: block;
  position: absolute;
  right: 12px;
  top: 6px;
  width: 12px;
  height: 12px;
  padding: 0; /* .chzn-container-multi .chzn-results a sets padding:3px 6px
                 for the "add option" link — reset it here or the icon's
                 box inflates past 12x12 and shows part of the sprite's
                 adjacent (hover-state) icon */
  border-radius: 0;
  cursor: pointer;
  background: url('../img/jquery.chosen/chosen-sprite@2x.png') -42px 1px no-repeat;
}


.chzn-container-multi .chzn-drop .result-selected .result-deselect-close:hover {
  background-position: -42px -10px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .chzn-container-multi .chzn-drop .result-selected .result-deselect-close {
    background-image: url("../img/jquery.chosen/chosen-sprite@2x.png") !important;
    background-size: 52px 42px !important;
    background-position: -42px 1px !important;
  }
  .chzn-container-multi .chzn-drop .result-selected .result-deselect-close:hover {
    background-image: url("../img/jquery.chosen/chosen-sprite@2x.png") !important;
    background-size: 52px 42px !important;
    background-position: -42px -10px !important;
  }
}



/* Make sure the chevron sits above pills and is vertically centered
   on the first row instead of pinned to the very top */
.chzn-container-multi .chzn-multi-pull {
  top: 0px;          /* aligns with first row of pills */
  right: 4px;        /* small breathing room from the border */
  z-index: 2;        /* above .search-choice */
  pointer-events: auto;
}



/* Keep the × inside the pill's own padded area so it never slides
   under the chevron, even on long / wrapping labels */
.chzn-container-multi .search-choice {
  padding-right: 22px; /* was 20px — gives the × a guaranteed lane */
}
.chzn-container-multi .search-choice .search-choice-close {
  right: 5px;          /* was 3px */
}
/* AI */
.correctAI {
    position: absolute;
    top: 75px;
    right: 0.1%;
    z-index: 998;
}
.correctAI.wisywig {
    position: absolute;
    top: auto;
    bottom: 10px;
    right: 1.6%;
    z-index: 998;
}

.wisywig .correctAI {
    position: absolute;
    top: auto;
    bottom: 15px;
    right: 0.5%;
    z-index: 998;
}

/* the round button opens into a pill on hover, while the menu is open, and while the field is focused */
.correctAI > .btn.btn-ai.dropdown-toggle {
    width: auto;
    min-width: 28px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 14px !important;
    transition: padding .18s ease;
}
.correctAI .btn-ai-label {
    font-size: 12px;
    font-weight: 600;
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    overflow: hidden;
    background-image: linear-gradient(45deg, #333333 47%, #72A333 69%, #93D938 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: max-width .18s ease, opacity .14s ease, margin-left .18s ease;
}
/* the button has no fixed width: it grows with the label */
.correctAI > .btn.btn-ai.dropdown-toggle:hover,
.correctAI.open > .btn.btn-ai.dropdown-toggle,
.magictext-wrapper.focused .correctAI > .btn.btn-ai.dropdown-toggle {
    padding: 0 10px;
}
.correctAI > .btn.btn-ai.dropdown-toggle:hover .btn-ai-label,
.correctAI.open > .btn.btn-ai.dropdown-toggle .btn-ai-label,
.magictext-wrapper.focused .correctAI > .btn.btn-ai.dropdown-toggle .btn-ai-label {
    max-width: 64px;
    opacity: 1;
    margin-left: 5px;
}
@media (prefers-reduced-motion: reduce) {
    .correctAI > .btn.btn-ai.dropdown-toggle,
    .correctAI .btn-ai-label {
        transition: none;
    }
}
/* Table toggle */

.toggle-group {
  cursor:pointer;
}
.toggle-icon {
  transition: transform 0.2s ease;
}
.toggle-icon.collapsed {
  transform: rotate(-90deg); /* Rotate arrow from down-pointing (▼) to right-pointing (▶) when collapsed */
}

/* ============================================================
   Slide-drawer sidebar mode
   Activated by adding class "slide" to #page-sidebar.
   Without "slide", Bootstrap collapse behaviour is unchanged.
   ============================================================ */

/* Always keep the slide sidebar visible — override Bootstrap collapse */
#page-sidebar.slide {
	display: block !important;
	height: calc(100vh - 50px) !important;
	overflow-y: auto !important;
	overflow-x: hidden;
}

/* When slide mode is active, fix the header so both header and sidebar are
   viewport-relative — eliminates sticky/fixed drift during scroll. */
body.slide-layout header.navbar {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1040;
}

body.slide-layout #inner-container {
	padding-top: 50px;
}

/* Desktop: fixed, independently scrollable */
@media (min-width: 980px) {
	#page-sidebar.slide {
		position: fixed;
		top: 50px;
		left: 0;
		margin: 0;
		z-index: 200;
	}
}

/* Mobile / tablet: drawer from the left */
@media (max-width: 979px) {
	#page-sidebar.slide {
		position: fixed;
		top: 50px;
		left: 0;
		width: 260px;
		height: calc(100vh - 50px) !important;
		transform: translateX(-260px);
		transition: transform 0.28s ease;
		z-index: 1050;
		background: var(--colors--emerald--20, #f5f8f2);
		box-shadow: 3px 0 14px rgba(0,0,0,0.18);
		border-right: none;
		margin: 0;
	}

	#page-sidebar.slide.open {
		transform: translateX(0);
	}

	/* Backdrop overlay */
	.sidebar-drawer-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.38);
		z-index: 1040;
		cursor: pointer;
	}

	.sidebar-drawer-overlay.active {
		display: block;
	}
}

/* Alerts dropdown: prevent overflow on small screens */
ul.dropdown-menu.widget.pull-right {
	max-height: 65vh;
	overflow-y: auto;
}

ul.dropdown-menu.widget.pull-right > li.widget-heading {
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1;
}

ul.dropdown-menu.widget.pull-right > li.widget-footer {
	position: sticky;
	bottom: 0;
	background: #fff;
	z-index: 1;
}
 /* ---------- Segmented toggle ---------- */
  .navbar-inner .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  }

  .middle-wrapper {
    /* display: flex; */
    /* align-items: center; */
    padding-left: 8px;
    justify-content: center;
    flex: 1;
  }
  
  .seg-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
	  margin: 8px auto; /* pushes left/right navs to edges */
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    height: 34px;
    box-sizing: border-box;
  }
 
  .seg-toggle .seg-btn {
    position: relative;
    width: 32px;
    height: 26px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	  box-sizing: border-box;
  }
 
  .seg-toggle .seg-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.15);
  }
 
  /* active = raised white card */
  .seg-toggle .seg-btn.active {
    background: #ffffff;
    color: #72a333;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  }
 
  .seg-toggle .seg-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
  }
 
  /* ---------- Caption ---------- */
  .caption {
    color: #fff;
    font-size: 13px;
    opacity: 0.85;
  }
 
  /* ---------- Add button ---------- */
  .add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px;
	margin: 8px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    height: 34px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
    font-family: inherit;
  }
 
  .add-btn:hover {
    background: rgba(255, 255, 255, 0.3);
  }
 
  .add-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
  }
 
  .add-btn .icon-circle-button {
    width: 26px !important;
    height: 26px;
    border-radius: 50%;
    /*background: #ffffff;
    color: #72a333;*/
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: #f89406;
    color: white;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
  }
 /* ---------- Dropzone ---------- */
  .rentila-dropzone { position: relative; }
  .rentila-dropzone.is-dragover { outline: 2px dashed #6c9a2f; outline-offset: -8px; }
  .rentila-dropzone.is-dragover::after {
    content: "\f0ee"; /* Font Awesome cloud-upload (f0ee) */
    font-family: "Font Awesome 7 Pro", "Font Awesome 6 Pro", "FontAwesome";
    font-weight: 300;
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(155, 191, 101, .15);
    font-size: 32px; color: #355c14;
    pointer-events: none; z-index: 9999;
  }

  /* ────────────────────────────────────────────────────────
     QUICK-ACTION RAIL — copy this block into your stylesheet.
     Tokens used: --colors--rentila--green  (#72a333)
                  --colors--green--700      (#548126)
     ──────────────────────────────────────────────────────── */
  .qa-rail {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
    background-color: var(--color-bg-white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0 0 20px;
    /* padding: 0px 10px 5px 10px; */
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05);
    border-radius: 10px;
  }

  .qa-rail .qa-btn {
    position: relative;
    height: 32px;
    width: 32px;
    padding: 0;
    background: var(--colors--rentila--green, #72a333);
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-shadow: none;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    -webkit-appearance: none;
    transition:
      width    .35s cubic-bezier(.2, .7, .3, 1),
      padding  .35s cubic-bezier(.2, .7, .3, 1),
      background .2s,
      box-shadow .2s;
    flex-shrink: 0;
    text-decoration: none;
  }

  .qa-rail .qa-btn.qa-round {
    border-radius: 50%;
  }
  .qa-rail .qa-btn.qa-round:hover {
    border-radius: 16px; /* pill shape on expand */
  }

  .qa-rail .qa-btn:hover,
  .qa-rail .qa-btn:focus-visible {
    width: auto;
    justify-content: flex-start;
    padding: 0 12px 0 0;
    background: var(--colors--green--700, #548126);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    outline: none;
  }

  .qa-rail .qa-btn > .qa-ico {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 16px;
  }

  .qa-rail .qa-btn > .qa-lbl {
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    max-width: 0;
    opacity: 0;
    transition:
      max-width .35s cubic-bezier(.2, .7, .3, 1),
      opacity   .25s ease .05s;
  }

  .qa-rail .qa-btn:hover > .qa-lbl,
  .qa-rail .qa-btn:focus-visible > .qa-lbl {
    max-width: 240px;
    opacity: 1;
  }

/* ─────────────────────────────────────────────────────────────────
   QUICK-ACTION TILES — VARIATION B  (light tiles, colored money borders)
   Prefix .qa-tiles → does NOT touch the old .qa-rail / .qa-btn backup.
   Tokens reused: --colors--rentila--green (#72a333)
                  --colors--green--700     (#548126)
   ───────────────────────────────────────────────────────────────── */
  .qa-tiles {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    /*
    padding: 10px;
    background-color: var(--color-bg-white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0 0 20px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    */
  }
  .qa-tiles .qa-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 80px;
    height: 60px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--colors--green--line, #dbe6c9);
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    text-shadow: none;
    font-family: inherit;
    -webkit-appearance: none;
    overflow: hidden;
    flex-shrink: 0;
    transition:
      transform    .15s ease,
      border-color .18s,
      background   .18s,
      box-shadow   .18s;
  }
  .qa-tiles .qa-tile > .qa-ico {
    font-size: 19px;
    line-height: 1;
    color: color-mix(in srgb, var(--colors--emerald--900) 75%, transparent);
    transition: color .18s;
  }
  .qa-tiles .qa-tile > .qa-lbl {
    font-size: 13px;
    line-height: 1.15;
    font-weight: 600;
    color: #555;
    text-align: center;
    display: block;
    width: 87%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
  .qa-tiles .qa-tile:hover,
  .qa-tiles .qa-tile:focus-visible {
    background: var(--colors--green--bg, #f0f5e9);
    border-color: var(--colors--rentila--green, #72a333);
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(114, 163, 51, 0.15);
    outline: none;
  }
  .qa-tiles .qa-tile:hover > .qa-ico,
  .qa-tiles .qa-tile:focus-visible > .qa-ico {
    color: var(--colors--rentila--green, #72a333);
  }

  /* ── money tiles: green income / red expense ── */
  .qa-tiles .qa-tile.qa-pos {
    border: 1px solid #b9d089;
  }
  .qa-tiles .qa-tile.qa-pos > .qa-ico {
    color: var(--colors--rentila--green, #72a333);
  }
  .qa-tiles .qa-tile.qa-pos:hover,
  .qa-tiles .qa-tile.qa-pos:focus-visible {
    background: var(--colors--green--bg, #f0f5e9);
    border-color: var(--colors--rentila--green, #72a333);
    box-shadow: 0 2px 6px rgba(114, 163, 51, 0.18);
  }

  .qa-tiles .qa-tile.qa-neg {
    border: 1px solid #f0cfcb;
  }
  .qa-tiles .qa-tile.qa-neg > .qa-ico {
    color: #c0392b;
  }
  .qa-tiles .qa-tile.qa-neg:hover,
  .qa-tiles .qa-tile.qa-neg:focus-visible {
    background: #fbecea;
    border-color: #c0392b;
    box-shadow: 0 2px 6px rgba(192, 57, 43, 0.15);
  }
  .qa-tiles .qa-tile.qa-neg:hover > .qa-ico,
  .qa-tiles .qa-tile.qa-neg:focus-visible > .qa-ico {
    color: #a3312a;
  }
/* ────────────────────────────────────────────────────────
     RENT-COLLECTION BAR
     Tokens used: --colors--rentila--green   #72a333
                  --color-warning            #f89406
                  --color-error              #cc0000
     ──────────────────────────────────────────────────────── */
  .collection {
    font-family: inherit;
  }

  .collection-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    overflow: hidden;
    display: flex;
  }
  .collection-bar > span { display: block; height: 100%; }
  .collection-bar .seg-paid    { background: var(--colors--rentila--green, #72a333); }
  .collection-bar .seg-pending { background: var(--color-warning, #f89406); }
  .collection-bar .seg-overdue { background: var(--color-error, #cc0000); }

  .collection-legend {
    display: flex;
    gap: 15px;
    margin-top: 14px;
    font-size: 13px;
  }
  .collection-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .collection-legend .dot {
  position: static;          /* cancel absolute */
  top: auto;
  left: auto;
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  flex-shrink: 0;
  animation: none;           /* cancel pulse */
  opacity: 1;
  background: transparent;   /* will be set by .paid / .overdue */
}


  .collection-legend .dot.paid    { background: var(--colors--rentila--green, #72a333); }
  .collection-legend .dot.pending { background: var(--color-warning, #f89406); }
  .collection-legend .dot.overdue { background: var(--color-error, #cc0000); }
/* ===== Tasks Kanban view ===== */
#kanban { display: flex; align-items: flex-start; gap: 14px; }
#kanban .kb-col { flex: 1 1 0; min-width: 0; background-color: var(--colors--emerald--10); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; border-radius: 10px !important; border: 1px solid rgba(0, 0, 0, 0.1); }
#kanban .kb-col-head { padding: 10px 14px; font-weight: 600; border-bottom: 1px solid #e4e6e8; }
#kanban .kb-col-head .badge { float: right; }
#kanban .kb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
#kanban .kb-dot-open { background: var(--colors--rentila--green, #72a333); }
#kanban .kb-dot-late { background: var(--color-error, #cc0000); }
#kanban .kb-dot-done { background: #9aa0a6; }
#kanban .kb-cards { padding: 6px; min-height: 60px; }
#kanban .kb-card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; padding: 10px 12px; margin: 6px; cursor: pointer; }
#kanban .kb-card[draggable=true] { cursor: grab; }
#kanban .kb-card:hover { border-color: #c9cdd1; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
#kanban .kb-card:focus { outline: 2px solid var(--colors--rentila--green, #72a333); outline-offset: 1px; }
#kanban .kb-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
#kanban .kb-title { font-weight: 600; word-break: break-word; }
#kanban .kb-done { opacity: 0.8; }
#kanban .kb-done .kb-title { text-decoration: line-through; color: #9aa0a6; }
#kanban .kb-meta { font-size: color: #6c757d; }
#kanban .kb-meta a { color: inherit; }
#kanban .kb-foot { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; }
#kanban .kb-due { font-size: color: #6c757d; }
#kanban .kb-due.kb-late { color: var(--color-error, #cc0000); font-weight: 600; }
#kanban .kb-avatars { white-space: nowrap; }
#kanban .kb-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: -6px; border-radius: 50%; background: var(--colors--rentila--green, #72a333); color: #fff; font-size: 10px; font-weight: 600; border: 2px solid #fff; }
#kanban .kb-avatar-done { background: #9aa0a6; }
#kanban .kb-avatar-more { background: #6c757d; }
#kanban .kb-empty { padding: 20px; text-align: center; color: #9aa0a6; font-size: 12px; }
#kanban .kb-more { display: block; margin: 6px; padding: 8px; text-align: center; font-size: 12px; }
#kanban .kb-cards.kb-drop-ok { outline: 2px dashed var(--colors--rentila--green, #72a333); outline-offset: -4px; border-radius: 7px; }
#kanban .kb-cards.kb-drag-over { background: rgba(114, 163, 51, 0.08); }
#kanban .kb-actions .dropdown-toggle { padding: 0 6px; }

@media (max-width: 767px) {
	#kanban { display: block; }
	#kanban .kb-col { margin-bottom: 14px; }
}

/* kanban quick check button (compact version of the list's activeTask button) */
#kanban .kb-check { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; line-height: 22px; font-size: 11px; text-align: center; border-radius: 50%; }
#kanban .kb-check.kb-check-complete:hover { background: var(--colors--rentila--green, #72a333); border-color: var(--colors--rentila--green, #72a333); color: #fff; }

#kanban .kb-title { flex: 1 1 auto; }

/* kanban card body excerpt, clamped to two lines */
#kanban .kb-excerpt { margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* kanban "En cours" column dot (interventions) */
#kanban .kb-dot-progress { background: #3a87ad; }

/* reorderable room tabs (furniture/inventaire editor).
   jQuery UI adds .ui-sortable-handle to each <li>, so the global
   .ui-sortable-handle:before rule (above) draws a misplaced floating icon on them.
   Neutralize it ONLY for the room tabs (two classes outrank the shared one-class rule),
   then draw a clean handle INSIDE the visible tab (the <a>, since the <li> has ~21px
   left padding): a door icon at rest, swapping to the move-arrows handle on hover.
   pointer-events:none keeps the whole <li> draggable via jQuery UI sortable. */
.room-sortable-tab.ui-sortable-handle::before { content: none !important; }

.room-sortable-tab > a.tablink { position: relative; padding-left: 30px; }
.room-sortable-tab > a.tablink::before {
	font: normal normal 300 14px/1 "Font Awesome 7 Pro"; /* fal = weight 300 */
	content: "\f52b";                                     /* fa-door-open (move arrows \f047 on hover) */
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 1;
	transition: opacity 0.15s ease-in-out;
	cursor: move;
	color: #9ca3af;
	pointer-events: none;
}
.room-sortable-tab:hover > a.tablink::before { content: "\e411"; } /* move arrows on hover */

/* Historique du bien — property timeline tab */
.rt-history-block { overflow: hidden; }
.rt-history-year {
	float: left;
	width: 52px;
	text-align: right;
	padding: 6px 12px 0 0;
	color: var(--colors--gray--500);
	font-size: 14px;
}
.rt-history-rows, .rt-history-band {
	margin-left: 64px;
	border-left: 1px solid var(--colors--gray--200);
	padding: 2px 0 8px 14px;
}
.rt-history-row {
	padding: 5px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rt-history-icon { color: var(--colors--gray--400); margin-right: 8px; }
.rt-history-detail { margin-left: 8px; font-size: 12px; }
.rt-history-amount { float: right; margin-left: 12px; }
.rt-history-warning { color: #d68102; }
.rt-history-row a { color: inherit; text-decoration: none; }
.rt-history-row a:hover { text-decoration: underline; }
.rt-history-band {
	border: 1px solid var(--colors--gray--200);
	border-left-style: dashed;
	border-radius: 4px;
	padding: 10px 14px;
	margin-bottom: 6px;
}
.rt-history-band-summary { font-size: 12px; margin-top: 2px; }
.rt-history-band-years { display: none; margin-top: 10px; }
.rt-history-band-open .rt-history-band-years { display: block; }
.rt-history-band-open .rt-history-expand { display: none; }
.rt-history-expand { float: right; }
@media (max-width: 767px) {
	.rt-history-row { white-space: normal; }
	.rt-history-amount { float: none; display: block; margin-left: 0; }
}

/* ============================================================
   Bootstrap Tour — steps that highlight the sidebar
   #page-sidebar.slide is position:fixed with z-index:200, so it opens a
   stacking context that clamps #primary-nav (and every menu item inside it)
   below the tour's .tour-step-background panel (z-index:1100) — the
   highlighted step then paints as a blank block. Lift the whole sidebar
   above the tour backdrop while it holds the highlighted step.
   Must stay after the #page-sidebar.slide rules above (same specificity).
   ============================================================ */
#page-sidebar:has(.tour-step-backdrop) {
	z-index: 1102;
}

/* The lifted sidebar is transparent, so the tour backdrop still dims the menu
   through it — except the Mode expert well, the only opaque block in there.
   Dim it by hand, unless it is itself the highlighted step. */
#page-sidebar:has(.tour-step-backdrop) #LandlordExpertModeIndexContainer:not(.tour-step-backdrop) {
	opacity: 0.4;
}

/* Signature cost ledger — confirm modal (signature_allowance.tpl, ledger mode).
   Layout and type only: the surface, the bar and every text colour come from
   .well / .progress-mini / .bar-* / .text-muted / .text-error, which main-dark.css
   already themes. The two tints below use tokens declared in BOTH main.css and
   main-dark.css, so this needs no dark counterpart. */
.sig-ledger { font-variant-numeric: tabular-nums; }
.sig-row { display: flex; justify-content: space-between; gap: 14px; }
.sig-cost { font-size: 17px; font-weight: 600; }
.sig-ledger-warn { background-color: var(--color-row-pending); border-color: var(--color-row-pending); }
.sig-ledger-stop { background-color: var(--color-row-late); border-color: var(--color-row-late); }
/* on the red tint the two inherited text colours fall under 4.5:1 (muted 4.41, .text-error
   2.47 in dark) - these two lift them to 9.7 and 4.53, and swap with the theme on their own. */
.sig-ledger-stop .text-muted { color: var(--color-text-dark); }
.sig-ledger-stop .text-error { color: var(--color-error); }

/* Rapports - the summary a report writes above its table */
/* info-box is an inline-block meant to sit in a grid column, and this one is the
   width of the page like the options block above it */
.report-summary.info-box {
	display: block;
}

.report-summary .report-summary-item {
	display: inline-block;
	margin-right: 40px;
	vertical-align: top;
}

.table td.report-amount {
	text-align: right;
	white-space: nowrap;
}

/* .dataTables_wrapper > div dresses the bars above and below the table - this one
   is neither, it only carries the table so a wide report can be scrolled to */
.dataTables_wrapper > .report-table-scroll {
	background: none;
	padding: 0;
	border: 0;
	overflow-x: auto;
}

/* Public classifieds portal (/classifieds): the hero, and the search form as a
   grid so the switch, the Chosen boxes, the budget and the buttons share one
   width and one baseline; a single column on phones */
.rt-portal-hero {
    text-align: center;
    max-width: 1024px;
    padding: 50px 10px 10px;
    margin: 0 auto;
    box-sizing: border-box;
}
.rt-portal-hero h1 {
    line-height: 1;
    margin: 0 0 15px;
}
.rt-portal-hero .lead {
    color: var(--colors--gray--500);
    font-size: 20px;
    margin-bottom: 30px;
}
.rt-portal-filters {
    padding: 0;
    margin-bottom: 20px;
}
.rt-portal-hero .rt-portal-pillform {
    text-align: left;
}
.rt-portal-filters .active-archive {
    margin: 0;
}
.rt-portal-switch {
    margin-bottom: 10px;
}

/* Portal cards: same height in a row, title on two lines at most, price at the bottom */
.rt-portal-grid {
    display: flex;
    flex-wrap: wrap;
}
.rt-portal-grid > .span4 {
    display: flex;
    float: none;
}
.rt-portal-grid .thumbnail {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.rt-portal-grid .caption {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.rt-portal-grid .caption h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rt-portal-grid .rt-portal-price {
    margin-top: auto;
    padding-top: 10px;
}
.rt-portal-chips {
    min-height: 22px;
    margin-top: 6px;
}
.rt-tag {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 4px 4px 0;
    border-radius: 4px;
    background: var(--colors--gray--50);
    border: 1px solid var(--colors--gray--200);
    color: var(--colors--gray--700);
    font-size: 12px;
    line-height: 18px;
}
/* the energy class sits on the photo, bottom-left, clear of the edges */
.rt-portal-dpe {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 10;
}
/* results page: a small title with the count under it, the sort at the right */
.rt-portal-results-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}
.rt-portal-results-head h1 {
    font-size: 20px;
    line-height: 1.3;
    margin: 0;
}

/* the search page's bar: one rounded field, the places inside it, the filters
   and the round submit on the right */
.rt-portal-pillform .rt-portal-switch,
.rt-portal-pillform > .active-archive {
    max-width: 420px;
    margin: 0 auto 12px;
}
.rt-portal-pillform .active-archive {
    display: flex;
}
.rt-portal-pillform .active-archive .btn {
    flex: 1;
}
.rt-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--colors--main--white);
    border: 1px solid var(--colors--gray--200);
    border-radius: 999px;
    padding: 6px 6px 6px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.rt-pill-icon {
    color: var(--colors--gray--500);
    font-size: 16px;
}
.rt-pill-field {
    flex: 1;
    min-width: 0;
}
/* the places select drops its box inside the pill, the chips it draws stay */
.rt-pill-field .chzn-container {
    width: 100% !important;
}
.rt-pill-field .chzn-container-multi .chzn-choices {
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
}
.rt-pill-field .chzn-container-multi .chzn-choices .search-field input {
    height: 30px;
    padding: 0;
    font-size: 14px;
    color: var(--colors--gray--900);
}
.rt-pill-field .chzn-drop {
    width: 100% !important;
    border-radius: 8px;
    margin-top: 6px;
}
.rt-pill-filters {
    flex: none;
    padding: 0 14px;
    color: var(--colors--gray--900);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    border-left: 1px solid var(--colors--gray--200);
}
.rt-pill-filters:hover {
    color: var(--colors--rentila--green);
    text-decoration: none;
}
.rt-pill-go {
    flex: none;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--colors--rentila--green);
    color: var(--colors--main--white);
    font-size: 15px;
    cursor: pointer;
}
.rt-pill-go:hover {
    background: var(--colors--green--700);
}

/* the filters in force, under the bar, each one droppable */
.rt-pill-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.rt-pill-chips .rt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--colors--gray--50);
    border: 1px solid var(--colors--gray--200);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    color: var(--colors--gray--900);
}
.rt-pill-chips .rt-chip:hover {
    border-color: var(--colors--rentila--green);
    color: var(--colors--rentila--green);
    text-decoration: none;
}
.rt-pill-chips .rt-chip i {
    font-size: 12px;
    color: var(--colors--gray--500);
}
.rt-pill-chips .rt-chip-clear {
    font-size: 13px;
    color: var(--colors--gray--500);
    text-decoration: underline;
}
@media (max-width: 767px) {
    .rt-pill {
        flex-wrap: wrap;
        border-radius: 20px;
        padding: 10px;
    }
    .rt-pill-field {
        flex: 1 0 100%;
        order: -1;
    }
    /* the round submit carries the magnifier once the bar is on two rows */
    .rt-pill-icon {
        display: none;
    }
    .rt-pill-filters {
        border-left: none;
        padding-left: 0;
    }
    .rt-pill-go {
        margin-left: auto;
    }
}

/* the portal pager: round numbers, the current page on the Rentila green */
.rt-portal-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 30px 0 10px;
}
.rt-portal-pager .rt-pager-page,
.rt-portal-pager .rt-pager-arrow,
.rt-portal-pager .rt-pager-gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--colors--gray--900);
    text-decoration: none;
}
.rt-portal-pager a:hover {
    background: var(--colors--gray--50);
    color: var(--colors--gray--900);
    text-decoration: none;
}
.rt-portal-pager .rt-pager-page.active {
    background: var(--colors--rentila--green);
    color: var(--colors--main--white);
}
.rt-portal-pager .rt-pager-arrow {
    color: var(--colors--gray--500);
    font-weight: normal;
}
.rt-portal-pager .rt-pager-arrow.disabled {
    color: var(--colors--gray--300);
}
.rt-portal-pager .rt-pager-gap {
    color: var(--colors--gray--400);
}

/* the listing card, marketplace and portal: 10px corners, the photo edge to edge */
.rt-card {
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
}
.rt-card .caption {
    padding: 12px 14px;
}

/* the signature pads draw on the canvas: keep the browser from turning a stroke into a pan or a zoom */
#jsignature-modal canvas,
#amendment-jsignature-modal canvas {
    touch-action: none;
}

/* =========================================================================
   Form fields, Chosen widgets and buttons — 33px
   One height for every control on a form row. The arithmetic below assumes
   content-box (Bootstrap 2's default for inputs) and the app's 4px vertical
   padding + 1px border, so a 23px content box measures 33px.
   ========================================================================= */

/* Text-like inputs: 23 + 8px padding + 2px border = 33px.
   input[type=file] is left alone — it has no comparable padding model. */
input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=url], input[type=search], input[type=number], input[type=date],
input[type=datetime], input[type=datetime-local], input[type=month],
input[type=time], input[type=week], input:not([type]) {
	height: 23px;
	line-height: 23px;
}

/* Native selects size from the border box. The arrow is already centred
   (`right 10px center` further up), so it follows the new height.
   line-height must stay `normal`, not a number matching the height: the content
   box is only 23px (33 less 8px padding and 2px border), so a 33px line box
   overflows it and Chrome anchors the text to the top of the content box —
   about 5px below the centre, while the chevron background stays centred.
   `normal` also keeps selects that set their own height (the DataTables
   "lignes par page" one is 30px) centred, and survives a font-size change. */
select {
	height: 33px;
	line-height: normal;
}

/* € / m² add-ons */
.input-prepend .add-on,
.input-append .add-on {
	height: 23px;
	line-height: 23px;
}

/* Chosen single: 31 + 2px border = 33px */
.chzn-container-single .chzn-single {
	height: 31px;
	line-height: 31px;
}
.chzn-container-single .chzn-single span {
	line-height: 31px;
}

/* The open list needs nothing here. Chosen sizes and places it inline at init
   — dropdown.css({width: f_width - borders, top: container.height()}) — so it
   already follows the 33px field, and an inline style beats this file anyway.
   Do not add box-sizing: border-box to .chzn-drop: Chosen's inline width is a
   CONTENT width, so border-box shrinks the list by its 2px borders and its
   right edge steps in from the field's. The `top: 29px` and missing width in
   plugins.css only ever apply if that inline style is absent. */

/* Chosen search box: full width of the list, centred SVG magnifier instead of
   the sprite. Both !importants are load-bearing:
     width      — Chosen writes it inline (search_field.css({width: n+'px'})).
     background — plugins.css carries a retina @media block (min-device-pixel-
                  ratio 1.5) that forces chosen-sprite@2x.png with !important on
                  background-image, -size and -repeat. Without !important here
                  the sprite wins on every Mac and phone, and at its 100% -20px
                  position it lands outside the box, so the search field shows
                  no icon at all. This is invisible at DPR 1 — check at 2x. */
.chzn-container .chzn-search input {
	box-sizing: border-box;
	width: 100% !important;
	height: 33px;
	padding: 4px 30px 4px 8px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16.2' y2='16.2'/%3E%3C/svg%3E") no-repeat right 10px center / 15px 15px !important;
}

/* Chosen multi. min-height, not height: these boxes are meant to grow as chips
   wrap (see the .search_filter note above — the filter row is the one place
   that is pinned to a single line, and it carries its own 33px rule).
   box-sizing is already border-box here. */
.chzn-container-multi .chzn-choices {
	min-height: 33px;
}
.chzn-container-multi .chzn-choices .search-choice {
	margin-top: 5px;
	margin-bottom: 5px;
}
.chzn-container-multi .chzn-choices .search-field input {
	height: 19px !important;
}
/* The pill field draws no box of its own, so it must not inherit the floor —
   nor the taller typing field, which would push the whole pill row down. 15px
   is what plugins.css already gives it; the rule above needs !important to
   beat that, so the exception has to restate it. */
.rt-pill-field .chzn-container-multi .chzn-choices {
	min-height: 0;
}
.rt-pill-field .chzn-container-multi .chzn-choices .search-field input {
	height: 15px !important;
}

/* Below 767px Bootstrap switches the width-classed inputs to border-box and
   pins min-height: 30px (bootstrap.css, .input-large/.input-xlarge/[class*=span]
   /.uneditable-input). That clamps the 23px content height above back to 30px,
   so on phones and small tablets those fields stayed 3px shorter than the bare
   ones. Same list, same properties — only the floor moves. */
@media (max-width: 767px) {
	.input-large, .input-xlarge, .input-xxlarge,
	input[class*="span"], select[class*="span"], textarea[class*="span"],
	.uneditable-input {
		min-height: 33px;
	}
	textarea[class*="span"] {
		min-height: 0;   /* textareas size from rows, not the field height */
	}
}

/* Colour swatch */
input.square.WKCP_edit {
	height: 31px;
	width: 31px;
}

/* Buttons: same height as fields. The size variants keep their own scale, and
   .btn-rounded is excluded because it is a 32x32 flex circle with padding:0 —
   this selector is (0,7,0) and would otherwise outrank it and stretch it. */
.btn:not(.btn-mini):not(.btn-small):not(.btn-large):not(.btn-link):not(.close):not(.btn-rounded) {
	line-height: 23px;
	padding-top: 4px;
	padding-bottom: 4px;
}

/* Social-proof badge (register / login) — ported from the marketing site.
   --colors--emerald--200 and --colors--purple--200 already live in :root;
   --colors--main--brand-secondary aliases the purple so the marketing
   class names keep working here. */
.tag {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	column-gap: var(--spacing-block--spacing-8, .5rem);
	row-gap: var(--spacing-block--spacing-8, .5rem);
	border-radius: var(--border-radius--br-6, .38rem);
	padding: .19rem;
	color: var(--colors--gray--900);
}
.tag__box {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	column-gap: var(--spacing-block--spacing-4, .25rem);
	row-gap: var(--spacing-block--spacing-4, .25rem);
	border-radius: var(--border-radius--br-4, .25rem);
	padding: .38rem;
	white-space: nowrap;   /* the count never breaks across two lines */
}
.tag.bg-emerald-200 {
	padding-right: .63rem;
}
.bg-emerald-200 {
	background-color: var(--colors--emerald--200);
}
.bg-brand-secondary {
	background-color: var(--colors--main--brand-secondary);
}
.p-small {
	font-family: var(--body--font-body, Manrope, sans-serif);
	font-size: .875rem;
	line-height: 1.125rem;
	font-weight: 500;
	margin-bottom: 0;
}
.text-weight-bold {
	font-weight: 700;
}
.fa-icon {
	font-size: .875rem;
	line-height: 1;
}

/* Online dot — stands in for the arrow on the login badge, where the figure
   is a live counter rather than a rise. */
.tag__dot {
	flex: none;
	width: .5rem;
	height: .5rem;
	margin-right: 2px;
	border-radius: 50%;
	background-color: var(--colors--green--500);
	box-shadow: 0 0 0 3px rgba(84, 173, 22, .25);
}

/* The badge hugs its content and is centred over the login card. */
#signup-proof {
	display: flex;
	justify-content: center;
	margin: 0 auto 12px;
}