/*
    =========================================================================
    Software: forms_reports.css
    Description: Estilo CSS para el módulo para crear formularios y reportes
                 forms_reports.js
    Contact: http://www.portal24x7.com
    Copyright (c) 2014-2019, Dante Cortés
    
    La documentación de la clase la puede consultar en 
    http://www.portal24x7.com/
    
		=========================================================================
*/

/* ==================== CUERPO GENERAL ==================== */
* {
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
}

body {
	/* overflow: hidden; */
	/* background-color: #ffffff; */
	font-family: Tahoma, Verdana, Segoe, sans-serif;
	font-size: 12px;
	color: #000000;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-ms-user-select:none;
	}

.no_overflow {
	overflow: hidden;
	}

a:link {
	text-decoration: bold;
	color: #000000;
	}

a:visited {
	text-decoration: bold;
	color: #000000;
	}

a:hover {
	text-decoration: bold underline;
	color: #000000;
	}

a:active {
	text-decoration: bold;
	}

a:focus {
	text-decoration: bold;
	}

.center-x {
	margin-left: auto !important;
	margin-right: auto !important;
	display: block !important;
	}

::-webkit-scrollbar {
   width: 12px;
	}

::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); /* .1 a .3 */
   border-radius: 10px;
	}

::-webkit-scrollbar-thumb {
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* .2 a .5 */
	}

/* Base de tamaños */
.optional-caption {
  display: none;
}
.optional-caption2 {
  display: none;
}
.both-col {
  clear: both;
}
.left-col {
  clear: both;
}
.right-col {
  clear: both;
}
.left-col3 {
  clear: both;
}
.center-col3 {
  clear: both;
}
.right-col3 {
  clear: both;
}
.left-col4 {
  clear: both;
}
.center-left-col4 {
  clear: both;
}
.center-right-col4 {
  clear: both;
}
.right-col4 {
  clear: both;
}

@media (min-width: 576px) {
  .optional-caption {
		display: none;
	}
	.optional-caption2 {
		display: none;
	}
	.both-col {
    clear: both;
  }
  .left-col {
    clear: both;
  }
  .right-col {
    clear: both;
  }
	.left-col3 {
		clear: both;
	}
	.center-col3 {
		clear: both;
	}
	.right-col3 {
		clear: both;
	}
	.left-col4 {
		clear: both;
	}
	.center-left-col4 {
		clear: both;
	}
	.center-right-col4 {
		clear: both;
	}
	.right-col4 {
		clear: both;
	}
}

@media (min-width: 768px) {
  .optional-caption {
		display: none;
	}
	.optional-caption2 {
		display: block;
	}
	.both-col {
    clear: both;
  }
  .left-col {
    clear: both;
  }
  .right-col {
    clear: both;
  }
	.left-col3 {
		float: left;
		width: 49.9%;
		margin-right: 0px;
    min-width: 230px;
    clear: none;
	}
	.center-col3 {
		float: left;
		width: 49.9%;
		margin-right: 0px;
    min-width: 230px;
    clear: none;
	}
	.right-col3 {
		float: right;
		width: 49.9%;
		margin-left: 0px;
    min-width: 230px;
    clear: none;
	}
	.left-col4 {
		float: left;
		width: 49.9%;
		margin-right: 0px;
    min-width: 230px;
    clear: none;
	}
	.center-left-col4 {
		float: left;
		width: 49.9%;
		margin-right: 0px;
    min-width: 230px;
    clear: none;
	}
	.center-right-col4 {
		float: left;
		width: 49.9%;
		margin-right: 0px;
    min-width: 230px;
    clear: none;
	}
	.right-col4 {
		float: right;
		width: 49.9%;
		margin-left: 0px;
    min-width: 230px;
    clear: none;
	}
}

@media (min-width: 992px) {
  .optional-caption {
		display: none;
	}
	.optional-caption2 {
		display: block;
	}
	.both-col {
    clear: both;
  }
  .left-col {
    float: left;
		width: 49.9%;
		min-width: 230px;
		margin-right: 0px;
		clear: none;
  }
  .right-col {
    float: right;
		width: 49.9%;
		min-width: 230px;
		margin-left: 0px;
		clear: none;
  }
	.left-col3 {
		float: left;
		width: 49.9%;
		margin-right: 0px;
    min-width: 230px;
    clear: none;
	}
	.center-col3 {
		float: left;
		width: 49.9%;
		margin-right: 0px;
    min-width: 230px;
    clear: none;
	}
	.right-col3 {
		float: right;
		width: 49.9%;
		margin-left: 0px;
    min-width: 230px;
    clear: none;
	}
	.left-col4 {
		float: left;
		width: 49.9%;
		margin-right: 0px;
    min-width: 230px;
    clear: none;
	}
	.center-left-col4 {
		float: left;
		width: 49.9%;
		margin-right: 0px;
    min-width: 230px;
    clear: none;
	}
	.center-right-col4 {
		float: left;
		width: 49.9%;
		margin-right: 0px;
    min-width: 230px;
    clear: none;
	}
	.right-col4 {
		float: right;
		width: 49.9%;
		margin-left: 0px;
    min-width: 230px;
    clear: none;
	}
}

@media (min-width: 1200px) {
  .optional-caption {
		display: block;
	}
	.optional-caption2 {
		display: block;
	}
	.both-col {
    clear: both;
  }
  .left-col {
    float: left;
		width: 49.9%;
		min-width: 230px;
		margin-right: 0px;
		clear: none;
  }
  .right-col {
    float: right;
		width: 49.9%;
		min-width: 230px;
		margin-left: 0px;
		clear: none;
  }
	.left-col3 {
		float: left;
		width: 33.3%;
		min-width: 155px;
		margin-right: 0px;
    clear: none;
	}
	.center-col3 {
		float: left;
		width: 33.3%;
		min-width: 155px;
		margin-right: 0px;
    clear: none;
	}
	.right-col3 {
		float: right;
		width: 33.3%;
		min-width: 155px;
		margin-left: 0px;
    clear: none;
	}
	.left-col4 {
		float: left;
		width: 24.9%;
		min-width: 115px;
		margin-right: 0px;
    clear: none;
	}
	.center-left-col4 {
		float: left;
		width: 24.9%;
		min-width: 115px;
		margin-right: 0px;
    clear: none;
	}
	.center-right-col4 {
		float: left;
		width: 24.9%;
		min-width: 115px;
		margin-right: 0px;
    clear: none;
	}
	.right-col4 {
		float: right;
		width: 24.9%;
		min-width: 115px;
		margin-left: 0px;
    clear: none;
	}
}

/* ==================== Graficos de arbol ==================== */

.node {
	cursor: pointer;
}

.node circle {
	fill: #fff;
	stroke: steelblue;
	stroke-width: 1.5px;
}

.node text {
	font-size: 10px; 
	font-family: sans-serif;
}

.link {
	fill: none;
	stroke: #ccc;
	stroke-width: 1.5px;
}

.templink {
	fill: none;
	stroke: red;
	stroke-width: 3px;
}

.ghostCircle.show{
	display: block;
}

.ghostCircle, .activeDrag .ghostCircle{
	display: none;
}

/* ==================== Botones de teléfono ==================== */

.btn_fb, .btn_tw, .btn_ln, .btn_yt, .btn_wa {
  color: black;
  background-color: #e6e6e6;
  border-radius: 4px;
  border: 1px solid #a0a0a0;
}

.btn_fb:hover {
  color: white;
	background-color: #3b5998;
}

.btn_wa:hover {
  color: white;
	background-color: #25D366;
}

.btn_tw:hover {
  color: white;
	background-color: #00acee;
}

.btn_ln:hover {
  color: white;
	background-color: #0e76a8;
}

.btn_yt:hover {
  color: white;
	color: #c4302b;
}