/*


this is it


*/






/* us'em like: var(--carta_magenta) */

:root {

	--carta_H1_color: #ffae00; /* client name in the middle top .c_f_h */
	--carta_client_name_color: black; /* client name in the left top #c_n */
	--carta_text_color: #333333;
	--carta_links_color: #073C68;
	--carta_background_color: white;
	--carta_border_color: transparent;
	--carta_search_border_color: #ffae00;
	--carta_buttons_border_color: #818181;
	--carta_buttons_hover_background_color: #e8f9fc;
	--carta_calls_color: #073C68; /* the text for calling the phone number and the phone numbers */

	--rating_img_height: 32px; /* following client name in the middle top .c_f_h */
	--logo2_rating_img_height: 24px; /* under client name in the left top #c_n */

	--carta_review_positive: var(--carta_dark_blue);
	--carta_review_negative: var(--carta_dark_red);
	--carta_reservation_explanation: var(--carta_green);


	/* leave bellow unchanged for custom CSSs - change above instead */

	--carta_logo_red: #FF0000;
	--carta-logo_yellow: #FAC700;
	--carta_logo_blue: #0000FF;
	--carta_magenta: #DE0F7A;
	--carta_blue: #184BDA;
	--carta_dark_blue: #073C68;
	--carta_light_blue: #9DABD0;
	--carta_green: #041/*478369*/;
	--carta_light_green: #9CCAA8;
	--carta_red: #600000;
	--carta_dark_red: #680707;
	--carta_light_red: #9B7D7D;

}




.carta_magenta, [carta_magenta] {color: var(--carta_magenta);}

.carta_blue, [carta_blue] {color: var(--carta_blue);}

.carta_dark_blue, [carta_dark_blue] {color: var(--carta_dark_blue);}

.carta_green, [carta_green] {color: var(--carta_reservation_explanation);}

.carta_red, [carta_red] {color: var(--carta_red);}

.carta_dark_red, [carta_dark_red] {color: var(--carta_dark_red);}

.grayed, [grayed] {color: darkslategray !important;}



@font-face {
	font-family: "open_sans_condensed";
	src: url("inc/styles/fonts/OpenSans-CondBold.ttf");
	font-display: swap;
}

@font-face {
	font-family: "carta";
	src: url("inc/styles/fonts/carta.otf");
	font-display: swap;
}

body {
	FONT-FAMILY : Arial, sans-serif;
	/*font-size: 14px;*/
	FONT-STYLE: normal;
	FONT-VARIANT: normal;
	FONT-WEIGHT: normal;
	background-color: white;
	margin: 0;
	color: #666;
}

h1, h2, h3, .module_title {
	font-family: "Open Sans Condensed", open_sans_condensed;
	line-height: initial;
}

h1 {
	/*font-weight: 700;*/
	font-style: normal;
	color: var(--carta_H1_color);
	font-size: 36px;
	FONT-WEIGHT: bold;
	margin-top: 0px;
	padding-top: 3px;
	margin-bottom: 0px;
	padding-bottom: 5px;
	min-height: 42px;
	overflow: hidden;
	position: relative;
}

H2 {
	FONT-SIZE: 2em;
	/*color: #073C68;*/
	/*margin: 40px 0 10px 0;*/
	padding: 0;
}

H3, .module_title {
	FONT-SIZE: 16pt;
	font-weight: normal;
	/*border-bottom: 1px solid var(--carta_H1_color);
	color: #073C68;*/
	margin: 10px 0 5px 0;
}

hr {
	border-top: 1px solid silver;
	border-bottom: none;
	border-right: 20px solid blueviolet;
}


/* page footer - for client and location footer, in page.tpl - used also in mCm.css as .foo (footer) */

#p_f {
	background: var(--carta_text_color);
	padding: 10px;
	/*border-radius: 0 0 9px 9px;*/
	position: relative; /* in order to position qrc absolute within */
}

#p_f li:not(.cat) A {color: #C2C2C2;}
#p_f .cat a {color: white;}

#p_f A.bold {
	color: #C2C2C2;
	font-weight: bold;
}

#p_f ul {
	font-family: "museo-sans", Arial, sans-serif;
	margin: 20px;
	padding: 0;
	display: inline-block;
	vertical-align: top;
	/*width: calc(50% - 42px);*/
	width: calc(100% - 40px);
	/*min-width: 300px;*/ /* nu stiu de ce am facut asta insa la mobile foarte inguste nu era bine - genera scroll orizontal */
	/*max-width: 900px;*/
	text-align: left;
}

#p_f .cat {
	font-size: 18px;
	text-transform: uppercase;
	font-weight: bold;
	color: #fcffff;
}

#p_f ul li {
	list-style: none;
	padding-top: 5px;
	line-height: 28px;
	font-size: 17px;
}

#p_f .f_icon {
	top: -3px;
	margin-right: 3px;
}


#p_f li[e_v], #p_f li[t_e_t], #p_f li[m_p_u] {
	/*font-size: xx-small;
	line-height: 10px;*/
}




input:not([type=checkbox]):not([type=radio]):not([type=image]), textarea, select {
	/*-webkit-appearance:none;
	border: 1px solid silver;*/
	border-radius: 5px !important;
	/*border: 3px solid lightgray;*/ /* removed so .emphasize_div could have border without making them !important - which would not let js render the fields required in case of invalid - that is, with red border */
	/*color: cadetblue;*/
	color: #244e70;
	/*-webkit-appearance: none; -moz-appearance: none;*/
	/*display: block;*/
	/*margin-bottom: 20px;*/
	width: 100%;
	height: 50px;
	line-height: 40px;
	font-size: 20px;
	font-weight: bold;
	padding-left: 10px;
	width: 100%;
	padding-right: 10px;
	box-sizing: border-box;
}

[upload_spv] input[type="submit"] {
	background: none!important;
	border: none;
}

img[uploaded_to_spv], [upload_spv] input[upload_to_spv] {
	transform: rotate(270deg);
	vertical-align: middle;
}

img[uploaded_to_test_spv] {
	vertical-align: middle;
}

img[downloaded_from_spv] {
	transform: rotate(90deg);
	vertical-align: middle;
}

textarea {
	font-weight: normal;
}

input[type="email"], input[type="password"] {
	padding-left: 10px;
}

textarea:focus {
	outline: none;
	border-width: 4px;
}

.small_input {
	font-size: inherit !important;
	font-weight: initial !important;
	height: 30px !important;
	width: 120px !important;
}


select[name="idLocation"] option:hover {
	background-color: #e1e0e0 !important;
}



.password_eye {
	width: 24px;
	height: 24px;
	display: inline-block;
	position: absolute;
	top: 12px;
	right: 12px;
	vertical-align: middle;
	cursor: pointer;
}




.wd H2 {
	margin-top: 150px;
}

.cw H2 {
	FONT-SIZE: 12pt;
	color: #073C68;
	margin-bottom: 10px;
}

.cw H3 {
	font-weight: bold;
	margin: 10px 0 5px;
	padding: 0 0 5px;
	border-bottom: 1px solid var(--carta_H1_color);
	color: var(--carta_H1_color);
}

A {
	TEXT-DECORATION:none;
	color: var(--carta_links_color);
}

A:ACTIVE, A:HOVER, A:FOCUS {TEXT-DECORATION:underline;}

.no_bold {font-weight: normal;}

A.button/*:link, A.button:visited*/ {
	color: #663300;
	font-weight: bold;
	/*display: inline-table;*/
	display: block;
	/*width: 120px;*/
	text-align: center;
	line-height: 28px;
	/*margin-top: 8px;*/
	-moz-border-radius: 5px;
	border-radius: 8px;
	border: 3px solid #95b7dd;
	background-color: #e0edfd;
	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e0edfd), to(#b5d7fd));
	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, #e0edfd, #b5d7fd);
	/* Firefox 3.6+ */
	background: -moz-linear-gradient(top, #e0edfd, #b5d7fd);
	/* IE 10 */
	background: -ms-linear-gradient(top, #e0edfd, #b5d7fd);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, #e0edfd, #b5d7fd);
	font-size: 1.1em;
	font-weight: bold;
	padding: 0 8px;
}

A.button:ACTIVE, A.button:HOVER, A.button:FOCUS  {
	background: #b5d7fd;
	text-decoration: none;
}

A.button *:not(img) {
	top: 0; left: 0;
	width: 100%;
	/*vertical-align: middle;*/
	/*display: table-cell;*/
}

A.button.disabled {
	background: -moz-linear-gradient(top, #e0edfd, #cacaca);
	color: slategray !important;
	/*pointer-events: none;*/ /* leave it deactivated so that it would show what still needs to be filled from the form on click */
}


/* disabled link - used to disable lauch engine and wss links in admin.engine.tpl */

a.disabled {
	pointer-events: none;
	color: silver;
}


/* cele comentate de mai jos sunt din fostul admin.css si interfereaza cu cele de mai sus originale pentru page.tpl */

/*A.button:link, A.button:visited {
	color: #663300;
	font-weight: bold;
	display: block;
	width: 120px;
	text-align: center;
	line-height: 28px;
	margin: 8px 0 20px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	border: 2px solid #95b7dd;
	background-color: #e0edfd;
	background: linear-gradient(45deg, #e0edfd, #b5d7fd);
	font-size: 1.1em;
	font-weight: bold;
	padding: 5px;
}

A.button:ACTIVE, A.button:HOVER, A.button:FOCUS  {
	background: #b5d7fd;
	border:  2px solid #6688dd;
	text-decoration: none;
}

A.button * {
	top: 0; left: 0;
	vertical-align: middle;
}*/


A[itemprop="hasMap"]:hover, A[itemprop="hasMap"]:focus {
	text-decoration: none;
}




.send_buttons {
	 margin-top: 40px;
}

.send_button {
	 position: relative;
	 margin: 20px 0;
}

/* send button in contact form */
A.send_b {
	width: auto;
	padding: 16px 10px 16px 50px;
	background-image: url('https://static.carta.ro/photos/images/carta_bars.png'), linear-gradient(#e0edfd, #b5d7fd); /* left center no-repeat;*/
	background-position: left center;
	background-repeat: no-repeat;
	display: block; /* fill the whole width of the form */
}

A.send_b:ACTIVE, A.send_b:HOVER, A.send_b:FOCUS  {
	background-image: url('https://static.carta.ro/photos/images/carta_bars.png'), linear-gradient(#b5d7fd, #b5d7fd); /* left center no-repeat;*/
	background-position: left center;
	background-repeat: no-repeat;
	text-decoration: none;
}

/* when not all fields in the reservations form are filled then the button should be disabled */
A.send_b.disabled, A.send_b.disabled:ACTIVE, A.send_b.disabled:HOVER, A.send_b.disabled:FOCUS {
	background: url('https://static.carta.ro/photos/images/carta_bars.png'), lightgray; /* left center no-repeat;*/
	background-position: left center;
	background-repeat: no-repeat;
	border: 3px solid silver;
}



/* send_through_whatsapp button in contact form */
A.send_w {
	width: auto;
	padding: 16px 10px 16px 50px;
	background-image: url('https://static.carta.ro/photos/images/whatsapp.png'), linear-gradient(#e0edfd, #b5d7fd); /* left center no-repeat;*/
	background-position: left center;
	background-repeat: no-repeat;
	display: block; /* fill the whole width of the form */
}

A.send_w:ACTIVE, A.send_w:HOVER, A.send_w:FOCUS  {
	background-image: url('https://static.carta.ro/photos/images/whatsapp.png'), linear-gradient(#b5d7fd, #b5d7fd); /* left center no-repeat;*/
	background-position: left center;
	background-repeat: no-repeat;
	text-decoration: none;
}

/* when not all fields in the reservations form are filled then the button should be disabled */
A.send_w.disabled, A.send_w.disabled:ACTIVE, A.send_w.disabled:HOVER, A.send_w.disabled:FOCUS {
	background: url('https://static.carta.ro/photos/images/whatsapp.png'), lightgray; /* left center no-repeat;*/
	background-position: left center;
	background-repeat: no-repeat;
	border: 3px solid silver;
}

.or {text-align: center;}







/* link with text-decoration none */
A.tdn {text-decoration: none;}

.bold {font-weight: bold;}

A img {border: none;}

input radio {margin-left: 0px;}

/* if we set the font-size of input elements to be 16px or above, the onfocus zooming for mobile will stop */
/*input[type="text"] {font-size: 18px;} - nu functioneaza*/



#wrapper{
	text-align: center;
	padding: 0 250px;
}

.content {
	text-align: left;
	margin: auto;
	width: 865px;
	position: relative;
}

#p1 {position: absolute; left: 20px; top: 40px;}
#fb {position: absolute; left: 20px; top: 62px;}


/* for sorting - instead of links - they are attached to radion inputs */
label {
	cursor: pointer;
}

#lsm {
	font-size: 12px;
}

#lsm input {
	vertical-align: text-bottom;
}

/* image only in small.css - there's an img at the right of the selected sorting that is displayed only in small.css where the sorting tabs are hidden */
.ioisc {
	display: none;
}

/* only in small */
.o_i_s {
	display: none;
}


/*
 *
 * Horizontal Menus - done by CSS only
 *
 * 
 */

.hm {
	position: absolute;
	/*width: 195px;*/ /*old*/
	width: 250px;
	left: 0px;
	top: 150px;
	text-align: right;
	line-height: 26px;
	/*font-size: 14px;*/
	z-index: 1000; /* on top of the map - see https://beta.carta.ro/cazare-banat/ */
}

.hm ul {
	margin: 0;
}

.hm ul ul {
	visibility: hidden; /* hide all ul from menu */
	float: none; 
	position: absolute;
	left: 100%;
	top: -1px;
	border: 1px solid black;
	border-radius: 5px;
	box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
	/*width: 170px;*/
	width: max-content; /* accommodate all the width of the text */
	min-width: 135px; /* for the situations where the name is too short */
	background: white;
	padding: 0; /* I don't know why but without this it has a left padding */
	transition: visibility .3s ease-out .3s; /* these transition properties apply on "mouseout" */
}

/* when a li is hovered then unhide the ul within */
.hm ul li:hover > ul {
	visibility: visible;
	transition: visibility .3s ease-out .3s; /* these transition properties apply on hover */
}

.hm ul li.liPOI:hover {background: white;}

/* .hover class is for touch devices - see functions.js - pai nu folosim asta doar in medium & small.css? */
/*.hm ul li.hover > ul {
	visibility: visible;
	transition: visibility .3s ease-out .3s; /* these transition properties apply on hover */
}*/

.hm ul:after {
	content: ""; clear: both; display: block;
}

.hm ul li {
	list-style: none;
	position: relative; /* will allow us to absolutely position the sub menus according to this main nav bar */
}

.hm ul li:first-child {
	padding-top: 5px;
}

.hm ul li:last-child {
	padding-bottom: 5px;
}

.hm ul li:hover {
	background: #E0E0E0;
}

.hm ul li:hover:first-child {
	border-radius: 5px 5px 0 0;
}

.hm ul li:hover:last-child {
	border-radius: 0 0 5px 5px;
}

.hm ul li:hover:only-child {
	border-radius: 5px 5px 5px 5px;
}

/* .hover class is for touch devices - see functions.js - pai nu folosim asta doar in medium & small.css? */
/*.hm ul li.hover {
	background: #E0E0E0;
}*/

.hm ul li a {
	padding: 0 2px 0 10px;
	text-decoration: none;
	display: block; /* this makes the whole containing li clickable :) */
}	

/* close horizontal menu div */
#clhmd {
	display: none;
}

/* close vertical menu div */
#clvmd {
	display: none;
}

/* explain search more div from location.display.vertical.navigation.tpl */
#e_s_m {
	padding: 30px 0 10px 10px;
}


/* explain search more specific from location.display.first.child.tpl */
#e_s_m_s {
	padding: 30px 0 10px 10px;
}

#e_s_m:hover, #e_s_m_s:hover, #i_u_c:hover {background-color: transparent;}

/* inscrie o unitate de cazare li */
#i_u_c {
	padding: 30px 0 10px;
}

#logo_fixed {
	padding: 0 0 50px;
	font-size: 36px;
	font-weight: 700;
	line-height: 48px;
	text-align: center;
}

#logo_fixed div { /* it's the location name div */
	color: #073C68;
	font-size: 36px;
	text-align: center;
}

.logo, #logo_fixed, #logo_up, .logo_admin, #nav_top, .c_f #logo, #c_n #logo2, .c_f #s_d, .c_f #c_n, .c_f #qrc, .c_f #r_d, #n_m, #c_n_h {
	font-weight: 700;
	font-style: normal;
	font-family: "Open Sans Condensed", open_sans_condensed;
	color: #565555;
}

.c_f #r_d {
	margin-bottom: 30px;
}

.c_f #qrc {
	line-height: 30px;
}

.c_f #qrc:first-letter {
	text-transform: uppercase;
}

.logo_admin {
	display: inline;
	font-size: 60px;
	font-family: carta;
	padding: 0 10px;
}

#logo_aa {
	position: relative; /* in order to position ,highlight_number inside it */
}

.logo_a {
	padding-left: 64px;
}

.admin_headers {
	margin: 10px 10px 0;
	position: relative; /* so that ddm would be positioned absolute insite it */
	max-width: 1142px;
	padding-left: 20px;
}

.admin_headers H2 {
	display: inline-block;
}

.admin_headers > div:not(.highlight_number) {
	display: inline-block;
	vertical-align: middle;
}



/*
 *
 * Vertical Menus - done by CSS only
 *
 * 
 * */


.vm {
	/*position: absolute;*/
	/*width: 195px;
	left: 0px;
	top: 150px;*/
	/*text-align: right;*/
	line-height: 20px;
	position: relative; /* in order to position .vm ul absolute to this */
	display: inline;
	white-space: nowrap;
}

.vm ul {
	padding: 0; /* I don't know why but without this it has a left padding - maybe the default from ul */
	margin: 0;
	z-index: 1; /* above page content */
	display: inline-table;
	visibility: hidden; /* hide all ul from menu */
	position: absolute; /* top and left are defined regarding the containing .vm which is positioned relative */
	top: 100%;
	left: 0;
	border: 1px solid black;
	box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
	background: white;
	transition: visibility .3s ease-out .3s; /* these transition properties apply on "mouseout" */
	/*z-index: 10;*/ /* so that it would clear the search options div */
	z-index: 1000; /* so that it would clear the search options div and be above openstreetmap */
}

.vm ul li {
	list-style: none;
	position: relative; /* will allow us to absolutely position the sub menus according to this main nav bar */
	white-space: nowrap;
	float: left;
}

.vm:hover > ul {
	visibility: visible;
	transition: visibility .3s ease-out .3s; /* these transition properties apply on hover */
}

.vm ul li {
	position: relative; /* will allow us to absolutely position the sub menus according to this main nav bar */
	float: none;
}

.vm ul:after {
	content: ""; clear: both; display: block;
}

.vm ul li:hover {
	background: #E0E0E0; /*#063;*/
}

.vm ul li a {
	padding: 0 10px;
	text-decoration: none;
	display: block; /* this makes the whole containing li clickable :) */
	color: #073C68;
	float: none;
}















.v_nav:hover {
	background-color: #e0e0e0;
	cursor: pointer;
}

#header {
	text-align: center;
	/*margin-top: 10px;*/
	/*margin-bottom: 20px;*/
}


#logo_up {
	background: url("https://static.carta.ro/photos/images/logo/carta_250.png") left no-repeat;
	/*font-family: carta;*/
	height: 80px;
	padding: 0 0 20px 110px;
	/*font-size: 68px;*/
	line-height: 170px;
	display: inline-block;
	width: 220px;
	position: relative;
}

#logo_up .link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

/* romanian tourism */
#rt {
	font-family: sans-serif;
	font-weight: 900;
	font-size: medium;
	padding-left: 200px;
	width: 300px;
	margin: 0 auto 5px;
	color: gray;
}

#path, #path A {
	padding-top: 20px;
	color: var(--carta_H1_color);
	font-size: 12px;
	min-height: 14px; /* to have the same height when, for country, there is no path displayed */
}

/*
green div in the center that contains almoust everything
- when we change dimension here the rest will follow but we also need to change the dimension of the background-image
*/
#gd {
	background: url('https://static.carta.ro/photos/images/winter.webp') center top no-repeat;
	padding-left: 35px;
	padding-right: 35px;
	width : 100%;
	box-sizing: border-box;
	min-height: 450px;
	padding-bottom: 10px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	/*border: 1px solid #006633;*/ /* DEPRECATED in 14.00.01 */
	position: relative; /* so we can position #buttons in client.display.full.tpl->main.css absolute to this */
	margin: 0 8px;
}

/* white div inside the green div that contains the main content - except for title and navigation */
/* must be a class in order to define the color of the links inside of it */
.wd {
	background-color: var(--carta_background_color);
	/*padding: 10px 0 0;*/
	/*color : #666666;*/
	color : var(--carta_text_color); /* starting in engine.10.03.00 */
	text-align: left;
	-moz-border-radius: 16px;
	border-radius: 16px;
	/*border: 1px solid var(--carta_H1_color);*/ /* DEPRECATED in 14.00.01 */
}

/* white div photo galery - like wd but wider in this css and 100% in the medium one */
/* nefolosita din engine.10.01.00 pentru ca folosim doar wd care umple toata latimea */
/*.wdpg {
	background-color: white;
	padding: 10px 0px 10px 0px;
	color : #666666;
	text-align: left;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid var(--carta_H1_color);
	width: 782px;
}*/

/* client content 1 - the content */
.cl1 {
	width: 796px;
	/*float: left;*/
}

/* client content 2 - the contact */
.cl2 {
	/*float: left;*/
	margin-left: 20px;
	width: 157px;
}

.vs {
	min-height: 320px;
}

.left {
	float: left;
}

#horizontal_navigation {
	/*width: 512px;*/
	width: 612px;
	height: 20px;
	overflow: visible;
}





#pc1 {
	margin-bottom: 10px;
}

#u_only {
	display: inline-block;
	margin-right: 10px;
}

#pc1 div, #u_only div {
	display: inline-block;
}

.wpcat {
	padding-right: 10px;
}

/* location horizontal navigation */
.lhn {
	height: 20px;
	overflow: visible;
	font-size: 12px;
}

/* location horizontal navigation start */
.lhns {
	float: left;
	height: 20px;
	width: 18px;
}

/* location horizontal navigation div */
.lhnd {
	float: left;
	padding-left: 9px;
	padding-right: 9px;
	height: 19px;
	line-height: 18px;
	/*overflow: hidden;*/
}

/* the mores div: this is exactly like lhnd - but in small.css the lhnd will not be displayed but mores will */
.lhndm {
	float: left;
	padding-left: 9px;
	padding-right: 9px;
	height: 19px;
	line-height: 18px;
	/*overflow: hidden;*/
}

.selected_lhnd {
	float: left;
	padding-left: 9px;
	padding-right: 9px;
	font-weight: bold;
	height: 20px;
	background-color: white;
	border-top: 1px solid var(--carta_search_border_color);
	border-left: 1px solid var(--carta_search_border_color);
	border-right: 1px solid var(--carta_search_border_color);
	line-height: 18px;
	color: var(--carta_H1_color);
	overflow: visible;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	position: relative;
	bottom: 0;
}

.selected_horizontal_navigation_div_f {
	float: left;
	padding-left: 5px;
	padding-right: 5px;
	font-weight: bold;
	height: 19px;
	background-color: #3b5998;
	border-top: 1px solid var(--carta_H1_color);
	line-height: 18px;
}

/* location horizontal navigation end */
.lhne {
	padding-left: 15px;
	height: 19px;
	line-height: 18px;
	overflow: hidden;
}




















/* for features we use the same horizontal navigation css classes as for location just with a different background color */
/*.fcss {background: rgb(255, 255, 204);} - de sters */


.sf {
	border: 1px solid var(--carta_search_border_color) !important; /* to override .wd border */
}


/* search features div - inspired from admin edit_field_textarea - used for display facilities for search */
.sfd {
	overflow: auto;
	max-width: 717px;
	/*height: 150px;*/
	border-top: none;
	border-left: 1px solid #ffffcc;
	border-right: 1px solid #ffffcc;
	border-bottom: 1px solid #ffffcc;
	padding: 0 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

/* features examples - hidden in the small & medium css */
.fex {display: inline;}

/* features column - different in medium and small css */
.fc {
	width: 214px;
	display: inline-block;
	vertical-align: top;
}

/* features comlumn spacer - different in medium and small css */
.fcs {
	width: 30px;
	display: inline-block;
}

/* feature div - different in medium and small css */
/*.fd {
	width: 210px;
}*/


























.uwst {
	width: 139px;
	height: 1px;
	margin-left: 10px;
	background-color: var(--carta_H1_color);
	overflow: hidden; /* IE6 bug */
}

.uwsst {
	width: 20px;
	height: 20px;
	border-bottom: 1px solid var(--carta_H1_color);
}

.uws {
	float: left;
	height: 11px;
	width: 135px;
	overflow: hidden;
	background-color: white;
}

.uwss {
	float: left;
	height: 11px;
	width: 20px;
	overflow: hidden;
	background-color: white;
}

/* content white */
.cw {
	clear: left;
	float: left;
	/*width : 496px;*/
	width : 596px;
	min-height: 250px;
	background-color: white;
	border-left: 1px solid var(--carta_H1_color);
	border-right: 1px solid var(--carta_H1_color);
	padding-left: 12px;
	padding-right: 12px;
	color : #666666;
}

.cws {
	clear: left;
	width : 157px;
	background-color: white;
	border-left: 1px solid var(--carta_H1_color);
	border-right: 1px solid var(--carta_H1_color);
	color : #666666;
	text-align: center;
}

.cwss {
	clear: left;
	width : 23px;
	background-color: white;
	border-right: 1px solid var(--carta_H1_color);
	padding-left: 4px;
	padding-right: 4px;
	color : #666666;
	text-align: center;
}

/*for wide photo galery*/
.cwb {
	clear: left;
	float: left;
	/*width : 668px;*/
	width : 768px;
	background-color: white;
	border-left: 1px solid var(--carta_H1_color);
	border-right: 1px solid var(--carta_H1_color);
	padding: 10px 12px 0px 12px;
	color : #666666;
	text-align: center;
}

.dlw {
	width: 12px;
	height: 11px;
	background-image: url('https://static.carta.ro/photos/images/dlw.gif');
	clear: left;
	float: left;
	overflow: hidden; /* IE6 bug */
}

.dw {
	float: left;
	height: 10px;
	/*width: 499px;*/
	width: 599px;
	overflow: hidden;
	background-color: white;
	border-bottom: 1px solid var(--carta_H1_color);
}

.dws {
	float: left;
	height: 10px;
	width: 135px;
	overflow: hidden;
	background-color: white;
	border-bottom: 1px solid var(--carta_H1_color);
}

.dwss {
	float: left;
	height: 10px;
	width: 20px;
	overflow: hidden;
	background-color: white;
	border-bottom: 1px solid var(--carta_H1_color);
}

/*for wide photo galery*/
.dwb {
	float: left;
	height: 10px;
	/*width: 670px;*/
	width: 770px;
	overflow: hidden;
	background-color: white;
	border-bottom: 1px solid var(--carta_H1_color);
}

.drw {
	width: 12px;
	height: 11px;
	float: left;
	background-image: url('https://static.carta.ro/photos/images/drw.gif');
	overflow: hidden; /* IE6 bug */
}

.selected_fe {
	float: left;
	height: 20px;
	width: 4px;
	background-image: url('https://static.carta.ro/photos/images/sfe.gif');
}

.rightnp {
	float: left;
}







.wraptocenter, .red_wraptocenter {
	width : 120px;
	height : 120px;
	border: 1px solid transparent;
	/*float: left;*/
	/*margin: 5px;*/
	margin: 5px 15px 5px 15px;
	padding: 0px;
	/*display: table-cell;*/
	text-align: center;
	vertical-align: middle;
}

.wraptocenter *, .red_wraptocenter * {
	vertical-align: middle;
}

.wraptocenter span, .red_wraptocenter span {
	display: inline-block;
	height: 100%;
	width: 1px;
}

.wraptocenter:HOVER, .red_wraptocenter:HOVER {
	background: url('https://static.carta.ro/photos/images/all_arrows.png') center center no-repeat;
}


/* used for photos_new */
.red_wraptocenter {
	background: url('https://static.carta.ro/photos/images/small_pic_bkg_red.png');
}












.invisible {
	position: absolute;
	visibility: hidden;
	left: 0px;
	top: 0px;
	width: 0px;
	height: 0px;
}

.border_pic { /* this is made to width: 60px; in small.css */
	border: 1px solid #0099ff;
	background-color: #ffffff;
	padding: 3px 3px 3px 3px;
	box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
	cursor:pointer;
}

/* used for client and POI both in list and in info window - as of engine.9.07.00 we don't use it anymore for client list */
.border_pic_left {
	border: 1px solid #0099ff;
	background-color: #ffffff;
	padding: 3px 3px 3px 3px;
	/*float: left;*/ /* - we don't do this anymore because the leaflet.js info window dows not work well with float elements; instead we use `display: inline-block;` bellow */
	display: inline-block;
	vertical-align: top;
	margin: 0 30px 5px 0;
	box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
	max-width: 100px;
	max-height: 75px;
}

/* in small.css we don't want the first 4 imgages from client pages to have margin right so we define it here and cancel it in small.css */
.margined_pic {
	margin-right: 35px;
}



/* client display info window */

.cdiw {
	width: 400px;
}

.i_w_img {
	display: inline;
}

/* POI, client and locations info window - the div containing text at the right of the .border_pic_left img */
.i_w_div {
	/*float: left;*/ /* - we don't do this anymore because the leaflet.js info window dows not work well with float elements; instead we use `display: inline-block;` bellow */
	display: inline-block;
	max-width: 250px;
	/*margin-left: 20px;*/ /* scos in 20.05.05 */
}

.i_w_w {
	width: 400px;
}


.price {
	font-size: 3em;
	display: inline;
	font-weight: bold;
	font-family: "Open Sans Condensed", open_sans_condensed;
}

/* used in sort by rate and then -> rate.display.per.person.in.client.small.list.tpl */
.price_per_person {
	font-size: large;
	/*font-weight: bold;*/
	display: inline-block;
	margin-bottom: 5px;
}

.bottom {
	text-align: center;
	padding: 15px 0 0 0;
}

.date_field {
	width: 80px;
}

/* - le-am comentat pentru ca nu stiu unde apareau folosite si influenteaza toate ul si li
ul {
	padding-left: 10px;
	margin: 0px;
}

li {
	padding-top: 5px;
}*/

.ac{
	border: 0px;
	width: 9px;
	height: 9px;
}

.jqpopupmenu, .jqpopupmenu ul, .jqpopupmenu1, .jqpopupmenu1 ul{ /*topmost and sub ULs, respectively*/
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0;
	top: 0;
	list-style-type: none;
	background: white;
	border: 1px solid black;
	visibility: hidden;
	display: none; /*collapse all sub menus to begin with*/
	box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
	-webkit-box-shadow: 3px 3px 8px #818181;
	-moz-box-shadow: 3px 3px 8px #818181;
}


.jqpopupmenu li, .jqpopupmenu1 li{
	padding: 0;
	position: relative;
	clear: left; /* IE bug */
	width: 200px; /*width of menu (not including side paddings)*/
}

.jqpopupmenu li a, .jqpopupmenu1 a{
	display: inline-block;
	/*background: #F5F5F5;*/
	text-decoration: none;
	padding: 4px 5px;
	color: #073C68;
}

* html .jqpopupmenu li, * html .jqpopupmenu1 li{ /*IE6 CSS hack*/
	display: inline-block;
	width: 210px; /*width of menu (include side paddings of LI A*/
}

.jqpopupmenu li:hover/*, .jqpopupmenu li a:hover,.jqpopupmenu li.selected>a, .jqpopupmenu1 a:hover*/ {
	background: #e0e0e0;
	cursor: pointer;
}

.jqpopupmenu1 .b, .jqpopupmenu1 .e, .jqpopupmenu1 .selected_b, .jqpopupmenu1 .selected_e {
	display: none;
}

.jqpopupmenu1 .selected_horizontal_navigation_div, .jqpopupmenu1 .horizontal_navigation_div {
	border: 0;
	line-height: 1;
	margin: 0px;
	padding: 0 0 1px 0;
	float: none;
}

/* search form simple */
#sfs {
	display: none;
}

/* search form */
#sf {
	/*margin: 10px 0;*/
	padding: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #006600;
	background-color: var(--carta_H1_color);
	color: black;
	/*position: relative;*/ /* so that the sb would be positioned absolute relative to this sf */
	/*top: 10px;*/
	/*clear: both;*/
	display: inline-block;
	width: calc(100% - 22px);
}

#s_f {
	display: table;
	width: 100%;
}

/* search title */
#st {
	FONT-SIZE: 1.3em;
}

/* search query wrapper - needed to contain the padding so that sq would have width 100% in the small CSS */
#sqw {
	/*display: inline-block;*/
	/*margin: 10px 40px 0 0;*/
	/*vertical-align: bottom;*/
	position: relative; /* so that wait isrf would be positioned absolute relative to this sf */
	/*float: left;*/
	display: table-cell;
	/*padding-right: 10px;*/
	width: 100%;
}

/* search query */
#sq {
	/*width: 325px;*/
	/*width: calc(100% - 40px);*/
	height: 40px;
	color: gray;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #006600;
	FONT-SIZE: 20px;
	font-weight: normal;
	padding: 0 5px 0 40px;
	background: url('https://static.carta.ro/photos/images/find.png') no-repeat scroll 10px 7px;
	background-color: #FFFFCC;
	line-height: 30px;
	/*box-sizing: initial;*/ /* overwrite the defined input behaviour */
	/*margin-bottom: 0;*/ /* overwrite the defined input behaviour */
}

#sq:focus {
	outline: none;
}


#sosbw {
	display: table-cell;
	vertical-align: middle;
}


/* spacer */

#so_sp {
	display: table-cell;
	min-width: 10px;
}


/* search options button */
.sob {
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 2px solid gray;
	height: 34px;
	width: 80px;
	margin: 10px 0 0; /* engine.9.06.08: removed the 40px right margin */
	color: gray;
	/*font-size: 12px;
	font-weight: bold;*/
	background: url('https://static.carta.ro/photos/images/plus_options.png') no-repeat scroll 6px 7px;
	background-color: #FFFFCC;
	padding: 0px 5px 0px 38px;
	/*display: inline-block;*/
	position: relative; /* so that the absolute positioned span inside the link inside sob would refer to sob */
	display: table-cell;
	vertical-align: middle;
}

/* search options button expanded */
.sobe {
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	border-top: 2px solid #006600;
	border-right: 2px solid #006600;
	border-bottom: 0;
	border-left: 2px solid #006600;
	height: 45px;
	width: 82px;
	/*margin: 10px 0 0;*/ /* engine.9.06.08: removed the 40px right margin */
	color: gray;
	/*font-size: 12px;
	font-weight: bold;*/
	position: relative;
	background: url('https://static.carta.ro/photos/images/minus_options.png') no-repeat scroll 6px 7px;
	background-color: #FFFFCC;
	padding: 0px 5px 5px 38px;
	text-align: left;
	z-index: 2;
	display: table-cell;
	position: relative; /* so that the absolute positioned span inside the link inside sob would refer to sob */
}


/* search options button expanded in case results found */
.sobeirf {
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	border-top: 2px solid #006600;
	border-right: 2px solid #006600;
	border-bottom: 0;
	border-left: 2px solid #006600;
	height: 45px;
	min-width: 115px;
	margin: 10px 40px 0 0;
	color: #006600;
	font-size: 14px;
	font-weight: bold;
	position: relative;
	background: #FFFFCC;
	background-color: #FFFFCC;
	padding: 5px 0 0 5px;
	text-align: left;
	z-index: 2;
	display: table-cell;
}

/* search options div */
#sod {
	/*margin: 5px 0;*/
	-moz-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 0 5px 5px;
	border: 2px solid #006600;
	background-color: #FFFFCC;
	color: black;
	display: none;
	position: relative;
	top: -2px;
	z-index: 1;
	/*width: 100%;*/
	clear: left;
	font-size: 12px;
}

/* search options div wrapper - needed to contain the padding so that sod would have width 100% */
#sodw {
	padding: 10px;
}

#sbw {
	padding-left: 10px;
	display: table-cell;
	vertical-align: top;
}

/* search button */
#sb {
	border-radius: 5px;
	border: 2px solid white;
	width: 170px;
	height: 42px;
	/*margin: 10px 0 0;*/
	/*vertical-align: top;*/
	background-color: #0066FF;
	color: white;
	font-size: 18px;
	line-height: 18px;
	font-weight: normal;
	/*float: right;*/ /* introduced in engine.9.06.08 so that we could eliminate the 40px right margin from sob so that they would fit nice in a very small viewport - iphone5, safari */
	vertical-align: top;
}

#sba {
	color: white;
	margin: 0 auto;
	padding: 10px;
	height: 30px;
	display: block;
	text-align: center;
}

#sb::first-letter {text-transform: uppercase}

#sb:hover {
	background-color: #0033FF;
}

/* instant search results frame */
#isrf {
	/*width: 370px;*/
	width: calc(100% - 2px);
	/*height: 40px;*/
	border: 1px solid gray;
	-moz-border-radius: 0 0 15px 15px;
	border-radius: 0 0 15px 15px;
	display: none;
	box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
	background: white;
	position: absolute;
	z-index: 2;
	/*overflow: hidden;*/
}

/* instant search result */
.isr {
	/*height: 46px;*/
	border-bottom: 1px solid silver;
	padding: 10px;
	color: grey;
	overflow: hidden;
	position: relative; /* used for CSS-ing the empty span (bellow) inside so that the link would fill the whole div - see README for engine.8.04.00 */
}


/* sort menu wrap */
#somw {
	padding-left: 10px;
	margin-top: 20px;
}

/* sort menu */
#sm {
	display: inline;
}

#lsm select {
	border: none;
	/*width: auto;*/
	width: 130px;
	background-color: floralwhite; /* white; */
	font-size: 16px;
	/*direction: rtl;
	text-align: left;*/
	border: 1px solid gray;
}

#lsm select option {
  /*direction:ltr;*/
  /*display: contents; - arata foarte, foarte frumos in firefox dar nicicum in chrome */
}

/* location offers count */
#ocnt {
	/*padding: 10px 1px 0 5px;*/
	display: inline;
}

#ocnt h2, #lcnt h2 {
	margin-top: 0;
	display: inherit;
	color: #555;
}

#lcnt h2 {
	padding-left: 10px;
	padding-top: 10px;
}

/* the sort div - make it inline to fit in one line with sme */
#lsm {
	display: inline;
}

/* the ones in the map as infowindows - used as of engine.9.05.00 for locations - should not have a bottom border */
.wd:not(.c_f_b) #map .isr {border: none;}

.wd:not(.c_f_b) #map .isr div {display: inline-block;}


/* needed for the popup info window */
.display_flex {
	display: flex;
}

.isr a span, .sob a span, .sobe a span {
	position:absolute; 
	width:100%;
	height:100%;
	top:0;
	left: 0;
}

/* instant search result see all */
.isrsa {
	height: 40px;
	/*border-bottom: 1px solid silver;*/
	padding-left: 10px;
	line-height: 40px;
	color: #3399FF;
	background-color: #EDEDED;
}

.isrsa a {
	color: #3399FF;
}

/* instant search result example */
.isre {
	height: 40px;
	border-bottom: 1px solid silver;
	padding-left: 10px;
	line-height: 40px;
	FONT-SIZE: 1.7em;
	color: gray;
}

.isr:hover, .isrsa:hover {
	background-color: #FFFFCC;
}

/* padding left and right 10px */
.plr10 {
	padding: 10px 0 0 10px;
}

.results {
	padding: 5px 0 0 5px;
	margin: 5px 5px 0 5px;
	/*background-color: var(--carta_H1_color);
	border: 1px solid #006600;
	-moz-border-radius: 10px;
	border-radius: 10px;
	color: black;*/
}

.locations_results {
	padding: 10px 0 10px 10px;
	color: #009140;
	font-size: medium;
}

.search_result_row {
	padding-left: 10px;
	line-height: 20px;
}

#desters_nefolosita_ribbon {
	clear: both;
	/*height: 20px;*/
	line-height: 19px;
	padding-bottom: 2px;
	text-align: center;
	color: #073C68;
}

#search_location {
	display: inline-block;
	font-size: 0.8em;
}
/*
.country_map {
	width: 772px;
	height: 350px;
	margin: 10px 0 10px 0;
	background-image : url('https://static.carta.ro/photos/images/carta_379.gif');
	background-position : center;
	background-repeat : no-repeat;
}*/

#languages {
	position: absolute;
	top: 0px;
	right: 0px;
	z-index:1;
	width: 210px;
	text-align: center;
	font-size: x-small;
}

#languages img {
	border: none;
}

/*#login {
	text-align: right;
	padding-right: 5px;
}*/

/* client small list */
.csl {
	/*font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;*/ /* introduced in engine.9.07.00 */
	font-family: 'Open Sans',sans-serif !important;
	line-height: 28px;
	FONT-SIZE : 17px; /* introduced in engine.9.07.00 */
	clear: left;
	padding: 50px 10px 10px;
	position: relative; /* to have the absolute positioned span inside fill up the whole cls div */
}


/* all the .csl except the first one of its type will have this (this is how :first-of-type is implemented for a certain class): */
.wd > .csl ~ .csl {
	padding-top: 100px;
}

/* fill up the whole csl div so that it would make it clickable */
a span.fill {
	position: absolute;
	top: 0; /* instead of width 100% and height 100% we set top, bottom, left, right and this way it covers even the paddin from csl */
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1; /* this way it workd even over the enhance div in small.css */
}

/*.csl:HOVER {background-color: #FFFFEE;}*/ /* DEPRECATED in 14.00.01 */

/* the read more link at the end of short text description in client.display.small.in.list.tpl -> {DISPLAY_TEXT} -> functions.php -> trim_text() */
.read_more {
	font-weight: bold;
}

.title {
	font-size: 2em; /* changed from medium to 2em with `.csl font-size: 17px` in engine.9.07.00 */
	font-weight: bold;
	padding: 0;
	/*color: #073C68;*/
	display: inline; /* so that quality would follow - introduced in engine.9.07.00 */
	font-family: "Open Sans Condensed", open_sans_condensed;
	color: var(--carta_text_color); /*#565555;*/
	padding-right: 10px;
}

.qlty {
	/*padding-left: 10px;*/
	paddig-right: 5px;
}

/* when we need to show in title distance to the main location */
.dst {
	font-family: "Open Sans Condensed", open_sans_condensed;
	color: #565555;
	font-size:12px;
	font-weight:normal;
	white-space: nowrap;
	display: inline;
}

.numbers {
	margin-top: 16px;
}

/* client address in small list */
.cadd {
	margin: 10px 0;
	font-style: italic;
}

/* client small list row - contains client small list left, text and right - it is not necessary here but it is necessary in small CSS */
.csl_row {
	display: table;
	width: 100%;
	margin-top: 5px;
}

/* client small list wrapper for the left and right divs - the image and the enhance - it does nothing in main.css but it helps in small.css that cslrrw which contains enhance would have the width only of csll which contains the img - in cases where the img is vertical and is not 100% width */
/*.cslwlr{
	border: 2px solid gray;
}*/

/* this is what will be used in small.css to setup aspect ratio - in main.css the aspect ratio is only for the csll (and not csll and cslr, img + enhance) */
/*.cslwlrc {
	border: 2px solid yellow;
}*/

/* client small list left - where the image is */
.csl_l {
	/*display: table-cell;*/ /* changed in engine.9.06.06 */
	/*width: 120px;*/ /* removed in engine.9.07.00 */
	/*height: 60px;*/ /* changed in engine.9.06.06 */
	float: left; /* new in engine.9.06.06 */
	/*min-height: 160px;*/ /* minimum before the image is loaded in js */
	/*background: url("https://static.carta.ro/photos/images/wait.png") center center no-repeat;*/

	margin: 0 10px 5px 0;
	width: 280px;
	max-width: 280px; /* this is to restrict width generated from php for the first client */
	max-height: 220px; /* this is to restrict height generated from php for the first client */

	box-sizing: border-box; /* with this, img is kept at 100% width but with including borders and padding, otherwise the img is 100% width and then padding and borders are applied */
	/*position: relative;*/ /* works with csllc - for aspect ratio of csll */
	/*border: 1px solid red;*/
	text-align: center;
	height: 220px; /* this needs to limit the height of the first client image that receives its height from client->display() - 19.14.00 */

	/*border: 1px solid silver;*/ /* this was used for tests in 19.14.00 */
	/*background-color: silver;*/ /* this was used for tests in 19.14.00 */
}

/* implement aspect ratio of csll */
/*.csll:before{
	content: "";
	display: block;
	padding-top: 56.25%;*/ /* initial ratio of 16:9*/ /* 75% for initial ratio of 4:3*/
/*}*/

/* content of csll - so that we would define an aspect ratio according to http://www.mademyday.de/css-height-equals-width-with-pure-css.html#outer_wrap */
/*.csllc {
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: center;
	border: 1px solid green;
}*/

/* image of client used in client list - introduced in engine.9.07.00 */
.csl_l img {
	border: 1px solid #0099ff;
	padding: 3px 3px 3px 3px;
	max-width: 280px;
	/*max-height: 210px;*/
	max-height: 100%; /* as .csl_l has a defined height, fill the whole height of the .csl_l - used for vertical images */
	vertical-align: bottom; /* without this it introduces a bottom padding between the img and the csll div */
	box-sizing: border-box; /* so that the padding included will fit into max-height */
	box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
}

.csl_l [previews] {
	overflow: auto;
	padding: 10px;
}

.csl_l [previews] [slide] {
	width: max-content;
	text-align: left;
}

.csl_l [previews] img {
	border: none;
	border-radius: 50%;
	object-fit: cover;
	width: 60px;
	height: 60px;
	margin-right: 3px;
}

/* client small list text */
.csl_t {
	/*display: table-cell;*/ /* changed in engine.9.06.06 */
	padding-left: 5px;
	text-align: justify;
	min-height: 10px;
	vertical-align: top; /* nu stiu de ce este nevoie de asta dar fara asta textul cade mai jos */
	display: table; /* new in engine.9.06.06 - without it, the middle text flows under the "undefined rate" text - for the same purpose we made .cslr min-height: 60px; - this is just in case I will change that min-height in the future */
	font-size: 17px;

	/*font-size: 0.8em;*/ /* DEPRECATED in 14.00.01 */

	top: -8px;
	position: relative;
}

/* client small list right */
.csl_r {
	/*display: table-cell;*/ /* changed in engine.9.06.06 */
	width: 128px;
	padding: 0 10px;
	text-align: center;
	vertical-align: top; /* nu stiu de ce este nevoie de asta dar fara asta textul cade mai jos */
	float: right; /* new in engine.9.06.06 */
	min-height: 60px; /* new in engine.9.06.06 - without it, the middle text flows under the "undefined rate" text - see explanation above for .cslt not flowing under .cslr */
	font-size: 0.8em;
}

/*.csl_r span {vertical-align: middle;}*/

/* client small list bottom - where the phones are displayed */
.csl_b {
	clear: left;
	margin-top: 5px;
}

#price {
	font-size: xx-large;
}

/* phones in small client */
.psc {
	color: var(--carta_green);
	padding-top: 5px;
}

/* phones in client full */
.phones {
	background-image: url("https://static.carta.ro/photos/images/cellphone.png");
	background-repeat: no-repeat;
	background-position: left center;
	margin: 17px 0 20px;
	/*padding-bottom: 25px;*/
	padding-left: 40px;
	min-height: 30px;
	color: #009140;
	font-size: 1.3em;
	font-weight: bold;
	/*border: 1px solid red;*/
	/*text-align: right;*/
}

/* phone numbers */
.phones A, .psc A {color: var(--carta_green);}

.places {
	background-image: url("https://static.carta.ro/photos/images/bed.png");
	background-repeat: no-repeat;
	margin: 20px 0 7px;
	padding-left: 30px;
	min-height: 30px;
	color: #009140;
	font-size: 1.3em;
	font-weight: bold;
	/*line-height: 30px;*/
}

/* for restaurans or conference rooms don't display beds but people */
.not_beds {
	background-image: url("https://static.carta.ro/photos/images/people.png");
}

.location_map {padding: 10px 10px 5px 10px; float:left;}

.location_POIs {padding: 5px 10px 5px 0; /*float:right;*/}

/* location POIs explanation - nefolosita anymmore */
/*.lPe {float: left; width: 80px; margin: 10px 0; text-align: right;}*/

/* POI picture */
.Pp {
	border: 1px solid silver;
	-moz-border-radius: 5px;
	border-radius: 5px;
	float: left;
	margin: 8px 0;
}

.f_icon {
	vertical-align: text-top;
	z-index: 1;
	top: -5px;
	position: relative;
	/*margin-right: 5px;*/
}

.t100 {display:inline-block; width: 110px;}

/* map trigger */
#mt {float: left;}

/* simple map wrapper */
.smw {
	width: 225px;
	height: 65px;
	position: relative;
	overflow: hidden;
	float: left;
	border: 1px solid silver;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/* simple map */
.sm {
	width: 225px;
	height: 165px;
	position: relative;
	top: -50px;
	background-image: url('https://static.carta.ro/photos/images/carta_100_ne.gif');
	background-repeat: no-repeat;
	background-position: center;
	float: left;
}

/* simple map explanation */
.sme {
	float: left;
	margin: 0 10px;
	width: 170px;
	height: 65px;
	position: relative; /* so that load more link would be positioned absolute */
}


/* location map: it is inside .wd, just like the #map in client, just not inside .c_f_b (client full body) */

.wd:not(.c_f_b) #map {
	max-height: 50vw;
	/*background-image: url('https://static.carta.ro/photos/images/CARTA_240.png');*/
	/*background-position: center;
	background-repeat: no-repeat;*/
	/*display: none;*/
	/*clear: both;*/
	/*margin-bottom: 10px;*/
	/*z-index: 0;*/
	border-radius: 10px 10px 0 0;
	height: 400px; /* a really high number so that it would be maxed by max-height and thus reserve that height in the layout in order to avoid layout shift */
}

#mobile_map {
	display: none;
}

#mobile_map img {
	border: 1px solid silver;
	border-radius: 5px;
}

#mobile_map div {
	display: table-cell;
	vertical-align: middle;
	padding-right: 10px;
}

/* this next class is added on one finger touchstart on map in maps.js */
.swiping::after {
	content: 'Folosiți două degete pentru a mișca harta';
	color: #fff;
	text-align: center;
	font-size: 24px;
	font-weight: 300;
	justify-content:center;
	display: flex;
	align-items: center;
	padding: 15px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	pointer-events:none;
} 

#map_explanation {
	/*max-width: 300px;*/
	/*background: white;*/
	/*border-left: 1px solid black;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-right: none;
	border-radius: 5px 0 0 5px;*/
	position: absolute;
	/*display: inline;*/
	/*top: -350px;
	margin: 0 0 -36px auto;*/
	/*padding: 4px 2px 2px 28px;
	background-image: url('https://static.carta.ro/photos/images/close.png');
	background-position: 5px;
	background-repeat: no-repeat;*/
	/*background-color: var(--carta_H1_color);*/
	background-color: rgba(255,255,255,0.75);
	color: black;
	/*cursor: pointer;*/
	/*display: block;*/ /* to appear above openstreetmap */
	z-index: 10000; /* above openstreetmap */
	font-size: 12px;
	/*bottom: 0;*/
	width: calc(100% - 10px);
	padding: 0 5px;
	/*top: -2px;*/
	bottom: 0;
}

/*.leaflet-control-fullscreen {
	margin-top: 40px !important;
}*/

.POI_list {clear: both;}

.green {color: #006600;}






























.inline_div {display:inline;}

.align_right {text-align:right;}

/* green with top margin */
.gup {color: #006600; margin-top: 5px;}

/* representative rate in client */
.rrc {width: 128px; margin: 0 auto 5px;}

/* rrc today text */
.rrcd {
	line-height: 1.2em;
	font-size: .9em;
	margin-bottom: 15px;
}

/* a little different on tha map */
.marker .rrcd {
	display: none;
}

.marker .p_n_e, .marker .r_d_e {
	display: none;
}

.marker .rhf, .marker .r_n {
	display: inline;
}

/* but in the marker on the map we don't need this so: representative rate in client */
.marker .rrc {width: auto; margin: 0 0 10px 0;}

#rmcl2 {margin-left: 10px;}

.stats {/*width: 180px;*/ /*padding: 0 0 8px 0;*/ text-align: left;}

/* used in small POI img in instant search results display.location.link.5 */
.icon {max-height: 40px; margin-right: 10px; float: left; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid silver;}

/* used in small client img in instant search results display.client.as.search.result.tpl */
.icon1 {max-height: 40px; margin-right: 10px; float: left; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid silver;}

/* used for displaying taken text */
.red {color: #cc0000; font-weight: bold; white-space: nowrap;}

/* used for {TAKEN} in client.display.full.tpl */
.c_f_b .red {white-space: break-spaces;}

/* limited places text - for an offer*/
#lpl {
	FONT-SIZE:14px;FONT-WEIGHT:bold;color: #C00;margin: 0 0 15px 0;
}


.offer {
	word-break: break-word; /* this is needed because one client entered in an offer description a long url that would force the width to go beyond the viewport width on mobile */
}






#pcat {
	/*padding: 10px;*/
	margin-top: 10px;
	/*text-align: right;*/
	display: inline-block;
}


/* this is derived from .sob - search options button */
.pcatb {
	border-radius: 5px;
	border: 2px solid gray;
	color: gray;
	background-color: floralwhite;
	padding:5px;
	display: inline-block;
}

.pcatb:hover, .pcatb #more:hover, #sort_select:hover {
	background-color: #FFC;
}

.pcatb a:hover {
	text-decoration: none;
}

/* not in c_n and c_n_h - in client.display.full.tpl: */

#pcat .pcatb:not(:last-child) {
	margin: 5px 5px 5px 0;
}


/* but have a margin in c_n_h navigation menu in client.display.full.tpl: */

#c_n_h .pcatb {
	margin: 0 5px;
}

.pcatb #more {
	border: none;
	background-color: floralwhite;
	font-size: 22px;
	font-weight: bold;
	color: #c00;
	display: inline-block;
	height: 25px;
	width: 50px;
	vertical-align: bottom;
}

.pcatb #more option:not(:first-child) {
	font-size: initial;
}

/* enhance offer div wrapper in location horizontal menu */
.enhodw {
	color: #c00;
	font-size: 22px;
	margin-top: 5px;
}

/* display the span containing ":" - that will be made invisible in medium.css */
.enhodw span {display: inline;}

/* don't display the arrow img - that will be made visible in medium.css */
.enhodw img {display: none;}

/* enhance offer div wrapper in client */
.enhodwc {
	color: #c00;
	margin: 10px 0;
	font-size: 14px;
}

/* enhance offer div in location horizontal menu */
.enhod {
	display: inline;
	white-space: nowrap;
}

/* enhance offer in location horizontal menu */
.enho {
	font-size: 22px;
	font-weight: bold;
	color: #c00;
	vertical-align: bottom;
}

/* enhance offer in client */
.enhoc {
	font-size: 14px;
	font-weight: bold;
	color: #c00;
}

.enhod a:hover {text-decoration: none;}


/*
 *
 * back to top arrow
 * 
 * .back-top-menu is found in location.tpl
 * 
 * .back-top-page is found in page.tpl
 * 
 */

.back-top-menu, .back-top-page {
    position:fixed;
    bottom:68px;
    right: 10px;
    display:none;
	cursor: pointer;
}

.back-top-menu {
    width:25px;
    height:25px;
	border: 1px solid gray;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: url('https://static.carta.ro/photos/images/top.png') silver;
	opacity: 0.7;
	transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	transition-property: background-color;
	-webkit-transition-property: background-color;
}

.back-top-menu:hover {
	background: url('https://static.carta.ro/photos/images/top.png') gray;
}

/* login 2 in location.display.vertical.navigation.tpl - visible only in small.css because login div is hidden there */
.login_2 {
	display: none;
}



















/*
 * 
 * 
 * 
 * 
 * Different Sections in display.client.full.tpl
 * 
 * 
 * 
 * 
 * 
 */

/* client full */
.c_f {
	font-size: 16px;
}

/* client full header in client.display.full.tpl */
.c_f_h {
	padding: 10px 0 5px;
}

/*.c_f_h h1, .c_f_h div, .c_f_h a, .c_f_h #path {
	color: #565555;
}*/


.rating_img {
	height: var(--rating_img_height);
	background-size: contain;
	vertical-align: middle;
}

#logo2 .rating_img {
	height: var(--logo2_rating_img_height);
	margin: 20px auto;
}

span:has(.rating_img) {
	vertical-align: middle;
}

.c_f_h {
	color: var(--carta_H1_color);
}

.c_f_h div {
	display: inline;
}

.c_f_h h1 + div {
	display: block;
}

.c_f_h h1 div {
	display: inline-block;
}

.c_f_h #path {
	padding-top: 0;
	padding-bottom: 5px;
}

/* client full body */
.c_f_b {
	/*font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;*/
	font-family: 'Open Sans',sans-serif !important;
	line-height: 28px;
	/*font-size: 1.030775em !important;*/
	font-size: 17px;
}

/* every imediate div under c_f_b except those that have the class n_p (no padding) */
.c_f_b > div:not(#c_f_phg):not(.circles) {
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 50px; /* margin and not padding because map would fill the padding */
}






/* PHOTO GALLERY */


/* client full photo gallery */

#c_f_phg {
	display: flex;
}

#big_img {
	overflow: hidden;
	position: relative;
	border: none;
	flex: 1 1 auto;
	padding: 10px;
	max-height: 75vw; /* for clients that have the first picture vertical */
}

/* this is used only to spread #big_img to the aspect ratio of the first photo of the client and thus make it visible and reveal .all_img */
#first_img {
	max-width: 100%; /* this is for when we will have pictures wider than the design */
	/*height: 480px;*/
	/*max-height: 100%;*/
	/*visibility: hidden;*/ /* 20.06.15 */
	display: block; /* this way #big_img wrapps arround #first_img */

	/* the lines bellow will keep the aspect ratio of the div within this one fixed - it fixes the wrong behaviour that happens when the first picture is ultra-wide - see README for 10.08.00 */
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-bottom: 75%; /* 4:3 */
}

/* the lines bellow will keep the aspect ratio of the img within fixed - it fixes the wrong behaviour that happens when the first picture is ultra-wide - see README for 10.08.00 */
#first_img > div {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

/* this empty span before each img makes it vertically centered inside all_img div */
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.all_img {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
}

/* the reason imgs are not directly in .all_img but in these divs is so that each img would be centered inside a container that has the same size as #big_img */
.all_img div {
	position: absolute;
	width: 100%;
	height: 100%;
	/*background: url("https://static.carta.ro/photos/images/wait.png") center center no-repeat;*/
}

/* in order to have img vertically aligned inside .all_img we have to have this and then img to be display: inline-block; and vertical-align: middle; */
.all_img div:before {
    content: ' ';
    width: 0;
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

.all_img div img {
	display: inline-block;
	vertical-align: middle;
	/*max-height: 100%;*/
	/*max-height: calc(100% - 15px);*/ /* this made that images were not displayed anylonger in chrome 77 (74 was ok) */
	max-width: 100%;
	image-orientation: from-image;
}

.all_img img, .c_f_b #map, #panorama {
	max-width: 100vw;
	border-radius: 4px;
	/*border: 1px solid #0099ff;*/
	box-shadow: 3px 3px 5px #818181;
	box-sizing: border-box;
}

.all_img #main {
	/*position: relative;*/
	height: 100%; /* fit-content; was not doing the job */ /* see README for engine.10.06.11 */
	top: 50%;
	transform: translate(-50%, -50%);
	left: 50%;
}

.all_img #left {
	right: 100%;
	top: 0;
}

.all_img #right {
	left: 100%;
	top: 0;
}


.img_arrow {
	width: 60px;
	position: relative;
	z-index: 1;
	text-align: center;
}

.img_arrow a {
	position: relative;
	top: 50%;
	margin-top: -25%;
	/*left: 6px;*/
}

.circles {
	text-align: center;
	padding: 0 10px;
}

.circles .circle {
	display: inline-block;
	height: 4px;
	width: 4px;
	/*border: 1px solid black;*/
	border-radius: 6px;
	margin: 0 1px;
	/*box-shadow: 0 0 1px black;*/
	background-color: gray;
}

.circles .active {
	background-color: var(--carta_H1_color);
	height: 8px;
	width: 8px;
	position: relative;
	top: 2px;
}





/* client navigation: links in top of the client page under photo gallery */
#c_n_old {
	font-weight: bold;
	color: #005E00;
	text-align: justify;
	margin: 0 10px;
}

/* this will spread #c_n which is justify aligned over the whole width of the line */
#c_n_old:after {
  content: "";
  display: inline-block;
  width: 100%;
}


#c_n/*, .c_f #buttons*/, .wd {
	background-color: var(--carta_background_color);
	border: 1px solid var(--carta_border_color);
	box-shadow: 0 0 10px var(--carta_border_color);
	border-radius: 16px;
	top: 200px;
	padding: 10px;
}

/* client navigation */
#c_n {
	position: absolute;
	top: 20px;
	left: -220px;
	width: 198px;
	padding: 10px;
	font-weight: bold;
	color: #005E00;
}

#c_n_h {
	display: none; /* made visible in wide.css */
	width: 100%;
	margin-left: -20px;
	font-size: larger;
}

#c_n_h div {
	text-align: center;
	flex: auto;
	padding: 0 5px;
}

#n_m {
	padding-left: 20px;
	line-height: 28px;
	font-size: larger;
}

#n_m A {
	display: block;
}

#n_m A:HOVER {
	font-size: x-large;
	text-decoration: none;
}

#n_m > div {
	margin-top: 16px;
}

#logo2 {
	opacity: 0;
}


/* this is used when a client has a very long title that does not fit into one row: */

#logo2 a {
	width: 100%;
	/*display: inline-block;
	text-overflow: ellipsis;
	overflow: hidden;*/
	word-wrap: break-word;
}

#logo {
	display: none;
}

.c_f #buttons #b_w {
	/*margin-top: 390px;*/
}

/*
@media only screen and (max-width:1340px) {
	#c_n {
		display: none;
	}

	#logo {
		display: block;
	}

	.c_f #buttons #b_w {
		margin-top: 0;
	}

	.c_f #buttons {
		top: 36px;
	}
}

@media only screen and (min-width:1340px) {

	#c_n_h {
		display: none;
	}

	.c_f #buttons {
		top: 440px;
	}
}
*/

.s_m {
	font-size: initial !important;
	padding-left: 75px !important;
	margin-top: -10px;
}

#logo A, #logo2 A {
	color: var(--carta_client_name_color);
}

#logo A:HOVER, #logo2 A:HOVER {
	text-decoration: none;
}









/* short description in client that contains number of rooms and address */
#s_d {
	font-weight: bold;
	color: #005E00;
}

/* this is the table that contains the rates: */
#rates {
}

.rate {color:#073C68; font-weight:bold;}

td[itemprop="season"] {
	padding-top: 30px;
	padding-bottom: 20px;
}

td[itemprop="season"] span {
	color: #005E00;
}
/*
td[itemprop="priceSpecification"] {
	padding-bottom: 40px;
}*/

div[rel-id="tarife"] td {
	vertical-align: baseline;
}

div[rel-id="tarife"] td[season] {
	padding-top: 80px;
}

div[rel-id="tarife"] td[hotelroom] {
	padding-top: 32px;
}

#policies {
	font-size: .8em;
	font-style: italic;
}

/* not used anylonger as far as I can see */
#policies div:not(:first-child) {
	margin-top: 20px;
}

#description {
	/*text-align: justify;*/
}

#features ul {
	-moz-column-count: 2;
	-moz-column-gap: 20px;
	-webkit-column-count: 2;
	-webkit-column-gap: 20px;
	column-count: 2;
	column-gap: 20px;
	list-style: none;
}

#features img {
	vertical-align: middle;
	padding: 2px;
}

#offers {
	text-align: justify;
}

div[itemprop="hasOfferCatalog"] {
	margin: 50px 0;
}


/* border and shadow for #map and #panorama are above together with .all_img img */

/* client map - inside client_full_body class */

.c_f_b #map, #client_form #map {
	width: 100%;
	height: 500px;
	max-height: 100vh;
	margin-top: 10px;
	z-index: 1; /* under photo gallery */
}

#panorama {
	width: 100%;
	height: 400px;
	max-height: 75vw;
	display: none;
}




#email_form input:not([type=checkbox]), #email_form textarea {
	/*-webkit-appearance:none;
	border: 1px solid silver;*/
	border-radius: 5px;
	border: 3px solid lightgray;
	/*color: cadetblue;*/
	color: #244e70;
	-webkit-appearance: none; -moz-appearance: none;
	/*display: block;*/
	margin-bottom: 20px;
	width: 100%;
	height: 50px;
	line-height: 40px;
	font-size: 20px;
	font-weight: bold;
	padding-left: 10px;
	width: 100%;
	box-sizing: border-box;
}

#email_form textarea {
	height: 200px;
	font-weight: normal;
	font-family: inherit;
}

#email_form input[type=checkbox] {
	transform: scale(1.4);
	margin-right: 20px;
}


/* s_c_s_b_e: security check - should be empty */

#email_form input[type="text"]#s_c_s_b_e { display: none; }


#email_form input:focus {
	background-color: lightblue;
}

#email_form label:not(#d1 label) {
	color: gray;
}

#email_form H3 {
	text-align: left;
	padding-top: 30px;
	color: chocolate;
}

#ask_l H3 {
	padding-top: 10px;
	color: chocolate;
}

#ask_l div {
	font-size: 18px;
	margin-top: 20px;
}

/* centered text above the calendar */
.cal_c {
	text-align: center;
	padding: 10px;
	color: #244e70;
	font-weight: bold;
}

#email_form #d1_w {
	margin: 60px 0 40px;
	font-size: 18px;
}

#email_form #d1 {
	display: table;
	margin: 0 auto 20px;
}

#email_form #d2 {
	font-size: 18px;
	margin: 60px 0 40px;
}

#email_form #d1>div, #email_form #d2>div {
	margin: 30px 0;
}

#email_form #d1>div {
	display: table-row;
}


#email_form #d1>div>div:first-child, #email_form #d2>div>div:first-child {
	/*width: 170px;*/
	text-align: left;
	/*margin-right: 10px;*/
	display: table-cell;
}

#email_form #d1>div>div, #email_form #d2>div>div {
	display: table-cell;
	vertical-align: middle;
	/*width: 220px;*/
	padding: 10px;
}

#email_form #d1>div div:nth-child(2) {
	white-space: nowrap;
}

#email_form #d1 input[type="button"], #email_form #d2 input[type="button"] {
	width: 50px;
	height: 50px;
	border-radius: 50px;
	font-size: 2em;
	/*padding: 0;*/
	margin: 0;
	vertical-align: middle;
	/*display: table-cell;*/
	/*padding: 10px;*/
	line-height: 0;
}

#email_form #d1 input[type="text"]/*, #email_form #d2 input[type="text"]*/ {
	width: 80px;
	text-align: center;
	margin: 0 10px;
	vertical-align: middle;
	display: inline;
}

#email_form #d2 div {
	text-align: left;
}

#email_form #d2 input[type="text"] {
	/*width: 300px;*/
	margin: 0;
	text-align: left;
}

#ef_d1 {
	float: left;
	width: 66%;
	padding-top: 20px;
	height: 80px; /* so that for a specific viewport width the #ef_d8 would not be split into two rows because d6 and d7 fit under d2 and d3 */
}

#ef_d2 {
	float: left;
	width: 50%;
}

#ef_d3 {
	float: left;
	width: calc(50% - 10px);
	margin-left: 10px;
}

#ef_d4 {
	float: right;
	width: 34%;
	text-align: center;
}

#ef_d5 {
	overflow: hidden;
	min-width: 300px;
	padding-top: 10px;
}

#ef_d6, #ef_d7, #ef_d8 {
	float: left;
	width: 33%;
}






.c_f #buttons {
	display: none;
	text-align: left;
	position: absolute;
	top: 440px;
	left: 100%;
	width: 200px;
	z-index: 1; /* 1000: in order to be above openstreetmap */
	bottom: auto;
}

.c_f #buttons div, .c_f #phones #logo div {
	/*padding-bottom: 30px;*/
	/*padding-left: 20px;*/
	/*display: inline;*/
	padding: 5px;
}

/* logo: we have it twice: in #buttons and in #phones */

.c_f #buttons #logo { /* this one in #buttons needs to be invizible so that js will make it visible */
	opacity: 0; /* this allows js to make it appear with a nice animation effect */
}

.c_f #buttons #logo img {
	margin-left: 10px;
}

.c_f #phones #logo {
	margin: 0 auto;
}

.c_f #logo div {
	padding-right: 20px;
}

.c_f .logo #zz {
	font-family: carta;
	font-size: 60px;
	text-align: center;
	padding-top: 5px;
}

.c_f #logo div:first-of-type {
	font-size: 18px;
	text-align: left;
}

.c_f #logo div:nth-child(4) {
	color: #073C68;
	font-size: 27px;
	text-align: center;
}

/* buttons wrapper - we introduce this div because we want the buttons to be horizontal in main.css and vertical in wide.css and narrower */
.c_f #buttons #b_w {
}

.c_f #buttons img {
	/*vertical-align: middle;*/
}

.c_f #buttons #call_button, .c_f #buttons #reservations_button {
    background-color: var(--carta_background_color);
	box-shadow: 0 0 3px var(--carta_buttons_border_color);
	border-radius: 30px;
	padding-left: 10px;
	margin-bottom: 20px;
	position: relative; /* in order to position span calss fill absolute inside */
}

.c_f #buttons #call_button {
	/*border: 2px solid #06b824;*/
}

.c_f #buttons #reservations_button {
	/*border: 2px solid darkcyan;*/
	width: 175px;
}

.c_f #buttons #call_button div, .c_f #buttons #reservations_button div {
	display: inline-flex;
	padding: 0;
	vertical-align: middle;
}

/* text in buttons */
.c_f #buttons #call_button div:nth-child(3), .c_f #buttons #reservations_button div:nth-child(3) {
	display: inline-block;
}

#b_w a {
	font-weight: bold;
	font-size: 15px;
	/*text-align: center;*/
}

.c_f #buttons a:hover, .c_f #buttons a:focus {
	text-decoration: none;
}

.c_f #buttons #reservations_button, .c_f #buttons #up {/*padding-left: 50px;*/ /*left: 136px;*/}

.c_f #buttons #up {
	padding-left: 0;
	margin-bottom: 20px; /* in order to have the same height as #reservations */
}

/*.c_f #buttons a {
	padding: 4px 10px;
	border-radius: 4px;
	box-shadow: 3px 3px 8px #818181;
	color: white;
	font-weight: bold;
}*/

.c_f #buttons #call_button, .c_f #buttons #reservations_button, .c_f #buttons #up {
	padding: 0 0 0 5px;
	width: calc(100% - 5px);
}

.c_f #buttons #call_button:hover, .c_f #buttons #reservations_button:hover {
	box-shadow: 0 0 10px var(--carta_buttons_border_color);
}


/* lateral calls - dispaly phone number instead of the old buttons that was displaying the p_c with phone numbers - that is still working but for mobile - this l_calls is only visible on wide desktop screens */

.l_calls {
	padding: 0;
	margin-bottom: 50px;
}

.l_calls>div {
	display: inline-block;
	padding: 0 !important; /* not to be overridden by .c_f #buttons div */
}

.l_calls>div:nth-of-type(2) {
	vertical-align: middle;
}

.l_calls .call_txt {
	width: 110px;
	color: var(--carta_calls_color);
	line-height: 28px;
	font-size: larger;
	font-weight: 700;
	font-style: normal;
	font-family: 'Open Sans Condensed', open_sans_condensed;
	margin-bottom: 10px;
	opacity: .7; /* it's the same color as the phone numbers so make this text a little lighter */
}

#b_w a[itemprop="telephone"] {
	color: var(--carta_calls_color);
}

.l_calls a {
	font-size: 18px !important; /* not to be overridden by #b_w a */
}


.c_f #buttons_s, #buttons_l {
	/* display: block; - there is no need for this as main.css comes in page.tpl AFTER superwide.css and, this is display: none in superwide.css but then, when window is under 1348px, superwide.css is not valid anymore and this becomes display: default;
	 * if we make this display: block then, as this comes in page.tpl AFTER superwide.css, this will ALWAYS have display: block and not have display: none when superwide.css is valid
	 */
	position: fixed;
	bottom: 10px;
	left: auto; /* cancel what was set in main.css */
	top: auto; /* cancel what was set in main.css */

	right: -80px;
	width: 150px;
	text-align: left;
	z-index: 5; /* in order to be above the map but under the photo_gallery.css->.background_div */
}

.c_f #buttons_s #call_button, .c_f #buttons_s #reservations_button, .c_f #buttons_s #up {
	border: none;
	padding-left: 10px;
	box-shadow: none;
	position: relative; /* in order to position span calss fill absolute inside */
}

/* since #call and #reservations have margin-bottom: 20px; from main.css, make it the same for #up */
.c_f #buttons_button_s #up {
		margin-bottom: 20px;
}

.c_f #buttons_s #call_button:hover, .c_f #buttons_s #reservations_button:hover {
	background-color: none;
}

.c_f #buttons_s div, .c_f #c_f_p #logo div {
	padding-left: 0;
}

.c_f #buttons_s #call, .c_f #buttons_s #reservations, .c_f #buttons_s #up {
	display: block;
}

/* QR Code */
#qrc {display: none;}

.c_f #logo, #c_n #logo2 {
	font-size: 36px;
	text-align: center;
	width: 200px;
	/*margin: 0 auto;*/
	margin-bottom: 30px;
}












/* client vertical navigation */
/* nu mai este folosit: .c_v_n {
	display: none;
	position: absolute;
	top: 50px;
	left: 100%;
	padding-left: 20px;
}*/

/* phones */

/* if we want content displayed in the center of the page then that content needs a p_c inside a p_w and then in js the function that does the trick is d_p() */

.p_w {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	display: none; /* in order for this to work as a wrapper, this will be made by js 'flex' - this is the whole secret of wrapping */
	align-items: center;
	z-index: 1;
}

/* close button for p_w - inserted in d_p() function in functions.js */
.p_w #x {
	position: absolute;
	right: 10px;
	top: 13px;
	z-index: 10;
}

/* popup content */
.p_c {
	display: none; /* this will be made visible in js with show() - nice effect */
	border-radius: 20px;
	padding: 0 16px;
	font-size: 32px;
	font-weight: bold;
	/*width: 75%;
	margin-left: 12.5%;*/
	margin: 0 auto;
	background-color: floralwhite;
	border: 3px solid cadetblue;
	text-align: center;
	position: relative; /* so that #x would position relative to this */
	max-height: 90vh; /* for when in landscape mode on mobiles */
	overflow: auto; /* for when in landscape mode on mobiles */
}

/* next code makes that the phones is scrolled while the x buttons stays */
.p_c #phones {
	position: absolute;
	top: 36px;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: auto;
}

/* client vertical navigation phones - disable click on phone number - enabled in medium.css */
.c_f #phones a[href^=tel] {
	pointer-events: none;
	cursor: default;
	color: maroon;
	/*color: #565555;*/
	line-height: 48px;
}

/* insert a new line after each link */
.c_f #phones a:after {
    content:"\a";
    white-space: pre;
}





/* visible only in small.css - NEFOLOSIT */
.vos {
	display: none;
}





/* navigation div - only for mobile */
#nav_top {display: none;}




/* gentle warning - used for when a client has no phones to let visitor know he can only contact by mail */
.g_wrn {
	color: maroon;
}















































.group_container A {
	FONT-SIZE: 17px;
}

.group_container A:link, .group_container A:visited {
	TEXT-DECORATION: none;
	COLOR: #663300;
	FONT-WEIGHT: bold;
}

.group_container A:ACTIVE, .group_container A:HOVER, .group_container A:FOCUS {
	/*TEXT-DECORATION: underline;*/
	color: #cc3300;
	FONT-WEIGHT: bold;
}

.group_container A.nobold:link, .group_container A.nobold:visited {
	TEXT-DECORATION: none;
	COLOR: #663300;
	FONT-WEIGHT: normal;
}


.group_container A.nobold:ACTIVE, .group_container A.nobold:HOVER, .group_container A.nobold:FOCUS {
	TEXT-DECORATION: underline;
	color: #cc3300;
	FONT-SIZE: 12px;
	FONT-WEIGHT: normal;
}


div[rel="invoice_for_this_series"] A {color: var(--carta_dark_blue) !important; font-weight: normal !important;}

div[rel="invoice_for_this_series"]:hover {background-color: #ececec;}

[rel="invoice_for_this_series"] img, [rel="invoice_for_this_contract"] img {
	vertical-align: middle;
}




.group_container A img {text-decoration: none;}

.group_container A img {border: none;}

#logo_img {
	margin: 10px 0 0 10px;
}

/* the horizontal menu appears both in default and admin css */

.horizontal_navigation_div {
	float: left;
	padding-left: 15px;
	padding-right: 15px;
	border-bottom: 1px solid silver;
	border-top: 1px solid white;
	font-weight: bold;
	font-size: 1.4em;
	line-height: 28px;
	height: 29px;
}

.selected_horizontal_navigation_div {
	float: left;
	padding-left: 20px;
	padding-right: 20px;
	border-left: 1px solid silver;
	border-top: 1px solid silver;
	border-right: 1px solid silver;
	font-weight: bold;
	font-size: 1.4em;
	line-height: 28px;
	height: 30px;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	background-color: #FFFFFF;
}

#horizontal_spacer {
	border-bottom: 1px solid silver;
	font-weight: bold;
	font-size: 1.4em;
	line-height: 28px;
	height: 30px;
	overflow: hidden;
}



























/* drop down menu */

.ddm {
	/*position: absolute;*/
	/*left: 20px;*/
	/*top: 20px;*/
	/*z-index: 10;*/
	font-size: larger;
}

.ddm ul, .ddm  li {
	list-style-type: none;
	/*margin: 10px 0;*/
	padding: 0;
}

.ddm a {
	display: block;
	padding: 8px 10px;
	color: #666;
	text-decoration: none;
}

.ddm > ul {
	text-align: left;
	/*margin-right: 10px;*/
	margin: 0;
}

.ddm > ul > li {
	width: 64px;
}

.ddm > ul > li > ul {
	max-width: calc(100vW - 10px);
	display: inline-block; /* so that it would wrap around the inner li which will be also inline-block with nowrap */
	margin-top: 24px;
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.15s ease-out;
	border: none;
	border-radius: 10px;
	box-shadow: none;
	margin-left: -17px;
	background-color: white;
	text-align: left;
	margin-right: -10px;
	left: 20px;
	position: relative;
	z-index: 10;
}

.ddm > ul > li > ul > li {
	display: inline-block;
	white-space: nowrap;
	width: 100%;
	padding: 10px 0;
}

/*.ddm > ul > li:before {
	content: url(https://static.carta.ro/photos/images/dd_menu.png);
}*/

.ddm > ul:before {
	content: url(https://static.carta.ro/photos/images/dd_menu.png);
}


/* because we want the behaviour on touch to be different than the behaviour on mouse devices (that is the second touch on the menu would not remove the hover on touch devices) that is why we cannot rely purely on CSS so, instead of :hover, we will use a .hover class and then js in admin.js->trigger_ddm() */

/* this is pure CSS for devices with mouse */

@media(hover: hover) and (pointer: fine) {

	.ddm ul:hover li ul {
		max-height: 800px;
		transition: max-height 0.25s ease-in;
		border: 1px solid silver;
		box-shadow: 1px 1px 5px silver;
	}

	.ddm ul li[down] {
		margin-bottom: 10px;
	}

	.ddm ul li[up] {
		margin-top: 20px;
	}

	.ddm li:hover {
		background: #E2F1FF;
	}

	.ddm li:last-of-type:hover {
		border-radius: 0 0 10px 10px;
	}


	/* but not the first one :) */

	.ddm > ul > li:hover {
		background: white;
	}

	.ddm li[header] {
		border-bottom: 1px solid silver;
		padding: 20px 10px;
		font-family: "Open Sans Condensed", open_sans_condensed;
	}

	.ddm li[header]:hover {
		background: white;
		border-radius: 10px 10px 0 0;
	}

}


/* this is the version for touch devices which will use js trigger of the menu in admin.js->trigger_ddm() */

.ddm.hover ul li ul {
	max-height: 800px;
	transition: max-height 0.25s ease-in;
	border: 1px solid silver;
	box-shadow: 1px 1px 5px silver;
	left: 20px;
	position: relative;
	z-index: 10;
}

/*.ddm.hover > ul > li:before {
	content: url(https://static.carta.ro/photos/images/ddm_close.png);
}*/

.ddm.hover > ul:before {
	content: url(https://static.carta.ro/photos/images/ddm_close.png);
}

.ddm ul li[down] {
	margin-bottom: 10px;
}

.ddm ul li[up] {
	margin-top: 20px;
}

.ddm li:last-of-type:hover {
	border-radius: 0 0 10px 10px;
}


.ddm li[header] {
	border-bottom: 1px solid silver;
	padding: 20px 10px;
	font-family: "Open Sans Condensed", open_sans_condensed;
}

.ddm li[header].hover {
	background: white;
	border-radius: 10px 10px 0 0;
}

.ddm.hover {
	width: 100% !important;
	height: calc(100vH - 30px);
}























.modules {
}

.module {
	border-radius: 5px;
	border: 1px solid silver;
	margin: 20px;
	display: inline-block;
	vertical-align: top;
	/* in viitor vreau sa fac un max-width: calc(100vw - 44px); asta dar acuma n-am avut rabdarea sa testez toate implicatiile - am observat spre exemplu ca galeria foto se incarca si "umfla" tot modulul parinte */
}

.module[minW950] {
	min-width: 950px;
}

[fillWidth] {
	width: -moz-available; /* firefox */
	width: -webkit-fill-available; /*chrome*/
}

.module[yearWidth] { /* this is for yearly income */
	max-width: calc(100vw - 510px) !important;
}

/* .module within .module: in admin.report.select.tpl */
.module .module {
	padding: 10px;
	display: inline-block;
	/*max-width: 600px;*/
	max-width: min-content;
}

#client_main.module:nth-of-type(1) {
	width: 800px; /* so that photo gallery and other modules would not push the module which is on the right down by occupying the whole width - cancelled in wide.css */
}

.module#client_second {
	max-width: 300px; /* this is the module on the right side in adminPanel */
}

#client_second {
	top: 153px;
}

#preview.module:nth-of-type(3) {
	border: 1px solid silver;
	border-radius: 10px;
	padding: 10px;
	margin: 20px 0 0 20px;
	/*left: 0;*/
	width: calc(100% - 1180px);
	height: calc(100vh - 260px);
	position: fixed;
	right: 6px;
}

@media only screen and (max-width:1540px) {
	#preview.module:nth-of-type(3) {
		display: none;
	}
}

.module:nth-of-type(3) iframe {
	border: none;
	width: 100%;
	height: 100%;
}

.module_client {
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid silver;
	/*float: left;*/
	margin: 20px;
	max-width: 870px;
	padding-bottom: 10px;
}

.module_save_1 {
	/*clear: left;
	float: left;*/
	/*margin-left: 20px;*/
	line-height: 24px;
	margin-top: 50px;
}

.module_save_2 {
	/*float: left;*/
	margin: 20px;
	position: fixed;
	left: 900px;
	line-height: 24px;
	bottom: 0;
	top: 177px;
	overflow: auto;
}






.tabelize, [tabelize] {
	display: table;
	width: 100%;
}

.tabelize>div[header], .tabelize>div[bold], [tabelize]>div[header], [tabelize]>div[bold] {
	font-weight: bold;
}

.tabelize>div[red], [tabelize]>div[red] {
	color: var(--carta_magenta);
}

.tabelize>div, [tabelize]>div {
	display: table-row;
}

.tabelize[color_rows_on_hover]>div:hover, [tabelize][color_rows_on_hover]>div:hover {
	background-color: #f0f0f0;
}

.tabelize>div>div, [tabelize]>div>div {
	display: table-cell;
	padding: 10px;
	/*max-width: calc(100vw / 5);*/
}

.tabelize>div>div:first-child, [tabelize]>div>div:first-child {
	text-align: right;
}

.tabelize>div>div:nth-child(odd), [tabelize]>div>div:nth-child(odd) {
	/*font-weight: bold;*/
}

.tabelize div>div:nth-child(even), [tabelize] div>div:nth-child(even) {
}


/* maximum 7 characters - used in admin.payments.tpl */

.tabelize [only7chars] {
	max-width: 7ch;
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	text-overflow: ellipsis;
}






/* this is visible only in admin.small.css */
.insmall, .insmall_inln {
	display: none;
}

.module_title {
	text-align: left;
	/*font-weight: bold;
	font-size: medium;*/ /* - commented because it is defined together with H3 in common.css */
	background-color: #E2F1FF;
	padding: 5px 10px 5px 20px;
	/*clear:both;*/
	/*-moz-border-radius: 5px 5px 0 0;*/
	margin-top: 0; /* needed because it has definitions together with H3 - which has a top margin from the browser */
}

.module_title:first-child {
	border-radius: 5px 5px 0 0;
}

.module_content {
	padding: 5px;
	line-height: 40px;
	/*margin-top: 25px;*/
}

.group_container { /* without this we cannot position absolute to this one the .group_header_spacer_visible */
	/*clear: left;
	float: left;*/
	position: relative; /* needed so that the absolute .group_header_spacer_visible will position relative to this one which needs to be different than the default static */
	margin-top: 30px;
}

.group_header {
	font-weight: bold;
	margin-top: 20px;
	padding: 0 10px 0 10px;
	height: 16px;
	display: table; /* makes it that in admin.small.css the title which goes on two lines would push the rest down */
	border: 1px solid;
	border-color: transparent;
	padding-top: 8px;
}

.reservation .group_header.expanded, .reservation .group_visible {
	/*margin-top: 0;*/
	background-color: white;
}

.group_container.reservation:hover {
    background-color: beige;
}

.reservation .group_header img {
	vertical-align: bottom;
}

.w_icon {
	vertical-align: middle !important; /* to override .reservation .group_header img */
    opacity: .3;
}

/* insert the arrow as the first child in the group_header first link - we do that by inserting it before the span element */

.group_header > a > div {
	display: flex;
}

.group_header > a > div b {
	display: contents; /* without this, b's look wierd in small.css - because of the flex above: they try to fit like table-cells or something... */
}

.group_header > a > div > span {
	display: contents;
}
.group_header > a > div::before {
	content: url('https://static.carta.ro/photos/images/arrow.png');
	/*position: relative;
	top: 9px;*/
	margin-right: 10px;
	/*display: inline-block;*/ /* so that rotate would work */
	height: 32px;
}

.group_header.expanded > a > div::before {
	transform: rotate(90deg);
	transition: transform .3s;
}

.group_header.magenta > a > div::before {
	content: url('https://static.carta.ro/photos/images/arrow_magenta.png');
}

.group_header.blue > a > div::before {
	content: url('https://static.carta.ro/photos/images/arrow_blue.png');
}

.group_header.red > a > div::before {
	content: url('https://static.carta.ro/photos/images/arrow_red.png');
}

.group_header div.positive::after {
	content: url('https://static.carta.ro/photos/images/thumbs_up.png');
	margin-left: 10px;
}

.group_header div.negative::after {
	content: url('https://static.carta.ro/photos/images/thumbs_down.png');
	margin-left: 10px;
}

.group_header > a > div > div {
	display: inline-block;
	vertical-align: middle;
}

.group_header.expanded {
	border-top: 1px solid silver;
	border-left: 1px solid silver;
	border-right: 1px solid silver;
	border-radius: 6px 6px 0 0;
	height: 26px;
	background-color: #FBFBF4;
	/*display: inline-block;*/
	vertical-align: bottom;
	position: relative; z-index: 1; /* above group_visible which comes up 1px */
	padding-top: 8px;
}

/* only in expanded group header */

.group_header .o_i_e {
	display: none;
}

.group_header.expanded .o_i_e {
	display: inline;
	vertical-align: middle;
}

.group_header_spacer_invisible {
	position: absolute;
	overflow: hidden;
	height: 37px;
	margin-right: 3px;
	display: none;
}

.group_header_spacer_visible {
	border-bottom: 1px solid silver;
	overflow: hidden;
	height: 47px;
	/*margin-right: 3px;*/
	display: inline-block;
	vertical-align: bottom;
}

.group_visible {
	/*float: left;
	clear: left;*/
	display: block;
	border: 1px solid silver;
	border-radius: 0 0 10px 10px;
	padding: 10px 5px 5px 5px;
	/*width: 845px;*/
	transition:all 0.3s ease;
	background-color: #FBFBF4;
	position: relative; top: -1px; /* - that is because we don't use group_header_spacer anymore but we have border-top for .group_visible so bring group_header_expanded 1px down to cover that */
}

.group_visible .group_visible {
	background-color: white;
}

.group_visible .group_header.expanded {
	background-color: white;
}

/*.group_visible>div {
	margin-top: 30px;
}*/

/*.group_visible:HOVER {background-color: #FFFFE5;}*/

.group_invisible {
	display: none;
}

.edit_label {
	/*float: left;
	clear: left;*/
	width: 270px;
	text-align: right;
	font-weight: bold;
	margin-right: 5px;
	margin-bottom: 5px;
	display: inline-block;
	/*vertical-align: text-top;*/
	line-height: 24px;
}


/* ddrivetip */
.edit_label img {
	vertical-align: middle;
}

.edit_label>div:not(:first-child) {
	font-weight: normal;
}

/*edit label non bold*/
.elnb {
	/*float: left;*/
	clear: left;
	width: 235px;
	text-align: right;
	margin-right: 5px;
	margin-bottom: 5px;
}

.edit_label_100 {
	/*float: left;*/
	clear: left;
	width: 100px;
	text-align: right;
	font-weight: bold;
	margin-right: 5px;
	margin-bottom: 5px;
}

.edit_field {
	/*float: left;*/
}

.edit_field_container {
	/*float: left;*/
	/*width: 570px;*/
	padding: 0px;
	margin-bottom: 10px;
	display: inline-block;
	/*vertical-align: text-top;*/
	vertical-align: middle;
	width: calc(100% - 280px);
}

.edit_field_textarea {
	overflow: auto;
	/*width: 598px;*/
	width: 100%;
	height: 200px;
	border-top: none;
	border-left: 1px solid silver;
	border-right: 1px solid silver;
	border-bottom: 1px solid silver;
	/*padding: 0;*/
	/*float: left;*/
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	font-weight: normal;
	line-height: 26px;
	font-size: 17px;
}

.edit_field_textarea_hidden {
	display: none;
}

.edit_field_textarea_simple {
	overflow: auto;
	width: 596px;
	height: 150px;
	border: 2px solid silver;
	padding: 0;
}

.edit_field_phone {
	/*float: left;*/
	width: 200px;
	/*clear: left;*/
	margin-bottom: 8px;
}

.edit_field_phone input {
	width: 80% !important;
	margin-right: 10px;
	min-width: 160px;
	text-align: center;
}

.edit_field_text {
	/*float: left;*/
	width: 200px;
}

.edit_field_text_long {
	float: left;
	width: 596px;
}

.edit_field_text_long input[type=text] {width: 596px;}

.edit_field_select {
	/*float: left;
	clear: right;*/
}

.edit_field_price {
	float: left;
	width: 40px;
	margin-right: 10px;
	text-align: center;
}

.edit_field_input_price {
	width: 80px !important; /* !important - so that it would not be overwritten by input:not([type="checkbox"]) in common.css */
	text-align: center;
	/* remove up and down arrows from input type number - used in rate.edit.tpl */
	-webkit-appearance: none;
	-moz-appearance: textfield;
}

.edit_field_input_date {
	width: 130px !important; /* !important - so that it would not be overwritten by input:not([type="checkbox"]) in common.css */
	text-align: center;
	/* remove up and down arrows from input type number - used in rate.edit.tpl */
	-webkit-appearance: none;
	-moz-appearance: textfield;
}

.auto-kal {
	width: 80px;
	text-align: center;
}

.edit_field_display {
	/*float: left;*/
	width: 600px;
}

.edit_field_display_740 {
	/*float: left;*/
	width: 740px;
}

.l_f {
	/*border-radius: 0;*/
	text-align: center;
}

.table_content {padding: 0px; /*overflow: auto;*/}

.table_content_180 {height: 180px; padding: 5px; overflow: auto;}

.table {display: table;}

.group_visible > .table {
	width: 100%;
}

.head_row {display: table-row;}

.row {display: table-row;}

.row_invizible {display: none;}

.row_space .cell {padding-top: 50px !important;}

.hide_show_distant_alerts {background: bisque;}

.hide_show_distant_alerts td {padding-left: 20px;}

*:not(.group_visible) > .row:hover {
	/*outline: 1px solid silver;*/
	background-color: #FFF9A8;
	cursor: pointer;
	/*transition:all 0.3s ease;*/
}

#group_1 .row:hover {
	background-color: revert;
	cursor: revert;
}

.ceck {margin-right: 10px; padding-right: 10px; display: table-cell;}

.cell_100 {width: 100px; display: table-cell; padding: 5px;}

.cell_100_expired {width: 100px; display: table-cell; color: red; font-weight: bold; padding-right: 5px;}

.cell_100_expires_today {width: 100px; display: table-cell; color: green; font-weight: bold; padding-right: 5px;}

.cell_100_green {width: 100px; display: table-cell; color: #006600; font-weight: bold; padding-right: 5px;}

.cell {display: table-cell; padding-right: 10px;}

#group_1 .cell {
	padding-top: 10px;
	vertical-align: middle;
}

.cell_expired {width: 150px; display: table-cell; color: red; font-weight: bold;}

.cell_expires_today {width: 150px; display: table-cell; color: green; font-weight: bold;}

.cell_green {width: 150px; display: table-cell; color: #006600; font-weight: bold;}

.cell_300 {width: 250px; display: table-cell;}

.cell_300 textarea {margin: 0; padding: 0;}

.cell_300_expired {width: 300px; display: table-cell; color: red;}

.cell_300_expires_today {width: 300px; display: table-cell; color: green;}

.cell_100_expires_soon {width: 100px; display: table-cell; color: #990000; font-weight: bold; padding-right: 5px;}

.cell_300_expires_soon {width: 300px; display: table-cell; color: #990000;}

.cell_expires_soon {width: 150px; display: table-cell; color: #990000; font-weight: bold;}

/* used for expired seasons */
.expired {
	color: red;
	/*margin: 0 !important;
	border: none !important;
	background: none !important;*/
}

.expires_today {color: green;}

.green {color: #006600;}

.orange {color: #FF8700;}

/*#panorama {float: left; width: 415px; height: 300px; margin-left: 10px}

#pan_error_explanation {float: left; width: 415px; margin-left: 10px;}*/

/* vertical align middle */
.v_a_m {vertical-align: middle;}

.v_a_b {vertical-align: bottom;}

.error {border: 2px solid red; font-weight: bold; text-align: center; padding: 20px; font-size: 2em; background-color: #FFE1E1;}

.big_warning {text-transform: uppercase; font-weight: bold; font-size: x-large;}

.visit A:link, .content A:visited {
	background-image: url('https://static.carta.ro/photos/images/visit.gif');
	background-repeat: no-repeat;
	padding-left: 35px;
	height: 30px;
	display: block;
	line-height: 28px;
}

.delete A:link, .content A:visited {
	background-image: url('https://static.carta.ro/photos/images/delete.png');
	background-repeat: no-repeat;
	padding-left: 35px;
	height: 30px;
	display: block;
	line-height: 28px;
}

.season {
	/*float: left;*/
	margin: 40px 0;
	width: 100%;
	border: 3px solid;
	border-radius: 10px;
	padding: 10px;
	margin-right: 20px;
	width: calc(100% - 25px);
	background-color: white;
}

/* season header */
.season > div:first-child {
	width: 100%;
	background-color: cornsilk;
	margin: -10px 0 0 -10px;
	padding: 10px;
	border-radius: 10px 10px 0 0;
}

.rates {margin: -10px;}

.rates input {
	margin-bottom: 0 !important; /* overwrite 20px from common.css */
}

.rate_div{
	padding-top: 20px;
	padding-left: 5px;
	padding-bottom: 15px;
	border-top: 1px solid #ececec;
	background-color: white;
}


/* rate out of season explanation */

.roose {
	max-width: 700px;
	margin-bottom: 20px;
	margin-right: 30px;
}


/* the :hover is done in css so that it will highlight this rate in all seasons */
/*.rate_div:hover {
	background-color: #ddffbb;
}*/




/* rate body - this is only used in js, no CSS defintions needed but I wrote this so it woun't be eliminates from rate.edit.inseason.tpl */

.r_body {}

.r_body_invisible {display: none;}


.rates > div:first-child {
	border-radius: 8px 8px 0 0;
}

.rates > div:last-child {
	border-radius: 0 0 8px 8px;
}

.rates > div:only-child {
	border-radius: 8px;
}

div[rate_div] .t_row {
	display: table-row;
	/*column-count: 2;*/
}

div[rate_div] .t_row div {
	vertical-align: middle;
}

div[rate_div] .t_cell {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	padding: 5px;
	line-height: normal;
}

div[rate_div] .t_row > .t_cell:first-child {
	max-width: 280px;
}

div[rate_div] .t_cell input {
	margin: 0;
}

.edit_rate {
	display: inline-block;
	border: 1px solid silver;
	padding: 0 15px;
	margin: 0 10px;
	background: lightyellow;
	border-radius: 5px;
}

.delete_season {
	display: inline-block;
	border: 1px solid silver;
	padding: 0 15px;
	/*margin-right: 5px;*/
	/*background: lavenderblush;*/
	/*background: bisque;*/
	background: linen;
	border-radius: 5px;
}

/*new rate form*/
.nrf {float: left; padding: 10px 0 0 0; /*margin-bottom: 20px;*/}

/* select from nrf */
.nrf select {
	font-weight: bold;
	width: auto;
	margin-right: 20px;
}
.nrf option {font-weight: normal;} 

.rate {color:#073C68; font-weight:bold; font-size:medium;}


/* the need for cend_limits: so that cend_limits would be fixed and from top to bottom of viewport and scrollable in case it doesn't fit in the height of the viewport and then, inside of it, cend_wrapper would be display: table which takes the height of the content
 - this way we achieve scrollable for cend */

.cend_limits {
    position: fixed;
    top: 0;
    left: 0;
    max-height: 100vh;
    overflow: auto;
    width: 100%;
    height: 100%;
	z-index: 14;
}
.cend_wrapper {
	display: table;
	width: 100%;
	height: 100%;
}

/* the whole page black transparent */
.cend_bkg {
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0);
	/* RGBa with 0.8 opacity */
	background: rgba(0, 0, 0, 0.8);
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

/* a div in the center of the page */
.cend {
	opacity: 1;
	/*position: absolute;*/
	/*width: 720px;*/
	/*height: 400px;*/
	z-index: 15;
	/*top: 50%;
	left: 50%;
	margin: -175px 0 0 -275px;*/
	background: white;
	padding: 50px;
	display: inline-block; /* so that it would wrap around content and not have 100% width */
	text-align: left;
	position: relative; /* so that the close button would position itself relative to this */
	border-radius: 10px;
}

/* buttons for the cend */
.cend_b {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 10px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 10px;
	border: 1px solid #eceaea
}

/* show and hide expired seasons text and link */
#s_e_s, #h_e_s {
	padding: 10px;
	font-style: italic;
}

.inline_div {display:inline;}

.wait {
	display: none;
	position: absolute;
	top: calc(50% - 16px);
	right: 10px;
	z-index: 100;
}

.spinner { /* new way of adding a loading spinner used in $.fn.wait like this: $("#div_id").wait(); - you just need $("#div_id") to be positioned relative or something other than static */
	position: absolute;
	top: calc(50% - 50px);
	left: calc(50% - 50px);
}

#wait_admin {
	display: none;
	position: fixed;
	top: calc(50% - 66px);
	left: calc(50% - 64px);
	z-index: 3000; /* above p_w which is 2000 in select client website template / design */
}

#dhtmltooltip{
	position: absolute;
	left: -300px;
	width: 150px;
	border: 1px solid silver;
	border-radius: 5px;
	padding: 8px;
	background-color: lightyellow;
	visibility: hidden;
	z-index: 100;
	box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
	font-size: 15px;
}

#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}

/* rounded box */
.r_b {
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid silver;
	margin: 5px 0 5px 0;
	padding: 5px;
}

/* rounded box 10px */
.r_b_10 {
	-moz-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid silver;
	margin: 5px 0 5px 0;
	padding: 5px;
}

/* div with title - used first for features */
.dwt {
	margin: 15px 0 0;
	padding: 0 5px 5px;
	border: 2px solid #FFAE00;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/* red div with title - used for first photo if changed and not aproved yet */
.red_dwt {
	margin: 15px 0 0;
	padding: 0 5px 5px;
	border: 2px solid #FF0000;
	-moz-border-radius: 5px;
	border-radius: 5px;
	/*float: left;*/
	-moz-box-shadow:    inset 0 0 20px #FF0000;
	-webkit-box-shadow: inset 0 0 20px #FF0000;
	box-shadow:         inset 0 0 20px #FF0000;
}

/* div title - used first for features */
.dt {
	font-weight: bold;
	position: relative;
	top: -18px;
	left: 10px;
	background-color:#FBFBF4;
	padding: 0 10px 0 10px;
	margin: 0;
	display: inline-block;
	/*float: left;*/
	font-size: small;
	line-height: 18px;
}

/* feature div */
.fd {
	/*width: 188px;*/
	/*float: left;*/
	page-break-inside: avoid; /* so that it would not split between columns */
}

.fd input {
	vertical-align: middle;
}

/* number ball - oare unde e folosit? - il dezactivez pentru ca interfereaza cu .nb din page.tpl */
/*.nb {
	font-size: 2em;
	color: blue;
	border: 3px solid blue;
	border-radius: 25px;
	padding: 5px 10px;
	vertical-align: middle;
	/*float: left;*/
	background-color: #ddf;
}*/

.border_pic {
	border: 1px solid #0099ff;
	background-color: #ffffff;
	padding: 3px 3px 3px 3px;
	box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
}

/* first photo delimiter */
.fpd {}

#fph {
	position: absolute;
	margin-left: 10px; /* we explicitly setup ul padding left to 10px inline in client.edit.photos.tpl */
	width: 136px;
	height: 128px;
	pointer-events: none;
}

#photos {
	list-style-type:none;
	margin:0px;
}

#photos li, #photos_unused li, #photos_delete li {
	/*float:left;*/
	display: inline-block;
	vertical-align: top; /* this way the pictures that are not moved do not move a step lower when we move one of them */
}

#photos_unused { list-style-type:none; margin:0px; clear: left;}

#photos_unused li {
	/*float:left;*/
	display: inline-block;
	vertical-align: top; /* this way the pictures that are not moved do not move a step lower when we move one of them */
}

#photos img, #photos_unused img, #photos_delete img {
	/*pointer-events: none;*/
	max-width: 100px;
	max-height: 100px;
	image-orientation: from-image;
}

#photos_new { list-style-type:none; margin:0px; clear: left;}

#photos_new li {float:left;}

#photos_delete { list-style-type:none; margin:0px; clear: left;}

.placeHolder div {
	background-color: white !important;
	border: dashed 1px gray !important;
	width : 120px;
	height : 120px;
	margin: 5px 15px 5px 15px;
}

/* photos_waiting_for_aproval_text */
#pwfat {padding: 20px 0 30px 50px;}

/* photos plus - click to upload a new photo*/
#phpl {
	/*float:left;*/
	width: 120px;
	height: 120px;
/*	border: 2px solid red;
	-moz-border-radius: 5px;
	border-radius: 5px;*/
	/*background-image: url('https://static.carta.ro/photos/images/small_pic_bkg_red.png');*/
	margin: -16px;
}

/* back to top arrow */
/*.back-top {
    width:25px;
    height:25px;
    position:fixed;
    bottom:68px;
    left: 920px;
    display:none;
	border: 1px solid silver;
	-moz-border-radius: 5px;
	border-radius: 5px;
	cursor: pointer;
	background: url('https://static.carta.ro/photos/images/top.png') silver;
	opacity: 0.7;
	transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	transition-property: background-color;
	-webkit-transition-property: background-color;
}

.back-top:hover {
	background: url('https://static.carta.ro/photos/images/top.png') gray;
}*/


/* Ripple Out */
@-webkit-keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
@keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
.hvr-ripple-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
}
.hvr-ripple-out:before {
content: '';
position: absolute;
border: #b72c2c solid 6px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
	border-radius: 50px;
}
.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
-webkit-animation-name: hvr-ripple-out;
animation-name: hvr-ripple-out;
}













/* contracts */

.add_contract, .add_trial{
	border: 2px solid silver;
	border-radius: 15px;
	padding: 5px 15px;
	margin-left: 10px;
	font-weight: bold;
	color: #3f0000;
}

.add_contract{
	border: 2px solid #97dd95;
	background: linear-gradient(45deg, #e4fde0, #b7fdb5);
}

.add_contract:HOVER {
	border:  2px solid #66dd88;
	background: #b5fdd7;
}

.add_trial{
	border: 2px solid #95b7dd;
	background: linear-gradient(45deg, #e0edfd, #b5d7fd);
}

.add_trial:HOVER {
	border:  2px solid #6688dd;
	background: #b5d7fd;
}

.bill table, .bill tr, .bill td {
	border: 1px solid black;
	border-collapse: collapse;
	padding: 5px;
}











/*#custom_message {
	background-color: mintcream;
	display: table;
	height: 100px;
}

#custom_message_txt {
	padding: 16px;
	text-align: center;
	font-size: x-large;
	display: table-cell;
	vertical-align: middle;
}*/

/*#custom_message {background: url('https://static.carta.ro/photos/images/check48.png') no-repeat 10px 10px}*/
#custom_message h1, #custom_message h2 {
	color: white;
	padding: 5px 5px 5px 75px;
	text-align: left;
	display: block;
	white-space: normal;
}
#custom_message h2 {font-size: medium}


/*input {
	box-sizing: border-box;
	border: 1px solid silver;
    border-radius: 4px;
}*/













/* OFFERS */


/* places for offer */

#p_f_o {
	 margin: 0 0 10px 35px;
}
















.login_form>div:not(:nth-child(3)) {
	display: table-row;
}

.login_form>div>div {
	display: table-cell;
}

.login_form input::placeholder {
	color: white;
}

.login_form input[type="checkbox"] {
	vertical-align: middle;
}




/* 3 columns that transphorm into 2 in medium and 1 in the smallest viewport - used in photo gallery in adminPanel */

.c_3 {
	column-count: 3;
}


/* 4 columns that transphorm into 2 in the smallest viewport - used in features in adminPanel */

.c_4 {
	column-count: 4;
}

.webtemplate {
	text-align: center;
	display: inline-block;
	margin: 0 5%;
}


#save_button {
	/*background-image: url('https://static.carta.ro/photos/images/save_53.png'), linear-gradient(45deg, #E0EDFD, #B5D7FD);*/
	background: url('https://static.carta.ro/photos/images/check_36.png') 10px center no-repeat, linear-gradient(45deg, #E0EDFD, #B5D7FD);
}

#save_button.highlighted {
	/*background-image: url('https://static.carta.ro/photos/images/save_53.png'), linear-gradient(45deg, #FDEDE0, rgb(254, 84, 84));*/
	background: url('https://static.carta.ro/photos/images/check_36.png') 10px center no-repeat, linear-gradient(45deg, #FDEDE0, rgb(254, 84, 84));
}


/* this one is used for the pay button */

.button.highlighted, .button.highlighted:focus {
	background: linear-gradient(45deg, #FDEDE0, rgb(254, 84, 84));
}

.button.highlighted:hover {
	background: linear-gradient(45deg, #FDEDE0, rgb(254, 60, 60));
}

.button.highlighted.green, .button.highlighted.green:focus {
	/*background: linear-gradient(45deg, #FFF, rgb(105, 232, 105));*/
	border: 3px solid #4d8447;
	border: 3px solid cadetblue;
	background: url("https://static.carta.ro/photos/images/credit_card_48.png") 10px center no-repeat floralwhite;
	padding-left: 70px;
	text-align: left;
	color: #035555;
	font-weight: normal;
	opacity: .8;
	min-height: 40px;
	transition: all .5s;
}

.button.highlighted.green:hover {
	/*background: linear-gradient(45deg, #FFF, rgb(131, 244, 131));*/
	/*background: url("https://static.carta.ro/photos/images/credit_card_48.png") 10px center no-repeat;
	border: 3px solid #4d8447;
	color: #035555;*/
	opacity: 1;
}

#save_button_div {
	margin-bottom: 20px;
}

#save_button div {
	margin-left: 54px;
	width: calc(100% - 54px);
}



#interactions, #interactions input, #interactions select, #interactions textarea {
	font-size: 14px;
	padding: 0;
	line-height: initial; /* for textarea */
}

#interactions .cell {
	padding-bottom: 10px;
}

#interactions textarea, #interactions input, #interactions select {
	font-weight: unset;
	border-width: 1px;
	padding: 5px;
	vertical-align: middle;
}

.highlighted_interaction {
	background-color: antiquewhite;
	transition: background-color 250ms linear;
}














.reservation_group {
	/*background-color: white;*/
}

/* this means a reservation that is not new */
.reservation:not(.read_0) A {
	font-weight: normal;
}


/* reservation message */


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

.r_m div:nth-child(1):not(.r_ting):not([rel="title"]) {
	padding: 5px 20px;
	/*background-color: white;*/
	/*font-size: larger;*/
	/*max-width: 80%;*/
	display: inline-block;
	position: relative;
}


/* from tourist to client */

.group_container .r_m_0 {
	text-align: left;
	padding-left: 20px;
}

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

.c_f_b .r_m_0:not([rel="reservation_message"]) {
	margin-left: 30%;
}


/* conversation view */

.r_m_1 {
	padding-left: 20px;
}


/* admin view */

.group_container .r_m_1 {
	text-align: right;
	padding-right: 20px;
}

.group_container .r_m_1:not([rel="reservation_message"]) {
	margin-left: 30%;
}

.c_f_b .r_m_1 {
	text-align: left;
}


/* message sent: message from tourist to client displayed in client.display and message from client to tourist displayed in adminPanel */

.group_container .r_m_1 div:nth-child(1):not(.review):not(.r_ting):not([rel="title"]), .c_f_b .r_m_0 div:nth-child(1):not(.review):not(.r_ting):not([rel="title"]) {
	border: 1px solid lavender; /*darkgreen;*/
	border-radius: 14px 14px 0 14px;
	/*background-color: palegreen;*/
	background-color: #dcf8c6;
	/*margin-left: 30%;*/
}


/* message received: message from client to tourist displayed in client.display and message from tourist to client displayed in adminPanel */

.c_f_b .r_m_1 div:nth-child(1):not(.review):not(.r_ting):not([rel="title"]), .group_container .r_m_0 div:nth-child(1):not(.review):not(.r_ting):not([rel="title"]) {
	border: 1px solid bisque; /*darkgoldenrod;*/
	border-radius: 0px 14px 14px 14px;
	background-color: floralwhite;
	margin-right: 30%;
}

/* from tourist to client */
.r_m_0 {
	padding-right: 20px !important;
}


/* message unread */
.r_m .read_0 {
	/*background-color: floralwhite !important;*/
	/*background-color: palegreen !important;*/
	border-width: 2px !important;
}


/* conversation view */

.conversation .r_m_0 .read_0 + div::after {
	content: ' - necitit';
    font-weight: bold;
}

.conversation .r_m_1 .read_0 + div::after {
	content: ' - mesaj nou';
    font-weight: bold;
}


/* admin view */

.group_container .r_m_0 .read_0 + div::after {
	content: ' - mesaj nou';
    font-weight: bold;
}

.group_container .r_m_1 .read_0 + div::after {
	content: ' - necitit';
    font-weight: bold;
}


/* both conversation and admin view for read messages */

/*.conversation .r_m_0 .read_1::after, .group_container .r_m_1 .read_1::after {
	content: '\A✓✓';
	letter-spacing: -10px;
	font-size: 20px;
	color: steelblue;
	white-space: pre; or pre-wrap - this is so that the newline \A from content would work
}*/

.conversation .r_m_0 .read_1 + div::after, .group_container .r_m_1 .read_1 + div::after {
	content: '✓✓';
	letter-spacing: -10px;
	font-size: 20px;
	color: steelblue;
	margin-left: 2px;
	position: relative;
	top: 3px;
	white-space: pre;
}




/* message read */
.r_m .read_1 {
}

.r_m i {
	color: darkcyan;
	font-weight: bold;
	position: relative;
	top: 5px;
	position: relative;
	top: 5px;
	margin-bottom: 5px;
	display: block;
}

/* message sending failure */
.m_failure div:nth-child(1) {
	background-color: lightsalmon !important;
}




.r_m>div:nth-child(2) {
	font-size: x-small;
	margin-right: 5px;
	margin-left: 5px;
	top: -5px;
	position: relative;
}

.r_m textarea {
	max-width: 80%;
	height: auto;
	border-radius: 14px 14px 0 14px;
	font-size: larger;
	padding: 5px 10px;
	font-weight: normal;
	border: 1px solid lavender; /*darkgreen;*/
	/*background-color: palegreen;*/
	background-color: #dcf8c6;
}

.r_m a.button {
	max-width: 60px;
	display: inline-block;
	padding: 2px 20px;
	margin-top: 5px;
}







#contract_for_client {
	/*font-size: x-large;*/
	padding: 10px 20px;
	/*font-weight: bold;
	line-height: 30px*/;
}

#contract_for_client img {
	vertical-align: middle;
}


#client_until_date a:hover {
	text-decoration: none;
}

#client_until_date div {
	/*display: inline-block;*/
	font-size: small;
	/*line-height: normal;*/
	font-weight: normal;
	/*vertical-align: bottom;*/
}

#client_until_date .paragraph {
	font-size: revert;
	margin-top: 10px;
	padding: 10px 0;
}










/* yes in wide - that means that in desktop (main.css) it's not diplayed */

.y_i_w {
	display: none;
}


.reservation .small {
	font-size: small;
	/*font-weight: bold;*/
	line-height: 10px;
	color: darkolivegreen; /*darkgreen;*/ /*darkcyan; darkgoldenrod;*/
}

#date_from_until {
	margin-top: 10px;
	overflow: hidden;
}

#dates_and_number {
	overflow: hidden;
}










/* jQuery UI Datepicker emphasis on selected dates */

.selected_date a {
	background: #007fff none !important;
	color: white !important;
}

div.ui-datepicker {
	font-size: 22px;
}

.ui-datepicker-next, .ui-datepicker-next-hover {
	background: url("https://static.carta.ro/photos/images/arrow.png") center center no-repeat !important;
}

.ui-datepicker-prev, .ui-datepicker-prev-hover {
	background: url("https://static.carta.ro/photos/images/arrow.png") center center no-repeat !important;
	transform: rotate(180deg);
}

.ui-widget-header .ui-icon {
    background-image: none !important; /* don't show anymore the small original arrows */
}

.ui-datepicker {
	width: auto !important; /* when only one month displayed, it fills the whole width of the mobile device */
}


/* used to display inputs as text in client.email.form.tpl */

.as_text {
    border: 0 !important;
    outline: none;
}





/* in location.zero.clients.tpl */

#zc {
	padding: 40px 10px;
}


/* inline plus */

.iplus {
	background-color: dodgerblue;
	color: aliceblue;
	border-radius: 7px;
	width: 14px;
	display: inline-block;
	height: 14px;
	text-align: center;
	line-height: 13px;
	font-size: 14px;
}




:invalid {
	border-color: red !important;
}







/* GUESTBOOK */


.review {
	margin-left: 6px;
	margin-top: 30px;
}

.review_not_active {
	border: 1px solid red;
	border-radius: 10px;
	padding: 0 5px;
	margin-top: 30px;
}

fieldset:not(.review_not_active) {
	border: 0;
}

.review_not_active legend {
	color: var(--carta_dark_red);
}

.review_not_active .review {
	margin-top: 0;
}

/* review in adminPanel */

.group_visible .review {
	/*margin-left: 26px;*/
}

.review >:first-child {
	/*color: #006600;*/
}

.review.positive_1 [rel="title"] {
	color: var(--carta_review_positive);
}

.review.positive_0 [rel="title"] {
	color: var(--carta_review_negative);
}

.review [rel="text"] {
	text-indent: 50px;
	font-size: smaller;
}

.review [rel="date"] {
	line-height: 20px;
	font-style: italic;
	font-size: smaller;
	text-align: right;
}

.r_tings {
	display: inline-block;
	margin: 16px 0;
}

.r_ting {
	line-height: 20px;
	text-align: right;
}

.review.positive_1 .r_ting {
	color: var(--carta_review_positive);
}

.review.positive_0 .r_ting {
	color: var(--carta_review_negative);
}



.rating_row {
	margin-top: 10px;
	display: table-row;
}

.rating_label {
	display: table-cell;
	padding: 14px 16px 0 0;
}

.rating {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	/*background-image: linear-gradient(to right, #111513, #298037);*/
	border-radius: 5px;
	vertical-align: top;
	padding: 2px 8px 3px;
}

.rating > input {
	/*display:none; - we can't use this because then the field would not work as required anymore */
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

.rating > label {
	position: relative;
	width: 1.1em;
	font-size: 28px;
	color: orange;
	cursor: pointer;
	top: 5px;
}

.rating > label::before {
	content: "\2605";
	position: absolute;
	opacity: 0;
}

.rating > label:hover:before,

.rating > label:hover ~ label:before {
	opacity: 1 !important;
}

.rating > input:checked ~ label:before {
	opacity:1;
}

.rating:hover > input:checked ~ label:before {
	opacity: 0.4;
}

.rating_value {
	display: table-cell;
	font-weight: bold;
}








/* block fb new comments */

.fb-comments-wrap {
	overflow: hidden;
	max-width: calc(100vw - 40px); /* see README 13.06.02 */
}

.fb-comments {
	/* this hides the input textarea for new comments in fb */
	margin-top: -160px;
}






.emphasize_div {
	border: 2px solid coral;
	border-radius: 10px;
	background-color: white;
	display: block !important;
	margin: 10px 10px 10px 0;
	padding-left: 10px;
	max-width: 400px;
}











/* The order in which the attributes are overwritten is not determined by the order the classes are defined in the class attribute, but instead where they appear in the CSS. */

.invizible, [invizible] {
	display: none !important;
}

.invizible_inln {
	visibility: hidden;
}

.vizible {
	display: block;
	/*float: left;*/
}

.vizible_inln {
	display: inline-block;
}






.warn_down {
	text-align: center;
	margin: 50px 10px;
	font-size: 36px;
	color: var(--carta_red);
}





#payment_iframe {
	min-width: 800px;
	min-height: 800px;
	border: 1px solid silver;
	border-radius: 8px;
}


/* restrict width in main.css - cancelled in small.css */

.rwimcs {
	max-width: 300px;
}




.dots {
	display: inline;
}

.dots span {
	padding: 3px;
	animation: dot ease-in-out 1s infinite;
}

.dots span:nth-of-type(2) {
  animation-delay: 0.2s;
}

.dots span:nth-of-type(3) {
  animation-delay: 0.4s;
}

@keyframes dot {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}




.code {
	max-height: 187px;
	overflow: auto;
}

.code pre {
    counter-reset: line;
	line-height: initial;
	margin-top: 0;
}

.code code {
    counter-increment: line;
}

.code code:before {
    content: counter(line);
}

*:not([full_trace_days]) > div[trace_day]:not(:first-of-type) {
	display: none;
}







/* for invoice from mCm: needed when pdf is generated */

.invtbl, .invtbl td, table[inv], table[inv] td {border: 1px solid silver; border-collapse: collapse; padding: 5px;}





#w_preview {
	width: calc(100vw - 40px);
	height: calc(100vh - 250px);
	border: none;
	border-radius: 10px;
	margin-top: 10px;
}


#a_w_p_desktop_wrapper {
	width: 500px;
	height: 360px;
	margin-top: 10px;
	border: 4px solid /*darkslategray*/;
	border-radius: 10px;
	overflow: hidden;
	display: inline-block;
	margin-left: 20px;
	position: relative;
}


#actual_desktop_website_preview {
	width: 300%;
	height: 300%;
	transform: scale(0.3335) translate(-100%, -100%);
}


#a_w_p_mobile_wrapper {
	width: 160px;
	height: 360px;
	margin-top: 10px;
	margin-left: 50px;
	border: 4px solid /*silver*/;
	border-radius: 20px;
	overflow: hidden;
	display: inline-block;
	position: relative;
}


#actual_mobile_website_preview {
	width: 630px;
  height: 1400px;
  transform: scale(0.26) translate(-905px, -2000px);
}


.mask_preview {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 1; /* above the iframe but under the #save_button_div in wide - see 20.08.02 */
	cursor: pointer;
}




.highlights {
	padding: 10px;
}

.highlight_number {
	background-color: var(--carta_magenta);
	border-radius: 50%;
	font-weight: bold;
	text-align: center;
	aspect-ratio: 1;
	height: 16px;
	color: white;
	font-size: small;
	font-weight: bold;
	position: absolute;
	top: 20px;
	right: 60px;
}

:not(.group_container)>.highlights {
	padding: 30px 25px 10px;
}


.highlights a {
	font-weight: normal !important;
	color: var(--carta_links_color) !important;
}

.highlights img {
	vertical-align: middle;
	margin-right: 10px;
}