/* vars */
:root {
	--cl-00: 22px;
	--cl-01: 30px;
	--cl-01: 30px;
	--cl-02: 38px;
	--cl-03: 46px;
	--cl-04: 54px;
	--cl-05: 62px;
	--cl-06: 70px;
	--cl-07: 78px;
	--cl-08: 86px;
	--cl-09: 94px;
	--cl-10: 102px;
	--cl-11: 110px;
	--cl-12: 118px;
	--cl-13: 126px;
	--cl-14: 134px;
	--cl-15: 142px;
	--cl-16: 150px;
	--cl-17: 158px;
	--cl-18: 166px;
	--cl-19: 174px;
	--cl-20: 182px;
	--cl-21: 190px;
	--cl-22: 210px;
	--cl-23: 230px;
	--cl-24: 250px;
	--cl-25: 270px;
	--cl-26: 290px;
	--cl-27: 310px;
	--cl-28: 330px;
	--cl-29: 350px;
	--cl-30: 370px;
	--cl-31: 390px;
	--cl-32: 410px;
	--cl-33: 430px;
	--cl-34: 450px;
}

.cl-00 { width: var(--cl-00); }
.cl-01 { width: var(--cl-01); }
.cl-02 { width: var(--cl-02); }
.cl-03 { width: var(--cl-03); }
.cl-04 { width: var(--cl-04); }
.cl-05 { width: var(--cl-05); }
.cl-06 { width: var(--cl-06); }
.cl-07 { width: var(--cl-07); }
.cl-08 { width: var(--cl-08); }
.cl-09 { width: var(--cl-09); }
.cl-10 { width: var(--cl-10); }
.cl-11 { width: var(--cl-11); }
.cl-12 { width: var(--cl-12); }
.cl-13 { width: var(--cl-13); }
.cl-14 { width: var(--cl-14); }
.cl-15 { width: var(--cl-15); }
.cl-16 { width: var(--cl-16); }
.cl-17 { width: var(--cl-17); }
.cl-18 { width: var(--cl-18); }
.cl-19 { width: var(--cl-19); }
.cl-20 { width: var(--cl-20); }
.cl-21 { width: var(--cl-21); }
.cl-22 { width: var(--cl-22); }
.cl-23 { width: var(--cl-23); }
.cl-24 { width: var(--cl-24); }
.cl-25 { width: var(--cl-25); }
.cl-26 { width: var(--cl-26); }
.cl-27 { width: var(--cl-27); }
.cl-28 { width: var(--cl-28); }
.cl-29 { width: var(--cl-29); }
.cl-30 { width: var(--cl-30); }
.cl-31 { width: var(--cl-31); }
.cl-32 { width: var(--cl-32); }
.cl-33 { width: var(--cl-33); }
.cl-34 { width: var(--cl-34); }

/* Columns */
.auto-col {
	width: auto;
}

@media ( min-width : 1024px) {
	.full-col {		
		min-width: 200px;
		width: auto;		
	}
}

@media ( max-width : 1024px) {
	.full-col {
		width: 180px;
	}
}

.xl-col {
	width: 420px;
}

.l-col {
	width: 328px;
}

.mxl-col {
	width: 252px;
}

.ml-col {
	width: 200px;
}

.m-col {
	width: 180px;
}

.ms-col {
	width: 160px;
}

.n-col {
	width: 126px;
}

.r-col {
	width: 114px;
}

.cr-col {
	width: 104px;
}

.c-col {
	width: 96px;
}

.s-col {
	width: 70px;
}

.xs-col {
	width: 56px;
}

.btn-col {
	width: 50px;
}

.s-btn-col {
	width: 42px;
}

.xs-btn-col {
	width: 38px;
}

.xxs-btn-col {
	width: 30px;
}

/* General */
.full-width {
	width: 100%;
}

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ellipsis-auto-width {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: inherit;
}

.no-ptr-evt{
	pointer-events: none;
}

.text-justify {
    text-align: justify;
}


input.form-control, select.form-select {
	border-radius: 4px;
    border-color: #ced4da;
}

.light-style .bootstrap-select .dropdown-toggle {
    border-radius: 4px;
    border-color: #ced4da;
}

.input-group-text{
	/* TODO */
}

/* PrimeFaces - Editor */
.ui-texteditor {
	border-radius: 0.25rem;
}

.ui-texteditor.is-invalid {
	border: 1px solid #dc3545;
}

.ql-toolbar {
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
}

.ql-container {
	border-bottom-left-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
}

/* PrimeFaces - DataTable */
.ui-datatable {
	background-clip: padding-box;
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    border-radius: 8px;
    background-color: rgb(255, 255, 255);
}

.ui-datatable .ui-datatable-header {
	color: #566a7f;
	font-size: 1.125rem;
	font-weight: 500;
	text-align: left;
	padding: 24px 24px;
	border-color: #d9dee3;	
	background-color: rgba(0, 0, 0, 0);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;	
	border-bottom-color: rgb(217, 222, 227);
	border-bottom-style: solid;
	border-bottom-width: 0px;
	border-left-color: rgb(217, 222, 227);
	border-right-color: rgb(217, 222, 227);
	border-top-color: rgb(217, 222, 227);
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	box-sizing: border-box;	
	color-scheme: light;
	border-top: 0px;
}

.ui-datatable thead th {
	text-align: center !important;
	padding: 2px !important;
	border-radius: 0px;
	background-color: #fff;	
	font-size: 0.75rem;
	text-transform: uppercase;
	vertical-align: bottom;	
}

.ui-datatable thead th .ui-column-title {
    font-weight: 500;    
}

.ui-sortable-column-icon {
    font-size: 0.75rem;    
}

.ui-datatable tbody td {
	padding: 2px !important;
	border-radius: 0px;
}

.ui-paginator {
	line-height: normal;
}

.dt-hover tr:hover{
	background-color: #ffe493;
}

.ui-datatable th.ui-state-active {
    background: #247bff;    
}

.ui-datatable-tablewrapper {
    overflow: auto;
   	border-width: 0px 1px 0px 1px;    
    /* border-style: solid; */
    border-color: #e9ecef;
    background-color: rgba(0, 0, 0, 0);
}

.ui-datatable .ui-datatable-data > tr .ui-row-editor > a {
	width: 1rem;
    height: 1rem;
    line-height: 1rem;	
}

.ui-column-customfilter > select.custom-select {
	height: 34px;
}

.ui-column-customfilter > select.form-select {
	height: 34px;
}

.ui-column-customfilter > input.datepicker {
	height: 34px;
}

.ui-paginator .ui-paginator-current {
	margin: 0;
}

.ui-paginator .ui-paginator-first {
	line-height: 2.2em;
	width: 2em;
    height: 2em;
}

.ui-paginator .ui-paginator-prev {
	line-height: 2.2em;
	width: 2em;
    height: 2em;
}

.ui-paginator .ui-paginator-next {
	line-height: 2.2em;
	width: 2em;
    height: 2em;
}

.ui-paginator .ui-paginator-last {
	line-height: 2.2em;
	width: 2em;
    height: 2em;
}

.ui-paginator .ui-paginator-rpp-options {
	margin: 0 0 0 8px;
	padding: 0;
}

.ui-paginator .ui-paginator-pages .ui-paginator-page {    
    line-height: 2em;
    min-width: 2em;
    height: 2em;
}

.ui-paginator.ui-paginator-bottom {
	background-color: rgba(0, 0, 0, 0);
	border-bottom-color: rgb(217, 222, 227);
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	border-left-color: rgb(217, 222, 227);
	border-right-color: rgb(217, 222, 227);
	border-top-color: rgb(217, 222, 227);
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-top-style: solid;
	border-top-width: 0px;
	box-sizing: border-box;	
	color-scheme: light;
	border-bottom: 0px;
}

.ui-datatable .ui-paginator.ui-paginator-bottom {    
    border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

.ui-datatable-data td[role="gridcell"]:focus {
    outline: none !important;
    outline-offset: unset !important;    
	border: 1px solid rgba(0, 0, 0, .08) !important;
	border-width: 0 0 1px 0 !important;
}

/* TODO */
/* Cabeceras truncadas */
/*
.ui-datatable thead th .ui-column-title {	
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    width: 80%;
    Agregar el 20% restante a la otra columna
}
*/

/* PrimeFaces - Paginator */
.ui-paginator .ui-paginator-page.ui-state-active {
    background: #247bff;
    /*color: #fff;*/
    border-color: #247bff;
}

.ui-datatable .ui-paginator {
    padding: 6px;
}

.ui-datatable .ui-datatable-footer {
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 400;
	color: #a1acb8;
	background-color: rgba(0, 0, 0, 0);
	border: 0;
}

/* Typeahead - Autocomplete */
.input-group > .twitter-typeahead {
   flex: 1 1 auto;
   width: auto;
}

.input-group > .twitter-typeahead > input.form-control {     
	border-top-right-radius: 0;     
	border-bottom-right-radius: 0; 
}

/* Primefaces - Autocomplete */
.ui-autocomplete {
	width: 100%;
}

.input-group > .ui-autocomplete {
	position: relative;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	width: 1%;
	margin-bottom: 0;
}

.input-group > .ui-autocomplete > .form-control:not(:last-child), .input-group > .ui-autocomplete > .custom-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* PrimeFaces - Growl */
.ui-growl {	
	z-index: 6000 !important;
}

/* PrimeFaces - SelectOneButton */
.ui-selectonebutton{
	height: 38px;	
}

.ui-selectonebutton > .ui-button{
	height: 38px;	
}

.ui-button-text-only .ui-button-text {
	/*padding: 0em 1em;*/
	line-height: 20px;
}

/* PrimeFaces - SelectOneRadio */
.ui-selectoneradio label {
	font-weight: normal !important;
}

div[class^="col-"] .ui-selectmanycheckbox, div[class*=" col-"] .ui-selectmanycheckbox{
  	margin-top: 3px;
}

.ui-selectoneradio div {
	padding: 0 !important;
}

/* PrimeFaces - SelectManyCheckbox */
div[class^="col-"] .ui-selectoneradio, div[class*=" col-"] .ui-selectoneradio{
  	margin-top: 3px;
}

.ui-selectmanycheckbox label {
	font-weight: normal !important;
}

.ui-selectmanycheckbox.layout-line-direction.ui-grid-responsive > div {    
    padding: 0.5em 0;
}

/* PrimeFaces - DataList */
.ui-datalist ul{
	margin-bottom: 0px;
}

/* Bootstrap - Select */
.bootstrap-select .dropdown-menu.inner a[aria-selected=true] {
    background: rgba(105,108,255,.08) !important;
    color: #007bff !important
}

.bootstrap-select .filter-option {
	padding: 0 1em 0 0;
}

/* PrimeFaces - InputNumber */
.pf-input-number-with-group > input.form-control{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group > span.pf-input-number-with-group {
  position: relative;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
  min-width: 0;
  margin-bottom: 0;
}

/* Animations */
@keyframes glowing {
  0% 	{ box-shadow: 0px 0px 1px -1px #f44242; }
  40% 	{ box-shadow: 0px 0px 1px 2px #f44242; 	}
  60% 	{ box-shadow: 0px 0px 1px 2px #f44242; 	}
  100% 	{ box-shadow: 0px 0px 1px -1px #f44242; }
}
		
.badge-glow {
  animation: glowing 1000ms infinite;
}

@keyframes link-glow {
  from {
    color: #007bff;
  }
  to {
    color: #f44242;
  }
}

.link-glow {
	animation: link-glow 1s ease-in-out infinite alternate;
}

@keyframes pulse-red {
	0% {
		transform: scale(0.9);
		box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
	}
	
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
	}
	
	100% {
		transform: scale(0.9);
		box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
	}
}

.circle-pulse-red {
	background-color: rgba(255, 82, 82, 1);
	border-radius: 50%;
	animation: pulse-red 1s infinite;
	height: 70px;
	width: 70px;
}

.pulse-icon {
  cursor: pointer;
  animation: pulse 1s infinite;
  transition: transform 0.2s;
}

.pulse-icon:hover {
  transform: scale(1.2);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.90);
  }
  100% {
    transform: scale(1.10);
  }
}

div.animated {
  animation: glow 1s infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 005px-5px#fbb8b3;
  }

  to {
    box-shadow: 0 0 5px 5px #f44336;
  }
}


/* Folders */
.folder {
	/* This will enable the 3D effect. Decrease this value
	 * to make the perspective more pronounced: */
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	perspective: 800px;
	position: relative;
	z-index: 0;
	width: 100%;
	height: 86px;
}

.folder div {
	width: 120px;
	height: 80px;
	background-color: #93bad8;
	/* Enabling 3d space for the transforms */
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	/* Enabling a smooth animated transition */
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	transition: 0.2s;
	/* Disable text seleltion on the folder */
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -58px;
}

.folder .front {
	border-radius: 5px 5px 0 0;
	-moz-transform: rotateX(-30deg);
	-webkit-transform: rotateX(-30deg);
	transform: rotateX(-30deg);
	-moz-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	background-image: -moz-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
	background-image: -webkit-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
	background-image: linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
	box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1), 0 1px
		rgba(255, 255, 255, 0.35) inset;
	z-index: 10;	
	color: black;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
	line-height: 115px;
}

.folder .back {
	background-image: -webkit-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
	background-image: -moz-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
	background-image: linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
	border-radius: 0 5px 0 0;
	box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15);
}

.folder .back:before {
	content: '';
	width: 40px;
	height: 10px;
	border-radius: 4px 4px 0 0;
	background-color: #93bad8;
	position: absolute;
	top: -10px;
	left: 0px;
	box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15);
}

.folder .back:after {
	content: '';
	width: 100%;
	height: 4px;
	border-radius: 5px;
	position: absolute;
	bottom: 5px;
	left: 0px;
	box-shadow: 0 4px 8px #333;
}

.folder.open .front {
	-moz-transform: rotateX(-50deg);
	-webkit-transform: rotateX(-50deg);
	transform: rotateX(-50deg);
}


.folder-pointer{
	cursor: pointer;
}

/* PrimeFaces - Calendar */
a.fc-event, a.fc-event:hover {
    cursor: pointer;
    text-decoration: none;
    color: white;
}

/* PrimeFaces - CommandLink */
.btn.ui-commandlink:hover {
	text-decoration-line: none;
}
.list-group-item .ui-commandlink:hover {
	text-decoration-line: none;
}

/* PrimeFaces - Link */
.btn.ui-link:hover {
	text-decoration-line: none;
}
.list-group-item .ui-link:hover {
	text-decoration-line: none;
}

/* PrimeFaces - Upload */
.ui-fileupload span.ui-icon-close {
	line-height: 1em;
}

/* PrimeFaces - Message */
.ui-message.mb-3{
	margin: 0 0 1rem 0 !important;
}

/* Datepicker */
.datepicker table tr td.active,.datepicker table tr td.active.highlighted,.datepicker table tr td .focused,.datepicker table tr td span.active,.datepicker table tr td span.active.disabled,.datepicker table tr td.range-start,.datepicker table tr td.range-end {
    background: #007bff !important;
    color: #fff !important;
    box-shadow: 0 .125rem .25rem rgba(105,108,255,.45)
}

.datepicker table tr td.range,.datepicker table tr td.range.highlighted,.datepicker table tr td.range.today {
    color: #007bff !important;
    background: #e7e7ff !important
}

.datepicker table tr td.range.focused,.datepicker table tr td.range.highlighted.focused,.datepicker table tr td.range.today.focused {
    background: #c8c8ff !important
}

.datepicker table tr td.range.disabled,.datepicker table tr td.range.highlighted.disabled,.datepicker table tr td.range.today.disabled {
    background: rgba(231,231,255,.5) !important;
    color: rgba(67,89,113,.5) !important
}

.datepicker table tr td.today:not(.active) {
    box-shadow: 0 0 0 1px #007bff inset
}

/* Colors */

.bg-purple {
  --bs-bg-opacity: 1;
  background-color: rgb(108, 59, 170) !important;  
}

.bg-olive {	
  --bs-bg-opacity: 1;
  background-color: #bac095 !important;
}