* {
/* DjangoCMS COLORS */
--dca-light-mode: 3 !important;
--dca-dark-mode: 0 !important;

--dca-white:  #ffffff;
--dca-gray: #666666;
--dca-gray-lighter: #dddddd;
--dca-gray-lightest:   #f2f2f2;
--dca-primary:  var(--primary);
--dca-black:  #000;
--dca-gray-light: #999;
--dca-gray-darker: #454545;
--dca-gray-darkest: #333;
--dca-gray-super-lightest: #f7f7f7;
--active-brightness: 0.9;
--focus-brightness: 0.95;

--primary-fg: #fff;
--body-fg: #333;
--body-bg: #fff;
--body-quiet-color: #666;
--body-loud-color: #000;
--header-color:var(--selected);
--header-branding-color: var(--accent);
--header-bg: var(--secondary);
--header-link-color: var(--primary-fg);
--breadcrumbs-fg: #c4e8d3;
--breadcrumbs-link-fg: var(--body-bg);
--breadcrumbs-bg: var(--primary);
--link-fg: var(--secondary);
--link-hover-color: var(--secondary-hover);
--link-selected-fg: var(--secondary-hover);
--hairline-color: #e8e8e8;
--border-color: #ccc;
--error-fg: var(--accent);
--message-success-bg: #dfd;
--message-warning-bg: #ffc;
--message-error-bg: #ffefef;
--darkened-bg: #f8f8f8;
--selected-bg: #e4e4e4;
--selected-row: var(--selected);
--button-fg: #fff;
--button-bg: var(--secondary);
--button-hover-bg: var(--secondary-hover);
--default-button-bg: var(--primary);
--default-button-hover-bg: var(--primary-hover);
--close-button-bg: var(--accent);
--close-button-hover-bg: var(--accent-hover);
--delete-button-bg: var(--accent);
--delete-button-hover-bg: var(--accent-hover);
--object-tools-fg: var(--button-fg);
--object-tools-bg: var(--close-button-bg);
--object-tools-hover-bg: var(--close-button-hover-bg);
--font-family-primary: 'Roboto';
--font-family-monospace: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-family: 'Roboto';
}

/* Clases para los colorfield personalizados */
label:has(.slpColors){
    position: relative;
    width: 100%;
}
label:has(.slpColors)::after{
    position: absolute;
    left: 60%;
    height: 1rem !important;
    width: 1rem !important;
    border-radius: 100%;
    border: #d2d2d2 solid 1px;
}

label:has(.slp-button-primary)::after {
    background-color: var(--primary);
}
label:has(.slp-button-secondary)::after{
    background-color: var(--secondary);
}
label:has(.slp-button-terciary)::after{
    background-color: var(--terciary);
}
label:has(.slp-button-accent)::after{
    background-color: var(--accent);
}
label:has(.slp-button-white)::after{
    background-color: #fff;
}
label:has(.slp-button-black)::after{
    background-color: #000;
}
label:has(.slp-button-gray)::after{
    background-color: #f4f4f4;
}
/* Clases para los colorfield personalizados */

td.delete, th.delete{
    vertical-align: middle;
}
td.delete a, th.delete a{
    width: 100%;
}
.calendar caption, .calendarbox h2{
    background: var(--secondary);
}
/* Estilos de los Toolbar de las listas del Admin */
#toolbar {
    margin: 0 !important;
}
#toolbar form#changelist-search img{
    height: 1rem;
}
#toolbar form#changelist-search input[type=text]{
    height: 1.8rem !important;
    vertical-align: middle !important;
}
.actions button,
#toolbar form#changelist-search input[type=submit]{
    background: var(--default-button-bg) !important;
    color: white !important;
    border: none !important;
    vertical-align: middle;
    align-items: center;
}
.actions button:hover,
#toolbar form#changelist-search input[type=submit]:hover{
    background: var(--default-button-hover-bg) !important;
    color: white !important;
    border: none !important;
}
#toolbar form#changelist-search div {
    display: flex;
    position: relative;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
}
#toolbar form#changelist-search div .small.quiet {
    position: absolute;
    bottom: -30px;
}
nav.toplinks {
    background-color: var(--dca-gray-super-lightest);
    padding: 10px;
    align-items: center;
}
nav.toplinks a {
    color: var(--secondary);
}
nav.toplinks a:hover {
    color: var(--secondary-hover);
    text-decoration: underline;
}
nav.toplinks a.date-back:hover {
    color: var(--dca-gray-darker) !important;
}

span.selection,
select{
    width: 370px;
}
p.datetime{
    display: grid;
}

label{
    font-size: 0.9rem;
    color: var(--body-fg);
}

.vCheckboxLabel{
    padding-bottom: 0 !important;
}


input[type=text], 
input[type=password], 
input[type=email], 
input[type=url], 
input[type=number], 
input[type=tel]{
    height: 18px;
}

.flex-container input[type=text], 
.flex-container input[type=password], 
.flex-container input[type=email], 
.flex-container input[type=url], 
.flex-container input[type=number], 
.flex-container input[type=tel], 
textarea{
    min-width: 300px;
    min-height: 18px;
}
    
/* Estilos personalizados para los input personalizados */
input[type="radio"] {
    margin-bottom: 4px !important;
}
output{
    font-size: 14px;
}
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin-right: 0.4rem;
    margin-bottom: 3px;
    width: 270px;
}

input[type="range"]:focus {
    border: 2px solid var(--secondary-hover);
    opacity: 1;
}
/* Mouse-over effects */
input[type="range"]:hover {
    opacity: 1;
}

input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%; 
    background: var(--secondary);
    cursor: pointer;
    border: none;
}
input[type="range"]::-moz-range-thumb {
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%; 
    background: var(--secondary);
    cursor: pointer;
    border: none;
}
.button.default, input[type=submit].default, .submit-row input.default {
    border: none;
    font-weight: 400;
    background: var(--default-button-bg);
}
.button, input[type=submit], input[type=button], .submit-row input, a.button {
    background: var(--button-bg);
    padding: 10px 15px !important;
    border: 1px solid var(--secondary);
    border-radius: 4px;
    color: var(--button-fg);
    cursor: pointer;
    transition: background 0.15s;
}
.outline-button{
    background: transparent;
    border: 1px solid var(--secondary);
    color: var(--secondary);
    padding: 10px 15px !important;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.outline-button:hover{
    background: var(--secondary);
    color: white;
    border: 1px solid var(--secondary);
}

/* Estilos personalizados de las barras de deslizamiento */
::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track{
    background: var(--darkened-bg);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb{
    background: var(--selected-bg);
    border-radius: 10px;
}

.cms-tooltip{
    display: none !important;
}

.flex-container {
    display: flex;
    flex-flow: wrap;
    align-items: center;
}

.colM h2{
    margin: 0;
    padding: 8px;
    font-weight: 400;
    font-size: 0.8125rem;
    text-align: left;
    background: var(--secondary);
    color: var(--header-link-color);
}
.module.collapse h2{
    background-color: var(--secondary);
    color: white;
}
.module h2 {
    background-color: transparent;
    color: var(--primary);
}
.module.collapse.collapsed h2{
    background-color: transparent;
    color: var(--primary);
}
.mhg-encabezado-admin{
    color: var(--dca-white);
    font-size: x-large;
    margin: auto;
}
.required label, label.required{
    font-weight: normal;
}
.required label, label.required::after{
    content: ' *' !important;    
}

.submit-row input{
    display: inline !important;
}
.submit-row input, .submit-row a{
    margin: 1px;
}

.dashboard #content{
    width: auto !important;
}
#main.main.shifted{
    justify-content: center;
}

.object-tools a:focus, .object-tools a:hover{
    background-color: var(--accent-hover) !important;
}

.id_user_permissions_input{
    margin: auto;
}
.id_user_permissions_input label{
    background-size: contain;
}
.selector .selector-chosen h2, .selector .selector-available h2{
    background-color: var(--secondary);
    color: white;
    text-transform: capitalize;
}

.selector .selector-chosen h2 span, .selector .selector-available h2 span{
    background: none !important;
}

.selector .selector-filter label, .inline-group .aligned .selector .selector-filter label{
    margin: 1% 0 !important;
}

p.url{
    display: flex;
    overflow: hidden;
    max-height: 34px;
    flex-flow: column-reverse;
    justify-content: flex-end;
}

p.date, 
p.datetime, 
p.time{
    display: flex;
    flex-flow: row;
}
p.date br, 
p.datetime br, 
p.time br{
    display: none;
}
p.date span, 
p.datetime span, 
p.time span{
    display: flex;
    margin-right: 2%;
}

p.url a{
    display: none;
}

/* Estilos para los fomularios de tipo inline */
.inline-group .tabular fieldset.module{
    overflow-x: auto;
    scrollbar-color: var(--darkened-bg) var(--selected-bg);
}

.inline-group p:not([class]){
    display: none;
}

/* Estilos para los iconos y el plugin de DjangoCMS Icons */
span{
    background-size: contain !important;
}
.aligned .form-row input{
    margin-bottom: 0;
}
.djangocms-icon .icon-widgets{
    display: table !important;
    -webkit-appearance: table !important;
}
.djangocms-icon .icon-widgets.hidden{
    display: none !important;
    -webkit-appearance: none !important;
}
input[type="submit"], button{
    display: inline-flex !important;
}
.djangocms-icon button.iconpicker{
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 5px 6px;
    margin-top: 0;
    color: var(--body-fg);
    background-color: var(--body-bg);
}

.icon-widgets select, .icon-widgets button{
    height: 2rem !important;
}
.table-icons thead tr:nth-child(odd){
    background-color: var(--secondary);
    color: white;
}
.table-icons tr td button{
    padding: 0 !important;
    transition: all 0.3s;
}
.table-icons tr td button:hover,
.table-icons tr td button:focus-visible{
    transform: scale(1.1);
}
.table-icons tbody tr td button{
    color: var(--primary);
}
.table-icons tbody tr td button:hover,
.table-icons tbody tr td button:focus-visible{
    color: white;
    background-color: var(--secondary);
}
.table-icons tr td button span,
.table-icons tr td button i {
    margin: auto !important;
}
.djangocms-icon-right:before{
    content: '>' !important;
}
.djangocms-icon-left:before{
    content: '<' !important;
}

.iconpicker-popover .search-control {
    margin: auto !important;
    padding: 0 !important;
}

.theme-toggle{
    display: none !important;
}

a span.date-icon, a span.clock-icon{
    background-size: cover !important;
}

.cke_button_icon{
    background-size: auto !important;
}

.icon.js-icon.js-icon-icon{
    display: flex;
}
.icon.js-icon.js-icon-icon .checkbox.js-icon-enable{
    margin: 10px;
}
table.table-icons td:has(> button.btn.btn-icon:not([value])){
    display: none !important;
}
table td:has(span.state-pill),
table td:has(.button) {
    text-align: center;
}
.odd {
    background-color: transparent !important;
}
.even {
    background-color: var(--dca-gray-lightest) !important;
}

.inline {
    display: inline;
    border: solid 1px;
    border-color: var(--hairline-color);
}

#toolbar ~ .add_to_toolbar {
    position: absolute;
    height: 100%;
    top: 0;
    align-content: center;
    border: none;
    padding: 0 10px;
}