@import url("https://web.4sellerapp.it/themes/4seller/elegantfonts.css");

*, *:after, *:before {
box-sizing:content-box;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
}

select, input[type=file] {
	height: 20px;
	line-height: 20px;
}

html, body {
	height: 100%;
}

/* --------- */

header {
	background: #444;
	min-height: 50px;
	position: fixed;
	top: 0px;
	width: 100%;
    border-bottom: 1px solid #383838;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
	z-index: 200;
}

	header #logo {
		float:left;
		height: 50px;
		color: #ccc;
		text-align: center;
		line-height: 48px;
		/*background: url(https://web.4sellerapp.it/themes/4seller/_/img/logo.png) left no-repeat;		
		padding-left: 45px;*/
		margin-left: 20px;
		text-decoration: none;

		font-family: 'Open Sans', sans-serif;
		font-size: 20px; }

/*	header #logo:hover {
		color: #CCC;
	}
*/
	header nav {
		float:left;
		margin: 0px;
	}
	header nav ul {
		margin: 0px;
		padding: 0px;
	}	
	header nav ul li {	
		float:left;	
		font-family: 'Open Sans', sans-serif;
		font-size: 20px;
		line-height: 48px;
		margin-left: 20px;
	}
	header nav ul li a {
		text-decoration: none;
		color: #fff;
	}

	header nav ul li a:hover {
		color: #CCC;
		text-decoration: none;
	}	
	header nav ul li.currentpage a {
		color: #499CB4;
	}
		
	header #user-info {
		float:right;
		color: #f4f4f4;
		margin-right: 35px;
		margin-top: 8px;
	}
	header #user-info-season {
		float:left;
		width: 280px;
	}
		header #user-info-season .k-dropdown{
			width: 250px;
		}
	header #user-info-user {
		float:left;
		width: 200px;
		text-align: right;
	}
	

.wrapper {
	padding-top: 51px;
	/* height: calc(100% - 51px); */
		height: calc(100% - 71px);
}

.article,
article {
	position: relative;
	height: 100%;
}

	#container {
		height: 100%;
	}

/*------------ Generali  -----------*/
	.page {
		height: 100%;
	}

	.page .page-header {
		position: fixed;
		width: 100%; 
		z-index: 98;		
		margin: 0px;		
		border: 0px;
		padding: 0px;
		background: #EAEAEA;
	}
	.page-header-full-content {
		padding:0px 20px 0px 20px;	
		/*max-width: 1164px;*/	
	}
	
	#submenu {
		background: #CCC;
		padding: 10px 10px 10px 10px;
	}
		#submenu h2 {	
			margin: 0px;
			padding: 0px;
		}
	#submenu select, #submenu textarea,
	#submenu input, #submenu .uneditable-input {
		margin-bottom:0px;
	}

	#leftRail {
		position: fixed;
		left: 0px;
		top: 51px;
		height: 100%;
		width: 35px;
		padding: 8px;
		background: #f0f0f0;
		border: 1px solid #aaa;
  	    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
		z-index: 30;
	}
		
	#page-body {
		height: 100%;
	}

	.page .page-region {
		padding-top: 12px;
		height: 100%;
	}
	
	.page .page-region.have-header {
		padding-top: 90px;
		height: calc(100% - 90px);		
	}
	.page .page-region.have-header.header-collapsed {
		padding-top: 20px;
		height: calc(100% - 20px);		
	}	
	.page .page-region.have-leftRail {
		padding-left: 50px;
	}
	
	.page .page-region.admin {
		margin: 0px 50px 0px 70px;
	}
	
		.ccm-ui table td { padding: 10px;}
	
	
	.page .page-region-content {
		height: calc(100% - 10px);
		padding: 0px 20px;
	}
	
/**------ Elementi -----**/

.slideshow {
	margin-top: -51px;
}

.bg-color-white {
	background-color: #ffffff;
}

.bg-color-gray {
	background-color: #ccc;
}


[class*="span"] [class*="span"] {
  margin-left: 0px;
}


.alignleft, .toLeft {float:left;}
.alignright, .toRight {float:right;}

.horizontal-grow {
	float:left;
	margin-right: -300000px;
}

.clear {
	clear:both;
}

.invisible {
	display:none;
}

.k-pager-numbers .k-link {
	line-height: 24px;
}


/*---------- Form ------------*/

.form-horizontal[class*="span"] .control-group {
	margin-bottom: 8px;
}

.form-horizontal[class*="span"] .control-label {
	font-size:12px;
	width: 30%;
	line-height: 16px;
	padding-top:4px;
}
.form-horizontal[class*="span"] .controls {
	font-size:12px;
	margin-left: 35%;
	width:65%;
}
.form-horizontal[class*="span"] .actions {
	margin-top: 10px;
}
		
.form-horizontal[class*="span"] .controls input, 
.form-horizontal[class*="span"] .controls textarea, 
.form-horizontal[class*="span"] .controls select, 
.form-horizontal[class*="span"] .controls .uneditable-input {
	width: 85%;
	font-size: 12px;
	line-height: 16px;
	height: 16px;
	padding: 3px 4px;
	border: 1px solid #DADADA;
	border-radius: 0px;
	box-shadow: none;
}

.form-horizontal[class*="span"] .controls span.k-textbox {
	width: 90%;
}		
.form-horizontal[class*="span"] .controls .k-dropdown {
	width: 90%;
}		

.form-horizontal[class*="span"] .controls .k-textbox > input {
	width: 100%;
	border: none;
	height: 1.31em;
	line-height: 1.31em;			
	margin: 0;
	/*padding: 0.18em 0;*/
	padding: 0.1em 0;	
	box-shadow: none;
}				

.form-horizontal[class*="span"] .controls .k-textbox > input, 
.form-horizontal[class*="span"] .controls .k-autocomplete .k-input, 
.form-horizontal[class*="span"] .controls .k-picker-wrap .k-input, 
.form-horizontal[class*="span"] .controls .k-numeric-wrap .k-input, 
.form-horizontal[class*="span"] .controls .k-dropdown-wrap .k-input, 
.form-horizontal[class*="span"] .controls .k-selectbox .k-input {
	background: none;
	padding: 0.1em 0;
}


.form-horizontal .actions {
	margin-left: 180px;	
}


.control-group label.checkbox {
	margin-left: 180px;	
	width: auto;
}


/*---------  Login e Intro --------------*/


footer {
	position: fixed;
	bottom: 0px;
	width: 100%;
}


.central-panel {
	background:#bbb;
	width: 500px;
	margin: 30px auto;
	padding: 20px 30px;
    border: 1px solid #aaa;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}


/*--------- Admin -------------*/

.ccm-results-list {
	border: 2px solid #ccc;
	padding: 3px;
	border-collapse:collapse;
}
.ccm-results-list th,
.ccm-results-list td {
	padding: 4px 10px;
	border: 1px solid #ccc;
}


#lockseason_cell img {
	width:20px;
}

#contactManagePictureDiv {
	clear: both;
}

td.numbers {
	text-align: right;
}


/* Pagina 4seller */
ul.sub-menu{ font-size:26px; margin-left:20px; margin-top:20px;}
ul.sub-menu li {float:left; margin-right:46px; color:#404040; margin-bottom:20px; padding-bottom:8px;}
ul.sub-menu li a {color:#404040; font-weight:lighter; padding-bottom:10px; text-decoration:none; cursor:pointer;}
ul.sub-menu li:hover a, ul.submenu li a:hover{text-decoration:none;}
ul.sub-menu li.active {border-bottom:2px solid #19abe2;}
ul.sub-menu li:hover a{color:#0078b6;}
ul.sub-menu li.active:hover a {color:#404040;}

.rectangle{width:296px; min-height:196px; float:left; margin-right:30px; margin-bottom:30px; background:#19abe2; padding:4px 20px; color:#fff; position:relative; cursor:pointer;
border:2px solid #19abe2;
-moz-user-select: none;
transition: all 100ms ease-in 0s;
height: 226px;
}
	.rectangle.gray{background:#474849; border-color:#474849;}
	.rectangle.blue{background:#0078b6; border-color:#0078b6;}

.rectangle:hover{border-color:#0078b6; z-index:5;}
.rectangle.gray:hover{border-color:#0078b6;}
.rectangle.blue:hover{border-color:#19abe2;}
	
.rectangle.rectangle-x2{min-height:493px; line-height:2.3em; overflow:hidden;}
.rectangle.rectangle-x2 .first{letter-spacing:-0.5px;}
.rectangle.rectangle-x2 .spacer{height:3em;}
.rectangle.rectangle-x3{min-height:753px; line-height:2.3em;}
.rectangle h3{color:#fff; font-weight:400; font-size:18px; margin-top:0;}
#rectangles-container {max-width:1170px; width:100%; padding:20px;}
#rectangles-container .column{width:370px; float:left;}

.rectangle:active {
    transform: scale(0.95);
}

/* Counter Amount */
@keyframes fadeBottom {
0% {
    opacity: 0;
    transform: translateY(10%);
}
100% {
    opacity: 1;
    transform: translateY(0px);
}
}
@keyframes fadeBottom {
0% {
    opacity: 0;
    transform: translateY(10%);
}
100% {
    opacity: 1;
    transform: translateY(0px);
}
}
@keyframes fadeLeft {
0% {
    opacity: 0;
    transform: translateX(-10%);
}
100% {
    opacity: 1;
    transform: translateX(0px);
}
}
@keyframes fadeLeft {
0% {
    opacity: 0;
    transform: translateX(-10%);
}
100% {
    opacity: 1;
    transform: translateX(0px);
}
}
@keyframes fadeRight {
0% {
    opacity: 0;
    transform: translateX(10%);
}
100% {
    opacity: 1;
    transform: translateX(0px);
}
}
@keyframes fadeRight {
0% {
    opacity: 0;
    transform: translateX(10%);
}
100% {
    opacity: 1;
    transform: translateX(0px);
}
}
@keyframes fadeInRight {
0% {
    opacity: 0;
    transform: translateX(100%);
}
100% {
    opacity: 1;
    transform: translateX(0px);
}
}
@keyframes fadeInRight {
0% {
    opacity: 0;
    transform: translateX(100%);
}
100% {
    opacity: 1;
    transform: translateX(0px);
}
}
@keyframes fadeOutRight {
0% {
    opacity: 1;
    transform: translateX(0px);
}
100% {
    opacity: 0;
    transform: translateX(100%);
}
}
@keyframes fadeOutRight {
0% {
    opacity: 1;
    transform: translateX(0px);
}
100% {
    opacity: 0;
    transform: translateX(100%);
}
}
@keyframes fadeTop {
0% {
    opacity: 0;
    transform: translateY(-10%);
}
100% {
    opacity: 1;
    transform: translateX(0px);
}
}
@keyframes fadeTop {
0% {
    opacity: 0;
    transform: translateY(-10%);
}
100% {
    opacity: 1;
    transform: translateX(0px);
}
}
@keyframes fadeInRight {
0% {
    opacity: 0;
    transform: translateX(100%);
}
100% {
    opacity: 1;
    transform: translateX(0px);
}
}
@keyframes fadeInRight {
0% {
    opacity: 0;
    transform: translateX(100%);
}
100% {
    opacity: 1;
    transform: translateX(0px);
}
}
@keyframes fadeIn {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes fadeIn {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes slideWidth {
0% {
    width: 0;
}
100% {
}
}
@keyframes slideWidth {
0% {
    width: 0;
}
100% {
}
}

.et_pb_counter_container {
    background-color: #dddddd;
    color: #fff;
    display: block;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
}
.et_pb_counter_amount {
    display: block;
    float: left;
    font-size: 12px;
    opacity: 0;
    padding: 1px 3% 1px 1px;
    text-align: right;
}

.et_pb_counter_container .perc_number {
	position: absolute;
	left:2px;
	top:0px;
}

.et-waypoint {
    opacity: 0;
}
.et_pb_counters {
    margin-bottom: 30px;
    opacity: 1;
	margin-left:0;
}
.et_pb_counters, .et_pb_pricing, .et_pb_widget_area ul, .et_pb_tabs_controls {
    line-height: inherit !important;
    list-style: outside none none !important;
    padding: 0 !important;
}
.et_pb_animation_off {
    opacity: 1;
}
.et_pb_animation_left.et-animated {
    animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s normal none 1 running fadeLeft;
    opacity: 1;
}
.et_pb_animation_right.et-animated {
    animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s normal none 1 running fadeRight;
    opacity: 1;
}
.et_pb_animation_top.et-animated {
    animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s normal none 1 running fadeTop;
    opacity: 1;
}
.et_pb_animation_bottom.et-animated {
    animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s normal none 1 running fadeBottom;
    opacity: 1;
}
.et_pb_animation_fade_in.et-animated {
    animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s normal none 1 running fadeIn;
    opacity: 1;
}
.et-animated li span .et_pb_counter_amount {
    animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s normal none 1 running slideWidth;
    opacity: 1;
}

.et_pb_counter_first{float:left; font-size:50px; font-weight:lighter; color:#0078b6;}
.et_pb_counter_last{float:right; font-size:50px; font-weight:lighter;}
.et_pb_counter_sub_first{float:left; font-size:24px; font-weight:lighter; color:#0078b6;}
.et_pb_counter_sub_last{float:right; font-size:24px; font-weight:lighter;}

/* Box a colonne */
.rectangle .riga{ margin: 24px 0 47px;}
.rectangle .riga .title{float:left; margin-left:20px; font-size:22px; line-height:40px; font-weight:lighter;}
.rectangle .riga .value{float:right; margin-right:20px; font-size:34px; line-height:40px; font-weight:lighter;}
.rectangle hr{border-top:none; border-color:#dddddd;}

.rectangle .first{float:left; font-weight:lighter; max-width:75%; line-height:1.2em; padding-top:8px; padding-bottom:8px; text-transform:lowercase}
.rectangle .first:first-letter{text-transform:uppercase;}
.rectangle .last{float:right; font-weight:lighter; line-height:1.2em; padding-top:8px; padding-bottom:8px; }

#ds_budget_perc{
	font-size: 26px;
    font-weight: lighter;
    left: 147px;
    position: absolute;
    top: 113px;
}
#ds_budget_perc.ds_budget_perc-cento{left: 141px; letter-spacing: -2px;}
#ds_budget_graph .k-tooltip.k-tooltip-inverse {color:#474849 !important;}

/* Dashboard */
.pvtAxisContainer.pvtHorizList li {margin-right:4px; display:inline-table;  background:none; line-height:30px;}
.pvtAxisContainer.pvtHorizList li nobr {font-weight:400; font-size:11px; padding: 4px 6px;}

/* Per schermi piccoli */
@media only screen and (max-width: 800px) {
.column{}
.column .rectangle {}
}
@media only screen and (max-width: 650px) {
ul.submenu  {font-size:1.7em;}
ul.submenu li {margin-right:20px;}
}