.card-title{ font-size:25px!important; font-weight:bold!important;
font-family: 'Sarabun', sans-serif!important;
}
* {
font-family: 'Sarabun', sans-serif;
}
html{
zoom: 85%;
}
label{
color:#000000;
font-family: 'Sarabun', sans-serif!important;

}
.text_guide{
font-size:14px;float:left; padding:25px; color: #FF0000;
font-family: 'Sarabun', sans-serif;

}
.card-content{
font-family: 'Sarabun', sans-serif;
}
  .timer, .timer-done, .timer-loop {
	font-size: 30px;
	color: #FFFFFF;
	font-weight: bold;
	padding: 10px;
  }

  .jst-hours {
	float: left;
  }
  .jst-minutes {
	float: left;
  }
  .jst-seconds {
	float: left;
  }
  .jst-clearDiv {
	clear: both;
  }
  .jst-timeout {
	color: red;
  }

.is-complete {
  color: red;
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
  -webkit-animation-duration: .7s;
}

.btn-lock {

  display: inline-block;
  background: #ff5b5b;
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  padding: 12px 0 0 18px;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-lock svg {
  fill: none;
  transform: translate3d(0, 0, 0);
}
.btn-lock svg .bling {
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 3;
  stroke-dashoffset: 15;
  transition: all 0.3s ease;
}
.btn-lock svg .lock {
  stroke: #fff;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 36;
  transition: all 0.4s ease;
}
.btn-lock svg .lockb {
  fill: #fff;
  fill-rule: evenodd;
  clip-rule: evenodd;
  transform: rotate(8deg);
  transform-origin: 14px 20px;
  transition: all 0.2s ease;
}
#inpLock {
  display: none;
}
#inpLock:checked + label {
  background: #20cca5;
}
#inpLock:checked + label svg {
  opacity: 1;
}
#inpLock:checked + label svg .bling {
  animation: bling 0.3s linear forwards;
  animation-delay: 0.2s;
}
#inpLock:checked + label svg .lock {
  stroke-dasharray: 48;
  animation: locked 0.3s linear forwards;
}
#inpLock:checked + label svg .lockb {
  transform: rotate(0);
  transform-origin: 14px 22px;
}
@-moz-keyframes bling {
  50% {
	stroke-dasharray: 3;
	stroke-dashoffset: 12;
  }
  100% {
	stroke-dasharray: 3;
	stroke-dashoffset: 9;
  }
}
@-webkit-keyframes bling {
  50% {
	stroke-dasharray: 3;
	stroke-dashoffset: 12;
  }
  100% {
	stroke-dasharray: 3;
	stroke-dashoffset: 9;
  }
}
@-o-keyframes bling {
  50% {
	stroke-dasharray: 3;
	stroke-dashoffset: 12;
  }
  100% {
	stroke-dasharray: 3;
	stroke-dashoffset: 9;
  }
}
@keyframes bling {
  50% {
	stroke-dasharray: 3;
	stroke-dashoffset: 12;
  }
  100% {
	stroke-dasharray: 3;
	stroke-dashoffset: 9;
  }
}
@-moz-keyframes locked {
  50% {
	transform: translateY(1px);
  }
}
@-webkit-keyframes locked {
  50% {
	transform: translateY(1px);
  }
}
@-o-keyframes locked {
  50% {
	transform: translateY(1px);
  }
}
@keyframes locked {
  50% {
	transform: translateY(1px);
  }
}

.inline{
  display:inline-block;
  padding:0;
}

* {
  font-family: Arial, Helvetica, san-serif;
}

.emojionearea-standalone {
  float: left;
}

.content_all{ margin-top:-60px!important;}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.progressbar{
	position:relative;
	display:block;
	width:100%;
	height:20px;
	padding:10px 20px;
	border-bottom:1px solid rgba(255,255,255,0.25);
	border-radius:16px;
	margin:40px auto;
	-webkit-box-shadow:0px 4px 4px -4px rgba(255, 255, 255, 0.4),0px -3px 3px -3px rgba(255, 255, 255, 0.25),inset 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
	box-shadow:0px 4px 4px -4px rgba(255, 255, 255, 0.4),0px -3px 3px -3px rgba(255, 255, 255, 0.25),inset 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
}
.progressbar:before{
	position:absolute;
	display:block;
	content:"";
	width:100%;
	height:18px;
	top:0px;
	left:0px;
	-webkit-border-radius:20px;
	border-radius:20px;
	background:#222;
	-webkit-box-shadow:inset 0px 0px 6px 0px rgba(0, 0, 0, 0.85);;
	box-shadow:inset 0px 0px 6px 0px rgba(0, 0, 0, 0.85);
	border:1px solid rgba(0,0,0,0.8);
}
.bar {
	position:absolute;
	display:block;
	width:0px;
	height:16px;
	top:2px;
	left:2px;
	background:rgb(126,234,25);
	background:-moz-linear-gradient(top,  rgba(126,234,25,1) 0%, rgba(83,173,0,1) 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(126,234,25,1)), color-stop(100%,rgba(83,173,0,1)));
	background:-webkit-linear-gradient(top,  rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
	background:-o-linear-gradient(top,  rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
	background:-ms-linear-gradient(top,  rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
	background:linear-gradient(to bottom,  rgba(126,234,25,1) 0%,rgba(83,173,0,1) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#7eea19', endColorstr='#53ad00',GradientType=0 );
	-webkit-border-radius:16px;
	border-radius:16px;
	-webkit-box-shadow:0px 0px 12px 0px rgba(126, 234, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
	box-shadow:0px 0px 12px 0px rgba(126, 234, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
	overflow:hidden;
}
.bar.color2 {
	background:rgb(229,195,25);
	background:-moz-linear-gradient(top,  rgba(229,195,25,1) 0%, rgba(168,140,0,1) 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,195,25,1)), color-stop(100%,rgba(168,140,0,1)));
	background:-webkit-linear-gradient(top,  rgba(229,195,25,1) 0%,rgba(168,140,0,1) 100%);
	background:-o-linear-gradient(top,  rgba(229,195,25,1) 0%,rgba(168,140,0,1) 100%);
	background:-ms-linear-gradient(top,  rgba(229,195,25,1) 0%,rgba(168,140,0,1) 100%);
	background:linear-gradient(to bottom,  rgba(229,195,25,1) 0%,rgba(168,140,0,1) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5c319', endColorstr='#a88c00',GradientType=0 );
	-webkit-box-shadow:0px 0px 12px 0px rgba(229, 195, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
	box-shadow:0px 0px 12px 0px rgba(229, 195, 25, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
}
.bar.color3 {
	background:rgb(232,25,87);
	background:-moz-linear-gradient(top,  rgba(232,25,87,1) 0%, rgba(170,0,51,1) 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,25,87,1)), color-stop(100%,rgba(170,0,51,1)));
	background:-webkit-linear-gradient(top,  rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
	background:-o-linear-gradient(top,  rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
	background:-ms-linear-gradient(top,  rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
	background:linear-gradient(to bottom,  rgba(232,25,87,1) 0%,rgba(170,0,51,1) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e81957', endColorstr='#aa0033',GradientType=0 );
	-webkit-box-shadow:0px 0px 12px 0px rgba(232, 25, 87, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
	box-shadow:0px 0px 12px 0px rgba(232, 25, 87, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
}
.bar.color4 {
	background:rgb(24,109,226);
	background:-moz-linear-gradient(top,  rgba(24,109,226,1) 0%, rgba(0,69,165,1) 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(24,109,226,1)), color-stop(100%,rgba(0,69,165,1)));
	background:-webkit-linear-gradient(top,  rgba(24,109,226,1) 0%,rgba(0,69,165,1) 100%);
	background:-o-linear-gradient(top,  rgba(24,109,226,1) 0%,rgba(0,69,165,1) 100%);
	background:-ms-linear-gradient(top,  rgba(24,109,226,1) 0%,rgba(0,69,165,1) 100%);
	background:linear-gradient(to bottom,  rgba(24,109,226,1) 0%,rgba(0,69,165,1) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#186de2', endColorstr='#0045a5',GradientType=0 );
	-webkit-box-shadow:0px 0px 12px 0px rgba(24, 109, 226, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
	box-shadow:0px 0px 12px 0px rgba(24, 109, 226, 1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.45),inset 1px 0px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);
}
.bar:before {
	position:absolute;
	display:block;
	content:"";
	width:606px;
	height:150%;
	top:-25%;
	left:-25px;
	background:-moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.01) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%);
	background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.35)), color-stop(50%,rgba(255,255,255,0.01)), color-stop(51%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
	background:-webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	background:-o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	background:-ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	background:radial-gradient(ellipse at center,  rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.01) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#59ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.bar:after {
	position:absolute;
	display:block;
	content:"";
	width:64px;
	height:16px;
	right:0;
	top:0;
	-webkit-border-radius:0px 16px 16px 0px;
	border-radius:0px 16px 16px 0px;
	background:-moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 98%, rgba(255,255,255,0) 100%);
	background:-webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(98%,rgba(255,255,255,0.6)), color-stop(100%,rgba(255,255,255,0)));
	background:-webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
	background:-o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
	background:-ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
	background:linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 98%,rgba(255,255,255,0) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.bar span {
	position:absolute;
	display:block;
	width:100%;
	height:64px;
	-webkit-border-radius:16px;
	border-radius:16px;
	top:0;
	left:0;
	background:url("data:image/png;base64, ") 0 0;
	-webkit-animation:sparkle 1500ms linear infinite;
	-moz-animation:sparkle 1500ms linear infinite;
	-o-animation:sparkle 1500ms linear infinite;
	animation:sparkle 1500ms linear infinite;
	opacity:0.2;
}
.label {
	font-family:'Aldrich', sans-serif;
	position:absolute;
	display:block;
	width:40px;
	height:30px;
	line-height:30px;
	top:20px;
	left:0px;
	background:rgb(76,76,76);
	background:-moz-linear-gradient(top,  rgba(76,76,76,1) 0%, rgba(38,38,38,1) 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(100%,rgba(38,38,38,1)));
	background:-webkit-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
	background:-o-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
	background:-ms-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
	background:linear-gradient(to bottom,  rgba(76,76,76,1) 0%,rgba(38,38,38,1) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#262626',GradientType=0 );
	font-weight:bold;
	font-size:12px;
	color:#fff;
	text-align:center;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid rgba(0,0,0,0.2);
	-webkit-box-shadow:0px 1px 4px 0px rgba(0, 0, 0, 0.3);
	box-shadow:0px 1px 4px 0px rgba(0, 0, 0, 0.3);
	text-shadow:0px -1px 0px #000000,0px 1px 1px #000000;
	filter:dropshadow(color=#000000, offx=0, offy=-1);
}
.label span {
	position:absolute;
	display:block;
	width:12px;
	height:9px;
	top:-9px;
	left:14px;
	background:transparent;
	overflow:hidden;
}
.label span:before {
	position:absolute;
	display:block;
	content:"";
	width:8px;
	height:8px;
	top:4px;
	left:2px;
	border:1px solid rgba(0,0,0,0.5);
	background:rgb(86,86,86);
	background:-moz-linear-gradient(-45deg,  rgba(86,86,86,1) 0%, rgba(76,76,76,1) 50%);
	background:-webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(86,86,86,1)), color-stop(50%,rgba(76,76,76,1)));
	background:-webkit-linear-gradient(-45deg,  rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
	background:-o-linear-gradient(-45deg,  rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
	background:-ms-linear-gradient(-45deg,  rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
	background:linear-gradient(135deg,  rgba(86,86,86,1) 0%,rgba(76,76,76,1) 50%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#4c4c4c',GradientType=1 );
	-webkit-box-shadow:0px -1px 2px 0px rgba(0, 0, 0, 0.15);
	box-shadow:0px -1px 2px 0px rgba(0, 0, 0, 0.15);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}
@-webkit-keyframes sparkle {
	from {background-position:0 0;}
	to {background-position:0 -64px;}
}
@-moz-keyframes sparkle {
	from {background-position:0 0;}
	to {background-position:0 -64px;}
}
@-o-keyframes sparkle {
	from {background-position:0 0;}
	to {background-position:0 -64px;}
}
@keyframes sparkle {
	from {background-position:0 0;}
	to {background-position:0 -64px;}
}
.menu_nav a{ color:#000000!important;}

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

a {
	color: #337ab7;
	text-decoration: none;
}
i{
  margin-bottom:4px;
}

.btnx {
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	height:70px;
}

.btn-app {
	color: white;
	box-shadow: none;
	border-radius: 3px;
	position: relative;
	padding: 10px 15px;
	margin: 0;
	min-width: 60px;
	max-width: 80px;
	text-align: center;
	border: 1px solid #ddd;
	background-color: #f4f4f4;
	font-size: 12px;
	transition: all .2s;
	background-color: steelblue !important;
}

.btn-app > .fa, .btn-app > .glyphicon, .btn-app > .ion {
	font-size: 30px;
	display: block;
}

.btn-app:hover {
	border-color: #aaa;
	transform: scale(1.1);
}

.pdf {
  background-color: #0099FF !important;
}

.excel {
	background-color: #3ca23c !important;
}

.csv {
	background-color: #e86c3a !important;
}

.imprimir {
	background-color: #8766b1 !important;
}

/*
Esto es opcional pero sirve para que todos los botones de exportacion se distribuyan de manera equitativa usando flexbox

.flexcontent {
	display: flex;
	justify-content: space-around;
}
*/

.selectTable{
  height:40px;
  float:right;
}

div.dataTables_wrapper div.dataTables_filter {
	text-align: left;
	margin-top: 15px;
}

.btn-secondary {
	color: #fff;
	background-color: #4682b4;
	border-color: #4682b4;
}
.btn-secondary:hover {
	color: #fff;
	background-color: #315f86;
	border-color: #545b62;
}

.titulo-tabla{
  color:#606263;
  text-align:center;
  margin-top:15px;
  margin-bottom:15px;
  font-weight:bold;
}

.inline{
  display:inline-block;
  padding:0;
}

a {
  text-decoration: none;
}

#overlayx {
  position: fixed;

  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
	z-index:9999;
}

#textx{
background:#FFFFFF;
width:450px;
  position: absolute;
  top: 40%;
  left: 50%;
 
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
	z-index:9999;
}

#overlayx2 {
  position: fixed;

  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
	z-index:9999;
}

#textx2{
background:#FFFFFF;
width:400px;
  position: absolute;
  top: 51%;
  left: 50%;
 
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
	z-index:9999;
}

#overlayx3 {
  position: fixed;

  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
	z-index:9999;
}

#textx3{
background:#FFFFFF;
width:450px;
height:500px;
  position: absolute;
  top: 50%;
  left: 50%;
 
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  z-index:9999;
}
.swal2-container {
  z-index: 15000;
}
