@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap");
:root{
    --header-height: 3rem;
    --nav-width: 68px;
    --first-color: #2D2E80;
    --first-color-light: #AFA5D9;
    --white-color: #F7F6FB;
    --body-font: 'Nunito', sans-serif;
    --normal-font-size: 1rem;
    
}
*,::before,::after{
    box-sizing: border-box
}
body{
    margin: var(--header-height) 0 0 0;
    padding: 0 1rem;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    transition: .5s
}
a{
    text-decoration: none
}
.header{
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(--white-color);
    z-index: 1;
    transition: .5s
}
.header_toggle{
    color: var(--first-color);
    font-size: 1.5rem;
    cursor: pointer
}
.header_img{
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden
}
.header_img img{
    width: 40px
}
.l-navbar{
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--first-color);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: 2;
}
.nav{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden
}
.nav_logo, .nav_link{
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
    padding: .5rem 0 0rem 1.5rem
}
.nav_logo{
    margin-bottom: 2rem
}
.nav_logo-icon{
    font-size: 1.25rem;
    color: var(--white-color)
}
.nav_logo-name{
    color: var(--white-color);
    font-weight: 700
}
.nav_link{
    position: relative;
    color: var(--first-color-light);
    margin-bottom: 1.5rem;
    transition: .3s
}
.nav_link:hover{
    color: var(--white-color)
}
.nav_icon{
    font-size: 1.25rem
}
.show2{
    left: 0
}
.body-pd{
    padding-left: calc(var(--nav-width) + 1rem)
}
.active{
    color: var(--white-color)
}
.active::before{
    content: '';
    position: absolute;
    left: 0;
    width: 2px;
    height: 32px;
    background-color: var(--white-color)
}
.height-100{

    height:100vh;
    margin: var(--header-height) 0 0 0;
}
@media screen and (min-width: 768px){
    body{
        margin: calc(var(--header-height) + 1rem) 0 0 0;
        padding-left: calc(var(--nav-width) + 2rem)
    }
    .header{
        height: calc(var(--header-height) + 1rem);
        padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
    }
    .header_img{
        width: 40px;
        height: 40px
    }
    .header_img img{
        width: 45px
    }
    .l-navbar{
        left: 0;
        padding: 1rem 1rem 0 0
    }
    .show2{
        width: calc(var(--nav-width) + 156px)
    }
    .body-pd{
        padding-left: calc(var(--nav-width) + 188px)
    }
}
 .nav_toogle{
     display: grid;
     grid-template-columns: max-content max-content;
     align-items: center;
     column-gap: .5rem;
     padding: 0rem 0 0rem 3.2rem;
     color: white;
}
 .statusTitle{
     display:flex;
     justify-content:center;
     align-items:center;
     min-height:71px;
     padding:10px;
}
 .welcome{
     color: white;
     text-align: right;
     padding: 0.5rem;
}
/* CLIENT DASHBOARD */
 .clientsection{
     text-align: center;
     border-radius: 25px;
     border: 1px solid grey;
     padding: 30px;
}
 .container{
     max-width: 100% !important;
}
 .nav-link{
     text-align: center;
}
 .nav-link:hover{
     background: #F62E5C;
     color: #fff;
     border-radius: 5px;
}
 .navbar-default {
     background-color: #2f2f2f;
     border-color: #2f2f2f;
}
 .navbar-default .navbar-brand {
     color: #ecf0f1;
}
 .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
     color: #ecdbff;
}
 .navbar-default .navbar-text {
     color: #ecf0f1;
}
 .navbar-default .navbar-nav > li > a {
     color: #ecf0f1;
}
 .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
     color: #ecdbff;
     background: #F62E5C;
}
 .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
     color: #ecdbff;
     background-color: #2980b9;
}
 .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
     color: #ecdbff;
     background-color: #2980b9;
}
 .navbar-default .navbar-toggle {
     border-color: #2980b9;
}
 .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
     background-color: #2980b9;
}
 .navbar-default .navbar-toggle .icon-bar {
     background-color: #ecf0f1;
}
 .navbar-default .navbar-collapse, .navbar-default .navbar-form {
     border-color: #ecf0f1;
}
 .navbar-default .navbar-link {
     color: #ecf0f1;
}
 .navbar-default .navbar-link:hover {
     color: #ecdbff;
}
 @media (min-width: 768px){
     .modal-dialog {
         width: 90%;
    }
}
 @media (max-width: 767px) {
     .navbar-default .navbar-nav .open .dropdown-menu > li > a {
         color: #ecf0f1;
    }
     .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
         color: #ecdbff;
    }
     .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
         color: #ecdbff;
         background-color: #2980b9;
    }
}
/* INGENIUM COLORS */
 .bg-darkblue{
     background:#142850;
}
 thead th {
     position: -webkit-sticky;
    /* for Safari */
     position: sticky;
     top: 0;
}
 thead th:first-child {
     left: 0;
     z-index: 1;
}
 tbody th {
     position: -webkit-sticky;
    /* for Safari */
     position: sticky;
     left: 0;
     background: #fff !important;
}
 .bg-white{
     background:#fff;
}
 .bg-lightblue{
     background:#F62E5C;
}
 .bg-blackblue{
     background:#00001e;
}
 .bg-bluei{
     background:#2670ca;
}
 .text-darkblue{
     color:#142850;
}
 .text-lightblue{
     color:#F62E5C;
}
 .text-blackblue{
     color:#00001e;
}
 .text-bluei{
     color:#2670ca;
}
/* DESIGN 2019*/
 .card{
     margin: 20px 0 20px 0;
}
 .form-group{
     padding:5px;
}
 label{
    /*width: 200px;
    */
}
 .dtHorizontalExampleWrapper {
     max-width: 600px;
     margin: 0 auto;
}
 th, td {
     white-space: normal;
     display: table-cell;
     vertical-align: middle !important;
}
 table.dataTable thead .sorting:after, table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc_disabled:after, table.dataTable thead .sorting_desc_disabled:before {
     bottom: .5em;
}
 .title{
     margin:0;
     line-height: 1.9;
     display: inline;
}
 .modal-dialog{
     max-width: 90% !important;
}
 .checkbox{
     margin-left: 25px;
}
 table.table td, table.table th {
     text-align: center;
}
 .select2-container{
     width: 100% !important;
     margin: 0: auto !important;
}
 .select2-container--default .select2-selection--single .select2-selection__rendered {
     line-height: 1.5 !important;
     font-weight: 400;
     color: #495057;
     vertical-align: middle;
     padding: .375rem 1.75rem .375rem .75rem;
     background-color: #fff;
     border: 1px solid #ced4da;
     border-radius: .25rem;
}
 .select2-container .select2-selection--single {
     height: calc(2.25rem + 2px) !important;
}
 .label-planificacion{
     padding: 7px;
     float: left;
}
 .bg-ingenium{
     background:#2D2E80 !important;
}
 .bg-ingenium2{
     background: #F62E5C !important;
}
 .publicacionmodal-contenido{
     background: white;
     width:300px;
     padding: 10px 20px;
     margin: 20% auto;
     position: relative;
}
 .publicacionmodal{
     background-color: rgba(0,0,0,.8);
     position:fixed;
     top:0;
     right:0;
     bottom:0;
     left:0;
     opacity:0;
     pointer-events:none;
     transition: all 1s;
}
 .subtareamodal-contenido{
     background: white;
     width:300px;
     padding: 10px 20px;
     margin: 20% 10%;
     position: relative;
}
 .subtareamodal{
     background-color: rgba(0,0,0,.8);
     position:fixed;
     top:0;
     right:0;
     bottom:0;
     left:0;
     opacity:0;
     pointer-events:none;
     transition: all 1s;
}
 .bubble{
     padding: 10px;
     background: #F0E9D0;
     margin-bottom: 10px;
     border: #E3C496 solid 1px;
     border-radius: 5px;
}
/*input[type="checkbox"] {
     visibility: hidden;
}
 label {
     cursor: pointer;
}
 input[type="checkbox"] + label:before {
     border: 1px solid #333;
     content: "\00a0";
     display: inline-block;
     font: 16px/1em sans-serif;
     height: 16px;
     margin: 0 .25em 0 0;
     padding: 0;
     vertical-align: top;
     width: 16px;
}
 input[type="checkbox"]:checked + label:before {
     background: #fff;
     color: #333;
     content: "\2713";
     text-align: center;
}
 input[type="checkbox"]:checked + label:after {
     font-weight: bold;
}
 input[type="checkbox"]:focus + label::before {
     outline: rgb(59, 153, 252) auto 5px;
}
*/
 .bg-musgo{
     background: #2f4538 !important;
}
/* RESUMEN */
 .responsabe{
     color: ;
}
 .tarea{
     padding: 5px;
     margin: 5px;
     background: rgb(45,46,128);
     color: white;
     border-radius: 5px;
}
 .come-from-modal.left .modal-dialog, .come-from-modal.right .modal-dialog {
     position: fixed;
     margin: auto;
     width: 320px;
     height: 100%;
     -webkit-transform: translate3d(0%, 0, 0);
     -ms-transform: translate3d(0%, 0, 0);
     -o-transform: translate3d(0%, 0, 0);
     transform: translate3d(0%, 0, 0);
}
 .come-from-modal.left .modal-content, .come-from-modal.right .modal-content {
     height: 100%;
     overflow-y: auto;
     border-radius: 0px;
}
 .come-from-modal.left .modal-body, .come-from-modal.right .modal-body {
     padding: 15px 15px 80px;
}
 .come-from-modal.right.fade .modal-dialog {
     right: -320px;
     -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
     transition: opacity 0.3s linear, right 0.3s ease-out;
}
 .come-from-modal.right.fade.in .modal-dialog {
     right: 0;
}
table.table td, table.table th{
    max-width:600px;
}