:root {
  --principal-bg-color:#0CBB0C;
  --principal-color: #fff;
  --secundary-bg-color: #deaa87;
  --secundary-color: #000;
  --btn1-bg-color: var(--principal-bg-color);
  --btn1-color: var(--principal-color);


  --color-bg-gen: #fff;
  --color-bg-contraste:#535252;
  --color-texto:#000;
}

* {
  box-sizing: border-box;
}


/* botones de modo  claro*/
.container-btn-mode{
  position: absolute;
  top:0px;
  left: 0px;
  z-index: 2;
  background-color:var(--color-bg-gen) ;
  border-bottom:1px solid var(--color-bg-contraste);
  border-right: 1px solid var(--color-bg-contraste);
  border-bottom-right-radius: 10px;
  /*font-size:0;*/
}
.btn-mode{
  display: inline-block;
  width: 24px;
  height: 24px;
  transition: background-color 1.0s;
}
.btn-mode img {
  display: block;
  font-size: 15px;
  text-align: center;
  line-height: 25px;
}
.btn-mode.sun{
  margin-top: 2px;
  margin-left: 2px;
  border-right: 1px solid transparent;
	background-color:#696868;
  background: url('../images/sol.svg') no-repeat;
}

.btn-mode.moon{
  cursor: pointer;
  margin-top: 2px;
  margin-right: 2px;
  border-left: 1px solid transparent;
	background-color:#FFF;
	color:#000;
  background: url('../images/luna.svg') no-repeat;
}
.active{
  background-color:rgb(215, 35, 35);
  color:#ffcd5c !important;
}
/* fin de botones de modo  claro*/




#container {
  /*background-image: url('../images/opacidad.png');*/
  margin: 5px auto;
  padding: 10px;
  opacity: 0.9;
  position: relative;
  max-width: 350px;
}

body {
  background-color:  var(--color-bg-gen);
  color: var(--color-texto);
  overscroll-behavior-y: contain;
  margin: 0;
  padding-bottom: 20px;
  cursor: default;
  font-size: 14px;
  line-height: 21px;
 /* font-family: "Comic Sans MS", cursive, sans-serif;*/
}

.box-flex{
  display: flex;
}
.buttons_bottom{
  margin-top: 34px;
  padding: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  border: 1px solid #aaaaaa;
}
textarea,select{
  width: 100%;
}
textarea{
  margin-bottom: 10px;
}
select{
  margin-top: 5px;
  margin-bottom: 10px;
}
input.invalid {
  background-color: #ffdddd;
}

a:link{
  text-decoration:none;
}


.btncompartir {
  -webkit-transition-duration: 0.4s; 
  transition-duration: 0.4s;
  border: 2px solid #245125;
  background-color: #4CAF50;
  border-radius: 8px;
  width: 32px;
  content: url('../images/compartir.svg');
  padding: 3px;
}

.btncompartir:hover {	
  border:  2px solid #000;
  background-color: #6bf86f;
}



button {
  background-color: var(--btn1-bg-color);
  color:  var(--btn1-color);
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
  border-radius: 0 5px 5px 0;
}

button:hover {
  opacity: 0.8;
}

.card {
  padding: 0 0 5px 0;
  position: relative;
  box-sizing: border-box;
  background: #fff;
  border-radius: 2px;
  margin: 10px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  opacity: 0.95;
}

.card > h4{
  padding: 10px;
  text-align: center;
}

.card > .cardContent{
  padding: 0 16px 16px 16px;
}

.card > .cardAction{
  padding: 16px 16px 25px 16px;
}

.card > img{
  width: 100%;
  height: 145px;
}

.notification {
  position: relative;
  top:10px;
  margin: 10px auto;
  padding: 5px;
  width: 100%;
  z-index: 10;
}

.notifyKO{
  background-color: #F4DBDF;
  border: 1px solid red;
  border-left: 5px solid red;
}

.ocultar{
  display: none;
}


/* The Modal */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 30px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  max-width: 550px;
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 95%;
}
.card-modal{
  margin-top: 50px;
  text-align: center;
}
/* The Close Button */
#close-modal {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

#close-modal:hover,
#close-modal:focus {
  color: #000;
  cursor: pointer;
}

.md-introdata{
  background-color: #efefef;
  padding: 10px;
}


.cabeceraTabla{
  background-color: var(--color-texto);
  color: var(--color-bg-gen);
}
table.table td{
  color: var(--color-texto);
}
.btn-colorPers{
  background-color: var(--color-texto);
  color: var(--color-bg-gen);
}
/* Móviles en horizontal o tablets en vertical*/
@media (min-width: 768px) {

}

/* Tablets en horizonal y escritorios normales*/
@media (min-width: 1024px) { 

}

/* Escritorios muy anchos  */
@media (min-width: 1200px) {
  
 }