/*

small CSS
- no client description texts in clients list

*/

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

:root {

	--MAXIMUM_HEIGHT_FOR_IMG_IN_CLIENT_SMALL_IN_LIST: 495px; /* this is the same as MAXIMUM_HEIGHT_FOR_IMG_IN_CLIENT_SMALL_IN_LIST in config.php - this needs to limit the height of the first client image that receives its height from client->display() - 19.14.00 */

}


H1 {
	color: darkslategray;
}


/* not in small - used for example in page nav_top */
.n_s {
	display: none;
}

/* only in small - this has do be initialized in main.css to display: none; */
.o_i_s {
	/*display: initial;*/ /* it was reverting to inline which I didn'y want, so revert was better: */
	display: revert;
}


/* bug in firefox: it adds a horizontal scroll bar - so remove it */
body {
	/*overflow-x:hidden;*/
}


#logo_up {
	/*background: url("https://static.carta.ro/photos/images/CARTA_48_new.png") left 10px no-repeat;*/
	/*background: url("https://static.carta.ro/photos/images/logo/carta_210.png") center 20px no-repeat;*/
	background: url("https://static.carta.ro/photos/images/logo/carta_162_45.png") center 26px no-repeat;
	/*height: 100px;*/
	padding: 0;
	/*font-size: 48px;*/
	/*line-height: 100px;*/
	/*margin-top: -20px;*/
	line-height: revert;
	margin-top: -10px;
}

.logo_admin {
	font-size: 28px;
	margin-left: 10px;
	padding: 0;
}

.admin_headers {
	text-align: center;
	height: 80px;
	position: fixed;
	top: 0;
}

.logo_a {
	padding-left: 0;
}

.hm, .hm:hover {
	top: 20px;
}


#path, #path A {
	color: #073C68;
}



#pcat:not(.wpcat *) {
	padding: 0 10px 10px;
}



/* sort menu wrap */
#somw {
	margin-top: 0;
}

#ocnt {
	padding: 0;
}





.ddm {
	position: absolute;
	left: 20px;
}

.ddm > ul > li > ul {
	margin-top: 16px;
}

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



















#client_main .module_title {
	top: 90px;
}

.modules {
	margin-top: 110px;
}

/* green div in the center that contains almoust everything - change to a small CARTA logo */
#gd {
	/*background: url('https://static.carta.ro/photos/images/carta.t.s.png') 40px top no-repeat;*/ /* nu inca: engine.9.05.07: we switched to white background and the same header with text for CARTA.ro as the main.css */
	/*background-position: top center;*/ /* no more needed as we adjusted the position in medium.css */
	/*padding: 40px 0 0;*/ /* nu inca: engine.9.05.07: we switched to white background and the same header with text for CARTA.ro as the main.css */
	background: none;
}

/* no more round borders - except for sf - search features */
.wd:not(.sf), .wdpg {
	border-radius: 0;
	/*border-top: 1px solid #ffae00;
	border-left: none;
	border-right: none;
	border-bottom: none;*/ /* nu inca: engine.9.05.07: we switched to white background and the same header with text for CARTA.ro as the main.css */
	padding: 0;
	
	/* if there are leftovers from the horizontal menu then do not shift to the right the content */
	clear: left;
}

/* forget about some features from main.css */
#sf {
	top: auto;
	margin: 0;
	border-top: none;
	border-left: none;
	border-right: none;
	border-radius: 0;
	display: block;
	width: auto;
}

/* enhance offer div wrapper in location horizontal menu */
.enhodw {
	display: table-cell; /* so that it would line up with sort div lsm */
	text-align: right;
	/*float: right;*/
	/*position: absolute;
	right: 0;*/
}

/* when #lsm.hover, do this with .enhodw: (~ operator works only if the second one is imediately after the first one in DOM) */
#lsm.hover ~ .enhodw {
	display: table-row;
	/*float: none;*/
	text-align: left;
}

.enhodw.hover .enhod {
	display: block; /* in medium.css they are made inline */
}




/* contact divs - the third div under the first two and centered */
.cawc {
	float: none;
	border-top: 1px solid #006633;
}

.csl {
	padding: 30px 10px 20px;
}

/* client small list text */
.csl_t {
	display: inline-block; /* new in engine.9.06.06 */
	padding: 10px 0 5px; /* new in engine.9.06.06 */
	text-align: left;

	top: 0;
}

/* client small list wrapper for the first two divs - the image and the enhance - it does nothing in main.css but it implements in small.css the aspect ratio */
/*.cslwlr{
	width: 100%;
	position: relative;*/ /* works with cslwlrc - for aspect ratio of cslwlrc */
/*}*/

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

/* this is where we setup aspect ratio for csll and cslr (img + enhance) - in main.css the aspect ratio is only for the csll */
/*.cslwlrc {
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	text-align: center;
}*/

.csl_row {
	text-align: center;
}

/* wrap around left and right so that it would wrap around the image so that the enhance div would have the same width as the img when it's made to have 100% width */
.csl_lr_w {
	display: inline-block;
	/*height: 100%;*/ /* so that it stays within cslwlrc */
}

.csl_l {
	width: auto;
	max-width: revert;
	float: none;
	margin: 0;
	min-width: 30vw; min-height: 30vw; /* 19.09.07 */
	/*width: calc(100vw - 20px);*/ /* 19.14.00 */ /* commented because this will be generated from php only for the first client */
	max-height: var(--MAXIMUM_HEIGHT_FOR_IMG_IN_CLIENT_SMALL_IN_LIST); /* this is the same as MAXIMUM_HEIGHT_FOR_IMG_IN_CLIENT_SMALL_IN_LIST in config.php - this needs to limit the height of the first client image that receives its height from client->display() - 19.14.00 */
	height: auto; /* overwrite the height defined in px in main.css */
	max-height: 75vw; /* 56.25% of width of containing div gives a 16:9 aspect ratio; 75 => 4:3 */

	border-radius: 4px; /* 1px smaller than the border radius of csll */
	box-sizing: border-box; /* so that the padding included will fit into max-height */
	box-shadow: 3px 3px 8px #818181;
}

/*.csllc {*/
	/*position:  static;*/
	/*height: 100%;*/ /* so that it stays within csll */
/*}*/

/* image of client used in client list - introduced in engine.9.07.00 */
.csl_l img {
	max-width: 100%;
	max-height: 75vw; /* if we don't define it here then it will not stay within .csl_l because that one doesn't have height defined as a specific value */
	border-radius: 4px; /* 1px smaller than the border radius of csll */
	padding: 0;
	border: none;
	box-shadow: none;
}


/* great thing introduced in engine.9.07.00: the enhanced module is displayed over the image */
.csl_r_w {
	position: relative;
	height: 0;
	/*width: 100%;*/
	float: none;
}

/* great thing introduced in engine.9.07.00: the enhanced module is displayed over the image */
.csl_r {
	width: auto;
	box-sizing: border-box;
	position: absolute; /* and relative to the .cslrrw above */
	left: 0;
	right: 0;
	bottom: 0;
	background-color: silver; /* fallback if the bellow isn't supported */
	background-color: rgba(0, 0, 0, 0.7);
	padding: 3px 3px 3px 20px;
	color: white;
	text-align: left;
	min-height: none;
	min-height: unset; /* this is what firefox likes */
	border-radius: 0 0 4px 4px;
}

.rrc {
	width: auto;
}

.rrcd {
	font-size: 1em;
	display: inline-block;
	margin-bottom: 0;
}

.gup {
	color: #7cfe7c;
}

/* no enter after rate has from text */
.rhf {
	display: inline;
}

/* features column - different in medium and small css */
/*.fc {
	width: 100%;
}*/

/* sort.menus under promoted.categories - nu cred ca mai e folosit pentru ca am scos-o din promoted categories*/
.v2134 {
	display: block;
}







/* hide sort options that are not checked */

#lsm.input[type=radio]:not(:checked)+a {
	display: none;
}

#lsm.input[type=radio] {
	display: none;
}

#lsm {
	/*display: table-cell;*/ /* so that in small.css would line up with promoted offers */
}

#lsm.hover input[type=radio]+a, #lsm.hover input[type=radio] {
	display: inline;
}

#lsm .vm.hover {border-radius: 5px; margin-top: 10px;}

#lsm.hover div.hover input {visibility: hidden;}

#lsm.hover div.hover img {display: none;}

/* 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: inline;}
#lsm.hover .ioisc {display: none;}

/* because of the above arrow there can be a double arrow when the page is displayed ordered by quality or number of places so hide that down arrow when the arrow above is displayed */
/* hide when double arrow */
.hwda {display: none;} #lsm.hover .hwda {display: inline;}



/* hide all categories - this way only the selected_lhnd and the mores will be displayed */
.lhnd {
	/*display: none;*/
}

/* search features div - because units feature title doesn't fit in one row with room features */
.sfd {
	clear: left;
}

/* cancel the height of lhns */
/*.lhns {
	width: auto;
}*/

/* smaller pictures */
.wraptocenter {
	margin: 0;
	/*width: 80px;
	height: 80px;*/
	border: none;
}

/*.border_pic {
	width: 60px;
}*/

/* 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: 4px;
}

/* fit all menu items nicely on the green */
.lhnd {
	height: auto;
}
.selected_lhnd {
	/*border-bottom: 1px solid #ffae00;*/
	/*border-radius: 5px;*/
}


.vm.hover {
	border-radius: 0;
}
#clvmd {
	border-radius: 0;
}

.vm.hover ul {
	border-radius: 0;
}


/* not in small */

.n_i_s {
	display: none !important;
}

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


/* not enough space to display location name in nav_top - we actually make it as high as it needs to fit all the info */
#nav_top span {/*display: none;*/}









/* CLIENT FULL */

.c_f_h {
	padding-bottom: 0;
}

/* while in location h1 needs to be inline in medium.css so that mores menu would be displayed at the right of h1, in client full we don't want h1 to be inline - in small.css we come back to inline so that it would be of small height */
.c_f_h h1 {
	display: inline;
}

.c_f_h div {
	display: none;
}











/* PHOTO GALLERY */

/* client full photo gallery */

#c_f_phg {
	position: relative; /* so that img_arrow would be positioned absolute relative to this */

	/* next two lines will force bigger width while centered in viewport */
	width: 100vw;
	/*left: -10px;*/
}

/* hide photo gallery arrows in small css - we use swipe */
/* starting in 11.01.10, we let them be */
.img_arrow {
	/*display: none;*/
	position: absolute;
	/*top: 50%;*/
	top: calc(50% - 20px);
}

.img_arrow:nth-of-type(1) {
	left: 10px;
}

.img_arrow:nth-of-type(3) {
	right: 10px;
}

#big_img {
	min-height: 50vw; /* for clients that have the first picture very, very flat horizontal */
}

#all_img div {
	padding: 10px;
	box-sizing: border-box;
}

/*#circles .circle {
	height: 6px;
    width: 6px;
	margin: 0;
}*/







#features ul {
	-moz-column-count: 1;
	-webkit-column-count: 1;
	column-count: 1;
}


/* this is used in H2 for the text with "no middle man" */
.n_m_m {
	width: 40px;
	font-size: x-small;
	/*display: inline-block;*/
	display: none;
	text-align: center;
	vertical-align: sub;
}












.p_c {
	width: 100% !important;
	border: none;
	height: 100% !important;
	border-radius: 0;
	max-height: none;
}








.login_form div>div:first-child {
	display: none;
}

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

.login_form>div>div {
	display: block;
}

.r_b_10 {
	border: none;
}

.login_form input::placeholder {
	color: #244e70;;
}

/* we make this div appear without js for the apk which has js disabled - so we use CSS instead: */

#recover_div a {
	pointer-events: none;
}

#recover_div:HOVER div {
	display: block !important;
}

.customBlockUI {
	background: none !important;4_c
	transition: background 3s;
}

.customOverlayUI {
	opacity: 0.94 !important;
	transition: opacity 3s;
}

.edit_field_container div.horizontal_navigation_div:first-child {
	display: none;
}

.selected_horizontal_navigation_div, .horizontal_navigation_div {
	padding-left: 10px;
	padding-right: 10px;
}

.insmall {
	display: table-cell;
	text-align: center;
	min-width: 30px;
}

.insmall_inln {
	display: inline !important;
}

.notinsmall, .not_in_small {display: none !important;}


/* not row / cell in small - used in group_1 in adminPanel */

.n_r_i_s {
	display: block;
	padding-top: 36px;
}

.n_cell_i_s {
	display: block;
	padding-top: 0 !important;
	line-height: initial;
}

input[type="tel"], input[type="email"] {
	margin-top: 10px;
}

.wraptocenter:HOVER {
	background: none;
}

div[rate_div] .t_cell {
	/*font-size: small;*/
}

.season {
	margin-top: 20px;
}

.c_3 {
	column-count: 1;
}

.c_4 {
	column-count: 2;
}

#fph {
	width: 106px;
	height: 90px;
	margin-top: 30px;
}

#fph .dt {
	display: none;
}

.placeHolder div {
/*	width : 80px;
	height : 80px;*/
	margin: 0;
}

#phpl {
	text-align: left;
}

.tabelize:not(.even_in_small)>div>div {
	display: block;
}

.tabelize div>div:nth-child(even) {
	padding-top: 0 !important;
}





#save_button {
	background-image: url(''), linear-gradient(45deg, #E0EDFD, #B5D7FD);
	background-position: left center;
	background-repeat: no-repeat;
}

#save_button.highlighted {
	background-image: url(''), linear-gradient(45deg, #FDEDE0, rgb(254, 84, 84));
}

#save_button div {
	margin-left: 0;
	width: auto;
	padding: 5px;
}


/* used for .fpd in client.edit.photos.tpl and has a function activated as well in client.edit.photos.tpl - not in admin.js because it needs to parse dom after the photos are loaded */

.collapsible {
	height: 25px;
	overflow: hidden;
	cursor: pointer;
}

.collapsible::before {
	padding-left: 35px;
	content: "ajutor";
	background: url("https://static.carta.ro/photos/images/question.png") 15px 7px no-repeat;
	display: block;
	height: 25px;
}











/* client display info window */

.cdiw {
	width: 200px;
	height: 74px;
	margin: -5px -12px;
}

.i_w_img {
	width: calc(50% - 2px);
	display: inline-block;
}

.i_w_img img {
	border: none;
	padding: 0;
	margin: 0;
	box-shadow: none;
	vertical-align: bottom;
}

/* POI, client and locations info window - the div containing text at the right of the .border_pic_left img */
.i_w_div {
	display: inline-block;
	margin: 0;
	width: calc(50% - 6px);
	font-size: xx-small;
	padding-left: 4px;
}

.i_w_w {
	width: auto;
}

.i_w_div .marker, .i_w_div .i_w_add {
	display: none;
}










.cend {
	border-radius: 0;
}



#payment_iframe {
	min-width: auto;
	width: 100%;
	min-height: auto;
	height: calc(100vh - 100px);
}







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

.rwimcs {
	max-width: initial;
}


/* page footer - for client and location footer, in page.tpl */

#p_f {
	min-height: calc(100vh - 32px);
	padding-top: 32px;
}

#p_f .logo {
	margin: 0 0 70px;
	text-align: center;
}




/* 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 {
	height: auto;
}




#w_preview {
	width: 100vw;
	height: 100%;
	border: none;
	border-radius: 0;
	position: relative;
	margin: 10px -16px 0;
}



#actual_desktop_website_preview {
	width: 410%;
	height: 410%;
	transform: scale(0.25) translate(-151%, -151%);
}









.group_header.expanded {
	margin-top: 0; /* undo the setting from wide.css */
}




.highlight_number {
	top: 16px;
	right: 16px;
}