@import url('//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=latin-ext');
@import url('//fonts.googleapis.com/css?family=Open+Sans:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=latin-ext');

.boxx { border: 1px solid transparent; border-radius: 6px; font-weight: bold; padding: .5vh; background: #222; box-shadow: inset 0 0 10px #000; text-align: center; }
.xsel { background: #ff9e1a !important; min-height: 50px; color: #404040 !important !important; }


label {
	cursor: pointer;
}
:input:focus { outline: none; }
.ctr { text-align: center; }
.hidden { display: none; }

/* 12 grid system */
/*
	@media only screen and ( min-width: 1366px ) {
		.col-1l { width: 8.3333333333333%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1366px ) and ( min-width: 1050px ) {
		.col-1m { width: 8.3333333333333%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1050px ) and ( min-width: 768px) {
		.col-1s { width: 8.3333333333333%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 768px ) {
		.col-1xs { width: 8.3333333333333%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( min-width: 1366px ) {
		.col-2l { width: 16.666666666667%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1366px ) and ( min-width: 1050px ) {
		.col-2m { width: 16.666666666667%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1050px ) and ( min-width: 768px) {
		.col-2s { width: 16.666666666667%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 768px ) {
		.col-2xs { width: 16.666666666667%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( min-width: 1366px ) {
		.col-3l { width: 25%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1366px ) and ( min-width: 1050px ) {
		.col-3m { width: 25%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1050px ) and ( min-width: 768px) {
		.col-3s { width: 25%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 768px ) {
		.col-3xs { width: 25%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( min-width: 1366px ) {
		.col-4l { width: 33.333333333333%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1366px ) and ( min-width: 1050px ) {
		.col-4m { width: 33.333333333333%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1050px ) and ( min-width: 768px) {
		.col-4s { width: 33.333333333333%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 768px ) {
		.col-4xs { width: 33.333333333333%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( min-width: 1366px ) {
		.col-5l { width: 41.666666666667%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1366px ) and ( min-width: 1050px ) {
		.col-5m { width: 41.666666666667%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1050px ) and ( min-width: 768px) {
		.col-5s { width: 41.666666666667%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 768px ) {
		.col-5xs { width: 41.666666666667%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( min-width: 1366px ) {
		.col-6l { width: 50%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1366px ) and ( min-width: 1050px ) {
		.col-6m { width: 50%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1050px ) and ( min-width: 768px) {
		.col-6s { width: 50%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 768px ) {
		.col-6xs { width: 50%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( min-width: 1366px ) {
		.col-7l { width: 58.333333333333%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1366px ) and ( min-width: 1050px ) {
		.col-7m { width: 58.333333333333%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1050px ) and ( min-width: 768px) {
		.col-7s { width: 58.333333333333%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 768px ) {
		.col-7xs { width: 58.333333333333%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( min-width: 1366px ) {
		.col-8l { width: 66.666666666667%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1366px ) and ( min-width: 1050px ) {
		.col-8m { width: 66.666666666667%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1050px ) and ( min-width: 768px) {
		.col-8s { width: 66.666666666667%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 768px ) {
		.col-8xs { width: 66.666666666667%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( min-width: 1366px ) {
		.col-9l { width: 75%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1366px ) and ( min-width: 1050px ) {
		.col-9m { width: 75%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1050px ) and ( min-width: 768px) {
		.col-9s { width: 75%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 768px ) {
		.col-9xs { width: 75%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( min-width: 1366px ) {
		.col-10l { width: 83.333333333333%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1366px ) and ( min-width: 1050px ) {
		.col-10m { width: 83.333333333333%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1050px ) and ( min-width: 768px) {
		.col-10s { width: 83.333333333333%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 768px ) {
		.col-10xs { width: 83.333333333333%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( min-width: 1366px ) {
		.col-11l { width: 91.666666666667%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1366px ) and ( min-width: 1050px ) {
		.col-11m { width: 91.666666666667%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1050px ) and ( min-width: 768px) {
		.col-11s { width: 91.666666666667%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 768px ) {
		.col-11xs { width: 91.666666666667%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( min-width: 1366px ) {
		.col-12l { width: 100%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1366px ) and ( min-width: 1050px ) {
		.col-12m { width: 100%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 1050px ) and ( min-width: 768px) {
		.col-12s { width: 100%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
	@media only screen and ( max-width: 768px ) {
		.col-12xs { width: 100%; margin-left: auto; margin-right: auto; display: inline-block; }
	}
*/

/* spacers */
/*
	.sp-1 { height: 1vh; }
	.sp-1-sm { display: none; }
	@media only screen and ( max-width: 768px ) {
		.sp-1-sm { height: 1vh; }
	}
	.sp-2 { height: 2vh; }
	.sp-2-sm { display: none; }
	@media only screen and ( max-width: 768px ) {
		.sp-2-sm { height: 2vh; }
	}
	.sp-3 { height: 3vh; }
	.sp-3-sm { display: none; }
	@media only screen and ( max-width: 768px ) {
		.sp-3-sm { height: 3vh; }
	}
	.sp-4 { height: 4vh; }
	.sp-4-sm { display: none; }
	@media only screen and ( max-width: 768px ) {
		.sp-4-sm { height: 4vh; }
	}
	.sp-5 { height: 5vh; }
	.sp-5-sm { display: none; }
	@media only screen and ( max-width: 768px ) {
		.sp-5-sm { height: 5vh; }
	}
	.sp-6 { height: 6vh; }
	.sp-6-sm { display: none; }
	@media only screen and ( max-width: 768px ) {
		.sp-6-sm { height: 6vh; }
	}
	.sp-7 { height: 7vh; }
	.sp-7-sm { display: none; }
	@media only screen and ( max-width: 768px ) {
		.sp-7-sm { height: 7vh; }
	}
	.sp-8 { height: 8vh; }
	.sp-8-sm { display: none; }
	@media only screen and ( max-width: 768px ) {
		.sp-8-sm { height: 8vh; }
	}
	.sp-9 { height: 9vh; }
	.sp-9-sm { display: none; }
	@media only screen and ( max-width: 768px ) {
		.sp-9-sm { height: 9vh; }
	}
	.sp-10 { height: 10vh; }
	.sp-10-sm { display: none; }
	@media only screen and ( max-width: 768px ) {
		.sp-10-sm { height: 10vh; }
	}
*/

/*  */

.flex2 { display:flex; align-items:center; padding:1vmin .5vmin; margin:.5vmin 0; }
.flex2 > *:nth-child( 1 ) { flex-basis:25%; }
.flex2 > *:nth-child( 2 ) { flex-basis:75%; }
.flex2 select[multiple] { width:90% !important; height:30vh !important; }

.flex2eq { display:flex; align-items:center; padding:1vmin .5vmin; margin:.5vmin 0; }
.flex2eq div { flex-basis:50%; }
.flex2eq select[multiple] { width:90% !important; height:30vh !important; }


.page-content {
	margin-left: 15vw;
/* 	display: flex; */
/* 	flex-wrap: wrap; */
	padding: 1vw;
}
@media screen and ( max-width: 960px ) {
	.page-content {
		margin-left: 0vw;
	}
}
@media screen and ( max-width: 360px ) {
	.home.page-content {
		max-width: 100%;
		overflow: scroll hidden;
	}
}
.page-content .fw {
	width:100%;
}

.html-header {
	
}
.html-footer {
	position: fixed;
	bottom: 0px;
	width: 100vw;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }


table { border-collapse: collapse; }
td, th { border: 1px dotted rgba( 255, 158, 26, .5 ); text-align: center; }
th { border: 1px dotted rgba( 255, 158, 26, .5 ); background-color: rgba( 255, 158, 26, 1 ); color: rgba( 32, 5, 40, 1 ); }

.lime { background-color: rgba(  ); }
.coral { background-color: rgba(  ); }

.box { border:1px solid rgba( 150, 150, 150, 1 ); border-radius:6px; }

/*  */

.grafs { width:100%; }
.grafs h1, .grafs h2, .grafs h3, .grafs h4, .grafs h5, .grafs h6 { margin:1vh 0 1vh 2vw; }

.cycle1 { background-color: ; }

.fa { text-decoration: none !important; color: inherit !important; }
.export.fa { vertical-align: sub; cursor: pointer; }

.menu img { max-width:80%; padding:2vh 0; display:block; margin:0 auto; }

/* generale */

body {
	background-color: #222;
	color: rgba( 255, 255, 255, 1 );
}




button {
	border: none;
	border-radius: 6px;
	font-size: 1.2rem;
	line-height: 1.3rem;
	text-align: center;
	padding: .4rem .8rem;
	cursor: pointer;
	font-weight: bold;
	letter-spacing: .1rem;
	display: block;
	margin: 0 auto;
}
button.ack, .nav {
	background-color: rgba( 255, 158, 26, 1 ) !important; color: #404040 !important;
}
button.nak {
	background-color: rgba( 255, 51, 129, 1 );
}

input[type=text],
input[type=number],
input[type=email],
input[type=password],
textarea {
	border: none;
	padding: .3rem .6rem;
	width: 100%;
	background-repeat: repeat;
	box-sizing: border-box;
	color: rgba( 32, 5, 40, 1 );
	font-size: 90%;
	border-bottom: .1rem solid rgba( 255, 51, 129, .7 );
}
textarea {
	border: .1rem solid rgba( 255, 51, 129, .7 );
}
	

/* user */

#user-login {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgba( 32, 5, 40, 1 );
}
#user-login form {
	border-top: .2rem solid rgba( 11, 255, 243, 1 );
	padding: 3rem;
	background: rgba( 255, 255, 255, 1 );
	border-radius: 6px;
}
#user-login form input {
	padding: .45rem .9rem;
	font-size: 100%;
	display: block;
	margin: .45rem 0;
}


/* pontaj / raportare */

#pontaj-raportare .ba.on {
	background-color: rgba( 11, 255, 243, 1 );
	color: rgba( 32, 5, 40, 1 );
}
#pontaj-raportare input,
#pontaj-raportare select,
#pontaj-raportare select option {
	background-color: rgba( 255, 255, 255, 1 );
	border: none;
	font-size: 1rem;
	line-height: 1.4rem;
	border-radius: 6px;
	text-align: center;
	width: 50%;
	display: block;
	margin: 0 auto;
}
#pontaj-raportare .row .nume {
	flex-direction: row;
	align-items: center;
	padding: .3rem 0;
}
#pontaj-raportare .row .locatie {
	width: 0 !important;
}
#pontaj-raportare .mecanica[tip="cr"] input,
#pontaj-raportare .ore input,
#pontaj-raportare .cr input {
	border: double rgba( 255, 51, 129, 1 );
}
#raport:not([style*="display:none"]):last-child{ /* bla */}

#pontaj-raportare .row { display:flex; outline:none; flex-wrap: wrap; margin: 1.5vmin 0; }
#pontaj-raportare .row .ooss { flex-basis: 100%; display: flex; flex-wrap: wrap; flex-direction: row; }
#pontaj-raportare .row textarea { flex-basis: 100%; margin: 1.5vmin .5vmin; border: 1px solid rgb( 255, 160, 45, .7 ); border-radius: 6px; }
#pontaj-raportare .row:not( .header ) { background-color:rgba( 0, 0, 0, .1 ); border: 1px solid rgba( 255, 51, 245, .5 ); }
#pontaj-raportare .row .oos { flex: 1; padding: 1.5vmin; margin: .5vmin; border: 2px solid rgba( 255, 255, 255, .2 ); border-radius: 6px; cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: start; }
#pontaj-raportare .row .oos:before { content: "\f0c8"; font: normal normal normal 20px/1 FontAwesome; flex-basis: 40px; }
#pontaj-raportare .row .oos.on:before { content: "\f14a"; }
#pontaj-raportare .row .stocBA { flex-basis: 100%; padding: 1.5vmin; margin: .5vmin; border: 2px solid rgba( 255, 255, 255, .8 ); border-radius: 6px; cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: start; }
#pontaj-raportare .row .stocBA:before { content: "\f0c8"; font: normal normal normal 20px/1 FontAwesome; flex-basis: 40px; }
#pontaj-raportare .row .stocBA.on:before { content: "\f14a"; }
#pontaj-raportare .row .orePierdute { flex-basis: 100%; padding: 1.5vmin; margin: .5vmin; border: 2px solid rgba( 255, 255, 255, .8 ); border-radius: 6px; cursor: pointer; display: flex; flex-direction: row !important; align-items: center; justify-content: start; }
#pontaj-raportare .row .orePierdute span { flex-basis: 40%; }
#pontaj-raportare .row .orePierdute select { flex-basis: 60%; }
#pontaj-raportare .row div { border:1px solid rgba( 0, 0, 0, 0.1 ); width:100%; text-align:center; display:flex; flex-direction:column; justify-content:center; flex:1; }

/* de sters */
#pontaj-raportare .row .info {
	font-size: 1.6rem;
	color: rgba( 0, 255, 133, 1 );
	border-radius: 6px;
	cursor: pointer;
	flex-basis: 15%;
	opacity: 0;
	border: none;
	font-family: FontAwesome;
}
#pontaj-raportare .row.are-date .info {
	opacity: 1;
}
/* #	de sters */
/* x389 de modificat clasa are-date2 mai jos */
#pontaj-raportare .row.are-date2 {
	border: 2px solid rgba( 255, 160, 46, .7 );
}
#pontaj-raportare .row.are-date2 .hideable {
	flex-basis:100%;
}
#pontaj-raportare .row.are-date2 .hideable {
	flex: 5;
}


#pontaj-raportare .row .nume span {
	flex-basis: 85%;
}
#pontaj-raportare .row .mecanica:not( [tip="cr"] ) { font-style:italic; }

#pontaj-raportare .err {
	background-color: rgba( 255, 51, 129, 1 );
}

.check-data {
	font-size: .8rem;
	line-height: 1rem;
	color: rgba( 32, 5, 40, 1 );
	font-weight: normal;
	max-width: 640px;
	margin: 0 auto;
}
.check-data .data {
	border: 1px solid rgba( 11, 255, 243, 1 );
	padding: 1vmin;
	margin: 1vmin;
	display: flex;
	flex-wrap: wrap;
}
.check-data .data > div {
	flex-basis: 50%;
}

.edit-data {
	font-size: .8rem;
	line-height: 1rem;
	color: rgba( 32, 5, 40, 1 );
	font-weight: normal;
	max-width: 640px;
	margin: 0 auto;
}
.edit-data .data {
	border: 1px solid rgba( 11, 255, 243, 1 );
	padding: 1vmin;
	margin: 1vmin;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
.edit-data .data > div {
	flex-basis: 25%;
	display: flex;
	flex-direction: column;
}
.edit-data .data > div span {
	flex-basis: 100%;
}
.edit-data .data > span {
	flex-basis: 10%;
}

@media screen and ( max-width: 960px ) {
	#pontaj-raportare .header { display:none; }
	#pontaj-raportare .row { flex-wrap:wrap; margin-top:2vh; border-radius:6px; }
	#pontaj-raportare .row .hideable { display:none; flex-basis:50%; padding:1vmin; border-radius:0px; }
	#pontaj-raportare .row .ooss.hideable { flex-basis: 100%; }
	#pontaj-raportare .row textarea.hideable { flex-basis: 100%; }
	#pontaj-raportare .row.on .hideable { display:flex; flex-direction:column; justify-content:space-between; }
	#pontaj-raportare .row .nume { flex-basis:100%; padding:2vh 0; cursor:pointer; display:flex; flex-direction:row; justify-content:flex-start; border:none; }
	#pontaj-raportare .row .locatie { flex-basis:100%; padding:2vh 0; cursor:pointer; flex-direction:row; justify-content:flex-start; border:none; }
/* 	#pontaj-raportare .row.on .nume { border:none; } */
	#pontaj-raportare .row .nume:before { flex-basis:10%; content:"\f067"; color:rgba( 16, 162, 16, .7 ); font: normal normal normal 14px/1 FontAwesome; }
	#pontaj-raportare .row.on .nume:before { content:"\f068"; color:rgba( 16, 162, 16, .7 ); }
	#pontaj-raportare .row .nume span { flex-basis: 80%; }
	#pontaj-raportare .row .nume div { flex-basis: 10%; }
	#pontaj-raportare .row div:before { display:block; }
	#pontaj-raportare .row .ore:before { content:"Total ore"; font-weight:bold; }
	#pontaj-raportare .row .cr:before { content:"Total CR"; font-weight:bold; }
	#pontaj-raportare .row .mecanica:before { content:attr( mecanica ) " = " attr( premiu ); white-space:pre-wrap; }
/* 	#pontaj-raportare .row .mecanica:before { content:attr( mecanica ) "\a= " attr( premiu ); white-space:pre-wrap; } */
	#pontaj-raportare .row .mecanica:not( [tip="cr"] ):before { font-style:italic; }
	#pontaj-raportare input,
	#pontaj-raportare select,
	#pontaj-raportare select option {
		padding: 1vmax .5vmin;
	}
}

/* pontaj / my-team */
#pontaj-my-team .ba {
	cursor: pointer;
	padding: 1.5vmax;
	position: relative;
	border-radius: 6px;
	border: 1px solid rgba( 255, 255, 255, .2 );
	display: flex;
	align-items: center;
	margin: .5vmin 0px;
}
#pontaj-my-team .ba.on {
	background-color: rgba( 11, 255, 243, 1 );
	color: rgba( 32, 5, 40, 1 );
}
#pontaj-my-team .ba:after {
	display: block;
	content: " ";
	clear: both;
}
#pontaj-my-team .ba div {
	float: left;
	flex-basis: 47.5%;
}
#pontaj-my-team .ba .sts {
	flex-basis: 5%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
#pontaj-my-team .ba .sts {
	background-image: url( "//login.cronosapp.ro/assets/icons/bifa-nak.png" );
	filter: invert( 100% );
}
#pontaj-my-team .ba.on .sts {
	background-image: url( "//login.cronosapp.ro/assets/icons/bifa-ack.png" );
	filter: invert( 0% );
}




/*  */

#graf1, #graf4 { height: 35vh; margin: 0 auto; }
#graf2, #graf3 { height: 35vh; margin: 0 auto; width: 35vh; }
#graf { height:35vh; width:100%; }