/*Cambios del CSS de la plantilla Hyper*/
:root{
	--color-principal: #007dcd;
}
:root {
  --ct-menu-condensed-link-bg: var(--color-principal);
  --ct-primary: var(--color-principal);
  --ct-link-color: var(--color-principal);
}
html[data-menu-color=light] {
  --ct-menu-item-hover-color: var(--color-principal);
  --ct-menu-item-active-color: var(--color-principal);
  --ct-help-box-bg: var(--color-principal);
}
html[data-topbar-color=light] {
  --ct-topbar-item-hover-color: var(--color-principal);
}
.form-check-input:checked {
  background-color: var(--color-principal);
  border-color: var(--color-principal);
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--color-principal);
  border-color: var(--color-principal);
}
div.DTE_Field input:focus:checked, div.DTE_Field textarea:focus:checked {
    background-color: var(--color-principal);
}
.form-range::-webkit-slider-thumb {
  background-color: var(--color-principal);
}
.form-range::-moz-range-thumb {
  background-color: var(--color-principal);
}
.btn-primary {
  --ct-btn-bg: var(--color-principal);
  --ct-btn-border-color: var(--color-principal);
  --ct-btn-hover-color: var(--color-principal);
  --ct-btn-hover-bg: #fff;
  --ct-btn-hover-border-color: var(--color-principal);
  --ct-btn-disabled-bg: var(--color-principal);
  --ct-btn-disabled-border-color: var(--color-principal);
  --ct-btn-active-color: #fff;
  --ct-btn-active-bg: var(--color-principal);
  --ct-btn-active-border-color: var(--color-principal);
}
.btn-outline-primary {
  --ct-btn-color: var(--color-principal);
  --ct-btn-border-color: var(--color-principal);
  --ct-btn-hover-bg: var(--color-principal);
  --ct-btn-hover-border-color: var(--color-principal);
  --ct-btn-active-bg: var(--color-principal);
  --ct-btn-active-border-color: var(--color-principal);
  --ct-btn-disabled-color: var(--color-principal);
  --ct-btn-disabled-border-color: var(--color-principal);
}
.nav-pills {
  --ct-nav-pills-link-active-bg: var(--color-principal);
}
.accordion {
  --ct-accordion-active-color: var(--color-principal);
}
.pagination {
  --ct-pagination-active-bg: var(--color-principal);
  --ct-pagination-active-border-color: var(--color-principal);
}
.progress {
  --ct-progress-bar-bg: var(--color-principal);
}
.list-group {
  --ct-list-group-active-bg: var(--color-principal);
  --ct-list-group-active-border-color: var(--color-principal);
}
.link-primary {
  color: var(--color-principal) !important;
}
.btn-soft-primary {
  --ct-btn-color: var(--color-principal);
  --ct-btn-hover-bg: var(--color-principal);
  --ct-btn-hover-border-color: var(--color-principal);
  --ct-btn-active-bg: var(--color-principal);
  --ct-btn-active-border-color: var(--color-principal);
  --ct-btn-disabled-color: var(--color-principal);
  --ct-btn-disabled-bg: var(--color-principal);
  --ct-btn-disabled-border-color: var(--color-principal);
}
.badge-primary-lighten {
  --ct-badge-color: var(--color-principal) !important;
}
.badge-primary-lighten[href] {
  color: var(--color-principal);
}
.badge-primary-lighten[href]:hover, .badge-primary-lighten[href]:focus {
  color: var(--color-principal);
}
.badge-outline-primary {
  --ct-badge-color: var(--color-principal);
  border: 1px solid var(--color-principal);
}
.badge-outline-primary[href] {
  color: var(--color-principal);
}
.badge-outline-primary[href]:hover, .badge-outline-primary[href]:focus {
  color: var(--color-principal);
}
.form-checkbox-primary .form-check-input:checked,
.form-radio-primary .form-check-input:checked {
  background-color: var(--color-principal);
  border-color: var(--color-principal);
}
.ribbon-box .ribbon-primary {
  background: var(--color-principal);
}
.ribbon-box .ribbon-two-primary span {
  background: var(--color-principal);
}
input[data-switch=primary]:checked + label {
  background-color: var(--color-principal);
}
table.dataTable tbody th.focus,
table.dataTable tbody td.focus {
  outline: 2px solid var(--color-principal) !important;
}
.datepicker table tr td.active.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td .active.disabled:hover[disabled],
.datepicker table tr td .active.disabled[disabled],
.datepicker table tr td .active:active,
.datepicker table tr td .active:hover,
.datepicker table tr td .active:hover.active,
.datepicker table tr td .active:hover.disabled,
.datepicker table tr td .active:hover:active,
.datepicker table tr td .active:hover:hover,
.datepicker table tr td .active:hover[disabled],
.datepicker table tr td .active[disabled],
.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active.disabled:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active[disabled], .datepicker table tr td.today, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover, .datepicker table tr td.today:hover {
  background-color: var(--color-principal) !important;
}
.ql-toolbar span:hover {
  color: var(--color-principal) !important;
}
.jq-icon-primary {
  background-color: var(--color-principal);
  border-color: var(--color-principal);
}

/*CSS Nuestro*/
input:not([readonly]){
  color: black!important;
}
select{
  color: black!important;
}

/*CSS para formularios de edición de informción*/
div.DTE_Body{
  padding:0!important;
  margin: 52px 0!important;
  min-height: 200px;

}
div.DTE_Body div.DTE_Body_Content div.DTE_Field>label{
	width:100%!important;
}
div.DTE div.DTE_Header{
	padding: 9px 15px 9px 15px!important;
  height: 73px;
}
div.DTE div.DTE_Footer {
	height: fit-content!important;
}
.DTE_Footer.modal-footer .DTE_Form_Error{
	white-space: break-spaces;
}
div.DTE button.btn, div.DTE div.DTE_Form_Buttons button{
	--ct-btn-bg: var(--color-principal)!important;
    --ct-btn-border-color: var(--color-principal)!important;
    --ct-btn-hover-color: var(--color-principal)!important;
    --ct-btn-hover-bg: #fff!important;
    --ct-btn-hover-border-color: var(--color-principal)!important;
    --ct-btn-disabled-bg: var(--color-principal)!important;
    --ct-btn-disabled-border-color: var(--color-principal)!important;
    --ct-btn-active-color: #fff!important;
    --ct-btn-active-bg: var(--color-principal)!important;
    --ct-btn-active-border-color: var(--color-principal)!important;
	background-image: none!important;
	color: white!important;
	background-color:var(--color-principal)!important;
	border: 1px solid var(--color-principal)!important;
}
div.DTE button.btn:hover, div.DTE div.DTE_Form_Buttons button:hover{
	color: var(--ct-btn-hover-color)!important;
    background-color: var(--ct-btn-hover-bg)!important;
    border-color: var(--ct-btn-hover-border-color)!important;
}
.rab-input-vista:hover{
	color: black;
	background-color: white!important;
}
.rab-input-vista input:hover{
	cursor: default;
}
.rab-input-vista input:focus{
	background-color: white!important;
}
div.DTE_Field select{
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b96a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 14px 10px;
}
/*CSS para poner al máximo el ancho de los campos editables de las tablas*/
.row> .col-lg-8{
  width: 100%!important;
}
div.DTE_Field input{
	padding: 0 5px!important;
}
div.DTE_Field_InputControl select{
	padding: 0 5px!important;
}

/*Botones de acciones de las tablas*/
div.dt-buttons{
	float: left;
    margin-bottom: 10px;
}
.rab-disabled{
	color: middlegray!important;
	cursor: not-allowed!important;
}

/*Iconos de acción de las tablas*/
.rab-icono-inTable{
	font-size: 18px;
    line-height: 0px;
	padding-left: 10px;
	cursor: pointer;
}
.action-buttons{
	display: flex;
	flex-wrap: nowrap;
	color: var(--color-principal);
}
tr.selected .action-buttons{
	color: white;
}
.rab-deshabilitado{
	color: lightgray!important;
	cursor: default!important;
}
/*CSS Modal de visualizacion de datos*/
.modal .col-botones{
	display: none;
}
#tablaHorarios .col-botones, #asistencia-datatables .col-botones, #formadores-datatable .col-botones{
	display: flex!important;
}
.uil-plus-circle{
	width:0%;
}
.uil-plus-circle::before{
	font-size: 18px;
	cursor: pointer;
	position: absolute;
	color: var(--color-principal);
}
th.uil-plus-circle::before{
	display: none;
}
td{
	padding: 0.95rem 0.95rem!important;
}

/*Calendar*/
.fc-event{
	cursor: pointer;
}

.fc-view{
	margin-top: 10px;
    margin-bottom: 20px;
}

#calendar table.fc-scrollgrid{
	background-color: white;
    box-shadow: 5px 5px 10px lightgray;
}

a.fc-daygrid-event:hover{
	background-color: var(--ct-primary)!important;
	color: white!important
}

a.fc-daygrid-event:hover > div{
	color: white!important
}

a.fc-daygrid-event{
	background-color: white!important;
	color: var(--ct-body-color)!important
}

a.fc-daygrid-event > div{
	color: var(--ct-body-color)!important
}

.fc-event-title{
	font-weight: bold;
}

.rab-fondo-suave{
	background-color: rgba(0, 125, 205, .05)!important;
}
/*Botones de arriba de la tabla*/
 .btn-group>:not(.btn-check:first-child)+.btn{
	 margin-left: 10px!important;
 }
 
 .btn-group>:not(.btn-check)+.btn, .btn-group>.btn:not(:last-child):not(.dropdown-toggle){
	border-radius: 0.15em!important;
 }
 
 div.dt-datetime{
	 width: 456px!important;
 }
 
 .editor_upload .row{
	 --ct-gutter-x: 0px!important;
 }
 
 .table.dtr-details > .uil-plus-circle, .table.dtr-details > .dt-center{
	 display: none!important;
 }
 
 .rab-excel{
	 margin: -19px -5px;
    font-size: 19px;
    line-height: 10px;
    font-style: normal;
    flex-wrap: nowrap;
    word-wrap: initial;
 }
 
 .rab-error-horarios{
	 color: #f00;
 }

 /*Fondo pantalla de autenticación*/
.authentication-bg .auth-fluid {
    background: url(../assets/images/bg-auth.jpg) top right!important;
 }


/* Estilo de la lista de cambio de contraseña */
.password-segura li::marker{
  content: ''!important;
}

.password-segura span.uil-times{
  color: red;
}

.password-segura span.uil-check{
  color: green;
}