@font-face {
    font-family: 'Ubuntu';
    src: url('../webfonts/Ubuntu-MediumItalic.eot');
    src: url('../webfonts/Ubuntu-MediumItalic.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Ubuntu-MediumItalic.woff2') format('woff2'),
    url('../webfonts/Ubuntu-MediumItalic.woff') format('woff'),
    url('../webfonts/Ubuntu-MediumItalic.ttf') format('truetype'),
    url('../webfonts/Ubuntu-MediumItalic.svg#Ubuntu-MediumItalic') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../webfonts/Ubuntu-MediumItalic_1.eot');
    src: url('../webfonts/Ubuntu-MediumItalic_1.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Ubuntu-MediumItalic_1.woff2') format('woff2'),
    url('../webfonts/Ubuntu-MediumItalic_1.woff') format('woff'),
    url('../webfonts/Ubuntu-MediumItalic_1.ttf') format('truetype'),
    url('../webfonts/Ubuntu-MediumItalic_1.svg#Ubuntu-MediumItalic') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../webfonts/Ubuntu-Medium.eot');
    src: url('../webfonts/Ubuntu-Medium.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Ubuntu-Medium.woff2') format('woff2'),
    url('../webfonts/Ubuntu-Medium.woff') format('woff'),
    url('../webfonts/Ubuntu-Medium.ttf') format('truetype'),
    url('../webfonts/Ubuntu-Medium.svg#Ubuntu-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../webfonts/Ubuntu-Italic.eot');
    src: url('../webfonts/Ubuntu-Italic.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Ubuntu-Italic.woff2') format('woff2'),
    url('../webfonts/Ubuntu-Italic.woff') format('woff'),
    url('../webfonts/Ubuntu-Italic.ttf') format('truetype'),
    url('../webfonts/Ubuntu-Italic.svg#Ubuntu-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../webfonts/Ubuntu-Regular.eot');
    src: url('../webfonts/Ubuntu-Regular.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Ubuntu-Regular.woff2') format('woff2'),
    url('../webfonts/Ubuntu-Regular.woff') format('woff'),
    url('../webfonts/Ubuntu-Regular.ttf') format('truetype'),
    url('../webfonts/Ubuntu-Regular.svg#Ubuntu-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../webfonts/Ubuntu-Bold.eot');
    src: url('../webfonts/Ubuntu-Bold.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Ubuntu-Bold.woff2') format('woff2'),
    url('../webfonts/Ubuntu-Bold.woff') format('woff'),
    url('../webfonts/Ubuntu-Bold.ttf') format('truetype'),
    url('../webfonts/Ubuntu-Bold.svg#Ubuntu-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../webfonts/Ubuntu-Light.eot');
    src: url('../webfonts/Ubuntu-Light.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Ubuntu-Light.woff2') format('woff2'),
    url('../webfonts/Ubuntu-Light.woff') format('woff'),
    url('../webfonts/Ubuntu-Light.ttf') format('truetype'),
    url('../webfonts/Ubuntu-Light.svg#Ubuntu-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../webfonts/Ubuntu-LightItalic.eot');
    src: url('../webfonts/Ubuntu-LightItalic.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Ubuntu-LightItalic.woff2') format('woff2'),
    url('../webfonts/Ubuntu-LightItalic.woff') format('woff'),
    url('../webfonts/Ubuntu-LightItalic.ttf') format('truetype'),
    url('../webfonts/Ubuntu-LightItalic.svg#Ubuntu-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('../webfonts/Ubuntu-BoldItalic.eot');
    src: url('../webfonts/Ubuntu-BoldItalic.eot?#iefix') format('embedded-opentype'),
    url('../webfonts/Ubuntu-BoldItalic.woff2') format('woff2'),
    url('../webfonts/Ubuntu-BoldItalic.woff') format('woff'),
    url('../webfonts/Ubuntu-BoldItalic.ttf') format('truetype'),
    url('../webfonts/Ubuntu-BoldItalic.svg#Ubuntu-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
html {
    background-color: rgba(0,0,0,.03);
}
body {
    font-family: 'Ubuntu';
    font-weight: normal;
    font-style: normal;
}
.h2 {
    font-size: 1.5rem;
}

.login-form {
    width: 340px;
    margin: -200px 0 0 -170px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.login-form form {
    margin-bottom: 15px;
    background: #f7f7f7;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    padding: 30px;
}

.login-form h2 {
    margin: 0 0 15px;
}

.selu {
    display: none;
}
.alerta {
    color: red;
}

#datosusuario {
    color: silver;
    margin-right: 25px;
    text-align: right;
}
.logoutuser {
    float: right;
}
.nomuser {
    float: right;
    margin: 8px 10px 0 10px;
}
.nomuser a {
    color: white;
}
.selectempresa {
    float: right;
}
form#cambiarempresa {
    float: left;
}
#selectorcursoasociado {
    width: 96%;
    margin-left: 12px;
}
.linkccursos {
    color: white;
    margin: 10px 32px 5px 10px;
}
.linkccursos:hover {
    color: #00c7aa;
}
.solicitarlic {
    color: red;
    cursor: pointer;
}
#solicencias .row, #altaconvocatoria .row, #altaempresa .row {
    margin-bottom: 10px;
}
#enviaformlicencias, #enviaformnewconv, #enviaformnewbusiness {
    float: right;
}
.downconect {
    cursor: pointer;
    color: #0a53be;
}
#modalaux label {
    width: 100%;
}
.fichahead {
    width: 100%;
    float: left;
    margin-bottom: 10px;
}
.fichatitle {
    font-size: 14pt;
    color: #4190bf;
}
.fichahead h5 {
    font-size: 10pt;
    font-style: italic;
    color: #918e8e;
    width: 80%;
    float: left;
    border: none !important;
}
h4.tituloTema {
    font-size: 12pt;
}
.fichabody ol {
    font-size: 10pt;
}
.imghead {
    width: 19%;
    float: left;
    margin-right: 10px;
}
#filtros {
    width: 100%;
    float: left;
    background-color: #89c2ed;
    padding: 10px;
    margin-bottom: 10px;
    overflow: auto;
}
.filterfield {
    float: left;
    max-width: 350px;
    margin-right: 10px;
}
.table-responsive{
    float: left;
    width: 100%;
}
.titlehead {
    float: right;
    width: 78%;
}
.fichaduracion {
    float: right;
    background: #00adff;
    color: white;
    padding: 15px 5px;
    border-radius: 40px;
    font-size: 19pt;
    width: 80px;
    height: 80px;
    text-align: center;
    right: 50px;
    position: absolute;
    margin-top: -26px;
    border: 5px solid #527cb6;
}
#empresaseleccionada, #cambiarempresa .select2-container .select2-selection--single .select2-selection__rendered {
    background: #212529;
    color: white;
    border: none;
    text-align: right;
}
.select2-container--default .select2-selection--single {
    border: none;
}
#sidebarMenu .nav-item:hover{
    background-color: #d0d0d0;
}
.nav-item a.current:link {
    color: #2470dc;
}

/* Datatables */
.dataTables_wrapper {
    width: 99%;
}

.modal-body .dataTables_wrapper {
    font-size: 13px;
}
.dataTables_length {
    width: auto;
    float: left;
    font-size: 12px;
}
#posiblescursos_filter label {
    font-size: 12px;
}
tbody {
    font-size: 9pt;
}
tfoot select {
    background: #6c757d;
    color: white;
}
tbody .cellaction {
    cursor: pointer;
    color: #2376e3;
}

/* Botones */
.boton {
    float: right;
    margin-top: -70px;
}
.login-form .form-group {
    margin-bottom: 10px;
}
div.dt-buttons {
    float: left;
    margin-right: 10px;
}
.accordion-item .btn-info {
    margin-bottom: 5px;
}
.modal-body h5 {
    font-size: 1em;
    border-bottom: 1px solid black;
}
.dt-buttons .buttons-html5, .dt-buttons .buttons-print {
    height: 30px;
    font-size: 1em;
    line-height: 1em;
}
.btn-sm {
    padding: 0 5px;
}
.dwnld {
    min-width: 90px;
    font-size: 12px;
}
.btn-secondary {
    color: #6c757d;
    background-color: #ffffff;
    border-color: #adadad;
}
table.dataTable th {
    border-bottom-color: #dee2e6;
    background-color: #6c757d;
    color: white;
    font-weight: 500;
}
.btn-primary {
    color: #fff;
    background-color: #007bba;
    border-color: #007bba;
}
.btn-primary:hover {
    color: #fff;
    background-color: #00c2ef;
    border-color: #007bba;
}
.page-link {
    color: #008ccb;
}
.page-link:hover {
    z-index: 2;
    color: #007bba;
    background-color: #e9ecef;
    border-color: #dee2e6;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #0090ce;
    border-color: #00bbeb;
}
@media (min-width: 576px){
    .modal-dialog {
        max-width: 575px;
        margin: 1.75rem auto;
    }
}
.fa-cloud-download-alt {
    float: left;
    margin: 3px 3px 0 0;
}

.select2-dropdown {
    z-index: 1059;
}
#mostrarlicencias {
    height: 35px;
    line-height: initial;
}
#menulicencias {
    float: left;
    margin-bottom: 10px;
    background: #f1f1f1;
}
.filterfield .select2-selection__rendered {
    color: #787878 !important;
}
#selectorfechas {
    float: right;
    background: #cce8fb;
    font-size: 11pt;
    height: 28px;
    line-height: 2em !important;
}
#select2-fieldmes-container, #definicionmes {
    background-color: #cce8fb;
}
#selectorfechascomportamiento {
    float: right;
    background: #cce8fb;
    font-size: 11pt;
    height: 28px;
    line-height: 2em !important;
}

.centrar {
    width: 505px;
    margin: 100px auto;
    text-align: center;
}
.card3 {
    box-shadow: 0px 0px 8px 1px silver;
    color: #4077a1;
    border: none;
    float: left;
    margin: 7px;
    width: 23%;
    min-width: 145px;
    border-radius: 5px;
    background: #fbfbfb;
}
.card3 p {
    font-size: 2.5em;
    text-align: center;
    font-weight: 500;
    margin-bottom: 0;
}
.card3 .card-title {
    text-align: center;
}
.card {
    background: #cee7fb;
    color: #4077a1;
    border: none;
    float: left;
    margin: 7px;
    width: 23%;
    min-width: 145px;
}
.card p {
    font-size: 2.5em;
    text-align: center;
    font-weight: 500;
    margin-bottom: 0;
}
.card-title a {
    font-size: 1.2em;
    text-align: center;
    text-decoration: none;
    color: #4077a1;
}
.card-foot {
    float: right;
    font-size: 1.5em;
    color: #9dd1fb;
    font-weight: bold;
}
.card-info {
    font-size: 1.5em;
}
p.card-text-sm {
    font-size: 2em;
}
#infofac .card {

}
.card2 {
    float: left;
    border: 2px solid silver;
    border-radius: 10px;
    margin: 7px;
    min-width: 285px;
    color: #898787;
    font-size: 9pt;
}
span.rojo {
    color: #bf0202;
}
span.verde {
    color: #006900;
}
#fieldrecargarlicencias {
    float: right;
}
#fieldrecargarlicencias .btn {
    height: 30px;
    font-size: 27px;
    line-height: 0;
    padding: 1px 7px;
}
#nav-dominios .boton {
    margin: 10px;
}
#chartlicencias, #chartfacturacion, #chartfacturacionanual, #chartfacturacionmensual {
    float: left;
    margin-right: 10px;
}
#chartresumenconv {
    width: 100%;
    max-width: 700px;
    display: block;
    float: left;
}
#leyendaincidencias {
    margin-bottom: 20px;
}
.posleft {
    float: left;
}
.posright {
    float: right;
}
.posleft h4, .posright h4 {
    color: #b1b1b1;
    font-size: 15pt;
}
#formzone {
    width: 100%;
    float: right;
    padding: 5px 10px;
    border-bottom: 2px solid silver;
    margin-bottom: 20px;
}
.cajafiltro {
    float: left;
    padding-right: 40px;
}
.cajafiltro span {
    font-size: 0.8em;
    text-align: justify;
}
select#selectorconvocatoria {
    font-size: 12pt;
    color: #505050;
    border: 1px solid silver;
    padding: 5px 5px;
}
input#limitelicencias {
    font-size: 12pt;
    color: #505050;
    border: 1px solid silver;
    padding: 3px 10px;
    width: 85px;
}
#formzone h3 {
    float: left;
    padding-right: 20px;
}

#posiblescursos_wrapper button {
    font-size: 11px;
    background: #0090ce;
    color: white;
    border: none;
}
div#barraestadistica {
    float: left;
    width: 100%;
    background: #527cb6;
    color: #d6e7ff;
    margin: 7px 8px 15px 0;
    border-radius: 5px;
    padding: 10px;
}
.boxesta {
    float: left;
    margin-right: 35px;
}
.boxesta span {
    font-size: 13pt;
    font-weight: 500;
    color: white;
}
div#datopro {
    width: 70%;
    float: left;
}
div#datopro h1 {
    font-size: 23px;
}
div#datopro h2 {
    font-size: 16px;
    color: #527cb6;
}
div#datopro h3 {
    font-size: 13px;
}
div#datopro h4 {
    font-size: 18px;
}
.convblock {
     float: left;
     width: 20%;
 }
div#tablaar {
    float: left;
    margin-top: 10px;
    width: 100%;
}
span.calert {
    color: red;
}
#nav-tabContentAAFF {
    float: left;
    margin-top: 20px;
    width: 100%;
}
.card-footer {
    text-align: center;
    font-size: 9pt;
    margin-top: 20px;
    padding: 15px 0;
    color: #979696;
}

/* Para la barra del scroll */
/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #e1e1e1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #b2b2b2;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #8a8a8a;
}
/*******************/
div#nav-temario {
    max-height: 450px;
    overflow: auto;
}
.infoinactive {
    color: red;
    font-size: 1.7em;
    float: right;
    font-family: fantasy, arial;
}
div#nav-tabContent {
    float: left;
    width: 100%;
    margin-top: 15px;
}
.accordion-body {
    overflow: auto;
}
.hcompany {
    float: left;
    width: 70%;
}
.hacumulado {
    float: left;
    width: 20%;
}
.hdescuento {
    float: left;
    width: 9%;
}
.presupuestos a {
    font-size: 0.8em;
    text-decoration: none;
}
button.accordion-button {
    font-size: 0.4em;
    padding: 5px 10px;
}
tr.group,
tr.group:hover {
    background-color: #ddd !important;
}
.resumenfacturacion {
    width: 100%;
    background: #ededed;
    padding: 5px 10px;
    overflow: auto;
    color: #979797;
    margin-bottom: 7px;
}
.resumenfacturacion .apartado {
    float: left;
    width: 20%;
}
.resumenfacturacion span {
    font-size: 1.2em;
    font-weight: bold;
}
.linkpresu {
    color: blueviolet;
    cursor: pointer;
}
div#resumenfaclicencias {
    width: 100%;
    float: left;
}
div#resumentablalicencias {
    width: 100%;
    float: left;
    margin-top: 30px;
}
div#resumenfaclicencias div#selectorfechas {
    float: left;
    margin-top: 20px;
}
div#infotramo {
    width: 100%;
    float: left;
    font-size: 0.7em;
}

#columnaderecha #divpedidos {
    width: 630px;
    box-shadow: 0px 0px 10px 1px silver;
    float: right;
    padding: 10px;
}
#fieldfecha {
    background: #cee7fb;
    color: #9dd1fb;
    font-weight: bold;
    font-size: 15pt;
    padding: 0 20px;
    border: 2px solid;
}

.card-body #divpedidos #tablapedidosfp th.sorting {
    background-color: #ffffff;
    color: black;
    font-weight: bold;
}
.card-body #divpedidos #tablapedidosfp td {
    color: black;
}
.card-body #divpedidos .btn-secondary{
    background-color: #ffffff;
    color: #4e5d72;
}
#descripciontable {
    font-size: 0.8em;
    font-style: italic;
    margin-top: 20px;
}





/*CSS ARCHIVOS DE PERSONALIZACIÓN*/
#container_error_personalizacion{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 73vh;
    flex-direction: column;
}
#container_personalizacion {
    display: flex;
    min-height: 73vh;
}
#container_personalizacion .box {
    width: 250px;
    height: 250px;
    padding: 20px;
    margin: 10px;
    border: 1px solid #ccc;
    text-align: center;
    cursor: pointer;
    border-radius: 15px;
    box-shadow: 0 0 15px 0 #ccc;
}
#container_personalizacion .box:hover {
    animation: latido 1s infinite;
}
#container_personalizacion a {
    text-decoration: none;
    color: #000;
}
#container_personalizacion #left {
    width: 50%;
    padding: 10px;
    transition: width 0.5s, transform 0.5s;
}
#container_personalizacion #left > header,
#container_personalizacion #right > header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#container_personalizacion #left.centered{
    width: 100%;
}
#container_personalizacion #right {
    /*width: 50%;*/
    padding: 10px;

    width: 0;
    display: none;
}
#container_personalizacion #left > header,
#container_personalizacion #right > header{
    background-color: #cee7fb;
    padding: 1px 15px;
    height: 40px;
}
#container_personalizacion #left > header h5,
#container_personalizacion #right > header h5{
    margin: 0;
    font-size: 1.1em;
}

#container_personalizacion #left > header button,
#container_personalizacion #right > header button{
    background-color: #2470dc;
    color: #fff;
    border: none;
    padding: 2px 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.5s;
}
#container_personalizacion #left > header button:hover,
#container_personalizacion #right > header button:hover{
    background-color: #248fdc;
}

#container_personalizacion table#personalizacion{
    width: 100%;
}
#container_personalizacion table#personalizacion thead tr th,
#container_personalizacion table#personalizacion tbody tr td{
    border: 1px solid #EFEFEF;
    max-width: 100px;
    position: relative !important;
}
#container_personalizacion table#personalizacion thead tr th:first-child{
    max-width: 100%;
    background-color: #f7f7f7;
}
#container_personalizacion table#personalizacion thead tr th:nth-child(4).active_0,
#container_personalizacion table#personalizacion thead tr th:nth-child(5).active_0{
    background-color: rgba(255, 0, 0, 0.50);
}
#container_personalizacion table#personalizacion tbody tr{
    height: 50px;
}
#container_personalizacion table#personalizacion tbody td{
    padding: 0.7rem;
}
#container_personalizacion table#personalizacion tbody tr td:first-child{
    font-size: 1.2em;
}
#container_personalizacion table#personalizacion .unused {
    background-color: #f2f2f2;
    border: 1px solid #dedede;
}
#container_personalizacion .leyenda{
    width: 90%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    padding: 5px;
    margin: auto;
    /*margin-bottom: 15px;*/
    text-align: left;
}
#container_personalizacion .leyenda .titulo{
    font-weight: bold;
    margin: 0;
}
#container_personalizacion .leyenda .roles{
    margin: 0;
    display: flex;
    font-weight: 400;
    line-height: 25px;
}

#container_personalizacion table#personalizacion thead tr th p.titulo {
    font-size: 13px;
}

#container_personalizacion table#personalizacion thead .vertical {
    /*display: inline-block;*/
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    /*width: 30px;*/
    /* border: 1px solid #000; */
    padding: 10px;
    transform: rotate(340deg);
}
#container_personalizacion table#personalizacion thead:has(.vertical) .vertical{
    width: 100%;
    display: flex;
    align-items: center;
}
#container_personalizacion table#personalizacion td > input[type="color"], #colorPicker{
    padding: 0;
    border: none;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    box-shadow: 0 0 1px 2px #787878;
}
#container_personalizacion table#personalizacion td > input[type="color"]::-webkit-color-swatch, #colorPicker::-webkit-color-swatch{
    border: none;
    border-radius: 50%;
}
#container_personalizacion table#personalizacion td > input[type="color"]::-webkit-color-swatch-wrapper, #colorPicker::-webkit-color-swatch-wrapper{
    padding: 0;
}

#container_personalizacion table#personalizacion div.personalizacion_0 {
    background-image: url(../img/personalizacion/incorrect.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    /* width: 85%; */
    /* max-width: 50px; */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 40px;
    margin-left: -20px;
}
#container_personalizacion table#personalizacion div.personalizacion_1 {
    background-image: url("../img/personalizacion/correct.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    /* width: 85%; */
    /* max-width: 50px; */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 40px;
    margin-left: -20px;
}

#container_personalizacion div.personalizacion_0::after {
    content: "No";
}

#container_personalizacion div.personalizacion_1::after {
    content: "Si";
}
#container_personalizacion table#personalizacion td.editar button{
    width: 20px;
    height: 20px;
    background-image: url(../img/personalizacion/editar.svg);
    background-repeat: no-repeat;
    background-color: #fff;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 3px;
    right: 3px;
    display: none;
}
#container_personalizacion table#personalizacion td.editar button:hover{
    background-color: #d0d0d0;
}
.ui-dialog button{
    border: 1px solid #eeeeee;
}
.ui-dialog button:hover{
    border: 1px solid #bbbbbb;
    background: #ededed;
    font-weight: normal;
    color: #2b2b2b;
}
.ui-dialog button:active{
    border: 1px solid #003eff;
    background: #007fff;
    font-weight: normal;
    color: #ffffff;
}
.ui-dialog-titlebar{
    background-color: #cee7fb;
}
.ui-dialog .ui-dialog-titlebar-close{
    background-image: url("../js/jquery-ui/images/ui-icons_555555_256x240.png");
    background-position: -80px -128px !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover{
    background-image: url("../js/jquery-ui/images/ui-icons_444444_256x240.png");
}
.ui-dialog .ui-dialog-titlebar-close:active{
    background-image: url("../js/jquery-ui/images/ui-icons_ffffff_256x240.png");
}

div[id^="dialog_"] #colorPicker:hover{
    cursor: pointer;
}
div[id^="dialog_"] .dialog-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 0;
}
div[id^="dialog_"] .left {
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
div[id^="dialog_"] .right {
    grid-area: 1 / 2 / 2 / 3;
    display: flex;
    margin-left: 10px;
    justify-content: space-evenly;
    align-items: center;
}
div[id^="dialog_"] .bottom {
    grid-area: 2 / 1 / 3 / 3;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}
div[id^="dialog_"] .bottom-textarea{
    width: 100%;
    height: 70px;
    resize: none;
}
div[id^="dialog_"] #deleteCheckbox{
    width: 20px;
    height: 20px;
}
#container_personalizacion #moreinfo{
    margin: 0 auto;
    text-align: center;
    display: flex;
}
#container_personalizacion #moreinfo i{
    cursor: pointer;
    border-radius: 20px;
    transition: all 0.5s;
    padding: 0 5px;
    font-size: 1.2em;
}
#container_personalizacion #moreinfo i:first-child:hover{
    color: blue;
    text-shadow: 0 0 8px rgb(0 0 255 / 50%);
}
#container_personalizacion #moreinfo i:nth-child(2):hover{
    color: #ff0000;
    text-shadow: 0 0 8px rgb(255 0 0 / 50%);
}
#dialog_moreinfo ul {
    list-style: none;
    padding: 0;
}
#dialog_moreinfo li {
    margin: 10px 0;
}
#dialog_moreinfo .title {
    font-weight: bold;
}


/*DIALOG BOOL*/
#dialog_bool .button-label {
    display: inline-block;
    padding: 10px 20px;
    margin: 0.5em;
    cursor: pointer;
    color: #292929;
    border-radius: 0.25em;
    background: #efefef;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
    transition: 0.3s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#dialog_bool .button-label:hover {
    background: #d6d6d6;
    color: #101010;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32);
}
#dialog_bool .button-label:active {
    transform: translateY(2px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);
}

#dialog_bool #yes-button:checked + .button-label {
    background: #2ECC71;
    color: #efefef;
}
#dialog_bool #yes-button:checked + .button-label:hover {
    background: #29b765;
    color: #e2e2e2;
}

#dialog_bool #no-button:checked + .button-label {
    background: #D91E18;
    color: #efefef;
}
#dialog_bool #no-button:checked + .button-label:hover {
    background: #c21b15;
    color: #e2e2e2;
}

/*DIALOG_TEXTO*/
#dialog_texto .text-input {
    width: 60%;
    border: none;
    border-bottom: 2px solid #cccccc;
    background: none;
}

#dialog_texto .text-input label {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: top 0.3s, font-size 0.3s;
}

#dialog_texto .text-input:focus {
    outline: none;
    border-image: linear-gradient(to right, #007bff, #00cfff);
    border-image-slice: 1;
    border-image-width: 0 0 2px 0;
}

#dialog_texto .text-input:focus label {
    top: -15px;
    font-size: 12px;
}

/*DIALOG IMAGEN*/
#dialog_imagen .dialog-container{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
#dialog_imagen .info{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
#dialog_imagen .info div{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#dialog_imagen input[type="file"]{
    display: none;
}
#dialog_imagen .file-button {
    background-color: #0074D9;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}
#dialog_imagen .left{
    grid-area: 1 / 1 / 2 / 2;
}
#dialog_imagen .right{
    grid-area: 1 / 2 / 2 / 3;
}
#dialog_imagen #container-preview {
    grid-area: 2 / 1 / 3 / 3;
    margin: 0 auto;
    border: 1px solid #000;
    background-color: #0000005e;
    width: 220px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#dialog_imagen #image-preview {
    max-width: 200px;
    max-height: 60px;
    height: 100%;
    width: 100%;
    /* background-size: contain; */
    background-position: center;
    background-repeat: no-repeat;
}

#dialog_imagen .bottom{
    grid-area: 3 / 1 / 4 / 3;
}



/*SELECT 2, le damos bordes a la librería.*/
#cambiardominio #select2-dominioseleccionado-container{
    border: 1px solid #aaa;
    border-radius: 3px;
}


@media screen and (width <= 1399px) {
    #container_personalizacion #left{
        width: 100%;
    }
    #container_personalizacion #right,
    #container_personalizacion #left #toggleButton{
        display: none !important;
    }
}

/*DATATABLES*/
#container_personalizacion table.dataTable {
    width: 100% !important;
    margin: 0 auto !important;
    border-collapse: collapse;
    border-spacing: 0;
}

#container_personalizacion table.dataTable thead th,
#container_personalizacion table.dataTable thead td {
    padding: 8px 10px;
    border-bottom: 1px solid #ddd;
}

#container_personalizacion table.dataTable tbody th,
#container_personalizacion table.dataTable tbody td {
    padding: 8px 10px;
}

/*Estilo para que la fecha salga completa*/
#container_personalizacion table.dataTable tbody tr td:nth-child(5){
    white-space: nowrap;
}

/* Estilo para paginación y búsqueda (ajusta según tus necesidades) */
#container_personalizacion div.dataTables_paginate {
    text-align: center;
    margin-top: 10px;
}

#container_personalizacion div.dataTables_length {
    margin-bottom: 10px;
}

#container_personalizacion div.dataTables_filter {
    float: right;
    margin-bottom: 10px;
}

#datoscliente {
    width: 100%;
    float: left;
    /*background: #f1f1f1;*/
    padding: 10px;
    color: #818181;
}
#gruposcliente, #importeacumulado, #descuentocliente, #cursosentienda {
    width: 19%;
    float: left;
    margin-right: 10px;
}
#importeacumulado, #descuentocliente, #cursosentienda {
    font-size: 2.5em;
}
#gruposcliente, #importeacumulado, #cursosentienda {
    border-right: 1px solid silver;
}
.card-body {
    padding: 0.5rem 1rem;
}
nav#menucuenta {
    float: left;
    width: 100%;
}

.infoadicional{
    color: silver;
    font-style: italic;
}

.actcaja {
    width: 300px;
    float: left;
    margin-right: 50px;
}
button#activarproceso {
    margin-top: 20px;
}
.situacionref {
    width: 100%;
    float: left;
    margin-top: 50px;
}