/* DATA TABLE AJUSTE DE BOTONES NATIVOS */
/* Cambiar estilos de paginación */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0;
    margin: 0 5px;
    display: inline-block;
    font-size: 14px;
    border: none;
    color: #26a69a; /* Color de Materialize */
    background: none;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: white;
    background-color: #26a69a;
    border-radius: 50%;
}

/* Modificar la barra de búsqueda */
.dataTables_wrapper .dataTables_filter input {
    border: 0px solid #ccc;
    border-bottom: 1px solid black;
    border-radius: 0px;
    padding: 5px;
    margin-left: 5px;
}

/* Cambiar estilos de tabla */
table.dataTable {
    border-collapse: collapse;
    border: none;
}

/* DATA TABLE FIN */
/*
DRAG AND DROP
*/
.drop-area {
    border: 2px dashed #9e9e9e;
    padding: 20px;
    text-align: center;
    cursor: pointer;
}
.drop-area.dragging {
    background-color: #e0e0e0;
}
.file-list {
    margin-top: 20px;
}
/*
SELECT COLOR
*/



ul.color-select {
  list-style: none;
  padding: 10px 0px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 20px;
}

ul.color-select li {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s;
}

ul.color-select li:hover {
  transform: scale(1.5);
}
/*
CHECK TACHADO
*/
input[type=checkbox]:checked + span.check_tachado{
    text-decoration: line-through;
}

/*
CHAT 
*/



#nav_chat {
    width: 380px;
    max-width: 100%;
    overflow-y: hidden;
}

.chat-footer {
    background-color: #c0c0c0;
    margin: 0%;
    height: 64px;
    min-height: 64px;
}

.chat-footer .chat-input::-webkit-scrollbar {
    /* This is the magic bit for WebKit */
    display: none;
}

.chat-footer .chat-input {
    /* This is the magic bit for Firefox */
    scrollbar-width: none;
}

.chat-footer .chat-input {
    overflow-x: hidden;
    width: 75%;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    z-index: 1;
    max-height: 50px;
    min-height: 30px;
    padding: 3px 0 0 15px;
    vertical-align: middle;
    outline: 0;
    background-color: #ffffff;
    position: inherit;
    display: inline-flexbox;
    border-radius: 15px;
    border-color: #000 transparent transparent transparent;
    transition: 0.2s padding ease-in-out;
}


.chat-box {
    position: relative;
    padding: 15px;
    background: #f7f7f7;
    box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%),
        inset 0 -32px 32px -32px rgb(0 0 0 / 5%);

    height: calc(100% - (48px + 64px));
    -moz-height: calc(100% - (48px + 64px));
    -webkit-height: calc(100% - (48px + 64px));
    overflow-y: scroll;
}

.chat-box .text {
    position: absolute;
    top: 45%;
    left: 50%;
    width: calc(100% - 50px);
    text-align: center;
    transform: translate(-50%, -50%);
}

.chat-box .chat {
    margin: 5px 0;
}

.chat-box .chat p {
    word-wrap: break-word;
    white-space: pre-wrap;
    padding: 8px 16px;
    margin-bottom: 0px;
    margin-top: 0px;
    box-shadow: 0 0 32px rgb(0 0 0 / 8%),
        0rem 16px 16px -16px rgb(0 0 0 / 10%);
}

.chat-box .derecha {
    display: flex;
}

.chat-box .derecha .detalle {
    margin-left: auto;
    max-width: 80%
}

.derecha .detalle p {
    background: #0d47a1;
    color: #fff;
    border-radius: 18px 18px 0 18px;
}

.chat-box .izquierda {
    display: flex;
    position: relative;
    align-items: flex-end;
}

.chat-box .izquierda img {
    height: 45px;
    width: 45px;
    top: 0px;
    position: absolute;
    border-radius: 50%;
}

.chat-box .izquierda .detalle {
    margin-right: auto;
    margin-left: 55px;
    max-width: 80%;
}

.izquierda .detalle p {
    background: #fff;
    color: #333;
    border-radius: 0px 20px 20px 20px;
}

.izquierda .detalle label {
    padding-left: 16px;
    padding-top: 5px;
}

.derecha .detalle label {
    padding-right: 16px;
    padding-top: 5px;
}

/*
MODO DARK
*/

html, body{
    height: 100%;
  }

body {
/* 
    background-image: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)),url(../images/fondo.jpg);
    background-position: center center;
    background-repeat:  no-repeat;
    background-attachment: fixed;
    background-size:  cover;
    background-color: #999;
    
    
    background-color: #eeeeee;
    
    */
    transition: color 1s ease, background-color 1s ease;

}

body.dark {
/*
    background-image: linear-gradient(rgba(13,13,13,.9), rgba(13,13,14,.9)),url(../images/fondo.jpg);
*/
  
    background-color: #202123;
    color: #fff;
}

body.dark nav {
    background-color: #26a69a;
}

body.dark .card {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark .btn {
    background-color: #ee6f73;
}

body.dark .divider {
    opacity: 0.2;
}

body.dark .sidenav {
    background-color: #2d2d31;
}

body.dark .sidenav li a:not(.subheader) {
    color: #89b2f5;
}

body.dark .sidenav li a:not(.subheader):hover {
    background-color: #3b4043;
}

body.dark .sidenav li a.subheader {
    color: #9aa0a6;
}

body.dark .sidenav li a .material-icons {
    color: #9aa0a6;
}

body.dark .preloader-background {
    background-color: rgb(34, 34, 34);

}

body.dark .modal, body.dark .modal .modal-footer {
    background-color: #202123;
}

body.dark table.striped>tbody>tr:nth-child(odd){
    background-color: rgba(255,255,255,0.1);
} 
body.dark table.highlight>tbody>tr:hover{
    background-color: rgba(255,255,255,0.2);
} 
body.dark .collection {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark .collection .collection-item {
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark .collection.with-header .collection-header {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark .collapsible-header {
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark blockquote {
    background-color: rgba(255, 255, 255, 0.1);

}

blockquote {
    padding-right: 1.5rem;
}

body.dark .select-wrapper input.select-dropdown {
    color: white !important;
}

body.dark .select-wrapper input.select-dropdown {
    color: white;
}

body.dark input:not([type]),
body.dark input[type=text]:not(.browser-default),
body.dark input[type=password]:not(.browser-default),
body.dark input[type=email]:not(.browser-default),
body.dark input[type=url]:not(.browser-default),
body.dark input[type=time]:not(.browser-default),
body.dark input[type=date]:not(.browser-default),
body.dark input[type=datetime]:not(.browser-default),
body.dark input[type=datetime-local]:not(.browser-default),
body.dark input[type=tel]:not(.browser-default),
body.dark input[type=number]:not(.browser-default),
body.dark input[type=search]:not(.browser-default),
body.dark textarea.materialize-textarea {
    color: white;
}

body.dark .datepicker-calendar-container,
body.dark .timepicker-analog-display {
    background-color: #202123;
}

body.dark .btn-flat {
    color: white;
}

body.dark .dropdown-content li>a,
body.dark .dropdown-content li>span {
    color: #26a69a;
    background-color: rgba(32, 33, 35, 0.9);
}

body.dark .sidenav li a:not(.subheader){
    background-color: #202123;
}


body.dark .dropdown-content li:not(.active) {
    background-color: #202123;
    color: #26a69a;
}

body.dark .dropdown-content li.active {
    background-color: rgba(32, 33, 35, 0.6);
}

body.dark a:not([class]),
body.dark ul.selection a:not([class]) {
    color: #26a69a;
}

body.dark .table-of-contents a ,
body.dark .table-of-contents a:not([class]) {
    color: white;
}

body.dark table.dataTable.display tbody tr.odd td,
body.dark table.dataTable.display tbody tr.child {
    background-color: #202123;
}

body.dark table.dataTable.display tbody tr.even td {
    background-color: #272829;
}

body.dark table.dataTable.display tbody tr.odd td.sorting_1 {
    background-color: #171a20;
}

body.dark table.dataTable.display tbody tr.even td.sorting_1 {
    background-color: #2a2d33;
}


body.dark table.dataTable tbody tr {
     background-color: #202123;
}

/*TABS MATERIALIZE*/

body.dark ul.tabs li.tab a.active,
body.dark ul.tabs li.tab a:hover {
    color: #f06292;
    background-color: #202123;
}

body.dark ul.tabs li.tab a{
    background-color: #202123;
    color: #f06291be;
}


/*CHECKBOX */
body.dark p label span {
    color: #fff;
}
body p label span {
    color: #000;
}

.container {
    width: 100% !important;
    max-width: calc(100vw - 10px);
}
/*
FOOTER


body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
*/
/*
EXTRA para ordenar correctamente FECHA DATATABLE
*/

#tabla_inteligente .ocultito {
    display: none;
}

.carousel {
    transform: translateY(-100px);
}

.no_padding {
    padding-top: 0px;
}


/*
EXTRA para ordenar correctamente FECHA DATATABLE
*/


.chat-input form input[type="text"],
.chat-input textarea {
    border: 0;
    margin: 0;
    padding: 10px;
    resize: none;
    line-height: 24px
}

.chat-input form input[type="text"]:focus:not([readonly]),
.chat-input textarea:focus:not([readonly]) {
    border: 0;
    box-shadow: none
}

.chat-input button {
    padding: 0 16px;
    height: 72px
}

.chat-input .chat-input-bar {
    display: flex
}


/*

header,
main,
footer,
.preloader-background {
    padding-left: 300px;
}

@media only screen and (max-width: 992px) {
    header,
    main,
    footer,
    .preloader-background {
        padding-left: 0;
    }
}

.fixed-action-btn {
    left: 20px;
}
*/

.preloader-background {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.faconi-bg-rojo {
    background: linear-gradient(60deg, #f06292, #c2185b);
}

.faconi-bg-amarillo {
    background: linear-gradient(60deg, #ffd54f, #ffa000);
}

.faconi-bg-verde {
    background: linear-gradient(60deg, #81c784, #388e3c);
}

.faconi-bg-azul {
    background: linear-gradient(60deg, #4fc3f7, #039be5);
}

.inline-icon {
    vertical-align: bottom;
    /*
   font-size: 18px !important;
   */
}