/*

CSS medium: for browsers with dimensions... - see in page.tpl
- present client description texts in clients list

*/

#wrapper{
	padding: 0;
}

.content {
	margin: auto;
}

/*
 * 
 * Horizontal Menus - here the hm is hidden on the left of the page
 *
 * 
 */

/* hm wrapper - so that hm would stay above the top of the page and only the right arrows would be seen */

.hmw_desters {
	position: absolute;
	height: 200px;
	top: -160px;
	vertical-align: bottom;
}


.hm {
	left: -250px;
	top: 0;
	padding-right: 70px;
	/*background: url('https://static.carta.ro/photos/images/right.d.png') right 16px no-repeat;*/
	/*background: url('https://static.carta.ro/photos/images/right.d.png') right bottom no-repeat;*/
	background-color: white;
	background-image: url('https://static.carta.ro/photos/images/ddd_menu.png');
	background-position: right bottom;
	background-repeat: no-repeat;
	/*transition: background .3s ease-out 1s;*/ /* these transition properties apply on "mouseout" */
	
	/* these will position the div relative to the wrapper */
	bottom: 0px;
	position: absolute;

	/* to look nice centered on CARTA logo */
	height: 60px;
}

.hm.hover {
	left: -16px;
	/*background: white;*/ /* engine.9.06.02: we switched to white background and the same header with text for CARTA.ro as the main.css */
	padding-right: 0;
	border: 1px solid black;
	box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
	/*transition: left .3s ease-out 0s;*/ /* these transition properties apply on hover */
	transition: left .3s; /* these transition properties apply on "mouseout" */
	/*top: 160px;*/ /* relative to the wrapper which is 160px above the top od the page */
	bottom: auto;
	height: auto;
	background-image: none;
}

.hm #clhmd {
	display: inline-block;
	margin: 50px 10px 0 20px;
	cursor: pointer;
}

/*.hm.hover:before {
	content: url('https://static.carta.ro/photos/images/ddd_close.png');
	position: relative;
	top: 10px;
	right: 10px;
	cursor: pointer;
}*/

#logo_fixed {display: none;}

#p1 {left: 50px;}
#fb {left: 50px;}


/* navigation div on the upper part of the page - its role is to remind the viewer on what page it is */

#nav_top {
	display: block;
	position: fixed;
	left: 0;
	right: 0;
	/*height: 48px;*/ /* we make it as high as necessary to fit all the info */
	z-index: 1000;
	background: rgb(255, 255, 255); /* fallback for browsers that don't support rgba */
	background: rgba(255, 255, 255, 0.9);
	border-bottom: 2px solid #006600;
	font-size: 28px;
	text-align: center;
	/*overflow: hidden;*/ /* not needed since we don't limit height anymore */
}

.nav_top_visible {
	top: 0px; /* if this is define in #nav_top instead of here, then adding in js the _hidden class will not override the attribute */
}

.nav_top_hidden {
	top: -150px;
	transition: top 1s;
}

#n_t_m {
	background-image: url('https://static.carta.ro/photos/images/ddd_menu.png');
	width: 32px;
	height: 32px;
	position: absolute;
	margin: 6px;
}

#nav_top span, #nav_top img {
	vertical-align: middle;
}

#nav_top img {margin-right: 20px;}

#nav_top .back-top-menu {
	float: right;
	position: static;
	margin: 10px;
	display: block;
}













#c_n {
	display: none;
}

#c_n_h {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
	width: calc(100% - 10px);
}





















.admin_headers {
	position: fixed;
	top: 0;
	margin: 0;
	height: 118px;
	padding: 10px 0 0 10px;
	z-index: 10; /* so that the ddm would cover module_title which has z-index only 1 */
	background-color: white;
	width: calc(100% - 10px);
}

.admin_headers H2 {
	/*display: none;*/
	margin: 0;
}

#logo_img {
	margin: auto;
}




.module {
	width: -moz-available; /* firefox */
	width: -webkit-fill-available; /*chrome*/
	border: none;
	margin: 0 0 40px;
	/*max-width: 100vw;*/ /* in viitor vreau sa fac 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[yearWidth] { /* this is for yearly income */
	max-width: none !important;
}
.module .module {
	max-width: none;
}

#client_main.module:nth-of-type(1), .module:nth-of-type(2) {
	max-width: 100%; /* cancel the restriction from main.css */
}

.module#client_main {
	width: 100% !important; /* in 14.02.03 so that #client_second would not sneak on the right of #client_main when the body.width was between 1100 and 1180; !important is so that it would not be overridden by width from main.css */
}

.module#client_second {
	position: static !important; /* !important has the role to override the fixed position set for #client_second by adjustVerticalPositionOnWindowScroll() in case of a scroll - see 14.02.03 */
	max-width: initial; /* to override the 300px from main.css */
}

#client_main .module_content {
	padding: 5px;
}

.modules {
	margin-top: 130px;
}

.module_client {
	margin: 0;
	border: none;
	max-width: none; /* cancel the restriction from main.css */
	width: 100%;
}

#client_main .module_title {
	border-radius: 0;
	position: fixed;
	top: 120px;
	width: 100%;
	z-index: 1;
}


/* not in wide: */

.n_i_w {
	display: none !important;
}


/* yes in wide - which means that only in desktop it's not displayed */
.y_i_w {
	display: block !important; /* we make it !important in order to overwrite the default display: none; */
}


/* n_i_w is used in js to hide or display sections in adminPanel - so, if we want something not displayed at all in wide viewport and narrower, we use the class bellow */

.notinwide {
	display: none !important;
}


.hidden_in_wide {
	visibility: hidden;
}


.group_header.expanded	 {
	border: none;
	height: auto;
	display: block;
	border-radius: 0;
	background-color: white;
	z-index: 0;
	/*margin-top: 200px;*/ /* 21.05.00: no idea why this was here */
}

.group_header.expanded > a > div::before {
	transform: rotate(180deg);
}

.group_header_spacer_visible {
	display: none;
}

.group_visible {
	border: none;
	/*padding: 30px 5px 50px;*/
	background-color: white;
	margin-top: 40px;
}

.group_visible > div {
    margin-top: 0; /* overwrites the 30px from main.css */
}

.edit_label {
	margin-top: 0;
	text-align: left;
	width: auto;
}

.edit_field_container {
	width: 100%;
}

.edit_field_container_wide {
	display: block;
	width: auto;
}

.inline_only_when_small {
	display: inline;
}

.t_w_s { /* table when small */
	display: table;
}

.t_r_w_s { /* table row when small */
	display: table-row;
}

.t_c_w_s { /* table cell when small */
	display: table-cell;
	padding: 5px;
}

div[rate_div] .t_cell {
	font-size: normal;
	line-height: initial;
}

div[rate_div] .t_row > div {
	display: block;
}

.cend {
	padding: 20px;
}

/* for kalendae (see kalendae.css) */
.k-separator {
	display: none !important;
}

.p_f_o {
	margin: 0 0 10px 0;
}

.c_3 {
	column-count: 2;
}

.dwt {
	margin-top: 20px !important;
}

#save_button_div {
	position: fixed;
	bottom: 0;
	margin-bottom: 0;
	left: 0;
	right: 0;
	background-color: white;
	padding: 5px;
	z-index: 2000; /* 21.04.00: let it be above #cookie-bar */ /* 20.08.02: z-index: 2; let it be above websites previews wrappers */
}

#save_button {display: none;}

#save_button.highlighted {display: block;}

.button.highlighted.green div {
	display: inline-block;
	width: auto;
}

.table_content_180 {border: 1px solid silver; border-radius: 5px;}







#a_w_p_desktop_wrapper {
	width: calc(100% - 10px);
  height: auto;
  margin-left: 0;
  aspect-ratio: 8/5;
}


#actual_desktop_website_preview {
	width: 200%;
	height: 200%;
	transform: scale(0.5) translate(-50%, -50%);
}






.highlights {
	padding: 10px;
}


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