/*----------------------------------------GENERAL*/

*{margin: 0px;padding: 0px;font-family: "Segoe UI Light","Calibri";}
.contentWrapper{width: 100%;max-width: 600px;margin: auto;}
.contentPanel{width: calc(100% - 40px);padding: 0px 20px;position:relative;}
.subtitle{font-size: 22px;font-family: "Segoe UI","Arial";font-weight: bold;}
a,input,button,textarea,select{-webkit-transition:all 100ms ease;-moz-transition:all 100ms ease;-o-transition:all 100ms ease;transition:all 100ms ease;}
input[type=number]::-webkit-inner-spin-button{-webkit-appearance: none;}
input[type=number]{-moz-appearance:textfield;}
html{height: 100%;}
body{min-height: 100%;height:100%;position: relative;}

/*---------------------------------------CABECERA*/

/*header{width: 100%;color: #fff;height: 100%;top: 0px;position: fixed;}
header{background-size: cover;background-repeat:no-repeat;background-position:50% 50%;}
#logo{position: absolute;top: 0px;color:rgba(255,255,255,1);text-shadow: 3px 3px 8px rgba(0,0,0,1);}*/
#logo{margin:auto;font-size: 50px;padding: 20px 0px;font-weight: bold;}
#logo{width:calc(100% - 40px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;}

/*-----------------------------------------CUERPO*/

section{min-height:100%;}
section>.contentWrapper{background-color: #fff;padding-top:20px;}
section>.contentWrapper p{font-size: 18px;padding: 0px 0px 20px 0px;}
section>.contentWrapper .subtitle{padding-bottom:10px;}
#inst{text-align:center;}
#mode{margin-bottom: 20px;text-align: center;font-size:16px;}
#mode>a{text-decoration: none;color: #1a1a1a;background-color: #ebebeb;font-family: "Segoe UI","Arial";font-weight: bold;}
#mode>a{display:inline-block;line-height:30px;padding:0px 10px;}
#mode>a:first-child{border-radius:25px 0px 0px 25px;padding-left:25px;}
#mode>a:last-child{border-radius:0px 25px 25px 0px;padding-right:25px;}
#mode>a:hover{background-color: #cfcfcf;color: #000;}
#mode>a.active{background-color: #afafaf;color: #fff;}
#input,#control{padding-bottom: 20px;}
textarea#input_scores{border:0px;border:1px solid #777;padding:10px;font-size:15px;}
textarea#input_scores{display:inline-block;height:20px;line-height:20px;border-radius:20px;text-align:center;}
textarea#input_scores{resize:none;margin-bottom:-4px;width:calc(100% - 22px);overflow:hidden;}
textarea#input_scores:hover{background-color:#f0f0ff;}
textarea#input_scores:focus,input{outline: none;}
#block_scores{padding-top:6px;}
.input_score{padding-bottom:6px;}
.input_score.static{text-align:center;}
.input_score.variable input{float:left;display:block;margin-right:5px;}
.input_score.static input{display:inline-block;}
.input_score.static input+input{display:inline-block;margin-left:5px;}
.input_score input{border:none;border-bottom:1px solid #ccc;padding:2px 10px;font-size:16px;height:25px;}
.input_score input:not([readonly]):hover{background-color:#f0f0ff;}
.input_score input[name="level"]{width: 40px;text-align:center;}
.input_score input[name="scoreType"]{width: calc(100% - 320px);}
.input_score input[name="weight"]{width: 60px;text-align:center;}
.input_score input[name="score"]{width: 60px;text-align:center;}
#control{border-bottom: 1px solid #777;margin-bottom: 20px;}
#control>div{text-align:center;}
#evaluate,#clear,.add,.delete{color:#1a1a1a;text-decoration:none;font-weight:bold;background-color:#ebebeb;}
.add,.delete{float:right;display:block;text-align:center;}
.add,.delete{width:30px;line-height:30px;font-size:16px;border-radius:15px;}
.add:hover{color: #0b0;background-color: #d3ffd3;}
.delete:hover{color: #b00;background-color: #ffd3d3;}
#deletables,#finalexam{text-align:center;padding:6px 0pc;}
#finalexam>input[type=checkbox]{transform:translateY(1px);}
#evaluate,#clear{display:inline-block;}
#evaluate{font-size:22px;padding:4px 24px;border-radius:24px;}
#evaluate:hover{color:#00b;background-color:#d3d3ff;}
#clear{font-size:16px;padding:2px 8px;border-radius:13px;}
#clear:hover{color:#b00;background-color:#ffd3d3;}
#language{border:none;padding:2px 8px;color:#1a1a1a;margin:0px !important;text-align-last:center !important;}
#language{background-color:rgba(235,235,235,0.75);border-radius:13px;outline:none;padding-left:23px;font-weight:bold;}
#language:hover{color:#000;background-color:#d8d8d8;cursor:pointer;}
#detail>img{width: 100%;display: block;max-width: 600px;margin: auto;padding-bottom: 20px;}

/*-------------------------------------RESULTADOS*/

#result{width: 100%;max-width: 600px;margin:auto;display: none;}
#chart,.diagnostic{padding-bottom: 20px;}
.row{display: block;width: 100%;}
.row>div,.row>div>span{font-family: "Segoe UI","Arial";font-size: 16px;font-weight: normal;}
.row.header>div,.row.header>div>span{font-weight: bold;font-size: 18px;}
.row.header{border-bottom: 1px solid #777;}
.row.tuple{border-bottom: 1px solid #ccc;}
.scoreType>span{display: none;}
.scoreType,.weight,.score{float: left;padding: 2px 10px;}
.row.header>.scoreType,.row.header>.weight,.row.header>.score{padding:5px 10px;}
.scoreType{width: calc(100% - 260px);}
.weight,.score{width: 100px;}
.scoreType,.weight,.score{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row.tuple.average>div,.row.tuple.average>div>span{font-weight:bold;}

/*------------------------------------DIAGNOSTICO*/

.diagnostic{width: 100%;max-width: 320px;margin: auto;}
.diagnostic>.row,.diagnostic>.row>span{font-family: "Segoe UI","Arial";font-size: 16px;font-weight: normal;}
span[stts="1"]{color:#f00;}
span[stts="2"]{color:#f70;}
span[stts="3"]{color:#0b0;}
span[stts="4"]{color:#00f;}

/*----------------------------------PIE DE PAGINA*/

footer{width: 100%;background-color: rgb(26,37,116);color: #fff;padding: 1px 0px;position: relative;}
footer p{margin:10px 0px;font-size: 16px;}
footer .app{display:inline-block;width:40%;}
footer .app+.app+.app{margin-top:10px;}
footer .app>a{display:block;width:80px;height:80px;margin:auto;}
footer .app>a{background-size: cover;background-repeat:no-repeat;background-position:50% 50%;}
footer .app>span{display:block;text-align:center;}
footer a{color: #fff;text-decoration: none;}
footer a:hover{text-decoration: underline;}

/*-------------------------------------RESPONSIVE*/

@media screen and (max-width: 600px){
	#logo{font-size: 40px;}
	.subtitle{font-size: 18px;}
	section>.contentWrapper p{font-size: 16px;}
	footer p{font-size: 14px;}
	footer .app{display:block;width:100%;margin:10px 0px;font-size: 14px;}
	/*#mode{font-size: 18px;}*/
	.input_score input{font-size:14px;padding:2px 5px;}
	.input_score input[name="level"]{width: 40px;}
	.input_score input[name="scoreType"]{width: calc(100% - 250px);}
	.input_score input[name="weight"]{width: 50px;}
	.input_score input[name="score"]{width: 40px;}
	.row>div,.row>div>span{font-size: 14px;}
	.row.header>div,.row.header>div>span{font-size: 16px;}
	.scoreType{width: calc(100% - 220px);}
	.weight,.score{width: 80px;}
	.diagnostic>.row,.diagnostic>.row>span{font-size: 14px;}
}
@media screen and (max-width: 400px){
	#mode{font-size: 14px;}
	/*#mode>a{display:block;margin:auto;border-radius:20px !important;}
	#mode>a{line-height:40px;padding:0px 10px;}
	#mode>a:first-child{border-radius:20px 0px 0px 20px;padding-left:12px;}
	#mode>a:last-child{border-radius:0px 20px 20px 0px;padding-right:12px;}*/
	textarea#input_scores{font-size:13px;}
	.input_score input{padding:2px 5px;}
	.input_score input[name="level"]{width: 12px;}
	.input_score input[name="scoreType"]{width: calc(100% - 160px);}
	.input_score input[name="weight"]{width: 20px;}
	.input_score input[name="score"]{width: 20px;}
	.add,.delete{width:24px;line-height:24px;font-size:12px;border-radius:12px;margin-top:3px;}
	.scoreType{width: calc(100% - 20px);}
	.weight,.score{display: none;}
	.scoreType>span{display: inline;}
}