/* Custom styles goes here */

/* Blazor disconnects */
#components-reconnect-modal { display:none !important;}

/* custom generics */
html.custom-css body{background: linear-gradient(135deg,#3cafaa20,#2a81be20,#77c3ea20,#f6cc0020); background-attachment: fixed;}
html.custom-css nav.navbar { padding: 1.25rem; border-radius: 0.375rem; box-shadow: 0 0.375rem 1rem rgba(46, 38, 61, 0.22); transition: all 0.25s ease;}
html.custom-css .menu-vertical { border-right:solid 1px #3cafaa40 !important; background: linear-gradient(to bottom, rgba(42, 129, 190, 0.2), rgba(246, 204, 0, 0.2)), white; }
html.custom-css .menu-vertical .app-brand { min-height: 64px;}
html.custom-css .menu-vertical .app-brand img.small { display: none; width: 35px; margin-right:20px; margin-left:-6px;}
html.custom-css .menu-vertical .app-brand img.large { display: block; width: 180px;}
html.custom-css .menu-vertical .app-brand img.large, html.custom-css.layout-menu-hover .menu-vertical .app-brand img.large, html.custom-css.layout-menu-expanded .menu-vertical .app-brand img.large { display: block; }
html.custom-css.layout-menu-collapsed:not(.layout-menu-expanded):not(.layout-menu-hover) .menu-vertical .app-brand img.large { display: none;}
html.custom-css.layout-menu-collapsed:not(.layout-menu-expanded):not(.layout-menu-hover) .menu-vertical .app-brand img.small { display: block;}

html.custom-css .step-badge{ width:2rem;height:2rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:700; }
html.custom-css .sticky-col{ position:sticky;top:1rem; }
html.custom-css .nav-pills .nav-link{border-radius:.75rem; text-transform:none; }
html.custom-css .nav-pills .nav-link .state{min-width:7.25rem;text-align:right; }
html.custom-css .avatar{width:32px;height:32px;border-radius:999px;object-fit:cover; }
html.custom-css .breadcrumb a{text-decoration:none; }
html.custom-css .tab-card .nav-link{border-radius:.5rem; }
html.custom-css .list-group-item-action {color:#313d50; }
html.custom-css .list-group-item, .list-group-item.disabled {background-color: white;}
html.custom-css .task-resource .overflow-hidden img {max-width: 100%; height: auto;  display: block;}
html.custom-css .btn {text-transform:none;}
html.custom-css button[data-bs-target="#accPanelBody"]:not(.collapsed) .bi-chevron-down { transform: rotate(180deg); transition: transform .2s ease; } /* Rota el chevron cuando el panel está abierto */
html.custom-css button[data-bs-target="#accPanelBody"].collapsed .bi-chevron-down { transform: rotate(0deg); transition: transform .2s ease; }

/* tooltop */
html.custom-css .tooltip .tooltip-inner { text-align:left; }

/* popup-tooltip */
.popup-tooltip.tooltip.show { opacity:1;}
.popup-tooltip .tooltip-inner { padding: 1.25rem; position:relative; max-width:350px; background-color:#ccc; color:#333; text-align:left;}
.popup-tooltip.bs-tooltip-bottom .tooltip-arrow::before, .popup-tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {border-bottom-color: #ccc;}
.popup-tooltip.bs-tooltip-top .tooltip-arrow::before, .popup-tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {border-top-color: #ccc;}
.popup-tooltip.bs-tooltip-start .tooltip-arrow::before, .popup-tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {border-left-color: #ccc;}
.popup-tooltip.bs-tooltip-end .tooltip-arrow::before, .popup-tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {border-right-color: #ccc;}
.popup-tooltip .tooltip-inner .btn-close { position: absolute; top: 2px; right: 2px; color: transparent;}

/* breadcrumb */
html.custom-css .breadcrumb { margin:0px; background-color:transparent !important;}
html.custom-css .breadcrumb .breadcrumb-item {font-weight:500}
html.custom-css .breadcrumb .breadcrumb-item a {color:inherit !important; cursor:pointer;}
html.custom-css .breadcrumb .breadcrumb-item a:hover {text-decoration: underline;}
html.custom-css .breadcrumb .breadcrumb-item.active { color:black;}

/* dataTable */
html.custom-css .dataTable-top.card-header {padding:20px; background-color:#ff00; border-bottom:0px;}
html.custom-css .dataTable-top.card-header .dataTable-info {}
html.custom-css .dataTable-top.card-header .dataTable-info span { margin-left:10px; color:#999; line-height:30px;}
html.custom-css .dataTable-container.card-body {padding-bottom:0px !important; padding-top:0px !important;}
html.custom-css .dataTable-bottom.card-footer {padding:5px 20px 20px 20px; background-color:#fff; border-top:0;}
html.custom-css .dataTable-bottom.card-footer .dataTable-selector {padding-top:10px; padding-bottom:10px;}

/* form validation */
html.custom-css .field-validation-error { color: #f00;}
html.custom-css .field-validation-valid { display: none;}
html.custom-css .input-validation-error:not(.form-check-input) { border-color: #dc3545; padding-right: calc(1.5em + 0.75rem); background-image: url('../assets/img/alert.svg'); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center;    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);}
html.custom-css .validation-summary-errors { background-color:#fee; padding:1em 0px 0px 0px; font-size: 0.875em; border-color:#dc3545; color:#dc3545;}
html.custom-css .validation-summary-errors.alert-dismissible {padding-right:35px}
html.custom-css .validation-summary-valid { display: none;}

/* alert panels */
html.custom-css .alert .btn-close { padding-top: 0.5rem;}
html.custom-css .alert { padding-bottom:0px;}

/* devExpress */
html.custom-css .dx-widget { font-family: Metropolis, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;}
html.custom-css .dx-datagrid { color: #69707A;}
html.custom-css .dx-datagrid .dx-header-filter {color:#00AFD7;}
html.custom-css .dx-datagrid .dx-header-filter.dx-header-filter-empty { color:rgba(149,149,149,.5); }
html.custom-css .dx-datagrid-headers { color: #69707A; font-weight: 700;}
html.custom-css .dx-datagrid-headers { position: sticky; top: 58px; z-index: 999; background-color:#fff; /*z-index is applied so that this element appears in front*/ }
html.custom-css .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td { color:#69707A; background-color:#d6f8ff;}
html.custom-css .dx-pager .dx-page-sizes { color: #69707A;}
html.custom-css .dx-pager .dx-page-sizes .dx-selection{color: #69707A;}
html.custom-css .dx-pager .dx-page-indexes { color: #00afd7; }
html.custom-css .dx-pager .dx-page-indexes .dx-selection { color:#fff; background-color:#00afd7;}
html.custom-css .dx-pager .dx-pages .dx-info { position:absolute; top:5px; left:0px;}
html.custom-css .dx-datagrid-search-text { background-color:#00afd7;}
html.custom-css .dx-datagrid-table .dx-row { cursor:pointer;}
html.custom-css .dx-datagrid-table .dx-row .dx-button { margin-left:6px; padding:0px; border:0;}
html.custom-css .dx-datagrid-table .dx-row .dx-button .dx-button-content { padding:0px;}
html.custom-css .dx-datagrid-table .dx-row.dx-header-row > td, html.custom-css .dx-datagrid-table .dx-row.dx-header-row > tr > td { vertical-align:bottom;}
html.custom-css .dx-datagrid-table .dx-row > td, html.custom-css .dx-datagrid-table .dx-row > tr > td { vertical-align:middle;}
html.custom-css .dx-datagrid-checkbox-size:not(.dx-state-readonly) .dx-checkbox-icon { color:red; border: 2px solid #999;}  
html.custom-css .dx-datagrid-checkbox-size.dx-checkbox-checked:not(.dx-state-readonly) .dx-checkbox-icon { border: 2px solid #00afd7;}  
html.custom-css .dx-datagrid-checkbox-size.dx-checkbox-checked:not(.dx-state-readonly) .dx-checkbox-icon::before {color:#fff; font-weight:900; background-color:#00afd7;}
html.custom-css .dx-list-item-selected { background-color:#00AFD7 !important; color:#fff !important; font-weight:bold !important; }

html.custom-css .dx-widget { font-family: Metropolis, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;}
html.custom-css .dx-treelist { color: #69707A;}
html.custom-css .dx-treelist .dx-header-filter {color:#00AFD7;}
html.custom-css .dx-treelist .dx-header-filter.dx-header-filter-empty { color:rgba(149,149,149,.5); }
html.custom-css .dx-treelist-headers { color: #69707A; font-weight: 700;}
html.custom-css .dx-treelist-headers .dx-treelist-table .dx-row > td { border-bottom: 1px solid #69707A;}
html.custom-css .dx-treelist-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td { color:#69707A; background-color:#d6f8ff;}
html.custom-css .dx-pager .dx-page-sizes { color: #69707A;}
html.custom-css .dx-pager .dx-page-sizes .dx-selection{color: #69707A;}
html.custom-css .dx-pager .dx-page-indexes { color: #00afd7; }
html.custom-css .dx-pager .dx-page-indexes .dx-selection { color:#fff; background-color:#00afd7;}
html.custom-css .dx-pager .dx-pages .dx-info { position:absolute; top:5px; left:0px;}
html.custom-css .tab-content .dx-pager .dx-pages .dx-info { top:20px;}
html.custom-css .dx-treelist-search-text { background-color:#00afd7;}
html.custom-css .dx-treelist-table .dx-row { cursor:pointer; color: #69707A;}
html.custom-css .dx-treelist-table .dx-row.dx-data-row.level1 {background-color: #f7f7f7 !important; font-weight:bold;}
html.custom-css .dx-treelist-table .dx-row .dx-treelist-text-content { line-height: 1.5; }
html.custom-css .dx-treelist-table .dx-row .dx-button { margin-left:6px; padding:0px; border:0;}
html.custom-css .dx-treelist-table .dx-row .dx-button .dx-button-content { padding:0px;}
html.custom-css .dx-treelist-table .dx-row > td, .dx-treelist-content .dx-treelist-table .dx-row > tr > td { vertical-align:middle;}
html.custom-css .dx-list-item-selected { background-color:#00AFD7 !important; color:#fff !important; font-weight:bold !important; }
html.custom-css .dx-texteditor.dx-editor-outlined, html.custom-css .dx-texteditor.dx-state-hover, html.custom-css .dx-texteditor.dx-state-focused {border: 1px solid #c5ccd6; border-radius:0.35rem;}

html.custom-css .calendar-year-container { display: flex; flex-wrap: wrap; gap: 10px; }
html.custom-css .calendar-year-container::after { content: '';  flex: 1 0 50%; /* Ocupa el espacio vacío */}
html.custom-css .calendar-year-container .calendar-month {flex: 1 0 20%; margin: 10px; }
html.custom-css .custom-calendar-month .dx-calendar-cell {border-radius:0;}
html.custom-css .custom-calendar-month .dx-calendar-cell.dx-calendar-selected-date{box-shadow:none;}
html.custom-css .custom-calendar-month .dx-calendar-navigator .dx-button.dx-calendar-disabled-navigator-link { display: none;}
html.custom-css .custom-calendar-month .dx-calendar-navigator .dx-calendar-caption-button { width: 100%; right: 0px; left: 0px; }
html.custom-css .custom-calendar-month .dx-calendar-navigator .dx-button { border:none;}
html.custom-css .custom-calendar-month .dx-calendar-navigator .dx-calendar-caption-button.dx-button .dx-button-content{ text-align:left; padding-left:6px;}
html.custom-css .custom-calendar-month .dx-calendar-cell.dx-calendar-empty-cell{background:none;}

html.custom-css .legend-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: center;}
html.custom-css .legend-grid .legend-item {display: flex; align-items: center;}

/* Custom form usermode */
html.custom-css .form-fields.usermode-view input:not(.form-check-input), html.custom-css input[readonly], html.custom-css input[disabled],
html.custom-css .form-fields.usermode-view select, html.custom-css select[readonly], html.custom-css select[disabled],
html.custom-css .form-fields.usermode-view textarea, html.custom-css textarea[readonly], html.custom-css textarea[disabled] { border-bottom: 1px solid #c5ccd6; border-top: none; border-left: none; border-right: none; background-color: #efefef;}
html.custom-css .form-fields.usermode-view input.form-check-input:checked { background-color: #c5ccd6; border-color:#c5ccd6; }

/* TinyMCE HtmlEditor */
.tox-tinymce { width:100%;}

/* jquery-ui */
html.custom-css .ui-state-active, html.custom-css .ui-widget-content .ui-state-active, html.custom-css .ui-widget-header .ui-state-active, html.custom-css a.ui-button:active, html.custom-css .ui-button:active, html.custom-css .ui-button.ui-state-active:hover { border: 1px solid #009ec2; background: #00afd7; }
html.custom-css .ui-icon-background, html.custom-css .ui-state-active .ui-icon-background { border: #009ec2; }

/*JSON Viewer*/
html.custom-css .json-document {padding:0em 1em;}

/*Custom scrollbar styling*/
.scrollbar { float: left; overflow-y:auto; width: 100%; }
.scrollbar::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5;}
.scrollbar::-webkit-scrollbar { width: 6px; background-color: #F5F5F5;}
.scrollbar::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #ccc;}