/* Modificaciones
Los cambios se editan en bootstrap-dark.min.css y en bootstrap.min.css */

/* Botones

.btn-primary
.btn-primary:hover
.btn-primary:active
.btn-primary:focus 

*/

/* Datatables

.page-item.active

*/

/* Checkbox

.form-check-input:checked

*/

/* Variables */

:root{

    /* Colores */
    --color-primario: #A37535;

    /* Fondos */
    --fondo-primario: #A37535;

    /* TASK */
    --dark: #374151;
    --darker: #1F2937;
    --darkest: #111827;
    --gray: #6B7280;
    --light: #EEE;
    --pink: #EC4899;
    --purple: #8B5CF6;

}

.color-primario{
    color: var(--color-primario) !important;
}

.fondo-primario{
    background-color: var(--fondo-primario) !important;
}
.texto-primario{
    color: var(--color-primario) !important;
}
.texto-light{
    color: #fff !important;
}
.border-radius-5{
    border-radius: 5px !important;
}
/* Scroll personalizado */
::-webkit-scrollbar{
    width: 0;
    height: 2px;
}

::-webkit-scrollbar-thumb{
    background: var(--color-primario);
    border-radius: 10px;
}

/*.timeline-sm-item~.proceso-completo{
    border-left: 2px solid #1ABC9C !important;
}*/
.loader-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: none;
}

.loader {
    width: 82px;
    height: 18px;
    position: relative;
  }
  .loader::before , .loader::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(-50% , 10%);
    top: 0;
    background: var(--color-primario);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    animation: jump 0.5s ease-in infinite alternate;
  }
  
  .loader::after {
    background: #0000;
    color: #fff;
    top: 100%;
    box-shadow: 32px -20px , -32px -20px;
    animation: split 0.5s ease-out infinite alternate;
  }
  
  @keyframes split {
    0% { box-shadow: 8px -20px, -8px -20px}
    100% { box-shadow: 32px -20px , -32px -20px}
  }
  @keyframes jump {
   0% { transform: translate(-50% , -150%)}
   100% { transform: translate(-50% , 10%)}
  }

.loader-container h1{
    color: #fff;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1rem;
    letter-spacing: 10px;
}
.loader-container h2{
    color: var(--color-primario);
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 5px;
}
    

.img-aplicaciones{
    width: 100px;
}
/* Control documental */
.portada-documento img{
    width: 200px;
}
.comentarios-detalle-documento{
    max-height: 500px;
    overflow: auto;
}
/* Control documental end */
/*=======================================================
CLASES DE PLANTILLA MODIFICADAS
=======================================================*/
/* Sidebar left */
#sidebar-menu .menuitem-active > a{
    color: var(--color-primario) !important;
}
/* Sidebar left end */

.ribbon-box .ribbon-primary{
    background: var(--color-primario) !important;
}
.ribbon-box .ribbon-primary::before{
    border-color: var(--color-primario) transparent transparent !important;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color: var(--color-primario) !important;
}
.progress-bar{
    background-color: #1ABC9C !important;
}
/* CARTAS DE PRECIOS */
.card-pricing-recommended{
    background-color: var(--color-primario) !important;
}
.card-pricing .card-pricing-icon{
    background-color: rgba(255, 255, 255, .1) !important;
}

/* Multiselect */
.ms-container{
    max-width: 100% !important;
}

.ms-container .ms-list{
    min-height: 400px !important;
    max-height: 600px !important;
    overflow-y: auto !important;
}

/*========== TERMINA CLASES DE PLANTILLA ==============*/

.calificacion input[type="radio"]{
    display: none;
}

.calificacion label{

    color: var(--color-primario);
    padding: 5px 15px 5px 30px;
    display: inline-block;
    font-weight: 500;
    position: relative;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.calificacion label:hover{
    background: rgba(163, 117, 53, .1);
}

.calificacion label:before{
    content: "";
    width: 17px;
    height: 17px;
    display: inline-block;
    border: 3px solid var(--color-primario);
    border-radius: 50%;
    position: absolute;
    left: 8px;
    top: 7px;
}

.calificacion input[type="radio"]:checked + label{
    padding: 5px 15px;
    background: var(--color-primario);
    border-radius: 2px;
    color: #fff;
}

.calificacion input[type="radio"]:checked + label:before{
    display: none;
}

.color-estrella{

    color: #DADE00 !important;

}

.btnIniciarCronometro,
.btnPararCronometro{
    cursor: pointer;
    margin-right: 10px;
}

.btnPararCronometro{
    display: none;
}

/*========== LISTA DE TAREAS (TODO LIST TASK) ==============*/
.todo-list{
    display: flex;
    flex-direction: column;
    min-height: 50vh;
}
.todo-list input, .todo-list button{
    appearance: none;
    border: none;
    outline: none;
    background: none;
}
.todo-list-header{
    padding: 2rem 1rem;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}
.todo-list-header > h1{
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--gray);
    margin-bottom: 1rem;
}
.todo-list-header > #new-task-form{
    display: flex;
}

.todo-list-header > #new-task-form > #new-task-input{
    flex: 1 1 0%;
    background-color: var(--darker);
    padding: 1rem;
    border-radius: 1rem;
    margin-right: 1rem;
    color: var(--light);
    font-size: 1.25rem;
}

.todo-list-header > #new-task-form > #new-task-input::placeholder{
    color: var(--gray);
}
.todo-list-header > #new-task-form > #new-task-submit{
    color: var(--pink);
    font-size: 1.25rem;
    font-weight: 700;
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    transition: 0.4s;
}
.todo-list-header > #new-task-form > #new-task-submit:hover{
    opacity: 0.8;
}
.todo-list-header > #new-task-form > #new-task-submit:active{
    opacity: 0.6;
}

.todo-list-body > main{
    flex: 1 1 0%;
    padding: 2rem 1rem;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.todo-list-body > main > .task-list{
    padding: 1rem;
}

.todo-list-body > main > .task-list > h2{
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--gray);
    margin-bottom: 1rem;
}

.todo-list-body > main > .task-list > #tasks > .task{
    display: flex;
    justify-content: space-between;
    background-color: var(--darkest);
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
}

.todo-list-body > main > .task-list > #tasks > .task > .content > .text{
    color: var(--light);
    font-size: 1.125rem;
    width: 100%;
    display: block;
    transition: 0.4s;
}

.todo-list-body > main > .task-list > #tasks > .task > .content > .text:not(:read-only){
    color: var(--pink);
}
.todo-list-body > main > .task-list > #tasks > .task > .actions{
    display: flex;
    margin: 0 -0.5rem;
}
.todo-list-body > main > .task-list > #tasks > .task > .actions > button{
    cursor: pointer;
    margin: 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.4s;
}
.todo-list-body > main > .task-list > #tasks > .task > .actions > button:hover{
    opacity: 0.8;
}
.todo-list-body > main > .task-list > #tasks > .task > .actions > button:active{
    opacity: 0.6;
}

.todo-list-body > main > .task-list > #tasks > .task > .actions > .edit-task{
    background-image: linear-gradient(to right, var(--pink), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.todo-list-body > main > .task-list > #tasks > .task > .actions > .delete-task{
    color: crimson;
}

/*========== NOTIFICACIONES ==============*/
.panel-notificaciones{
    max-height: 600px;
    overflow: auto;
}

/*========== CHAT ==============*/
.img-chat{
    width: 500px;
}
.contactosChat{
    /*height: 375px;*/
    height: 570px;
    overflow: auto;
}

#conversacionChat{
    height: 460px;
    overflow: auto;
}

.columna-btn-enviar-mensaje{
    display: none;
}

/* TABLETS HORIZONTALES */
@media (max-width:1199px) and (min-width:992px){
    .img-chat{
        width: 300px;
    }
    .columna-btn-enviar-mensaje{
        display: block;
    }
}
/* TABLETS VERTICALES */
@media (max-width:991px) and (min-width:768px){
	.columna-btn-enviar-mensaje{
        display: block;
    }
}
/* DISPOSITIVOS MOVILES */
@media (max-width:767px){
    .img-chat{
        width: 100%;
    }
    .columna-btn-enviar-mensaje{
        display: block;
    }
}
ul.control-documental li{
    list-style: none;
}
ul li.control-documental > a{

    color: #68D61C;
    text-transform: uppercase;
    font-weight: bold;

}

ul li a.control-documental{
    color: #83B95D;
}

/* SUBTITULOS DE GRUPOS DE SLECT2 */
.select2-container--default .select2-results__group{
    color: #F7B84B;
}

/* Card news marketing página cimarrón */
.btn-new-options{
    position: absolute !important;
    right: 10px;
    top: 10px;
}