#top{
	width:85%;
	height:4.5em;
	background:#fff;
	transition:all .3s cubic-bezier(0.460, 0.005, 0.000, 0.990);
	z-index:1;
	box-shadow:0px 1px 6px rgba(0,0,0,.25);
	position:relative;
	margin-left:15%;
	}

#top section{
	width:70%;	
	max-width:705px;
	position:absolute;
	right:23%;
	height:4.5em;
	} 

#top section li{
	transition:all ease-in-out 0.2s;
	float:right;
	width:18%;
	text-align:center;
	height:4.5em;
	position:relative;
	cursor:pointer;
	border-right:1px solid rgba(0,0,0,.1);
	}

#top section li:hover{
	background-color:#f9f9f9;
	}

#top section li h3{
	text-align:center;
	position:relative;
	margin-top:4.7em;
	color:#777;
	font-size:.62em;
	text-transform:uppercase;
	}

	
#top section li:nth-child(5){
	border-left:1px solid rgba(0,0,0,.1);
	}

.top-on{
	box-shadow:inset 0px -6px 0px -1px #F33030!important;}
	
.sprite-img-top{
	position:absolute;
	width:36px;
	height:36px;
	background:url(../img/sprite-img-top.png) no-repeat 0 0/185px;
	left:50%;
	top:8px;
	opacity:.9;
	margin-left:-18px;
	}


.sesion-icon{background-position:-77px 3px;}
.ingresar-icon{background-position:-112px 2px;}
.ayuda-icon{background-position:3px 1px;}
.config-icon{background-position:-36px 2px;}
.modificar-icon{background-position:-150px 2px;}


.box-datos-colegio{
	position:absolute;
	right:0;
	height:4.5em;
	width:23%;}

.box-datos-colegio aside{
	margin-right:70px;
	padding-top:5px;}

.box-img-colegio{
	width:50px;
	height:50px;
	background:#ccc;
	border-radius:100%;
	position:absolute;
	right:15px;
	top:10px;
	}

.box-img-colegio:after{
	width:50px;
	height:50px;
	font-size:12px;
	font-weight:bold;
	color:#fff;
	line-height:50px;
	position:relative;
	left:6px;
	text-transform:uppercase;
	text-align:center;	
	content:'demo'}

.box-datos-colegio h1{
	font-size:13px;
	line-height:1em;
	margin-top:15px;
	font-weight:bold;
	padding-left:40px;
	text-transform:uppercase;
	margin-right:10px;
	text-align:right;}

.box-datos-colegio h2{
	font-size:.75em;
	line-height:1.5em;
	margin-right:10px;
	text-align:right;}

.box-datos-colegio a{
	font-size:.65em;
	text-transform:uppercase;
	color:#f33030;
	border:0;
	height:22px;
	margin-top:5px;
	position:absolute;
	right:20px;}


.aside-top{}

.aside-top h1{
	font-size:25px;
	margin-left:65px;
	text-transform:uppercase;}
	
.aside-top h2{
	margin-left:65px;
	font-size:18px;
	line-height:18px;}

.icon-section-top{
	width:60px;
	height:60px;
	position:absolute;
	left:0;}

.modificardatos-icon{background:url(../img/modificar.png) no-repeat ;}
.agregarpersonas-icon{background:url(../img/ingresar.png) no-repeat ;}
.configlogro-icon{background:url(../img/config.png) no-repeat ;}

.hr-2{
	margin:30px 0;
	width:100%;
	height:1px;
	opacity:.5;
	background:#ccc;}


/*** MODIFICAR DATOS****/

.grid-datos-colegio{
	position:relative;
	margin:0 auto;
	margin-top:40px;
	width:90%;}
	
	.grid-datos-colegio h3{
		text-align:center;
		margin:30px 0;
		margin-top:40px;
		font-size:17px;
		text-transform:uppercase;
		font-weight:bold;}

	.grid-datos-colegio label{
		width:40%;
		text-align:right;
		font-size:12px;
		padding-right:10px;
		text-transform:uppercase;
		display:inline-block;
		position:relative;}
	
	.grid-datos-colegio label b{
		position:absolute;
		right:0;
		top:2px;
		left:5px;
		color:#f33030;}
	
	.grid-datos-colegio input{
		margin-left:10px;
		margin-bottom:7px;
		cursor:pointer;
		box-shadow:0;
		outline:0;
		transition:all ease-in-out .3s;
		font-size:13px;
		border:1px solid #ccc;
		padding:5px 8px;}
		
	.input-small{
		width:30px;}
		
	.input-large{
		width:300px;}
		
	
		

	
	.grid-datos-colegio .select-large{
		margin-left:10px;
		margin-bottom:7px;
		appearance:none;
		font-size:13px;
		background:url(../img/select-default.png) no-repeat 95% 52%/8px;
		padding:5px 8px;
		border:1px solid #ccc;
		padding-right:30px;
		box-shadow:0;
		outline:0;}
	
	.grid-datos-colegio .input-mid{
		width:200px;}
	
	.grid-datos-colegio .input-mid:disabled{
		background:#f5f5f5;}


	.grid-datos-colegio input:focus, .select-large:focus{
			border-color:#f33030;}
		
.box-input-cursos{
	position:relative;
	left:40%;
	margin-left:20px;
	margin-top:-20px;
	padding:8px;
	border:1px solid #ccc;
	width:400px;}

.box-input-cursos .label-cursos{
	font-size:11px;
	line-height:11px;
	text-align:left;
	width:90px!important;
	position:relative;
	top:-3px;
	cursor:pointer;
	display:inline-block;
	margin-left:5px;}


.b-central{
	background:url(../img/check.svg) no-repeat 120% 50%/12px #f33030;
	margin:30px auto;
	border:0;
	border-radius:3px;
	transition:all 0.25s cubic-bezier(0.460, 0.005, 0.000, 0.990);	
	padding:7px 20px;
	}

.b-central h6{
	text-transform:uppercase;
	font-size:12px;	
	transition:all 0.35s cubic-bezier(0.460, 0.005, 0.000, 0.990);
	color:#fff;
	position:relative;
	left:0;
	opacity:.9;
}

.b-central span{
	transition:all 0.35s cubic-bezier(0.460, 0.005, 0.000, 0.990);}

.b-central:hover{
	background-position:92% 50%;}

.b-central:hover h6{
	left:-12px;}


button:focus{
	outline:0;
	}

.recordatorio{
	font-size:12px;}


/***** AGREGAR PERSONA********/

.table-agregar-personas{
	position:relative;
	margin:30px auto;}
	
	
.tr-agregar-title-main{
	background:#666;
	color:#fff;
	font-size:11px;
	text-transform:uppercase;
	text-align:center;
	height:30px;}	

.tr-agregar-title{
	background:#999;
	color:#fff;
	font-size:10px;
	text-transform:uppercase;
	text-align:center;
	height:30px;}

.tr-agregar-title td, .tr-agregar-info td{
	border:1px solid #e6e6e6;}

.tr-agregar-info{
	height:35px;
	color:#666;
	cursor:pointer;
	font-size:11px;
	background:#fff;
	}
	
	.tr-agregar-info:hover{
		background:#E2E2E2;
		}

.tr-agregar-info td{
	padding-left:10px;}

.td-agregar-editar{
	width:40px;
	background:url(../img/editar.svg) no-repeat center/17px;
	}


.td-agregar-borrar{
	width:40px;
	background:url(../img/borrar.svg) no-repeat center/17px;
	}

/*** confid logro****/

#icons-logros{
	width:400px;
	position:relative;
	margin:0 auto;
	margin-top:20px;
	border:1px solid #ccc;
	background:#fff;
	height:150px;}

.ic-logrado-ejemplo{
	width:50%;
	height:150px;
	float:left;
	text-align:center;
	text-transform:uppercase;
	}

.ic-logrado-ejemplo h6{
	font-size:13px;
	width:50%;
	position:absolute;
	bottom:10px;}


.cmn-toggle {
  position: absolute;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  padding:2px 0;
  outline: none;
  user-select: none;
}

input.cmn-toggle-round + label {
  padding: 2px;
  width: 70px;
  height: 35px;
  background-color: #dddddd;
  border-radius: 30px;
}
input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.cmn-toggle-round + label:before {
  right: 0px;
  background-color: #f1f1f1;
  border-radius: 80px;
  transition: background 0.4s cubic-bezier(0.460, 0.005, 0.000, 0.990);
}
input.cmn-toggle-round + label:after {
  width: 37px;
  background-color: #fff;
  border-radius: 100%;
  transition: margin 0.4s cubic-bezier(0.460, 0.005, 0.000, 0.990);
}
input.cmn-toggle-round:checked + label:before {
  background-color: #00e396;
}
input.cmn-toggle-round:checked + label:after {
  margin-left: 35px;
}



/*** range****/

.cont-table-config-logro{
	position:relative;
	overflow:hidden;
	width:90%;
	position:relative;
	margin:0 auto;
	height:930px;
	transition:all 0.5s cubic-bezier(0.460, 0.005, 0.000, 0.990);}



.table-range-logro{
	}

.table-range-logro-title{
	background:#666;
	color:#fff;
	font-size:11px;
	text-transform:uppercase;
	text-align:center;
	height:30px;}

.table-range-logro-title td{
	border:1px solid #e6e6e6;}

.table-range-logro-info td{
	border:1px solid #e6e6e6;
	font-size:14px;
	height:80px;
	vertical-align:middle;
	padding:0 20px;
	}

.td-range-curso{
	width:20%;
	}


.input-cfg-logro{
	width:290px;
	height:30px;
	position:relative;
	margin:0 auto;
	}

.input-cfg-logro label{
	position:absolute;
	right:0;
	top:0;}

.input-cfg-logro h6{
	font-weight:bold;
	width:200px;
	text-align:right;
	text-transform:uppercase;
	font-size:14px;}


.input-cfg-logro h6 i{
	font-weight:normal;
	font-style:normal;	
	text-transform:uppercase;
	font-size:14px;}

.i-active{
	position:absolute;
	transition:all 0.3s cubic-bezier(0.460, 0.005, 0.000, 0.990);
	right:0px;}

.i-active-2{
	position:absolute;
	right:0px;
	transition:all 0.3s cubic-bezier(0.460, 0.005, 0.000, 0.990);
	margin-top:20px;}

.div-i-active{
	width:200px;
	position:relative;
	overflow:hidden;
	height:20px;}

.irs {
    position: relative; display: block;
            user-select: none;
}
    .irs-line {
        position: relative; display: block;
        overflow: hidden;
        outline: none !important;
    }
        .irs-line-left, .irs-line-mid, .irs-line-right {
            position: absolute; display: block;
            top: 0;
        }
        .irs-line-left {
            left: 0; width: 11%;
        }
        .irs-line-mid {
            left: 9%; width: 82%;
        }
        .irs-line-right {
            right: 0; width: 11%;
        }

    .irs-bar {
        position: absolute; display: block;
        left: 0; width: 0;
    }
        .irs-bar-edge {
            position: absolute; display: block;
            top: 0; left: 0;
        }

    .irs-shadow {
        position: absolute; display: none;
        left: 0; width: 0;
    }

    .irs-slider {
        position: absolute; display: block;
        cursor: default;
        z-index: 1;
    }
        .irs-slider.single {

        }
        .irs-slider.from {

        }
        .irs-slider.to {

        }
        .irs-slider.type_last {
            z-index: 2;
        }

    .irs-min {
        position: absolute; display: block;
        left: 0;
        cursor: default;
    }
    .irs-max {
        position: absolute; display: block;
        right: 0;
        cursor: default;
    }

    .irs-from, .irs-to, .irs-single {
        position: absolute; display: block;
        top: 0; left: 0;
        cursor: default;
        white-space: nowrap;
    }

.irs-grid {
    position: absolute; display: none;
    bottom: 0; left: 0;
    width: 100%; height: 20px;
}
.irs-with-grid .irs-grid {
    display: block;
}
    .irs-grid-pol {
        position: absolute;
        top: 0; left: 0;
        width: 1px; height: 8px;
        background: #000;
    }
    .irs-grid-pol.small {
        height: 4px;
    }
    .irs-grid-text {
        position: absolute;
        bottom: 0; left: 0;
        white-space: nowrap;
        text-align: center;
        font-size: 9px; line-height: 9px;
        padding: 0 3px;
        color: #000;
    }

.irs-disable-mask {
    position: absolute; display: block;
    top: 0; left: -1%;
    width: 102%; height: 100%;
    cursor: default;
    background: rgba(0,0,0,0.0);
    z-index: 2;
}
.irs-disabled {
    opacity: 0.4;
}
.lt-ie9 .irs-disabled {
    filter: alpha(opacity=40);
}


.irs-hidden-input {
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    z-index: -9999 !important;
    background: none !important;
    border-style: solid !important;
    border-color: transparent !important;
}


.irs-line-mid,
.irs-line-left,
.irs-line-right,
.irs-bar,
.irs-bar-edge,
.irs-slider {
    background: url(../img/sprite-skin-flat.png) repeat-x;
}



.irs {
    height: 40px;
}
.irs-with-grid {
    height: 60px;
}
.irs-line {
    height: 12px; top: 25px;
}
    .irs-line-left {
        height: 12px;
        background-position: 0 -30px;
    }
    .irs-line-mid {
        height: 12px;
        background-position: 0 0;
    }
    .irs-line-right {
        height: 12px;
        background-position: 100% -30px;
    }

.irs-bar {
    height: 12px; top: 25px;
    background-position: 0 -60px;
}
    .irs-bar-edge {
        top: 25px;
        height: 12px; width: 9px;
        background-position: 0 -90px;
    }

.irs-shadow {
    height: 3px; top: 34px;
    background: #000;
    opacity: 0.25;
}
.lt-ie9 .irs-shadow {
    filter: alpha(opacity=25);
}

.irs-slider {
    width: 16px; height: 18px;
    top: 22px;
    background-position: 0 -120px;
}
.irs-slider.state_hover, .irs-slider:hover {
    background-position: 0 -150px;
}

.irs-min, .irs-max {
    color: #999;
    font-size: 10px; line-height: 1.333;
    text-shadow: none;
    top: 0; padding: 1px 3px;
    background: #e1e4e9;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.irs-from, .irs-to, .irs-single {
    color: #fff;
    font-size: 11px; line-height: 1.333;
    text-shadow: none;
    padding: 2px 5px;
    background: #ed5565;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.irs-from:after, .irs-to:after, .irs-single:after {
    position: absolute; display: block; content: "";
    bottom: -6px; left: 50%;
    width: 0; height: 0;
    margin-left: -3px;
    overflow: hidden;
    border: 3px solid transparent;
    border-top-color: #ed5565;
}


.irs-grid-pol {
    background: #e1e4e9;
}
.irs-grid-text {
    color: #999;
}

.irs-disabled {
}