/***** Reset Css default values *****/


/***** Etiquetas y campos de los formularios *****/
.etiqueta {font: 110% Arial;color:#000000;background: white;text-decoration:none;}
.etiqueta2 {font: 90% Arial;color:#000000;background: white;text-decoration:none;}
.etiquetajust {font: 100% Arial;color:#000000;text-decoration:none;text-align: justify;}
.camcon {background: #ffffff;padding: 1px;width: 100%;border-right:1px solid #FFFFFF;border-bottom:1px solid #000000;border-left:1px solid #ffffff;border-top:1px solid #ffffff;font: 100% Arial;color:#000000;}
.camarea {background: #ffffff;padding: 1px;width: 100%;border-right:1px solid #000000;border-bottom:1px solid #000000;border-left:1px solid #000000;border-top:1px solid #000000;font: 100% Arial;color:#000000;}
.camareax {background: #efefef;padding: 1px;width: 100%;border-right:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;border-left:1px solid #CCCCCC;border-top:1px solid #CCCCCC;font: 100% Arial;color:#000000;}
.camcon2 {background: #efefef;padding: 1px;width: 50%;border-right:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;border-left:1px solid #CCCCCC;border-top:1px solid #CCCCCC;font: 100% Arial;color:#000000;}
.camcon3 {background: #efefef;width: 80%;font: 50% Arial;color:#000000;}
.camcon4 {background: #efefef;padding: 1px;width: 90%;border-right:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;border-left:1px solid #CCCCCC;border-top:1px solid #CCCCCC;font: 100% Arial;color:#000000;}
.tit {font: 120% Arial;color:#002147;font-weight:bold;text-transform: uppercase;}
.subtit {font: 110% Arial;color:#002147;}
.camconlog {background: #efefef;padding: 1px;width: 150;border-right:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;border-left:1px solid #CCCCCC;border-top:1px solid #CCCCCC;font: 100% Arial;color:#000000;}


.info {font: 80% Arial;color:#000000;background: #EAF2FF;text-decoration:none;}

.titadm {font: 130% Arial;color:#114D97;font-weight:bold;}
.titsta {font: 130% Arial;color:#2E77CB;font-weight:bold;}
.titque {font: 130% Arial;color:#4993E7;font-weight:bold;}
.titpri {font: 130% Arial;color:#60ACF9;font-weight:bold;}
.titeng {font: 130% Arial;color:#F7E247;font-weight:bold;}
.titmat {font: 130% Arial;color:#FDC700;font-weight:bold;}
.tithea {font: 130% Arial;color:#F37F1C;font-weight:bold;}
.titoth {font: 130% Arial;color:#E1E3E7;font-weight:bold;}

/***** Tablas de los formularios *****/
.tabla {width:100%;border-spacing:0px;}

/******** Background *****************/
.bg {
    background-color: #E1E3E7;
}

/***** Botones *****/
.boton{border:1px solid #6f6f6e;border-radius: 10px;display:block; padding:8px 16px; overflow:hidden;text-decoration:none;color:#002147;background-color:#ebebeb;text-align:center;cursor:pointer;white-space:nowrap;font:80% Arial;}
.boton:hover{color:#ebebeb;background-color:#002147;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}

.boton2{position:fixed;bottom:20px;right:20px;height:50px;border:1px solid #6f6f6e;border-radius: 10px;display:block; padding:8px 16px; overflow:hidden;text-decoration:none;color:white;background-color:red;text-align:center;cursor:pointer;white-space:nowrap;font:80% Arial;}
.boton2:hover{position:fixed;bottom:20px;right:20px;color:#ebebeb;background-color:#002147;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}




/*********** Tablas de data ***********/
.encab {background-image: linear-gradient(#1B58A3, #5E86BA, #1B58A3);padding:0px;border:0px;font: 75% Arial;color:white;}
.encab2 {padding:0px;border:0px;font: 100% Arial;color:white;text-decoration:none;}
.encab2:hover {padding:0px;border:0px;font: 100% Arial;color:white;text-decoration:none;}

.fil1 {background: white;padding:0px;border-right:0px;border-left:0px;border-top:0px;border-bottom:1px solid #D6D6D6;font: 80% Arial;color:#424242;text-decoration:none;}
.fil2 {background: #EBEBEB;padding:0px;border-right:0px;border-left:0px;border-top:0px;border-bottom:1px solid #D6D6D6;font: 80% Arial;color:#424242;text-decoration:none;}
.fillnk {padding:0px;border-right:0px;border-left:0px;border-top:0px;border-bottom:0px;font: 100% Arial;color:#1B58A3;text-decoration:none;} 
.seccion {background-image: linear-gradient(#1B58A3, #5E86BA, #1B58A3);border-right:0px;border-left:0px;border-top:0px solid #E1E3E7;border-bottom:0px;font: 70% Arial;color:#EBEBEB;}
.secciontit {background-image: linear-gradient(#083D77, #557AA9, #083D77);border-right:0px;border-left:0px;border-top:0px solid #E1E3E7;border-bottom:0px;font: 70% Arial;color:#EBEBEB;}
.seccionemail {border-right:0px;border-left:0px;border-top:1px solid #002147;border-bottom:0px;font: 70% Arial;color:#002147;background: white;text-decoration:none;}
.info {font: 70% Arial;color:#707070;background: #FCFFF0;text-decoration:none;}
.fields {font: 70% Arial;color:#000000;background: white;text-decoration:none;}
.fields2 {font: 90% Arial;color:#000000;background: white;text-decoration:none;}
.lnk {font: 90% Arial;color:#1B58A3;background: #FCFFF0;text-decoration:none;}
.lnkbtn {font: 90% Arial;color:#002147;background: white;text-decoration:none;}
.lnkbtn:hover {font: 90% Arial;color:#1B58A3;background: white;text-decoration:none;}
.camcon3 {background: #efefef;padding: 1px;width: 75%;border-right:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;border-left:1px solid #CCCCCC;border-top:1px solid #CCCCCC;font: 100% Arial;color:#000000;}
.camarea2 {background: #efefef;padding: 1px;width: 75%;border-right:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;border-left:1px solid #CCCCCC;border-top:1px solid #CCCCCC;font: 100% Arial;color:#000000;height: 200px;}


/***** Responsive ******/
.body {
    font-family:Arial;
}

.tabla2 {
    background-color: #FCFFF0;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:15px;
    /* box-sizing:border-box; */
}

.contenedor {
    background-color: white;
    width:100%;
    height:100%;
    max-width:1200px;
    margin:0 auto;
    overflow:scroll;
    padding:10px;
    /* box-sizing:border-box; */
}

.tabrow {
    background-color: #002147;
    width:100%;
    height:70px;
}

@media screen and (max-width:400px) {
    .contenedor {
        width:100%;
    }
}

/******** Banner *********/
.ban {
  background-image: url('Images/banner.jpg');
  background-repeat: repeat-x;
}


/******** Menu ********/
.navbar {
  overflow: hidden;
  background-image: linear-gradient(#002147, #002147a1, #002147);
  font-family:Arial;
}

.navbar a {
  float: left;
  font-family:Arial;
  font-size: 12px;
  color: #EFEFEF;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 12px;
  font-family:Arial;
  border: none;
  outline: none;
  color: #EFEFEF;
  padding: 14px 16px;
  background-color: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-image: linear-gradient(#F1C232, #FFE599, #F1C232);
   color: #002147;
}

.dropdown-content {
  display: none;
  position: absolute;
  font-family:Arial;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #002147;
  padding: 12px 16px;
  text-decoration: none;
  font-family:Arial;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #E4E7CB;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/********** Tabs *********/

.titinstructions {font: 100% Arial;color:#002147;}
.infoinstructions {font: 90% Arial;color:#002147;}

/* Style tab links */
.tablink {
  background-color: #002147;
  color: white;
  float: left;
  border-right: 1px solid #EBEBEB;
  outline: none;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 14px;
  width: 12.5%;
  height:70px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.tablink:hover {
  background-color: #777;
}

.tabdone {
  background-color: #00B800;
  color: white;
  float: left;
  border-right: 1px solid #EBEBEB;
  outline: none;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 14px;
  width: 12.5%;
  height:70px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}



/* #Admissions {background-color: #114D97;}
#statement {background-color: #2E77CB;}
#Questionnaire {background-color: #4993E7;}
#PrincipalCounselerRecommendation {background-color: #60ACF9;}
#EnglishTeacherRecommendation {background-color: #F7E247;}
#MathTeacherRecommendation {background-color: #FDC700;}
#Health {background-color: #F37F1C;}
#Other {background-color: #E1E3E7;} */


/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  background-color: white;
  color: black;
  display: none;
  padding:70px 0px 0px 0px;
  height:100%;
  width:100%;
}

/************** Messages *************/

.msg {
  background-color: green;
  font-family:Arial;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  vertical-align: middle;
  padding: 20px 20px;
  font-size: 20px;
  width: 100%;
}

.msg2 {
  background-color: white;
  font-family:Arial;
  color: black;
  float: center;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 14px;
  width: 100%;
  height:50px;
}

/************ Flow steps arrows ***************/

.arrow-container > div {
    float: left;
}

.arrow-left-done {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 20px solid #6dcc50;
    border-bottom: 20px solid #6dcc50;
    border-left: 12px solid transparent;
}

.arrow-ctr-done {
    display: inline-block;
    width: 130px;
    background: #6dcc50;
    min-height: 40px;
    line-height: 40px;
    position: relative;
    font-family:Arial;
    font-size: 10px;color:#002147;font-weight:bold;text-align: center;
}

.arrow-right-done {
    display: inline-block;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 12px solid #6dcc50;
    position: relative;
}

.arrow-left-current {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 20px solid #fdc700;
    border-bottom: 20px solid #fdc700;
    border-left: 12px solid transparent;
}

.arrow-ctr-current {
    display: inline-block;
    width: 130px;
    background: #fdc700;
    min-height: 40px;
    line-height: 40px;
    position: relative;
    text-align: center;
    font-family:Arial;
    font-size: 10px;color:#002147;font-weight:bold;
}

.arrow-right-current {
    display: inline-block;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 12px solid #fdc700;
    position: relative;
}

.arrow-left {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 20px solid #E1E3E7;
    border-bottom: 20px solid #E1E3E7;
    border-left: 12px solid transparent;
}

.arrow-ctr {
    display: inline-block;
    width: 130px;
    background: #E1E3E7;
    min-height: 20px;
    line-height: 40px;
    position: relative;
    font-family:Arial;
    font-size: 10px;color:#002147;font-weight:bold;text-align: center;
}

.arrow-right {
    display: inline-block;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 12px solid #E1E3E7;
    position: relative;
}