/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

/* CUSTOMIZE THE video background
-------------------------------------------------- */

.bgIntro{

   /* background-color: #6c757d; */
    background-image: url("../img/cursosonline/banner-video.jpg");
}

div.col-video-presentacion {
  background-color: black;
}
.cuerpo-curso .row {
  margin-bottom: 1rem;
}

.cuerpo-curso .embed-responsive-scribehow {
  height: 650px;
}

.list-group-item1 {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #3d4d6f47;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.espaciosH{
	padding-right:20px!important;
	padding-left:0px!important;
}


.bg-fondo{
	background-image: url("../img/cursosonline/bgfuturasmus.jpg");
	background-position: right top; 
	background-repeat: repeat-x;
	background-color: #305099;
}


.cajaLogin {
    border-radius: 25px;
    background: #3a3f4fb5;
    padding: 20px;   
    height: auto;
	width: 100%;
	padding-top: 30px;
}

.cajaInfo {
    border-radius: 25px;
    background: #3a3f4fb5;
    padding: 20px;
    max-width: 100%;
    height: auto;
    width: 100%;
}


.bgBlanco{
  background-color: white;
}
.blanco{

	color:white;
}
.blanco a{

	color: white;
}

.blanco hr{

	border-top: 1px solid rgb(255, 255, 255)!important;
}

.btn-primary.verde {
    color: #fff;
    background-color: #3aaa35;
    border-color: #3aaa35;
}

 .bgcursobasico{
 	background-color:  #242e42;
 } 
 .bgcurso{
 	background-color: #fff;
 } 
 
 .pdcurso{

 	padding: 30px 50px 30px!important ;
 }

.cuadrolat{
	padding: 10px 20px 5px;
}

.botonPanel{
	width: 100%;
}

#myTabContent{

	background-color: #fff;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #464a4c;
    background-color: #fff!important;    
    height: 42px;
}

.pspace {
    margin-top: 0;
    margin-bottom: 0.2rem!important;
}

.border-bottomAc {
    border-bottom: 1px solid #000000 !important;
}



/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */
.fondoOnline {
  background-color: #242e42;
}

.fondoOnline2{
  background-color: #f1f1f1;
}
.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


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

@media (min-width: 40em) {
  /* Bump up size of carousel content */
 

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 1rem;
  }
}

/* ROW TABLE COURSES
------------------------------------------------------- */

.row-cursos {
	border-top: solid 1px;
	margin-bottom: 1em;	
	padding-top: 1em;
}

.row-cursos1 {
border-top: solid 1px;
    margin-bottom: 1em;  
    margin-bottom: 1em;
    margin-top: 1em;
}



.col-title {
	text-decoration: underline;
}


/* BUTTON CURSOS
------------------------------------------------------------*/
button.btn-cursos {
	padding: 0px;
	width: 2em;
	height: 2em;
}

.btn-cursos:focus, .btn-cursos.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0)!important;
}

/**
	applying media css from bootstrap for all resolutions
*/
.form-inline .form-check-input-custom {
	position: relative;
    margin-top: 0;
    margin-right: 0.25rem;
    margin-left: 0;
}

a.a-documentacion:link, a.a-documentacion:visited, a.a-documentacion:hover, a.a-documentacion:active  {  
  text-decoration: none !important;
  color: inherit !important;
}



a.a-documentacion:first-letter {
  text-transform: uppercase;
}

/* RESPUESTAS
-------------------------------------------------------------------*/
.resp-incorrecta {
	color: red;
}

.resp-correcta {
	color: blue;
}

.resp {
	padding-top: 1em;
	font-weight: bold;
}

/* CALENDARIO
--------------------------------------------------------------------*/
.row-calendario {
	min-height: 600px;
	max-height: 1024px;
}

/* MAPA
------------------------------------------------------------*/
#map {
        height: 600px;
      }

/* showEtsModalAlertCIOS PRACTICOS
------------------------------------------------------------*/

.chatP, .chatC {
	margin-top: 50px;
	margin-bottom:50px;
	margin-left:auto;
	margin-right: 50px;
}

.chatA {
	margin-top: 50px;
	margin-bottom:50px;
	margin-left:50px;
	margin-right: auto;
}

.chatP .box { /*PROFESOR*/
	background:#3da936;
	float: right;	
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border: 0px none #000000;
}


.chatA .box { /*ALUMNO*/
	background: #F51555;
	float: left;
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border: 0px none #000000;
}

.chatC .box { /*CLIENTE*/
	background: #FCA820;
	float: right;
  border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border: 0px none #000000;
}

.chatP .boxChk { /*PROFESOR*/
	background:#ffffff!important;
	/* float: right;	 */
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border: 0px none #000000;
}


.chatA .boxChk { /*ALUMNO*/
	background: #ffffff!important;
	/* float: left; */
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border: 0px none #000000;
}

.chatC .boxChk { /*CLIENTE*/
	background: #ffffff!important;
	/* float: right; */
  border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border: 0px none #000000;
}

.chatMovilA{
  /* word-break: break-all; */
  overflow: auto;
  padding-left: 35px;
  margin-left: 0px!important;

}
.chatMovilC{
  /* word-break: break-all; */
  overflow: auto;
  padding-right: 35px;
  margin-right: 0px!important;

}

/*******************************************************************
* CHECK KNXPROJECT
*********************************************************************/

#infoKNXProject {
  font-size: 0.8em;
}

.output-knxproject {
  overflow-y: auto;
  font-size: small;
}

.output-knxproject-collapsed {
  max-height: 400px;
}

.output-knxproject-expanded {
  max-height: 400px;
}

.output-line-knxproject-ok {
  color: green;
}

.output-line-knxproject-error {
  color: red;
}

/*******************************************************************
* CHECK KNXPROJECT
*********************************************************************/

/*imagenes globos*/

.imgchatC{

  margin-left:auto;
}

.imgchatA{

  margin-right:auto;
}


/* profesor modal */
.chatPModal .box {
  background: #fff;
  /* float: right; */
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border: 2px solid #fff;
}


.chatPcenter{
text-align: center;
}



.chatP i, .chatC i {
	float: right;
	position:absolute;
	right: 20px;
  
}

.chatA i {
	float: left;
	position:absolute;
	left: 20px;
}

.chatP input, .chatC input {
	position: relative;
	float: left;	
}

.chatA input {
	position: relative;
	float: right;
}

.box {   
  padding: 20px;
  padding-left: 38px;
  padding-right:38px;    
  color: #fff;  
  position:relative;
}

.boxChk {   
  padding: 20px;
  padding-left: 38px;
  padding-right:38px;    
  color: #fff;  
  position:relative;
}
/* 
.chatP .box:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;  
  right: -20px;
  top: 6px;
  border-left: 10px solid #00bfb6;
	border-right: 10px solid transparent;
	border-top: 10px solid #00bfb6;
	border-bottom: 10px solid transparent;
} */

/* .chatC .box:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;  
  right: -20px;
  top: 6px;
  border-left: 10px solid #CCBCFF;
  	border-right: 10px solid transparent;
  	border-top: 10px solid #CCBCFF;
  	border-bottom: 10px solid transparent;
}

.chatA .box:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid #89FF89;
  border-top: 10px solid #89FF89;
  border-bottom: 10px solid transparent;
  left: -19px;
  top: 6px;
} */

.chatP .img-user-globo {
  position: absolute;
  right: -35px;
  z-index: 1000;
  top: 10px;
}	

.chatPModal .img-user-globo {
  position: absolute;
  right: -35px;
  z-index: 1000;
  top: 10px;
}	


.chatC .img-user-globo {
	position: absolute;
  right: -35px;
  z-index: 1000;
  top: 10px;	
}

.chatA .img-user-globo {
	position: absolute;
  left: -35px;
  z-index: 1000;
  top: 10px;	
}

.fuentePe{
  font-size: 0.8rem!important;
}

.onoffswitch {
  position: relative; width: 50px;
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; user-select: none;
  /* margin-left: auto; */
}

 .chatC .onoffswitch {

  margin-right: auto;
  top: 60px;
    right:35px;
}

.chatP .onoffswitch {
 
  margin-right: auto;
  top: 60px;
  right:35px;
}

.chatA .onoffswitch {
  
  margin-left: auto;
  top: 60px;
    left: 35px;
} 

.onoffswitch-checkbox {
  display: none;
}
.onoffswitch-label {
  display: block; overflow: hidden; cursor: pointer;
  height: 22px; padding: 0; line-height: 22px;
  border: 2px solid #E3E3E3; border-radius: 22px;
  background-color: #E61E1E;
  transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
  content: "";
  display: block; width: 22px; margin: 0px;
  background: #FFFFFF;
  position: absolute; top: 0; bottom: 0;
  right: 26px;
  border: 2px solid #E3E3E3; border-radius: 22px;
  transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
  background-color: #49E845;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
 border-color: #49E845;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
  right: 0px; 
}




/* Tamaño moviles */
@media only screen and (min-width: 320px) {
	.box {
		max-width: 95%;
  }	
  

  .boxChk {
		max-width: 95%;
  }	
  .cajaLogin {
    border-radius: 25px;
    background: #3a3f4fb5;
    padding: 20px;
    /* max-width: 374px;
    height: 314px; */
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    /* margin-bottom: 20px; */
}

.cuadrolat {
  padding: 0px 0px 0px 0px!important;
}





}

@media only screen and (min-width: 992px) {
	.box {
		max-width: 40%;
  }	

  .chatMovilA .box{
    max-width: 90%;
  }
  .chatMovilC .box{
    max-width: 90%;
  }

  .boxChk {
		max-width: 40%;
  }	
  
 .modalbox {
		max-width: 90%!important;
	}	
}

@media only screen and (max-width: 390px) {
.pdcurso {
  padding: 10px 5px 20px!important;
}
}

@media only screen and (max-width: 768px) {
  
  .espaciosH{
    padding-right:0px!important;
    padding-left:0px!important;
    padding-bottom: 20px;
  }
  

}


@media only screen and (max-width: 990px) {
  .margMov{
    margin-left: 0px!important;
    }
}

/* IMAGENES
-----------------------------------------------------------*/

.img-loft {
	display: block;
	max-width: 640px;
	max-height: 320px;
	width: auto;
	height: auto;
}

.img-ets_step4 {
	display: block;
	max-width: 1200px;
	max-height: 325px;
	width: auto;
	height: auto;
}

.img-dimmer {
	/* display: block; */
	max-width: 700px;
	max-height: 400px;
	width: auto;
	height: auto;
}

.img-act {
	display: block;
	max-width: 800px;
	max-height: 500px;
	width: auto;
	height: auto;
}

.img-pulsador {
	display: block;
	max-width: 800px;
	max-height: 500px;
	width: auto;
	height: auto;
}


.img-globo {
	display: block;
	max-width: 320px;
	max-height: 160px;
	width: auto;
	height: auto;
}

.img-user-globo {
	width: 64px;
}

.img-step {
	width: 100%;
}

/* LOADER
--------------------------------------------------------------------*/
/* Center the loader */
.wrapper-loader {
	position: fixed;	
	background-color: rgba(0, 0, 0, 0.4);;	
	z-index: 1000000;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	
}

.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  /*margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;*/
  width: 120px;
  height: 120px;
  /*-webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;*/
}

/*@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}*/

.card {
   /* position: relative;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #ffffff;
    background-clip: border-box;
    border: 1px solid #f1f1f1;
    /* border-radius: 0.25rem; */
}

    #seccionesFormacion{
      background-color: #f1f1f1;
    }

    .jumbotronFor {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: #ffffff;
    border-radius: 0.3rem;
}

.accordion.forma {
    width: 100%;
    max-width: 1080px;
    height: 250px;
    overflow: hidden;
    margin: 0px auto;
}


/*--------------------Carousel--------------*/


/* equal card height */
.row-equal > div[class*='col-'] {
    display: flex;
    flex: 1 0 auto;
}

.row-equal .card {
   width: 100%;
}

.row-equal .cardNews {
  height: 360px;
}

.row-equal .cardEvent {
  height: 300px;
}

/* ensure equal card height inside carousel */
.carousel-inner>.row-equal.active, 
.carousel-inner>.row-equal.next, 
.carousel-inner>.row-equal.prev {
    display: flex;
}

/* prevent flicker during transition */
.carousel-inner>.row-equal.active.left, 
.carousel-inner>.row-equal.active.right {
    opacity: 0.5;
    display: flex;
}


/* control image height */
.card-img-top-250 {
    max-height: 250px;
    overflow:hidden;
}

/* panel lateral videos*/
 .bgcurso{
  background-color: #242e42;
 } 
 .pdcurso{

  padding: 30px 50px 30px ;
 }

 .imgLogoCentroCabecera {
  height: 75px;
}

.border-topAc {
    border-top: 1px solid #000000 !important;
    padding-top: 5px;
}


/*modal*/
.modal-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: white !important;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
  color: black;
}

.modal-content.verdebg{
background-color: #4AA840!important;
color:white;
}
.modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem;
  padding-bottom: 0em!important;
  border-bottom: none;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

/* fin modal  */

 /* hr.quest { 
  background: url('../img/cursosonline/6.png') no-repeat top center;
  background-size: contain;
  display: block;
  height: 18px;
  border: 0;
  position: relative;
}
  hr.quest:before,
  hr.quest:after {
  content: '';
  display: block;
  position: absolute;
  background: #d7d7d7;
  height: 2px;
  top: 8px;
}
hr.quest:before {
  left: 0;
  right: 50%;
  margin-right: 10px;
}
hr.quest:after {
  right: 0;
  left: 50%;
  margin-left: 10px;
} */

hr.profe {
  padding: 0;
  border: none;
  border-top: solid #bfbfbf;
  color: #333;
  text-align: center;
}
hr.profe:after {
  content: url(../img/cursosonline/6.png);
  display: inline-block;
  position: absolute;
  top: 0em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: white;
  z-index:1000;
}

hr.separador_post { 
  height: 30px;
  border-style: solid;
  border-color: #BFBFBF;
  border-width: 2px 0 0 0;
  border-radius: 20px;
  text-align: center;
 }
 
 hr.separador_post:before {
     display: block;
     content: "";
     height: 30px;
     margin-top: -31px;
     border-style: solid;
     border-color: black;
     border-width: 0 0 1px 0;
     -webkit-border-radius:20px;
        -moz-border-radius:20px;
             border-radius:20px;
 }
 
 hr.separador_post:after {
  background: url('../img/cursosonline/6.png') no-repeat top center;
     color: #DC5500;
     display: inline-block;
     position: relative;
     top: -0.7em;
     font-size: 1.5em;
     padding: 0 0.25em;
     background: white;
 }

 .textopeque{
   font-size: 10px;
 }

 /* colores botones */

 .azulb{
  background-color: #5369A3;
  border-color:  #5369A3;
 }

 .negrob{
  background-color:#2F313A;
  border-color:#2F313A;
 }
 .verdeb{
  background-color: #4AA840;
  border-color:#4AA840;
 }
 .amarillob{
  background-color:#F7AA44;
  border-color:#F7AA44;
 }


 /**************************************************************
***** KXNSIMULATOR
**********************************************************/

.knxsimulator {
  min-width:1024px;
  min-height:768px;
  width: 100%;  
  height: 100%;
  border: none;
  overflow:hidden;
}


.colFlagsDevice {
  max-width: 200px;
  width: 100%;
  
}

.colFlags {
  max-width: 50px;
  width: 100%;
  text-align: center;
  
}

.devFlag {
  height: 20px;
}

.schemePrac {
  background-color: white;
}

@media (min-width: 992px) {
  .schemePrac {
    margin-left:80px; margin-right:80px;
  }
  
}
.schemePrac span{
  font-size: 0.8em;
  line-height: 1.15;
  min-height: 14px;
}

.imgPushButtonsLabels {
  font-size: 0.8em;
  background-color: white;
  min-width: 300px;
}

.imgPushButtonsLabels .labelButtonsBar {
  margin-top:70px;
  margin-bottom:70px;
  max-width: 280px;
  min-width: 150px;
}

.imgPushButtonsLabels .labelButtonsBarNum {
  position: absolute;
  margin-top:70px;
  margin-bottom:70px;
  /*max-width: 280px;
  min-width: 150px;*/
  top: 0px;
  bottom: 0px;
  width: 92px;
}

.imgPushButtonsLabels .labelButtonsBarNum .spActKey {
  padding: 5px;
  margin: auto;
  border: 1px solid blue;
  background-color: white;
  border-radius: 5px;
  max-width: 60px;
}

.imgPushButtonsLabels .labelButtonsBarNumLeft {
  left: 0px;
}

.imgPushButtonsLabels .labelButtonsBarNumRight {
  right: 0px;
}

.imgPushButtonsLabels .divImageText {
  position: relative;
}

.imgPushButtonsLabels .spanButton {
  align-items: center;
}


/*.schemePrac .myborder{ border:1px solid red;}
.schemePrac .myborderb{ border:1px solid blue;}*/



/* pruebas cards */

/* @gray-darker:               #444444;
@gray-dark:                 #696969;
@gray:                      #999999;
@gray-light:                #cccccc;
@gray-lighter:              #ececec;
@gray-lightest:             lighten(@gray-lighter,4%); */

*,
*::before,
*::after { 
  box-sizing: border-box;
}

/* html {
  background-color: #f0f0f0;
}

body {
  color: @gray;
  font-family: 'Roboto','Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  padding: 1rem;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga" on;
} */


/*TODO revisar clase*/
img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}


 
.cards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cards__item {
  display: flex;
  padding: 1rem;
  width: 100%;

}

@media(min-width: 40rem) {
  .cards__item{ width: 50%;}
}
@media(min-width: 56rem) {
  .cards__item{ width: 25%;}
}

.card {
  background-color: white;
  border-radius: 0.25rem;
  /* box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25); */
  /* box-shadow:10px 8px 10px 0px rgba(0,0,0,0.15); */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
}

.card:hover  .card__image {
    filter: contrast(100%);
  }

  .card:hover  .card__imageN {
    filter: contrast(100%);
  }

.card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1rem;
}

.card__image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  filter: contrast(70%);
  
  overflow: hidden;
  position: relative;
  transition: filter 0.5s cubic-bezier(.43,.41,.22,.91);
  
  }

  .card__imageN {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    filter: contrast(80%);
    
    overflow: hidden;
    position: relative;
    transition: filter 0.5s cubic-bezier(.43,.41,.22,.91);
    
    }

  .card__image::before {
    content: "";
	  display: block;
    padding-top: 46.25%; /* 16:9 aspect ratio*/
  }

  .card__imageN::before {
    content: "";
	  display: block;
    padding-top: 23.25%; /* 16:9 aspect ratio*/
  }



@media(min-width: 40rem) {
  .card__image::before {
   /* padding-top: 66.6%;  3:2 aspect ratio*/
  }
}

/*noticias*/
.card__image--n1 {
  background-image: url(../img/cursosonline/1.jpg);
}
.card__image--n2 {
  background-image: url(../img/cursosonline/2.jpg);
}
.card__image--n3 {
  background-image: url(../img/cursosonline/3.jpg);
}
.card__image--n4 {
  background-image: url(../img/cursosonline/4.jpg);
}


.card__image--flowers {
  background-image: url(../img/cursosonline/7.jpg);
}

.card__image--river {
  background-image: url(../img/cursosonline/8.jpg);
}

.card__image--record {
  background-image: url(../img/cursosonline/6.jpg);
}

.card__image--fence {
  background-image: url(../img/cursosonline/5.jpg);
}

.card__title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 5%;
  text-align: center;
  background-color: #0000005c;
}

.cardtittle2{

margin-bottom:10%!important;
background-color: transparent;
}

.card__text {
  flex: 1 1 auto;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

[role="form-step"] input[type="checkbox"].form-control {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
}
.widthColReport{
  min-width: 200px;
}

/* Curso online tab showEtsModalAlertcios */


#ejerPracTabContent {
  width: 100%;
}

.cuadroSteps{
  background-color: white;
  padding: 0%;
  /* -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px; */
}

.tituloSteps{
  background-color: #3171c8 !important;
  padding: 0.7%!important;
}


.imgBarraETS{
	width:38px;
	cursor:pointer;
  margin-left: 5px;
  float:right;
}

@media (min-width: 768px) {
  .iphone-md {
  width: 545px;
  height: 920px;
  background-color: #222;
  border-radius: 25px;
  position: relative;
  margin: auto;
  box-shadow: 3px 0px 0px #444;
  }
  .iphone-md .frontcam {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #444;
  top: 27px;
  left: 105px;
  }
  .iphone-md .speaker {
  position: absolute;
  width: 80px;
  height: 5px;
  border-radius: 10px;
  background-color: #222;
  border: 1px solid #444;
  top: 34px;
  left: 135px;
  }
  .iphone-md .screen {
  box-sizing: border-box;
  width: 520px;
  height: 770px;
  position: relative;
  left: 12.5px;
  top: 75px;
  background-image: url("/img/cursosonline/PhoneScreenUser.png");
  background-size: cover;
  background-position: top center;
  }
  .iphone-md .screenContent {
  width: 100%;
  height: 640px;
  position: relative;
  top: 125px;
  overflow-y: scroll;
  overflow-x: hidden;
  }
  .iphone-md .screenContent iframe {
  width: 100%;
  height: 463px !important;
  background-color: transparent;
  border: 0px none transparent;
  padding: 0px;
  overflow: hidden;
  }
  .iphone-md .homeBtn {
  width: 50px;
  height: 50px;
  background-color: #222;
  border: 2px solid #444;
  position: absolute;
  border-radius: 100%;
  left: 245px;
  bottom: 10px;
  }
}


     
.blanco{

  color:white;
}
.blanco a{

  color: white;
}

.blanco hr{

      border-top: 1px solid rgb(255, 255, 255)!important;
}
.negro{

    border-top: 1px solid rgb(0, 0, 0)!important;
}
.azul{
color:#3171C8;

}

.btn-primary.verde {
  color: #fff;
  background-color: #3aaa35;
  border-color: #3aaa35;
}

.btn-primary.rojo {
  color: #fff;
  background-color: #BD2130;
  border-color: #BD2130;
}

.bgcurso{
  background-color: #f1f1f1;
} 
.pdcurso{

  padding: 30px 50px 30px ;
}

.cuadrolat{ 
    padding: 10px 20px 5px;
}

#botonPanel{
width: 100%;
}

#myTabContent{

background-color: #fff;
}

#myTabContent h3 {
  font-size: 18px;
  font-weight: bold;
  font-family: 'Lato';
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: #464a4c;
  background-color:  transparent !important;
  border:transparent;
  border-bottom: 4px solid black !important;
  font-weight: 900;
}

.nav-tabs .nav-link {
  height: 100%;
  color:black;
}

/* .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active.verde{
  color: #464a4c;
  background-color: #8c8005ad!important;
  border-color: #ddd #ddd #8c8005ad!important;
} */
   .toggle-off.btn {
  padding-left: 1px!important;
}

.escondeText{    
  text-overflow: ellipsis;
  white-space: nowrap;
overflow: hidden;}


hr.profe {
padding: 0;
border: none;
border-top: solid 1px #ffffff;
color: #fff;
text-align: center;
}
hr.profe:after {
content: url(../img/cursosonline/chatP.png);
display: inline-block;
position: absolute;
top: 0em;
font-size: 1.5em;
padding: 0 0em;
background: #ffffff00;
z-index:1000;
left: 45%;
}

modal-header.profe:after {
content: url(../img/cursosonline/chatP.png);
display: inline-block;
position: absolute;
top: 0em;
font-size: 1.5em;
padding: 0 0em;
background: #ffffff00;
z-index:1000;
}

.img-evaluacion {
  /* padding: 0.25rem; */
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 80%;
  height: auto;
}

 .media
  {
      /*box-shadow:0px 0px 4px -2px #000;*/
      margin: 20px 0;
      padding:30px;
  }
  .dp
  {
      border:1px solid #000;
      transition: all 0.2s ease-in-out;
  }
  .dp:hover
  {
      border:1px solid #000;
      transform:rotate(360deg);
      -ms-transform:rotate(360deg);  
      -webkit-transform:rotate(360deg);  
      /*-webkit-font-smoothing:antialiased;*/
  }

  /* dropdonws*/

  .cd-dropdown,
.cd-select {
	position: relative;
	width: 300px;
	margin: 20px auto;
	display: block;
}

.cd-dropdown > span {
	width: 100%;
	height: 30px;
	line-height: 30px;
	color: #999;
	font-weight: 700;
	font-size: 16px;
	background: #fff;
	display: block;
	padding: 0 50px 0 30px;
	position: relative;
	cursor: pointer;
}

.cd-dropdown > span:after {
	content: '\25BC';
	position: absolute;
	right: 0px;
	top: 15%;
	width: 50px;
	text-align: center;
	font-size: 12px;
	padding: 0px;
	height: 70%;
	line-height: 24px;
	border-left: 1px solid #ddd;
}

.cd-dropdown.cd-active > span:after {
	content: '\25B2';
}

.cd-dropdown ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: block;
	position: relative;
}

.cd-dropdown ul li {
	display: block;
}

.cd-dropdown ul li span {
	width: 100%;
	background: #fff;
	line-height: 30px;
	padding: 0 30px 0 75px;
	display: block;
	color: #bcbcbc;
	cursor: pointer;
	font-weight: 700;
}

.cd-dropdown > span,
.cd-dropdown ul li span {
	-webkit-backface-visibility: hidden;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.cd-dropdown > span span[class^="icon-"],
.cd-dropdown > span span[class*=" icon-"]{
	padding: 0 30px 0 45px;
}

/* Select fallback styling */
.cd-select {
	border: 1px solid #ddd;
}

.cd-dropdown > span,
.cd-dropdown ul li:nth-last-child(-n+3) span {
	box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.cd-dropdown ul {
	position: absolute;
	top: 0px;
	width: 100%;
}

.cd-dropdown ul li {
	position: absolute;
	width: 100%;
}

.cd-active.cd-dropdown > span {
	color: #fc756f;
}

.cd-active.cd-dropdown > span,
.cd-active.cd-dropdown ul li span {
	box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.cd-active.cd-dropdown ul li span {
	-webkit-transition: all 0.2s linear 0s;
	-moz-transition: all 0.2s linear 0s;
	-ms-transition: all 0.2s linear 0s;
	-o-transition: all 0.2s linear 0s;
	transition: all 0.2s linear 0s;
}

.cd-active.cd-dropdown ul li span:hover {
	background: #fc756f;
	color: #fff;
}

/*END Dropdowns*/

.push-button-img
{
  background-image: url("../img/cursosonline/pushButtons.jpg");

}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1100px;
  }
}

@media (min-width: 1400px) {
  .modal-xxl {
    max-width: 1300px;
  }
}

.modal-w-75 {
  width: 75% !important;
  max-width: inherit;
}

.adressTreePrac input {
  width: 75px !important;
}

.adressTreePrac select {
  width: 250px !important;
}

.b-inactive {
  color: grey;
}

/*************************************************************************** TRAINING KIT *********************************************************/
.containerKit{
	position:relative;
	


}

.producto1{
	z-index: 21;
    position: absolute;
    width: 7%;
    height: 15.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/16254.png) no-repeat;
    background-size: contain;
    top: 10.8%;
    left: 14.4%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
    cursor: pointer;
}

.producto1:hover{
	z-index: 21;
    position: absolute;
    width: 7%;
    height: 15.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/16254-2.png) no-repeat;
    background-size: contain;
    top: 10.8%;
    left: 14.4%;
    cursor: pointer;
}

.producto2{
	z-index: 21;
    position: absolute;
    width: 7%;
    height: 15.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/16255.png) no-repeat;
    background-size: contain;
    top: 10.8%;
    left: 22.5%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
    cursor: pointer;
}

.producto2:hover{
	z-index: 21;
    position: absolute;
    width: 7%;
    height: 15.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/16255-2.png) no-repeat;
    background-size: contain;
    top: 10.8%;
    left: 22.5%;
    cursor: pointer;
}

.producto3{
	z-index: 21;
    position: absolute;
    width: 5.4%;
    height: 15.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/18327.png) no-repeat;
    background-size: contain;
    top: 10.8%;
    left: 30.5%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
    cursor: pointer;
}

.producto3:hover{
	z-index: 21;
    position: absolute;
    width: 5.4%;
    height: 15.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/18327-2.png) no-repeat;
    background-size: contain;
    top: 10.8%;
    left: 30.5%;
    cursor: pointer;
}




.producto4{
  z-index: 21;
  position: absolute;
  width: 14%;
  height: 15.6%;
  margin: auto;
  background: url(../img/cursosonline/kit/18682.png) no-repeat;
  background-size: contain;
  top: 10.8%;
  left: 36.5%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
    cursor: pointer;
}

.producto4:hover{
	z-index: 21;
    position: absolute;
    width: 14%;
    height: 15.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/18682-2.png) no-repeat;
    background-size: contain;
    top: 10.8%;
    left: 36.5%;
    cursor: pointer;
}

.producto5{
	z-index: 21;
    position: absolute;
    width: 13.8%;
    height: 15.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/19251.png) no-repeat;
    background-size: contain;
    top: 10.8%;
    left: 51.5%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
    cursor: pointer;
}

.producto5:hover{
	z-index: 21;
    position: absolute;
    width: 13.8%;
    height: 15.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/19251-2.png) no-repeat;
    background-size: contain;
    top: 10.8%;
    left: 51.5%;
    cursor: pointer;
}

.producto6{
	z-index: 21;
    position: absolute;
    width: 13.9%;
    height: 15.6%;
    margin: auto;
    /*background: url(../img/cursosonline/kit/19252.png) no-repeat;*/
    background: url(../img/cursosonline/kit/27026.png) no-repeat;
    background-size: contain;
    top: 10.8%;
    left: 66.3%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
    cursor: pointer;
}

.producto6:hover{
	z-index: 21;
    position: absolute;
    width: 13.9%;
    height: 15.6%;
    margin: auto;
    /*background: url(../img/cursosonline/kit/19252-2.png) no-repeat;*/
    background: url(../img/cursosonline/kit/27026-2.png) no-repeat;
    background-size: contain;
    top: 10.8%;
    left: 66.3%;
    cursor: pointer;
}

.producto7{
	z-index: 21;
    position: absolute;
    width: 10.1%;
    height: 7.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/15797.png) no-repeat;
    background-size: contain;
    top: 15.4%;
    left: 86.3%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
    cursor: pointer;
}

.producto7:hover{
	z-index: 21;
    position: absolute;
    width: 10.1%;
    height: 7.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/15797-2.png) no-repeat;
    background-size: contain;
    top: 15.4%;
    left: 86.3%;
    cursor: pointer;
}

/*LINEA 2*/


.producto8{
	z-index: 21;
    position: absolute;
    width: 9.6%;
    height: 15.6%; 
    margin: auto;
    background: url(../img/cursosonline/kit/17105.png) no-repeat;
    background-size: contain;
    top: 43.3%;
    left: 9.8%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
    cursor: pointer;
}

.producto8:hover{
	z-index: 21;
    position: absolute;
    width: 9.6%;
    height: 15.6%; 
    margin: auto;
    background: url(../img/cursosonline/kit/17105-2.png) no-repeat;
    background-size: contain;
    top: 43.3%;
    left: 9.8%;
    cursor: pointer;
}

.producto9{
	z-index: 21;
    position: absolute;
    width: 9.6%;
    height: 15.6%; 
    margin: auto;
    background: url(../img/cursosonline/kit/18794.png) no-repeat;
    background-size: contain;
    top: 43.3%;
    left: 20.5%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
}

.producto9:hover{
	z-index: 21;
    position: absolute;
    width: 9.6%;
    height: 15.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/18794-2.png) no-repeat;
    background-size: contain;
    top: 43.3%;
    left: 20.5%;
}

.producto10{
	z-index: 21;
    position: absolute;
    width: 6.8%;
    height: 15.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/18315.png) no-repeat;
    background-size: contain;
    top: 43.3%;
    left: 31.3%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
}

.producto10:hover{
	z-index: 21;
    position: absolute;
    width: 6.8%;
    height: 15.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/18315-2.png) no-repeat;
    background-size: contain;
    top: 43.3%;
    left: 31.3%;
}

.producto11{
	z-index: 21;
    position: absolute;
    width: 3.5%;
    height: 15.1%;
    margin: auto;
    background: url(../img/cursosonline/kit/18330.png) no-repeat;
    background-size: contain;
    top: 43.3%;
    left: 39.3%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
}

.producto11:hover{
	z-index: 21;
    position: absolute;
    width: 3.5%;
    height: 15.1%;
    margin: auto;
    background: url(../img/cursosonline/kit/18330-2.png) no-repeat;
    background-size: contain;
    top: 43.3%;
    left: 39.3%;
}


.producto12{
	z-index: 21;
    position: absolute;
    width: 13.4%;
    height: 15.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/11066.png) no-repeat;
    background-size: contain;
    top: 43.3%;
    left: 43.9%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
}

.producto12:hover{
	z-index: 21;
    position: absolute;
    width: 13.4%;
    height: 15.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/11066-2.png) no-repeat;
    background-size: contain;
    top: 43.3%;
    left: 43.9%;
}

.producto13{
	z-index: 21;
    position: absolute;
    width: 13.9%;
    height: 16.5%;
    margin: auto;
    background: url(../img/cursosonline/kit/18329.png) no-repeat;
    background-size: contain;
    top: 43.3%;
    left: 58%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
}

.producto13:hover{
	z-index: 21;
    position: absolute;
    width: 13.9%;
    height: 16.5%;
    margin: auto;
    background: url(../img/cursosonline/kit/18329-2.png) no-repeat;
    background-size: contain;
    top: 43.3%;
    left: 58%;
}

/* linea 3*/


.producto14{
  z-index: 21;
  position: absolute;
  width: 6.6%;
  height: 10.2%;
  margin: auto;
  background: url(../img/cursosonline/kit/16899.png) no-repeat;
  background-size: contain;
  top: 70.3%;
  left: 45.4%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
}



.producto14:hover{
  z-index: 21;
  position: absolute;
  width: 6.6%;
  height: 10.2%;
  margin: auto;
  background: url(../img/cursosonline/kit/16899-2.png) no-repeat;
  background-size: contain;
  top: 70.3%;
  left: 45.4%;
}

.producto15{
	z-index: 21;
    position: absolute;
    width: 15.7%;
    height: 20.3%;
    margin: auto;
    /*background: url(../img/cursosonline/kit/17639.png) no-repeat;*/
    background: url(../img/cursosonline/kit/20268.png) no-repeat;
    background-size: contain;
    top: 72.7%;
    left: 69.8%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
}

.producto15:hover{
	z-index: 21;
    position: absolute;
    width: 15.7%;
    height: 20.3%;
    margin: auto;
    /*background: url(../img/cursosonline/kit/17639-2.png) no-repeat;*/
    background: url(../img/cursosonline/kit/20268-2.png) no-repeat;
    background-size: contain;
    top: 72.7%;
    left: 69.8%;
}

.producto16{
	z-index: 21;
    position: absolute;
    width: 11.4%;
    height: 10%;
    margin: auto;
    background: url(../img/cursosonline/kit/14916.png) no-repeat;
    background-size: contain;
    top: 79.6%;
    left: 52.5%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
}

.producto16:hover{
	z-index: 21;
    position: absolute;
    width: 11.4%;
    height: 10%;
    margin: auto;
    background: url(../img/cursosonline/kit/14916-2.png) no-repeat;
    background-size: contain;
    top: 79.6%;
    left: 52.5%;
}

.producto17{
	z-index: 21;
    position: absolute;
    width: 6.5%;
    height: 16.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/12604.png) no-repeat;
    background-size: contain;
    top: 92.7%;
    left: 49.7%;
    -webkit-transition: background-image 0.4s ease-in-out;
    transition: background-image 0.4s ease-in-out;
}

.producto17:hover{
	z-index: 21;
    position: absolute;
    width: 6.5%;
    height: 16.6%;
    margin: auto;
    background: url(../img/cursosonline/kit/12604-2.png) no-repeat;
    background-size: contain;
    top: 92.7%;
    left: 49.7%;
}
.hide-check .onoffswitch {
  display: none !important;
}

.prodImgHover{
  cursor: pointer;
}


/*Button arrow*/
.btn-arrow-right,
.btn-arrow-left {
    position: relative;
    padding-left: 18px;
    padding-right: 18px;
}
.btn-arrow-right {
    padding-left: 36px;
    margin-right: 17.68px;
}
.btn-arrow-left {
    padding-right: 36px;
    margin-left: 17.68px;
}
.btn-arrow-right:before,
.btn-arrow-right:after,
.btn-arrow-left:before,
.btn-arrow-left:after {
    content:"";
    position: absolute;
    top: 6px;
    width: 25px;
    height: 25px;
    background: inherit;
    border: inherit;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 0px 4px 0px 0px;
    -webkit-border-radius: 0px 4px 0px 0px;
    -moz-border-radius: 0px 4px 0px 0px;
}
.btn-arrow-right:before,
.btn-arrow-right:after {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
.btn-arrow-left:before,
.btn-arrow-left:after {
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
}
.btn-arrow-right:before,
.btn-arrow-left:before {
    left: -13px;
}
.btn-arrow-right:after,
.btn-arrow-left:after {
    right: -13px;
}
.btn-arrow-right:after,
.btn-arrow-left:before {
    z-index: 1;
}
.btn-arrow-right:before,
.btn-arrow-left:after {
    background-color: white;
}

/* botones tabs showEtsModalAlertcios practicos */
.process-step .btn:focus{outline:none}
.process{display:table;width:100%;position:relative}
.process-row{display:table-row}
.process-step button[disabled]{opacity:1 !important;filter: alpha(opacity=100) !important}
.process-row:before{top:40px;bottom:0;position:absolute;content:" ";width:100%;height:1px;background-color:#ccc;z-order:0}
.process-step{display:table-cell;text-align:center;position:relative;width: 200px}
.process-step p{margin-top:4px}
.btn-circle{width:80px;height:80px;text-align:center;font-size:12px;border-radius:50%}
.btnVerdePrac{
    color: #fff;
    background-color: #3aaa35!important;
    border-color: #000000!important;
}
.btnRojoPrac{
    color: #fff;
    background-color: #DDDDDD!important;
    border-color: #000000;

}
.btnAzulPrac{
	color: #fff;
    background-color: #3171c8!important;
    border-color: #000000!important;
}

.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.4rem rgba(23, 162, 184, 0.5);
}
.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle {
    box-shadow: 0 0 0 0.4rem rgba(23, 162, 184, 0.5);
}

.img-solved {
  height: 300px;
}


.output-knxproject .m-0 {
  font-weight: 700;

}

#etsModal .modal-header{

  background-color:#3DA936;
}


input[type=checkbox], input[type=email], input[type=number], input[type=password], input[type=radio], input[type=text], select, textarea {
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  appearance: auto !important;

}