/* 
 Theme Name:   Child Twenty Twenty SCAM
 Theme URI:    https://scam.alteo.technology/twentyseventeen-SCAM/
 Description:  Tema basado en Twenty Twenty para el sistema web SCAM
 Author:       Jeseel Florez
 Author URI:   https://scam.alteo.technology/
 Template:     twentytwenty
 Version:      0.1.0
 Tags:         one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
 Text Domain:  twenty-twenty-sopyc
*/

/* Como guia podemos tener que: Los que empiezan por un "." son clases, los que inician como ellos por ej "td" aplica a todos libremente.
 * 
 * La clase hover da el efecto para desvanecer
 * 
 * */


/*BOTONES*/

.button {
  border-radius: 4px !important;
  background-color: #00a8f3 !important;
  border: none !important;
  color: #FFFFFF !important;
  text-align: center !important;
  font-size: 18px !important;
  padding: 10px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

.alerta {
  border-radius: 4px;
  background-color: #ffc036;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 10px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  animation-name: alertanim;
  animation-duration: 6s;
}

@keyframes alertanim {
  0%   {background-color: #ffc036;}
  25%  {background-color: #ff8036;}
  50%  {background-color: #ffc036;}
  75%  {background-color: #ff8036;}
  100%  {background-color: #ffc036;}
}

.alerta span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.alerta span:after {
  content: '\203C';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.alerta:hover span {
  padding-right: 25px;
}

.alerta:hover span:after {
  opacity: 1;
  right: 0;
}

.btnatrasito {
  border-radius: 4px;
  background-color: #ffc036;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 10px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.btnatrasito span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btnatrasito span:before {
  content: '\00ab';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0px;
  transition: 0.5s;
}

.btnatrasito:hover span {
  padding-left: 25px;
}

.btnatrasito:hover span:before {
  opacity: 1;
  left: 0;
}

.btnsalida {
  border-radius: 4px;
  background-color: #ff2029;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 10px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.btnsalida span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btnsalida span:before {
  content: '\047a';
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0px;
  transition: 0.5s;
}

.btnsalida:hover span {
  padding-left: 25px;
}

.btnsalida:hover span:before {
  opacity: 1;
  left: 0;
}

.buttonaprobar {
  border-radius: 4px;
  background-color: #3BE81F;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 10px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.buttonaprobar span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttonaprobar span:before {
  content: '\0251';
  position: absolute;
  opacity: 0;
  top: 0;
  left: -20px;
  transition: 0.5s;
}

.buttonaprobar:hover span {
  padding-left: 25px;
}

.buttonaprobar:hover span:before {
  opacity: 1;
  left: 0;
}

.btneliminar {
  border-radius: 4px;
  background-color: #ff2029;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 10px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.btneliminar span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btneliminar span:after {
  content: '\03A9';
  position: absolute;
  opacity: 0;
  top: 0;
  right: 0px;
  transition: 0.5s;
}

.btneliminar:hover span {
  padding-right: 25px;
}

.btneliminar:hover span:after {
  opacity: 1;
  right: 0;
}

/*Tablas*/

.regular-datatable {border-collapse:collapse !important;border-spacing:0 !important;}/*width:100% !important;display:table !important;*/
.regular-datatable td, .regular-datatable th{display:table-cell;text-align:left;vertical-align:top;}/*padding:8px 8px;*/
.regular-datatable th {font-size: 16px;}
.regular-datatable td {font-size: 14px;}
.regular-datatable th:first-child, .regular-datatable td:first-child{padding-left:16px !important}
.regular-datatable tr{border-bottom:1px solid #ddd !important}
.regular-datatable tbody tr:nth-child(even){background-color:#f1f1f1 !important}
.regular-datatable tbody tr:hover{background-color:#ccc !important}
.regular-datatable th{background-color: #00e340 !important; text-align:center !important;}
.regular-datatable thead th, .regular-datatable thead tr{padding: 5px; border-top: 0px !important; border-right: 0px; border-bottom: 0px !important; border-left: 0px; border-style: none;}

.tabla-vacia, .tabla-vacia tbody td, .tabla-vacia td, .tabla-vacia tr, .tabla-vacia tbody tr {border: 0px solid black;}

/*Botones del menu*/

.btn-menu a{
	border-radius: 5px;
}

.btn-menu.btn-login a{
	padding:10px 25px;
	background: #3BE81F;
	color:white !important;
}

.btn-menu.btn-login a:hover,
.btn-menu.btn-login a:focus{
	text-decoration: none !important;
	/*color:red !important;*/
	background: #1dd000 !important;
}

.btn-menu.btn-logout a{
	padding:10px;
	color:white !important;
	background: #ff5158 !important;
	
	/*background: darkred;*/
}

.btn-menu.btn-logout a:hover,
.btn-menu.btn-logout a:focus{
	text-decoration: none !important;
	/*color:red !important;*/
	background: #ec1e26 !important;
}

/*Campo Login*/
.divlogin
{
	padding: 10px;
	width: 60%;
	margin:auto;
}

.divnomobile
	{
		display:block;
	}

/*Boton tipo Switch*/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 24px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider_onof {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider_on {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #00e340;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(34px);
  -ms-transform: translateX(34px);
  transform: translateX(34px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* ------------------------- */
/* POPUP */
/* ------------------------- */

.overlay {
	background: rgba(0,0,0,.3);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	align-items: center;
	justify-content: center;
	display: flex;
	visibility: hidden;
}

.overlay.active {
	visibility: visible;
}

.popup {
	background: #F8F8F8;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	border-radius: 3px;
	font-family: 'Montserrat', sans-serif;
	padding: 20px;
	text-align: center;
	width: 85%;
	height: 60%;
	overflow: auto;
	
	transition: .3s ease all;
	transform: scale(0.7);
	opacity: 0;
}

.popup .btn-cerrar-popup {
	font-size: 16px;
	line-height: 16px;
	display: block;
	text-align: right;
	transition: .3s ease all;
	color: #BBBBBB;
}

.popup .btn-cerrar-popup:hover {
	color: #000;
}

.popup h3 {
	font-size: 36px;
	font-weight: 600;
	margin-bottom: 10px;
	opacity: 0;
}

.popup h4 {
	font-size: 26px;
	font-weight: 300;
	margin-bottom: 40px;
	opacity: 0;
}

.popup form .contenedor-inputs {
	opacity: 0;
}

.popup form .contenedor-inputs input {
	width: 100%;
	margin-bottom: 20px;
	height: 52px;
	font-size: 18px;
	line-height: 52px;
	text-align: center;
	border: 1px solid #BBBBBB;
}

.popup form .btn-submit {
	padding: 0 20px;
	height: 40px;
	line-height: 40px;
	border: none;
	color: #fff;
	background: #5E7DE3;
	border-radius: 3px;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	cursor: pointer;
	transition: .3s ease all;
}

.popup form .btn-submit:hover {
	background: rgba(94,125,227, .9);
}

/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active {	transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }

@keyframes entradaTitulo {
	from {
		opacity: 0;
		transform: translateY(-25px);
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes entradaSubtitulo {
	from {
		opacity: 0;
		transform: translateY(25px);
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes entradaInputs {
	from { opacity: 0; }
	to { opacity: 1; }
}

select{height:49px !important;}

caldito{display: block; margin: 1vw 5vw;}

.ventana_emergente{
    
    position: fixed;
    left: 0;
    top: 100vh;
    transition: top .7s;
    z-index: 2;
}

.ventana_emergente.activa{
    top: 0vh;
    transition: top 1s;
}

.ventana_emergente fondo
{
    width: 100vw;
    height: 100vh;
    display: block;
    position: absolute;
    background-color: #00000000;
    transition: background-color 0s 0s;
}

.ventana_emergente.activa fondo
{
    background-color: #00000060;
    transition: background-color .5s 1s;
}

.ventana_emergente .sub_ventana{
    
    background-color: #ffffff;
    border: 2px solid black;
    position: relative;
    padding: .5vw 1vw;
    overflow-x: auto;
}

.ventana_emergente .sub_ventana cerrar{
    
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1vw;
    font-weight: 600;
    color: #ffffff;
    padding: 0.4vw 1.5vw .4vw 1.5vw;
    background-color: #ff3d3d;
    cursor: default;
    border-radius: 0px 0px 0px 10px;
    border-width: 0px 0px 2px 2px;
    border-style: solid;
    border-color: #b90000;
    transition: background-color .3s;
}

.ventana_emergente .sub_ventana cerrar:hover{
    
    background-color: #c10000;
}

#consulta_cronos{
    
}

/*************************************************------Version MOVIL------**********************************************/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
	
	titulo,
	.menubtn,
	#Div_Content table th,
	#Div_Content table td{
	    font-size: 3vw !important;
	}
	
	.btnatrasito{
	    width: 35% !important;
	}
	
	.btnatrasito span{
        font-size: 3vw !important;
        display: flex;
        justify-content: center;
	}
	
	.div_to_mobile{
	    flex-direction: column;
	}
	
	.div_to_mobile .inp_to_mobile{
        width: 100% !important;
        margin-bottom: 2vw;
	}
	
	.btn_to_mobile{
        font-size: 3vw !important;
        padding: 2vw !important;
	}
	
	#Div_Content
	{
	    width: 340vw;
	}
	
	#container_prods .subline{
	    flex-direction: column;
	    padding: 0vw 15vw;
	}
	
	#container_prods .subline .specific_prod{
	    padding: 3vw !important;
	    margin: 1.5vw 0vw !important;
	    width: 100% !important;
	}
	
	#container_prods .subline .specific_prod .disponible{
	    font-size: 2.5vw;
	    padding: 2vw;
	}
	
	.consuldata{
	    text-align: center;
	}
	
	.consuldata #usuario,
	.consuldata #year_cons{
        width: 80% !important;
        padding: 1vw;
        height: auto !important;
	}
	
	titulo{
	    
	}
	
	#Main_Div form{
	    display: block !important;
	}
	
	#Main_Div form div{
	    padding: 1vw;
	}
	
	#Main_Div button{
        font-size: 3vw !important;
        padding: 2vw;
	}
	
	.divnomobile
	{
		display:none !important;
	}
	
	.tomobile{
	    overflow: auto !important;
	}
	
	div:not(.base_form), div:not(.emergente ){
	    width: 100%;}
	
	select{font-size:16px !important;width: 100% !important;}
	
	input{width:100% !important;}
	
	/* Force table to not be like tables anymore */
	.tablemob, .tablemob thead, .tablemob tbody, .tablemob th, .tablemob td, .tablemob tr, .tablemob thead th, .tablemob thead td,
	.tablemob thead tr, .tablemob tbody th, .tablemob tbody td, .tablemob tbody tr 
	{ 
		display: block !important; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.tablemob thead tr { 
		position: absolute !important;
		top: -9999px !important;
		left: -9999px !important;
	}

		.tr_pcp { border: 2px solid #000000 !important; }

		.td_pcp {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #696969;
			position: relative;
			padding-left: 50%; 
		}

		.td_pcp:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
	
	.divtablemob{overflow-x:auto !important;}
	.divtablemob table{width:800px !important;}
}