::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
	background: #444; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #555; 
}
select#dt-length-0, input#dt-search-0, .mail_order_report {
	background: white;
	border-radius: 15px;
}
tbody{
	background: white;
}

*{
	font-family: 'avenir_next_lt_proregular';
}
b,strong,.bold{
	font-family: 'avenir_next_lt_probold';
}
body{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: black;
	overflow:hidden;
	margin:0;
}

.frame{
	display: block;
	position: absolute;
	width: 1920px;
	height: 1000px;
	top: calc(50% - 500px);
	left: calc(50% - 960px);
	background: rgb(200,200,200);
	background: -moz-linear-gradient(180deg, rgba(200, 200, 200, 1) 0%, rgb(0 112 116) 100%);
	background: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 1) 0%, rgb(0 112 116) 100%);
	background: linear-gradient(180deg, rgba(200, 200, 200, 1) 0%, rgb(0 112 116) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c8c8c8",endColorstr="#81a3bc",GradientType=1);
}

.frame>.bg_frame{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.frame>.bar{
	display: block;
	position: absolute;
	width: 220px;
	height: 1000px;
	top: calc(50% - 500px);
	left: calc(50% - 960px);
	color: white;
	/*background:rgba(0,0,0,0.45);*/
	z-index: 1;
}

.frame>.bar>.logo{
	display: block;
	position: absolute;
	width: 130px;
	height: fit-content;
	top: 0px;
	left: calc(50% - 65px);
}
.frame>.bar>.logo>.logo_image{
	display: block;
	position: reltive;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
}

.frame>.bar>.user{
	display: block;
	position: absolute;
	width: 100%;
	height: fit-content;
	top: 270px;
	left: 0;
	text-align: center;
	font-size: 18px;
	line-height: 30px;
}
.frame>.bar>.supplier_logo{
	cursor: pointer;
	position: absolute;
	height: 140px;
	top: 690px;
	left: 47.5px;
}
.frame>.bar>.supplier_logo>a>img{
	height: 140px;
	width: 125px;
}
.frame>.bar>.back{
	position: absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
}
.frame>.bar>.navigation{
	width: 210px;
	text-align: left;
	position: absolute;
	left: calc(50% - 105px);
	top: 450px;
	line-height: 45px;
	padding: 30px 30px;
}
.frame>.bar>.user>.yatch{
	font-size: 20px;
}

.frame>.content {
	display: block;
	position: absolute;
	width: calc(100% - 220px);
	height: 100%;
	top: 0;
	left: 220px;
	z-index: 0;
	/**GIADA**/
	/* border-bottom-left-radius: 170px 290px; */
	border-bottom-left-radius: 290px;
	background: linear-gradient(180deg, rgba(200, 200, 200, 1) 0%, rgb(129 188 180) 100%);
	/**GIADA END**/
}

.frame>.content>.pagename{
	display: block;
	position: absolute;
	top: 50px;
	left: 60px;
	font-size:36px;
	font-family: 'avenir_next_lt_probold';
	color: white;
	text-shadow: 0px 5px rgba(0, 0, 0, 0.45);
}

.frame>.content>.halfpage{
	display: block;
	position: absolute;
	width: 50%;
	height: calc(100% - 100px);
}
.frame>.content>.sx{
	top: 100px;
	left: 0;
}
.frame>.content>.dx{
	top: 100px;
	right: 0;
}
.frame>.content>.halfpage>.data_operator{
	position: relative;
	width: 100%;
	height: fit-content;
	left: 0;
	text-align:center;
}

.frame>.content>.halfpage>.data_operator>.send_email{				
	display: block;
	width: 500px;
	left: calc(50% - 250px);
	position: relative;
	font-family: 'avenir_next_lt_probold';
	margin-top: 49px;
	top: 0;
}
.frame>.content>.halfpage>.data_operator>.send_email.shadow{				
	background: rgba(0,0,0,0.45);
	border-radius: 20px;
	height: 42px;
	position: absolute;
	bottom: -4px;
	top: unset;
}
.frame>.content>.halfpage>.data_operator>.send_email>input.email{				
	display: inline-block;
	width: 400px;
	left: calc(50% - 250px);
	position: relative;
	border: #666666 1px solid;
	padding: 13px 10px 10px 10px;
	border-radius: 20px 0 0 20px;
}

.frame>.content>.halfpage>.data_operator>.send_email>.button_send{				
	background: #007074;
	display: inline-block;
	padding: 10px;
	width: 76px;
	left: calc(50% - 251px);
	position: relative;
	border: #666666 1px solid;
	border-radius: 0 7px 7px 0;
	color: white;
	font-family: 'avenir_next_lt_probold';
	border-radius: 0 20px 20px 0;
}

.frame>.content>.halfpage>.boxname,
.frame>.content>.halfpage>.data_operator>.name_operator,
.frame>.content>.halfpage>.data_operator>.qradvice,
.frame>.content>.halfpage>.data_operator>.date_operator{
	width: 100%;
	display: block;
	text-align: center;
	margin: 28px 0;
	font-size: 22px;
}
.frame>.content>.halfpage>.data_operator>.date_operator{
	margin: 11px 0;
}
.frame>.content>.halfpage>.data_operator>.date_operator>.label{
	font-family: 'avenir_next_lt_probold';
}
.frame>.content>.halfpage>.boxname{
	font-family: 'avenir_next_lt_probold';
	font-size: 28px;
}

.frame>.content>.halfpage>.data_operator>.disengage_operator{
	background: #007074;
	display: block;
	padding: 10px;
	width: 500px;
	left: calc(50% - 251px);
	position: relative;
	border: #666666 1px solid;
	border-radius: 7px;
	color: white;
	font-family: 'avenir_next_lt_probold';
	margin-top: 40px;
	border-radius:20px;
}

.frame>.content>.halfpage>.data_operator>.disengage_operator.shadow{
	background: rgba(0,0,0,0.45);
	position: absolute;
	height: 21px;
	border-radius: 20px;
	top: unset;
	bottom: -4px;
}

.sublined_link,
.underline_button{
	text-decoration: underline;
}
.square_button{
	padding: 5px 20px;
	border: solid 1px black;
	width: 120px;
	margin: 20px calc(50% - 80px);
}
.sublined_link,
.underline_button,
.square_button,
.page_link:not(.active),
.frame>.bar>.back,
.button_operator,
.frame>.content>.halfpage>.data_operator>.send_email>.button_send{
	cursor: pointer;	
	opacity:1;
	transiction: opacity 0.5s;
}	
.page_link.active{
	font-family: 'avenir_next_lt_probold';
}	

.sublined_link:hover,
.underline_button:hover,
.square_button:hover,
.page_link:not(.active):hover,
.frame>.bar>.back:hover,
.button_operator:hover,
.frame>.content>.halfpage>.data_operator>.send_email>.button_send:hover{
	opacity:0.5;
}	

/*GIADA*/	
.bg_img_operator{
position: absolute;
background: white;
width: 400px;
height: 400px;
top: 78px;
left: calc(50% - 200px);
border-radius: 200px;
}
.bg_img_operator.shadow {
background: rgba(0,0,0,0.45);
margin-top: 10px;
}
.qr_operator{			
position: absolute;
width: 270px;
left: calc(50% - 140px);
top: 140px;
}
.date_operator{
margin-top: 497px !important;
}
/*GIADA*/		
.image_operator>.icon{
bottom: 140px;
position: absolute;
height: fit-content;
display: inline-block;
vertical-align: bottom;
left: calc(50% - 123.5px);
}
.image_operator>.photo{
width: 500px;
height: 500px;
object-fit: contain;
border-radius: 30px;
}
.image_operator{
background-color:#666666;
border:#007074 8px solid;
border-radius:30px;
height:500px;
width:500px;
text-align:center;
position:relative;
top:0;
left:calc(50% - 250px);
}
button.request_btn {
background: #007074;
color: white;
padding: 10px 100px;
border-radius: 5px;
border: solid 1px black;
position: absolute;
top: 630px;
cursor: pointer;
}
.lightbox_content{
flex-direction:column;
position:initial;
height:90%;
justify-content:space-between;
}
.bg_lightbox {
background: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:-1;
}
.lightbox_content>.step{
color:white;
}
.back.shadow{
top: unset !important;
padding: 7px 10px !important;
width: 120px !important;
margin: 20px calc(50% - 80px) !important;
bottom: 15px !important;
background: rgba(0,0,0,0.45) !important;
}
.back{
top: unset !important;
padding: 7px 10px !important;
width: 120px !important;
margin: 20px calc(50% - 80px) !important;
}
.logout_button.shadow,
.back.shadow,
.purchase_button.shadow{
background: rgba(0, 0, 0, 0.45);
top: 95px;
left: 0px;
position: absolute;
}
.logout_button,
.back,
.purchase_button,
.btn_status,
.btn_ys{
border: none !important;
border-radius: 24px !important;
background-color: #007074;
color: white;
outline: none !important;
transition: 0.3s all;
position:relative;
z-index:5;
letter-spacing: 3px;
box-shadow: 0 5px 0 0 rgba(0,0,0,0.45);
}

.btn_login{
	box-shadow: 0 5px 0 0 rgba(0,0,0,0.45);
}
.btn_login:hover,
.logout_button:hover,
.back:hover,
.btn_status:hover{
top:5px;
opacity:1 !important;
box-shadow: 0 0 0 0 rgba(0,0,0,0.45);
}
.purchase_button:hover{
box-shadow: 0 0 0 0 rgba(0,0,0,0.45);
margin-top:5px;
}
a.link_condition {
position: absolute;
color: white;
bottom: 130px;
text-align: center;
width: 100%;
margin-left: 0;
letter-spacing: 2px;
}
.order_id{
font-size: 26px;
font-family: 'avenir_next_lt_probold';
color: white;
text-shadow: 0px 5px rgba(0, 0, 0, 0.45) !important;
}
.bar>.logo {
	width: 160px !important;
	left: 30px !important;
	position: absolute !important;
}
.bar span.logo_text.logo_shadow {
color: rgba(0, 0, 0, 0.5);
margin-top: 3px;
}
.bar span.logo_text {
font-family: 'Anago-Bold';
font-size: 46px;
left: 36px;
position: absolute;
text-transform: lowercase;
top: 190px;
color: #007074;
}

@media (orientation: portrait){
.preloader{
	width: 100% !important;
	height: 100% !important;
	top: 0;
	left: 0 !important;
}
}


.bar_mobile>.logo{
	position: absolute !important;
	width: 56px !important;
	top: calc(50% - 102px) !important;
    left: 10px !important;
}
.frame>.content{
	opacity:0;
}