/* Normalize
==================================== */
#chart {
  width: 100%;
 
}

.card__1 {
    border-radius: 1rem;
    box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 0px 33px rgb(0 0 0 / 11%);
    display: block;
    margin-bottom: 20px;
    position: relative;
    background: white;
    padding: 20px;
}

.card__1 h5 {
    text-transform: uppercase;
    font-size: 14px;
    color: #777;
}


*, *:after, *:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*:focus {
    outline: inherit !important;
}
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #cacaca;
}

::-webkit-scrollbar-thumb {
    width: 10px;
    background: #6E00FF;    
}
::selection {

  background: #3400ff;
  color: #fff;  
  text-shadow: none;

}

::-moz-selection {
  background: #3400ff;
  color: #fff;  
  text-shadow: none;

}



a, a:hover {
    text-decoration: none;
    color: inherit;
}

.pr0{
    padding-right: 0!important;
}

/* Typography
==================================== */

h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
}

ul {
    padding: 0;
    margin: 0;
}

ul li {
    list-style-type: none;
}

button, button:focus{
    outline: none;

    border: 0;
}


.cl-input {
    width: 100%;
    margin-bottom: 8px;
}

/*===================/
COLUMS
/*==================/
=======================*/

.cl-10 {
    -ms-flex: 0 0 10%;
    flex: 0 0 10%;
    max-width: 10%;
}
.cl-15 {
    -ms-flex: 0 0 15%;
    flex: 0 0 15%;
    max-width: 15%;
}
.cl-20 {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.cl-25 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.cl-30 {
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
}

.cl-33 {
    -ms-flex: 0 0 33.333%;
    flex: 0 0 33.333%;
    max-width: 33.333%;
}

.cl-35 {
    -ms-flex: 0 0 35%;
    flex: 0 0 35%;
    max-width: 35%;
}

.cl-40 {
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;

}

.cl-45 {
    -ms-flex: 0 0 45%;
    flex: 0 0 45%;
    max-width: 45%;

}

.cl-50 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.cl-55 {
    -ms-flex: 0 0 55%;
    flex: 0 0 55%;
    max-width: 55%;
}

.cl-60 {
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%;
}

.cl-65 {
    -ms-flex: 0 0 65%;
    flex: 0 0 65%;
    max-width: 65%;
}

.cl-70 {
    -ms-flex: 0 0 70%;
    flex: 0 0 70%;
    max-width: 70%;
}

.cl-75 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}

.cl-80 {
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%;
}

.cl-85 {
    -ms-flex: 0 0 85%;
    flex: 0 0 85%;
    max-width: 85%;
}

.cl-90 {
    -ms-flex: 0 0 90%;
    flex: 0 0 90%;
    max-width: 90%;
}
.cl-100 {
   -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}




/*===================/
CUSTOM ROWS ID
/*==================/
=======================*/

.row-cl {
    display: flex;
    flex-wrap: wrap;
}
.row-sb {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.row-sa {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.row-se {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.row-jc {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/*//////////////////
POPUP
///////////////*/

.open_popup .overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0000009e;
    z-index: 9999;
}
.popup_modal {
    position: fixed;
    top: 5%;
    margin: auto;
    background: white;
    width: 70%;
    right: 15%;
    z-index: 9999;
    border-radius: 15px;
    opacity: 0;
    visibility: hidden;
}
.popup_modal.active {
    opacity: 1;
    visibility: visible;
    transition: .4s;
    transform: translateY(10px);
}

.popup_modal.small {   
    width: 30%;
    right: 35%;    
}
.popup_modal.medium {
    width: 45%;
    right: 27.5%;
    overflow-y: auto;
    font-size: 90%;
}

/*/IFRAME/*/
.popup_modal iframe {

}


/*///////////////////
INPUTS FORM
///////////////////*/
.cl-input.three {
    width: 30%;
}

.row_form.row-sb {
    flex-direction: row;
}
.row_form .cl-input input, .row_form .cl-input select {
    width: 100%;
    border-radius: 5px;
    border: 1px solid #c1c1c1;
    padding: 6px 10px;
}
.cl-input textarea {
    width: 100%;
    border-radius: 5px;
    border: 1px solid #c1c1c1;
    padding: 6px 10px;
    min-height: 65px;
}
.cl-input label {
    display: block;
}

.row_form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding: 10px 30px 0;
}



.cl-input label {
    font-size: 11px;
    font-weight: 600!important;
    margin: 0;
    padding: 0 5px;
}

.bt_submit{
    border: 1px solid var(--main);
    border-radius: 20px;
    padding: 10px 50px;
    color: #ffffff;
    font-weight: 300;
    background: var(--main);
}
.p_close {
    position: absolute;
    right: 20px;
    background: #6e00ff;
    color: white;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #4200ff;
}
.select2-container .select2-selection--single {
    height: inherit;
    padding: 5px 0;

}


/*////////
AUTOCOMPLETE PLUGIN
//////////////*/

div#eac-container-autocomplete {
    position: absolute;
    top: 40px;
    background: white;
    width: 100%;
    z-index: 9;
}

div#eac-container-autocomplete ul li {
    padding: 5px 10px;
    cursor: pointer;
}

div#eac-container-autocomplete ul li:hover {
    background: #262626;
    color:white;
}

/*/////////////
TAB DENTRO DE POPUP
/////////////////*/
.menu_tab {
    margin-top: -20px;
}
.custom_tabs {
    display: flex;
    padding: 6px 20px;
}
.content_inputs {
    width: 100%;
}
.custom_tabs > li {
    background: white;
    border-radius: 3px;
    margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid var(--main);
    color: var(--main);
    cursor: pointer;
}

.custom_tabs > li.active {
    background: var(--main);
    color: white;
}

.row_tab .row_form {
    display: none;
}

.row_form.active {
    display: flex;
}

a.p_open {
    cursor: pointer;
}

a.p_open:hover {
    color: #323232;
}
.bt_insane {
    background: #4c3fb5;
    color: white;
    border: 0;
    padding: 10px 20px;
    margin: 20px 0 15px;
    display: block;
}

/*===========================================
=            GENERAL SYSTEM V1.0            =
===========================================*/

   
 .form-layout-footer {position: absolute;right: 70px;top: 50%;}


   a{
    color: inherit;
   }
   body {
       background-color: #F2F2F2;
       margin: 0;
       font-size: 14px;
       font-weight: 400;
       line-height: 1.5;
       color: #000;
       font-family: Poppins;
   }
   
   .row_custom {
    padding: 0 0 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid white;
}
   .content-page {
       margin-left: 130px;
       width: calc( 100% - 220px);
       padding-top: 50px;
       padding-bottom: 50px;
   }
   
   /*=====  End of GENERAL SYSTEM V1.0  ======*/
   
   
   /*===============================
   =            Buttons            =
   ===============================*/
   .btn-datepicker {
       background: white;
       border: 0;
       padding: 10px 20px;
       box-shadow: 0px 0px 4px #00000026;
       font-size: 13px;
       border-radius: 25px;
   }

   .bt_main {
    border: 1px solid var(--main);
    border-radius: 20px;
    padding: 10px 50px;
    color: var(--main);
    font-weight: 300;
    }
    .progress {
    height: 5px;
    }

   
   /*===============================
   =            Colors            =
   ===============================*/



   .bt_select.bg_1, .bt_select.bg_2, .bt_select.bg_4 {
    background: var(--main);
    }

    .bt_select.bg_5, .bt_select.bg_6, .bt_select.bg_7, .bt_select.bg_8 {
        background: black;
    }

    /*/Sistema Web /*/
    .bt_select.bg_3 {
    background: linear-gradient(70deg,#57b8e0,#5762e2,#be8ec6);
    }

   .bg_1{
    background: #cad2f9;
    color: #3716b7;
   }

   .bg_0 {
    background: #ff6363;
    color: #ffffff;
    }

   .bg_2{
       background: var(--red1);
       color: var(--red2);
   }

   .bg_3{
      background: var(--blue1);
      color: var(--blue2);
   }

   .bg_4{
      background: var(--yellow1);
      color: var(--yellow2);
   }

   .bg_5, .bg_6, .bg_7{
      background: var(--grey1);
      color: white;
   }

   .bg_insane {
    background: var(--deg-insane);
    }

   .yellow{
       background: var(--yellow1);
       color: var(--yellow2);
   }
   
   .blue{
       background: var(--blue1);
       color: var(--blue2);
   }
   
   .red{
       background: var(--red1);
       color: var(--red2);
   }
   
   .green{
       background: var(--green1);
       color: var(--green2);
   }


   .red2{
       background: var(--red2);      
   }

   .yellow2{
       background: var(--yellow2);
     
   }
    .green2{
       background: var(--green2);      
   } 


   /*=====  End of Buttons  ======*/
   
   
   
   
   
   /*===================================
   =            TABLE STYLE            =
   ===================================*/
   div.dataTables_wrapper div.dataTables_filter input::placeholder {
   
       color: #999;
   
   }
   .paginate_button a {
       padding: 15px 20px;
   }
   .page-item.active .page-link {
    z-index: 3;
    color: white;
    background-color: #4400ff;
    border-color: transparent;
   }
   
.page-item .page-link {
    position: relative;
    display: block;
    min-width: 30px;
    text-align: center;
    padding: 5px 10px;
    margin: 0 4px;
    outline: none;
    line-height: 1.25;
    color: #505050;
    background-color: #fff;
    border: 1px solid #dee2e6;
    box-shadow: none!important;
    border-radius: 5px;
}

.page-item:first-child .page-link, .page-item:last-child .page-link  {
    border: 0;

}
   div.dataTables_wrapper div.dataTables_filter input {
       margin-left: 0.5em;
       display: inline-block;
       width: auto;
       border-radius: 40px;
       padding: 22px 20px;
       border: 0;
       box-shadow: 0px 0px 9px #0000000d;
       margin-bottom: 10px;
       width: 270px;
   }
   div.dataTables_wrapper div.dataTables_filter label i {
       position: absolute;
       right: 30px;
       top: 15px;
       color: #b1b1b1;
   }
   .table-style {
       background: white;
       padding: 10px;
       border-radius: 15px;
       box-shadow: 0px 1px 11px #00000014;
   }
   table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
       display: none;
   }
   
   table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
       display: none;
   }
   
   
   a.links {
       color: var(--grey2);
   }
   
   .table td, .table th {
       padding: 5px 10px;
       vertical-align: top;
       border-top: 1px solid #dee2e6;
       font-size: 12px;
   }
   .table td, .table th {
       vertical-align: middle;
   }
   
   table.table-bordered.dataTable th, table.table-bordered.dataTable td {
       border-left-width: 0;
   }
   
   .card {
       border: 0;   
   }
   
   .table-striped tbody tr:nth-of-type(odd) {
       background-color: inherit;
   }
   .table-bordered td, .table-bordered th {
       border: 0;
   }
   .table-bordered {
       border: 0;
       border-bottom: 1px solid #dee2e6;
   }
   .table thead th {
border-bottom: 0;
    border: 0;
    text-transform: capitalize;
    font-size: 12px;
    letter-spacing: 0.5px;
    font-weight: 500;
   }
   
   /*/ Table  Prospectos/*/
   
  span.req_short {
    background: #fff;
    padding: 3px 10px;
    display: block;
    border-radius: 5px;
}

.bt_select2 {
    display: block;
    width: 100%;
    border-radius: 5px;
    padding: 5px 0;
    min-height: 30px;
     background-color: var(--yellow2);
     color:white;
     text-transform: capitalize;

}


.aproved{
    background-color: var(--green2);
    color:white;
}

.sent{
   background-color: var(--main);
   color:white; 
}

.trash, .declined{
   background-color: var(--red2);
   color:white; 
}



/*//////////
COLUMNAS
/////////////*/

a.names span {
    width: 140px;
    text-transform: capitalize;
    flex-flow: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
}



span.addFavorite:hover img {
    cursor: pointer;
    transform: scale(1.2);
    transition: .4s ease;
}
.bt_select {
    outline: none;
    border: 0;
    padding: 2px 3px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    font-size: 10px;
    color: white;
    padding: 5px 10px;
    background: var(--yellow2);
}





.bg_ {
    background: linear-gradient(45deg, #ffc107, #dc3545);
    color: white;
    text-transform: capitalize;
}

.bt_send:hover {
    background: #00ff90;
    border: 0;
    color: #ffffff;
}

.dropdown-menu > a{
    display: block;
    font-size: 15px;
    padding: 15px 10px;
    border-bottom: 1px solid #e1e1e1;
    width: 100%;
    text-align: left;
}

.status {
    padding: 0;
    width: 110px;
}

.status a:hover {
    background: #f1f1f1;
    color: #1c1c1c;
}


.bg_main{
    background: hsl(252deg 100% 51%);
}


/*///////////
TOOLTIP
///////////*/

.bt_select.bg_ span {
    position: absolute;
    left: 0;
    background: #f2f5f9;
    top: 30px;
    width: 340px;
    white-space: break-spaces;
    text-align: left;
    padding: 10px;
    opacity: 0;
    visibility:hidden;
    z-index: 9;
    color: black;
    border: 1px solid #c9c9c9;
    box-shadow: 0px 0px 12px #0000003b;
    text-transform: initial;
}

span.dropdown-toggle {
    position: relative;
}

.bt_select.bg_:hover span {
    opacity: 1;
    visibility: visible;
}


 
   
   img.av_p {
       width: 25px;
       border-radius: 50%;
   }
   small.medio-contact {
       color: var(--grey1);
       font-size: 9px;
       margin-top: 6px;
   }
   .f-hora {
       display: block;
       font-size: 10px;
   }
   .stars.favorite {
       color: #ffd540;
   }
   .stars.favorite:hover {
       color: silver;
   }
   i.fa.fa-ellipsis-v {
       color: #818181;
       font-size: 15px;
   }
   .stars {
       color: #c0c0c0;
   }
   
   .stars:hover {
       color: #ffc107;
   }
   
   
   span.addFavorite i {
       font-size: 18px;
       cursor: pointer;
       width: 40px;
       text-align: center;
   }
   .btn-dot {
       width: 16px;
       height: 16px;
       display: block;
       color: transparent;
       background: #a6a6a6;
       border-radius: 50%;
       margin: auto;
   }
   
   .btn-dot.red{
       background: var(--red2);
   }
   .btn-dot.green{
       background: var(--green2);
   }
   .btn-dot.yellow{
       background: var(--yellow2);
   }
   
   .dropdown-menu .btn-dot:hover {
       transform: translateY(-2px);
       opacity: 0.7;
       transition: 0.2s;
   }
   a.allReq {
       display: block;
       color: var(--grey2);
       background: whitesmoke;
       border-radius: 5px;
       padding: 2px 10px;
       font-size: 12px;
       line-height: 1.3;
   
   }
   /*=====  End of TABLE STYLE  ======*/
   
   .head-page {
    padding: 0 0 30px;
    border-bottom: 1px solid #d0d0d0;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
   }
   
   
   
   
   
   
   canvas#bg-canvas {
       position: absolute;
       z-index: 0;
   }
   /*/Bulding animation/*/
   
   #caption {
     padding-left: 50px;
     position: relative;
     margin: auto;
     height: 0px;
   }
   #building {
     display: flex;
     width: 350px;
     height: 100vh;
     margin: auto;
   }
   
   button.btn-estado.btn-estado1 {
       background: #ffbab4;
       color: #dd1b2d;
   }
   button:focus{
    outline: none;
   }
   .btn-estado {
       border: 0;
       outline: none;
       padding: 5px 10px;
       border-radius: 4px;
       font-size: 11px;
       font-weight: 400;
       color: #3a8fa2;
       background-color: #a3eeff;
       outline: none;
   }
   .btn-estado2 {
       background: var(--green2);
       color: #09c56e;
   }
   
   span.adserv {
       display: inline-block;
       font-size: 9px;
       background: var(--green2);
       color: white;
       border-radius: 4px;
       padding: 1px 4px;
   }
   #blocks {
     margin: auto;
   }
   
   .b {
       background: #d8d5ff;
       border: 3px solid #524390;
       width: 45px;
       height: 45px;
       border-radius: 5px;
       margin: 10px;
       position: relative;
       animation-duration: 1.8s;
       animation-iteration-count: infinite;
       animation-timing-function: linear;
   }
   #b1 {
     animation-name: b1;
   }
   #b2 {
     margin-left: 72.5px;
     animation-name: b2;
   }
   #b3 {
     margin-top: -60px;
     animation-name: b3;
   }
   #b4 {
     margin-left: 72.5px;
     animation-name: b4;
   }
   
   @keyframes b1 {
     0% {
       left: 0px;
       transform: rotate(0deg);
     }
     50% {
       left: 62.5px;
       bottom: 0px;
       transform: rotate(90deg);
     }
     100% {
       left: 62.5px;
       bottom: -61.25px;
       transform: rotate(90deg);
     }
   }
   @keyframes b2 {
     50% {
       bottom: 0px;
     }
     100% {
       bottom: -61.25px;
     }
   }
   @keyframes b3 {
     50% {
       top: 0px;
     }
     100% {
       top: -61.25px;
     }
   }
   @keyframes b4 {
     0% {
       left: 0px;
       transform: rotate(0deg);
     }
     50% {
       left: -62.5px;
       top: 0px;
       transform: rotate(90deg);
     }
     100% {
       left: -62.5px;
       top: -61.25px;
       transform: rotate(90deg);
     }
   }
   
   @media (max-width: 400px) {
     #building {
       width: 100%;
     }
     #caption {
       display: none;
     }
   }
   a.links > small {
       width: 140px;
       overflow: hidden;
       text-overflow: ellipsis;
       display: block;
       white-space: nowrap;
   }
   /*/Opciones /*/
   
   .row-flex {
       display: flex;
       width: 100%;
       justify-content: space-between;
   }
   
   .item-col {
       width: 23%;
   }

   .small-box h3 {
    font-size: 25px;    
    }

    .small-box h4 {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 10px;
    }

    .three-column .item-col {
            width: 30%;
            height: 100%;
            margin-right: 1.6%;
           
    }

    .progress-box.style-3 {
        font-weight: 500;
        padding: 5px 10px;
    }
   
   .titulo-popup{
       width: 100%;
       text-align: center;
       display: block;
       font-size: 14px;
       text-transform: uppercase;
       letter-spacing: 2px;
       color: #404040;
       font-weight: 600;
   }
   img.nueva-icon {
       width: 110px;
   }
   .info-user {
    text-transform: capitalize;
}
   .popup-header .close {
       position: absolute;
       right: 30px;
   }
   .popup-header{
       display: -ms-flexbox;
       display: flex;
       -ms-flex-align: start;
       align-items: flex-start;
       -ms-flex-pack: justify;
       justify-content: space-between;
       padding: 1rem;
       border-bottom: 1px solid #e9ecef;
       border-top-left-radius: calc(.3rem - 1px);
       border-top-right-radius: calc(.3rem - 1px);
       flex-wrap: wrap;
       justify-content: center;
   }


/*///////////
NOTIFICACIONES
//////////////*/

.notification-bar a { 
    font-size: 16px;
    justify-content: space-between;
}

.notification-bar a small {
    width: 95%;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.notification-bar a span {
    width: 100%;
    font-size: 12px;   
    align-items: center;
    color: #adadad;
    display: flex;
    margin-top: 5px;
}

.notification-bar span i {
    font-size: 10px;

}


/*///////////////////////
MENU HORIZONTAL
/////////////////////*/

/*/PANEL USUARIO/*/

.user-menu a {
    display: block;
    width: 100%;
    padding: 10px 10px;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}
ul.box_notifications > li:last-child {
    margin-left: 30px;
}
.user-menu a:hover {
    background: #f5f5f5;
}


.user-menu {padding: 0;margin-top: 5px;}

  .box_notifications {
    display: flex;
    justify-content: flex-end;
}

.menu_horizontal {
    background: white;
    width: 100%;
    top: 0;
    box-shadow: 0px 0px 16px #0000000a;
    padding: 5px 25px;
    border-bottom: 1px solid #e1e1e1;
}

.menu_horizontal  .nav-link {
    text-transform: capitalize;
}

ul.box_notifications i.fa-angle-down {
    font-size: 10px;
}
.content_page {
    padding: 10px;
}
.menu_h-left {
    display: flex;
    position: relative;
}


.box-buscador input {
padding: 7px 10px;
    color: #000;
    border: 1px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(70deg,#57b8e0,#5762e2,#be8ec6);
    background: 0 0;
    width: 330px;
}

.box-buscador input:focus {
    color: #000;
    border: 1px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(70deg,#e91e63,#5762e2,#00bcd4);
    background: 0 0;
    overflow: hidden;
    border-radius: 5px;
}

.box-buscador input::placeholder {font-size: 12px;}     
.firts-n {
    width: 25px;
    height: 25px;
    background: black;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    vertical-align: bottom;
    margin-right: 5px;
    text-transform: uppercase;
}
ul.box_notifications i {
    font-size: 20px;
}


/*/Box resultados buscador/*/

.box-results {
    position: absolute;
    background: white;
    min-width: 330px;
    z-index: 2;
    top: 40px;
    box-shadow: 0px 4px 15px #0000001a;
    padding: 15px;
    display: none;
}

.box-results.active {
    display: block;
}

.box-results h4 {
    font-size: 14px;
    margin-bottom: 5px;
}

.r1 {
    margin-bottom: 15px;
}

.box-results ul li a {
    display: block;
    padding: 3px 0;
}

.box-results ul li a:hover {
    color: #3f51b5;
}

.box-buscador {
    position: relative;
}

.cerrar-result {
    position: absolute;
    background: transparent;
    border: 0;
    top: 7px;
    right: 7px;
    color: #b3b6c9;
}



/*/FIN MENU HORIZONTAL/*/





/*///////////
MENU HAMBURGUESA MOBILE
///////////*/

        .main-head.stick {
            position: fixed;
            background: var(--main);
            z-index: 99;
            box-shadow: 0px 0px 18px #00000000;
        }
        .stick .box-new {
            display: none;
        }
        .open_menu .overlay {
            visibility: visible;
            opacity: 1;
            transition: 0.4s ease;
        }
        @-webkit-keyframes slideInUp {
          from {
            -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
            visibility: visible;
          }

          100% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
          }
        }

        @keyframes slideInUp {
          from {
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
            visibility: visible;
          }

          100% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
          }
        }

        .main-head.stick {
          -webkit-animation-name: slideInUp;
          animation-name: slideInUp;
              -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .stick .head_1 img {
            width: 150px;
            padding: 5px 0;
        }

        ul.bt_menu{
            width: 30px;
            height: 30px;
            cursor: pointer;
            position: relative;
        }
        ul.bt_menu li{
            list-style: none;
            width: 100%;
            height: 1px;
            background: black;
            position: absolute;
            left: 0;
            transform: translateY(-50%);
            transition: .9s;
        }
        ul.bt_menu li:nth-of-type(1){
            top: 20%;
        }
        ul.bt_menu li:nth-of-type(2){
            top: 50%;
            width: 70%;
        }
        ul.bt_menu li:nth-of-type(3){
            top: 80%;
        }
        ul.bt_menu.active li:nth-of-type(1){
            top: 50%;
            transform: translateY(-50%) rotate(45deg) rotateY(180deg);
        }
        ul.bt_menu.active li:nth-of-type(2){
            left: -300%;
            opacity: 0;
        }
        ul.bt_menu.active li:nth-of-type(3){
            top: 50%;
            transform: translateY(-50%) rotate(-45deg) rotateY(180deg);
        }

        ul.bt_menu li:last-child{
            width: 100%;
            height: auto;
            transform: none;
            top: 100%;
            font-size: 10px;
            text-align: center;
            transition: .9s;
        }
        ul.bt_menu li:last-child::before,ul.bt_menu li:last-child::after{
            position: absolute;
            top: 0;  left: 0;
            width: 100%;  
            transition: .9s;
        }
        ul.bt_menu li:last-child::before{
            content: '';
            color: #fff;
            transform: rotateY(0);
            transition-delay: .5s;    
            
        }
        ul.bt_menu li:last-child::after{
            content: '';
            color: #ffffff;
            transform: rotateY(
        90deg);
            transition-delay: 0s;
        }
        ul.bt_menu.active li:last-child::before{
            transform: rotateY(90deg);
            transition-delay: 0s;
        }
        ul.bt_menu.active li:last-child::after{
            transform: rotateY(0deg);
            transition-delay: .5s;
        }

        .box-hamburger {
            position: relative;
        
            border-left: 1px solid #ffffff3d;
         
        }


        .open_menu ul.nav-box {
            visibility: visible;
            opacity: 1;
            transition: 0.3s ease;
            
        }

        .box-ham {margin-left: 30px;}

        /*/FIN MENU HAMB/*/



   /*/ Header usuario - notificaciones/*/
   
   .menu-usuario > a {
       display: flex;
       width: 290px;
   
       align-items: center;
       color: #000000;
       padding: 0 0 0 15px;
       border-left: 1px solid #e5e5e5;
   }
   
   ul.box-menu-2 {
       display: flex;
       justify-content: flex-end;
       list-style: none;
       margin: 0;
       padding: 15px 0;
   }
   
   .box-menu-name span {
       display: block;
   }
   
   span.nombre {
       font-weight: 600;
   }
   
   span.cargo {
       font-size: 12px;
   }
   
   .notification i {
       font-size: 25px;
       color: #858585;
   }
   
   
   /*/ Header Oficial /*/
   
   body:not(.sidebar-mini-md) .content-wrapper, body:not(.sidebar-mini-md) .main-footer, body:not(.sidebar-mini-md) .main-header {
       transition: margin-left .3s ease-in-out;
       margin-left: 100px;
   }
   .content-wrapper {
       background: #f2f2f3;
   }
   .menu-container {
       display: flex;
       height: 100%;
       justify-content: space-between;
       flex-direction: column;
       flex-wrap: wrap;
       align-items: center;
       padding: 20px 0;
   }
   
   header.menu_system {
    position: fixed;
    height: 100%;
    width: 15%;
    top: 0;
    z-index: 999;
    background: #353748;
    overflow: hidden;
    color: white;
   }
   
   ul.menu-vertical {
       list-style: none;
       margin: 0px;
       width: 100%;
       display: flex;
       flex-direction: column;
       overflow-y: auto;
   }
   

   
   ul.menu-vertical > li:first-child a {
   }
   
   .box-icon {
       width: 30px;
       margin: auto;
       height: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 10px;
   }
   
   
   
   ul.menu-vertical > li > a span {
       margin-top: 6px;
       color: white;
   }
   
   ul.menu-vertical a:hover .box-icon {
       transition: all 0.4s ease;
       transform: scale(1.2);
   }
   

   .menu-logo svg {
       width: 50px;
       fill: rgb(255 255 255);
       padding: 10px;
       border-radius: 6px;
   }
   
   .menu-logo {
       text-align: center;
       width: 100%;
       padding: 20px 0;
   }


.menu-navigation::-webkit-scrollbar {
    width: 3px;
}

.menu-navigation::-webkit-scrollbar-track {
    background: transparent; 
}
.menu-navigation:hover::-webkit-scrollbar-track {
    background: #ffffffd1; 
}
.menu-navigation:hover::-webkit-scrollbar-thumb {
    width: 1px;
    background: #360daa;    
}
.menu-navigation::-webkit-scrollbar-thumb {
    width: 1px;
    background: transparent;    
}
   .menu-navigation {
       height: 400px;
       width: 100%;
       overflow-y: auto;
   }
   ul.menu-vertical > li > a svg.fill {
       width: 27px;
       height: auto;
       stroke-width: 2px;
       stroke: #333;
       fill: #333;
   }
   .menu-top {height: 25%;}

.avatar-user {
    background: #78afff4a;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 0 auto 15px;
}

ul.menu-vertical svg, .menu-vertical img {
    max-width: 19px;
    max-height: 25px;
 
}
ul.sub-menu > li {
    margin-top: 10px;
}
.menu-vertical li.active {
    position: relative;
}

.menu-vertical li.active:after {content: '';width: 30px;height: 30px;background: #f2f2f2;border-radius: 50%;position: absolute;right: -16px;top: 0;}

ul.menu-vertical > li.active > a span {
    color: #ffffff;
}

.menu-bottom svg {
    width: 30px;
    margin-right: 2px;
}

.menu-bottom span {
    text-transform: uppercase;
}


/*/////////
HEADER
/////////*/
.main__menu {
    position: fixed;
    top: 80px;
    max-height: 80%;
    background: var(--main);
    background: #5D2AED;
    border-radius: 50px;
    font-size: 11px;
    left: 15px;
    padding: 50px 7px;
    display: grid;
    place-content: center;
}
   ul.menu-vertical > li > a {
    color: #ffffffcf;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
   }

.box-logo {
    padding: 5px;
    margin-right: 30px;
}

.box-logo svg {width: 20px;height: auto;}

/*/////
PAGINAS
//////*/
.page_origen {
    padding-left: 110px;
}

/*//////
SUB-MENU
////////*/
ul.sub-menu {
   
}


   /* Tablas */
   .table td, .table th {
       outline: none;
   }
   table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting {
    padding-right: 10px;
}
   .f-hide {
       position: absolute;
       visibility: hidden;
   }
   .dropdown-toggle {
       white-space: nowrap;
       display: block;
   }
   
   
   .progress-box {
       display: flex;
       justify-content: space-between;
   }
   
   
   textarea#editarRequerimiento {
       height: 130px;
   }
   
   
   .btn-black:focus {
       color: inherit;
       background:inherit;
   }
   
   /*/buttons/*/
   .btn-contactado {
       background: #ff8d57;
       color: #a73a28;
   }
   .btn-success {
       color: #28a745;
       background-color: #c4ffd1;
       border-color: #28a745;
       box-shadow: none;
   }
   .btn-noco {
       background: #ffbfc6;
       color: #f52424;
   }
   
   .btn-blue {
       background: #ffdd63;
       color: #ca7000;
   }
   
   .btn-danger {
       background: #ff5252;
       color: #fffafa;
   }
   .btn-info {
       color: #00bcd4;
       background-color: #a8f5ff;
       border-color: transparent;
   }
   
   
   
   .bg-estado1 {
       background: #09c56e;
       color: white;
   }
   
   .bg-estado2 {
       background: #f43636;
       color: white;
   }
   
   
   /*===================/*
   FORMULARIOS PERSONALIZADOS 1             
   =====================*/
   
   .form_box {
       margin-bottom: 10px;
   }
   
   .form_box input, .form_box select {
       width: 70%;
       display: block;
       margin: auto;
   }
   
   /*===================/*
   VENTAS             
   =====================*/
   .box_short {
       display: block;
       width: 120px;
       font-size: 12px;
   }
   
   .pagos_p span:last-child {
    font-size: 80%;
    color: #898989;
    }

    .pagos_p span {
    display: block;
    }
   
   
   /*/Background DEG /*/
   
   .bg-blue-d{
      background: linear-gradient(45deg, #00bcd4, #005497); 
   }
   
   .bg-green-h {
       background-color: #09c56e;
   }
   
   .bg-red-deg {
       background: linear-gradient(45deg, #f44336, #e91e63);
   }
   /*/Box/*/
   .bg-white-blue {
       background: white;
       color: #121212;
   }
   .progress-box.style-2 {
    font-size: 10px;
    padding: 0px 5px 5px;
    font-weight: 500;
    color: #585858;
   }
   p.subtitulo {
       font-size: 14px;
       font-weight: 600;
       margin: 0;
   }
   .small-box.bg-white-blue .icon i {
       color: #2953e8;
       font-size: 60px;
   }
   /*  */
   
   
   .fix-pos{
       position: fixed;
       bottom: 0;
       right: 0;
       z-index: 9999;
   }
   small.monto {
       font-size: 13px;
   }
   
   .box_notifications .dropdown-menu {
    min-width: 280px;
    height: 280px;
    overflow-y: auto;
    }

   .dropdown-menu {   
       min-width: 12rem;   
   }
   
   
   .footer-studioh {
       position: absolute;
       bottom: 0;
       left: 0;
       color: white;
       font-size: 11px;
       text-align: center;
       width: 100%;
   }
   
   .footer-studioh span {
       display: block;
       width: 100%;
       text-align: center;
   }
   .menu-avatar{
      width: 30px;
       height: 30px;
       margin-right: 20px;
   }
   .btn-black {
       display: inline-block;
       font-weight: 400;
       color: #212529;
       text-align: center;
       vertical-align: middle;
       cursor: pointer;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
       background-color: transparent;
       border: 1px solid transparent;
       padding: 0px 5px;
       width: 25px;
       font-size: 15px;
       line-height: 1;}
   
       .input-title {
       display: block;
       width: auto;
       position: absolute;
       font-weight: 700;
       font-size: 12px;
       padding: 0 10px;
       background: white;
       top: -7px;
       z-index: 9;
       left: 40px;
   }
   .modal-dialog.edit-sh {
       min-width: 60%;
   }
   
   .edit-sh .modal-content {
       background-color: #eeeeee;    
   }
   
   /*/MENU.PHP/*/
   .logo svg {
       fill: white;
       width: 35px;
   }
   
   .image.logo {
       padding-left: 25px;
   }
   
   [class*=sidebar-dark-] {
       background-color: #293bf0;
   }
   .nav-sidebar .nav-link > p {padding: 9px 0;}
   
   .nav-sidebar .nav-treeview > li > a > p {
       padding: 7px 20px;
       padding-left: 15px;
       border-left: 1px dotted rgba(147, 159, 173, 0.24);
   }
   
   .nav-sidebar .nav-item>.nav-link {
       padding: 0px 20px;
   }
   
   .nav-sidebar>.nav-item .nav-icon.fas {
       color: #fff;
   }
   
   .nav-sidebar .nav-item>.nav-link {
       margin-bottom: 0;
   }
   
   /*/LOGIN PAGE/*/
   
   .error-login {
       position: absolute;
       top: 20px;
       left: 20px;
       transition: 0.4s;
   }
   .bg-login-sh {
       height: 100vh;
       background: #efefef;
       overflow: hidden;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-wrap: wrap;
       /* background: conic-gradient(    #2E1638,    #50253F,    #463257,    #5A6497,    #6A6EA5,    #3E1D31,    #2F1638); */
   }

   .bg_login {
    display: flex;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    font-size: 13px;
    }


   .box-login {
    padding: 30px 40px;
    border-radius: 5px;
    background: #ffffff;
    position: relative;
    box-shadow: 0px 0px 13px #0000000d;
    width: 350px;
    border: 1px solid #d3d3d3;
   }
   .login-p1 svg {
       fill: #020202;
       width: 60px;
       display: inline-block;
   }
   
   .login-p1 {
       text-align: center;
   }
   
   .login-p1 p {
       color: #999898;
       font-size: 17px;
       margin: 20px 0 0px;
   }
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
       -webkit-transition-delay: 9999s;
       transition-delay: 9999s;
       color:#333;
    }
.input-row img {
    position: absolute;
    left: 10px;
    bottom: 20px;
}


   form.box-login input {
       display: block;
       background: transparent;
       border: 1px solid #888;
       outline: none;
       padding-left: 45px;
       font-weight: 500;
       width: 100%;
       position: relative;
       margin: 30px auto 0;
       z-index: 2;
       width: 100%;
       border-radius: 3px;
       color: #333;
       padding-top: 1.625rem;
       padding-bottom: 0.625rem;
   }
   form.box-login h1 {
    color: white;
       font-size: 20px;
   }
   
   .input-row {
       position: relative;
       padding: 15px 0px 0px;
       width: 100%;
       margin: auto;
   }
   
   .input-row label {
       position: absolute;
       bottom: 10px;
       left: 45px;
       z-index: 0;
       font-weight: 300!important;
       transition: 0.2s ease;
   }
   
   .input-row:before {content: '';width: 100%;position: absolute;bottom: 0;background: #ffffff;height: 1px;transition: 0.4s cubic-bezier(0.97, 0.3, 0.58, 1);}
   
   .input-row.has-value:after {content: '';width: 100%;transition: 0.4s cubic-bezier(0.97, 0.3, 0.58, 1);}
   
   .input-row:after {content: '';width: 0;position: absolute;background: #ffffff;height: 2px;bottom: 0;transition: 0.4s cubic-bezier(0.97, 0.3, 0.58, 1);}
   
   
   
   button.btn.btn-login {
       border: 0;
       padding: 10px 40px;
       color: #FFFFFE;
       background: linear-gradient(45deg,#5cc3ee 0,#5d91ef 29%,#5e5ef0 50%,#947be1 73%,#e17890 100%);
       width: 100%;
       margin: 40px auto 0;
       display: block;
       border-radius: 3px;
   }
   button.btn.btn-login:hover {
       
   }
   .has-value.input-row label {
       bottom: 23px;
       font-size: 10px;
       color: #000000;
       left: 45px;
   }
   /*/MODAL/*/
   
   .modal.fade.show {
       background: #00000094;
   }
   
   .input-group-addon {
       padding: 5px 7px;
       border: 1px solid #dbe5ee;
       background: #dbe5ee;
   }
   
   .modal-open .mdk-header-layout > .mdk-header{
       z-index: 0;
   }
   
   
   
   /*/Botones/*/
   td .dropdown-toggle::after {
       display:none;
   }
   
.bt{
       display: inline-block;
       font-weight: 300;
       text-align: center;
       vertical-align: middle;
       cursor: pointer;
       -webkit-user-select: none;
       -moz-user-select: none;    
       -ms-user-select: none;
       user-select: none;
       border: 1px solid transparent;
       line-height: 1.5;
       border-radius: .25rem;
       transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
       padding: 4px 10px;
       font-size: .70rem;
       line-height: 1.5;
       border-radius: .15rem; 
}

   .btn-option {
       display: block;
       font-weight: 300;
       text-align: center;
       vertical-align: middle;
       cursor: pointer;
       -webkit-user-select: none;
       -moz-user-select: none;
       width: 100%;
       -ms-user-select: none;
       user-select: none;
       border: 1px solid transparent;
       line-height: 1.5;
       border-radius: .25rem;
       transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
       padding: 4px 10px;
       font-size: .75rem;
       line-height: 1.5;
       border-radius: .15rem;
   }
   
   
   .btn-verde3 {
       color: #fff;
       background-color: #34e481;
       border-color: #28a745;
       box-shadow: none;
   }
   
   .btn-option:focus {
       outline: none;
   }
   /*///////////
   ANIMACION CHECK
   ////////////////*/ 
    .ac-custom ul,
    .ac-custom ol {
        list-style: none;
        padding: 0;
        margin: 0 auto;
        max-width: 800px;
    }

    .ac-custom li {
        margin: 0 auto;
        padding: 0 0;
        position: relative;
        border: 1.5px solid #a9a9a9;
        height: 20px;
        width: 20px;
        display: flex;
        align-items: center;
    }

    .ac-custom label {
        display: inline-block;
        position: relative;
        font-size: 2em;
        padding: 0 0 0 80px;
        vertical-align: top;
        color: rgba(0,0,0,0.2);
        cursor: pointer;
        -webkit-transition: color 0.3s;
        transition: color 0.3s;
    }

    .ac-custom input[type="checkbox"],
    .ac-custom input[type="radio"],
    .ac-custom label::before {
        width: 20px;
        height: 30px;
        top: 90%;
        left: 0;
        margin-top: -25px;
        position: absolute;
        cursor: pointer;
    }

    .ac-custom input[type="checkbox"],
    .ac-custom input[type="radio"] {
        opacity: 0;
        -webkit-appearance: none;
        display: inline-block;
        vertical-align: middle;
        z-index: 100;
    }

    .ac-custom label::before {
        content: '';
        border: 2px solid #000000;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }

    .ac-radio label::before {
        border-radius: 50%;
    }

    .ac-custom input[type="checkbox"]:checked + label,
    .ac-custom input[type="radio"]:checked + label {
        color: #fff;
    } 

    .ac-custom input[type="checkbox"]:checked + label::before,
    .ac-custom input[type="radio"]:checked + label::before {
        opacity: 0.8;
    }

    /* General SVG and path styles */

    .ac-custom svg {
        position: absolute;
        width: 15px;
        height: 15px;
        top: 0px;
        left: 0px;
        pointer-events: none;
    }

    .ac-custom svg path {
        stroke: #35cf70;
        stroke-width: 13px;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

    /*////////////
    ESTILO GENERAL
    /////////////*/
    .titulo-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 10px 0 15px;
    }
    .top_page {
    margin-bottom: 30px;
}
    .titulo-card h4 {
        font-size: 16px;
        font-weight: 700;
      
        display: inline-block;
    }
        span.bt_new {
        background: #ffc107;
        font-size: 10px;
        color: #ffffff;
        font-weight: 500;
        display: block;
        text-align: center;
        width: fit-content;
        padding: 1px 5px;
        margin-top: 3px;
        border-radius: 3px;
    }

    span.bt_progress {
        font-size: 10px;
        display: block;
        margin-top: 3px;
    }


/*/////////
TRAER DATOS DESDE AJAX
/////////////////*/

.selec_dato {
    display: block;
    padding: 5px 10px;
    margin: 0px 0px 10px;
    background: white;
    border: 1px solid #888;
}


/*/////////////
PROSPECTOS - ADS - EMPRESA COLUMNA
///////////////*/




    .brands {
        display: flex;
    }

    .brands > * {
        width: 20px;
        height: 20px;
        color: white;
        border-radius: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        font-size: 8px;
    }

    .brands > div > img {
        width: 10px;
    }

    .brands > div:first-child {
        margin-right: 5px;
    }


    .studioh {
        background-color: #111;
    }

    .insane {
        background: linear-gradient(181deg, #7309FF, #49228E, #2407EE);
    }

    .ads {
        background: var(--main);
    }

    .rc {
        background: #ff9800;
    }

    /*////////////
    TAREA SINGLE
    ////////////////*/
    ul.list-cliente i {
    color: #ffcf40;
    font-size: 15px;
    margin-right: 5px;
    }

    ul.list-cliente a {
        font-size: 12px;
        color: #484848;
        display: block;
        padding: 2px 5px;
    }

    ul.list-cliente a:hover {
        background: #f0eeff;
    }

    ul.list-cliente i.fa-file-word {
        color: #007bff;
    }


    /*///////////
    BARRA DE PROGRESO
    ////////////////*/

    .bar_deadline {
    position: relative;
    }

    .bar_deadline > span {}

    .bar_row {
        position: relative;
        height: 4px;
        background: #353748;
        margin-top: 2px;
    }

    .bar_row > span {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        display: block;
        max-width: 100%;
        transition: width .4s ease;
    }
    
   /*///////////
   MODULO TAREAS Y PROYECTOS
   ////////////////////////////*/

   .popup_modal iframe {
    width: 100%!important;
    height: 500px!important;
    }


   .titulo-area h2 {
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 30px;
    line-height: 1;
    }

   .titulo-card {
    display: flex;
    align-items: center;
    padding: 5px 0;
    }

    .box_proyect-s {
        margin-left: 20px;
        display: flex;
    }

    .box_proyect-s span {
        width: 25px;
        display: flex;
        height: 25px;
        align-items: center;
        justify-content: center;
        background: #e7e7e7;
        margin: 0 5px;
        border-radius: 50%;
        font-size: 10px;
        font-weight: 600;
        color: #979797;
    }

    .box_proyect-s span.complete-s {
        background: var(--green2);
        color: white;
    }
   #proyectos .tablas {
    border-spacing: 0 8px;
    }

    .progress {    
    background-color: #b6bbd7;    
    }
    .days-ago {
    display: block;
    font-size: 8px;
    color: #b5b5b5;
    letter-spacing: 0.5px;
    }
    #proyectos tr {
        border-radius: 6px;
        background: #F8F8F8;
        margin: 0px 0;
    }
    
    .edit_text:hover, .edit_text:focus {
        background: #fff;
    }
    .edit_text {
        display: block;
        padding: 5px 5px;
        cursor: text;
        font-size: 10px;
    }


   .dropdown-menu.req_corto > a {
    display: block;
    padding: 5px 10px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 13px;
    }

    .dropdown-menu.req_corto > button i {
    width: 20px;
    }
    .dropdown-menu.req_corto > a:hover {
        color: black;
        background: #f8f7ff;
    }
    .dropdown-menu > button {
    display: block;
    padding: 5px 10px;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    font-size: 13px;
    width: 100%;
    background: transparent;
    text-align: left;
    }

    .dropdown-menu.req_corto {
        padding: 0;
        min-width: 110px;
    }

    .dropdown-menu.req_corto > a:hover {
        color: black;
        background: #f8f7ff;
    }

    button.bt_select.bg_1.bg-asig {
    background: #ff9800;
    }
    
    .bt_small {
    display: inline-block;
    
    min-width: 40px;
    text-align: center;
    border-radius: 3px;
    padding: 2px 0;
    }

    td.relative {
    position: relative;
}

small.percent {
    position: absolute;
    right: 13px;
    opacity: 0;
}


.indicators {
    display: flex;
    
}

.bl_proyect {
    margin-bottom: 30px;
    width: 100%;
}
.titulo-area span {
    margin-top: 7px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
}
.box-kpi {
    padding: 10px 10px;
    background: white;
    box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
    min-width: 160px;
    margin-right: 20px;

}
.card__kpi-1 i {
    font-size: 25px;
}
.box-kpi h5 {
    font-size: 12px;
    margin-bottom: 15px;
}

.box-kpi span {
    display: block;
    font-size: 13px;
}

.box-kpi span b {
    font-size: 17px;
}














.dias-r span {
    display: block;
    font-size: 12px;
    margin-bottom: 4px;
    text-align: center;
}
div#tachadas thead tr {
    background: #F0EEFF;
}
div#tachadas td {
    text-decoration: line-through;
    color: #8b8b8b;
    padding: 3px 10px;
}
div#tachadas tr {
    border-radius: 6px;
    background: #F8F8F8;
    margin: 5px 0;
}
div#tachadas>:not(caption)>* {
    border-width: 1px 0;
}

div#tachadas table {
    border-collapse: separate;
    border-spacing: 0 8px;
}

.tareas thead tr {
    background: #f0eeff;
}

#tachadas .ac-custom.ac-checkbox.ac-checkmark {
    opacity: 0;
    visibility: hidden;
    display: none;
}
.tareas tr {
    border-radius: 6px;
    background: #F8F8F8;
    margin: 0px 0;

}

table.tareas  {
    border-collapse: separate;
    border-spacing: 0 8px;
}

.mis-tareas_proyectos tr td:nth-child(3), .mis-tareas_proyectos tr th:nth-child(3) {
    display: none;
}

/*////////////////
BOX INDICATOR
///////////////*/

.card__kpi-1 {
    border-radius: 1rem;
    box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 0px 33px rgb(0 0 0 / 11%);
    display: block;
    margin-bottom: 20px;
    position: relative;
    background: white;
    padding: 20px;
}

.card__kpi-1 h5 {
    text-transform: uppercase;
    font-size: 14px;
    color: #777;
}

.big_text {
    font-size: 35px;
    font-weight: 700;
    margin-top: 20px;
}

.line-progress {
    position: relative;
    margin-bottom: 30px;
}

.line-progress:before {
    content: '';
    height: 1px;
    width: 100%;
    background: lightgrey;
    position: absolute;
}

.data__kpi {
    padding: 30px 0 0;
}

span.percent {
    position: absolute;
    background: white;
    box-shadow: 0 0 25px #00000033;
    border-radius: 15px;
    text-align: center;
    color: #777;
    top: -15px;
    padding: 5px 10px;
}

.goal {
    font-weight: 700;
    font-size: 14px;
    margin-top: 10px;
}

.main-color{
    background: var(--main);
}

/*/EXCLUSIVO PARA "MIS TAREAS"/*/

.tareas .mis_tareas_1 tr {
    border-radius: 6px;
    background: #ff9d9d21;
    margin: 0px 0;
    
}

.tareas .mis_tareas_1  thead tr {
    background: #cad2f9;
}
span.bt_dead {
    background: #ffd1d1;
    color: red;
    font-weight: 600;
    border-radius: 3px;
    padding: 2px;
    margin-right: 5px;
}
/*///////////////////
ESTILO TABLA BORDER SPACING
//////////////////////////*/

.tabla-fill {
    padding: 5px 10px;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
    font-size: 12px;
}

table.tabla-fill {
    border-collapse: separate;
    border-spacing: 0 8px;
  
}

table.tabla-fill td{  
    padding: 5px 20px 5px 5px;
}

.tabla-fill thead tr {
    background: #f0eeff;
}

.tabla-fill tr {
    border-radius: 6px;
    background: #F8F8F8;
    margin: 0px 0;
}
.tabla-fill tr:hover {
    background: #e5e5e5;
}
.bt_xs {
    display: inline-block;
    padding: 5px 10px;
    border: 0;
    text-transform: capitalize;
    font-size: 75%;
    outline: none;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.av_letra {
  
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 500;
    color: white;
    font-size: 10px;
}

.color_G{
    background: #fd7e14;
}

.color_T{
    background: #3500ff;
}
.color_D{
    background: #080808;
}

.color_P{
    background: #e83e8c;
}

.color_H{
    background: #3500ff;
}

.bt_1 {
    border: 0;
    outline: none;
    background: linear-gradient(179deg, #3300ff, #6e00ff);
    padding: 8px 20px;
    display: flex;
    margin-top: 15px;
    border-radius: 5px;
    align-items: center;
    color: #ffffff;
    font-size: 11px;
}

button.bt_1 i {
    margin-right: 7px;
    border-radius: 50%;
    border: 1px solid;
    padding: 3px;
    font-size: 7px;
}

.bt_1:hover {
    background: linear-gradient(179deg, #6500ff, #3c00ff);
}

.bt_add {
    border: 0;
    outline: none;
    background: transparent;
    padding: 5px 20px;
    display: flex;
    margin-top: 15px;
    border-radius: 5px;
    align-items: center;
    color: #282828;
    font-size: 11px;
}

.bt_add i {
    font-size: 10px;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    border: 1px solid black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
}
.nombre_empresa {
    font-size: 10px;
    white-space: nowrap;
    width: 90px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    padding: 2px 5px;
    font-weight: 500;
    color: black;
    border-left: 3px solid;
    font-weight: 600;
    display: block;
}

b.add-coment {
    display: block;
    border-bottom: 1px solid #e1e1e1;
    font-weight: 300;
    color: #525252;
}
.badge.bt_change {
    border: 0;
    background: #e5e5e5;
}

.xs-flag {
    border: 0;
    background: transparent;
    border-radius: 3px;
}

.xs-flag i {
    color: #adadad;
}

/*///////////////
STEP - 
///////////////*/
.step{
    display: none;
}

.step.active{
    display: block;
}

/*//////////////
SWITCH EFFECT 
////////////////*/
#4caf30h-label {
  cursor: pointer;
}
.switch .switch-input {
  appearance: none;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  box-shadow: inset 0 0 0 1px #c9c9c9;
  background-color: #e8e8e8;
  width: 3rem;
  min-width: 3rem;
  padding: 0.125rem;
  border-radius: 3rem;
  cursor: pointer;
  transition: background-color 0.75s ease, box-shadow 0.35s ease-in;
}
.switch .switch-input:before {
  position: relative;
  content: "";
  display: inline-block;
  border-radius: 1rem;
  height: 1.5rem;
  width: 1.5rem;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.32);
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0);
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.175);
}
.switch .switch-input:active:not(:disabled):before {
  width: 1.75rem;
}
.switch .switch-input:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1rem #ffffff;
}
.switch .switch-input:focus, .switch .switch-input:focus-within {
  box-shadow: 0 0 0 0.125rem #5d88ef;
  outline: none;
}
.switch .switch-input:focus:before, .switch .switch-input:focus-within:before {
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.4);
}
.switch .switch-input:checked {
  background: linear-gradient(45deg,#5cc3ee 0,#5d91ef 29%,#5e5ef0 50%,#947be1 73%,#ffa2f8 100%);
  box-shadow: inset 0 0 0 1px #5d88ef;
}
.switch .switch-input:checked:before {
  transform: translate3d(calc(100% - 0.5rem), 0, 0);
}
.switch .switch-input:checked:active:not(:disabled):before {
  margin-left: -0.5rem;
}
.switch .switch-input:checked:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1rem #5d88ef;
}
.switch .switch-input:checked:focus, .switch .switch-input:checked:focus-within {
  box-shadow: inset 0 0 0 1rem #5d88ef;
}
.switch .switch-input:disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
  user-select: none;
}
.switch .switch-input:disabled:before {
  background-color: #f8f8f8;
}
.options_switch {
    display: flex;
    justify-content: space-around;

    margin-top: 10px;
}




/*////////////////
POPUP DETALLES
////////////////*/
div#EDdetallesBox {
    min-height: 120px;

}
i.fa.fa-flag.fill {
    color: #6300ff;
}

/*///////
GUARDAR TEXTO AJAX
/////////////////*/
span.save, .saver {
    position: absolute;
    right: 0;
    bottom: 0px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #6300ff;
    color: white;
    cursor: pointer;
    opacity:0;
    visibility:hidden;
    font-size: 20px;
    border-radius: 4px;
}

.bt_comentario {
    position: relative;
    padding-right: 0px;
}

span.save.show, .saver.show  {
    opacity:1;
    visibility:visible;
}
.bt_comentario:hover .save, .bt_comentario:focus .save {
    opacity: 1;
    visibility:visible;
}

.bt_comentario:hover .saver, .bt_comentario:focus .saver {
    opacity: 1;
    visibility:visible;
}
/*//////////////
MOSTRAR INFORMACION
/////////////////*/
.hide-details {
    display: none;
}

.more-details {
    width: 100%;
}

.bt_show {
    padding: 5px 10px;
    margin: 5px 0 10px;
    display: inline-block;
    cursor: pointer;
    border: 1px solid;
    border-radius: 3px;
}

   /*/Niveles/*/
   
   .niveles img {
       width: 40px;
   }
   
   .nivel-svg {
       width: 30px;
   }
   .niveles img:hover {
       transition: .4s;
       transform: scale(1.1);
   }
   .nivel button {border: 0;}
   
   .niveles button {
       border: 0;
       outline: none;
       background: transparent;
   }
   
   .dropdown-menu.dropdown-menu-right.niveles {
   padding: 10px;
       width: 120px;
       min-width: inherit;
   }
   
   
   
   /* Formulario Modal */
   .dropdown-menu-lg .dropdown-item {
       padding: 13px 10px;
       display: block;
       width: 100%;
       text-align: left;
   }
   
   .modal-dialog.lg {
       max-width: 650px;
       margin: 1.75rem auto;
   }
   
   .form-container {
       width: 100%;
       background: white;
   }
   .form-flex {
       display: flex;
       flex-wrap: wrap;
   }
   
   .form-block {
       width: 100%;
       padding: 5px 0px;
       position: relative;
       display: flex;
       margin-bottom: 10px;
           flex-wrap: wrap;
   }
   
   .item-form .input-group-append {
       position: absolute;
       left: 1px;
       top: 0;
       height: 100%;
   }
   
   input.btn-enviar {
       background: #2626bc;
       color: white;
       border: 0;
       outline: none;
       padding: 3px 20px;
       border-radius: 5px;
   }
   .item-form i {
       position: absolute;
       left: 0;
       width: 30px;
       top: 0;
       display: flex;
       color: #fff;
       justify-content: center;
       align-items: center;
       height: 100%;
       background-color: #333;
      
   }
   .form-block.in2 {
       width: 50%;
   }
   
   .form-block input {
       width: 100%;
       padding: 18px 10px 4px;
       border: 0;
       outline: none;
       background: transparent;
       position: relative;
       z-index: 2;
   }
   
   .form-block label {
       position: absolute;
       z-index: 0;
       color: #585858;
       opacity: 0.9;
       font-weight: 400!important;
       padding: 0 10px;
       transform: translateY(12px);
       transition: 0.4s;
       z-index: 1;
   }
   
   .form-block .has-value label {
       transform: translateY(4px);
       transition: 0.4s;
       opacity: 1;
       font-size: 10px;
       opacity: 0.5;
   }
   
   .modal-content.lg {
       padding: 0px 30px 20px;
   }
   .item-form {
       margin-right: 10px;
       background: #ffffff;
       width: 100%;
       padding: 1px 0;
       border-radius: 3px;
       padding-left: 30px;
       position: relative;
       margin-bottom: 6px;
       border: 1px solid #d9d9d9;
   }
   
   

   /*======================================
        INDICATOR - DASHBOARD - HOME
   /*===================================/*/
   

   .row-sb {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    }

    .box-indicators {
        width: 23%;
        background: white;
        padding: 20px 30px;
        border-radius: 5px;
        height: 170px;
            margin-bottom: 2.5%;
    }

    .box-indicators h6 {
        font-size: 12px;
        margin: 0;
    }

    .box-indicators > .content {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-around;
    }

    span.big {
        font-size: 25px;
        font-weight: 800;
    }

    .box-indicators small {
        font-size: 15px;
        font-weight: 300;
    }





   /*=============================================
   ESCRITORIO GRANDE (LG revisamos en 1366px en adelante)
   =============================================*/
   
   @media (min-width:1200px){
   
   .modal-dialog {
       max-width: 610px;
       margin: 1.75rem auto;
   }
   
   }
   
   /*=============================================
   ESCRITORIO MEDIANO O TABLET HORIZONTAL (MD revisamos en 1024px)
   =============================================*/
   
   @media (max-width:1199px) and (min-width:992px){
   
   
   
   }
   
   /*=============================================
   ESCRITORIO PEQUEÑO O TABLET VERTICAL (SM revisamos en 768px)
   =============================================*/
   
   @media (max-width:991px) and (min-width:768px){
   
   
   
   }
   
   /*=============================================
   MOVIL (XS revisamos en 320px)
   =============================================*/
   
   @media (max-width:767px){
   
   li.nav-item.menu-fix {
       position: fixed;
       bottom: 20px;
       right: 20px;
       background: #111;
       text-align: center;
       border-radius: 50%;
       height: 50px;
       width: 50px;
       color: white;
   }
   
   li.nav-item.menu-fix i {
       color: white;
   }
   
   .navbar-expand .menu-fix .nav-link {
       padding: 0;
       display: flex;
       align-items: center;
       text-align: center;
       justify-content: center;
       height: 50px;
   }
   }
   
   
   /*=============================================
   MOVIL (XS revisamos en 320px)
   =============================================*/
   
   @media (max-width:565px){
       .box-login {
       width: 90%;
       padding: 80px 80px;
       border: 1px solid;
       background: white;
   }
   button.btn-option b {
       display: none;
   }
   
   button.btn-option {
       width: 20px;
       height: 20px;
       border-radius: 50%;
   }
   .dropdown-menu.show {
       display: block;
       min-width: 100px;
   }
   .box-login {
       width: 90%;
       padding: 50px 30px;
    
   }
   .input-row {
       width: 90%;
   
   } 
   button.btn.btn-login {
   
       width: 90%;
   
   } 
   
   }