html, body {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	height: 100%;
	font-family: Inter, sans-serif, Arial;
	font-size: 14px;
	color: #1f2937; /* Dark gray */
}

td, th { /* redundant rules for bad browsers  */
	/* font-family: verdana,sans-serif;
	font-size: x-small;
	font-size: small; */
	color: #666;
}

.tippy-content {
	color: white !important;
}

.icon-perfil, .logo-con-letras, #graficos,
.options-icon-perfil, .filtros-llamadas {
	display: none;
}

h1 {
	font-weight: bold;
}

h1, h2, h3, h4 {
	/* color: #333; */
	/* color: #676868; */
	color: #1f2937;
}

h1 a:link, h1 div, h1 a {
	text-decoration: none;
	color: #1f2937 !important;
}

h1 a:hover {
	border-bottom: 1px dotted #666;
	color: #2B961A !important;
}

h2 {
	font-weight: 500;
	font-size: 140%;
	padding-bottom: 2px;
	margin: 0;
}

h3 a { color:#FFF;
	font-size: small
}

.filtros-llamadas {
	margin: 2em 0;
	justify-content: right;
}

#usernav {
	position: fixed;
	background: #686d7f;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1em;
	z-index: 999;
	width: -webkit-fill-available;
	width: -moz-available; /* mozilla */
	/* background-image: linear-gradient(180deg, #4C1E9B, #230952); */
}

#linksFiltro {
	display: grid;
}

#linksFiltro a {
	padding: 5px;
	border: 1px solid;
	border-radius: 5px;
	margin: 5px 0;
	color: #2B961A;
	display: flex;
	align-items: center;
	transition: background-color 0.2s;
}

#linksFiltro a:hover {
	background-color: #eee;
}

.options-icon-perfil {
	position: absolute;
	top: 75%;
	right: 64px;
	list-style: none;
	background-color: white;
	border-radius: 6px;
	padding: 1em;
	line-height: 2em;
	text-align: left;
	color: #1f2937;
}

.options-icon-perfil a {
	display: block;
	width: auto;
	padding: 0 4px;
	border-radius: 5px;
}

.options-icon-perfil a:hover {
	background-color: #eee;
}

.options-icon-perfil i {
	margin-right: 10px;
	width: 12px;
}

.options-icon-perfil hr {
	width: 100%;
	height: 2px;
	background-color: #674cab;
	border: none;
}

.logo-con-letras {
	width: 8em;
}

.logo-sin-letras {
	width: 3em;
}

.company-title h1 {
	margin: 0;
	color: white;
	text-shadow: none;
}

#wrapper {
	margin: 0 auto;
}

.current-user {
	color: white;
	display: flex;
	justify-content: space-between;
}

.current-user-name {
	margin-right: 1em;
}

.current-user .fa {
	scale: 1.5;
	margin: 0 1em;
	color: white;
	cursor: pointer;
}

.expand {
	min-width: 270px;
	max-width: 270px;
}

/* sidebar */
.sidebar {
	position: fixed;
	left: 0;
	z-index: 99;
	background: white;
	height: 100%;
	text-align: left;
	box-shadow: 0 4px 8px rgba(36, 37, 39, .16), 0 8px 16px rgba(36, 37, 39, .1);
	font-size: 16px;
	overflow-y: auto;
	overflow-x: hidden;
	width: 67px;

	pointer-events: all;
	display: flex;
	flex-direction: column;
}

.sidebar:hover {
	width: 270px;
}

.sidebar:hover .feature {
	justify-content: space-between !important;
}

.logo-sidebar {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 5em;
}

.sidebar:hover .logo-sidebar {
	justify-content: flex-start;
}

.visible {
	visibility: visible !important;
	opacity: 1 !important;
}

.feature {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1em;
	height: 1em;
	cursor: pointer;
}

.sidebar li {
	list-style: none;
	margin: 9px 0;
	transition: all 0.2s;
}

.fa-angle-down {
	padding: 0 1em;
}

.sidebar li i, .sidebar li .main-feature {
	font-size: 16px;
}

.sidebar li.secondary-feature {
	padding: 0 7px;
}

.sidebar .down {
	transition-duration: 0.5s;
}

.sidebar .up {
	transform: rotate(180deg);
  transition-duration: 0.5s;
}

.current_link {
	color: #5F6368;
}

/* sub links del menú */
.secondary {
	display: none;
}

/* link de cada item */
.secondary a {
	color: #5F6368 !important;
	display: block;
	padding: 5px 1em;
}

.secondary a.secondary_hover {
	color: #E15F62 !important;
	background: lightgray !important;
	border-radius: 5px;
}

/* dropdown */
/* .secondary li {
	margin: 1em 0;
} */

.sidebar .current > div, .current-now > div {
	background: #E15F62;
	transition: all 0.2s;
}

.current-now .fa,
.current-now .main-feature,
.current {
	color: white;
}

.sidebar .current-now:hover .main-feature,
.sidebar .current-now:hover .fa,
.sidebar .current:hover .main-feature,
.sidebar .current:hover .fa {
	color: white;
}

.main_link {
	margin-top: 1em;
}

p {
	font-weight: 400;
	margin: 0 10px 10px;
}

fieldset {margin-bottom: 20px;}

#navigation h3 {
	color: #666;
}

p.note {
	background: #EEE;
	padding: 4px;
	font-family: tahoma;
	font-size: 85%;
	line-height: 130%;
	margin-top: 0;
}

div#main {
	margin-top: 6em;
	width: 100%;
	display: inline-block;
	text-align: left;
	margin-bottom: 3em;
}

div.content {
	float: none;
}

div#header h1 {
	height:100px;
	line-height:80px;
	margin:0;
  padding-left:0px;
	background: #1c7eab;
	color: #fff;
  background-image:url(/images/medularis/bg_header2.jpg);
  background-repeat:repeat-x;
  font-size: 180%;
  text-align:center;
}

div#header h3 {
	float:right;
	position:relative;
	text-align:right;
	padding-right: 20px;
	width:300px;
}

div#header {
	background:#1c7eab;
	border-bottom:1px solid #888;
	border-top:2px solid #006b98;
}

div#content p {
	line-height:1.4
}

div#extra {
	background:#fff;
	border-bottom:1px solid #ccc;
	color: #555;
}

div#footer {
	width:100%;
	background: #222;
	color: #222;
	background-image:url(../images/medularis/bg_footer_min.jpg);
	background-repeat:repeat-x;
	bottom:0px;
}

div#footer p{margin:0;padding:0px}
div#wrapper{padding-top:0;text-align:center;}
div#extra{clear:both;width:100%;margin-bottom:10px;padding-top:1px;}

div#usuario{padding-right:15px;font-size:11px}

div#header_bar{background-image:url(/images/medularis/menu_header.jpg);background-repeat:repeat-x;width:100%;padding-top:4px;padding-bottom:5px;border:0px;border-bottom:solid 1px #191919;background-color:#222;text-align:right;}

div#navigation{
	background: #F6F6F6;
	border-radius: 10px;
	border: 1px solid #F7F7F7;
	padding: 10px;
	margin-top:86px;
	margin-right:10px;
	text-align:left;
	float:right;
	width:20%;
	color:#666;
	margin-bottom:10px;
	min-height:100%;
}

div.popup-html-link {
	background: #F6F6F6;
	border-radius: 10px;
	border: 1px solid #F7F7F7;
	padding: 10px;
}

strong {
	color :#666;
}

a, a:link {
	color: #E15F62;
	text-decoration: none;
}

a:hover{
	color: #ff5f58;
	text-decoration:none;
}

textarea {
	border-radius: 5px;
	color: #333;
	border: 1px solid #d1d5db;
	padding: 5px;
	background-color: #eeeeee8f !important;
}

span#little{
	font-size:smaller;
	padding-left:25px;
	color:#999;
}

div#container{
	min-height:100%;
	height: auto !important;
	margin: 0 auto -115px;
}

* html #container{height:100%}

#text_error {
	color:#FF3333;
}

#lista_aviso_agente {
	background:#F78585;
	border:solid 1px #EA2525;
	color: #EA2525;
	padding:10px;
	padding-bottom:0px;
	padding-top:6px;
	margin:5px;
	margin-right:7px;
	margin-top:0px;
	margin-bottom:20px;
}

#lista_aviso_agente ul {
	font-size:11px;
	padding-left:10px;
	padding-bottom:0px;
	margin-bottom:0px;
}

#lista_aviso_agente li {
	padding-bottom:10px;
}

div#acciones {
	padding-right:5px;
	padding-left:10px;
	padding-bottom:5px;
	color:#666;
}

table.normal {
	background-color:transparent !important;
}

table.normal tbody {
	border: 0px;
	background-color:transparent !important;
}

table.normal tr {
	border: 0px;
	background-color:transparent !important;
}

table.normal td {
	background-color:transparent !important;
	font-size:12px;
	border: 0px;
}

#tabla_horario {
	margin: 0 45px;
	width:80%;
}

#tabla_horario tr {
	border: 0px;
	background:transparent;
}

#tabla_horario tbody {
	background:transparent;
	border: none;
}

#tabla_horario td {
	background:transparent;
	font-size:12px;
	border:#fff;
}

div#login {
	background-color: #e2e1e1;
	background-image: url(/images/medularis/menu_nav.jpg);
	background-repeat: repeat-x;
	border: solid 1px #bbb;
	padding:4px 0px 3px 2px;
	margin-top: 10px;
	margin-right:	10px;
	text-align:	justify;
	color: #666;
	margin-bottom: 10px;
	width: 200px;
}

#login_error {
	width:50%;
	background:#F78585;
	border:solid 1px #EA2525;
	color: #EA2525;
	padding:5px;
}

#tabla_field {
	padding:10px;
}

#tabla_field tr {
	border:0px;
}

#tabla_field td {
	border:0px;
}

#cambiar_pass {
	font-size:11px;
}

#error_msg span.mega-error {
	font-size: 40px;
	color: red;
	float: left;
	position: relative;
	left: -30px;
	top: -10px;
}

#error_msg {
	border:1px solid #d34040;
	background: #f19f9f;
	padding: 15px 50px;
	margin:10px;
	border-radius: 3px;
}

#error_msg h2 {
	font-size:14px;
	border:0px;
	text-shadow: none;
	color: #333;
}

div.fieldWithErrors input,div.fieldWithErrors select{
	background: #f1b7b7;
	border: 1px solid #D34040
}

p.feedback_ok {
	color: #00882D;
	font-size: 10px;
	margin-left: 0px;
	padding-left: 0px;
}

p.feedback_error {
	color: #CB000F;
	font-size: 10px;
}

#graf_inf a {
	color: #666666
}

span.flechas {
	position:	relative;
	top: 12px;
	color: #2B961A;
	font-size: 50px;
	margin:	20px 5px;
}

table.agent td {
	padding: 0px;
}

.left {
	float: left;
}

.right {
	float: right
}

div.separator {
	background: #CCC;
	border-radius: 5px;
	border: 1px solid #F7F7F7;
	padding: 2px 0px;
	width: 100%;
	margin: 50px 0px;
}

div.div-refresh {
	float:right;
	margin-bottom:8px
}

/* div.general-calls h2 {
	margin-top: 23px;
	float:left;
} */

td.custom-parameters a {
	padding: 0px;
}

div.menu-calls div#acciones ul li a {
	padding: 0px;
	display: inline;
}

div.menu-calls div#acciones h2 {
	margin-bottom: 10px;
}

div.menu-calls div#acciones ul.link-actions {
	margin-bottom: 20px;
}

div.menu-calls div#acciones ul.link-actions li {
	margin-bottom: 15px;
}

div.menu-calls div#acciones ul li img {
	float: left;
	margin-right: 5px;
	margin-top: -1px;
}

div.menu-calls div#acciones ul li,
div.menu-calls div#acciones ul.icons li.first {
	margin: 5px 0px;
}

div.menu-calls div#acciones ul.icons li {
	margin: 15px 0px 0px 0px;
}

div.menu-calls div#acciones ul li.ultra-close {
	margin: 3px 0px;
}

div.menu-calls div#acciones span#little {
	padding: 0px;
}

table th a:visited {
	color: #FFF !important;
}

.block {
	display: block;
}

div.render-form-restricciones {
	margin: 10px;
}

fieldset.contact-view label {
	line-height: 100% !important;
}

div.ul-li-inline ul li ul.second-level li,ul.second-level li {
	list-style-type: square;
	list-style-position:inside;
	margin-left: 10px;
}

fieldset.contact-view ul.first {
	width: 80%;
}

ul.block li {
	display: block !important;
}

div.ul-li-inline ul li span,
div.ul-li-inline ul li label {
	display: inline;
	font-weight: 500;
}

div.width-80 {
	width: 80%
}

div.width-50 {
	width: 50%;
}

fieldset.contact-view div.hidden-parameters {
	margin-top: 10px;
}

div.company-span {
	float: left;
	text-align: left;
	color: white;
	margin-right: 2em;
}

div.company-span select {
	font-size: 11px;
	padding: 0px 0pt;
	margin-top: 1px;
	border: 1px solid #CCC !important;
	float: right;
}

.return_pending_call:disabled {
  cursor: default;
}

#navigation #search_user_id {
  width: 160px
}

.new-button, .new-button-submit {
  border-radius: 7px;
  font-size: 12px;
  cursor: pointer;
	padding: 0.5rem 1rem;
	border-radius: 0.375rem;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.new-button {
	background-color: white;
	border: 1px solid #cccccc;
	color: #374151;
}

.new-button:hover {
  color: white !important;
  background-color: #ff5f58;
}

.new-button-submit {
	background-color: #4B1E9B;
	border: 1px solid #4B1E9B;
	color: white;
}

.new-button-submit:hover {
	color: white !important;
	background-color: #ff5f58 !important;
}

.new-button-submit:hover i {
	color: white !important;
}

thead th {
	background: #686d7f !important;
	color: white;
}

.no-disponible {
	pointer-events: none;
	opacity: 0.2;
}

.iframe-popup-soporte {
	height: 50vh;
	width: 100%;
}

.swal2-actions button {
	transition: all 0.2s;
}

.swal2-cancel:hover {
	background-color: red !important;
	color: white !important;
}

/* Card Styling */
.card {
  background-color: #ffffff;
  border: 1px solid #eee; /* Light border */
  border-radius: 8px;
  margin-bottom: 24px;
  overflow: hidden;
}

.card-header {
  padding: 20px 24px;
  border-bottom: 1px solid #eee;
  background-color: #f9fafb; /* Slightly darker header background */
}

.card-title {
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 4px;
}

.card-description {
  font-size: 0.875rem; /* 14px */
  color: #6b7280; /* Medium gray */
  margin: 0;
}

.card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Spacing between form groups */
}

.fa-info-circle {
  color: #44b031;
  margin-left: 5px;
  font-size: small;
}

.grid-2-cols {
  display: grid;
	grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.overflow-auto {
	overflow-y: auto;
}

/* Firefox (uncomment to work in Firefox, although other properties will not work!)  */
/* {
  scrollbar-width: thin;
  scrollbar-color: #A6A6A6 #DFE9EB;
}*/

/* custom scrollbar Chrome, Edge and Safari */
/**::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

*::-webkit-scrollbar-track {
  border-radius: 2px;
  background-color: #fff;
}

*::-webkit-scrollbar-track:hover {
  background-color: #fff;
}

*::-webkit-scrollbar-track:active {
  background-color: #fff;
}

*::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: #A6A6A6;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #666666;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #666666;
}*/

@media (width > 1024px) {
	.box {
		max-width: 1024px;
		margin: auto;
	}
}

@media (width > 680px) {

	#linksFiltro {
		margin-right: 2em !important;
	}
}

@media (width < 970px) {
	div#main {
		margin-top: 8em !important;
	}
}

@media (width < 952px) {
	body {
		transition: all 0.2s !important;
	}

	div#main {
		margin-top: 7em !important;
	}

	.options-icon-perfil {
		top: 96%;
	}

	.grid-2-cols {
		grid-template-columns: 1fr;
	}

}

/* mobile */
@media (width < 680px) {

	.box {
    margin-right: 1em !important;
		padding: 0;
	}

	.company-title {
		display: none;
	}

	.usernav-wrapper {
		width: 100%;
		display: grid !important;
	}

	div.company-span {
		margin: 0;
	}

	#usernav {
		justify-content: flex-end;
	}

	.mostrar-filtros {
		display: block;
	}

	#linksFiltro {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	#linksFiltro a {
		margin: 1em;
	}

	#filtros-table {
		display: grid !important;
	}

	.dataTables_length {
		margin-top: 1em;
	}

	#table-columns-check {
		display: grid !important;
	}
}